@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.
- package/dist/components/AnimatedObject.d.ts +1 -1
- package/dist/components/AnimatedObject.d.ts.map +1 -1
- package/dist/components/AnimatedObject.js +6 -1
- package/dist/components/CreatedObject.d.ts +2 -0
- package/dist/components/CreatedObject.d.ts.map +1 -1
- package/dist/components/CreatedObject.js +7 -26
- package/dist/components/CustomPrimitive.d.ts +2 -0
- package/dist/components/CustomPrimitive.d.ts.map +1 -1
- package/dist/components/CustomPrimitive.js +2 -4
- package/dist/components/Frame.d.ts +3 -3
- package/dist/components/Frame.d.ts.map +1 -1
- package/dist/components/Frame.js +6 -4
- package/dist/components/GalleryLayout.d.ts +3 -1
- package/dist/components/GalleryLayout.d.ts.map +1 -1
- package/dist/components/GalleryLayout.js +2 -2
- package/dist/components/ObjectNode.d.ts +2 -0
- package/dist/components/ObjectNode.d.ts.map +1 -1
- package/dist/components/ObjectNode.js +32 -32
- package/dist/components/ObjectsRenderer.d.ts +3 -0
- package/dist/components/ObjectsRenderer.d.ts.map +1 -1
- package/dist/components/ObjectsRenderer.js +2 -2
- package/dist/components/ObjectsRendererApi.d.ts +31 -0
- package/dist/components/ObjectsRendererApi.d.ts.map +1 -0
- package/dist/components/ObjectsRendererApi.js +76 -0
- package/dist/components/ProductionScene.d.ts +17 -13
- package/dist/components/ProductionScene.d.ts.map +1 -1
- package/dist/components/ProductionScene.js +23 -2
- package/dist/components/ProjectLoader.d.ts +2 -1
- package/dist/components/ProjectLoader.d.ts.map +1 -1
- package/dist/components/ProjectLoader.js +1 -1
- package/dist/components/SceneBuilder.d.ts.map +1 -1
- package/dist/components/SceneBuilder.js +3 -2
- package/dist/hooks/useFrameAnimations.d.ts +27 -0
- package/dist/hooks/useFrameAnimations.d.ts.map +1 -0
- package/dist/hooks/useFrameAnimations.js +217 -0
- package/dist/hooks/useGsapAnimation.d.ts +130 -0
- package/dist/hooks/useGsapAnimation.d.ts.map +1 -0
- package/dist/hooks/useGsapAnimation.js +316 -0
- package/dist/hooks/useInteraction.d.ts +22 -0
- package/dist/hooks/useInteraction.d.ts.map +1 -0
- package/dist/hooks/useInteraction.js +240 -0
- package/dist/hooks/useObjectEffects.d.ts +29 -0
- package/dist/hooks/useObjectEffects.d.ts.map +1 -0
- package/dist/hooks/useObjectEffects.js +162 -0
- 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
|
-
|
|
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,
|
|
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,
|
|
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;
|
|
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
|
|
82
|
+
const onClick = (e) => {
|
|
83
83
|
console.log('[1] CreatedObject.handleObjectClick:', createdObject.id, createdObject.meshSettings?.name);
|
|
84
|
-
if (createdObject.type === 'gallery') {
|
|
85
|
-
|
|
86
|
-
|
|
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,
|
|
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;
|
|
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 {
|
|
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
|
-
|
|
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,
|
|
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":"
|
|
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"}
|
package/dist/components/Frame.js
CHANGED
|
@@ -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,
|
|
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
|
|
42
|
+
const onClick = (e) => {
|
|
43
|
+
e.stopPropagation();
|
|
43
44
|
if (!frameRef.current)
|
|
44
45
|
return;
|
|
45
|
-
|
|
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:
|
|
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
|
-
|
|
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;
|
|
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,
|
|
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,
|
|
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;
|
|
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,
|
|
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;
|
|
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
|
|
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:
|
|
7
|
-
hdr:
|
|
8
|
-
physicsSettings:
|
|
9
|
-
generalObjectSettings:
|
|
10
|
-
ocean:
|
|
11
|
-
cameraSettings:
|
|
8
|
+
gridSettings: GridConfig;
|
|
9
|
+
hdr: HdrSettings;
|
|
10
|
+
physicsSettings: PhysicsSettings;
|
|
11
|
+
generalObjectSettings: GeneralObjectSettings;
|
|
12
|
+
ocean: OceanSettings;
|
|
13
|
+
cameraSettings: CameraState;
|
|
12
14
|
selectedLight: any;
|
|
13
|
-
objects:
|
|
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:
|
|
21
|
-
timeSettings:
|
|
22
|
-
starsSettings:
|
|
22
|
+
sky: SkySettings;
|
|
23
|
+
timeSettings: TimeSettings;
|
|
24
|
+
starsSettings: StarsSettings;
|
|
23
25
|
clouds: any;
|
|
24
|
-
rainSettings:
|
|
25
|
-
fogSettings:
|
|
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;
|
|
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"}
|