@ntalmagor/3drize-viewer 0.1.9 → 0.1.11

package/dist/components/AnimatedObject.d.ts

@@ -10,7 +10,7 @@ export interface AnimatedObjectProps {
     visible?: boolean;
     children?: React.ReactNode;
     parentRef?: React.RefObject<Object3D>;
-    onClick?: (e: ThreeEvent<MouseEvent>) => void;
+    handleObjectClick?: (createdObject: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
     onPointerEnter?: (e: ThreeEvent<PointerEvent>) => void;
     onPointerLeave?: (e: ThreeEvent<PointerEvent>) => void;
     anchor?: AnchorSettings | null;

package/dist/components/AnimatedObject.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedObject.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAQvG,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,iBAAiB,CAAC;IACtC,aAAa,EAAE,qBAAqB,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACvD,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;CAE3B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsJvD,CAAC;AAGH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"AnimatedObject.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAQvG,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,iBAAiB,CAAC;IACtC,aAAa,EAAE,qBAAqB,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACtC,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACjH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACvD,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;CAE3B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6JvD,CAAC;AAGH,eAAe,cAAc,CAAC"}

package/dist/components/AnimatedObject.js

@@ -9,7 +9,7 @@ import EffectsGroup from './EffectsGroup';
 import { useObjectAnimation } from '../hooks/useObjectAnimation';
 export const AnimatedObject = memo(({ stateKey, transitionSettings, createdObject, 
 // speed = 1,
-visible = true, children, parentRef, onClick, onPointerEnter, onPointerLeave, anchor, hovered = false, animateMaterial = true,
+visible = true, children, parentRef, handleObjectClick, onPointerEnter, onPointerLeave, anchor, hovered = false, animateMaterial = true,
 // isActive = false,
  }) => {
     const internalRef = useRef(null);
@@ -115,6 +115,11 @@ visible = true, children, parentRef, onClick, onPointerEnter, onPointerLeave, an
         if (anchor)
             applyAnchorSettings(anchor, groupRef.current, rotation);
     });
+    const onClick = (e) => {
+        if (handleObjectClick && groupRef.current) {
+            handleObjectClick(createdObject, groupRef.current, e);
+        }
+    };
     return (_jsx(_Fragment, { children: _jsxs("group", { ref: groupRef, position: position, scale: scale, rotation: rotation, visible: visible, onClick: (e) => { e.stopPropagation(); onClick?.(e); }, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, name: createdObject.meshSettings.name, userData: { id: createdObject.id }, children: [children, _jsx(EffectsGroup, { createdObject: createdObject })] }) }));
 });
 AnimatedObject.displayName = 'AnimatedObject';

package/dist/components/CameraController.d.ts

@@ -5,12 +5,6 @@ interface CameraControllerProps {
     animationEase?: string;
     settings: CameraState;
 }
-/**
- * CameraController - React Three Fiber component that syncs camera with Redux state
- * This component should be placed inside the Canvas component
- *
- * Simplified: Just applies state to camera. Animation is handled via useAnimationEvents.
- */
 export declare const CameraController: React.FC<CameraControllerProps>;
 export default CameraController;
 //# sourceMappingURL=CameraController.d.ts.map

package/dist/components/CameraController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CameraController.d.ts","sourceRoot":"","sources":["../../src/components/CameraController.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAiC,MAAM,wBAAwB,CAAC;AAKzF,UAAU,qBAAqB;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,WAAW,CAAA;CACtB;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+I5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CameraController.d.ts","sourceRoot":"","sources":["../../src/components/CameraController.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAiC,MAAM,wBAAwB,CAAC;AAGzF,UAAU,qBAAqB;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,WAAW,CAAA;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA2I5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/CameraController.js

@@ -1,22 +1,13 @@
 import { useEffect, useRef } from 'react';
 import { useFrame, useThree } from '@react-three/fiber';
-import { useDispatch } from 'react-redux';
 import { useCameraAnimation } from '../hooks/useCameraAnimation';
 import { cameraManager } from '../utils/CameraSingleton';
 import { useAnimationEvents } from '../hooks/useAnimationEvents';
 import { usePathAnimation } from '../hooks/usePathAnimation';
