@ntalmagor/3drize-viewer 0.1.10 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/components/AnimatedObject.d.ts +1 -1
  2. package/dist/components/AnimatedObject.d.ts.map +1 -1
  3. package/dist/components/AnimatedObject.js +6 -1
  4. package/dist/components/CreatedObject.d.ts +2 -0
  5. package/dist/components/CreatedObject.d.ts.map +1 -1
  6. package/dist/components/CreatedObject.js +7 -26
  7. package/dist/components/CustomPrimitive.d.ts +2 -0
  8. package/dist/components/CustomPrimitive.d.ts.map +1 -1
  9. package/dist/components/CustomPrimitive.js +2 -4
  10. package/dist/components/Frame.d.ts +3 -3
  11. package/dist/components/Frame.d.ts.map +1 -1
  12. package/dist/components/Frame.js +6 -4
  13. package/dist/components/GalleryLayout.d.ts +3 -1
  14. package/dist/components/GalleryLayout.d.ts.map +1 -1
  15. package/dist/components/GalleryLayout.js +2 -2
  16. package/dist/components/ObjectNode.d.ts +2 -0
  17. package/dist/components/ObjectNode.d.ts.map +1 -1
  18. package/dist/components/ObjectNode.js +32 -32
  19. package/dist/components/ObjectsRenderer.d.ts +3 -0
  20. package/dist/components/ObjectsRenderer.d.ts.map +1 -1
  21. package/dist/components/ObjectsRenderer.js +2 -2
  22. package/dist/components/ObjectsRendererApi.d.ts +31 -0
  23. package/dist/components/ObjectsRendererApi.d.ts.map +1 -0
  24. package/dist/components/ObjectsRendererApi.js +76 -0
  25. package/dist/components/ProductionScene.d.ts +17 -13
  26. package/dist/components/ProductionScene.d.ts.map +1 -1
  27. package/dist/components/ProductionScene.js +23 -2
  28. package/dist/components/ProjectLoader.d.ts +2 -1
  29. package/dist/components/ProjectLoader.d.ts.map +1 -1
  30. package/dist/components/ProjectLoader.js +1 -1
  31. package/dist/components/SceneBuilder.d.ts.map +1 -1
  32. package/dist/components/SceneBuilder.js +3 -2
  33. package/dist/hooks/useFrameAnimations.d.ts +27 -0
  34. package/dist/hooks/useFrameAnimations.d.ts.map +1 -0
  35. package/dist/hooks/useFrameAnimations.js +217 -0
  36. package/dist/hooks/useGsapAnimation.d.ts +130 -0
  37. package/dist/hooks/useGsapAnimation.d.ts.map +1 -0
  38. package/dist/hooks/useGsapAnimation.js +316 -0
  39. package/dist/hooks/useInteraction.d.ts +22 -0
  40. package/dist/hooks/useInteraction.d.ts.map +1 -0
  41. package/dist/hooks/useInteraction.js +240 -0
  42. package/dist/hooks/useObjectEffects.d.ts +29 -0
  43. package/dist/hooks/useObjectEffects.d.ts.map +1 -0
  44. package/dist/hooks/useObjectEffects.js +162 -0
  45. package/package.json +3 -2
@@ -10,7 +10,7 @@ export interface AnimatedObjectProps {
10
10
  visible?: boolean;
11
11
  children?: React.ReactNode;
12
12
  parentRef?: React.RefObject<Object3D>;
13
- onClick?: (e: ThreeEvent<MouseEvent>) => void;
13
+ handleObjectClick?: (createdObject: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
14
14
  onPointerEnter?: (e: ThreeEvent<PointerEvent>) => void;
15
15
  onPointerLeave?: (e: ThreeEvent<PointerEvent>) => void;
16
16
  anchor?: AnchorSettings | null;
@@ -1 +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"}
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,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"}
@@ -9,7 +9,7 @@ import EffectsGroup from './EffectsGroup';
9
9
  import { useObjectAnimation } from '../hooks/useObjectAnimation';
10
10
  export const AnimatedObject = memo(({ stateKey, transitionSettings, createdObject,
11
11
  // speed = 1,
12
- visible = true, children, parentRef, onClick, onPointerEnter, onPointerLeave, anchor, hovered = false, animateMaterial = true,
12
+ visible = true, children, parentRef, handleObjectClick, onPointerEnter, onPointerLeave, anchor, hovered = false, animateMaterial = true,
13
13
  // isActive = false,
14
14
  }) => {
15
15
  const internalRef = useRef(null);
@@ -115,6 +115,11 @@ visible = true, children, parentRef, onClick, onPointerEnter, onPointerLeave, an
115
115
  if (anchor)
116
116
  applyAnchorSettings(anchor, groupRef.current, rotation);
117
117
  });
118
+ const onClick = (e) => {
119
+ if (handleObjectClick && groupRef.current) {
120
+ handleObjectClick(createdObject, groupRef.current, e);
121
+ }
122
+ };
118
123
  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 })] }) }));
