useSpace (useViewform) Hook

import { SpaceProvider } from './store';
 
function App() {
  return (
    <SpaceProvider>
      <YourComponents />
    </SpaceProvider>
  );
}

import { Space, Overlay, Scene } from '@your-library/components';
 
function App() {
  return (
    <Space tourId="example-tour">
      <Overlay>
        {/* UI Components with store access */}
        <Loading />
        <FloorplanModal />
        <TagModal />
        <Toolbar />
      </Overlay>
      <Scene>
        {/* Three.js/Fiber Components with store access */}
        <Tags />
        <Hotspots />
        <Measurements />
        {/* Add any other fiber content here that needs store access */}
      </Scene>
    </Space>
  );
}

Space (provides store context)
├── Overlay (for UI components)
│   ├── Loading
│   ├── FloorplanModal
│   ├── TagModal
│   └── Toolbar
└── Scene (for 3D/Fiber components)
    ├── Tags
    ├── Hotspots
    └── Measurements

// Component in Overlay
function Toolbar() {
  const currentCamera = useSpace(state => state.currentCamera);
  return <div>{/* UI implementation */}</div>;
}
 
// Component in Scene
function Hotspots() {
  const hotspots = useSpace(state => state.hotspots);
  return <>{/* Three.js/Fiber implementation */}</>;
}

import { Space, Overlay, Scene } from '@your-library/components';
import { useSpace } from './store';
 
function App() {
  return (
    <Space tourId="example-tour">
      <Overlay>
        <CustomUI />
      </Overlay>
      <Scene>
        <Custom3DContent />
      </Scene>
    </Space>
  );
}
 
// UI Component Example
function CustomUI() {
  const { loading, currentCamera } = useSpace(
    state => ({
      loading: state.loading,
      currentCamera: state.currentCamera
    }),
    shallow
  );
 
  return (
    <div>
      {loading ? 'Loading...' : `Current Camera: ${currentCamera?.id}`}
    </div>
  );
}
 
// Scene Component Example
function Custom3DContent() {
  const cameras = useSpace(state => state.cameras);
 
  return (
    <group>
      {cameras.map((camera) => (
          <Sphere 
            key={camera.id} 
            position={[camera.position.x, camera.position.y, camera.position.z]}
            args={[0.1, 16, 16]} />
      ))}
    </group>
  );
}

export interface TourSlice {
    id?: string;
    instanceId?: string;
    loading: boolean;
    tour?: IViewformTour;
    initializeTour: (tour: IViewformTour, sasInfo: ISasInfo) => void;
    updateTour: (tour: IViewformTour, sasInfo: ISasInfo) => void;
    refresh: () => void;
    destroy: () => void;
}

export interface CameraSlice {
    cameras: ICameraDetails[];
    currentResolution: Resolution;
    currentCamera?: ICameraDetails;
    currentCameraIndex?: number;
    cubeMapLoader?: CubeMapLoader;
    setCurrentCamera: (camera: ICameraDetails, index: number) => void;
    setCubeMapLoader: (cubeMapLoader: CubeMapLoader) => void;
}

export interface ModelSlice {
    modelCache: any;
    currentModels: IModelDetailsRich[];
    modelRef: Object3D | undefined;
    isSyntheticModel: boolean;
    setModelRef: (ref: Object3D, synthetic: boolean) => void;
    getModelDownloadUrl: (model: ModelDetails) => string;
    downloadModel: (model: ModelDetails) => Promise<GLTF>;
    modelViewType?: ModelViewType;
    setModelViewType: (m: ModelViewType) => void;
}

export interface ControlsSlice {
    timeline: Timeline;
    animating: boolean;
    jumpMode: JumpMode;
    canZoom: boolean;
    zoom: number;
    canvas?: HTMLCanvasElement;
    camera?: PerspectiveCamera;
    frame?: HTMLElement;
    controlsEnabled: boolean;
    canTilt: boolean;
    canRotate: boolean;
    currentRotation: Euler;
    allowJumpYawRotationCorrection?: boolean;
    allowJumpPitchRotationCorrection?: boolean;
    controls: any;
}

export interface AnnotationSlice {
    tags: IAnnotationDetails[];
    currentTag?: IAnnotationDetails;
    setCurrentTag: (tag?: IAnnotationDetails) => void;
}

export interface ImageVersionSlice {
    imageVersion?: IImageVersion;
    imageVersionIndex: number;
    getSelectableImageVersions: () => IImageVersion[];
    setImageVersion: (index: number) => void;
    setImageVersionByName: (name: string) => void;
    setImageVersionById: (id: string) => void;
}