-/**
- * CameraController - React Three Fiber component that syncs camera with Redux state
- * This component should be placed inside the Canvas component
- *
- * Simplified: Just applies state to camera. Animation is handled via useAnimationEvents.
- */
 export const CameraController = ({ enableAutoAnimation = true, animationDuration = 1, animationEase = "power2.out", settings }) => {
     const { camera, set } = useThree();
-    const dispatch = useDispatch();
     const cameraRef = useRef(camera);
     const transformAnimationProgress = useRef(0);
-    // Redux selectors
     const { position, orientation, fov, near, far } = settings;
     const { startPathAnimation, updatePathAnimation, isAnimating: isPathAnimating, } = usePathAnimation();
     // Use camera animation hook for animated transitions (via events)
@@ -84,7 +75,6 @@ export const CameraController = ({ enableAutoAnimation = true, animationDuration
                     const { state, properties, pathId } = transition;
                     if (state === 'camera') {
                         isInAnimatedTransition.current = true;
-                        // dispatch(setControls({ enablePan: false, enableRotate: false, enableZoom: false }));
                         const targetSettings = {
                             fov: properties.to.fov,
                             near: properties.to.near,
@@ -108,7 +98,6 @@ export const CameraController = ({ enableAutoAnimation = true, animationDuration
                         animateCamera(targetSettings, stepDuration, event.step?.ease, properties.to.target)
                             .then(() => {
                             isInAnimatedTransition.current = false;
-                            // dispatch(setControls({ enablePan: true, enableRotate: true, enableZoom: true, target: properties.to.target || undefined }));
                         });
                     }
                 });

package/dist/components/CreatedObject.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 import type { CreatedObjectSettings } from "@ntalmagor/3drize-core";
 import { Object3D } from "three";
+import { type ThreeEvent } from '@react-three/fiber';
 interface CreatedObjectProps {
     createdObject: CreatedObjectSettings;
     children: React.ReactNode;
     shouldApply3driseMaterial?: boolean;
     onObjectReady?: (object: CreatedObjectSettings, ref: Object3D) => void;
+    handleObjectClick?: (createdObject: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
 }
 declare const CreatedObject: React.FC<CreatedObjectProps>;
 export default CreatedObject;

package/dist/components/CreatedObject.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreatedObject.d.ts","sourceRoot":"","sources":["../../src/components/CreatedObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAGjE,OAAO,KAAK,EAAe,qBAAqB,EAAkC,MAAM,wBAAwB,CAAC;AAOjH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAoBjC,UAAU,kBAAkB;IAC1B,aAAa,EAAE,qBAAqB,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;CAExE;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuL9C,CAAC;AAIH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CreatedObject.d.ts","sourceRoot":"","sources":["../../src/components/CreatedObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAe,qBAAqB,EAAkC,MAAM,wBAAwB,CAAC;AAOjH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAWrD,UAAU,kBAAkB;IAC1B,aAAa,EAAE,qBAAqB,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAElH;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiK9C,CAAC;AAIH,eAAe,aAAa,CAAC"}

package/dist/components/CreatedObject.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useEffect, useState, memo } from "react";
-import { useDispatch } from "react-redux";
 import { DEFAULT_EDGES_SETTINGS } from "@ntalmagor/3drize-core";
 import { useMaterialApplication } from "../hooks/useMaterialApplication";
 import { useTransformControls } from "../hooks/useTransformControls";
@@ -10,11 +9,10 @@ import AnimatedObject from "./AnimatedObject";
 import { useFrameEffects } from "../hooks/useFrameEffects";
 // import { useSceneClick } from "~/contextProviders/SceneClickContext";
 import { useObjectEdges } from "../hooks/useObjectEdges";
-const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial = true, onObjectReady, }) => {
+const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial = true, onObjectReady, handleObjectClick, }) => {
     const isSelected = false;
     // const isSelected = useObjectSelection(createdObject.id);
     // const { handleObjectClick: contextHandleObjectClick } = useSceneClick();
-    const dispatch = useDispatch();
     const meshRef = useRef(null);
     const transformRef = useRef(null);
     const baseColorRef = useRef(("color" in createdObject.materialSettings && createdObject.materialSettings.color) || '#ffffff');
@@ -81,12 +79,12 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
         handlePointerLeave();
         e.stopPropagation();
     };
-    const handleObjectClick = (e) => {
+    const onClick = (e) => {
         console.log('[1] CreatedObject.handleObjectClick:', createdObject.id, createdObject.meshSettings?.name);
-        if (createdObject.type === 'gallery') {
-            e.stopPropagation();
-            return;
-        }
+        // if (createdObject.type === 'gallery') {
+        //   e.stopPropagation();
+        //   return
+        // }
         // contextHandleObjectClick(
         //   createdObject,
         //   meshRef.current,
@@ -94,28 +92,6 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
         //   e
         // );
     };
-    const handleTransformStart = () => {
-        console.log('Transform started for object:', createdObject.id);
-        isTransforming.current = true;
-    };
-    const handleTransformEnd = () => {
-        isTransforming.current = false;
-        if (meshRef.current) {
-            console.log('Transform ended for object:', createdObject.id);
-            const updatedSettings = {
-                ...createdObject,
-                meshSettings: {
-                    ...createdObject.meshSettings,
-                    position: [meshRef.current.position.x, meshRef.current.position.y, meshRef.current.position.z],
-                    rotation: [meshRef.current.rotation.x, meshRef.current.rotation.y, meshRef.current.rotation.z],
-                    scale: [meshRef.current.scale.x, meshRef.current.scale.y, meshRef.current.scale.z]
-                }
-            };
-            // Here you could update the Redux store with final position/rotation/scale
-            // dispatch(updateObjectSettingsById(updatedSettings))
-            // updateObjectSettings && updateObjectSettings();
-        }
-    };
     const anchorEnabled = createdObject.meshSettings.anchor && createdObject.meshSettings.anchor.enabled;
     // console.log("createdObject.meshSettings", createdObject.meshSettings)
     // console.log("Rendered CreatedObject:", createdObject.rigidBodySettings);
@@ -130,7 +106,7 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
             position: anchorEnabled ? [anchoredPosition.x, anchoredPosition.y, anchoredPosition.z] : animatedTransform.position
         }, createdObject: createdObject, 
         // animateMaterial={!useDreiMaterials}
-        parentRef: meshRef, visible: createdObject.meshSettings.visible, onClick: handleObjectClick, onPointerEnter: handleObjectEnter, onPointerLeave: e => handleObjectLeave(e), children: createdObject.rigidBodySettings?.enabled ? (_jsx(RigidBody, { type: createdObject.rigidBodySettings?.type || 'dynamic', mass: createdObject.rigidBodySettings?.mass || 1, colliders: createdObject.userData?.type === 'plane'
+        parentRef: meshRef, visible: createdObject.meshSettings.visible, handleObjectClick: handleObjectClick, onPointerEnter: handleObjectEnter, onPointerLeave: e => handleObjectLeave(e), children: createdObject.rigidBodySettings?.enabled ? (_jsx(RigidBody, { type: createdObject.rigidBodySettings?.type || 'dynamic', mass: createdObject.rigidBodySettings?.mass || 1, colliders: createdObject.userData?.type === 'plane'
                 ? 'cuboid' // Force box collider for planes
                 : undefined // Auto-detect for others
             , friction: createdObject.rigidBodySettings?.friction, restitution: createdObject.rigidBodySettings?.restitution, gravityScale: createdObject.rigidBodySettings?.gravityScale ?? 1, linearDamping: createdObject.rigidBodySettings?.linearDamping ?? 0.01, angularDamping: createdObject.rigidBodySettings?.angularDamping ?? 0.01, children: children })) : (children) }));

package/dist/components/CustomPrimitive.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 import { type CameraState, type CreatedObjectSettings } from "@ntalmagor/3drize-core";
 import { Object3D } from "three";
+import { type ThreeEvent } from '@react-three/fiber';
 interface CustomPrimitiveProps {
     createdObject: CreatedObjectSettings;
     cameraSettings: CameraState;
     updateObjectSettings?: (updatedSettings: CreatedObjectSettings) => void;
     onObjectReady?: (object: CreatedObjectSettings, ref: Object3D) => void;
+    handleObjectClick?: (createdObject: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
 }
 declare const CustomPrimitive: React.FC<CustomPrimitiveProps>;
 export default CustomPrimitive;

package/dist/components/CustomPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomPrimitive.d.ts","sourceRoot":"","sources":["../../src/components/CustomPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,qBAAqB,EAI5B,MAAM,wBAAwB,CAAC;AAIxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAajC,UAAU,oBAAoB;IAC5B,aAAa,EAAE,qBAAqB,CAAC;IACrC,cAAc,EAAE,WAAW,CAAA;IAC3B,oBAAoB,CAAC,EAAE,CAAC,eAAe,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxE,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;CACxE;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsHlD,CAAC;AAIH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CustomPrimitive.d.ts","sourceRoot":"","sources":["../../src/components/CustomPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,qBAAqB,EAI5B,MAAM,wBAAwB,CAAC;AAIxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOrD,UAAU,oBAAoB;IAC5B,aAAa,EAAE,qBAAqB,CAAC;IACrC,cAAc,EAAE,WAAW,CAAA;IAC3B,oBAAoB,CAAC,EAAE,CAAC,eAAe,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxE,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAClH;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuHlD,CAAC;AAIH,eAAe,eAAe,CAAC"}

package/dist/components/CustomPrimitive.js

@@ -8,7 +8,7 @@ import MaterialLibrary from "./MaterialLibrary";
 // import type { AnimatedTransform } from "~/types/mesh";
 import CreatedObject from "./CreatedObject";
 import { useFrameEffects } from "../hooks/useFrameEffects";
-const CustomPrimitive = memo(({ createdObject, cameraSettings, updateObjectSettings, onObjectReady, }) => {
+const CustomPrimitive = memo(({ createdObject, cameraSettings, updateObjectSettings, onObjectReady, handleObjectClick, }) => {
     // const { handleObjectClick } = useSceneClick();
     // console.log("Rendering CustomPrimitive with settings:", createdObject.name, createdObject);
     const meshRef = useRef(null);
@@ -68,9 +68,7 @@ const CustomPrimitive = memo(({ createdObject, cameraSettings, updateObjectSetti
     const geometry = obj.object.geometry;
     return (
     // <Select enabled={isSelected}>
-    _jsx(CreatedObject, { createdObject: createdObject, shouldApply3driseMaterial: false, 
-        // Outer group must be registered so transform animations and edges share the same root
-        onObjectReady: (object, ref) => {
+    _jsx(CreatedObject, { createdObject: createdObject, shouldApply3driseMaterial: false, handleObjectClick: handleObjectClick, onObjectReady: (object, ref) => {
             onObjectReady && onObjectReady(object, ref);
         }, children: _jsx("primitive", { ref: meshRef, name: obj.name, object: obj.object, visible: materialReady && createdObject.meshSettings.visible, position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1], children: useDreiMaterials && createdObject.type === 'mesh' && createdObject.meshSettings.visible && (_jsx(MaterialLibrary, { materialSettings: createdObject.materialSettings })) }, obj.id) })
     // {/* </Select> */}

package/dist/components/Frame.d.ts

@@ -1,5 +1,5 @@
 import { type ThreeEvent } from '@react-three/fiber';
-import { Mesh } from "three";
+import { Object3D } from "three";
 import type { CreatedObjectSettings, HoverSettings } from '@ntalmagor/3drize-core';
 import type { GalleryLayoutSettings } from '@ntalmagor/3drize-core';
 import type { TransformEffect, ColorEffect } from '@ntalmagor/3drize-core';
@@ -20,7 +20,7 @@ export interface FrameProps {
     side: number;
     materialSettings: MaterialSettings;
     children?: React.ReactNode;
-    onFrameClick?: (createdObject: CreatedObjectSettings, mesh: Mesh, e: ThreeEvent<MouseEvent>) => void;
+    handleObjectClick?: (createdObject: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
 }
-export default function Frame({ url, isActive, createdObject, position, rotation, shapeType, hoverSettings, transformEffects, colorEffects, layoutSettings, side, materialSettings, children, onFrameClick, }: FrameProps): import("react/jsx-runtime").JSX.Element | null;
+export default function Frame({ url, isActive, createdObject, position, rotation, shapeType, hoverSettings, transformEffects, colorEffects, layoutSettings, side, materialSettings, children, handleObjectClick, }: FrameProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=Frame.d.ts.map

package/dist/components/Frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Frame.d.ts","sourceRoot":"","sources":["../../src/components/Frame.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAA0C,IAAI,EAAgB,MAAM,OAAO,CAAC;AACnF,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAgB,MAAM,wBAAwB,CAAC;AACjG,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG/D,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAMrE,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,qBAAqB,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC;IAC7B,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,cAAc,EAAE,qBAAqB,CAAC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACtG;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,GAAG,EACH,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,SAAoB,EACpB,aAAa,EACb,gBAAqB,EACrB,YAAiB,EACjB,cAAc,EACd,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACR,YAAY,GACb,EAAE,UAAU,kDAkFZ"}
+{"version":3,"file":"Frame.d.ts","sourceRoot":"","sources":["../../src/components/Frame.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAmC,QAAQ,EAAsB,MAAM,OAAO,CAAC;AACtF,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAgB,MAAM,wBAAwB,CAAC;AACjG,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG/D,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAMrE,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,qBAAqB,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC;IAC7B,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,cAAc,EAAE,qBAAqB,CAAC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAClB,aAAa,EAAE,qBAAqB,EACpC,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,GAAG,EACH,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,SAAoB,EACpB,aAAa,EACb,gBAAqB,EACrB,YAAiB,EACjB,cAAc,EACd,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACR,iBAAiB,GAClB,EAAE,UAAU,kDAoFZ"}

package/dist/components/Frame.js

@@ -8,7 +8,7 @@ import { FrameImage } from "./FrameImage";
 import MaterialLibrary from "./MaterialLibrary";
 import { useFrameEffects } from "../hooks/useFrameEffects";
 import { useObjectAnimation } from "../hooks/useObjectAnimation";
-export default function Frame({ url, isActive, createdObject, position, rotation, shapeType = 'circle', hoverSettings, transformEffects = [], colorEffects = [], layoutSettings, side, materialSettings, children, onFrameClick, }) {
+export default function Frame({ url, isActive, createdObject, position, rotation, shapeType = 'circle', hoverSettings, transformEffects = [], colorEffects = [], layoutSettings, side, materialSettings, children, handleObjectClick, }) {
     const frameRef = useRef(new Mesh());
     const imageRef = useRef(null);
     const [texture, setTexture] = useState(null);
@@ -39,12 +39,14 @@ export default function Frame({ url, isActive, createdObject, position, rotation
     ];
     const showFront = side === FrontSide || side === DoubleSide;
     const showBack = side === BackSide || side === DoubleSide;
-    const handleObjectClick = (e) => {
+    const onClick = (e) => {
+        e.stopPropagation();
         if (!frameRef.current)
             return;
-        onFrameClick?.(createdObject, frameRef.current, e);
+        // const clickedPoint = e.point;
+        handleObjectClick?.(createdObject, frameRef.current, e);
     };
     if (!texture)
         return null;
-    return (_jsx("mesh", { name: url, ref: frameRef, position: position, rotation: rotation, scale: scale, raycast: () => null, onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave, onClick: handleObjectClick, children: children ? children : (_jsxs(_Fragment, { children: [_jsx(FrameGeometry, { shapeType: 'rectangle', layoutSettings: layoutSettings, scale: layoutSettings.outerFrameScale }), _jsx(MaterialLibrary, { materialSettings: materialSettings }), showFront && (_jsx(FrameImage, { ref: imageRef, texture: texture, shapeType: 'rectangle', position: [0, 0, 0.02] })), showBack && (_jsx(FrameImage, { texture: texture, shapeType: 'rectangle', position: [0, 0, -0.02], rotation: [0, Math.PI, 0], isBack: true }))] })) }));
+    return (_jsx("mesh", { name: url, ref: frameRef, position: position, rotation: rotation, scale: scale, raycast: () => null, onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave, onClick: onClick, children: children ? children : (_jsxs(_Fragment, { children: [_jsx(FrameGeometry, { shapeType: 'rectangle', layoutSettings: layoutSettings, scale: layoutSettings.outerFrameScale }), _jsx(MaterialLibrary, { materialSettings: materialSettings }), showFront && (_jsx(FrameImage, { ref: imageRef, texture: texture, shapeType: 'rectangle', position: [0, 0, 0.02] })), showBack && (_jsx(FrameImage, { texture: texture, shapeType: 'rectangle', position: [0, 0, -0.02], rotation: [0, Math.PI, 0], isBack: true }))] })) }));
 }

package/dist/components/GalleryLayout.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import { Object3D } from 'three';
 import type { CreatedObjectSettings } from '@ntalmagor/3drize-core';
+import { type ThreeEvent } from '@react-three/fiber';
 export interface GalleryLayoutProps {
     createdObject: CreatedObjectSettings;
     selectedFrameUrl?: string;
-    onFrameSelect?: (url: string) => void;
+    handleObjectClick?: (createdObject: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
 }
 declare const GalleryLayout: React.FC<GalleryLayoutProps>;
 export default GalleryLayout;

package/dist/components/GalleryLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryLayout.d.ts","sourceRoot":"","sources":["../../src/components/GalleryLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,qBAAqB,EAAyB,MAAM,wBAAwB,CAAC;AAM3F,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,qBAAqB,CAAC;IACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkD/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"GalleryLayout.d.ts","sourceRoot":"","sources":["../../src/components/GalleryLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAS,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,qBAAqB,EAAuC,MAAM,wBAAwB,CAAC;AAKzG,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,qBAAqB,CAAC;IACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EACvD,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAC1C;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkD/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/GalleryLayout.js

@@ -4,7 +4,7 @@ import { updateCurrentLayoutSettings } from '@ntalmagor/3drize-core';
 import Frame from './Frame';
 import EffectsGenerator from './EffectsGenerator';
 import { ImageGeometry } from './ImageGeometry';
-const GalleryLayout = ({ createdObject, selectedFrameUrl, onFrameSelect, }) => {
+const GalleryLayout = ({ createdObject, selectedFrameUrl, handleObjectClick, }) => {
     const groupRef = useRef(null);
     const { config, materialSettings, animations } = createdObject;
     const galleryLayout = config || {
@@ -13,6 +13,6 @@ const GalleryLayout = ({ createdObject, selectedFrameUrl, onFrameSelect, }) => {
         outerFrameScale: 1,
     };
     const { frames, layoutSettings } = useMemo(() => updateCurrentLayoutSettings(galleryLayout), [galleryLayout]);
-    return (_jsx("group", { ref: groupRef, scale: [1, 1, 1], position: [0, 0, 0], rotation: [0, 0, 0], children: frames.map((frame, index) => (_jsxs(Frame, { url: frame.url, isActive: selectedFrameUrl === frame.url, createdObject: createdObject, position: frame.position, rotation: frame.rotation, hoverSettings: { sensitivity: 0.5, applyToChildren: false }, transformEffects: animations?.transform?.effects || [], layoutSettings: layoutSettings, side: galleryLayout?.side || 2, materialSettings: materialSettings, onFrameClick: onFrameSelect ? (obj, mesh, e) => onFrameSelect(frame.url) : undefined, children: [layoutSettings.geometryType !== 'none' && (_jsx(ImageGeometry, { url: frame.url, geometryType: layoutSettings.geometryType, outerFrameScale: layoutSettings.outerFrameScale })), createdObject.effects?.map((effect, effectIndex) => (_jsx(EffectsGenerator, { settings: effect }, effectIndex)))] }, index))) }));
+    return (_jsx("group", { ref: groupRef, scale: [1, 1, 1], position: [0, 0, 0], rotation: [0, 0, 0], children: frames.map((frame, index) => (_jsxs(Frame, { url: frame.url, isActive: selectedFrameUrl === frame.url, createdObject: createdObject, position: frame.position, rotation: frame.rotation, hoverSettings: { sensitivity: 0.5, applyToChildren: false }, transformEffects: animations?.transform?.effects || [], layoutSettings: layoutSettings, side: galleryLayout?.side || 2, materialSettings: materialSettings, handleObjectClick: handleObjectClick, children: [layoutSettings.geometryType !== 'none' && (_jsx(ImageGeometry, { url: frame.url, geometryType: layoutSettings.geometryType, outerFrameScale: layoutSettings.outerFrameScale })), createdObject.effects?.map((effect, effectIndex) => (_jsx(EffectsGenerator, { settings: effect }, effectIndex)))] }, index))) }));
 };
 export default GalleryLayout;

package/dist/components/ObjectNode.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
 import { Object3D } from "three";
 import type { CameraState, CreatedObjectSettings, ObjectTreeNode } from "@ntalmagor/3drize-core";
+import { type ThreeEvent } from '@react-three/fiber';
 type ObjectNodeProps = {
     node: ObjectTreeNode;
     cameraSettings: CameraState;
     onObjectReady?: (object: CreatedObjectSettings, ref: Object3D) => void;
+    handleObjectClick?: (object: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
 };
 declare const ObjectNode: React.FC<ObjectNodeProps>;
 export default ObjectNode;

package/dist/components/ObjectNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectNode.d.ts","sourceRoot":"","sources":["../../src/components/ObjectNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAA6D,cAAc,EAA0B,MAAM,wBAAwB,CAAC;AAapL,KAAK,eAAe,GAAG;IACnB,IAAI,EAAE,cAAc,CAAC;IACrB,cAAc,EAAE,WAAW,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC1E,CAAC;AA0JF,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqCzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ObjectNode.d.ts","sourceRoot":"","sources":["../../src/components/ObjectNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAA6D,cAAc,EAA0B,MAAM,wBAAwB,CAAC;AAEpL,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAWrD,KAAK,eAAe,GAAG;IACnB,IAAI,EAAE,cAAc,CAAC;IACrB,cAAc,EAAE,WAAW,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAC7G,CAAC;AAkDF,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyJzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/ObjectNode.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
 import CustomPrimitive from "./CustomPrimitive";
 import CreatedObject from "./CreatedObject.js";
 import Text3D from './Text3D';
@@ -10,40 +10,40 @@ import EffectsGenerator from './EffectsGenerator';
 import ParticlesR3f from "./ParticlesR3f.js";
 import Lines from "./Lines.js";
 import GridHelper from "./GridHelper";
-// Specialized renderers for each object type
-const renderers = {
-    group: () => null,
-    mesh: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady }, obj.id)),
-    model: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady }, obj.id)),
-    custom_primitive: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady }, obj.id)),
-    text: (obj, cameraSettings, onObjectReady) => {
-        const renderMode = obj.config?.renderMode ?? 'bitmap';
-        return (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, children: renderMode === 'text3d'
-                ? _jsx(Text3D, { textSettings: obj })
-                : _jsx(Text2D, { textSettings: obj }) }, obj.id));
-    },
-    particles: (obj, cameraSettings, onObjectReady) => {
-        const particlesSettings = obj;
-        return (_jsxs(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, children: [particlesSettings.config?.particles && (_jsx(ParticlesR3f, { particlesSettings: particlesSettings, cameraFov: cameraSettings.fov, duration: 1, transitionSettings: particlesSettings.meshSettings })), particlesSettings.config?.paths && (_jsx(Lines, { createdObject: particlesSettings }))] }, obj.id));
-    },
-    path: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, children: _jsx(PathRenderer, { pathSettings: obj.config, showCurve: false, showLine: false, showPoints: false }, obj.id) }, obj.id)),
-    grid: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, children: _jsx(GridHelper, { ...obj.config }) }, obj.id)),
-    effect: (obj) => (_jsx(EffectsGenerator, { settings: {
-            enabled: true,
-            config: obj.config,
-        } }, obj.id)),
-    gallery: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, shouldApply3driseMaterial: true, children: _jsx(GalleryLayout, { createdObject: obj }) }, obj.id)),
-};
 const EffectsLayer = ({ effects }) => effects?.length ? (_jsx(_Fragment, { children: effects.map((effect, index) => (_jsx(EffectsGenerator, { settings: effect }, index))) })) : null;
-const GroupWithChildren = ({ createdObject, children, cameraSettings, onObjectReady, renderObject }) => {
+const GroupWithChildren = ({ createdObject, children, cameraSettings, onObjectReady, handleObjectClick, renderObject }) => {
     const meshSettings = createdObject.meshSettings;
     const isGroup = createdObject.type === 'group';
     const hasChildren = children.length > 0;
-    return (_jsxs("group", { position: meshSettings.position, rotation: meshSettings.rotation, scale: meshSettings.scale, visible: meshSettings.visible, name: createdObject.name, userData: { id: createdObject.id, type: createdObject.type }, children: [!isGroup && renderObject(createdObject), children.map(childNode => (_jsx(ObjectNode, { node: childNode, cameraSettings: cameraSettings, onObjectReady: onObjectReady }, childNode.objectId))), _jsx(EffectsLayer, { effects: createdObject.effects })] }, createdObject.id));
+    return (_jsxs("group", { position: meshSettings.position, rotation: meshSettings.rotation, scale: meshSettings.scale, visible: meshSettings.visible, name: createdObject.name, userData: { id: createdObject.id, type: createdObject.type }, children: [!isGroup && renderObject(createdObject, handleObjectClick), children.map(childNode => (_jsx(ObjectNode, { node: childNode, cameraSettings: cameraSettings, handleObjectClick: handleObjectClick, onObjectReady: onObjectReady }, childNode.objectId))), _jsx(EffectsLayer, { effects: createdObject.effects })] }, createdObject.id));
 };
-const ObjectNode = ({ node, cameraSettings, onObjectReady }) => {
+const ObjectNode = ({ node, cameraSettings, onObjectReady, handleObjectClick }) => {
     // console.log(node)
     const { children, createdObject } = node;
+    // Specialized renderers for each object type
+    const renderers = useMemo(() => ({
+        group: () => null,
+        mesh: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick }, obj.id)),
+        model: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick }, obj.id)),
+        custom_primitive: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick }, obj.id)),
+        text: (obj, cameraSettings, onObjectReady) => {
+            const renderMode = obj.config?.renderMode ?? 'bitmap';
+            return (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, children: renderMode === 'text3d'
+                    ? _jsx(Text3D, { textSettings: obj })
+                    : _jsx(Text2D, { textSettings: obj }) }, obj.id));
+        },
+        particles: (obj, cameraSettings, onObjectReady) => {
+            const particlesSettings = obj;
+            return (_jsxs(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, children: [particlesSettings.config?.particles && (_jsx(ParticlesR3f, { particlesSettings: particlesSettings, cameraFov: cameraSettings.fov, duration: 1, transitionSettings: particlesSettings.meshSettings })), particlesSettings.config?.paths && (_jsx(Lines, { createdObject: particlesSettings }))] }, obj.id));
+        },
+        path: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, children: _jsx(PathRenderer, { pathSettings: obj.config, showCurve: false, showLine: false, showPoints: false }, obj.id) }, obj.id)),
+        grid: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, children: _jsx(GridHelper, { ...obj.config }) }, obj.id)),
+        effect: (obj) => (_jsx(EffectsGenerator, { settings: {
+                enabled: true,
+                config: obj.config,
+            } }, obj.id)),
+        gallery: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, shouldApply3driseMaterial: true, children: _jsx(GalleryLayout, { createdObject: obj, handleObjectClick: handleObjectClick }) }, obj.id)),
+    }), [handleObjectClick]);
     if (!createdObject) {
         console.warn(`createdObject not found.`);
         return null;
@@ -51,12 +51,12 @@ const ObjectNode = ({ node, cameraSettings, onObjectReady }) => {
     const meshSettings = createdObject.meshSettings;
     const hasChildren = children.length > 0;
     const shouldRenderAsGroup = hasChildren || createdObject.type === 'group' || createdObject.type === 'effect';
-    const renderObject = useCallback((obj) => {
+    const renderObject = useCallback((obj, handleObjectClick) => {
         const renderer = renderers[obj.type];
         return renderer?.(obj, cameraSettings, onObjectReady) ?? null;
-    }, [cameraSettings, onObjectReady]);
+    }, [cameraSettings, onObjectReady, renderers]);
     const renderedObject = shouldRenderAsGroup
-        ? _jsx(GroupWithChildren, { createdObject: createdObject, children: children, cameraSettings: cameraSettings, onObjectReady: onObjectReady, renderObject: renderObject })
+        ? _jsx(GroupWithChildren, { createdObject: createdObject, children: children, cameraSettings: cameraSettings, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, renderObject: renderObject })
         : createdObject.effects
             ? _jsxs(_Fragment, { children: [renderObject(createdObject), _jsx(EffectsLayer, { effects: createdObject.effects })] })
             : renderObject(createdObject);

package/dist/components/ObjectsRenderer.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
+import { Object3D } from 'three';
+import { type ThreeEvent } from '@react-three/fiber';
 import { GeneralObjectSettings, type CameraState, type CreatedObjectSettings } from '@ntalmagor/3drize-core';
 interface ObjectsRendererProps {
     cameraSettings: CameraState;
     generalObjectSettings: GeneralObjectSettings;
     createdObjects: CreatedObjectSettings[];
     onObjectsReady?: () => void;
+    handleObjectClick?: (object: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
 }
 declare const ObjectsRenderer: React.FC<ObjectsRendererProps>;
 export default ObjectsRenderer;

package/dist/components/ObjectsRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectsRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ObjectsRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAmB,qBAAqB,EAAE,KAAK,WAAW,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAO9H,UAAU,oBAAoB;IAC5B,cAAc,EAAE,WAAW,CAAC;IAC5B,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,cAAc,EAAE,qBAAqB,EAAE,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+BlD,CAAC;AAIH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ObjectsRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ObjectsRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAAS,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAmB,qBAAqB,EAAE,KAAK,WAAW,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAO9H,UAAU,oBAAoB;IAC5B,cAAc,EAAE,WAAW,CAAC;IAC5B,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,cAAc,EAAE,qBAAqB,EAAE,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3G;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgClD,CAAC;AAIH,eAAe,eAAe,CAAC"}

package/dist/components/ObjectsRenderer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useRef, useCallback, useMemo } from 'react';
 import { buildObjectTree } from '@ntalmagor/3drize-core';
 import ObjectNode from './ObjectNode';
-const ObjectsRenderer = memo(({ cameraSettings, createdObjects, generalObjectSettings, onObjectsReady }) => {
+const ObjectsRenderer = memo(({ cameraSettings, createdObjects, generalObjectSettings, onObjectsReady, handleObjectClick }) => {
     const groupRef = useRef(null);
     const objectsTree = useMemo(() => buildObjectTree(createdObjects), [createdObjects]);
     const readyObjectsCount = useRef(0);
@@ -13,7 +13,7 @@ const ObjectsRenderer = memo(({ cameraSettings, createdObjects, generalObjectSet
             onObjectsReady && onObjectsReady();
         }
     }, [objectsTree.length, onObjectsReady]);
-    return (_jsx("group", { ref: groupRef, name: "main-objects", position: generalObjectSettings.meshSettings.position, rotation: generalObjectSettings.meshSettings.rotation, scale: generalObjectSettings.meshSettings.scale, children: objectsTree.map(node => (_jsx(ObjectNode, { node: node, cameraSettings: cameraSettings, onObjectReady: onObjectReady }, node.objectId))) }));
+    return (_jsx("group", { ref: groupRef, name: "main-objects", position: generalObjectSettings.meshSettings.position, rotation: generalObjectSettings.meshSettings.rotation, scale: generalObjectSettings.meshSettings.scale, children: objectsTree.map(node => (_jsx(ObjectNode, { node: node, cameraSettings: cameraSettings, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick }, node.objectId))) }));
 });
 ObjectsRenderer.displayName = 'ObjectsRenderer';
 export default ObjectsRenderer;

package/dist/components/ObjectsRendererApi.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { CreatedObjectSettings, CameraState, GeneralObjectSettings } from '@ntalmagor/3drize-core';
+import { type ThreeEvent } from '@react-three/fiber';
+import { Object3D } from 'three';
+export interface ObjectsRendererApiProps {
+    objectIds: string[];
+    cameraSettings: CameraState;
+    generalObjectSettings: GeneralObjectSettings;
+    apiBaseUrl?: string;
+    onObjectsReady?: () => void;
+    handleObjectClick?: (object: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
+    onError?: (error: Error) => void;
+    onLoading?: (isLoading: boolean) => void;
+}
+/**
+ * ObjectsRendererApi
+ *
+ * A wrapper component that fetches scene objects by their IDs from the data-center API
+ * and passes them to ObjectsRenderer for 3D rendering.
+ *
+ * @example
+ * <ObjectsRendererApi
+ *   objectIds={['obj-1', 'obj-2', 'obj-3']}
+ *   cameraSettings={cameraState}
+ *   generalObjectSettings={generalSettings}
+ *   apiBaseUrl="http://localhost:3001"
+ * />
+ */
+declare const ObjectsRendererApi: React.FC<ObjectsRendererApiProps>;
+export default ObjectsRendererApi;
+//# sourceMappingURL=ObjectsRendererApi.d.ts.map

package/dist/components/ObjectsRendererApi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectsRendererApi.d.ts","sourceRoot":"","sources":["../../src/components/ObjectsRendererApi.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACnG,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,cAAc,EAAE,WAAW,CAAC;IAC5B,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1G,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuGzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/ObjectsRendererApi.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import ObjectsRenderer from './ObjectsRenderer';
+/**
+ * ObjectsRendererApi
+ *
+ * A wrapper component that fetches scene objects by their IDs from the data-center API
+ * and passes them to ObjectsRenderer for 3D rendering.
+ *
+ * @example
+ * <ObjectsRendererApi
+ *   objectIds={['obj-1', 'obj-2', 'obj-3']}
+ *   cameraSettings={cameraState}
+ *   generalObjectSettings={generalSettings}
+ *   apiBaseUrl="http://localhost:3001"
+ * />
+ */
+const ObjectsRendererApi = ({ objectIds, cameraSettings, generalObjectSettings, apiBaseUrl = process.env.REACT_APP_API_BASE_URL || 'http://localhost:3001', onObjectsReady, handleObjectClick, onError, onLoading, }) => {
+    const [createdObjects, setCreatedObjects] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        const fetchObjects = async () => {
+            try {
+                setIsLoading(true);
+                onLoading?.(true);
+                setError(null);
+                if (!objectIds || objectIds.length === 0) {
+                    setCreatedObjects([]);
+                    setIsLoading(false);
+                    onLoading?.(false);
+                    return;
+                }
+                // Fetch scene objects from the data-center API
+                const idsParam = objectIds.join(',');
+                const response = await fetch(`${apiBaseUrl}/api/data/scene-objects?ids=${encodeURIComponent(idsParam)}`, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    credentials: 'include', // Include cookies for authentication
+                });
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch scene objects: ${response.status} ${response.statusText}`);
+                }
+                const data = await response.json();
+                const objects = data.sceneObjects;
+                // Sort objects by their position in the original objectIds array to maintain order
+                const orderedObjects = objectIds
+                    .map(id => objects.find(obj => obj.id === id))
+                    .filter((obj) => obj !== undefined);
+                setCreatedObjects(orderedObjects);
+                setIsLoading(false);
+                onLoading?.(false);
+            }
+            catch (err) {
+                const error = err instanceof Error ? err : new Error(String(err));
+                setError(error);
+                onError?.(error);
+                setIsLoading(false);
+                onLoading?.(false);
+                console.error('Failed to fetch scene objects:', error);
+            }
+        };
+        fetchObjects();
+    }, [objectIds, apiBaseUrl, onError, onLoading]);
+    if (isLoading) {
+        return (_jsx("group", { children: _jsxs("mesh", { position: [0, 0, 0], children: [_jsx("sphereGeometry", { args: [0.5, 32, 32] }), _jsx("meshStandardMaterial", { color: 0x00ff00, wireframe: true })] }) }));
+    }
+    if (error) {
+        console.error('ObjectsRendererApi Error:', error);
+        return (_jsx("group", { children: _jsxs("mesh", { position: [0, 0, 0], children: [_jsx("sphereGeometry", { args: [0.5, 32, 32] }), _jsx("meshStandardMaterial", { color: 0xff0000, wireframe: true })] }) }));
+    }
+    return (_jsx(ObjectsRenderer, { cameraSettings: cameraSettings, createdObjects: createdObjects, generalObjectSettings: generalObjectSettings, onObjectsReady: onObjectsReady, handleObjectClick: handleObjectClick }));
+};
+export default ObjectsRendererApi;