119
124
  });
120
125
  AnimatedObject.displayName = 'AnimatedObject';
@@ -1,11 +1,13 @@
1
1
  import React from "react";
2
2
  import type { CreatedObjectSettings } from "@ntalmagor/3drize-core";
3
3
  import { Object3D } from "three";
4
+ import { type ThreeEvent } from '@react-three/fiber';
4
5
  interface CreatedObjectProps {
5
6
  createdObject: CreatedObjectSettings;
6
7
  children: React.ReactNode;
7
8
  shouldApply3driseMaterial?: boolean;
8
9
  onObjectReady?: (object: CreatedObjectSettings, ref: Object3D) => void;
10
+ handleObjectClick?: (createdObject: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
9
11
  }
10
12
  declare const CreatedObject: React.FC<CreatedObjectProps>;
11
13
  export default CreatedObject;
@@ -1 +1 @@
1
- {"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;AAiBjC,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,CAmL9C,CAAC;AAIH,eAAe,aAAa,CAAC"}
1
+ {"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"}
@@ -9,7 +9,7 @@ import AnimatedObject from "./AnimatedObject";
9
9
  import { useFrameEffects } from "../hooks/useFrameEffects";
10
10
  // import { useSceneClick } from "~/contextProviders/SceneClickContext";
11
11
  import { useObjectEdges } from "../hooks/useObjectEdges";
12
- const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial = true, onObjectReady, }) => {
12
+ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial = true, onObjectReady, handleObjectClick, }) => {
13
13
  const isSelected = false;
14
14
  // const isSelected = useObjectSelection(createdObject.id);
15
15
  // const { handleObjectClick: contextHandleObjectClick } = useSceneClick();
@@ -79,12 +79,12 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
79
79
  handlePointerLeave();
80
80
  e.stopPropagation();
81
81
  };
82
- const handleObjectClick = (e) => {
82
+ const onClick = (e) => {
83
83
  console.log('[1] CreatedObject.handleObjectClick:', createdObject.id, createdObject.meshSettings?.name);
84
- if (createdObject.type === 'gallery') {
85
- e.stopPropagation();
86
- return;
87
- }
84
+ // if (createdObject.type === 'gallery') {
85
+ // e.stopPropagation();
86
+ // return
87
+ // }
88
88
  // contextHandleObjectClick(
89
89
  // createdObject,
90
90
  // meshRef.current,
@@ -92,25 +92,6 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
92
92
  // e
93
93
  // );
94
94
  };
95
- const handleTransformStart = () => {
96
- console.log('Transform started for object:', createdObject.id);
97
- isTransforming.current = true;
98
- };
99
- const handleTransformEnd = () => {
100
- isTransforming.current = false;
101
- if (meshRef.current) {
102
- console.log('Transform ended for object:', createdObject.id);
103
- const updatedSettings = {
104
- ...createdObject,
105
- meshSettings: {
106
- ...createdObject.meshSettings,
107
- position: [meshRef.current.position.x, meshRef.current.position.y, meshRef.current.position.z],
108
- rotation: [meshRef.current.rotation.x, meshRef.current.rotation.y, meshRef.current.rotation.z],
109
- scale: [meshRef.current.scale.x, meshRef.current.scale.y, meshRef.current.scale.z]
110
- }
111
- };
112
- }
113
- };
114
95
  const anchorEnabled = createdObject.meshSettings.anchor && createdObject.meshSettings.anchor.enabled;
115
96
  // console.log("createdObject.meshSettings", createdObject.meshSettings)
116
97
  // console.log("Rendered CreatedObject:", createdObject.rigidBodySettings);
@@ -125,7 +106,7 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
125
106
  position: anchorEnabled ? [anchoredPosition.x, anchoredPosition.y, anchoredPosition.z] : animatedTransform.position
126
107
  }, createdObject: createdObject,
