import * as THREE from "three"; import { create } from "zustand"; import { io } from "socket.io-client"; import * as CONSTANTS from "../../types/world/worldConstants"; export const useSocketStore = create((set: any, get: any) => ({ socket: null, initializeSocket: (email?: string, organization?: string, token?: string) => { const existingSocket = get().socket; if (existingSocket) { return; } const socket = io( `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder_v1`, { reconnection: true, auth: { token }, } ); const visualizationSocket = io( `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization_v1`, { reconnection: true, auth: { token }, } ); const dashBoardSocket = io( `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/dashboard`, { reconnection: true, auth: { token }, } ); const projectSocket = io( `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/project`, { reconnection: true, auth: { token }, } ); set({ socket, visualizationSocket, dashBoardSocket, projectSocket }); }, disconnectSocket: () => { set((state: any) => { state.socket?.disconnect(); state.visualizationSocket?.disconnect(); state.dashBoardSocket?.disconnect(); state.projectSocket?.disconnect(); return { socket: null }; }); }, })); // export const useSocketStore = create((set: any, get: any) => ({ // socket: null, // initializeSocket: ( // email: string, // organization: string, // userId?: string, // token?: string // ) => { // const existingSocket = get().socket; // if (existingSocket) { // return; // } // const socket = io( // `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`, // { // reconnection: true, // auth: { email, organization }, // } // ); // const visualizationSocket = io( // `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`, // { // reconnection: true, // auth: { email, organization }, // } // ); // const dashBoardSocket = io( // `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/dashboard`, // { // reconnection: true, // auth: { token }, // } // ); // // const dashBoardSocket = io( // // `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/project`, // // { // // reconnection: true, // // auth: { token }, // // } // // ); // set({ socket, visualizationSocket, dashBoardSocket }); // }, // disconnectSocket: () => { // set((state: any) => { // state.socket?.disconnect(); // state.visualizationSocket?.disconnect(); // state.dashBoardSocket?.disconnect(); // return { socket: null }; // }); // }, // })); export const useLoadingProgress = create<{ loadingProgress: number; setLoadingProgress: (x: number) => void; }>((set) => ({ loadingProgress: 1, setLoadingProgress: (x: number) => set({ loadingProgress: x }), })); export const useOrganization = create((set: any) => ({ organization: "", setOrganization: (x: any) => set(() => ({ organization: x })), })); export const useToggleView = create((set: any) => ({ toggleView: false, setToggleView: (x: any) => set(() => ({ toggleView: x })), })); export const useUpdateScene = create((set: any) => ({ updateScene: false, setUpdateScene: (x: any) => set(() => ({ updateScene: x })), })); export const useWalls = create((set: any) => ({ walls: [], setWalls: (x: any) => set(() => ({ walls: x })), })); export const useRoomsState = create((set: any) => ({ roomsState: [], setRoomsState: (x: any) => set(() => ({ roomsState: x })), })); export const useZones = create((set: any) => ({ zones: [], setZones: (callback: any) => set((state: any) => ({ zones: typeof callback === "function" ? callback(state.zones) : callback, })), })); interface ZonePointsState { zonePoints: THREE.Vector3[]; setZonePoints: (points: THREE.Vector3[]) => void; } export const useZonePoints = create((set) => ({ zonePoints: [], setZonePoints: (points) => set({ zonePoints: points }), })); export const useSelectedItem = create((set: any) => ({ selectedItem: { name: "", id: "", type: undefined, category: "", subCatergory: "", }, setSelectedItem: (x: any) => set(() => ({ selectedItem: x })), })); export const useNavMesh = create((set: any) => ({ navMesh: null, setNavMesh: (x: any) => set({ navMesh: x }), })); export const useSelectedAssets = create((set: any) => ({ selectedAssets: [], setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })), })); export const useLayers = create((set: any) => ({ Layers: 1, setLayers: (x: any) => set(() => ({ Layers: x })), })); export const useCamPosition = create((set: any) => ({ camPosition: { x: undefined, y: undefined, z: undefined }, setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }), })); export const useMenuVisible = create((set: any) => ({ menuVisible: false, setMenuVisible: (x: any) => set(() => ({ menuVisible: x })), })); // export const useDeleteTool = create((set: any) => ({ // deleteTool: false, // setDeleteTool: (x: any) => set(() => ({ deleteTool: x })), // })); export const useToolMode = create((set: any) => ({ toolMode: null, setToolMode: (x: any) => set(() => ({ toolMode: x })), })); export const useNewLines = create((set: any) => ({ newLines: [], setNewLines: (x: any) => set(() => ({ newLines: x })), })); export const useDeletedLines = create((set: any) => ({ deletedLines: [], setDeletedLines: (x: any) => set(() => ({ deletedLines: x })), })); export const useMovePoint = create((set: any) => ({ movePoint: false, setMovePoint: (x: any) => set(() => ({ movePoint: x })), })); // export const useDeletePointOrLine = create((set: any) => ({ // deletePointOrLine: false, // setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })), // })); export const useWallItems = create((set: any) => ({ wallItems: [], setWallItems: (callback: any) => set((state: any) => ({ wallItems: typeof callback === "function" ? callback(state.wallItems) : callback, })), })); export const useSelectedWallItem = create((set: any) => ({ selectedWallItem: null, setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })), })); export const useSelectedFloorItem = create((set: any) => ({ selectedFloorItem: null, setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })), })); export const useDeletableFloorItem = create((set: any) => ({ deletableFloorItem: null, setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })), })); export const useSetScale = create((set: any) => ({ scale: null, setScale: (x: any) => set(() => ({ scale: x })), })); export const useRoofVisibility = create((set: any) => ({ roofVisibility: false, setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })), })); export const useWallVisibility = create((set: any) => ({ wallVisibility: false, setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })), })); export const useShadows = create((set: any) => ({ shadows: false, setShadows: (x: any) => set(() => ({ shadows: x })), })); export const useSunPosition = create((set: any) => ({ sunPosition: { x: undefined, y: undefined, z: undefined }, setSunPosition: (newSuntPosition: any) => set({ sunPosition: newSuntPosition }), })); export const useRemoveLayer = create((set: any) => ({ removeLayer: false, setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })), })); export const useRemovedLayer = create((set: any) => ({ removedLayer: null, setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })), })); export const useProjectName = create((set: any) => ({ projectName: "Creating Your Project", setProjectName: (x: any) => set({ projectName: x }), })); export const useActiveLayer = create((set: any) => ({ activeLayer: 1, setActiveLayer: (x: any) => set({ activeLayer: x }), })); interface RefTextUpdateState { refTextupdate: number; setRefTextUpdate: ( callback: (currentValue: number) => number | number ) => void; } export const useRefTextUpdate = create((set) => ({ refTextupdate: -1000, setRefTextUpdate: (callback) => set((state) => ({ refTextupdate: typeof callback === "function" ? callback(state.refTextupdate) : callback, })), })); export const useResetCamera = create((set: any) => ({ resetCamera: false, setResetCamera: (x: any) => set({ resetCamera: x }), })); export const useAddAction = create((set: any) => ({ addAction: null, setAddAction: (x: any) => set({ addAction: x }), })); export const useActiveTool = create((set: any) => ({ activeTool: "cursor", setActiveTool: (x: any) => set({ activeTool: x }), })); export const useActiveSubTool = create((set: any) => ({ activeSubTool: "cursor", setActiveSubTool: (x: any) => set({ activeSubTool: x }), })); export const use2DUndoRedo = create((set: any) => ({ is2DUndoRedo: null, set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }), })); export const useElevation = create((set: any) => ({ elevation: 45, setElevation: (x: any) => set({ elevation: x }), })); export const useAzimuth = create((set: any) => ({ azimuth: -160, setAzimuth: (x: any) => set({ azimuth: x }), })); export const useRenderDistance = create((set: any) => ({ renderDistance: 40, setRenderDistance: (x: any) => set({ renderDistance: x }), })); export const useCamMode = create((set: any) => ({ camMode: "ThirdPerson", setCamMode: (x: any) => set({ camMode: x }), })); export const useUserName = create((set: any) => ({ userName: "", setUserName: (x: any) => set({ userName: x }), })); export const useRenameModeStore = create((set: any) => ({ isRenameMode: false, setIsRenameMode: (state: boolean) => set({ isRenameMode: state }), })); export const useObjectPosition = create((set: any) => ({ objectPosition: { x: undefined, y: undefined, z: undefined }, setObjectPosition: (newObjectPosition: any) => set({ objectPosition: newObjectPosition }), })); export const useObjectRotation = create((set: any) => ({ objectRotation: { x: undefined, y: undefined, z: undefined }, setObjectRotation: (newObjectRotation: any) => set({ objectRotation: newObjectRotation }), })); export const useDrieTemp = create((set: any) => ({ drieTemp: undefined, setDrieTemp: (x: any) => set({ drieTemp: x }), })); export const useActiveUsers = create((set: any) => ({ activeUsers: [], setActiveUsers: (callback: (prev: any[]) => any[] | any[]) => set((state: { activeUsers: any[] }) => ({ activeUsers: typeof callback === "function" ? callback(state.activeUsers) : callback, })), })); export const useDrieUIValue = create((set: any) => ({ drieUIValue: { touch: null, temperature: null, humidity: null }, setDrieUIValue: (x: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })), setTouch: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, touch: value }, })), setTemperature: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, temperature: value }, })), setHumidity: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, humidity: value }, })), })); export const useStartSimulation = create((set: any) => ({ startSimulation: false, setStartSimulation: (x: any) => set({ startSimulation: x }), })); export const useEyeDropMode = create((set: any) => ({ eyeDropMode: false, setEyeDropMode: (x: any) => set({ eyeDropMode: x }), })); export const useEditingPoint = create((set: any) => ({ editingPoint: false, setEditingPoint: (x: any) => set({ editingPoint: x }), })); export const usezoneTarget = create((set: any) => ({ zoneTarget: [], setZoneTarget: (x: any) => set({ zoneTarget: x }), })); export const usezonePosition = create((set: any) => ({ zonePosition: [], setZonePosition: (x: any) => set({ zonePosition: x }), })); interface EditPositionState { Edit: boolean; setEdit: (value: boolean) => void; } export const useEditPosition = create((set) => ({ Edit: false, setEdit: (value) => set({ Edit: value }), })); export const useAsset3dWidget = create((set: any) => ({ widgetSelect: "", setWidgetSelect: (x: any) => set({ widgetSelect: x }), })); export const useWidgetSubOption = create((set: any) => ({ widgetSubOption: "2D", setWidgetSubOption: (x: any) => set({ widgetSubOption: x }), })); export const useLimitDistance = create((set: any) => ({ limitDistance: true, setLimitDistance: (x: any) => set({ limitDistance: x }), })); export const useTileDistance = create((set: any) => ({ gridValue: { size: CONSTANTS.gridConfig.size, divisions: CONSTANTS.gridConfig.divisions, }, planeValue: { height: CONSTANTS.planeConfig.height, width: CONSTANTS.planeConfig.width, }, setGridValue: (value: any) => set((state: any) => ({ gridValue: { ...state.gridValue, ...value }, })), setPlaneValue: (value: any) => set((state: any) => ({ planeValue: { ...state.planeValue, ...value }, })), })); export const usePlayAgv = create((set, get) => ({ PlayAgv: [], setPlayAgv: (updateFn: (prev: any[]) => any[]) => set({ PlayAgv: updateFn(get().PlayAgv) }), })); // Define the Asset type type Asset = { id: string; name: string; position?: [number, number, number]; // Optional: 3D position rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation }; // Zustand store type type ZoneAssetState = { zoneAssetId: Asset | null; setZoneAssetId: (asset: Asset | null) => void; }; // Zustand store export const useZoneAssetId = create((set) => ({ zoneAssetId: null, setZoneAssetId: (asset) => set({ zoneAssetId: asset }), })); // version visible hidden interface VersionHistoryState { viewVersionHistory: boolean; setVersionHistory: (value: boolean) => void; } const useVersionHistoryStore = create((set) => ({ viewVersionHistory: false, setVersionHistory: (value) => set({ viewVersionHistory: value }), })); export default useVersionHistoryStore; interface ShortcutStore { showShortcuts: boolean; setShowShortcuts: (value: boolean) => void; toggleShortcuts: () => void; } export const useShortcutStore = create((set) => ({ showShortcuts: false, setShowShortcuts: (value) => set({ showShortcuts: value }), toggleShortcuts: () => set((state) => ({ showShortcuts: !state.showShortcuts })), })); export const useMachineCount = create((set: any) => ({ machineCount: 0, setMachineCount: (x: any) => set({ machineCount: x }), })); export const useMachineUptime = create((set: any) => ({ machineActiveTime: 0, setMachineActiveTime: (x: any) => set({ machineActiveTime: x }), })); export const useMachineDowntime = create((set: any) => ({ machineIdleTime: 0, setMachineIdleTime: (x: any) => set({ machineIdleTime: x }), })); export const useMaterialCycle = create((set: any) => ({ materialCycleTime: 0, setMaterialCycleTime: (x: any) => set({ materialCycleTime: x }), })); export const useThroughPutData = create((set: any) => ({ throughputData: 0, setThroughputData: (x: any) => set({ throughputData: x }), })); export const useProductionCapacityData = create((set: any) => ({ productionCapacityData: 0, setProductionCapacityData: (x: any) => set({ productionCapacityData: x }), })); export const useProcessBar = create((set: any) => ({ processBar: [], setProcessBar: (x: any) => set({ processBar: x }), })); export const useDfxUpload = create((set: any) => ({ dfxuploaded: [], dfxWallGenerate: [], objValue: { x: 0, y: 0, z: 0 }, setDfxUploaded: (x: any) => set({ dfxuploaded: x }), setDfxGenerate: (x: any) => set({ dfxWallGenerate: x }), setObjValue: (x: any) => set({ objValue: x }), })); type InputValuesStore = { inputValues: Record; setInputValues: (values: Record) => void; updateInputValue: (label: string, value: string) => void; // <- New }; export const useInputValues = create((set) => ({ inputValues: {}, setInputValues: (values) => set({ inputValues: values }), updateInputValue: (label, value) => set((state) => ({ inputValues: { ...state.inputValues, [label]: value, }, })), })); export interface ROISummaryData { productName: string; roiPercentage: number; paybackPeriod: number; totalCost: number; revenueGenerated: number; netProfit: number; netLoss: number; } interface ROISummaryStore { roiSummary: ROISummaryData; setRoiSummaryData: (values: ROISummaryData) => void; } export const useROISummaryData = create((set) => ({ roiSummary: { productName: "", roiPercentage: 0, paybackPeriod: 0, totalCost: 0, revenueGenerated: 0, netProfit: 0, netLoss: 0, }, setRoiSummaryData: (values) => set({ roiSummary: values }), })); interface CompareStore { comparePopUp: boolean; setComparePopUp: (value: boolean) => void; toggleComparePopUp: () => void; } export const useCompareStore = create((set) => ({ comparePopUp: false, setComparePopUp: (value) => set({ comparePopUp: value }), toggleComparePopUp: () => set((state) => ({ comparePopUp: !state.comparePopUp })), })); // Save state store interface SaveVersionStore { isVersionSaved: boolean; setIsVersionSaved: (value: boolean) => void; } export const useSaveVersion = create((set) => ({ isVersionSaved: false, setIsVersionSaved: (value: boolean) => set({ isVersionSaved: value }), })); // Version object type export interface Version { id: string; versionLabel: string; versionName?: string; timestamp: string; savedBy: string; description?: string; } // Version list store interface VersionListStore { versions: Version[]; addVersion: (version: Version) => void; clearVersions: () => void; setVersions: (newVersions: Version[]) => void; updateVersion: (id: string, data: Partial) => void; // ✅ Added } export const useVersionStore = create((set) => ({ versions: [], addVersion: (newVersion) => set((state) => ({ versions: [newVersion, ...state.versions], })), clearVersions: () => set({ versions: [] }), setVersions: (newVersions) => set({ versions: newVersions }), updateVersion: (id, data) => set((state) => ({ versions: state.versions.map((version) => version.id === id ? { ...version, ...data } : version ), })), })); interface ViewSceneState { viewSceneLabels: boolean; setViewSceneLabels: (value: boolean | ((prev: boolean) => boolean)) => void; } export const useViewSceneStore = create((set) => ({ viewSceneLabels: getInitialViewSceneLabels(), setViewSceneLabels: (value) => { set((state) => { const newValue = typeof value === 'function' ? value(state.viewSceneLabels) : value; // Store in localStorage manually localStorage.setItem('viewSceneLabels', JSON.stringify(newValue)); return { viewSceneLabels: newValue }; }); }, })); function getInitialViewSceneLabels(): boolean { if (typeof window === 'undefined') return false; // SSR safety const saved = localStorage.getItem('viewSceneLabels'); return saved ? JSON.parse(saved) : false; } export interface CompareProduct { productUuid: string; productName: string; simulationData: { // costPerUnit: number; // workingDaysPerYear: number; // shiftLength: number; // shiftsPerDay: number; roiPercentage: number; // paybackPeriod: number; // totalCost: number; // revenueGenerated: number; netProfit: number; // netLoss: number; machineIdleTime: number; machineActiveTime: number; throughputData: number; } } export const useCompareProductDataStore = create<{ compareProductsData: CompareProduct[]; setCompareProductsData: (x: CompareProduct[]) => void; }>((set) => ({ compareProductsData: [], setCompareProductsData: (x) => set({ compareProductsData: x }), }));