export interface MeasurementSlice {
    canMeasure: boolean;
    points: Vector3[];
    measurements: Measurement[];
    addMeasurement: (point: Vector3) => void;
    clearMeasurements: () => void;
    enableMeasurement: (enable: boolean) => void;
    addMeasurements: (data: Measurement[]) => void;
}

export interface HotspotSlice {
    hotspots: IHotspotDetails[];
    currentHotspot?: IHotspotDetails;
    initializeHotspots: (tour: IViewformTour, shape: HotspotShape, animation: HotspotAnimation, color: string) => void;
    setCurrentHotspot: (camera: ICameraDetails) => void;
}

export interface EventSlice {
    listeners: Listeners;
    addListeners: (listeners: Partial<Listeners>) => void;
    emitRotation: (e: Euler) => void;
    emitRotationStart: (e: Euler) => void;
    emitRotationEnd: (e: Euler) => void;
    emitJumpStart: (current: ICameraDetails, next: ICameraDetails) => void;
    emitJumpEnd: (current: ICameraDetails) => void;
    emitKeyframeStart: (current: Keyframe) => void;
    emitFov: (v: number) => void;
}

export interface ResolutionSlice {
    loadDurations: ResolutionLoadDuration[];
    canvasPerformance: number;
    networkQuality: number;
    isMobileDevice: boolean;
    resolution: Resolution;
    minResolution: Resolution;
    selectedResolution?: Resolution;
    currentLoadedResolution?: Resolution;
    setCanvasPerformance: (value: number) => void;
    setIsMobileDevice: (value: boolean) => void;
    setNetworkQuality: (value: number) => void;
    computeResolution: () => void;
    recordCameraLoad: (duration: number, resolution: Resolution) => void;
    setSelectedResolution: (r?: Resolution) => void;
}

export interface LoadingSlice {
    firstCameraLoaded: boolean;
    modelLoaded: boolean;
    modelLoading: boolean;
    setFirstCameraLoaded: (v: boolean) => void;
    setModelLoaded: (v: boolean) => void;
    setModelLoading: (v: boolean) => void;
}

export interface CursorSlice {
    cursorPosition: Vector3;
    currsorLookAt: Vector3;
    closestCamera?: CameraDetails;
    setCursor: (position: Vector3, lookAt: Vector3) => void;
}

export interface AttachmentSlice {
    getAttachmentDownloadUrl: (attachment: AttachmentDetails) => string;
}

export interface FlagSlice extends FlagSliceProps {
    setUIFlag: (p: Partial<FlagSliceProps>) => void;
}

export interface GroupSlice {
    groups: IGroupDetails[];
    currentGroups?: GroupDetails[];
    setCurrentGroups: (groups?: GroupDetails[]) => void;
}

export interface ConfiguratorSlice {
    configurators: ConfiguratorDetails[];
    currentConfigurator?: ConfiguratorDetails;
    currentThemes: ThemeDetails[];
    initilizeConfigurators: (configurators: ConfiguratorDetails[], themes: ThemeDetails[]) => void;
    setCurrentTheme: (theme: ThemeDetails) => string[];
    setCurrentThemesByVersion: (version: ImageVersion) => void;
    setCurrentConfigurator: (c?: ConfiguratorDetails) => void;
}

// BAD: Will re-render on every store update
const { camera, model } = useSpace(state => ({
  camera: state.currentCamera,
  model: state.currentModels
}));
 
// GOOD: Only re-renders when these specific values change
const { camera, model } = useSpace(
  state => ({
    camera: state.currentCamera,
    model: state.currentModels
  }),
  shallow
);

// BAD: Subscribes to entire camera object
const camera = useSpace(state => state.currentCamera);
 
// GOOD: Subscribe only to needed properties
const cameraId = useSpace(state => state.currentCamera?.id);
const cameraPosition = useSpace(state => state.currentCamera?.position);

// BAD: Creates new selector on every render
function Component() {
  const activeCameras = useSpace(state => 
    state.cameras.filter(camera => camera.active)
  );
}
 
// GOOD: Memoized selector
const selectActiveCameras = (state) => 
  state.cameras.filter(camera => camera.active);
 
function Component() {
  const activeCameras = useSpace(selectActiveCameras);
}

// BAD: Updating multiple slices at once
const updateEverything = useSpace(state => ({
  setCamera: state.setCurrentCamera,
  setModel: state.setModelRef,
  setControls: state.setControls
}));
 
// GOOD: Separate concerns
const setCamera = useSpace(state => state.setCurrentCamera);
const setModel = useSpace(state => state.setModelRef);
const setControls = useSpace(state => state.setControls);