127
108
  // animateMaterial={!useDreiMaterials}
128
- 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'
109
+ 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'
129
110
  ? 'cuboid' // Force box collider for planes
130
111
  : undefined // Auto-detect for others
131
112
  , 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) }));
@@ -1,11 +1,13 @@
1
1
  import React from "react";
2
2
  import { type CameraState, type CreatedObjectSettings } from "@ntalmagor/3drize-core";
3
3
  import { Object3D } from "three";
4
+ import { type ThreeEvent } from '@react-three/fiber';
4
5
  interface CustomPrimitiveProps {
5
6
  createdObject: CreatedObjectSettings;
6
7
  cameraSettings: CameraState;
7
8
  updateObjectSettings?: (updatedSettings: CreatedObjectSettings) => void;
8
9
  onObjectReady?: (object: CreatedObjectSettings, ref: Object3D) => void;
10
+ handleObjectClick?: (createdObject: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
9
11
  }
10
12
  declare const CustomPrimitive: React.FC<CustomPrimitiveProps>;
11
13
  export default CustomPrimitive;
@@ -1 +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"}
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;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"}
@@ -8,7 +8,7 @@ import MaterialLibrary from "./MaterialLibrary";
8
8
  // import type { AnimatedTransform } from "~/types/mesh";
9
9
  import CreatedObject from "./CreatedObject";
10
10
  import { useFrameEffects } from "../hooks/useFrameEffects";
11
- const CustomPrimitive = memo(({ createdObject, cameraSettings, updateObjectSettings, onObjectReady, }) => {
11
+ const CustomPrimitive = memo(({ createdObject, cameraSettings, updateObjectSettings, onObjectReady, handleObjectClick, }) => {
12
12
  // const { handleObjectClick } = useSceneClick();
13
13
  // console.log("Rendering CustomPrimitive with settings:", createdObject.name, createdObject);
14
14
  const meshRef = useRef(null);
@@ -68,9 +68,7 @@ const CustomPrimitive = memo(({ createdObject, cameraSettings, updateObjectSetti
68
68
  const geometry = obj.object.geometry;
69
69
  return (
70
70
  // <Select enabled={isSelected}>
71
- _jsx(CreatedObject, { createdObject: createdObject, shouldApply3driseMaterial: false,
72
- // Outer group must be registered so transform animations and edges share the same root
73
- onObjectReady: (object, ref) => {
71
+ _jsx(CreatedObject, { createdObject: createdObject, shouldApply3driseMaterial: false, handleObjectClick: handleObjectClick, onObjectReady: (object, ref) => {
74
72
  onObjectReady && onObjectReady(object, ref);
75
73
  }, 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) })
76
74
  // {/* </Select> */}
@@ -1,5 +1,5 @@
1
1
  import { type ThreeEvent } from '@react-three/fiber';
2
- import { Mesh } from "three";
2
+ import { Object3D } from "three";
3
3
  import type { CreatedObjectSettings, HoverSettings } from '@ntalmagor/3drize-core';
4
4
  import type { GalleryLayoutSettings } from '@ntalmagor/3drize-core';
5
5
  import type { TransformEffect, ColorEffect } from '@ntalmagor/3drize-core';
@@ -20,7 +20,7 @@ export interface FrameProps {
20
20
  side: number;
21
21
  materialSettings: MaterialSettings;
22
22
  children?: React.ReactNode;
23
- onFrameClick?: (createdObject: CreatedObjectSettings, mesh: Mesh, e: ThreeEvent<MouseEvent>) => void;
23
+ handleObjectClick?: (createdObject: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
24
24
  }
25
- 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;
25
+ 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;
26
26
  //# sourceMappingURL=Frame.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -8,7 +8,7 @@ import { FrameImage } from "./FrameImage";
8
8
  import MaterialLibrary from "./MaterialLibrary";
9
9
  import { useFrameEffects } from "../hooks/useFrameEffects";
10
10
  import { useObjectAnimation } from "../hooks/useObjectAnimation";
11
- export default function Frame({ url, isActive, createdObject, position, rotation, shapeType = 'circle', hoverSettings, transformEffects = [], colorEffects = [], layoutSettings, side, materialSettings, children, onFrameClick, }) {
11
+ export default function Frame({ url, isActive, createdObject, position, rotation, shapeType = 'circle', hoverSettings, transformEffects = [], colorEffects = [], layoutSettings, side, materialSettings, children, handleObjectClick, }) {
12
12
  const frameRef = useRef(new Mesh());
13
13
  const imageRef = useRef(null);
14
14
  const [texture, setTexture] = useState(null);
@@ -39,12 +39,14 @@ export default function Frame({ url, isActive, createdObject, position, rotation
39
39
  ];
40
40
  const showFront = side === FrontSide || side === DoubleSide;
41
41
  const showBack = side === BackSide || side === DoubleSide;
42
- const handleObjectClick = (e) => {
42
+ const onClick = (e) => {
43
+ e.stopPropagation();
43
44
  if (!frameRef.current)
44
45
  return;
45
- onFrameClick?.(createdObject, frameRef.current, e);
46
+ // const clickedPoint = e.point;
47
+ handleObjectClick?.(createdObject, frameRef.current, e);
46
48
  };
47
49
  if (!texture)
48
50
  return null;
49
- 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 }))] })) }));
51
+ 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 }))] })) }));
50
52
  }
