Merge remote-tracking branch 'origin/main' into simulation-agv
This commit is contained in:
commit
bb4f846528
|
@ -8,7 +8,7 @@ import StateWorking from "./cards/StateWorking";
|
||||||
const CardsScene = () => {
|
const CardsScene = () => {
|
||||||
return (
|
return (
|
||||||
<div className="cards-scene" style={{ width: "100%", height: "100%" }}>
|
<div className="cards-scene" style={{ width: "100%", height: "100%" }}>
|
||||||
<Canvas>
|
{/* <Canvas> */}
|
||||||
{/* 3d-cards */}
|
{/* 3d-cards */}
|
||||||
|
|
||||||
{/* <ProductionCapacity /> */}
|
{/* <ProductionCapacity /> */}
|
||||||
|
@ -16,8 +16,8 @@ const CardsScene = () => {
|
||||||
{/* <StateWorking /> */}
|
{/* <StateWorking /> */}
|
||||||
{/* <Throughput /> */}
|
{/* <Throughput /> */}
|
||||||
|
|
||||||
<OrbitControls />
|
{/* <OrbitControls /> */}
|
||||||
</Canvas>
|
{/* </Canvas> */}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -30,9 +30,11 @@ interface ProductionCapacityProps {
|
||||||
id: string;
|
id: string;
|
||||||
type: string;
|
type: string;
|
||||||
position: [number, number, number];
|
position: [number, number, number];
|
||||||
|
onContextMenu?: (event: React.MouseEvent) => void;
|
||||||
|
// onPointerDown:any
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, position }) => {
|
const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, position, onContextMenu }) => {
|
||||||
|
|
||||||
const { selectedChartId, setSelectedChartId } = useWidgetStore();
|
const { selectedChartId, setSelectedChartId } = useWidgetStore();
|
||||||
|
|
||||||
|
@ -178,15 +180,13 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, posi
|
||||||
return (
|
return (
|
||||||
<Html position={[position[0], position[1], position[2]]}
|
<Html position={[position[0], position[1], position[2]]}
|
||||||
scale={[0.5, 0.5, 0.5]}
|
scale={[0.5, 0.5, 0.5]}
|
||||||
|
zIndexRange={[1, 0]}
|
||||||
transform
|
transform
|
||||||
sprite>
|
sprite>
|
||||||
<div className="productionCapacity-wrapper card"
|
<div className="productionCapacity-wrapper card"
|
||||||
onClick={
|
onClick={() => setSelectedChartId({ id: id, type: type })}
|
||||||
() => setSelectedChartId({
|
onContextMenu={onContextMenu}
|
||||||
id: id,
|
>
|
||||||
type: type
|
|
||||||
})
|
|
||||||
}>
|
|
||||||
<div className="headeproductionCapacityr-wrapper">
|
<div className="headeproductionCapacityr-wrapper">
|
||||||
<div className="header">Production Capacity</div>
|
<div className="header">Production Capacity</div>
|
||||||
<div className="production-capacity">
|
<div className="production-capacity">
|
||||||
|
|
|
@ -43,8 +43,9 @@ interface ReturnOfInvestmentProps {
|
||||||
id: string;
|
id: string;
|
||||||
type: string;
|
type: string;
|
||||||
position: [number, number, number];
|
position: [number, number, number];
|
||||||
|
onContextMenu?: (event: React.MouseEvent) => void;
|
||||||
}
|
}
|
||||||
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position }) => {
|
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position, onContextMenu }) => {
|
||||||
|
|
||||||
const { selectedChartId, setSelectedChartId } = useWidgetStore();
|
const { selectedChartId, setSelectedChartId } = useWidgetStore();
|
||||||
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
|
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
|
||||||
|
@ -210,12 +211,9 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
|
||||||
zIndexRange={[1, 0]}
|
zIndexRange={[1, 0]}
|
||||||
sprite>
|
sprite>
|
||||||
<div className="returnOfInvestment card"
|
<div className="returnOfInvestment card"
|
||||||
onClick={
|
onClick={() => setSelectedChartId({ id: id, type: type })}
|
||||||
() => setSelectedChartId({
|
onContextMenu={onContextMenu}
|
||||||
id: id,
|
>
|
||||||
type: type
|
|
||||||
})
|
|
||||||
}>
|
|
||||||
<div className="header">Return of Investment</div>
|
<div className="header">Return of Investment</div>
|
||||||
<div className="lineGraph charts">
|
<div className="lineGraph charts">
|
||||||
{/* Smooth curve graph with two datasets */}
|
{/* Smooth curve graph with two datasets */}
|
||||||
|
|
|
@ -10,8 +10,9 @@ interface StateWorkingProps {
|
||||||
id: string;
|
id: string;
|
||||||
type: string;
|
type: string;
|
||||||
position: [number, number, number];
|
position: [number, number, number];
|
||||||
|
onContextMenu?: (event: React.MouseEvent) => void;
|
||||||
}
|
}
|
||||||
const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
|
const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, onContextMenu }) => {
|
||||||
const { selectedChartId, setSelectedChartId } = useWidgetStore();
|
const { selectedChartId, setSelectedChartId } = useWidgetStore();
|
||||||
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
|
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
|
||||||
const [measurements, setmeasurements] = useState<any>({});
|
const [measurements, setmeasurements] = useState<any>({});
|
||||||
|
@ -96,12 +97,9 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
|
||||||
zIndexRange={[1, 0]}
|
zIndexRange={[1, 0]}
|
||||||
sprite>
|
sprite>
|
||||||
<div className="stateWorking-wrapper card"
|
<div className="stateWorking-wrapper card"
|
||||||
onClick={
|
onClick={() => setSelectedChartId({ id: id, type: type })}
|
||||||
() => setSelectedChartId({
|
onContextMenu={onContextMenu}
|
||||||
id: id,
|
>
|
||||||
type: type
|
|
||||||
})
|
|
||||||
}>
|
|
||||||
<div className="header-wrapper">
|
<div className="header-wrapper">
|
||||||
<div className="header">
|
<div className="header">
|
||||||
<span>State</span>
|
<span>State</span>
|
||||||
|
|
|
@ -45,9 +45,10 @@ interface ThroughputProps {
|
||||||
id: string;
|
id: string;
|
||||||
type: string;
|
type: string;
|
||||||
position: [number, number, number];
|
position: [number, number, number];
|
||||||
|
onContextMenu?: (event: React.MouseEvent) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
|
const Throughput: React.FC<ThroughputProps> = ({ id, type, position, onContextMenu }) => {
|
||||||
|
|
||||||
const { selectedChartId, setSelectedChartId } = useWidgetStore();
|
const { selectedChartId, setSelectedChartId } = useWidgetStore();
|
||||||
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
|
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
|
||||||
|
@ -190,12 +191,9 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
|
||||||
zIndexRange={[1, 0]}
|
zIndexRange={[1, 0]}
|
||||||
sprite>
|
sprite>
|
||||||
<div className="throughput-wrapper"
|
<div className="throughput-wrapper"
|
||||||
onClick={
|
onClick={() => setSelectedChartId({ id: id, type: type })}
|
||||||
() => setSelectedChartId({
|
onContextMenu={onContextMenu}
|
||||||
id: id,
|
>
|
||||||
type: type
|
|
||||||
})
|
|
||||||
}>
|
|
||||||
<div className="header">{name}</div>
|
<div className="header">{name}</div>
|
||||||
<div className="display-value">
|
<div className="display-value">
|
||||||
<div className="left">
|
<div className="left">
|
||||||
|
|
|
@ -101,7 +101,6 @@ const ProgressBarWidget = ({
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
console.log(chartTypes, "chartTypes");
|
|
||||||
|
|
||||||
const Widgets2D = () => {
|
const Widgets2D = () => {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -10,6 +10,7 @@ import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
|
||||||
import LabledDropdown from "../../../ui/inputs/LabledDropdown";
|
import LabledDropdown from "../../../ui/inputs/LabledDropdown";
|
||||||
import { handleResize } from "../../../../functions/handleResizePannel";
|
import { handleResize } from "../../../../functions/handleResizePannel";
|
||||||
import {
|
import {
|
||||||
|
useFloorItems,
|
||||||
useSelectedActionSphere,
|
useSelectedActionSphere,
|
||||||
useSelectedPath,
|
useSelectedPath,
|
||||||
useSimulationPaths,
|
useSimulationPaths,
|
||||||
|
@ -17,11 +18,14 @@ import {
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import * as Types from "../../../../types/world/worldTypes";
|
import * as Types from "../../../../types/world/worldTypes";
|
||||||
import InputToggle from "../../../ui/inputs/InputToggle";
|
import InputToggle from "../../../ui/inputs/InputToggle";
|
||||||
|
import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
|
||||||
|
import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
|
||||||
|
|
||||||
const ConveyorMechanics: React.FC = () => {
|
const ConveyorMechanics: React.FC = () => {
|
||||||
const { selectedActionSphere } = useSelectedActionSphere();
|
const { selectedActionSphere } = useSelectedActionSphere();
|
||||||
const { selectedPath, setSelectedPath } = useSelectedPath();
|
const { selectedPath, setSelectedPath } = useSelectedPath();
|
||||||
const { simulationPaths, setSimulationPaths } = useSimulationPaths();
|
const { simulationPaths, setSimulationPaths } = useSimulationPaths();
|
||||||
|
const { floorItems, setFloorItems } = useFloorItems();
|
||||||
|
|
||||||
const actionsContainerRef = useRef<HTMLDivElement>(null);
|
const actionsContainerRef = useRef<HTMLDivElement>(null);
|
||||||
const triggersContainerRef = useRef<HTMLDivElement>(null);
|
const triggersContainerRef = useRef<HTMLDivElement>(null);
|
||||||
|
@ -36,6 +40,19 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
.find((point) => point.uuid === selectedActionSphere.point.uuid);
|
.find((point) => point.uuid === selectedActionSphere.point.uuid);
|
||||||
}, [selectedActionSphere, simulationPaths]);
|
}, [selectedActionSphere, simulationPaths]);
|
||||||
|
|
||||||
|
const updateBackend = async (updatedPath: Types.ConveyorEventsSchema | undefined) => {
|
||||||
|
if (!updatedPath) return;
|
||||||
|
// const email = localStorage.getItem("email");
|
||||||
|
// const organization = email ? email.split("@")[1].split(".")[0] : "";
|
||||||
|
// console.log('updatedPath: ', updatedPath);
|
||||||
|
// const a = await setEventApi(
|
||||||
|
// organization,
|
||||||
|
// updatedPath.modeluuid,
|
||||||
|
// updatedPath.points
|
||||||
|
// );
|
||||||
|
// console.log('a: ', a);
|
||||||
|
}
|
||||||
|
|
||||||
const handleAddAction = () => {
|
const handleAddAction = () => {
|
||||||
if (!selectedActionSphere) return;
|
if (!selectedActionSphere) return;
|
||||||
|
|
||||||
|
@ -65,6 +82,15 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const updatedPath = updatedPaths.find(
|
||||||
|
(path): path is Types.ConveyorEventsSchema =>
|
||||||
|
path.type === "Conveyor" &&
|
||||||
|
path.points.some(
|
||||||
|
(point) => point.uuid === selectedActionSphere.point.uuid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
updateBackend(updatedPath);
|
||||||
|
|
||||||
setSimulationPaths(updatedPaths);
|
setSimulationPaths(updatedPaths);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -89,6 +115,15 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
: path
|
: path
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const updatedPath = updatedPaths.find(
|
||||||
|
(path): path is Types.ConveyorEventsSchema =>
|
||||||
|
path.type === "Conveyor" &&
|
||||||
|
path.points.some(
|
||||||
|
(point) => point.uuid === selectedActionSphere.point.uuid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
updateBackend(updatedPath);
|
||||||
|
|
||||||
setSimulationPaths(updatedPaths);
|
setSimulationPaths(updatedPaths);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -128,6 +163,15 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
: path
|
: path
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const updatedPath = updatedPaths.find(
|
||||||
|
(path): path is Types.ConveyorEventsSchema =>
|
||||||
|
path.type === "Conveyor" &&
|
||||||
|
path.points.some(
|
||||||
|
(point) => point.uuid === selectedActionSphere.point.uuid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
updateBackend(updatedPath);
|
||||||
|
|
||||||
setSimulationPaths(updatedPaths);
|
setSimulationPaths(updatedPaths);
|
||||||
|
|
||||||
// Update the selected item to reflect changes
|
// Update the selected item to reflect changes
|
||||||
|
@ -174,6 +218,15 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
: path
|
: path
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const updatedPath = updatedPaths.find(
|
||||||
|
(path): path is Types.ConveyorEventsSchema =>
|
||||||
|
path.type === "Conveyor" &&
|
||||||
|
path.points.some(
|
||||||
|
(point) => point.uuid === selectedActionSphere.point.uuid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
updateBackend(updatedPath);
|
||||||
|
|
||||||
setSimulationPaths(updatedPaths);
|
setSimulationPaths(updatedPaths);
|
||||||
|
|
||||||
// Update selected item if it's the current action
|
// Update selected item if it's the current action
|
||||||
|
@ -209,6 +262,15 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
: path
|
: path
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const updatedPath = updatedPaths.find(
|
||||||
|
(path): path is Types.ConveyorEventsSchema =>
|
||||||
|
path.type === "Conveyor" &&
|
||||||
|
path.points.some(
|
||||||
|
(point) => point.uuid === selectedActionSphere.point.uuid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
updateBackend(updatedPath);
|
||||||
|
|
||||||
setSimulationPaths(updatedPaths);
|
setSimulationPaths(updatedPaths);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -238,6 +300,15 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
: path
|
: path
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const updatedPath = updatedPaths.find(
|
||||||
|
(path): path is Types.ConveyorEventsSchema =>
|
||||||
|
path.type === "Conveyor" &&
|
||||||
|
path.points.some(
|
||||||
|
(point) => point.uuid === selectedActionSphere.point.uuid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
updateBackend(updatedPath);
|
||||||
|
|
||||||
setSimulationPaths(updatedPaths);
|
setSimulationPaths(updatedPaths);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -248,6 +319,15 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
path.modeluuid === selectedPath.path.modeluuid ? { ...path, speed } : path
|
path.modeluuid === selectedPath.path.modeluuid ? { ...path, speed } : path
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const updatedPath = updatedPaths.find(
|
||||||
|
(path): path is Types.ConveyorEventsSchema =>
|
||||||
|
path.type === "Conveyor" &&
|
||||||
|
path.points.some(
|
||||||
|
(point) => point.uuid === selectedActionSphere.point.uuid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
updateBackend(updatedPath);
|
||||||
|
|
||||||
setSimulationPaths(updatedPaths);
|
setSimulationPaths(updatedPaths);
|
||||||
setSelectedPath({ ...selectedPath, path: { ...selectedPath.path, speed } });
|
setSelectedPath({ ...selectedPath, path: { ...selectedPath.path, speed } });
|
||||||
};
|
};
|
||||||
|
@ -278,6 +358,15 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
: path
|
: path
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const updatedPath = updatedPaths.find(
|
||||||
|
(path): path is Types.ConveyorEventsSchema =>
|
||||||
|
path.type === "Conveyor" &&
|
||||||
|
path.points.some(
|
||||||
|
(point) => point.uuid === selectedActionSphere.point.uuid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
updateBackend(updatedPath);
|
||||||
|
|
||||||
setSimulationPaths(updatedPaths);
|
setSimulationPaths(updatedPaths);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -302,6 +391,15 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
: path
|
: path
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const updatedPath = updatedPaths.find(
|
||||||
|
(path): path is Types.ConveyorEventsSchema =>
|
||||||
|
path.type === "Conveyor" &&
|
||||||
|
path.points.some(
|
||||||
|
(point) => point.uuid === selectedActionSphere.point.uuid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
updateBackend(updatedPath);
|
||||||
|
|
||||||
setSimulationPaths(updatedPaths);
|
setSimulationPaths(updatedPaths);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -328,6 +426,15 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
: path
|
: path
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const updatedPath = updatedPaths.find(
|
||||||
|
(path): path is Types.ConveyorEventsSchema =>
|
||||||
|
path.type === "Conveyor" &&
|
||||||
|
path.points.some(
|
||||||
|
(point) => point.uuid === selectedActionSphere.point.uuid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
updateBackend(updatedPath);
|
||||||
|
|
||||||
setSimulationPaths(updatedPaths);
|
setSimulationPaths(updatedPaths);
|
||||||
|
|
||||||
// Ensure the selectedItem is updated immediately
|
// Ensure the selectedItem is updated immediately
|
||||||
|
@ -363,6 +470,15 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
: path
|
: path
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const updatedPath = updatedPaths.find(
|
||||||
|
(path): path is Types.ConveyorEventsSchema =>
|
||||||
|
path.type === "Conveyor" &&
|
||||||
|
path.points.some(
|
||||||
|
(point) => point.uuid === selectedActionSphere.point.uuid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
updateBackend(updatedPath);
|
||||||
|
|
||||||
setSimulationPaths(updatedPaths);
|
setSimulationPaths(updatedPaths);
|
||||||
|
|
||||||
// Immediately update the selected item if it's the one being toggled
|
// Immediately update the selected item if it's the one being toggled
|
||||||
|
@ -400,6 +516,15 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
: path
|
: path
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const updatedPath = updatedPaths.find(
|
||||||
|
(path): path is Types.ConveyorEventsSchema =>
|
||||||
|
path.type === "Conveyor" &&
|
||||||
|
path.points.some(
|
||||||
|
(point) => point.uuid === selectedActionSphere.point.uuid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
updateBackend(updatedPath);
|
||||||
|
|
||||||
setSimulationPaths(updatedPaths);
|
setSimulationPaths(updatedPaths);
|
||||||
|
|
||||||
// Immediately update the selected item if it's the one being toggled
|
// Immediately update the selected item if it's the one being toggled
|
||||||
|
@ -437,6 +562,15 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
: path
|
: path
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const updatedPath = updatedPaths.find(
|
||||||
|
(path): path is Types.ConveyorEventsSchema =>
|
||||||
|
path.type === "Conveyor" &&
|
||||||
|
path.points.some(
|
||||||
|
(point) => point.uuid === selectedActionSphere.point.uuid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
updateBackend(updatedPath);
|
||||||
|
|
||||||
setSimulationPaths(updatedPaths);
|
setSimulationPaths(updatedPaths);
|
||||||
|
|
||||||
// Immediately update selectedItem if it's the currently selected trigger
|
// Immediately update selectedItem if it's the currently selected trigger
|
||||||
|
@ -493,8 +627,7 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
{selectedPoint?.actions.map((action) => (
|
{selectedPoint?.actions.map((action) => (
|
||||||
<div
|
<div
|
||||||
key={action.uuid}
|
key={action.uuid}
|
||||||
className={`list-item ${
|
className={`list-item ${selectedItem?.type === "action" &&
|
||||||
selectedItem?.type === "action" &&
|
|
||||||
selectedItem.item?.uuid === action.uuid
|
selectedItem.item?.uuid === action.uuid
|
||||||
? "active"
|
? "active"
|
||||||
: ""
|
: ""
|
||||||
|
@ -543,8 +676,7 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
{selectedPoint?.triggers.map((trigger) => (
|
{selectedPoint?.triggers.map((trigger) => (
|
||||||
<div
|
<div
|
||||||
key={trigger.uuid}
|
key={trigger.uuid}
|
||||||
className={`list-item ${
|
className={`list-item ${selectedItem?.type === "trigger" &&
|
||||||
selectedItem?.type === "trigger" &&
|
|
||||||
selectedItem.item?.uuid === trigger.uuid
|
selectedItem.item?.uuid === trigger.uuid
|
||||||
? "active"
|
? "active"
|
||||||
: ""
|
: ""
|
||||||
|
@ -588,8 +720,8 @@ const ConveyorMechanics: React.FC = () => {
|
||||||
{selectedItem.type === "action" && (
|
{selectedItem.type === "action" && (
|
||||||
<>
|
<>
|
||||||
<InputToggle
|
<InputToggle
|
||||||
inputKey="enableTrigger"
|
inputKey="enableAction"
|
||||||
label="Enable Trigger"
|
label="Enable Action"
|
||||||
value={selectedItem.item.isUsed}
|
value={selectedItem.item.isUsed}
|
||||||
onClick={() => handleActionToggle(selectedItem.item.uuid)}
|
onClick={() => handleActionToggle(selectedItem.item.uuid)}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -33,7 +33,7 @@ const GlobalProperties: React.FC = () => {
|
||||||
const { setPlaneValue, setGridValue, planeValue, gridValue } =
|
const { setPlaneValue, setGridValue, planeValue, gridValue } =
|
||||||
useTileDistance();
|
useTileDistance();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log(gridValue, planeValue, "values");
|
// console.log(gridValue, planeValue, "values");
|
||||||
}, [gridValue, planeValue]);
|
}, [gridValue, planeValue]);
|
||||||
const { socket } = useSocketStore();
|
const { socket } = useSocketStore();
|
||||||
const { limitDistance, setLimitDistance } = useLimitDistance();
|
const { limitDistance, setLimitDistance } = useLimitDistance();
|
||||||
|
|
|
@ -25,7 +25,7 @@ const BarChartInput = (props: Props) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchZoneData = async () => {
|
const fetchZoneData = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
// console.log("dropdown data:", response.data);
|
// console.log("dropdown data:", response.data);
|
||||||
setDropDownData(response.data);
|
setDropDownData(response.data);
|
||||||
|
|
|
@ -25,7 +25,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchZoneData = async () => {
|
const fetchZoneData = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
// console.log("dropdown data:", response.data);
|
// console.log("dropdown data:", response.data);
|
||||||
setDropDownData(response.data);
|
setDropDownData(response.data);
|
||||||
|
|
|
@ -25,7 +25,7 @@ const FlotingWidgetInput = (props: Props) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchZoneData = async () => {
|
const fetchZoneData = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
// console.log("dropdown data:", response.data);
|
// console.log("dropdown data:", response.data);
|
||||||
setDropDownData(response.data);
|
setDropDownData(response.data);
|
||||||
|
|
|
@ -14,8 +14,6 @@ import { useWidgetStore } from '../../../../../store/useWidgetStore'
|
||||||
|
|
||||||
const InputSelecterComponent = () => {
|
const InputSelecterComponent = () => {
|
||||||
const { selectedChartId } = useWidgetStore();
|
const { selectedChartId } = useWidgetStore();
|
||||||
console.log('selectedChartId:',selectedChartId);
|
|
||||||
|
|
||||||
|
|
||||||
if (selectedChartId && selectedChartId.type && selectedChartId.type === 'bar' ) {
|
if (selectedChartId && selectedChartId.type && selectedChartId.type === 'bar' ) {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -144,7 +144,7 @@ const LineGrapInput = (props: Props) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchZoneData = async () => {
|
const fetchZoneData = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
// console.log("dropdown data:", response.data);
|
// console.log("dropdown data:", response.data);
|
||||||
setDropDownData(response.data);
|
setDropDownData(response.data);
|
||||||
|
|
|
@ -25,7 +25,7 @@ const PieChartInput = (props: Props) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchZoneData = async () => {
|
const fetchZoneData = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
// console.log("dropdown data:", response.data);
|
// console.log("dropdown data:", response.data);
|
||||||
setDropDownData(response.data);
|
setDropDownData(response.data);
|
||||||
|
|
|
@ -25,7 +25,7 @@ const Progress1Input = (props: Props) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchZoneData = async () => {
|
const fetchZoneData = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
// console.log("dropdown data:", response.data);
|
// console.log("dropdown data:", response.data);
|
||||||
setDropDownData(response.data);
|
setDropDownData(response.data);
|
||||||
|
|
|
@ -25,7 +25,7 @@ const Progress2Input = (props: Props) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchZoneData = async () => {
|
const fetchZoneData = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
// console.log("dropdown data:", response.data);
|
// console.log("dropdown data:", response.data);
|
||||||
setDropDownData(response.data);
|
setDropDownData(response.data);
|
||||||
|
|
|
@ -25,7 +25,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchZoneData = async () => {
|
const fetchZoneData = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
// console.log("dropdown data:", response.data);
|
// console.log("dropdown data:", response.data);
|
||||||
setDropDownData(response.data);
|
setDropDownData(response.data);
|
||||||
|
|
|
@ -21,13 +21,11 @@ const Widget2InputCard3D = (props: Props) => {
|
||||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||||
const email = localStorage.getItem("email") || "";
|
const email = localStorage.getItem("email") || "";
|
||||||
const organization = email?.split("@")[1]?.split(".")[0]
|
const organization = email?.split("@")[1]?.split(".")[0]
|
||||||
console.log(selectedChartId);
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchZoneData = async () => {
|
const fetchZoneData = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
// console.log("dropdown data:", response.data);
|
// console.log("dropdown data:", response.data);
|
||||||
setDropDownData(response.data);
|
setDropDownData(response.data);
|
||||||
|
|
|
@ -19,8 +19,6 @@ const Widget3InputCard3D = () => {
|
||||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||||
const email = localStorage.getItem("email") || "";
|
const email = localStorage.getItem("email") || "";
|
||||||
const organization = email?.split("@")[1]?.split(".")[0]
|
const organization = email?.split("@")[1]?.split(".")[0]
|
||||||
console.log(selectedChartId);
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchZoneData = async () => {
|
const fetchZoneData = async () => {
|
||||||
|
|
|
@ -21,13 +21,11 @@ const Widget4InputCard3D = (props: Props) => {
|
||||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||||
const email = localStorage.getItem("email") || "";
|
const email = localStorage.getItem("email") || "";
|
||||||
const organization = email?.split("@")[1]?.split(".")[0]
|
const organization = email?.split("@")[1]?.split(".")[0]
|
||||||
console.log(selectedChartId);
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchZoneData = async () => {
|
const fetchZoneData = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
// console.log("dropdown data:", response.data);
|
// console.log("dropdown data:", response.data);
|
||||||
setDropDownData(response.data);
|
setDropDownData(response.data);
|
||||||
|
|
|
@ -17,6 +17,7 @@ import { duplicateWidgetApi } from "../../../services/realTimeVisulization/zoneD
|
||||||
import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
|
import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
|
||||||
import { useClickOutside } from "./functions/handleWidgetsOuterClick";
|
import { useClickOutside } from "./functions/handleWidgetsOuterClick";
|
||||||
import { useSocketStore } from "../../../store/store";
|
import { useSocketStore } from "../../../store/store";
|
||||||
|
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||||||
|
|
||||||
type Side = "top" | "bottom" | "left" | "right";
|
type Side = "top" | "bottom" | "left" | "right";
|
||||||
|
|
||||||
|
@ -243,6 +244,7 @@ export const DraggableWidget = ({
|
||||||
// useClickOutside(chartWidget, () => {
|
// useClickOutside(chartWidget, () => {
|
||||||
// setSelectedChartId(null);
|
// setSelectedChartId(null);
|
||||||
// });
|
// });
|
||||||
|
const { isPlaying } = usePlayButtonStore();
|
||||||
|
|
||||||
console.log('isPanelHidden: ', isPanelHidden);
|
console.log('isPanelHidden: ', isPanelHidden);
|
||||||
return (
|
return (
|
||||||
|
@ -250,8 +252,7 @@ export const DraggableWidget = ({
|
||||||
<div
|
<div
|
||||||
draggable
|
draggable
|
||||||
key={widget.id}
|
key={widget.id}
|
||||||
className={`chart-container ${
|
className={`chart-container ${(selectedChartId?.id === widget.id) && !isPlaying && "activeChart"
|
||||||
selectedChartId?.id === widget.id && "activeChart"
|
|
||||||
}`}
|
}`}
|
||||||
onPointerDown={handlePointerDown}
|
onPointerDown={handlePointerDown}
|
||||||
onDragStart={handleDragStart}
|
onDragStart={handleDragStart}
|
||||||
|
@ -273,8 +274,7 @@ export const DraggableWidget = ({
|
||||||
{openKebabId === widget.id && (
|
{openKebabId === widget.id && (
|
||||||
<div className="kebab-options" ref={widgetRef}>
|
<div className="kebab-options" ref={widgetRef}>
|
||||||
<div
|
<div
|
||||||
className={`edit btn ${
|
className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""
|
||||||
isPanelFull(widget.panel) ? "btn-blur" : ""
|
|
||||||
}`}
|
}`}
|
||||||
onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
|
onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
|
||||||
>
|
>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { useThree } from "@react-three/fiber";
|
import { useThree } from "@react-three/fiber";
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../store/store";
|
import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../store/store";
|
||||||
import useModuleStore from "../../../store/useModuleStore";
|
import useModuleStore from "../../../store/useModuleStore";
|
||||||
import { ThreeState } from "../../../types/world/worldTypes";
|
import { ThreeState } from "../../../types/world/worldTypes";
|
||||||
|
@ -13,19 +13,32 @@ import { generateUniqueId } from "../../../functions/generateUniqueId";
|
||||||
import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
|
import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
|
||||||
import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
|
import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
|
||||||
import { use3DWidget } from "../../../store/useDroppedObjectsStore";
|
import { use3DWidget } from "../../../store/useDroppedObjectsStore";
|
||||||
import { useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
|
import { useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
|
||||||
|
import { useWidgetStore } from "../../../store/useWidgetStore";
|
||||||
|
import EditWidgetOption from "../menu/EditWidgetOption";
|
||||||
|
|
||||||
export default function Dropped3dWidgets() {
|
export default function Dropped3dWidgets() {
|
||||||
const { widgetSelect } = useAsset3dWidget();
|
const { widgetSelect } = useAsset3dWidget();
|
||||||
const { activeModule } = useModuleStore();
|
const { activeModule } = useModuleStore();
|
||||||
const { raycaster, gl, scene }: ThreeState = useThree();
|
const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
|
||||||
const { widgetSubOption } = useWidgetSubOption();
|
const { widgetSubOption } = useWidgetSubOption();
|
||||||
const { selectedZone } = useSelectedZoneStore();
|
const { selectedZone } = useSelectedZoneStore();
|
||||||
|
const { top, setTop } = useTopData()
|
||||||
|
const { left, setLeft } = useLeftData()
|
||||||
|
const { rightSelect, setRightSelect } = useRightSelected()
|
||||||
|
|
||||||
// ✅ Use Zustand Store instead of useState
|
// ✅ Use Zustand Store instead of useState
|
||||||
const { zoneWidgetData, setZoneWidgetData, addWidget } = useZoneWidgetStore();
|
const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition } = useZoneWidgetStore();
|
||||||
const { setWidgets3D } = use3DWidget();
|
const { setWidgets3D } = use3DWidget();
|
||||||
const { visualizationSocket } = useSocketStore();
|
const { visualizationSocket } = useSocketStore();
|
||||||
|
const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
|
||||||
|
|
||||||
|
const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Floor plane for horizontal move
|
||||||
|
const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)); // Vertical plane for vertical move
|
||||||
|
const planeIntersect = useRef(new THREE.Vector3());
|
||||||
|
// let [verticalPlane, setFloorPlanesVertical] = useState(
|
||||||
|
// new THREE.Plane(new THREE.Vector3(0, 1, 0))
|
||||||
|
// );
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (activeModule !== "visualization") return;
|
if (activeModule !== "visualization") return;
|
||||||
|
@ -36,7 +49,7 @@ export default function Dropped3dWidgets() {
|
||||||
|
|
||||||
async function get3dWidgetData() {
|
async function get3dWidgetData() {
|
||||||
let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
|
let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
|
||||||
console.log('result: ', result);
|
|
||||||
setWidgets3D(result);
|
setWidgets3D(result);
|
||||||
|
|
||||||
const formattedWidgets = result.map((widget: any) => ({
|
const formattedWidgets = result.map((widget: any) => ({
|
||||||
|
@ -89,13 +102,13 @@ export default function Dropped3dWidgets() {
|
||||||
widget: newWidget,
|
widget: newWidget,
|
||||||
zoneId: selectedZone.zoneId
|
zoneId: selectedZone.zoneId
|
||||||
}
|
}
|
||||||
console.log('add3dWidget: ', add3dWidget);
|
|
||||||
if (visualizationSocket) {
|
if (visualizationSocket) {
|
||||||
visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget)
|
visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget)
|
||||||
}
|
}
|
||||||
|
|
||||||
// let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget);
|
// let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget);
|
||||||
// console.log('response: ', response);
|
//
|
||||||
|
|
||||||
// if (response.message === "Widget created successfully") {
|
// if (response.message === "Widget created successfully") {
|
||||||
addWidget(selectedZone.zoneId, newWidget);
|
addWidget(selectedZone.zoneId, newWidget);
|
||||||
|
@ -111,23 +124,142 @@ export default function Dropped3dWidgets() {
|
||||||
|
|
||||||
const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
|
const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!rightClickSelected) return;
|
||||||
|
const email = localStorage.getItem("email") || "";
|
||||||
|
const organization = email?.split("@")[1]?.split(".")[0];
|
||||||
|
if (rightSelect === "Duplicate") {
|
||||||
|
const widgetToDuplicate = activeZoneWidgets.find(w => w.id === rightClickSelected);
|
||||||
|
if (!widgetToDuplicate) return;
|
||||||
|
const newWidget = {
|
||||||
|
id: generateUniqueId(),
|
||||||
|
type: widgetToDuplicate.type,
|
||||||
|
position: [
|
||||||
|
widgetToDuplicate.position[0] + 0.5, // Slightly shift position
|
||||||
|
widgetToDuplicate.position[1],
|
||||||
|
widgetToDuplicate.position[2] + 0.5,
|
||||||
|
] as [number, number, number],
|
||||||
|
};
|
||||||
|
let add3dWidget = {
|
||||||
|
organization,
|
||||||
|
widget: newWidget,
|
||||||
|
zoneId: selectedZone.zoneId
|
||||||
|
};
|
||||||
|
// if (visualizationSocket) {
|
||||||
|
// visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
|
||||||
|
// }
|
||||||
|
addWidget(selectedZone.zoneId, newWidget);
|
||||||
|
setRightSelect(null);
|
||||||
|
setRightClickSelected(null);
|
||||||
|
}
|
||||||
|
if (rightSelect === "Delete") {
|
||||||
|
let deleteWidget = {
|
||||||
|
organization,
|
||||||
|
widgetId: rightClickSelected,
|
||||||
|
zoneId: selectedZone.zoneId
|
||||||
|
};
|
||||||
|
// if (visualizationSocket) {
|
||||||
|
// visualizationSocket.emit("v2:viz-3D-widget:delete", deleteWidget);
|
||||||
|
// }
|
||||||
|
setZoneWidgetData(selectedZone.zoneId, activeZoneWidgets.filter(w => w.id !== rightClickSelected));
|
||||||
|
setRightClickSelected(null);
|
||||||
|
setRightSelect(null);
|
||||||
|
}
|
||||||
|
if (rightSelect === "Horizontal Move") {
|
||||||
|
|
||||||
|
}
|
||||||
|
if (rightSelect === "Vertical Move") {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}, [rightSelect, rightClickSelected]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleMouseMove = (event: MouseEvent) => {
|
||||||
|
if (!rightClickSelected || !rightSelect) return;
|
||||||
|
|
||||||
|
|
||||||
|
const selectedZone = Object.keys(zoneWidgetData).find(zoneId =>
|
||||||
|
zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
|
||||||
|
);
|
||||||
|
if (!selectedZone) return;
|
||||||
|
|
||||||
|
const selectedWidget = zoneWidgetData[selectedZone].find(widget => widget.id === rightClickSelected);
|
||||||
|
if (!selectedWidget) return;
|
||||||
|
|
||||||
|
const rect = gl.domElement.getBoundingClientRect();
|
||||||
|
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
|
||||||
|
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
|
||||||
|
|
||||||
|
raycaster.setFromCamera(mouse, camera);
|
||||||
|
|
||||||
|
if (rightSelect === "Horizontal Move" && raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
|
||||||
|
|
||||||
|
updateWidgetPosition(selectedZone, rightClickSelected, [
|
||||||
|
planeIntersect.current.x,
|
||||||
|
selectedWidget.position[1],
|
||||||
|
planeIntersect.current.z
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (rightSelect === "Vertical Move") {
|
||||||
|
if (raycaster.ray.intersectPlane(verticalPlane.current, planeIntersect.current)) {
|
||||||
|
updateWidgetPosition(selectedZone, rightClickSelected, [
|
||||||
|
selectedWidget.position[0],
|
||||||
|
planeIntersect.current.y, // Ensure Y value updates correctly
|
||||||
|
selectedWidget.position[2]
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
console.log("No Intersection with Vertical Plane");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseUp = () => {
|
||||||
|
|
||||||
|
if (rightClickSelected && (rightSelect === "Horizontal Move" || rightSelect === "Vertical Move")) {
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setRightClickSelected(null);
|
||||||
|
setRightSelect(null);
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Attach events to window instead of gl.domElement
|
||||||
|
window.addEventListener("mousemove", handleMouseMove);
|
||||||
|
window.addEventListener("mouseup", handleMouseUp);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("mousemove", handleMouseMove);
|
||||||
|
window.removeEventListener("mouseup", handleMouseUp);
|
||||||
|
};
|
||||||
|
}, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{activeZoneWidgets.map(({ id, type, position }) => {
|
{activeZoneWidgets.map(({ id, type, position }) => {
|
||||||
console.log('Typeeeeeeeeeeee',type);
|
const handleRightClick = (event: React.MouseEvent) => {
|
||||||
|
event.preventDefault();
|
||||||
|
setRightClickSelected(id)
|
||||||
|
};
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case "ui-Widget 1":
|
case "ui-Widget 1":
|
||||||
return <ProductionCapacity key={id} id={id} type={type} position={position} />;
|
return <ProductionCapacity key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
|
||||||
case "ui-Widget 2":
|
case "ui-Widget 2":
|
||||||
return <ReturnOfInvestment key={id} id={id} type={type} position={position} />;
|
return <ReturnOfInvestment key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
|
||||||
case "ui-Widget 3":
|
case "ui-Widget 3":
|
||||||
return <StateWorking key={id} id={id} type={type} position={position} />;
|
return <StateWorking key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
|
||||||
case "ui-Widget 4":
|
case "ui-Widget 4":
|
||||||
return <Throughput key={id} id={id} type={type} position={position} />;
|
return <Throughput key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
})}
|
})}
|
||||||
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,6 +23,8 @@ import SocketRealTimeViz from "../../../modules/visualization/realTimeVizSocket.
|
||||||
import RenderOverlay from "../../templates/Overlay";
|
import RenderOverlay from "../../templates/Overlay";
|
||||||
import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup";
|
import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup";
|
||||||
import DroppedObjects from "./DroppedFloatingWidgets";
|
import DroppedObjects from "./DroppedFloatingWidgets";
|
||||||
|
import EditWidgetOption from "../menu/EditWidgetOption";
|
||||||
|
import { useRightClickSelected } from "../../../store/useZone3DWidgetStore";
|
||||||
|
|
||||||
type Side = "top" | "bottom" | "left" | "right";
|
type Side = "top" | "bottom" | "left" | "right";
|
||||||
|
|
||||||
|
@ -55,8 +57,9 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
|
const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
|
||||||
const [zonesData, setZonesData] = useState<FormattedZoneData>({});
|
const [zonesData, setZonesData] = useState<FormattedZoneData>({});
|
||||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||||
const { zones } = useZones();
|
|
||||||
|
|
||||||
|
|
||||||
|
const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
|
||||||
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
|
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
|
||||||
|
|
||||||
const [floatingWidgets, setFloatingWidgets] = useState<
|
const [floatingWidgets, setFloatingWidgets] = useState<
|
||||||
|
@ -178,7 +181,6 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
.getState()
|
.getState()
|
||||||
.addObject(selectedZone.zoneName, newObject);
|
.addObject(selectedZone.zoneName, newObject);
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// Update floating widgets state
|
// Update floating widgets state
|
||||||
setFloatingWidgets((prevWidgets) => ({
|
setFloatingWidgets((prevWidgets) => ({
|
||||||
...prevWidgets,
|
...prevWidgets,
|
||||||
|
@ -195,6 +197,7 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
} catch (error) { }
|
} catch (error) { }
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function handleRightClickSel(){}
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={containerRef}
|
ref={containerRef}
|
||||||
|
@ -206,11 +209,6 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
left: isPlaying || activeModule !== "visualization" ? "0%" : "",
|
left: isPlaying || activeModule !== "visualization" ? "0%" : "",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* <RenderOverlay>
|
|
||||||
<EditWidgetOption
|
|
||||||
options={["Dublicate", "Vertical Move", "Horizontal Move", "Delete"]}
|
|
||||||
/>
|
|
||||||
</RenderOverlay> */}
|
|
||||||
{openConfirmationPopup && (
|
{openConfirmationPopup && (
|
||||||
<RenderOverlay>
|
<RenderOverlay>
|
||||||
<ConfirmationPopup
|
<ConfirmationPopup
|
||||||
|
@ -235,12 +233,11 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
{activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
|
{activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
|
||||||
{activeModule === "visualization" && <SocketRealTimeViz />}
|
{activeModule === "visualization" && <SocketRealTimeViz />}
|
||||||
{/* <DroppedObjects /> */}
|
|
||||||
{/* <RenderOverlay>
|
{activeModule === "visualization" && widgetSubOption === "3D" && rightClickSelected && <EditWidgetOption
|
||||||
<EditWidgetOption
|
options={["Duplicate", "Vertical Move", "Horizontal Move", "Delete"]}
|
||||||
options={["Dublicate", "Vertical Move", "Horizontal Move", "Delete"]}
|
/>}
|
||||||
/>
|
|
||||||
</RenderOverlay> */}
|
|
||||||
{activeModule === "visualization" && (
|
{activeModule === "visualization" && (
|
||||||
<>
|
<>
|
||||||
<DisplayZone
|
<DisplayZone
|
||||||
|
|
|
@ -1,29 +0,0 @@
|
||||||
// import { useSelectedZoneStore } from "../../../store/useZoneStore";
|
|
||||||
|
|
||||||
|
|
||||||
// type HandleDropTemplateProps = {
|
|
||||||
// templateId: string;
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export const handleDropTemplate = ({ templateId }: HandleDropTemplateProps): void => {
|
|
||||||
// const { getTemplate } = useTemplateStore.getState();
|
|
||||||
// const { setSelectedZone } = useSelectedZoneStore.getState();
|
|
||||||
|
|
||||||
// // Find the template by ID
|
|
||||||
// const template: Template | undefined = getTemplate(templateId);
|
|
||||||
|
|
||||||
// if (!template) {
|
|
||||||
// console.error("Template not found!");
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Update the selected zone with the template data
|
|
||||||
// setSelectedZone((prev) => ({
|
|
||||||
// ...prev,
|
|
||||||
// panelOrder: template.panelOrder,
|
|
||||||
// activeSides: Array.from(new Set([...prev.activeSides, ...template.panelOrder])),
|
|
||||||
// widgets: template.widgets, // Keep widget structure the same
|
|
||||||
// }));
|
|
||||||
|
|
||||||
// console.log("Dropped template applied:", template);
|
|
||||||
// };
|
|
|
@ -1,15 +1,26 @@
|
||||||
import React from "react";
|
import React, { useEffect } from "react";
|
||||||
|
import { useLeftData, useRightSelected, useTopData } from "../../../store/useZone3DWidgetStore";
|
||||||
|
|
||||||
interface EditWidgetOptionProps {
|
interface EditWidgetOptionProps {
|
||||||
options: string[];
|
options: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({ options }) => {
|
const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({ options }) => {
|
||||||
|
const { top, setTop } = useTopData()
|
||||||
|
const { left, setLeft } = useLeftData()
|
||||||
|
const { rightSelect, setRightSelect } = useRightSelected()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
console.log('left: ', left);
|
||||||
|
console.log('top: ', top);
|
||||||
|
}, [top, left])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="editWidgetOptions-wrapper">
|
<div className="editWidgetOptions-wrapper" style={{ top: top + "px", left: left + "px" }}>
|
||||||
<div className="editWidgetOptions">
|
<div className="editWidgetOptions">
|
||||||
{options.map((option, index) => (
|
{options.map((option, index) => (
|
||||||
<div className="option" key={index}>
|
<div className="option" key={index} onClick={(e) => setRightSelect(option)}>
|
||||||
{option}
|
{option}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -24,6 +24,7 @@ async function addAssetModel(
|
||||||
socket: Socket<any>,
|
socket: Socket<any>,
|
||||||
selectedItem: any,
|
selectedItem: any,
|
||||||
setSelectedItem: any,
|
setSelectedItem: any,
|
||||||
|
setSimulationPaths: any,
|
||||||
plane: Types.RefMesh,
|
plane: Types.RefMesh,
|
||||||
): Promise<void> {
|
): Promise<void> {
|
||||||
|
|
||||||
|
@ -64,7 +65,7 @@ async function addAssetModel(
|
||||||
const cachedModel = THREE.Cache.get(selectedItem.id);
|
const cachedModel = THREE.Cache.get(selectedItem.id);
|
||||||
if (cachedModel) {
|
if (cachedModel) {
|
||||||
// console.log(`[Cache] Fetching ${selectedItem.name}`);
|
// console.log(`[Cache] Fetching ${selectedItem.name}`);
|
||||||
handleModelLoad(cachedModel, intersectPoint!, selectedItem, itemsGroup, tempLoader, isTempLoader, setFloorItems, socket);
|
handleModelLoad(cachedModel, intersectPoint!, selectedItem, itemsGroup, tempLoader, isTempLoader, setFloorItems, setSimulationPaths, socket);
|
||||||
return;
|
return;
|
||||||
} else {
|
} else {
|
||||||
const cachedModelBlob = await retrieveGLTF(selectedItem.id);
|
const cachedModelBlob = await retrieveGLTF(selectedItem.id);
|
||||||
|
@ -77,7 +78,7 @@ async function addAssetModel(
|
||||||
URL.revokeObjectURL(blobUrl);
|
URL.revokeObjectURL(blobUrl);
|
||||||
THREE.Cache.remove(blobUrl);
|
THREE.Cache.remove(blobUrl);
|
||||||
THREE.Cache.add(selectedItem.id, gltf);
|
THREE.Cache.add(selectedItem.id, gltf);
|
||||||
handleModelLoad(gltf, intersectPoint!, selectedItem, itemsGroup, tempLoader, isTempLoader, setFloorItems, socket);
|
handleModelLoad(gltf, intersectPoint!, selectedItem, itemsGroup, tempLoader, isTempLoader, setFloorItems, setSimulationPaths, socket);
|
||||||
},
|
},
|
||||||
() => {
|
() => {
|
||||||
TempLoader(intersectPoint!, isTempLoader, tempLoader, itemsGroup);
|
TempLoader(intersectPoint!, isTempLoader, tempLoader, itemsGroup);
|
||||||
|
@ -89,7 +90,7 @@ async function addAssetModel(
|
||||||
const modelBlob = await fetch(`${url_Backend_dwinzo}/api/v1/AssetFile/${selectedItem.id}`).then((res) => res.blob());
|
const modelBlob = await fetch(`${url_Backend_dwinzo}/api/v1/AssetFile/${selectedItem.id}`).then((res) => res.blob());
|
||||||
await storeGLTF(selectedItem.id, modelBlob);
|
await storeGLTF(selectedItem.id, modelBlob);
|
||||||
THREE.Cache.add(selectedItem.id, gltf);
|
THREE.Cache.add(selectedItem.id, gltf);
|
||||||
await handleModelLoad(gltf, intersectPoint!, selectedItem, itemsGroup, tempLoader, isTempLoader, setFloorItems, socket);
|
await handleModelLoad(gltf, intersectPoint!, selectedItem, itemsGroup, tempLoader, isTempLoader, setFloorItems, setSimulationPaths, socket);
|
||||||
},
|
},
|
||||||
() => {
|
() => {
|
||||||
TempLoader(intersectPoint!, isTempLoader, tempLoader, itemsGroup);
|
TempLoader(intersectPoint!, isTempLoader, tempLoader, itemsGroup);
|
||||||
|
@ -112,10 +113,11 @@ async function handleModelLoad(
|
||||||
tempLoader: Types.RefMesh,
|
tempLoader: Types.RefMesh,
|
||||||
isTempLoader: Types.RefBoolean,
|
isTempLoader: Types.RefBoolean,
|
||||||
setFloorItems: Types.setFloorItemSetState,
|
setFloorItems: Types.setFloorItemSetState,
|
||||||
|
setSimulationPaths: any,
|
||||||
socket: Socket<any>
|
socket: Socket<any>
|
||||||
) {
|
) {
|
||||||
const model = gltf.scene.clone();
|
const model = gltf.scene.clone();
|
||||||
model.userData = { name: selectedItem.name, modelId: selectedItem.id };
|
model.userData = { name: selectedItem.name, modelId: selectedItem.id, modeluuid: model.uuid };
|
||||||
model.position.set(intersectPoint!.x, 3 + intersectPoint!.y, intersectPoint!.z);
|
model.position.set(intersectPoint!.x, 3 + intersectPoint!.y, intersectPoint!.z);
|
||||||
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
|
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
|
||||||
|
|
||||||
|
@ -152,7 +154,7 @@ async function handleModelLoad(
|
||||||
if (res.type === "Conveyor") {
|
if (res.type === "Conveyor") {
|
||||||
const pointUUIDs = res.points.map(() => THREE.MathUtils.generateUUID());
|
const pointUUIDs = res.points.map(() => THREE.MathUtils.generateUUID());
|
||||||
|
|
||||||
const eventData: Extract<Types.FloorItemType['eventData'], { type: 'Conveyor' }> = {
|
const backendEventData: Extract<Types.FloorItemType['eventData'], { type: 'Conveyor' }> = {
|
||||||
type: 'Conveyor',
|
type: 'Conveyor',
|
||||||
points: res.points.map((point: any, index: number) => ({
|
points: res.points.map((point: any, index: number) => ({
|
||||||
uuid: pointUUIDs[index],
|
uuid: pointUUIDs[index],
|
||||||
|
@ -176,16 +178,6 @@ async function handleModelLoad(
|
||||||
speed: 'Inherit'
|
speed: 'Inherit'
|
||||||
};
|
};
|
||||||
|
|
||||||
// console.log('eventData: ', eventData);
|
|
||||||
newFloorItem.eventData = eventData;
|
|
||||||
}
|
|
||||||
|
|
||||||
setFloorItems((prevItems) => {
|
|
||||||
const updatedItems = [...(prevItems || []), newFloorItem];
|
|
||||||
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
|
|
||||||
return updatedItems;
|
|
||||||
});
|
|
||||||
|
|
||||||
// API
|
// API
|
||||||
|
|
||||||
// await setFloorItemApi(
|
// await setFloorItemApi(
|
||||||
|
@ -211,14 +203,69 @@ async function handleModelLoad(
|
||||||
rotation: { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z },
|
rotation: { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z },
|
||||||
isLocked: false,
|
isLocked: false,
|
||||||
isVisible: true,
|
isVisible: true,
|
||||||
eventData: newFloorItem.eventData,
|
eventData: backendEventData,
|
||||||
socketId: socket.id
|
socketId: socket.id
|
||||||
};
|
};
|
||||||
console.log('data: ', data);
|
|
||||||
|
|
||||||
|
console.log('data: ', data);
|
||||||
|
setFloorItems((prevItems) => {
|
||||||
|
const updatedItems = [...(prevItems || []), newFloorItem];
|
||||||
|
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
|
||||||
|
return updatedItems;
|
||||||
|
});
|
||||||
|
|
||||||
|
const eventData: any = backendEventData;
|
||||||
|
eventData.modeluuid = newFloorItem.modeluuid;
|
||||||
|
eventData.modelName = newFloorItem.modelname;
|
||||||
|
eventData.position = newFloorItem.position;
|
||||||
|
eventData.rotation = [model.rotation.x, model.rotation.y, model.rotation.z];
|
||||||
|
|
||||||
|
setSimulationPaths((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[]) => [
|
||||||
|
...(prevEvents || []),
|
||||||
|
eventData as Types.ConveyorEventsSchema | Types.VehicleEventsSchema
|
||||||
|
]);
|
||||||
|
|
||||||
socket.emit("v2:model-asset:add", data);
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
// API
|
||||||
|
|
||||||
|
// await setFloorItemApi(
|
||||||
|
// organization,
|
||||||
|
// newFloorItem.modeluuid,
|
||||||
|
// newFloorItem.modelname,
|
||||||
|
// newFloorItem.modelfileID,
|
||||||
|
// newFloorItem.position,
|
||||||
|
// { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z },
|
||||||
|
// false,
|
||||||
|
// true
|
||||||
|
// );
|
||||||
|
|
||||||
|
// SOCKET
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
organization,
|
||||||
|
modeluuid: newFloorItem.modeluuid,
|
||||||
|
modelname: newFloorItem.modelname,
|
||||||
|
modelfileID: newFloorItem.modelfileID,
|
||||||
|
position: newFloorItem.position,
|
||||||
|
rotation: { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z },
|
||||||
|
isLocked: false,
|
||||||
|
isVisible: true,
|
||||||
|
socketId: socket.id
|
||||||
|
};
|
||||||
|
|
||||||
|
setFloorItems((prevItems) => {
|
||||||
|
const updatedItems = [...(prevItems || []), newFloorItem];
|
||||||
|
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
|
||||||
|
return updatedItems;
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
gsap.to(model.position, { y: newFloorItem.position[1], duration: 1.5, ease: "power2.out" });
|
gsap.to(model.position, { y: newFloorItem.position[1], duration: 1.5, ease: "power2.out" });
|
||||||
gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: "power2.out", onComplete: () => { toast.success("Model Added!"); } });
|
gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: "power2.out", onComplete: () => { toast.success("Model Added!"); } });
|
||||||
});
|
});
|
||||||
|
|
|
@ -121,7 +121,7 @@ export default async function assetManager(
|
||||||
|
|
||||||
const model = gltf;
|
const model = gltf;
|
||||||
model.uuid = item.modeluuid;
|
model.uuid = item.modeluuid;
|
||||||
model.userData = { name: item.modelname, modelId: item.modelfileID };
|
model.userData = { name: item.modelname, modelId: item.modelfileID, modeluuid: item.modeluuid };
|
||||||
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
|
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
|
||||||
model.position.set(...item.position);
|
model.position.set(...item.position);
|
||||||
model.rotation.set(item.rotation.x, item.rotation.y, item.rotation.z);
|
model.rotation.set(item.rotation.x, item.rotation.y, item.rotation.z);
|
||||||
|
|
|
@ -10,6 +10,7 @@ async function DeleteFloorItems(
|
||||||
itemsGroup: Types.RefGroup,
|
itemsGroup: Types.RefGroup,
|
||||||
hoveredDeletableFloorItem: Types.RefMesh,
|
hoveredDeletableFloorItem: Types.RefMesh,
|
||||||
setFloorItems: Types.setFloorItemSetState,
|
setFloorItems: Types.setFloorItemSetState,
|
||||||
|
setSimulationPaths: any,
|
||||||
socket: Socket<any>
|
socket: Socket<any>
|
||||||
): Promise<void> {
|
): Promise<void> {
|
||||||
|
|
||||||
|
@ -74,6 +75,12 @@ async function DeleteFloorItems(
|
||||||
itemsGroup.current.remove(hoveredDeletableFloorItem.current);
|
itemsGroup.current.remove(hoveredDeletableFloorItem.current);
|
||||||
}
|
}
|
||||||
setFloorItems(updatedItems);
|
setFloorItems(updatedItems);
|
||||||
|
|
||||||
|
setSimulationPaths((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[]) => {
|
||||||
|
const updatedEvents = (prevEvents || []).filter(event => event.modeluuid !== removedItem.modeluuid);
|
||||||
|
return updatedEvents;
|
||||||
|
});
|
||||||
|
|
||||||
toast.success("Model Removed!");
|
toast.success("Model Removed!");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,6 +10,7 @@ import {
|
||||||
useRenderDistance,
|
useRenderDistance,
|
||||||
useselectedFloorItem,
|
useselectedFloorItem,
|
||||||
useSelectedItem,
|
useSelectedItem,
|
||||||
|
useSimulationPaths,
|
||||||
useSocketStore,
|
useSocketStore,
|
||||||
useToggleView,
|
useToggleView,
|
||||||
useTransformMode,
|
useTransformMode,
|
||||||
|
@ -64,6 +65,7 @@ const FloorItemsGroup = ({
|
||||||
const { setselectedFloorItem } = useselectedFloorItem();
|
const { setselectedFloorItem } = useselectedFloorItem();
|
||||||
const { activeTool } = useActiveTool();
|
const { activeTool } = useActiveTool();
|
||||||
const { selectedItem, setSelectedItem } = useSelectedItem();
|
const { selectedItem, setSelectedItem } = useSelectedItem();
|
||||||
|
const { simulationPaths, setSimulationPaths } = useSimulationPaths();
|
||||||
const { setLoadingProgress } = useLoadingProgress();
|
const { setLoadingProgress } = useLoadingProgress();
|
||||||
const { activeModule } = useModuleStore();
|
const { activeModule } = useModuleStore();
|
||||||
const { socket } = useSocketStore();
|
const { socket } = useSocketStore();
|
||||||
|
@ -96,6 +98,7 @@ const FloorItemsGroup = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
getFloorAssets(organization).then((data) => {
|
getFloorAssets(organization).then((data) => {
|
||||||
|
if (data.length > 0) {
|
||||||
const uniqueItems = (data as Types.FloorItems).filter(
|
const uniqueItems = (data as Types.FloorItems).filter(
|
||||||
(item, index, self) =>
|
(item, index, self) =>
|
||||||
index === self.findIndex((t) => t.modelfileID === item.modelfileID)
|
index === self.findIndex((t) => t.modelfileID === item.modelfileID)
|
||||||
|
@ -106,6 +109,12 @@ const FloorItemsGroup = ({
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
gltfLoaderWorker.postMessage({ floorItems: data });
|
gltfLoaderWorker.postMessage({ floorItems: data });
|
||||||
|
} else {
|
||||||
|
console.log('data: ', data);
|
||||||
|
gltfLoaderWorker.postMessage({ floorItems: [] });
|
||||||
|
loadInitialFloorItems(itemsGroup, setFloorItems, setSimulationPaths);
|
||||||
|
updateLoadingProgress(100);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
gltfLoaderWorker.onmessage = async (event) => {
|
gltfLoaderWorker.onmessage = async (event) => {
|
||||||
|
@ -122,7 +131,7 @@ const FloorItemsGroup = ({
|
||||||
updateLoadingProgress(progress);
|
updateLoadingProgress(progress);
|
||||||
|
|
||||||
if (loadedAssets === totalAssets) {
|
if (loadedAssets === totalAssets) {
|
||||||
loadInitialFloorItems(itemsGroup, setFloorItems);
|
loadInitialFloorItems(itemsGroup, setFloorItems, setSimulationPaths);
|
||||||
updateLoadingProgress(100);
|
updateLoadingProgress(100);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -240,6 +249,7 @@ const FloorItemsGroup = ({
|
||||||
itemsGroup,
|
itemsGroup,
|
||||||
hoveredDeletableFloorItem,
|
hoveredDeletableFloorItem,
|
||||||
setFloorItems,
|
setFloorItems,
|
||||||
|
setSimulationPaths,
|
||||||
socket
|
socket
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -365,6 +375,7 @@ const FloorItemsGroup = ({
|
||||||
socket,
|
socket,
|
||||||
selectedItem,
|
selectedItem,
|
||||||
setSelectedItem,
|
setSelectedItem,
|
||||||
|
setSimulationPaths,
|
||||||
plane
|
plane
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -408,7 +419,6 @@ const FloorItemsGroup = ({
|
||||||
activeModule,
|
activeModule,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
useEffect(() => {}, [floorItems]);
|
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (controls)
|
if (controls)
|
||||||
|
|
|
@ -105,7 +105,7 @@ export default function SocketResponses({
|
||||||
// console.log(`Getting ${data.data.modelname} from cache`);
|
// console.log(`Getting ${data.data.modelname} from cache`);
|
||||||
const model = cachedModel.scene.clone();
|
const model = cachedModel.scene.clone();
|
||||||
model.uuid = data.data.modeluuid;
|
model.uuid = data.data.modeluuid;
|
||||||
model.userData = { name: data.data.modelname, modelId: data.data.modelFileID };
|
model.userData = { name: data.data.modelname, modelId: data.data.modelFileID, modeluuid: data.data.modeluuid };
|
||||||
model.position.set(...data.data.position as [number, number, number]);
|
model.position.set(...data.data.position as [number, number, number]);
|
||||||
model.rotation.set(data.data.rotation.x, data.data.rotation.y, data.data.rotation.z);
|
model.rotation.set(data.data.rotation.x, data.data.rotation.y, data.data.rotation.z);
|
||||||
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
|
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
|
||||||
|
@ -183,7 +183,7 @@ export default function SocketResponses({
|
||||||
THREE.Cache.remove(url);
|
THREE.Cache.remove(url);
|
||||||
const model = gltf.scene;
|
const model = gltf.scene;
|
||||||
model.uuid = data.data.modeluuid;
|
model.uuid = data.data.modeluuid;
|
||||||
model.userData = { name: data.data.modelname, modelId: data.data.modelFileID };
|
model.userData = { name: data.data.modelname, modelId: data.data.modelFileID, modeluuid: data.data.modeluuid };
|
||||||
model.position.set(...data.data.position as [number, number, number]);
|
model.position.set(...data.data.position as [number, number, number]);
|
||||||
model.rotation.set(data.data.rotation.x, data.data.rotation.y, data.data.rotation.z);
|
model.rotation.set(data.data.rotation.x, data.data.rotation.y, data.data.rotation.z);
|
||||||
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
|
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
|
||||||
|
|
|
@ -11,7 +11,8 @@ import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAss
|
||||||
|
|
||||||
async function loadInitialFloorItems(
|
async function loadInitialFloorItems(
|
||||||
itemsGroup: Types.RefGroup,
|
itemsGroup: Types.RefGroup,
|
||||||
setFloorItems: Types.setFloorItemSetState
|
setFloorItems: Types.setFloorItemSetState,
|
||||||
|
setSimulationPaths: (paths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[]) => void
|
||||||
): Promise<void> {
|
): Promise<void> {
|
||||||
if (!itemsGroup.current) return;
|
if (!itemsGroup.current) return;
|
||||||
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
|
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
|
||||||
|
@ -22,6 +23,8 @@ async function loadInitialFloorItems(
|
||||||
localStorage.setItem("FloorItems", JSON.stringify(items));
|
localStorage.setItem("FloorItems", JSON.stringify(items));
|
||||||
await initializeDB();
|
await initializeDB();
|
||||||
|
|
||||||
|
if (items.message === "floorItems not found") return;
|
||||||
|
|
||||||
if (items) {
|
if (items) {
|
||||||
const storedFloorItems: Types.FloorItems = items;
|
const storedFloorItems: Types.FloorItems = items;
|
||||||
const loader = new GLTFLoader();
|
const loader = new GLTFLoader();
|
||||||
|
@ -50,6 +53,7 @@ async function loadInitialFloorItems(
|
||||||
});
|
});
|
||||||
|
|
||||||
for (const item of storedFloorItems) {
|
for (const item of storedFloorItems) {
|
||||||
|
console.log('item: ', item);
|
||||||
if (!item.modelfileID) return;
|
if (!item.modelfileID) return;
|
||||||
const itemPosition = new THREE.Vector3(item.position[0], item.position[1], item.position[2]);
|
const itemPosition = new THREE.Vector3(item.position[0], item.position[1], item.position[2]);
|
||||||
let storedPosition;
|
let storedPosition;
|
||||||
|
@ -68,7 +72,7 @@ async function loadInitialFloorItems(
|
||||||
const cachedModel = THREE.Cache.get(item.modelfileID!);
|
const cachedModel = THREE.Cache.get(item.modelfileID!);
|
||||||
if (cachedModel) {
|
if (cachedModel) {
|
||||||
// console.log(`[Cache] Fetching ${item.modelname}`);
|
// console.log(`[Cache] Fetching ${item.modelname}`);
|
||||||
processLoadedModel(cachedModel.scene.clone(), item, itemsGroup, setFloorItems);
|
processLoadedModel(cachedModel.scene.clone(), item, itemsGroup, setFloorItems, setSimulationPaths);
|
||||||
modelsLoaded++;
|
modelsLoaded++;
|
||||||
checkLoadingCompletion(modelsLoaded, modelsToLoad, dracoLoader, resolve);
|
checkLoadingCompletion(modelsLoaded, modelsToLoad, dracoLoader, resolve);
|
||||||
return;
|
return;
|
||||||
|
@ -85,7 +89,7 @@ async function loadInitialFloorItems(
|
||||||
URL.revokeObjectURL(blobUrl);
|
URL.revokeObjectURL(blobUrl);
|
||||||
THREE.Cache.remove(blobUrl);
|
THREE.Cache.remove(blobUrl);
|
||||||
THREE.Cache.add(item.modelfileID!, gltf);
|
THREE.Cache.add(item.modelfileID!, gltf);
|
||||||
processLoadedModel(gltf.scene.clone(), item, itemsGroup, setFloorItems);
|
processLoadedModel(gltf.scene.clone(), item, itemsGroup, setFloorItems, setSimulationPaths);
|
||||||
modelsLoaded++;
|
modelsLoaded++;
|
||||||
checkLoadingCompletion(modelsLoaded, modelsToLoad, dracoLoader, resolve);
|
checkLoadingCompletion(modelsLoaded, modelsToLoad, dracoLoader, resolve);
|
||||||
},
|
},
|
||||||
|
@ -108,7 +112,7 @@ async function loadInitialFloorItems(
|
||||||
const modelBlob = await fetch(modelUrl).then((res) => res.blob());
|
const modelBlob = await fetch(modelUrl).then((res) => res.blob());
|
||||||
await storeGLTF(item.modelfileID!, modelBlob);
|
await storeGLTF(item.modelfileID!, modelBlob);
|
||||||
THREE.Cache.add(item.modelfileID!, gltf);
|
THREE.Cache.add(item.modelfileID!, gltf);
|
||||||
processLoadedModel(gltf.scene.clone(), item, itemsGroup, setFloorItems);
|
processLoadedModel(gltf.scene.clone(), item, itemsGroup, setFloorItems, setSimulationPaths);
|
||||||
modelsLoaded++;
|
modelsLoaded++;
|
||||||
checkLoadingCompletion(modelsLoaded, modelsToLoad, dracoLoader, resolve);
|
checkLoadingCompletion(modelsLoaded, modelsToLoad, dracoLoader, resolve);
|
||||||
},
|
},
|
||||||
|
@ -121,34 +125,23 @@ async function loadInitialFloorItems(
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// console.log(`Item ${item.modelname} is not near`);
|
// console.log(`Item ${item.modelname} is not near`);
|
||||||
|
setFloorItems((prevItems) => [
|
||||||
|
...(prevItems || []),
|
||||||
|
{
|
||||||
|
modeluuid: item.modeluuid,
|
||||||
|
modelname: item.modelname,
|
||||||
|
position: item.position,
|
||||||
|
rotation: item.rotation,
|
||||||
|
modelfileID: item.modelfileID,
|
||||||
|
isLocked: item.isLocked,
|
||||||
|
isVisible: item.isVisible,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
if (item.eventData) {
|
if (item.eventData) {
|
||||||
setFloorItems((prevItems) => [
|
processEventData(item, setSimulationPaths);
|
||||||
...(prevItems || []),
|
|
||||||
{
|
|
||||||
modeluuid: item.modeluuid,
|
|
||||||
modelname: item.modelname,
|
|
||||||
position: item.position,
|
|
||||||
rotation: item.rotation,
|
|
||||||
modelfileID: item.modelfileID,
|
|
||||||
isLocked: item.isLocked,
|
|
||||||
isVisible: item.isVisible,
|
|
||||||
// eventData: item.eventData,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
} else {
|
|
||||||
setFloorItems((prevItems) => [
|
|
||||||
...(prevItems || []),
|
|
||||||
{
|
|
||||||
modeluuid: item.modeluuid,
|
|
||||||
modelname: item.modelname,
|
|
||||||
position: item.position,
|
|
||||||
rotation: item.rotation,
|
|
||||||
modelfileID: item.modelfileID,
|
|
||||||
isLocked: item.isLocked,
|
|
||||||
isVisible: item.isVisible,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
modelsLoaded++;
|
modelsLoaded++;
|
||||||
checkLoadingCompletion(modelsLoaded, modelsToLoad, dracoLoader, () => { });
|
checkLoadingCompletion(modelsLoaded, modelsToLoad, dracoLoader, () => { });
|
||||||
}
|
}
|
||||||
|
@ -164,12 +157,13 @@ function processLoadedModel(
|
||||||
gltf: any,
|
gltf: any,
|
||||||
item: Types.FloorItemType,
|
item: Types.FloorItemType,
|
||||||
itemsGroup: Types.RefGroup,
|
itemsGroup: Types.RefGroup,
|
||||||
setFloorItems: Types.setFloorItemSetState
|
setFloorItems: Types.setFloorItemSetState,
|
||||||
|
setSimulationPaths: (paths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[]) => void
|
||||||
) {
|
) {
|
||||||
const model = gltf;
|
const model = gltf;
|
||||||
model.uuid = item.modeluuid;
|
model.uuid = item.modeluuid;
|
||||||
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
|
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
|
||||||
model.userData = { name: item.modelname, modelId: item.modelfileID };
|
model.userData = { name: item.modelname, modelId: item.modelfileID, modeluuid: item.modeluuid };
|
||||||
model.position.set(...item.position);
|
model.position.set(...item.position);
|
||||||
model.rotation.set(item.rotation.x, item.rotation.y, item.rotation.z);
|
model.rotation.set(item.rotation.x, item.rotation.y, item.rotation.z);
|
||||||
|
|
||||||
|
@ -186,21 +180,6 @@ function processLoadedModel(
|
||||||
|
|
||||||
itemsGroup?.current?.add(model);
|
itemsGroup?.current?.add(model);
|
||||||
|
|
||||||
if (item.eventData) {
|
|
||||||
setFloorItems((prevItems) => [
|
|
||||||
...(prevItems || []),
|
|
||||||
{
|
|
||||||
modeluuid: item.modeluuid,
|
|
||||||
modelname: item.modelname,
|
|
||||||
position: item.position,
|
|
||||||
rotation: item.rotation,
|
|
||||||
modelfileID: item.modelfileID,
|
|
||||||
isLocked: item.isLocked,
|
|
||||||
isVisible: item.isVisible,
|
|
||||||
// eventData: item.eventData,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
} else {
|
|
||||||
setFloorItems((prevItems) => [
|
setFloorItems((prevItems) => [
|
||||||
...(prevItems || []),
|
...(prevItems || []),
|
||||||
{
|
{
|
||||||
|
@ -213,12 +192,55 @@ function processLoadedModel(
|
||||||
isVisible: item.isVisible,
|
isVisible: item.isVisible,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
if (item.eventData || item.modelfileID === '67e3da19c2e8f37134526e6a') {
|
||||||
|
processEventData(item, setSimulationPaths);
|
||||||
}
|
}
|
||||||
|
|
||||||
gsap.to(model.position, { y: item.position[1], duration: 1.5, ease: 'power2.out' });
|
gsap.to(model.position, { y: item.position[1], duration: 1.5, ease: 'power2.out' });
|
||||||
gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: 'power2.out' });
|
gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: 'power2.out' });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function processEventData(item: Types.FloorItemType, setSimulationPaths: any) {
|
||||||
|
|
||||||
|
if (item.eventData?.type === 'Conveyor') {
|
||||||
|
|
||||||
|
const data: any = item.eventData;
|
||||||
|
data.modeluuid = item.modeluuid;
|
||||||
|
data.modelName = item.modelname;
|
||||||
|
data.position = item.position;
|
||||||
|
data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z];
|
||||||
|
|
||||||
|
setSimulationPaths((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[]) => [
|
||||||
|
...(prevEvents || []),
|
||||||
|
data as Types.ConveyorEventsSchema
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
|
||||||
|
const pointUUID = THREE.MathUtils.generateUUID();
|
||||||
|
const pointPosition = new THREE.Vector3(0, 1.3, 0);
|
||||||
|
|
||||||
|
const newVehiclePath: Types.VehicleEventsSchema = {
|
||||||
|
modeluuid: item.modeluuid,
|
||||||
|
modelName: item.modelname,
|
||||||
|
type: 'Vehicle',
|
||||||
|
point: {
|
||||||
|
uuid: pointUUID,
|
||||||
|
position: [pointPosition.x, pointPosition.y, pointPosition.z],
|
||||||
|
actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Start', start: {}, hitCount: 1, end: {}, buffer: 0 },
|
||||||
|
connections: { source: { pathUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] },
|
||||||
|
speed: 2,
|
||||||
|
},
|
||||||
|
position: [...item.position],
|
||||||
|
};
|
||||||
|
|
||||||
|
setSimulationPaths((prevEvents: (Types.VehicleEventsSchema)[]) => [
|
||||||
|
...(prevEvents || []),
|
||||||
|
newVehiclePath as Types.VehicleEventsSchema
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function checkLoadingCompletion(
|
function checkLoadingCompletion(
|
||||||
modelsLoaded: number,
|
modelsLoaded: number,
|
||||||
modelsToLoad: number,
|
modelsToLoad: number,
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useEffect, useMemo } from "react";
|
import { useEffect, useMemo } from "react";
|
||||||
import { useFrame, useThree } from "@react-three/fiber";
|
import { useFrame, useThree } from "@react-three/fiber";
|
||||||
import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/store";
|
import { useFloorItems, useSelectedAssets, useSimulationPaths, useSocketStore, useToggleView } from "../../../../store/store";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
|
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
|
||||||
import * as Types from "../../../../types/world/worldTypes";
|
import * as Types from "../../../../types/world/worldTypes";
|
||||||
|
@ -10,6 +10,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
|
||||||
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
|
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
|
||||||
const { toggleView } = useToggleView();
|
const { toggleView } = useToggleView();
|
||||||
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
|
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
|
||||||
|
const { simulationPaths, setSimulationPaths } = useSimulationPaths();
|
||||||
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
|
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
|
||||||
const { floorItems, setFloorItems } = useFloorItems();
|
const { floorItems, setFloorItems } = useFloorItems();
|
||||||
const { socket } = useSocketStore()
|
const { socket } = useSocketStore()
|
||||||
|
@ -150,8 +151,97 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
|
||||||
return updatedItems;
|
return updatedItems;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | undefined = simulationPaths.find((events) => events.modeluuid === obj.userData.modeluuid);
|
||||||
|
|
||||||
const email = localStorage.getItem("email");
|
const email = localStorage.getItem("email");
|
||||||
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
||||||
|
if (eventData) {
|
||||||
|
if (eventData.type === 'Conveyor' && eventData) {
|
||||||
|
const createConveyorPoint = (index: number) => {
|
||||||
|
const pointUUID = THREE.MathUtils.generateUUID();
|
||||||
|
const hasActions = (eventData as Types.ConveyorEventsSchema)?.points[index].actions.length > 0;
|
||||||
|
|
||||||
|
const defaultAction = {
|
||||||
|
uuid: THREE.MathUtils.generateUUID(),
|
||||||
|
name: 'Action 1',
|
||||||
|
type: 'Inherit',
|
||||||
|
material: 'Inherit',
|
||||||
|
delay: 'Inherit',
|
||||||
|
spawnInterval: 'Inherit',
|
||||||
|
isUsed: true
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
uuid: pointUUID,
|
||||||
|
position: (eventData as Types.ConveyorEventsSchema)?.points[index].position,
|
||||||
|
rotation: (eventData as Types.ConveyorEventsSchema)?.points[index].rotation,
|
||||||
|
actions: hasActions
|
||||||
|
? (eventData as Types.ConveyorEventsSchema)?.points[index].actions.map(action => ({
|
||||||
|
...action,
|
||||||
|
uuid: THREE.MathUtils.generateUUID()
|
||||||
|
}))
|
||||||
|
: [defaultAction],
|
||||||
|
triggers: (eventData as Types.ConveyorEventsSchema)?.points[index].triggers,
|
||||||
|
connections: {
|
||||||
|
source: { pathUUID: obj.uuid, pointUUID },
|
||||||
|
targets: []
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const backendEventData = {
|
||||||
|
type: 'Conveyor',
|
||||||
|
points: [
|
||||||
|
createConveyorPoint(0), // point1
|
||||||
|
createConveyorPoint(1), // middlePoint
|
||||||
|
createConveyorPoint(2) // point2
|
||||||
|
],
|
||||||
|
speed: (eventData as Types.ConveyorEventsSchema)?.speed
|
||||||
|
};
|
||||||
|
|
||||||
|
//REST
|
||||||
|
|
||||||
|
// await setFloorItemApi(
|
||||||
|
// organization,
|
||||||
|
// obj.uuid,
|
||||||
|
// obj.userData.name,
|
||||||
|
// [worldPosition.x, worldPosition.y, worldPosition.z],
|
||||||
|
// { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
|
||||||
|
// obj.userData.modelId,
|
||||||
|
// false,
|
||||||
|
// true,
|
||||||
|
// backendEventData
|
||||||
|
// );
|
||||||
|
|
||||||
|
//SOCKET
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
organization,
|
||||||
|
modeluuid: newFloorItem.modeluuid,
|
||||||
|
modelname: newFloorItem.modelname,
|
||||||
|
modelfileID: newFloorItem.modelfileID,
|
||||||
|
position: newFloorItem.position,
|
||||||
|
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
|
||||||
|
isLocked: false,
|
||||||
|
isVisible: true,
|
||||||
|
eventData: backendEventData,
|
||||||
|
socketId: socket.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
const newEventData: any = backendEventData;
|
||||||
|
newEventData.modeluuid = newFloorItem.modeluuid;
|
||||||
|
newEventData.modelName = newFloorItem.modelname;
|
||||||
|
newEventData.position = newFloorItem.position;
|
||||||
|
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
||||||
|
|
||||||
|
setSimulationPaths((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[]) => [
|
||||||
|
...(prevEvents || []),
|
||||||
|
newEventData as Types.ConveyorEventsSchema | Types.VehicleEventsSchema
|
||||||
|
]);
|
||||||
|
|
||||||
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
|
||||||
//REST
|
//REST
|
||||||
|
|
||||||
|
@ -182,6 +272,8 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
|
||||||
|
|
||||||
socket.emit("v2:model-asset:add", data);
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
itemsGroupRef.current.add(obj);
|
itemsGroupRef.current.add(obj);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useEffect, useMemo } from "react";
|
import { useEffect, useMemo } from "react";
|
||||||
import { useFrame, useThree } from "@react-three/fiber";
|
import { useFrame, useThree } from "@react-three/fiber";
|
||||||
import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/store";
|
import { useFloorItems, useSelectedAssets, useSimulationPaths, useSocketStore, useToggleView } from "../../../../store/store";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
|
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
|
||||||
import * as Types from "../../../../types/world/worldTypes";
|
import * as Types from "../../../../types/world/worldTypes";
|
||||||
|
@ -10,11 +10,11 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
|
||||||
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
|
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
|
||||||
const { toggleView } = useToggleView();
|
const { toggleView } = useToggleView();
|
||||||
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
|
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
|
||||||
|
const { simulationPaths, setSimulationPaths } = useSimulationPaths();
|
||||||
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
|
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
|
||||||
const { floorItems, setFloorItems } = useFloorItems();
|
const { floorItems, setFloorItems } = useFloorItems();
|
||||||
const { socket } = useSocketStore();
|
const { socket } = useSocketStore();
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!camera || !scene || toggleView) return;
|
if (!camera || !scene || toggleView) return;
|
||||||
const canvasElement = gl.domElement;
|
const canvasElement = gl.domElement;
|
||||||
|
@ -131,9 +131,99 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
|
||||||
return updatedItems;
|
return updatedItems;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | undefined = simulationPaths.find((events) => events.modeluuid === obj.userData.modeluuid);
|
||||||
|
|
||||||
const email = localStorage.getItem("email");
|
const email = localStorage.getItem("email");
|
||||||
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
||||||
|
|
||||||
|
if (eventData) {
|
||||||
|
if (eventData.type === 'Conveyor' && eventData) {
|
||||||
|
const createConveyorPoint = (index: number) => {
|
||||||
|
const pointUUID = THREE.MathUtils.generateUUID();
|
||||||
|
const hasActions = (eventData as Types.ConveyorEventsSchema)?.points[index].actions.length > 0;
|
||||||
|
|
||||||
|
const defaultAction = {
|
||||||
|
uuid: THREE.MathUtils.generateUUID(),
|
||||||
|
name: 'Action 1',
|
||||||
|
type: 'Inherit',
|
||||||
|
material: 'Inherit',
|
||||||
|
delay: 'Inherit',
|
||||||
|
spawnInterval: 'Inherit',
|
||||||
|
isUsed: true
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
uuid: pointUUID,
|
||||||
|
position: (eventData as Types.ConveyorEventsSchema)?.points[index].position,
|
||||||
|
rotation: (eventData as Types.ConveyorEventsSchema)?.points[index].rotation,
|
||||||
|
actions: hasActions
|
||||||
|
? (eventData as Types.ConveyorEventsSchema)?.points[index].actions.map(action => ({
|
||||||
|
...action,
|
||||||
|
uuid: THREE.MathUtils.generateUUID()
|
||||||
|
}))
|
||||||
|
: [defaultAction],
|
||||||
|
triggers: (eventData as Types.ConveyorEventsSchema)?.points[index].triggers,
|
||||||
|
connections: {
|
||||||
|
source: { pathUUID: obj.uuid, pointUUID },
|
||||||
|
targets: []
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const backendEventData = {
|
||||||
|
type: 'Conveyor',
|
||||||
|
points: [
|
||||||
|
createConveyorPoint(0), // point1
|
||||||
|
createConveyorPoint(1), // middlePoint
|
||||||
|
createConveyorPoint(2) // point2
|
||||||
|
],
|
||||||
|
speed: (eventData as Types.ConveyorEventsSchema)?.speed
|
||||||
|
};
|
||||||
|
|
||||||
|
//REST
|
||||||
|
|
||||||
|
// await setFloorItemApi(
|
||||||
|
// organization,
|
||||||
|
// obj.uuid,
|
||||||
|
// obj.userData.name,
|
||||||
|
// [worldPosition.x, worldPosition.y, worldPosition.z],
|
||||||
|
// { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
|
||||||
|
// obj.userData.modelId,
|
||||||
|
// false,
|
||||||
|
// true,
|
||||||
|
// backendEventData
|
||||||
|
// );
|
||||||
|
|
||||||
|
//SOCKET
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
organization,
|
||||||
|
modeluuid: newFloorItem.modeluuid,
|
||||||
|
modelname: newFloorItem.modelname,
|
||||||
|
modelfileID: newFloorItem.modelfileID,
|
||||||
|
position: newFloorItem.position,
|
||||||
|
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
|
||||||
|
isLocked: false,
|
||||||
|
isVisible: true,
|
||||||
|
eventData: backendEventData,
|
||||||
|
socketId: socket.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
const newEventData: any = backendEventData;
|
||||||
|
newEventData.modeluuid = newFloorItem.modeluuid;
|
||||||
|
newEventData.modelName = newFloorItem.modelname;
|
||||||
|
newEventData.position = newFloorItem.position;
|
||||||
|
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
||||||
|
|
||||||
|
setSimulationPaths((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[]) => [
|
||||||
|
...(prevEvents || []),
|
||||||
|
newEventData as Types.ConveyorEventsSchema | Types.VehicleEventsSchema
|
||||||
|
]);
|
||||||
|
|
||||||
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
|
||||||
//REST
|
//REST
|
||||||
|
|
||||||
// await setFloorItemApi(
|
// await setFloorItemApi(
|
||||||
|
@ -163,6 +253,8 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
|
||||||
|
|
||||||
socket.emit("v2:model-asset:add", data);
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
itemsGroupRef.current.add(obj);
|
itemsGroupRef.current.add(obj);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useEffect, useMemo, useRef, useState } from "react";
|
import { useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { useFrame, useThree } from "@react-three/fiber";
|
import { useFrame, useThree } from "@react-three/fiber";
|
||||||
import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/store";
|
import { useFloorItems, useSelectedAssets, useSimulationPaths, useSocketStore, useToggleView } from "../../../../store/store";
|
||||||
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
|
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
import * as Types from "../../../../types/world/worldTypes";
|
import * as Types from "../../../../types/world/worldTypes";
|
||||||
|
@ -12,6 +12,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
|
||||||
|
|
||||||
const { toggleView } = useToggleView();
|
const { toggleView } = useToggleView();
|
||||||
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
|
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
|
||||||
|
const { simulationPaths, setSimulationPaths } = useSimulationPaths();
|
||||||
const { floorItems, setFloorItems } = useFloorItems();
|
const { floorItems, setFloorItems } = useFloorItems();
|
||||||
const { socket } = useSocketStore();
|
const { socket } = useSocketStore();
|
||||||
const itemsData = useRef<Types.FloorItems>([]);
|
const itemsData = useRef<Types.FloorItems>([]);
|
||||||
|
@ -179,9 +180,69 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
|
||||||
return updatedItems;
|
return updatedItems;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | undefined = simulationPaths.find((events) => events.modeluuid === obj.userData.modeluuid);
|
||||||
|
|
||||||
const email = localStorage.getItem("email");
|
const email = localStorage.getItem("email");
|
||||||
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
||||||
|
|
||||||
|
if (eventData) {
|
||||||
|
if (eventData.type === 'Conveyor' && eventData) {
|
||||||
|
|
||||||
|
const backendEventData = {
|
||||||
|
type: 'Conveyor',
|
||||||
|
points: eventData.points,
|
||||||
|
speed: (eventData as Types.ConveyorEventsSchema)?.speed
|
||||||
|
};
|
||||||
|
|
||||||
|
//REST
|
||||||
|
|
||||||
|
// await setFloorItemApi(
|
||||||
|
// organization,
|
||||||
|
// obj.uuid,
|
||||||
|
// obj.userData.name,
|
||||||
|
// [worldPosition.x, worldPosition.y, worldPosition.z],
|
||||||
|
// { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
|
||||||
|
// obj.userData.modelId,
|
||||||
|
// false,
|
||||||
|
// true,
|
||||||
|
// backendEventData
|
||||||
|
// );
|
||||||
|
|
||||||
|
//SOCKET
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
organization,
|
||||||
|
modeluuid: newFloorItem.modeluuid,
|
||||||
|
modelname: newFloorItem.modelname,
|
||||||
|
modelfileID: newFloorItem.modelfileID,
|
||||||
|
position: newFloorItem.position,
|
||||||
|
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
|
||||||
|
isLocked: false,
|
||||||
|
isVisible: true,
|
||||||
|
eventData: backendEventData,
|
||||||
|
socketId: socket.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
const newEventData: any = backendEventData;
|
||||||
|
newEventData.modeluuid = newFloorItem.modeluuid;
|
||||||
|
newEventData.modelName = newFloorItem.modelname;
|
||||||
|
newEventData.position = newFloorItem.position;
|
||||||
|
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
||||||
|
|
||||||
|
setSimulationPaths((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[]) => {
|
||||||
|
const updatedEvents = (prevEvents || []).map(event =>
|
||||||
|
event.modeluuid === newFloorItem.modeluuid
|
||||||
|
? { ...event, ...newEventData }
|
||||||
|
: event
|
||||||
|
);
|
||||||
|
return updatedEvents;
|
||||||
|
});
|
||||||
|
|
||||||
|
// socket.emit("v2:model-asset:add", data);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
|
||||||
|
|
||||||
//REST
|
//REST
|
||||||
|
|
||||||
// await setFloorItemApi(
|
// await setFloorItemApi(
|
||||||
|
@ -211,6 +272,8 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
|
||||||
|
|
||||||
socket.emit("v2:model-asset:add", data);
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
itemsGroupRef.current.add(obj);
|
itemsGroupRef.current.add(obj);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useEffect, useMemo, useRef, useState } from "react";
|
import { useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { useFrame, useThree } from "@react-three/fiber";
|
import { useFrame, useThree } from "@react-three/fiber";
|
||||||
import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/store";
|
import { useFloorItems, useSelectedAssets, useSimulationPaths, useSocketStore, useToggleView } from "../../../../store/store";
|
||||||
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
|
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
import * as Types from "../../../../types/world/worldTypes";
|
import * as Types from "../../../../types/world/worldTypes";
|
||||||
|
@ -12,6 +12,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
|
||||||
|
|
||||||
const { toggleView } = useToggleView();
|
const { toggleView } = useToggleView();
|
||||||
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
|
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
|
||||||
|
const { simulationPaths, setSimulationPaths } = useSimulationPaths();
|
||||||
const { floorItems, setFloorItems } = useFloorItems();
|
const { floorItems, setFloorItems } = useFloorItems();
|
||||||
const { socket } = useSocketStore();
|
const { socket } = useSocketStore();
|
||||||
const itemsData = useRef<Types.FloorItems>([]);
|
const itemsData = useRef<Types.FloorItems>([]);
|
||||||
|
@ -182,9 +183,69 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
|
||||||
return updatedItems;
|
return updatedItems;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | undefined = simulationPaths.find((events) => events.modeluuid === obj.userData.modeluuid);
|
||||||
|
|
||||||
const email = localStorage.getItem("email");
|
const email = localStorage.getItem("email");
|
||||||
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
||||||
|
|
||||||
|
if (eventData) {
|
||||||
|
if (eventData.type === 'Conveyor' && eventData) {
|
||||||
|
|
||||||
|
const backendEventData = {
|
||||||
|
type: 'Conveyor',
|
||||||
|
points: eventData.points,
|
||||||
|
speed: (eventData as Types.ConveyorEventsSchema)?.speed
|
||||||
|
};
|
||||||
|
|
||||||
|
//REST
|
||||||
|
|
||||||
|
// await setFloorItemApi(
|
||||||
|
// organization,
|
||||||
|
// obj.uuid,
|
||||||
|
// obj.userData.name,
|
||||||
|
// [worldPosition.x, worldPosition.y, worldPosition.z],
|
||||||
|
// { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
|
||||||
|
// obj.userData.modelId,
|
||||||
|
// false,
|
||||||
|
// true,
|
||||||
|
// backendEventData
|
||||||
|
// );
|
||||||
|
|
||||||
|
//SOCKET
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
organization,
|
||||||
|
modeluuid: newFloorItem.modeluuid,
|
||||||
|
modelname: newFloorItem.modelname,
|
||||||
|
modelfileID: newFloorItem.modelfileID,
|
||||||
|
position: newFloorItem.position,
|
||||||
|
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
|
||||||
|
isLocked: false,
|
||||||
|
isVisible: true,
|
||||||
|
eventData: backendEventData,
|
||||||
|
socketId: socket.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
const newEventData: any = backendEventData;
|
||||||
|
newEventData.modeluuid = newFloorItem.modeluuid;
|
||||||
|
newEventData.modelName = newFloorItem.modelname;
|
||||||
|
newEventData.position = newFloorItem.position;
|
||||||
|
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
||||||
|
|
||||||
|
setSimulationPaths((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[]) => {
|
||||||
|
const updatedEvents = (prevEvents || []).map(event =>
|
||||||
|
event.modeluuid === newFloorItem.modeluuid
|
||||||
|
? { ...event, ...newEventData }
|
||||||
|
: event
|
||||||
|
);
|
||||||
|
return updatedEvents;
|
||||||
|
});
|
||||||
|
|
||||||
|
// socket.emit("v2:model-asset:add", data);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
|
||||||
|
|
||||||
//REST
|
//REST
|
||||||
|
|
||||||
// await setFloorItemApi(
|
// await setFloorItemApi(
|
||||||
|
@ -214,6 +275,8 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
|
||||||
|
|
||||||
socket.emit("v2:model-asset:add", data);
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
itemsGroupRef.current.add(obj);
|
itemsGroupRef.current.add(obj);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
|
import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
|
||||||
import { SelectionHelper } from "./selectionHelper";
|
import { SelectionHelper } from "./selectionHelper";
|
||||||
import { useFrame, useThree } from "@react-three/fiber";
|
import { useFrame, useThree } from "@react-three/fiber";
|
||||||
import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/store";
|
import { useFloorItems, useSelectedAssets, useSimulationPaths, useSocketStore, useToggleView } from "../../../../store/store";
|
||||||
import BoundingBox from "./boundingBoxHelper";
|
import BoundingBox from "./boundingBoxHelper";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
// import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
|
// import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
|
||||||
|
@ -20,6 +20,7 @@ const SelectionControls: React.FC = () => {
|
||||||
const itemsGroupRef = useRef<THREE.Group | undefined>(undefined);
|
const itemsGroupRef = useRef<THREE.Group | undefined>(undefined);
|
||||||
const selectionGroup = useRef() as Types.RefGroup;
|
const selectionGroup = useRef() as Types.RefGroup;
|
||||||
const { toggleView } = useToggleView();
|
const { toggleView } = useToggleView();
|
||||||
|
const { setSimulationPaths } = useSimulationPaths();
|
||||||
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
|
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
|
||||||
const [movedObjects, setMovedObjects] = useState<THREE.Object3D[]>([]);
|
const [movedObjects, setMovedObjects] = useState<THREE.Object3D[]>([]);
|
||||||
const [rotatedObjects, setRotatedObjects] = useState<THREE.Object3D[]>([]);
|
const [rotatedObjects, setRotatedObjects] = useState<THREE.Object3D[]>([]);
|
||||||
|
@ -239,6 +240,11 @@ const SelectionControls: React.FC = () => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
setSimulationPaths((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[]) => {
|
||||||
|
const updatedEvents = (prevEvents || []).filter(event => event.modeluuid !== selectedMesh.uuid);
|
||||||
|
return updatedEvents;
|
||||||
|
});
|
||||||
|
|
||||||
itemsGroupRef.current?.remove(selectedMesh);
|
itemsGroupRef.current?.remove(selectedMesh);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -93,13 +93,13 @@ export default function PostProcessing() {
|
||||||
<Outline
|
<Outline
|
||||||
selection={[selectedActionSphere.point]}
|
selection={[selectedActionSphere.point]}
|
||||||
selectionLayer={10}
|
selectionLayer={10}
|
||||||
width={750}
|
width={1000}
|
||||||
blendFunction={BlendFunction.ALPHA}
|
blendFunction={BlendFunction.ALPHA}
|
||||||
edgeStrength={15}
|
edgeStrength={10}
|
||||||
resolutionScale={2}
|
resolutionScale={2}
|
||||||
pulseSpeed={0}
|
pulseSpeed={0}
|
||||||
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
visibleEdgeColor={0x6f42c1}
|
||||||
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
hiddenEdgeColor={0x6f42c1}
|
||||||
blur={true}
|
blur={true}
|
||||||
xRay={true}
|
xRay={true}
|
||||||
/>
|
/>
|
||||||
|
@ -108,9 +108,9 @@ export default function PostProcessing() {
|
||||||
<Outline
|
<Outline
|
||||||
selection={flattenChildren(selectedPath.group.children)}
|
selection={flattenChildren(selectedPath.group.children)}
|
||||||
selectionLayer={10}
|
selectionLayer={10}
|
||||||
width={750}
|
width={1000}
|
||||||
blendFunction={BlendFunction.ALPHA}
|
blendFunction={BlendFunction.ALPHA}
|
||||||
edgeStrength={15}
|
edgeStrength={10}
|
||||||
resolutionScale={2}
|
resolutionScale={2}
|
||||||
pulseSpeed={0}
|
pulseSpeed={0}
|
||||||
visibleEdgeColor={0x6f42c1}
|
visibleEdgeColor={0x6f42c1}
|
||||||
|
|
|
@ -10,76 +10,76 @@ function Behaviour() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const newPaths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[] = [];
|
const newPaths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[] = [];
|
||||||
|
|
||||||
floorItems.forEach((item: Types.FloorItemType) => {
|
// floorItems.forEach((item: Types.FloorItemType) => {
|
||||||
if (item.modelfileID === "672a090f80d91ac979f4d0bd") {
|
// if (item.modelfileID === "672a090f80d91ac979f4d0bd") {
|
||||||
console.log('item: ', item);
|
// const point1Position = new THREE.Vector3(0, 0.85, 2.2);
|
||||||
const point1Position = new THREE.Vector3(0, 0.85, 2.2);
|
// const middlePointPosition = new THREE.Vector3(0, 0.85, 0);
|
||||||
const middlePointPosition = new THREE.Vector3(0, 0.85, 0);
|
// const point2Position = new THREE.Vector3(0, 0.85, -2.2);
|
||||||
const point2Position = new THREE.Vector3(0, 0.85, -2.2);
|
|
||||||
|
|
||||||
const point1UUID = THREE.MathUtils.generateUUID();
|
// const point1UUID = THREE.MathUtils.generateUUID();
|
||||||
const middlePointUUID = THREE.MathUtils.generateUUID();
|
// const middlePointUUID = THREE.MathUtils.generateUUID();
|
||||||
const point2UUID = THREE.MathUtils.generateUUID();
|
// const point2UUID = THREE.MathUtils.generateUUID();
|
||||||
|
|
||||||
const newPath: Types.ConveyorEventsSchema = {
|
// const newPath: Types.ConveyorEventsSchema = {
|
||||||
modeluuid: item.modeluuid,
|
// modeluuid: item.modeluuid,
|
||||||
modelName: item.modelname,
|
// modelName: item.modelname,
|
||||||
type: 'Conveyor',
|
// type: 'Conveyor',
|
||||||
points: [
|
// points: [
|
||||||
{
|
// {
|
||||||
uuid: point1UUID,
|
// uuid: point1UUID,
|
||||||
position: [point1Position.x, point1Position.y, point1Position.z],
|
// position: [point1Position.x, point1Position.y, point1Position.z],
|
||||||
rotation: [0, 0, 0],
|
// rotation: [0, 0, 0],
|
||||||
actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
|
// actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
|
||||||
triggers: [],
|
// triggers: [],
|
||||||
connections: { source: { pathUUID: item.modeluuid, pointUUID: point1UUID }, targets: [] },
|
// connections: { source: { pathUUID: item.modeluuid, pointUUID: point1UUID }, targets: [] },
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
uuid: middlePointUUID,
|
// uuid: middlePointUUID,
|
||||||
position: [middlePointPosition.x, middlePointPosition.y, middlePointPosition.z],
|
// position: [middlePointPosition.x, middlePointPosition.y, middlePointPosition.z],
|
||||||
rotation: [0, 0, 0],
|
// rotation: [0, 0, 0],
|
||||||
actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
|
// actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
|
||||||
triggers: [],
|
// triggers: [],
|
||||||
connections: { source: { pathUUID: item.modeluuid, pointUUID: middlePointUUID }, targets: [] },
|
// connections: { source: { pathUUID: item.modeluuid, pointUUID: middlePointUUID }, targets: [] },
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
uuid: point2UUID,
|
// uuid: point2UUID,
|
||||||
position: [point2Position.x, point2Position.y, point2Position.z],
|
// position: [point2Position.x, point2Position.y, point2Position.z],
|
||||||
rotation: [0, 0, 0],
|
// rotation: [0, 0, 0],
|
||||||
actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
|
// actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
|
||||||
triggers: [],
|
// triggers: [],
|
||||||
connections: { source: { pathUUID: item.modeluuid, pointUUID: point2UUID }, targets: [] },
|
// connections: { source: { pathUUID: item.modeluuid, pointUUID: point2UUID }, targets: [] },
|
||||||
},
|
// },
|
||||||
],
|
// ],
|
||||||
position: [...item.position],
|
// position: [...item.position],
|
||||||
rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
|
// rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
|
||||||
speed: 'Inherit',
|
// speed: 'Inherit',
|
||||||
};
|
// };
|
||||||
|
|
||||||
newPaths.push(newPath);
|
// newPaths.push(newPath);
|
||||||
} else if (item.modelfileID === "67e3da19c2e8f37134526e6a") {
|
// } else if (item.modelfileID === "67e3da19c2e8f37134526e6a") {
|
||||||
const pointUUID = THREE.MathUtils.generateUUID();
|
// const pointUUID = THREE.MathUtils.generateUUID();
|
||||||
const pointPosition = new THREE.Vector3(0, 1.3, 0);
|
// const pointPosition = new THREE.Vector3(0, 1.3, 0);
|
||||||
|
|
||||||
const newVehiclePath: Types.VehicleEventsSchema = {
|
// const newVehiclePath: Types.VehicleEventsSchema = {
|
||||||
modeluuid: item.modeluuid,
|
// modeluuid: item.modeluuid,
|
||||||
modelName: item.modelname,
|
// modelName: item.modelname,
|
||||||
type: 'Vehicle',
|
// type: 'Vehicle',
|
||||||
point: {
|
// point: {
|
||||||
uuid: pointUUID,
|
// uuid: pointUUID,
|
||||||
position: [pointPosition.x, pointPosition.y, pointPosition.z],
|
// position: [pointPosition.x, pointPosition.y, pointPosition.z],
|
||||||
actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Start', start: {}, hitCount: 1, end: {}, buffer: 0 },
|
// actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Start', start: {}, hitCount: 1, end: {}, buffer: 0 },
|
||||||
connections: { source: { pathUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] },
|
// connections: { source: { pathUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] },
|
||||||
speed: 2,
|
// speed: 2,
|
||||||
},
|
// },
|
||||||
position: [...item.position],
|
// position: [...item.position],
|
||||||
};
|
// };
|
||||||
|
|
||||||
newPaths.push(newVehiclePath);
|
// newPaths.push(newVehiclePath);
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
|
|
||||||
setSimulationPaths(newPaths);
|
// setSimulationPaths(newPaths);
|
||||||
|
// console.log('floorItems: ', floorItems);
|
||||||
}, [floorItems]);
|
}, [floorItems]);
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
|
|
|
@ -14,12 +14,14 @@ import {
|
||||||
} from "../../../store/store";
|
} from "../../../store/store";
|
||||||
import { useFrame, useThree } from "@react-three/fiber";
|
import { useFrame, useThree } from "@react-three/fiber";
|
||||||
import { useSubModuleStore } from "../../../store/useModuleStore";
|
import { useSubModuleStore } from "../../../store/useModuleStore";
|
||||||
|
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||||||
|
|
||||||
function PathCreation({
|
function PathCreation({
|
||||||
pathsGroupRef,
|
pathsGroupRef,
|
||||||
}: {
|
}: {
|
||||||
pathsGroupRef: React.MutableRefObject<THREE.Group>;
|
pathsGroupRef: React.MutableRefObject<THREE.Group>;
|
||||||
}) {
|
}) {
|
||||||
|
const { isPlaying } = usePlayButtonStore();
|
||||||
const { renderDistance } = useRenderDistance();
|
const { renderDistance } = useRenderDistance();
|
||||||
const { setSubModule } = useSubModuleStore();
|
const { setSubModule } = useSubModuleStore();
|
||||||
const { setSelectedActionSphere, selectedActionSphere } =
|
const { setSelectedActionSphere, selectedActionSphere } =
|
||||||
|
@ -66,7 +68,7 @@ function PathCreation({
|
||||||
const distance = new THREE.Vector3(
|
const distance = new THREE.Vector3(
|
||||||
...group.position.toArray()
|
...group.position.toArray()
|
||||||
).distanceTo(camera.position);
|
).distanceTo(camera.position);
|
||||||
group.visible = distance <= renderDistance;
|
group.visible = ((distance <= renderDistance) && !isPlaying);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -193,7 +195,7 @@ function PathCreation({
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group name="simulation-simulationPaths-group" ref={pathsGroupRef}>
|
<group visible={!isPlaying} name="simulation-simulationPaths-group" ref={pathsGroupRef}>
|
||||||
{simulationPaths.map((path) => {
|
{simulationPaths.map((path) => {
|
||||||
if (path.type === "Conveyor") {
|
if (path.type === "Conveyor") {
|
||||||
const points = path.points.map(
|
const points = path.points.map(
|
||||||
|
|
|
@ -0,0 +1,916 @@
|
||||||
|
// // animation-worker.js
|
||||||
|
// // This web worker handles animation calculations off the main thread
|
||||||
|
|
||||||
|
// /* eslint-disable no-restricted-globals */
|
||||||
|
// // The above disables the ESLint rule for this file since 'self' is valid in web workers
|
||||||
|
|
||||||
|
// // Store process data, animation states, and objects
|
||||||
|
// let processes = [];
|
||||||
|
// let animationStates = {};
|
||||||
|
// let lastTimestamp = 0;
|
||||||
|
|
||||||
|
// // Message handler for communication with main thread
|
||||||
|
// self.onmessage = function (event) {
|
||||||
|
// const { type, data } = event.data;
|
||||||
|
|
||||||
|
// switch (type) {
|
||||||
|
// case "initialize":
|
||||||
|
// processes = data.processes;
|
||||||
|
// initializeAnimationStates();
|
||||||
|
// break;
|
||||||
|
|
||||||
|
// case "update":
|
||||||
|
// const { timestamp, isPlaying } = data;
|
||||||
|
// if (isPlaying) {
|
||||||
|
// const delta = (timestamp - lastTimestamp) / 1000; // Convert to seconds
|
||||||
|
// updateAnimations(delta, timestamp);
|
||||||
|
// }
|
||||||
|
// lastTimestamp = timestamp;
|
||||||
|
// break;
|
||||||
|
|
||||||
|
// case "reset":
|
||||||
|
// resetAnimations();
|
||||||
|
// break;
|
||||||
|
|
||||||
|
// case "togglePlay":
|
||||||
|
// // If resuming from pause, recalculate the time delta
|
||||||
|
// lastTimestamp = data.timestamp;
|
||||||
|
// break;
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
// // Initialize animation states for all processes
|
||||||
|
// function initializeAnimationStates() {
|
||||||
|
// animationStates = {};
|
||||||
|
|
||||||
|
// processes.forEach((process) => {
|
||||||
|
// animationStates[process.id] = {
|
||||||
|
// spawnedObjects: {},
|
||||||
|
// nextSpawnTime: 0,
|
||||||
|
// objectIdCounter: 0,
|
||||||
|
// };
|
||||||
|
// });
|
||||||
|
|
||||||
|
// // Send initial states back to main thread
|
||||||
|
// self.postMessage({
|
||||||
|
// type: "statesInitialized",
|
||||||
|
// data: { animationStates },
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Reset all animations
|
||||||
|
// function resetAnimations() {
|
||||||
|
// initializeAnimationStates();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Find spawn point in a process
|
||||||
|
// function findSpawnPoint(process) {
|
||||||
|
// for (const path of process.paths || []) {
|
||||||
|
// for (const point of path.points || []) {
|
||||||
|
// const spawnAction = point.actions?.find(
|
||||||
|
// (a) => a.isUsed && a.type === "Spawn"
|
||||||
|
// );
|
||||||
|
// if (spawnAction) {
|
||||||
|
// return { point, path };
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// return null;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Create a new spawned object with proper initial position
|
||||||
|
// function createSpawnedObject(process, spawnPoint, currentTime, materialType) {
|
||||||
|
// // Extract spawn position from the actual spawn point
|
||||||
|
// const position = spawnPoint.point.position
|
||||||
|
// ? [...spawnPoint.point.position]
|
||||||
|
// : [0, 0, 0];
|
||||||
|
|
||||||
|
// // Get the path position and add it to the spawn point position
|
||||||
|
// const pathPosition = spawnPoint.path.pathPosition || [0, 0, 0];
|
||||||
|
// const absolutePosition = [
|
||||||
|
// position[0] + pathPosition[0],
|
||||||
|
// position[1] + pathPosition[1],
|
||||||
|
// position[2] + pathPosition[2],
|
||||||
|
// ];
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// id: `obj-${process.id}-${animationStates[process.id].objectIdCounter}`,
|
||||||
|
// position: absolutePosition,
|
||||||
|
// state: {
|
||||||
|
// currentIndex: 0,
|
||||||
|
// progress: 0,
|
||||||
|
// isAnimating: true,
|
||||||
|
// speed: process.speed || 1,
|
||||||
|
// isDelaying: false,
|
||||||
|
// delayStartTime: 0,
|
||||||
|
// currentDelayDuration: 0,
|
||||||
|
// delayComplete: false,
|
||||||
|
// currentPathIndex: 0,
|
||||||
|
// // Store the spawn point index to start animation from correct path point
|
||||||
|
// spawnPointIndex: getPointIndexInProcess(process, spawnPoint.point),
|
||||||
|
// },
|
||||||
|
// visible: true,
|
||||||
|
// materialType: materialType || "Default",
|
||||||
|
// spawnTime: currentTime,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Get the index of a point within the process animation path
|
||||||
|
// function getPointIndexInProcess(process, point) {
|
||||||
|
// if (!process.paths) return 0;
|
||||||
|
|
||||||
|
// let cumulativePoints = 0;
|
||||||
|
// for (const path of process.paths) {
|
||||||
|
// for (let i = 0; i < (path.points?.length || 0); i++) {
|
||||||
|
// if (path.points[i].uuid === point.uuid) {
|
||||||
|
// return cumulativePoints + i;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// cumulativePoints += path.points?.length || 0;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return 0;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Get point data for current animation index
|
||||||
|
// function getPointDataForAnimationIndex(process, index) {
|
||||||
|
// if (!process.paths) return null;
|
||||||
|
|
||||||
|
// let cumulativePoints = 0;
|
||||||
|
// for (const path of process.paths) {
|
||||||
|
// const pointCount = path.points?.length || 0;
|
||||||
|
|
||||||
|
// if (index < cumulativePoints + pointCount) {
|
||||||
|
// const pointIndex = index - cumulativePoints;
|
||||||
|
// return path.points?.[pointIndex] || null;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// cumulativePoints += pointCount;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return null;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Convert process paths to Vector3 format
|
||||||
|
// function getProcessPath(process) {
|
||||||
|
// return process.animationPath?.map((p) => ({ x: p.x, y: p.y, z: p.z })) || [];
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Handle material swap for an object
|
||||||
|
// function handleMaterialSwap(processId, objectId, materialType) {
|
||||||
|
// const processState = animationStates[processId];
|
||||||
|
// if (!processState || !processState.spawnedObjects[objectId]) return;
|
||||||
|
|
||||||
|
// processState.spawnedObjects[objectId].materialType = materialType;
|
||||||
|
|
||||||
|
// // Notify main thread about material change
|
||||||
|
// self.postMessage({
|
||||||
|
// type: "materialChanged",
|
||||||
|
// data: {
|
||||||
|
// processId,
|
||||||
|
// objectId,
|
||||||
|
// materialType,
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Handle point actions for an object
|
||||||
|
// function handlePointActions(processId, objectId, actions = [], currentTime) {
|
||||||
|
// let shouldStopAnimation = false;
|
||||||
|
// const processState = animationStates[processId];
|
||||||
|
|
||||||
|
// if (!processState || !processState.spawnedObjects[objectId]) return false;
|
||||||
|
|
||||||
|
// const objectState = processState.spawnedObjects[objectId];
|
||||||
|
|
||||||
|
// actions.forEach((action) => {
|
||||||
|
// if (!action.isUsed) return;
|
||||||
|
|
||||||
|
// switch (action.type) {
|
||||||
|
// case "Delay":
|
||||||
|
// if (objectState.state.isDelaying) return;
|
||||||
|
|
||||||
|
// const delayDuration =
|
||||||
|
// typeof action.delay === "number"
|
||||||
|
// ? action.delay
|
||||||
|
// : parseFloat(action.delay || "0");
|
||||||
|
|
||||||
|
// if (delayDuration > 0) {
|
||||||
|
// objectState.state.isDelaying = true;
|
||||||
|
// objectState.state.delayStartTime = currentTime;
|
||||||
|
// objectState.state.currentDelayDuration = delayDuration;
|
||||||
|
// objectState.state.delayComplete = false;
|
||||||
|
// shouldStopAnimation = true;
|
||||||
|
// }
|
||||||
|
// break;
|
||||||
|
|
||||||
|
// case "Despawn":
|
||||||
|
// delete processState.spawnedObjects[objectId];
|
||||||
|
// shouldStopAnimation = true;
|
||||||
|
|
||||||
|
// // Notify main thread about despawn
|
||||||
|
// self.postMessage({
|
||||||
|
// type: "objectDespawned",
|
||||||
|
// data: {
|
||||||
|
// processId,
|
||||||
|
// objectId,
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// break;
|
||||||
|
|
||||||
|
// case "Swap":
|
||||||
|
// if (action.material) {
|
||||||
|
// handleMaterialSwap(processId, objectId, action.material);
|
||||||
|
// }
|
||||||
|
// break;
|
||||||
|
|
||||||
|
// default:
|
||||||
|
// break;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// return shouldStopAnimation;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Check if point has non-inherit actions
|
||||||
|
// function hasNonInheritActions(actions = []) {
|
||||||
|
// return actions.some((action) => action.isUsed && action.type !== "Inherit");
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Calculate vector lerp (linear interpolation)
|
||||||
|
// function lerpVectors(v1, v2, alpha) {
|
||||||
|
// return {
|
||||||
|
// x: v1.x + (v2.x - v1.x) * alpha,
|
||||||
|
// y: v1.y + (v2.y - v1.y) * alpha,
|
||||||
|
// z: v1.z + (v2.z - v1.z) * alpha,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Calculate vector distance
|
||||||
|
// function distanceBetweenVectors(v1, v2) {
|
||||||
|
// const dx = v2.x - v1.x;
|
||||||
|
// const dy = v2.y - v1.y;
|
||||||
|
// const dz = v2.z - v1.z;
|
||||||
|
// return Math.sqrt(dx * dx + dy * dy + dz * dz);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Process spawn logic
|
||||||
|
// function processSpawns(currentTime) {
|
||||||
|
// processes.forEach((process) => {
|
||||||
|
// const processState = animationStates[process.id];
|
||||||
|
// if (!processState) return;
|
||||||
|
|
||||||
|
// const spawnPointData = findSpawnPoint(process);
|
||||||
|
// if (!spawnPointData || !spawnPointData.point.actions) return;
|
||||||
|
|
||||||
|
// const spawnAction = spawnPointData.point.actions.find(
|
||||||
|
// (a) => a.isUsed && a.type === "Spawn"
|
||||||
|
// );
|
||||||
|
// if (!spawnAction) return;
|
||||||
|
|
||||||
|
// const spawnInterval =
|
||||||
|
// typeof spawnAction.spawnInterval === "number"
|
||||||
|
// ? spawnAction.spawnInterval
|
||||||
|
// : parseFloat(spawnAction.spawnInterval || "0");
|
||||||
|
|
||||||
|
// if (currentTime >= processState.nextSpawnTime) {
|
||||||
|
// const newObject = createSpawnedObject(
|
||||||
|
// process,
|
||||||
|
// spawnPointData,
|
||||||
|
// currentTime,
|
||||||
|
// spawnAction.material || "Default"
|
||||||
|
// );
|
||||||
|
|
||||||
|
// processState.spawnedObjects[newObject.id] = newObject;
|
||||||
|
// processState.objectIdCounter++;
|
||||||
|
// processState.nextSpawnTime = currentTime + spawnInterval;
|
||||||
|
|
||||||
|
// // Notify main thread about new object
|
||||||
|
// self.postMessage({
|
||||||
|
// type: "objectSpawned",
|
||||||
|
// data: {
|
||||||
|
// processId: process.id,
|
||||||
|
// object: newObject,
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Update all animations
|
||||||
|
// function updateAnimations(delta, currentTime) {
|
||||||
|
// // First handle spawning of new objects
|
||||||
|
// processSpawns(currentTime);
|
||||||
|
|
||||||
|
// // Then animate existing objects
|
||||||
|
// processes.forEach((process) => {
|
||||||
|
// const processState = animationStates[process.id];
|
||||||
|
// if (!processState) return;
|
||||||
|
|
||||||
|
// const path = getProcessPath(process);
|
||||||
|
// if (path.length < 2) return;
|
||||||
|
|
||||||
|
// const updatedObjects = {};
|
||||||
|
// let hasChanges = false;
|
||||||
|
|
||||||
|
// Object.entries(processState.spawnedObjects).forEach(([objectId, obj]) => {
|
||||||
|
// if (!obj.visible || !obj.state.isAnimating) return;
|
||||||
|
|
||||||
|
// const stateRef = obj.state;
|
||||||
|
|
||||||
|
// // Use the spawnPointIndex as starting point if it's the initial movement
|
||||||
|
// if (stateRef.currentIndex === 0 && stateRef.progress === 0) {
|
||||||
|
// stateRef.currentIndex = stateRef.spawnPointIndex || 0;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Get current point data
|
||||||
|
// const currentPointData = getPointDataForAnimationIndex(
|
||||||
|
// process,
|
||||||
|
// stateRef.currentIndex
|
||||||
|
// );
|
||||||
|
|
||||||
|
// // Execute actions when arriving at a new point
|
||||||
|
// if (stateRef.progress === 0 && currentPointData?.actions) {
|
||||||
|
// const shouldStop = handlePointActions(
|
||||||
|
// process.id,
|
||||||
|
// objectId,
|
||||||
|
// currentPointData.actions,
|
||||||
|
// currentTime
|
||||||
|
// );
|
||||||
|
// if (shouldStop) return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Handle delays
|
||||||
|
// if (stateRef.isDelaying) {
|
||||||
|
// if (
|
||||||
|
// currentTime - stateRef.delayStartTime >=
|
||||||
|
// stateRef.currentDelayDuration
|
||||||
|
// ) {
|
||||||
|
// stateRef.isDelaying = false;
|
||||||
|
// stateRef.delayComplete = true;
|
||||||
|
// } else {
|
||||||
|
// updatedObjects[objectId] = { ...obj, state: { ...stateRef } };
|
||||||
|
// return; // Keep waiting
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const nextPointIdx = stateRef.currentIndex + 1;
|
||||||
|
// const isLastPoint = nextPointIdx >= path.length;
|
||||||
|
|
||||||
|
// if (isLastPoint) {
|
||||||
|
// if (currentPointData?.actions) {
|
||||||
|
// const shouldStop = !hasNonInheritActions(currentPointData.actions);
|
||||||
|
// if (shouldStop) {
|
||||||
|
// // Reached the end of path with no more actions
|
||||||
|
// delete processState.spawnedObjects[objectId];
|
||||||
|
|
||||||
|
// // Notify main thread to remove the object
|
||||||
|
// self.postMessage({
|
||||||
|
// type: "objectCompleted",
|
||||||
|
// data: {
|
||||||
|
// processId: process.id,
|
||||||
|
// objectId,
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (!isLastPoint) {
|
||||||
|
// const currentPos = path[stateRef.currentIndex];
|
||||||
|
// const nextPos = path[nextPointIdx];
|
||||||
|
// const distance = distanceBetweenVectors(currentPos, nextPos);
|
||||||
|
// const movement = stateRef.speed * delta;
|
||||||
|
|
||||||
|
// // Update progress based on distance and speed
|
||||||
|
// const oldProgress = stateRef.progress;
|
||||||
|
// stateRef.progress += movement / distance;
|
||||||
|
|
||||||
|
// if (stateRef.progress >= 1) {
|
||||||
|
// // Reached next point
|
||||||
|
// stateRef.currentIndex = nextPointIdx;
|
||||||
|
// stateRef.progress = 0;
|
||||||
|
// stateRef.delayComplete = false;
|
||||||
|
// obj.position = [nextPos.x, nextPos.y, nextPos.z];
|
||||||
|
// } else {
|
||||||
|
// // Interpolate position
|
||||||
|
// const lerpedPos = lerpVectors(currentPos, nextPos, stateRef.progress);
|
||||||
|
// obj.position = [lerpedPos.x, lerpedPos.y, lerpedPos.z];
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Only send updates when there's meaningful movement
|
||||||
|
// if (Math.abs(oldProgress - stateRef.progress) > 0.01) {
|
||||||
|
// hasChanges = true;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// updatedObjects[objectId] = { ...obj, state: { ...stateRef } };
|
||||||
|
// });
|
||||||
|
|
||||||
|
// // Update animation state with modified objects
|
||||||
|
// if (Object.keys(updatedObjects).length > 0) {
|
||||||
|
// processState.spawnedObjects = {
|
||||||
|
// ...processState.spawnedObjects,
|
||||||
|
// ...updatedObjects,
|
||||||
|
// };
|
||||||
|
|
||||||
|
// // Only send position updates when there are meaningful changes
|
||||||
|
// if (hasChanges) {
|
||||||
|
// self.postMessage({
|
||||||
|
// type: "positionsUpdated",
|
||||||
|
// data: {
|
||||||
|
// processId: process.id,
|
||||||
|
// objects: updatedObjects,
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// animation-worker.js
|
||||||
|
// This web worker handles animation calculations off the main thread
|
||||||
|
|
||||||
|
/* eslint-disable no-restricted-globals */
|
||||||
|
// The above disables the ESLint rule for this file since 'self' is valid in web workers
|
||||||
|
|
||||||
|
// Store process data, animation states, and objects
|
||||||
|
let processes = [];
|
||||||
|
let animationStates = {};
|
||||||
|
let lastTimestamp = 0;
|
||||||
|
let debugMode = true;
|
||||||
|
|
||||||
|
// Logger function for debugging
|
||||||
|
function log(...args) {
|
||||||
|
if (debugMode) {
|
||||||
|
self.postMessage({
|
||||||
|
type: "debug",
|
||||||
|
data: { message: args.join(' ') }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Message handler for communication with main thread
|
||||||
|
self.onmessage = function (event) {
|
||||||
|
const { type, data } = event.data;
|
||||||
|
log(`Worker received message: ${type}`);
|
||||||
|
|
||||||
|
switch (type) {
|
||||||
|
case "initialize":
|
||||||
|
processes = data.processes;
|
||||||
|
log(`Initialized with ${processes.length} processes`);
|
||||||
|
initializeAnimationStates();
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "update":
|
||||||
|
const { timestamp, isPlaying } = data;
|
||||||
|
if (isPlaying) {
|
||||||
|
const delta = lastTimestamp === 0 ? 0.016 : (timestamp - lastTimestamp) / 1000; // Convert to seconds
|
||||||
|
updateAnimations(delta, timestamp);
|
||||||
|
}
|
||||||
|
lastTimestamp = timestamp;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "reset":
|
||||||
|
log("Resetting animations");
|
||||||
|
resetAnimations();
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "togglePlay":
|
||||||
|
// If resuming from pause, recalculate the time delta
|
||||||
|
log(`Toggle play: ${data.isPlaying}`);
|
||||||
|
lastTimestamp = data.timestamp;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "setDebug":
|
||||||
|
debugMode = data.enabled;
|
||||||
|
log(`Debug mode: ${debugMode}`);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialize animation states for all processes
|
||||||
|
function initializeAnimationStates() {
|
||||||
|
animationStates = {};
|
||||||
|
|
||||||
|
processes.forEach((process) => {
|
||||||
|
if (!process || !process.id) {
|
||||||
|
log("Invalid process found:", process);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
animationStates[process.id] = {
|
||||||
|
spawnedObjects: {},
|
||||||
|
nextSpawnTime: 0,
|
||||||
|
objectIdCounter: 0,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// Send initial states back to main thread
|
||||||
|
self.postMessage({
|
||||||
|
type: "statesInitialized",
|
||||||
|
data: { animationStates },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset all animations
|
||||||
|
function resetAnimations() {
|
||||||
|
initializeAnimationStates();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find spawn point in a process
|
||||||
|
function findSpawnPoint(process) {
|
||||||
|
if (!process || !process.paths) {
|
||||||
|
log(`No paths found for process ${process?.id}`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const path of process.paths) {
|
||||||
|
if (!path || !path.points) continue;
|
||||||
|
|
||||||
|
for (const point of path.points) {
|
||||||
|
if (!point || !point.actions) continue;
|
||||||
|
|
||||||
|
const spawnAction = point.actions.find(
|
||||||
|
(a) => a && a.isUsed && a.type === "Spawn"
|
||||||
|
);
|
||||||
|
if (spawnAction) {
|
||||||
|
return { point, path };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
log(`No spawn points found for process ${process.id}`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a new spawned object with proper initial position
|
||||||
|
function createSpawnedObject(process, spawnPoint, currentTime, materialType) {
|
||||||
|
// Extract spawn position from the actual spawn point
|
||||||
|
const position = spawnPoint.point.position
|
||||||
|
? [...spawnPoint.point.position]
|
||||||
|
: [0, 0, 0];
|
||||||
|
|
||||||
|
// Get the path position and add it to the spawn point position
|
||||||
|
const pathPosition = spawnPoint.path.pathPosition || [0, 0, 0];
|
||||||
|
const absolutePosition = [
|
||||||
|
position[0] + pathPosition[0],
|
||||||
|
position[1] + pathPosition[1],
|
||||||
|
position[2] + pathPosition[2],
|
||||||
|
];
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: `obj-${process.id}-${animationStates[process.id].objectIdCounter}`,
|
||||||
|
position: absolutePosition,
|
||||||
|
state: {
|
||||||
|
currentIndex: 0,
|
||||||
|
progress: 0,
|
||||||
|
isAnimating: true,
|
||||||
|
speed: process.speed || 1,
|
||||||
|
isDelaying: false,
|
||||||
|
delayStartTime: 0,
|
||||||
|
currentDelayDuration: 0,
|
||||||
|
delayComplete: false,
|
||||||
|
currentPathIndex: 0,
|
||||||
|
// Store the spawn point index to start animation from correct path point
|
||||||
|
spawnPointIndex: getPointIndexInProcess(process, spawnPoint.point),
|
||||||
|
},
|
||||||
|
visible: true,
|
||||||
|
materialType: materialType || "Default",
|
||||||
|
spawnTime: currentTime,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the index of a point within the process animation path
|
||||||
|
function getPointIndexInProcess(process, point) {
|
||||||
|
if (!process.paths) return 0;
|
||||||
|
|
||||||
|
let cumulativePoints = 0;
|
||||||
|
for (const path of process.paths) {
|
||||||
|
for (let i = 0; i < (path.points?.length || 0); i++) {
|
||||||
|
if (path.points[i].uuid === point.uuid) {
|
||||||
|
return cumulativePoints + i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
cumulativePoints += path.points?.length || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get point data for current animation index
|
||||||
|
function getPointDataForAnimationIndex(process, index) {
|
||||||
|
if (!process.paths) return null;
|
||||||
|
|
||||||
|
let cumulativePoints = 0;
|
||||||
|
for (const path of process.paths) {
|
||||||
|
const pointCount = path.points?.length || 0;
|
||||||
|
|
||||||
|
if (index < cumulativePoints + pointCount) {
|
||||||
|
const pointIndex = index - cumulativePoints;
|
||||||
|
return path.points?.[pointIndex] || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
cumulativePoints += pointCount;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Convert process paths to Vector3 format
|
||||||
|
function getProcessPath(process) {
|
||||||
|
if (!process.animationPath) {
|
||||||
|
log(`No animation path for process ${process.id}`);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
return process.animationPath.map((p) => ({ x: p.x, y: p.y, z: p.z })) || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle material swap for an object
|
||||||
|
function handleMaterialSwap(processId, objectId, materialType) {
|
||||||
|
const processState = animationStates[processId];
|
||||||
|
if (!processState || !processState.spawnedObjects[objectId]) return;
|
||||||
|
|
||||||
|
processState.spawnedObjects[objectId].materialType = materialType;
|
||||||
|
|
||||||
|
// Notify main thread about material change
|
||||||
|
self.postMessage({
|
||||||
|
type: "materialChanged",
|
||||||
|
data: {
|
||||||
|
processId,
|
||||||
|
objectId,
|
||||||
|
materialType,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle point actions for an object
|
||||||
|
function handlePointActions(processId, objectId, actions = [], currentTime) {
|
||||||
|
let shouldStopAnimation = false;
|
||||||
|
const processState = animationStates[processId];
|
||||||
|
|
||||||
|
if (!processState || !processState.spawnedObjects[objectId]) return false;
|
||||||
|
|
||||||
|
const objectState = processState.spawnedObjects[objectId];
|
||||||
|
|
||||||
|
actions.forEach((action) => {
|
||||||
|
if (!action || !action.isUsed) return;
|
||||||
|
|
||||||
|
switch (action.type) {
|
||||||
|
case "Delay":
|
||||||
|
if (objectState.state.isDelaying) return;
|
||||||
|
|
||||||
|
const delayDuration =
|
||||||
|
typeof action.delay === "number"
|
||||||
|
? action.delay
|
||||||
|
: parseFloat(action.delay || "0");
|
||||||
|
|
||||||
|
if (delayDuration > 0) {
|
||||||
|
objectState.state.isDelaying = true;
|
||||||
|
objectState.state.delayStartTime = currentTime;
|
||||||
|
objectState.state.currentDelayDuration = delayDuration;
|
||||||
|
objectState.state.delayComplete = false;
|
||||||
|
shouldStopAnimation = true;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "Despawn":
|
||||||
|
delete processState.spawnedObjects[objectId];
|
||||||
|
shouldStopAnimation = true;
|
||||||
|
|
||||||
|
// Notify main thread about despawn
|
||||||
|
self.postMessage({
|
||||||
|
type: "objectDespawned",
|
||||||
|
data: {
|
||||||
|
processId,
|
||||||
|
objectId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "Swap":
|
||||||
|
if (action.material) {
|
||||||
|
handleMaterialSwap(processId, objectId, action.material);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return shouldStopAnimation;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if point has non-inherit actions
|
||||||
|
function hasNonInheritActions(actions = []) {
|
||||||
|
return actions.some((action) => action && action.isUsed && action.type !== "Inherit");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate vector lerp (linear interpolation)
|
||||||
|
function lerpVectors(v1, v2, alpha) {
|
||||||
|
return {
|
||||||
|
x: v1.x + (v2.x - v1.x) * alpha,
|
||||||
|
y: v1.y + (v2.y - v1.y) * alpha,
|
||||||
|
z: v1.z + (v2.z - v1.z) * alpha,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate vector distance
|
||||||
|
function distanceBetweenVectors(v1, v2) {
|
||||||
|
const dx = v2.x - v1.x;
|
||||||
|
const dy = v2.y - v1.y;
|
||||||
|
const dz = v2.z - v1.z;
|
||||||
|
return Math.sqrt(dx * dx + dy * dy + dz * dz);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Process spawn logic
|
||||||
|
function processSpawns(currentTime) {
|
||||||
|
processes.forEach((process) => {
|
||||||
|
const processState = animationStates[process.id];
|
||||||
|
if (!processState) return;
|
||||||
|
|
||||||
|
const spawnPointData = findSpawnPoint(process);
|
||||||
|
if (!spawnPointData || !spawnPointData.point.actions) return;
|
||||||
|
|
||||||
|
const spawnAction = spawnPointData.point.actions.find(
|
||||||
|
(a) => a.isUsed && a.type === "Spawn"
|
||||||
|
);
|
||||||
|
if (!spawnAction) return;
|
||||||
|
|
||||||
|
const spawnInterval =
|
||||||
|
typeof spawnAction.spawnInterval === "number"
|
||||||
|
? spawnAction.spawnInterval
|
||||||
|
: parseFloat(spawnAction.spawnInterval || "2"); // Default to 2 seconds if not specified
|
||||||
|
|
||||||
|
if (currentTime >= processState.nextSpawnTime) {
|
||||||
|
const newObject = createSpawnedObject(
|
||||||
|
process,
|
||||||
|
spawnPointData,
|
||||||
|
currentTime,
|
||||||
|
spawnAction.material || "Default"
|
||||||
|
);
|
||||||
|
|
||||||
|
processState.spawnedObjects[newObject.id] = newObject;
|
||||||
|
processState.objectIdCounter++;
|
||||||
|
processState.nextSpawnTime = currentTime + spawnInterval;
|
||||||
|
|
||||||
|
log(`Spawned object ${newObject.id} for process ${process.id}`);
|
||||||
|
|
||||||
|
// Notify main thread about new object
|
||||||
|
self.postMessage({
|
||||||
|
type: "objectSpawned",
|
||||||
|
data: {
|
||||||
|
processId: process.id,
|
||||||
|
object: newObject,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update all animations
|
||||||
|
function updateAnimations(delta, currentTime) {
|
||||||
|
// First handle spawning of new objects
|
||||||
|
processSpawns(currentTime);
|
||||||
|
|
||||||
|
// Then animate existing objects
|
||||||
|
processes.forEach((process) => {
|
||||||
|
const processState = animationStates[process.id];
|
||||||
|
if (!processState) return;
|
||||||
|
|
||||||
|
const path = getProcessPath(process);
|
||||||
|
if (path.length < 2) {
|
||||||
|
log(`Path too short for process ${process.id}, length: ${path.length}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const updatedObjects = {};
|
||||||
|
let hasChanges = false;
|
||||||
|
|
||||||
|
Object.entries(processState.spawnedObjects).forEach(([objectId, obj]) => {
|
||||||
|
if (!obj.visible || !obj.state.isAnimating) return;
|
||||||
|
|
||||||
|
const stateRef = obj.state;
|
||||||
|
|
||||||
|
// Use the spawnPointIndex as starting point if it's the initial movement
|
||||||
|
if (stateRef.currentIndex === 0 && stateRef.progress === 0) {
|
||||||
|
stateRef.currentIndex = stateRef.spawnPointIndex || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get current point data
|
||||||
|
const currentPointData = getPointDataForAnimationIndex(
|
||||||
|
process,
|
||||||
|
stateRef.currentIndex
|
||||||
|
);
|
||||||
|
|
||||||
|
// Execute actions when arriving at a new point
|
||||||
|
if (stateRef.progress === 0 && currentPointData?.actions) {
|
||||||
|
const shouldStop = handlePointActions(
|
||||||
|
process.id,
|
||||||
|
objectId,
|
||||||
|
currentPointData.actions,
|
||||||
|
currentTime
|
||||||
|
);
|
||||||
|
if (shouldStop) return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle delays
|
||||||
|
if (stateRef.isDelaying) {
|
||||||
|
if (
|
||||||
|
currentTime - stateRef.delayStartTime >=
|
||||||
|
stateRef.currentDelayDuration
|
||||||
|
) {
|
||||||
|
stateRef.isDelaying = false;
|
||||||
|
stateRef.delayComplete = true;
|
||||||
|
} else {
|
||||||
|
updatedObjects[objectId] = { ...obj, state: { ...stateRef } };
|
||||||
|
return; // Keep waiting
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextPointIdx = stateRef.currentIndex + 1;
|
||||||
|
const isLastPoint = nextPointIdx >= path.length;
|
||||||
|
|
||||||
|
if (isLastPoint) {
|
||||||
|
if (currentPointData?.actions) {
|
||||||
|
const shouldStop = !hasNonInheritActions(currentPointData.actions);
|
||||||
|
if (shouldStop) {
|
||||||
|
// Reached the end of path with no more actions
|
||||||
|
delete processState.spawnedObjects[objectId];
|
||||||
|
log(`Object ${objectId} completed path`);
|
||||||
|
|
||||||
|
// Notify main thread to remove the object
|
||||||
|
self.postMessage({
|
||||||
|
type: "objectCompleted",
|
||||||
|
data: {
|
||||||
|
processId: process.id,
|
||||||
|
objectId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isLastPoint) {
|
||||||
|
const currentPos = path[stateRef.currentIndex];
|
||||||
|
const nextPos = path[nextPointIdx];
|
||||||
|
const distance = distanceBetweenVectors(currentPos, nextPos);
|
||||||
|
|
||||||
|
// Ensure we don't divide by zero
|
||||||
|
if (distance > 0) {
|
||||||
|
const movement = stateRef.speed * delta;
|
||||||
|
|
||||||
|
// Update progress based on distance and speed
|
||||||
|
const oldProgress = stateRef.progress;
|
||||||
|
stateRef.progress += movement / distance;
|
||||||
|
|
||||||
|
if (stateRef.progress >= 1) {
|
||||||
|
// Reached next point
|
||||||
|
stateRef.currentIndex = nextPointIdx;
|
||||||
|
stateRef.progress = 0;
|
||||||
|
stateRef.delayComplete = false;
|
||||||
|
obj.position = [nextPos.x, nextPos.y, nextPos.z];
|
||||||
|
} else {
|
||||||
|
// Interpolate position
|
||||||
|
const lerpedPos = lerpVectors(currentPos, nextPos, stateRef.progress);
|
||||||
|
obj.position = [lerpedPos.x, lerpedPos.y, lerpedPos.z];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only send updates when there's meaningful movement
|
||||||
|
if (Math.abs(oldProgress - stateRef.progress) > 0.01) {
|
||||||
|
hasChanges = true;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Skip to next point if distance is zero
|
||||||
|
stateRef.currentIndex = nextPointIdx;
|
||||||
|
stateRef.progress = 0;
|
||||||
|
obj.position = [nextPos.x, nextPos.y, nextPos.z];
|
||||||
|
hasChanges = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updatedObjects[objectId] = { ...obj, state: { ...stateRef } };
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update animation state with modified objects
|
||||||
|
if (Object.keys(updatedObjects).length > 0) {
|
||||||
|
processState.spawnedObjects = {
|
||||||
|
...processState.spawnedObjects,
|
||||||
|
...updatedObjects,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Only send position updates when there are meaningful changes
|
||||||
|
if (hasChanges) {
|
||||||
|
self.postMessage({
|
||||||
|
type: "positionsUpdated",
|
||||||
|
data: {
|
||||||
|
processId: process.id,
|
||||||
|
objects: updatedObjects,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
|
@ -0,0 +1,7 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Mesh: React.FC = () => {
|
||||||
|
return <mesh></mesh>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Mesh;
|
File diff suppressed because it is too large
Load Diff
|
@ -10,6 +10,7 @@ const ProcessContainer: React.FC = () => {
|
||||||
<>
|
<>
|
||||||
<ProcessCreator onProcessesCreated={setProcesses} />
|
<ProcessCreator onProcessesCreated={setProcesses} />
|
||||||
{processes.length > 0 && <ProcessAnimator processes={processes} />}
|
{processes.length > 0 && <ProcessAnimator processes={processes} />}
|
||||||
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,3 +1,402 @@
|
||||||
|
// import React, {
|
||||||
|
// useEffect,
|
||||||
|
// useMemo,
|
||||||
|
// useState,
|
||||||
|
// useCallback,
|
||||||
|
// useRef,
|
||||||
|
// } from "react";
|
||||||
|
// import { useSimulationPaths } from "../../../store/store";
|
||||||
|
// import * as THREE from "three";
|
||||||
|
// import { useThree } from "@react-three/fiber";
|
||||||
|
// import {
|
||||||
|
// ConveyorEventsSchema,
|
||||||
|
// VehicleEventsSchema,
|
||||||
|
// } from "../../../types/world/worldTypes";
|
||||||
|
|
||||||
|
// // Type definitions
|
||||||
|
// export interface PointAction {
|
||||||
|
// uuid: string;
|
||||||
|
// name: string;
|
||||||
|
// type: string;
|
||||||
|
// material: string;
|
||||||
|
// delay: number | string;
|
||||||
|
// spawnInterval: string | number;
|
||||||
|
// isUsed: boolean;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export interface PathPoint {
|
||||||
|
// uuid: string;
|
||||||
|
// position: [number, number, number];
|
||||||
|
// actions: PointAction[];
|
||||||
|
// connections: {
|
||||||
|
// targets: Array<{ pathUUID: string }>;
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export interface SimulationPath {
|
||||||
|
// modeluuid: string;
|
||||||
|
// points: PathPoint[];
|
||||||
|
// pathPosition: [number, number, number];
|
||||||
|
// speed?: number;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export interface Process {
|
||||||
|
// id: string;
|
||||||
|
// paths: SimulationPath[];
|
||||||
|
// animationPath: THREE.Vector3[];
|
||||||
|
// pointActions: PointAction[][];
|
||||||
|
// speed: number;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// interface ProcessCreatorProps {
|
||||||
|
// onProcessesCreated: (processes: Process[]) => void;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Convert event schemas to SimulationPath
|
||||||
|
// function convertToSimulationPath(
|
||||||
|
// path: ConveyorEventsSchema | VehicleEventsSchema
|
||||||
|
// ): SimulationPath {
|
||||||
|
// const { modeluuid } = path;
|
||||||
|
|
||||||
|
// // Simplified normalizeAction function that preserves exact original properties
|
||||||
|
// const normalizeAction = (action: any): PointAction => {
|
||||||
|
// return { ...action }; // Return exact copy with no modifications
|
||||||
|
// };
|
||||||
|
|
||||||
|
// if (path.type === "Conveyor") {
|
||||||
|
// return {
|
||||||
|
// modeluuid,
|
||||||
|
// points: path.points.map((point) => ({
|
||||||
|
// uuid: point.uuid,
|
||||||
|
// position: point.position,
|
||||||
|
// actions: point.actions.map(normalizeAction), // Preserve exact actions
|
||||||
|
// connections: {
|
||||||
|
// targets: point.connections.targets.map((target) => ({
|
||||||
|
// pathUUID: target.pathUUID,
|
||||||
|
// })),
|
||||||
|
// },
|
||||||
|
// })),
|
||||||
|
// pathPosition: path.position,
|
||||||
|
// speed:
|
||||||
|
// typeof path.speed === "string"
|
||||||
|
// ? parseFloat(path.speed) || 1
|
||||||
|
// : path.speed || 1,
|
||||||
|
// };
|
||||||
|
// } else {
|
||||||
|
// return {
|
||||||
|
// modeluuid,
|
||||||
|
// points: [
|
||||||
|
// {
|
||||||
|
// uuid: path.point.uuid,
|
||||||
|
// position: path.point.position,
|
||||||
|
// actions: Array.isArray(path.point.actions)
|
||||||
|
// ? path.point.actions.map(normalizeAction)
|
||||||
|
// : [normalizeAction(path.point.actions)],
|
||||||
|
// connections: {
|
||||||
|
// targets: path.point.connections.targets.map((target) => ({
|
||||||
|
// pathUUID: target.pathUUID,
|
||||||
|
// })),
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// pathPosition: path.position,
|
||||||
|
// speed: path.point.speed || 1,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Custom shallow comparison for arrays
|
||||||
|
// const areArraysEqual = (a: any[], b: any[]) => {
|
||||||
|
// if (a.length !== b.length) return false;
|
||||||
|
// for (let i = 0; i < a.length; i++) {
|
||||||
|
// if (a[i] !== b[i]) return false;
|
||||||
|
// }
|
||||||
|
// return true;
|
||||||
|
// };
|
||||||
|
|
||||||
|
// // Helper function to create an empty process
|
||||||
|
// const createEmptyProcess = (): Process => ({
|
||||||
|
// id: `process-${Math.random().toString(36).substring(2, 11)}`,
|
||||||
|
// paths: [],
|
||||||
|
// animationPath: [],
|
||||||
|
// pointActions: [],
|
||||||
|
// speed: 1,
|
||||||
|
// });
|
||||||
|
|
||||||
|
// // Enhanced connection checking function
|
||||||
|
// function shouldReverseNextPath(
|
||||||
|
// currentPath: SimulationPath,
|
||||||
|
// nextPath: SimulationPath
|
||||||
|
// ): boolean {
|
||||||
|
// if (nextPath.points.length !== 3) return false;
|
||||||
|
|
||||||
|
// const currentLastPoint = currentPath.points[currentPath.points.length - 1];
|
||||||
|
// const nextFirstPoint = nextPath.points[0];
|
||||||
|
// const nextLastPoint = nextPath.points[nextPath.points.length - 1];
|
||||||
|
|
||||||
|
// // Check if current last connects to next last (requires reversal)
|
||||||
|
// const connectsToLast = currentLastPoint.connections.targets.some(
|
||||||
|
// (target) =>
|
||||||
|
// target.pathUUID === nextPath.modeluuid &&
|
||||||
|
// nextLastPoint.connections.targets.some(
|
||||||
|
// (t) => t.pathUUID === currentPath.modeluuid
|
||||||
|
// )
|
||||||
|
// );
|
||||||
|
|
||||||
|
// // Check if current last connects to next first (no reversal needed)
|
||||||
|
// const connectsToFirst = currentLastPoint.connections.targets.some(
|
||||||
|
// (target) =>
|
||||||
|
// target.pathUUID === nextPath.modeluuid &&
|
||||||
|
// nextFirstPoint.connections.targets.some(
|
||||||
|
// (t) => t.pathUUID === currentPath.modeluuid
|
||||||
|
// )
|
||||||
|
// );
|
||||||
|
|
||||||
|
// // Only reverse if connected to last point and not to first point
|
||||||
|
// return connectsToLast && !connectsToFirst;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Updated path adjustment function
|
||||||
|
// function adjustPathPointsOrder(paths: SimulationPath[]): SimulationPath[] {
|
||||||
|
// if (paths.length < 2) return paths;
|
||||||
|
|
||||||
|
// const adjustedPaths = [...paths];
|
||||||
|
|
||||||
|
// for (let i = 0; i < adjustedPaths.length - 1; i++) {
|
||||||
|
// const currentPath = adjustedPaths[i];
|
||||||
|
// const nextPath = adjustedPaths[i + 1];
|
||||||
|
|
||||||
|
// if (shouldReverseNextPath(currentPath, nextPath)) {
|
||||||
|
// const reversedPoints = [
|
||||||
|
// nextPath.points[2],
|
||||||
|
// nextPath.points[1],
|
||||||
|
// nextPath.points[0],
|
||||||
|
// ];
|
||||||
|
|
||||||
|
// adjustedPaths[i + 1] = {
|
||||||
|
// ...nextPath,
|
||||||
|
// points: reversedPoints,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return adjustedPaths;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Main hook for process creation
|
||||||
|
// export function useProcessCreation() {
|
||||||
|
// const { scene } = useThree();
|
||||||
|
// const [processes, setProcesses] = useState<Process[]>([]);
|
||||||
|
|
||||||
|
// const hasSpawnAction = useCallback((path: SimulationPath): boolean => {
|
||||||
|
// return path.points.some((point) =>
|
||||||
|
// point.actions.some((action) => action.type.toLowerCase() === "spawn")
|
||||||
|
// );
|
||||||
|
// }, []);
|
||||||
|
|
||||||
|
// const createProcess = useCallback(
|
||||||
|
// (paths: SimulationPath[]): Process => {
|
||||||
|
// if (!paths || paths.length === 0) {
|
||||||
|
// return createEmptyProcess();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const animationPath: THREE.Vector3[] = [];
|
||||||
|
// const pointActions: PointAction[][] = [];
|
||||||
|
// const processSpeed = paths[0]?.speed || 1;
|
||||||
|
|
||||||
|
// for (const path of paths) {
|
||||||
|
// for (const point of path.points) {
|
||||||
|
// const obj = scene.getObjectByProperty("uuid", point.uuid);
|
||||||
|
// if (!obj) {
|
||||||
|
// console.warn(`Object with UUID ${point.uuid} not found in scene`);
|
||||||
|
// continue;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const position = obj.getWorldPosition(new THREE.Vector3());
|
||||||
|
// animationPath.push(position.clone());
|
||||||
|
// pointActions.push(point.actions);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// id: `process-${Math.random().toString(36).substring(2, 11)}`,
|
||||||
|
// paths,
|
||||||
|
// animationPath,
|
||||||
|
// pointActions,
|
||||||
|
// speed: processSpeed,
|
||||||
|
// };
|
||||||
|
// },
|
||||||
|
// [scene]
|
||||||
|
// );
|
||||||
|
|
||||||
|
// const getAllConnectedPaths = useCallback(
|
||||||
|
// (
|
||||||
|
// initialPath: SimulationPath,
|
||||||
|
// allPaths: SimulationPath[],
|
||||||
|
// visited: Set<string> = new Set()
|
||||||
|
// ): SimulationPath[] => {
|
||||||
|
// const connectedPaths: SimulationPath[] = [];
|
||||||
|
// const queue: SimulationPath[] = [initialPath];
|
||||||
|
// visited.add(initialPath.modeluuid);
|
||||||
|
|
||||||
|
// const pathMap = new Map<string, SimulationPath>();
|
||||||
|
// allPaths.forEach((path) => pathMap.set(path.modeluuid, path));
|
||||||
|
|
||||||
|
// while (queue.length > 0) {
|
||||||
|
// const currentPath = queue.shift()!;
|
||||||
|
// connectedPaths.push(currentPath);
|
||||||
|
|
||||||
|
// // Process outgoing connections
|
||||||
|
// for (const point of currentPath.points) {
|
||||||
|
// for (const target of point.connections.targets) {
|
||||||
|
// if (!visited.has(target.pathUUID)) {
|
||||||
|
// const targetPath = pathMap.get(target.pathUUID);
|
||||||
|
// if (targetPath) {
|
||||||
|
// visited.add(target.pathUUID);
|
||||||
|
// queue.push(targetPath);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Process incoming connections
|
||||||
|
// for (const [uuid, path] of pathMap) {
|
||||||
|
// if (!visited.has(uuid)) {
|
||||||
|
// const hasConnectionToCurrent = path.points.some((point) =>
|
||||||
|
// point.connections.targets.some(
|
||||||
|
// (t) => t.pathUUID === currentPath.modeluuid
|
||||||
|
// )
|
||||||
|
// );
|
||||||
|
// if (hasConnectionToCurrent) {
|
||||||
|
// visited.add(uuid);
|
||||||
|
// queue.push(path);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return connectedPaths;
|
||||||
|
// },
|
||||||
|
// []
|
||||||
|
// );
|
||||||
|
|
||||||
|
// const createProcessesFromPaths = useCallback(
|
||||||
|
// (paths: SimulationPath[]): Process[] => {
|
||||||
|
// if (!paths || paths.length === 0) return [];
|
||||||
|
|
||||||
|
// const visited = new Set<string>();
|
||||||
|
// const processes: Process[] = [];
|
||||||
|
// const pathMap = new Map<string, SimulationPath>();
|
||||||
|
// paths.forEach((path) => pathMap.set(path.modeluuid, path));
|
||||||
|
|
||||||
|
// for (const path of paths) {
|
||||||
|
// if (!visited.has(path.modeluuid) && hasSpawnAction(path)) {
|
||||||
|
// const connectedPaths = getAllConnectedPaths(path, paths, visited);
|
||||||
|
// const adjustedPaths = adjustPathPointsOrder(connectedPaths);
|
||||||
|
// const process = createProcess(adjustedPaths);
|
||||||
|
// processes.push(process);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return processes;
|
||||||
|
// },
|
||||||
|
// [createProcess, getAllConnectedPaths, hasSpawnAction]
|
||||||
|
// );
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// processes,
|
||||||
|
// createProcessesFromPaths,
|
||||||
|
// setProcesses,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
|
||||||
|
// ({ onProcessesCreated }) => {
|
||||||
|
// const { simulationPaths } = useSimulationPaths();
|
||||||
|
// const { createProcessesFromPaths } = useProcessCreation();
|
||||||
|
// const prevPathsRef = useRef<SimulationPath[]>([]);
|
||||||
|
// const prevProcessesRef = useRef<Process[]>([]);
|
||||||
|
|
||||||
|
// const convertedPaths = useMemo((): SimulationPath[] => {
|
||||||
|
// if (!simulationPaths) return [];
|
||||||
|
// return simulationPaths.map((path) =>
|
||||||
|
// convertToSimulationPath(
|
||||||
|
// path as ConveyorEventsSchema | VehicleEventsSchema
|
||||||
|
// )
|
||||||
|
// );
|
||||||
|
// }, [simulationPaths]);
|
||||||
|
|
||||||
|
// const pathsDependency = useMemo(() => {
|
||||||
|
// if (!convertedPaths) return null;
|
||||||
|
// return convertedPaths.map((path) => ({
|
||||||
|
// id: path.modeluuid,
|
||||||
|
// hasSpawn: path.points.some((p: PathPoint) =>
|
||||||
|
// p.actions.some((a: PointAction) => a.type.toLowerCase() === "spawn")
|
||||||
|
// ),
|
||||||
|
// connections: path.points
|
||||||
|
// .flatMap((p: PathPoint) =>
|
||||||
|
// p.connections.targets.map((t: { pathUUID: string }) => t.pathUUID)
|
||||||
|
// )
|
||||||
|
// .join(","),
|
||||||
|
// }));
|
||||||
|
// }, [convertedPaths]);
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// if (!convertedPaths || convertedPaths.length === 0) {
|
||||||
|
// if (prevProcessesRef.current.length > 0) {
|
||||||
|
// onProcessesCreated([]);
|
||||||
|
// prevProcessesRef.current = [];
|
||||||
|
// }
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (areArraysEqual(prevPathsRef.current, convertedPaths)) {
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// prevPathsRef.current = convertedPaths;
|
||||||
|
// const newProcesses = createProcessesFromPaths(convertedPaths);
|
||||||
|
|
||||||
|
// // console.log("--- Action Types in Paths ---");
|
||||||
|
// // convertedPaths.forEach((path) => {
|
||||||
|
// // path.points.forEach((point) => {
|
||||||
|
// // point.actions.forEach((action) => {
|
||||||
|
// // console.log(
|
||||||
|
// // `Path ${path.modeluuid}, Point ${point.uuid}: ${action.type}`
|
||||||
|
// // );
|
||||||
|
// // });
|
||||||
|
// // });
|
||||||
|
// // });
|
||||||
|
// // console.log("New processes:", newProcesses);
|
||||||
|
|
||||||
|
// if (
|
||||||
|
// newProcesses.length !== prevProcessesRef.current.length ||
|
||||||
|
// !newProcesses.every(
|
||||||
|
// (proc, i) =>
|
||||||
|
// proc.paths.length === prevProcessesRef.current[i]?.paths.length &&
|
||||||
|
// proc.paths.every(
|
||||||
|
// (path, j) =>
|
||||||
|
// path.modeluuid ===
|
||||||
|
// prevProcessesRef.current[i]?.paths[j]?.modeluuid
|
||||||
|
// )
|
||||||
|
// )
|
||||||
|
// ) {
|
||||||
|
// onProcessesCreated(newProcesses);
|
||||||
|
// // prevProcessesRef.current = newProcesses;
|
||||||
|
// }
|
||||||
|
// }, [
|
||||||
|
// pathsDependency,
|
||||||
|
// onProcessesCreated,
|
||||||
|
// convertedPaths,
|
||||||
|
// createProcessesFromPaths,
|
||||||
|
// ]);
|
||||||
|
|
||||||
|
// return null;
|
||||||
|
// }
|
||||||
|
// );
|
||||||
|
|
||||||
|
// export default ProcessCreator;
|
||||||
|
|
||||||
import React, {
|
import React, {
|
||||||
useEffect,
|
useEffect,
|
||||||
useMemo,
|
useMemo,
|
||||||
|
@ -156,12 +555,38 @@ function shouldReverseNextPath(
|
||||||
return connectsToLast && !connectsToFirst;
|
return connectsToLast && !connectsToFirst;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Check if a point has a spawn action
|
||||||
|
function hasSpawnAction(point: PathPoint): boolean {
|
||||||
|
return point.actions.some((action) => action.type.toLowerCase() === "spawn");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ensure spawn point is always at the beginning of the path
|
||||||
|
function ensureSpawnPointIsFirst(path: SimulationPath): SimulationPath {
|
||||||
|
if (path.points.length !== 3) return path;
|
||||||
|
|
||||||
|
// If the third point has spawn action and first doesn't, reverse the array
|
||||||
|
if (hasSpawnAction(path.points[2]) && !hasSpawnAction(path.points[0])) {
|
||||||
|
return {
|
||||||
|
...path,
|
||||||
|
points: [...path.points].reverse(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return path;
|
||||||
|
}
|
||||||
|
|
||||||
// Updated path adjustment function
|
// Updated path adjustment function
|
||||||
function adjustPathPointsOrder(paths: SimulationPath[]): SimulationPath[] {
|
function adjustPathPointsOrder(paths: SimulationPath[]): SimulationPath[] {
|
||||||
if (paths.length < 2) return paths;
|
if (paths.length < 1) return paths;
|
||||||
|
|
||||||
const adjustedPaths = [...paths];
|
const adjustedPaths = [...paths];
|
||||||
|
|
||||||
|
// First ensure all paths have spawn points at the beginning
|
||||||
|
for (let i = 0; i < adjustedPaths.length; i++) {
|
||||||
|
adjustedPaths[i] = ensureSpawnPointIsFirst(adjustedPaths[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Then handle connections between paths
|
||||||
for (let i = 0; i < adjustedPaths.length - 1; i++) {
|
for (let i = 0; i < adjustedPaths.length - 1; i++) {
|
||||||
const currentPath = adjustedPaths[i];
|
const currentPath = adjustedPaths[i];
|
||||||
const nextPath = adjustedPaths[i + 1];
|
const nextPath = adjustedPaths[i + 1];
|
||||||
|
@ -326,13 +751,17 @@ const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
|
||||||
);
|
);
|
||||||
}, [simulationPaths]);
|
}, [simulationPaths]);
|
||||||
|
|
||||||
|
// Enhanced dependency tracking that includes action types
|
||||||
const pathsDependency = useMemo(() => {
|
const pathsDependency = useMemo(() => {
|
||||||
if (!convertedPaths) return null;
|
if (!convertedPaths) return null;
|
||||||
return convertedPaths.map((path) => ({
|
return convertedPaths.map((path) => ({
|
||||||
id: path.modeluuid,
|
id: path.modeluuid,
|
||||||
hasSpawn: path.points.some((p: PathPoint) =>
|
// Track all action types for each point
|
||||||
p.actions.some((a: PointAction) => a.type.toLowerCase() === "spawn")
|
actionSignature: path.points
|
||||||
),
|
.map((point, index) =>
|
||||||
|
point.actions.map((action) => `${index}-${action.type}`).join("|")
|
||||||
|
)
|
||||||
|
.join(","),
|
||||||
connections: path.points
|
connections: path.points
|
||||||
.flatMap((p: PathPoint) =>
|
.flatMap((p: PathPoint) =>
|
||||||
p.connections.targets.map((t: { pathUUID: string }) => t.pathUUID)
|
p.connections.targets.map((t: { pathUUID: string }) => t.pathUUID)
|
||||||
|
@ -341,6 +770,7 @@ const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
|
||||||
}));
|
}));
|
||||||
}, [convertedPaths]);
|
}, [convertedPaths]);
|
||||||
|
|
||||||
|
// Force process recreation when paths change
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!convertedPaths || convertedPaths.length === 0) {
|
if (!convertedPaths || convertedPaths.length === 0) {
|
||||||
if (prevProcessesRef.current.length > 0) {
|
if (prevProcessesRef.current.length > 0) {
|
||||||
|
@ -350,42 +780,16 @@ const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (areArraysEqual(prevPathsRef.current, convertedPaths)) {
|
// Always regenerate processes if the pathsDependency has changed
|
||||||
return;
|
// This ensures action type changes will be detected
|
||||||
}
|
|
||||||
|
|
||||||
prevPathsRef.current = convertedPaths;
|
|
||||||
const newProcesses = createProcessesFromPaths(convertedPaths);
|
const newProcesses = createProcessesFromPaths(convertedPaths);
|
||||||
|
prevPathsRef.current = convertedPaths;
|
||||||
|
|
||||||
// console.log("--- Action Types in Paths ---");
|
// Always update processes when action types change
|
||||||
// convertedPaths.forEach((path) => {
|
|
||||||
// path.points.forEach((point) => {
|
|
||||||
// point.actions.forEach((action) => {
|
|
||||||
// console.log(
|
|
||||||
// `Path ${path.modeluuid}, Point ${point.uuid}: ${action.type}`
|
|
||||||
// );
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
// console.log("New processes:", newProcesses);
|
|
||||||
|
|
||||||
if (
|
|
||||||
newProcesses.length !== prevProcessesRef.current.length ||
|
|
||||||
!newProcesses.every(
|
|
||||||
(proc, i) =>
|
|
||||||
proc.paths.length === prevProcessesRef.current[i]?.paths.length &&
|
|
||||||
proc.paths.every(
|
|
||||||
(path, j) =>
|
|
||||||
path.modeluuid ===
|
|
||||||
prevProcessesRef.current[i]?.paths[j]?.modeluuid
|
|
||||||
)
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
onProcessesCreated(newProcesses);
|
onProcessesCreated(newProcesses);
|
||||||
// prevProcessesRef.current = newProcesses;
|
prevProcessesRef.current = newProcesses;
|
||||||
}
|
|
||||||
}, [
|
}, [
|
||||||
pathsDependency,
|
pathsDependency, // This now includes action types
|
||||||
onProcessesCreated,
|
onProcessesCreated,
|
||||||
convertedPaths,
|
convertedPaths,
|
||||||
createProcessesFromPaths,
|
createProcessesFromPaths,
|
||||||
|
|
|
@ -19,7 +19,7 @@ function Simulation() {
|
||||||
const [processes, setProcesses] = useState([]);
|
const [processes, setProcesses] = useState([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// console.log('simulationPaths: ', simulationPaths);
|
console.log('simulationPaths: ', simulationPaths);
|
||||||
}, [simulationPaths]);
|
}, [simulationPaths]);
|
||||||
|
|
||||||
// useEffect(() => {
|
// useEffect(() => {
|
||||||
|
|
|
@ -0,0 +1,32 @@
|
||||||
|
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
|
||||||
|
|
||||||
|
export const setEventApi = async (
|
||||||
|
organization: string,
|
||||||
|
modeluuid: string,
|
||||||
|
eventData: any
|
||||||
|
) => {
|
||||||
|
try {
|
||||||
|
const body: any = { organization, modeluuid, eventData };
|
||||||
|
|
||||||
|
const response = await fetch(`${url_Backend_dwinzo}/api/v2/eventDataUpdate`, {
|
||||||
|
method: "PATCH",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Failed to set or update Floor Item");
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
return result;
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof Error) {
|
||||||
|
throw new Error(error.message);
|
||||||
|
} else {
|
||||||
|
throw new Error("An unknown error occurred");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
|
@ -30,7 +30,6 @@ export const setFloorItemApi = async (
|
||||||
}
|
}
|
||||||
|
|
||||||
const result = await response.json();
|
const result = await response.json();
|
||||||
console.log('result: ', result);
|
|
||||||
return result;
|
return result;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (error instanceof Error) {
|
if (error instanceof Error) {
|
||||||
|
|
|
@ -12,7 +12,7 @@ export const useSocketStore = create<any>((set: any, get: any) => ({
|
||||||
}
|
}
|
||||||
|
|
||||||
const socket = io(
|
const socket = io(
|
||||||
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}`,
|
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
|
||||||
{
|
{
|
||||||
reconnection: false,
|
reconnection: false,
|
||||||
auth: { email, organization },
|
auth: { email, organization },
|
||||||
|
@ -343,14 +343,21 @@ export const useSelectedPath = create<any>((set: any) => ({
|
||||||
interface SimulationPathsStore {
|
interface SimulationPathsStore {
|
||||||
simulationPaths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[];
|
simulationPaths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[];
|
||||||
setSimulationPaths: (
|
setSimulationPaths: (
|
||||||
paths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[]
|
paths:
|
||||||
|
| (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[]
|
||||||
|
| ((prev: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[]
|
||||||
|
) => (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[])
|
||||||
) => void;
|
) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useSimulationPaths = create<SimulationPathsStore>((set) => ({
|
export const useSimulationPaths = create<SimulationPathsStore>((set) => ({
|
||||||
simulationPaths: [],
|
simulationPaths: [],
|
||||||
setSimulationPaths: (paths) => set({ simulationPaths: paths }),
|
setSimulationPaths: (paths) =>
|
||||||
}));
|
set((state) => ({
|
||||||
|
simulationPaths:
|
||||||
|
typeof paths === "function" ? paths(state.simulationPaths) : paths,
|
||||||
|
})),
|
||||||
|
}))
|
||||||
|
|
||||||
export const useIsConnecting = create<any>((set: any) => ({
|
export const useIsConnecting = create<any>((set: any) => ({
|
||||||
isConnecting: false,
|
isConnecting: false,
|
||||||
|
|
|
@ -1,15 +1,18 @@
|
||||||
|
|
||||||
import { create } from "zustand";
|
import { create } from "zustand";
|
||||||
|
|
||||||
type WidgetData = {
|
type WidgetData = {
|
||||||
id: string;
|
id: string;
|
||||||
type: string;
|
type: string;
|
||||||
position: [number, number, number];
|
position: [number, number, number];
|
||||||
|
tempPosition?: [number, number, number];
|
||||||
};
|
};
|
||||||
|
|
||||||
type ZoneWidgetStore = {
|
type ZoneWidgetStore = {
|
||||||
zoneWidgetData: Record<string, WidgetData[]>;
|
zoneWidgetData: Record<string, WidgetData[]>;
|
||||||
setZoneWidgetData: (zoneId: string, widgets: WidgetData[]) => void;
|
setZoneWidgetData: (zoneId: string, widgets: WidgetData[]) => void;
|
||||||
addWidget: (zoneId: string, widget: WidgetData) => void;
|
addWidget: (zoneId: string, widget: WidgetData) => void;
|
||||||
|
updateWidgetPosition: (zoneId: string, widgetId: string, newPosition: [number, number, number]) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useZoneWidgetStore = create<ZoneWidgetStore>((set) => ({
|
export const useZoneWidgetStore = create<ZoneWidgetStore>((set) => ({
|
||||||
|
@ -17,10 +20,7 @@ export const useZoneWidgetStore = create<ZoneWidgetStore>((set) => ({
|
||||||
|
|
||||||
setZoneWidgetData: (zoneId, widgets) =>
|
setZoneWidgetData: (zoneId, widgets) =>
|
||||||
set((state) => ({
|
set((state) => ({
|
||||||
zoneWidgetData: {
|
zoneWidgetData: { ...state.zoneWidgetData, [zoneId]: widgets },
|
||||||
...state.zoneWidgetData,
|
|
||||||
[zoneId]: widgets,
|
|
||||||
},
|
|
||||||
})),
|
})),
|
||||||
|
|
||||||
addWidget: (zoneId, widget) =>
|
addWidget: (zoneId, widget) =>
|
||||||
|
@ -30,4 +30,48 @@ export const useZoneWidgetStore = create<ZoneWidgetStore>((set) => ({
|
||||||
[zoneId]: [...(state.zoneWidgetData[zoneId] || []), widget],
|
[zoneId]: [...(state.zoneWidgetData[zoneId] || []), widget],
|
||||||
},
|
},
|
||||||
})),
|
})),
|
||||||
|
|
||||||
|
updateWidgetPosition: (zoneId, widgetId, newPosition) =>
|
||||||
|
set((state) => {
|
||||||
|
const widgets = state.zoneWidgetData[zoneId] || [];
|
||||||
|
return {
|
||||||
|
zoneWidgetData: {
|
||||||
|
...state.zoneWidgetData,
|
||||||
|
[zoneId]: widgets.map((widget) =>
|
||||||
|
widget.id === widgetId ? { ...widget, position: newPosition } : widget
|
||||||
|
),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
interface RightClickStore {
|
||||||
|
rightClickSelected: string | null;
|
||||||
|
setRightClickSelected: (x: string | null) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useRightClickSelected = create<RightClickStore>((set) => ({
|
||||||
|
rightClickSelected: null, // Default to null
|
||||||
|
setRightClickSelected: (x) => set({ rightClickSelected: x }),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const useTopData = create<any>((set: any) => ({
|
||||||
|
top: 0,
|
||||||
|
setTop: (x: any) => set({ top: x }),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const useLeftData = create<any>((set: any) => ({
|
||||||
|
left: 0,
|
||||||
|
setLeft: (x: any) => set({ left: x }),
|
||||||
|
}));
|
||||||
|
|
||||||
|
interface RightSelectStore {
|
||||||
|
rightSelect: string | null;
|
||||||
|
setRightSelect: (x: string | null) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useRightSelected = create<RightSelectStore>((set) => ({
|
||||||
|
rightSelect: null, // Default state is null
|
||||||
|
setRightSelect: (x) => set({ rightSelect: x }),
|
||||||
}));
|
}));
|
||||||
|
|
|
@ -716,11 +716,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.editWidgetOptions-wrapper {
|
|
||||||
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editWidgetOptions {
|
.editWidgetOptions {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
Loading…
Reference in New Issue