feat: Refactor point management in PointsCreator and update product store for better event handling

app/src/modules/builder/asset/models/model/model.tsx

@@ -27,10 +27,10 @@ function Model({ asset }: { readonly asset: Asset }) {
     const { activeModule } = useModuleStore();
     const { speed } = useAnimationPlaySpeed();
     const { assetStore, eventStore, productStore } = useSceneContext();
-    const { removeAsset, setAnimations, resetAnimation, setAnimationComplete, setCurrentAnimation: setAnmationAnimation } = assetStore();
+    const { removeAsset, setAnimations, resetAnimation, setAnimationComplete } = assetStore();
     const { setTop } = useTopData();
     const { setLeft } = useLeftData();
-    const { getIsEventInProduct } = productStore();
+    const { getIsEventInProduct, addPoint } = productStore();
     const { getEventByModelUuid } = eventStore();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
@@ -46,6 +46,10 @@ function Model({ asset }: { readonly asset: Asset }) {
     const [boundingBox, setBoundingBox] = useState<THREE.Box3 | null>(null);
     const groupRef = useRef<THREE.Group>(null);
     const { toolMode } = useToolMode();
+    const leftDrag = useRef(false);
+    const isLeftMouseDown = useRef(false);
+    const rightDrag = useRef(false);
+    const isRightMouseDown = useRef(false);
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();
     const { projectId } = useParams();
@@ -217,7 +221,8 @@ function Model({ asset }: { readonly asset: Asset }) {
         }
     };
 
-    const handleClick = (asset: Asset) => {
+    const handleClick = (evt: ThreeEvent<MouseEvent>, asset: Asset) => {
+        if (leftDrag.current || toggleView) return;
         if (activeTool === 'delete' && deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) {
 
             //REST
@@ -257,6 +262,40 @@ function Model({ asset }: { readonly asset: Asset }) {
                 echo.success("Model Removed!");
             }
 
+        } else if (activeModule === 'simulation' && subModule === "simulations" && activeTool === 'pen') {
+            if (asset.eventData && asset.eventData.type === 'Conveyor') {
+                const intersectedPoint = evt.point;
+                const localPosition = groupRef.current?.worldToLocal(intersectedPoint.clone());
+                if (localPosition) {
+                    const conveyorPoint: ConveyorPointSchema = {
+                        uuid: THREE.MathUtils.generateUUID(),
+                        position: [localPosition?.x, localPosition?.y, localPosition?.z],
+                        rotation: [0, 0, 0],
+                        action: {
+                            actionUuid: THREE.MathUtils.generateUUID(),
+                            actionName: `Action 1`,
+                            actionType: 'default',
+                            material: 'Default Material',
+                            delay: 0,
+                            spawnInterval: 5,
+                            spawnCount: 1,
+                            triggers: []
+                        }
+                    }
+
+                    const event = addPoint(selectedProduct.productUuid, asset.modelUuid, conveyorPoint);
+
+                    if (event) {
+                        updateBackend(
+                            selectedProduct.productName,
+                            selectedProduct.productUuid,
+                            projectId || '',
+                            event
+                        );
+                    }
+                }
+            }
+
         }
     }
 
@@ -277,6 +316,7 @@ function Model({ asset }: { readonly asset: Asset }) {
     }, [activeTool, deletableFloorItem]);
 
     const handleContextMenu = (asset: Asset, evt: ThreeEvent<MouseEvent>) => {
+        if (rightDrag.current || toggleView) return;
         if (activeTool === "cursor" && subModule === 'simulations') {
             if (asset.modelUuid) {
                 const canvasElement = gl.domElement;
@@ -358,6 +398,50 @@ function Model({ asset }: { readonly asset: Asset }) {
         };
     }, [asset.animationState?.current, asset.animationState?.isPlaying]);
 
+    useEffect(() => {
+        const canvasElement = gl.domElement;
+
+        const onPointerDown = (evt: any) => {
+            if (evt.button === 0) {
+                isLeftMouseDown.current = true;
+                leftDrag.current = false;
+            }
+            if (evt.button === 2) {
+                isRightMouseDown.current = true;
+                rightDrag.current = false;
+            }
+        };
+
+        const onPointerMove = () => {
+            if (isLeftMouseDown.current) {
+                leftDrag.current = true;
+            }
+            if (isRightMouseDown.current) {
+                rightDrag.current = true;
+            }
+        };
+
+        const onPointerUp = (evt: any) => {
+            if (evt.button === 0) {
+                isLeftMouseDown.current = false;
+            }
+            if (evt.button === 2) {
+                isRightMouseDown.current = false;
+            }
+        };
+
+        canvasElement.addEventListener('pointerdown', onPointerDown);
+        canvasElement.addEventListener('pointermove', onPointerMove);
+        canvasElement.addEventListener('pointerup', onPointerUp);
+
+        return () => {
+            canvasElement.removeEventListener('pointerdown', onPointerDown);
+            canvasElement.removeEventListener('pointermove', onPointerMove);
+            canvasElement.removeEventListener('pointerup', onPointerUp);
+        }
+
+    }, [gl])
+
     return (
         <group
             key={asset.modelUuid}
@@ -377,7 +461,7 @@ function Model({ asset }: { readonly asset: Asset }) {
             onClick={(e) => {
                 e.stopPropagation();
                 if (!toggleView) {
-                    handleClick(asset);
+                    handleClick(e, asset);
                 }
             }}
             onPointerOver={(e) => {
@@ -404,7 +488,7 @@ function Model({ asset }: { readonly asset: Asset }) {
                     <AssetBoundingBox boundingBox={boundingBox} />
                 )
             )}
-        </group >
+        </group>
     );
 }