@@ -1,9 +1,11 @@
1
1
  import React from 'react';
2
+ import { Object3D } from 'three';
2
3
  import type { CreatedObjectSettings } from '@ntalmagor/3drize-core';
4
+ import { type ThreeEvent } from '@react-three/fiber';
3
5
  export interface GalleryLayoutProps {
4
6
  createdObject: CreatedObjectSettings;
5
7
  selectedFrameUrl?: string;
6
- onFrameSelect?: (url: string) => void;
8
+ handleObjectClick?: (createdObject: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
7
9
  }
8
10
  declare const GalleryLayout: React.FC<GalleryLayoutProps>;
9
11
  export default GalleryLayout;
@@ -1 +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"}
1
+ {"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"}
@@ -4,7 +4,7 @@ import { updateCurrentLayoutSettings } from '@ntalmagor/3drize-core';
4
4
  import Frame from './Frame';
5
5
  import EffectsGenerator from './EffectsGenerator';
6
6
  import { ImageGeometry } from './ImageGeometry';
7
- const GalleryLayout = ({ createdObject, selectedFrameUrl, onFrameSelect, }) => {
7
+ const GalleryLayout = ({ createdObject, selectedFrameUrl, handleObjectClick, }) => {
8
8
  const groupRef = useRef(null);
9
9
  const { config, materialSettings, animations } = createdObject;
10
10
  const galleryLayout = config || {
@@ -13,6 +13,6 @@ const GalleryLayout = ({ createdObject, selectedFrameUrl, onFrameSelect, }) => {
13
13
  outerFrameScale: 1,
14
14
  };
15
15
  const { frames, layoutSettings } = useMemo(() => updateCurrentLayoutSettings(galleryLayout), [galleryLayout]);
16
- 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))) }));
16
+ 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))) }));
17
17
  };
18
18
  export default GalleryLayout;
@@ -1,10 +1,12 @@
1
1
  import React from "react";
2
2
  import { Object3D } from "three";
3
3
  import type { CameraState, CreatedObjectSettings, ObjectTreeNode } from "@ntalmagor/3drize-core";
4
+ import { type ThreeEvent } from '@react-three/fiber';
4
5
  type ObjectNodeProps = {
5
6
  node: ObjectTreeNode;
6
7
  cameraSettings: CameraState;
7
8
  onObjectReady?: (object: CreatedObjectSettings, ref: Object3D) => void;
9
+ handleObjectClick?: (object: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
8
10
  };
9
11
  declare const ObjectNode: React.FC<ObjectNodeProps>;
10
12
  export default ObjectNode;
@@ -1 +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"}
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;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"}
@@ -1,5 +1,5 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { useCallback } from "react";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useCallback, useMemo } from "react";
3
3
  import CustomPrimitive from "./CustomPrimitive";
4
4
  import CreatedObject from "./CreatedObject.js";
5
5
  import Text3D from './Text3D';
@@ -10,40 +10,40 @@ import EffectsGenerator from './EffectsGenerator';
10
10
  import ParticlesR3f from "./ParticlesR3f.js";
11
11
  import Lines from "./Lines.js";
12
12
  import GridHelper from "./GridHelper";
13
- // Specialized renderers for each object type
14
- const renderers = {
15
- group: () => null,
16
- mesh: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady }, obj.id)),
17
- model: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady }, obj.id)),
18
- custom_primitive: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady }, obj.id)),
19
- text: (obj, cameraSettings, onObjectReady) => {
20
- const renderMode = obj.config?.renderMode ?? 'bitmap';
21
- return (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, children: renderMode === 'text3d'
22
- ? _jsx(Text3D, { textSettings: obj })
23
- : _jsx(Text2D, { textSettings: obj }) }, obj.id));
24
- },
25
- particles: (obj, cameraSettings, onObjectReady) => {
26
- const particlesSettings = obj;
27
- 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));
28
- },
29
- 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)),
30
- grid: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, children: _jsx(GridHelper, { ...obj.config }) }, obj.id)),
31
- effect: (obj) => (_jsx(EffectsGenerator, { settings: {
32
- enabled: true,
33
- config: obj.config,
34
- } }, obj.id)),
35
- gallery: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, shouldApply3driseMaterial: true, children: _jsx(GalleryLayout, { createdObject: obj }) }, obj.id)),
36
- };
37
13
  const EffectsLayer = ({ effects }) => effects?.length ? (_jsx(_Fragment, { children: effects.map((effect, index) => (_jsx(EffectsGenerator, { settings: effect }, index))) })) : null;
38
- const GroupWithChildren = ({ createdObject, children, cameraSettings, onObjectReady, renderObject }) => {
14
+ const GroupWithChildren = ({ createdObject, children, cameraSettings, onObjectReady, handleObjectClick, renderObject }) => {
39
15
  const meshSettings = createdObject.meshSettings;
40
16
  const isGroup = createdObject.type === 'group';
41
17
  const hasChildren = children.length > 0;
42
- 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));
18
+ 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));
43
19
  };
44
- const ObjectNode = ({ node, cameraSettings, onObjectReady }) => {
20
+ const ObjectNode = ({ node, cameraSettings, onObjectReady, handleObjectClick }) => {
45
21
  // console.log(node)
46
22
  const { children, createdObject } = node;
23
+ // Specialized renderers for each object type
24
+ const renderers = useMemo(() => ({
25
+ group: () => null,
26
+ mesh: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick }, obj.id)),
27
+ model: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick }, obj.id)),
28
+ custom_primitive: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick }, obj.id)),
29
+ text: (obj, cameraSettings, onObjectReady) => {
30
+ const renderMode = obj.config?.renderMode ?? 'bitmap';
31
+ return (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, children: renderMode === 'text3d'
32
+ ? _jsx(Text3D, { textSettings: obj })
33
+ : _jsx(Text2D, { textSettings: obj }) }, obj.id));
34
+ },
35
+ particles: (obj, cameraSettings, onObjectReady) => {
36
+ const particlesSettings = obj;
37
+ 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));
38
+ },
39
+ 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)),
40
+ grid: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, children: _jsx(GridHelper, { ...obj.config }) }, obj.id)),
41
+ effect: (obj) => (_jsx(EffectsGenerator, { settings: {
42
+ enabled: true,
43
+ config: obj.config,
44
+ } }, obj.id)),
45
+ gallery: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, shouldApply3driseMaterial: true, children: _jsx(GalleryLayout, { createdObject: obj, handleObjectClick: handleObjectClick }) }, obj.id)),
46
+ }), [handleObjectClick]);
47
47
  if (!createdObject) {
48
48
  console.warn(`createdObject not found.`);
49
49
  return null;
@@ -51,12 +51,12 @@ const ObjectNode = ({ node, cameraSettings, onObjectReady }) => {
51
51
  const meshSettings = createdObject.meshSettings;
52
52
  const hasChildren = children.length > 0;
53
53
  const shouldRenderAsGroup = hasChildren || createdObject.type === 'group' || createdObject.type === 'effect';
54
- const renderObject = useCallback((obj) => {
54
+ const renderObject = useCallback((obj, handleObjectClick) => {
55
55
  const renderer = renderers[obj.type];
56
56
  return renderer?.(obj, cameraSettings, onObjectReady) ?? null;
57
- }, [cameraSettings, onObjectReady]);
57
+ }, [cameraSettings, onObjectReady, renderers]);
58
58
  const renderedObject = shouldRenderAsGroup
59
- ? _jsx(GroupWithChildren, { createdObject: createdObject, children: children, cameraSettings: cameraSettings, onObjectReady: onObjectReady, renderObject: renderObject })
59
+ ? _jsx(GroupWithChildren, { createdObject: createdObject, children: children, cameraSettings: cameraSettings, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, renderObject: renderObject })
60
60
  : createdObject.effects
61
61
  ? _jsxs(_Fragment, { children: [renderObject(createdObject), _jsx(EffectsLayer, { effects: createdObject.effects })] })
62
62
  : renderObject(createdObject);
@@ -1,10 +1,13 @@
1
1
  import React from 'react';
2
+ import { Object3D } from 'three';
3
+ import { type ThreeEvent } from '@react-three/fiber';
2
4
  import { GeneralObjectSettings, type CameraState, type CreatedObjectSettings } from '@ntalmagor/3drize-core';
3
5
  interface ObjectsRendererProps {
4
6
  cameraSettings: CameraState;
5
7
  generalObjectSettings: GeneralObjectSettings;
6
8
  createdObjects: CreatedObjectSettings[];
7
9
  onObjectsReady?: () => void;
10
+ handleObjectClick?: (object: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
8
11
  }
9
12
  declare const ObjectsRenderer: React.FC<ObjectsRendererProps>;
10
13
  export default ObjectsRenderer;
@@ -1 +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"}
1
+ {"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"}
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { memo, useRef, useCallback, useMemo } from 'react';
3
3
  import { buildObjectTree } from '@ntalmagor/3drize-core';
4
4
  import ObjectNode from './ObjectNode';
5
- const ObjectsRenderer = memo(({ cameraSettings, createdObjects, generalObjectSettings, onObjectsReady }) => {
5
+ const ObjectsRenderer = memo(({ cameraSettings, createdObjects, generalObjectSettings, onObjectsReady, handleObjectClick }) => {
6
6
  const groupRef = useRef(null);
7
7
  const objectsTree = useMemo(() => buildObjectTree(createdObjects), [createdObjects]);
8
8
  const readyObjectsCount = useRef(0);
@@ -13,7 +13,7 @@ const ObjectsRenderer = memo(({ cameraSettings, createdObjects, generalObjectSet
13
13
  onObjectsReady && onObjectsReady();
14
14
  }
15
15
  }, [objectsTree.length, onObjectsReady]);
16
- 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))) }));
16
+ 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))) }));
17
17
  });
18
18
  ObjectsRenderer.displayName = 'ObjectsRenderer';
19
19
  export default ObjectsRenderer;
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ import { CreatedObjectSettings, CameraState, GeneralObjectSettings } from '@ntalmagor/3drize-core';
3
+ import { type ThreeEvent } from '@react-three/fiber';
4
+ import { Object3D } from 'three';
5
+ export interface ObjectsRendererApiProps {
6
+ objectIds: string[];
7
+ cameraSettings: CameraState;
8
+ generalObjectSettings: GeneralObjectSettings;
9
+ apiBaseUrl?: string;
10
+ onObjectsReady?: () => void;
11
+ handleObjectClick?: (object: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
12
+ onError?: (error: Error) => void;
13
+ onLoading?: (isLoading: boolean) => void;
14
+ }
15
+ /**
16
+ * ObjectsRendererApi
17
+ *
18
+ * A wrapper component that fetches scene objects by their IDs from the data-center API
19
+ * and passes them to ObjectsRenderer for 3D rendering.
20
+ *
21
+ * @example
22
+ * <ObjectsRendererApi
23
+ * objectIds={['obj-1', 'obj-2', 'obj-3']}
24
+ * cameraSettings={cameraState}
25
+ * generalObjectSettings={generalSettings}
26
+ * apiBaseUrl="http://localhost:3001"
27
+ * />
28
+ */
29
+ declare const ObjectsRendererApi: React.FC<ObjectsRendererApiProps>;
30
+ export default ObjectsRendererApi;
31
+ //# sourceMappingURL=ObjectsRendererApi.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,76 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useEffect, useState } from 'react';
3
+ import ObjectsRenderer from './ObjectsRenderer';
4
+ /**
5
+ * ObjectsRendererApi
6
+ *
7
+ * A wrapper component that fetches scene objects by their IDs from the data-center API
8
+ * and passes them to ObjectsRenderer for 3D rendering.
9
+ *
10
+ * @example
11
+ * <ObjectsRendererApi
12
+ * objectIds={['obj-1', 'obj-2', 'obj-3']}
13
+ * cameraSettings={cameraState}
14
+ * generalObjectSettings={generalSettings}
15
+ * apiBaseUrl="http://localhost:3001"
16
+ * />
17
+ */
18
+ const ObjectsRendererApi = ({ objectIds, cameraSettings, generalObjectSettings, apiBaseUrl = process.env.REACT_APP_API_BASE_URL || 'http://localhost:3001', onObjectsReady, handleObjectClick, onError, onLoading, }) => {
19
+ const [createdObjects, setCreatedObjects] = useState([]);
20
+ const [isLoading, setIsLoading] = useState(true);
21
+ const [error, setError] = useState(null);
22
+ useEffect(() => {
23
+ const fetchObjects = async () => {
24
+ try {
25
+ setIsLoading(true);
26
+ onLoading?.(true);
27
+ setError(null);
28
+ if (!objectIds || objectIds.length === 0) {
29
+ setCreatedObjects([]);
30
+ setIsLoading(false);
31
+ onLoading?.(false);
32
+ return;
33
+ }
34
+ // Fetch scene objects from the data-center API
35
+ const idsParam = objectIds.join(',');
36
+ const response = await fetch(`${apiBaseUrl}/api/data/scene-objects?ids=${encodeURIComponent(idsParam)}`, {
37
+ method: 'GET',
38
+ headers: {
39
+ 'Content-Type': 'application/json',
40
+ },
41
+ credentials: 'include', // Include cookies for authentication
42
+ });
43
+ if (!response.ok) {
44
+ throw new Error(`Failed to fetch scene objects: ${response.status} ${response.statusText}`);
45
+ }
46
+ const data = await response.json();
47
+ const objects = data.sceneObjects;
48
+ // Sort objects by their position in the original objectIds array to maintain order
49
+ const orderedObjects = objectIds
50
+ .map(id => objects.find(obj => obj.id === id))
51
+ .filter((obj) => obj !== undefined);
52
+ setCreatedObjects(orderedObjects);
53
+ setIsLoading(false);
54
+ onLoading?.(false);
55
+ }
56
+ catch (err) {
57
+ const error = err instanceof Error ? err : new Error(String(err));
58
+ setError(error);
59
+ onError?.(error);
60
+ setIsLoading(false);
61
+ onLoading?.(false);
62
+ console.error('Failed to fetch scene objects:', error);
63
+ }
64
+ };
65
+ fetchObjects();
66
+ }, [objectIds, apiBaseUrl, onError, onLoading]);
67
+ if (isLoading) {
68
+ return (_jsx("group", { children: _jsxs("mesh", { position: [0, 0, 0], children: [_jsx("sphereGeometry", { args: [0.5, 32, 32] }), _jsx("meshStandardMaterial", { color: 0x00ff00, wireframe: true })] }) }));
69
+ }
70
+ if (error) {
71
+ console.error('ObjectsRendererApi Error:', error);
72
+ return (_jsx("group", { children: _jsxs("mesh", { position: [0, 0, 0], children: [_jsx("sphereGeometry", { args: [0.5, 32, 32] }), _jsx("meshStandardMaterial", { color: 0xff0000, wireframe: true })] }) }));
73
+ }
74
+ return (_jsx(ObjectsRenderer, { cameraSettings: cameraSettings, createdObjects: createdObjects, generalObjectSettings: generalObjectSettings, onObjectsReady: onObjectsReady, handleObjectClick: handleObjectClick }));
75
+ };
76
+ export default ObjectsRendererApi;
@@ -1,28 +1,32 @@
1
1
  import React from "react";
2
- import type { DeviceType } from "@ntalmagor/3drize-core";
2
+ import { Object3D } from "three";
3
+ import type { AnimationSequence, CameraState, CreatedObjectSettings, DeviceType, FogSettings, GeneralObjectSettings, GridConfig, HdrSettings, OceanSettings, PhysicsSettings, RainSettings, SkySettings, StarsSettings, TimeSettings } from "@ntalmagor/3drize-core";
4
+ import { type ThreeEvent } from '@react-three/fiber';
3
5
  type ProductionSceneProps = {
4
6
  device: DeviceType;
5
7
  onObjectsReady?: () => void;
6
- gridSettings: any;
7
- hdr: any;
8
- physicsSettings: any;
9
- generalObjectSettings: any;
10
- ocean: any;
11
- cameraSettings: any;
8
+ gridSettings: GridConfig;
9
+ hdr: HdrSettings;
10
+ physicsSettings: PhysicsSettings;
11
+ generalObjectSettings: GeneralObjectSettings;
12
+ ocean: OceanSettings;
13
+ cameraSettings: CameraState;
12
14
  selectedLight: any;
13
- objects: any;
15
+ objects: CreatedObjectSettings[];
14
16
  lighting: any;
15
17
  controls: any;
16
18
  geometry: any;
17
19
  structure: any;
18
20
  isPathMode: boolean;
19
21
  editingPath: any;
20
- sky: any;
21
- timeSettings: any;
22
- starsSettings: any;
22
+ sky: SkySettings;
23
+ timeSettings: TimeSettings;
24
+ starsSettings: StarsSettings;
23
25
  clouds: any;
24
- rainSettings: any;
25
- fogSettings: any;
26
+ rainSettings: RainSettings;
27
+ fogSettings: FogSettings;
28
+ animationSequences: AnimationSequence[];
29
+ onObjectClick?: (object: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
26
30
  };
27
31
  declare const ProductionScene: React.FC<ProductionSceneProps>;
28
32
  export default ProductionScene;
@@ -1 +1 @@
1
- {"version":3,"file":"ProductionScene.d.ts","sourceRoot":"","sources":["../../src/components/ProductionScene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAWzD,KAAK,oBAAoB,GAAG;IAC1B,MAAM,EAAE,UAAU,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,EAAE,GAAG,CAAC;IAClB,GAAG,EAAE,GAAG,CAAC;IACT,eAAe,EAAE,GAAG,CAAC;IACrB,qBAAqB,EAAE,GAAG,CAAC;IAC3B,KAAK,EAAE,GAAG,CAAC;IACX,cAAc,EAAE,GAAG,CAAC;IACpB,aAAa,EAAE,GAAG,CAAC;IACnB,OAAO,EAAE,GAAG,CAAC;IACb,QAAQ,EAAE,GAAG,CAAC;IACd,QAAQ,EAAE,GAAG,CAAC;IACd,QAAQ,EAAE,GAAG,CAAC;IACd,SAAS,EAAE,GAAG,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,GAAG,CAAC;IACjB,GAAG,EAAE,GAAG,CAAC;IACT,YAAY,EAAE,GAAG,CAAC;IAClB,aAAa,EAAE,GAAG,CAAC;IACnB,MAAM,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,GAAG,CAAC;IAClB,WAAW,EAAE,GAAG,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwFnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"ProductionScene.d.ts","sourceRoot":"","sources":["../../src/components/ProductionScene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAW,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,qBAAqB,EAAE,UAAU,EAAE,WAAW,EAAE,qBAAqB,EAAE,UAAU,EAAE,WAAW,EAAe,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAClR,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAYrD,KAAK,oBAAoB,GAAG;IAC1B,MAAM,EAAE,UAAU,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,EAAE,UAAU,CAAC;IACzB,GAAG,EAAE,WAAW,CAAC;IACjB,eAAe,EAAE,eAAe,CAAC;IACjC,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,KAAK,EAAE,aAAa,CAAC;IACrB,cAAc,EAAE,WAAW,CAAC;IAC5B,aAAa,EAAE,GAAG,CAAC;IACnB,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,QAAQ,EAAE,GAAG,CAAC;IACd,QAAQ,EAAE,GAAG,CAAC;IACd,QAAQ,EAAE,GAAG,CAAC;IACd,SAAS,EAAE,GAAG,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,GAAG,CAAC;IACjB,GAAG,EAAE,WAAW,CAAC;IACjB,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC;IAC7B,MAAM,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,YAAY,CAAC;IAC3B,WAAW,EAAE,WAAW,CAAC;IACzB,kBAAkB,EAAE,iBAAiB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACvG,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6HnD,CAAC;AAEF,eAAe,eAAe,CAAC"}