@ntalmagor/3drize-viewer 0.1.2

package/dist/components/AnimatedObject.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { Object3D } from 'three';
+import type { ThreeEvent } from '@react-three/fiber';
+import type { AnimatedTransform, AnchorSettings, CreatedObjectSettings } from '@ntalmagor/3drize-core';
+export interface AnimatedObjectProps {
+    stateKey: string;
+    transitionSettings: AnimatedTransform;
+    createdObject: CreatedObjectSettings;
+    speed?: number;
+    visible?: boolean;
+    children?: React.ReactNode;
+    parentRef?: React.RefObject<Object3D>;
+    onClick?: (e: ThreeEvent<MouseEvent>) => void;
+    onPointerEnter?: (e: ThreeEvent<PointerEvent>) => void;
+    onPointerLeave?: (e: ThreeEvent<PointerEvent>) => void;
+    anchor?: AnchorSettings | null;
+    hovered?: boolean;
+    animateMaterial?: boolean;
+}
+export declare const AnimatedObject: React.FC<AnimatedObjectProps>;
+export default AnimatedObject;
+//# sourceMappingURL=AnimatedObject.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/AnimatedObject.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback, memo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { useAnimationEvents } from '../hooks/useAnimationEvents';
+import { usePathAnimation } from '../hooks/usePathAnimation';
+import AnimationsManager from '../../../core/src/services/AnimationsManager';
+import { applyAnchorSettings } from '../utils/anchorUtils';
+import EffectsGroup from './EffectsGroup';
+import { useObjectAnimation } from '../hooks/useObjectAnimation';
+export const AnimatedObject = memo(({ stateKey, transitionSettings, createdObject, 
+// speed = 1,
+visible = true, children, parentRef, onClick, onPointerEnter, onPointerLeave, anchor, hovered = false, animateMaterial = true,
+// isActive = false,
+ }) => {
+    const internalRef = useRef(null);
+    const groupRef = parentRef ?? internalRef;
+    const { position, scale, rotation, targetPosition, targetScale, targetRotation } = transitionSettings;
+    const animationStartTime = useRef(null);
+    const stepDuration = useRef(1);
+    const stepEase = useRef('linear');
+    const animProgress = useRef(0);
+    const baseRef = useRef({ position: [...position], scale: [...scale], rotation: [...rotation] });
+    const targetRef = useRef({
+        position: targetPosition ? [...targetPosition] : [...position],
+        scale: targetScale ? [...targetScale] : [...scale],
+        rotation: targetRotation ? [...targetRotation] : [...rotation],
+    });
+    useObjectAnimation(createdObject, animateMaterial, {
+        enabled: createdObject.type !== 'gallery', // 
+        hovered,
+    });
+    const { startPathAnimation, updatePathAnimation, isAnimating: isPathAnimating } = usePathAnimation();
+    const syncTransform = useCallback(() => {
+        const obj = groupRef.current;
+        if (!obj)
+            return;
+        baseRef.current = { position: [...position], scale: [...scale], rotation: [...rotation] };
+        targetRef.current = {
+            position: targetPosition ? [...targetPosition] : [...position],
+            scale: targetScale ? [...targetScale] : [...scale],
+            rotation: targetRotation ? [...targetRotation] : [...rotation],
+        };
+        obj.position.set(...position);
+        obj.scale.set(...scale);
+        obj.rotation.set(...rotation);
+        if (targetPosition || targetScale || targetRotation)
+            animProgress.current = 0;
+    }, [position, scale, rotation, targetPosition, targetScale, targetRotation]);
+    useEffect(() => { syncTransform(); }, [position, scale, rotation, targetPosition, targetScale, targetRotation]);
+    useAnimationEvents({
+        onStepStart: (event) => {
+            if (!event.step?.transitions)
+                return;
+            const d = event.step.duration || 1;
+            for (const { state, properties, pathId } of event.step.transitions) {
+                if (state !== stateKey)
+                    continue;
+                if (properties.to.visible === false) {
+                    if (groupRef.current)
+                        groupRef.current.visible = false;
+                }
+                else {
+                    if (groupRef.current)
+                        groupRef.current.visible = true;
+                    stepDuration.current = d;
+                    stepEase.current = event.step.ease || 'linear';
+                    animationStartTime.current = performance.now();
+                    animProgress.current = 0;
+                    if (pathId) {
+                        startPathAnimation(pathId, d, { ease: stepEase.current });
+                    }
+                    else {
+                        const cur = targetRef.current;
+                        baseRef.current = {
+                            position: (properties.from?.position ? [...properties.from.position] : cur.position),
+                            rotation: (properties.from?.rotation ? [...properties.from.rotation] : cur.rotation),
+                            scale: (properties.from?.scale ? [...properties.from.scale] : cur.scale),
+                        };
+                        targetRef.current = {
+                            position: (properties.to?.position ? [...properties.to.position] : cur.position),
+                            rotation: (properties.to?.rotation ? [...properties.to.rotation] : cur.rotation),
+                            scale: (properties.to?.scale ? [...properties.to.scale] : cur.scale),
+                        };
+                    }
+                }
+            }
+        },
+    });
+    const applyTransformProgress = useCallback(() => {
+        const obj = groupRef.current;
+        if (!obj || animationStartTime.current === null)
+            return;
+        const p = AnimationsManager.getProgressFromTime(animationStartTime.current, stepDuration.current, stepEase.current);
+        animProgress.current = p;
+        const b = baseRef.current, t = targetRef.current;
+        obj.position.set(b.position[0] + (t.position[0] - b.position[0]) * p, b.position[1] + (t.position[1] - b.position[1]) * p, b.position[2] + (t.position[2] - b.position[2]) * p);
+        obj.scale.set(b.scale[0] + (t.scale[0] - b.scale[0]) * p, b.scale[1] + (t.scale[1] - b.scale[1]) * p, b.scale[2] + (t.scale[2] - b.scale[2]) * p);
+        obj.rotation.set(b.rotation[0] + (t.rotation[0] - b.rotation[0]) * p, b.rotation[1] + (t.rotation[1] - b.rotation[1]) * p, b.rotation[2] + (t.rotation[2] - b.rotation[2]) * p);
+    }, []);
+    useFrame((_state, delta) => {
+        if (!visible || !groupRef.current)
+            return;
+        if (animProgress.current < 1) {
+            if (isPathAnimating()) {
+                const still = updatePathAnimation(delta, groupRef.current);
+                if (!still) {
+                    animProgress.current = 1;
+                    animationStartTime.current = null;
+                }
+            }
+            else if (animationStartTime.current !== null) {
+                applyTransformProgress();
+            }
+        }
+        if (anchor)
+            applyAnchorSettings(anchor, groupRef.current, rotation);
+    });
+    return (_jsx(_Fragment, { children: _jsxs("group", { ref: groupRef, position: position, scale: scale, rotation: rotation, visible: visible, onClick: (e) => { e.stopPropagation(); onClick?.(e); }, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, name: createdObject.meshSettings.name, userData: { id: createdObject.id }, children: [children, _jsx(EffectsGroup, { createdObject: createdObject })] }) }));
+});
+AnimatedObject.displayName = 'AnimatedObject';
+export default AnimatedObject;

package/dist/components/CameraController.d.ts

@@ -0,0 +1,16 @@
+import type { CameraState } from '@ntalmagor/3drize-core';
+interface CameraControllerProps {
+    enableAutoAnimation?: boolean;
+    animationDuration?: number;
+    animationEase?: string;
+    settings: CameraState;
+}
+/**
+ * CameraController - React Three Fiber component that syncs camera with Redux state
+ * This component should be placed inside the Canvas component
+ *
+ * Simplified: Just applies state to camera. Animation is handled via useAnimationEvents.
+ */
+export declare const CameraController: React.FC<CameraControllerProps>;
+export default CameraController;
+//# sourceMappingURL=CameraController.d.ts.map

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

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

package/dist/components/CameraController.js

@@ -0,0 +1,132 @@
+import { useEffect, useRef } from 'react';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useDispatch } from 'react-redux';
+import { useCameraAnimation } from '../hooks/useCameraAnimation';
+import { cameraManager } from '../utils/CameraSingleton';
+import { useAnimationEvents } from '../hooks/useAnimationEvents';
+import { usePathAnimation } from '../hooks/usePathAnimation';
+/**
+ * CameraController - React Three Fiber component that syncs camera with Redux state
+ * This component should be placed inside the Canvas component
+ *
+ * Simplified: Just applies state to camera. Animation is handled via useAnimationEvents.
+ */
+export const CameraController = ({ enableAutoAnimation = true, animationDuration = 1, animationEase = "power2.out", settings }) => {
+    const { camera, set } = useThree();
+    const dispatch = useDispatch();
+    const cameraRef = useRef(camera);
+    const transformAnimationProgress = useRef(0);
+    // Redux selectors
+    const { position, orientation, fov, near, far } = settings;
+    const { startPathAnimation, updatePathAnimation, isAnimating: isPathAnimating, } = usePathAnimation();
+    // Use camera animation hook for animated transitions (via events)
+    const { animateCamera, animateHandlers, isAnimating } = useCameraAnimation({
+        autoAnimate: false,
+        defaultDuration: animationDuration,
+        defaultEase: animationEase
+    });
+    // Track if currently in an animated transition
+    const isInAnimatedTransition = useRef(false);
+    // Register camera with singleton on mount and when camera changes
+    useEffect(() => {
+        cameraRef.current = camera;
+        set({ camera: cameraRef.current });
+        cameraManager.setCamera(cameraRef.current);
+    }, [camera, set]);
+    // Sync camera position and orientation from state (only when not animating)
+    useEffect(() => {
+        if (isInAnimatedTransition.current || isAnimating())
+            return;
+        const cam = cameraRef.current;
+        if (!cam)
+            return;
+        // Check if camera is already synced
+        if (!cameraManager.isSynced(position, orientation)) {
+            cam.position.set(...position);
+            if (orientation.length === 4) {
+                cam.quaternion.set(...orientation);
+            }
+            else {
+                cam.rotation.set(orientation[0], orientation[1], orientation[2]);
+            }
+            console.log("CameraController: Synced position/orientation", position, orientation);
+        }
+    }, [position, orientation]);
+    // Sync camera projection settings from state
+    useEffect(() => {
+        const cam = cameraRef.current;
+        if (!cam)
+            return;
+        let needsUpdate = false;
+        if (cam.fov !== fov) {
+            cam.fov = fov;
+            needsUpdate = true;
+        }
+        if (cam.near !== near) {
+            cam.near = near;
+            needsUpdate = true;
+        }
+        if (cam.far !== far) {
+            cam.far = far;
+            needsUpdate = true;
+        }
+        if (needsUpdate) {
+            cam.updateProjectionMatrix();
+        }
+    }, [fov, near, far]);
+    // Handle animation events (step-based animations)
+    useAnimationEvents({
+        onStepStart: (event) => {
+            console.log('Camera controller - Step started:', event.step);
+            if (event.step?.transitions) {
+                const stepDuration = event.step.duration || 1;
+                event.step.transitions.forEach((transition) => {
+                    const { state, properties, pathId } = transition;
+                    if (state === 'camera') {
+                        isInAnimatedTransition.current = true;
+                        // dispatch(setControls({ enablePan: false, enableRotate: false, enableZoom: false }));
+                        const targetSettings = {
+                            fov: properties.to.fov,
+                            near: properties.to.near,
+                            far: properties.to.far,
+                        };
+                        if (!pathId) {
+                            targetSettings.position = properties.to.position;
+                        }
+                        else {
+                            const offset = camera
+                                ? [camera.position.x, camera.position.y, camera.position.z]
+                                : [0, 0, 0];
+                            console.log(`Starting path animation with ID ${pathId} and offset`, offset);
+                            startPathAnimation(pathId, stepDuration, {
+                                offset,
+                                applyRotation: false
+                            });
+                            transformAnimationProgress.current = 0;
+                        }
+                        console.log("Animating camera to:", targetSettings, "over duration:", stepDuration);
+                        animateCamera(targetSettings, stepDuration, event.step?.ease, properties.to.target)
+                            .then(() => {
+                            isInAnimatedTransition.current = false;
+                            // dispatch(setControls({ enablePan: true, enableRotate: true, enableZoom: true, target: properties.to.target || undefined }));
+                        });
+                    }
+                });
+            }
+        },
+    });
+    // Frame loop for path animations and mouse handlers
+    useFrame((state, delta) => {
+        if (isPathAnimating()) {
+            const stillAnimating = updatePathAnimation(delta, camera);
+            if (!stillAnimating) {
+                transformAnimationProgress.current = 1;
+            }
+        }
+        else {
+            animateHandlers(state.pointer);
+        }
+    });
+    return null;
+};
+export default CameraController;

package/dist/components/Clouds.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { MaterialSettings } from '../../../core/src/types/materials';
+import type { TimeSettings } from '../../../core/src/types/scene3d';
+export interface CloudsProps {
+    visible?: boolean;
+    scale?: number;
+    height?: number;
+    speed?: number;
+    materialSettings?: MaterialSettings;
+    timeSettings: TimeSettings;
+}
+declare const Clouds: React.FC<CloudsProps>;
+export default Clouds;
+//# sourceMappingURL=Clouds.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Clouds.d.ts","sourceRoot":"","sources":["../../src/components/Clouds.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAkBpE,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwGjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Clouds.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback } from 'react';
+import * as THREE from 'three';
+import { useThree, useFrame } from '@react-three/fiber';
+import { useMaterialApplication } from '../hooks/useMaterialApplication';
+import { useSkySystem } from '../hooks/useSkySystem';
+const CLOUD_COLORS = {
+    night: new THREE.Color(0.1, 0.1, 0.2),
+    sunrise: new THREE.Color(0.8, 0.4, 0.4),
+    midday: new THREE.Color(1.0, 1.0, 1.0),
+    sunset: new THREE.Color(0.8, 0.3, 0.3),
+};
+const DEFAULT_MATERIAL = {
+    materialType: 'clouds',
+    materialVariant: 'Sky Clouds Bright',
+    u_time: 0,
+    u_resolution: [800, 600],
+    u_cameraPos: [0, 0, 0],
+    u_cloudColor: [1.0, 1.0, 1.0],
+};
+const Clouds = ({ visible = true, scale = 1, height = 400, speed = 1, materialSettings, timeSettings, }) => {
+    const [meshNode, setMeshNode] = useState(null);
+    const cloudAnimTime = useRef(0);
+    const { camera } = useThree();
+    const cloudColorRef = useRef(new THREE.Color(1, 1, 1));
+    const targetCloudColorRef = useRef(new THREE.Color(1, 1, 1));
+    const meshRefCallback = useCallback((node) => {
+        setMeshNode(node);
+    }, []);
+    const effectiveMaterialSettings = materialSettings ?? DEFAULT_MATERIAL;
+    useMaterialApplication(meshNode, effectiveMaterialSettings, true);
+    const handleTimeUpdate = useCallback((state) => {
+        const { normalizedTime, isDaytime, delta } = state;
+        if (isDaytime) {
+            if (normalizedTime <= 0.15) {
+                targetCloudColorRef.current.lerpColors(CLOUD_COLORS.night, CLOUD_COLORS.sunrise, normalizedTime / 0.15);
+            }
+            else if (normalizedTime <= 0.25) {
+                targetCloudColorRef.current.lerpColors(CLOUD_COLORS.sunrise, CLOUD_COLORS.midday, (normalizedTime - 0.15) / 0.10);
+            }
+            else if (normalizedTime <= 0.75) {
+                targetCloudColorRef.current.copy(CLOUD_COLORS.midday);
+            }
+            else if (normalizedTime <= 0.85) {
+                targetCloudColorRef.current.lerpColors(CLOUD_COLORS.midday, CLOUD_COLORS.sunset, (normalizedTime - 0.75) / 0.10);
+            }
+            else {
+                targetCloudColorRef.current.lerpColors(CLOUD_COLORS.sunset, CLOUD_COLORS.night, (normalizedTime - 0.85) / 0.15);
+            }
+        }
+        else {
+            targetCloudColorRef.current.copy(CLOUD_COLORS.night);
+        }
+        const colorLerpSpeed = Math.min(1, 2.0 * (delta || 0.016));
+        cloudColorRef.current.lerp(targetCloudColorRef.current, colorLerpSpeed);
+    }, []);
+    const { sunDirection } = useSkySystem({
+        timeSettings,
+        onTimeUpdate: handleTimeUpdate,
+        enabled: visible,
+    });
+    useFrame(() => {
+        if (!visible || !meshNode?.material)
+            return;
+        const material = meshNode.material;
+        const uniforms = material?.uniforms;
+        if (!uniforms)
+            return;
+        cloudAnimTime.current += 0.02 * speed;
+        if (uniforms.u_time)
+            uniforms.u_time.value = cloudAnimTime.current;
+        if (uniforms.u_cameraPos) {
+            uniforms.u_cameraPos.value?.copy
+                ? uniforms.u_cameraPos.value.copy(camera.position)
+                : (uniforms.u_cameraPos.value = camera.position.clone());
+        }
+        if (uniforms.u_cloudColor) {
+            uniforms.u_cloudColor.value?.copy
+                ? uniforms.u_cloudColor.value.copy(cloudColorRef.current)
+                : (uniforms.u_cloudColor.value = cloudColorRef.current.clone());
+        }
+        if (uniforms.u_resolution) {
+            uniforms.u_resolution.value?.set
+                ? uniforms.u_resolution.value.set(window.innerWidth, window.innerHeight)
+                : (uniforms.u_resolution.value = new THREE.Vector2(window.innerWidth, window.innerHeight));
+        }
+        if (uniforms.u_sunPosition && sunDirection) {
+            uniforms.u_sunPosition.value?.copy
+                ? uniforms.u_sunPosition.value.copy(sunDirection)
+                : (uniforms.u_sunPosition.value = sunDirection.clone());
+        }
+    });
+    if (!visible)
+        return null;
+    return (_jsx("mesh", { ref: meshRefCallback, name: "SkyClouds", userData: { id: '3drise-clouds' }, position: [0, height, 0], rotation: [Math.PI / 2, 0, 0], scale: scale, renderOrder: -1, frustumCulled: false, children: _jsx("planeGeometry", { args: [2, 2] }) }));
+};
+export default Clouds;

package/dist/components/CreatedObject.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { CreatedObjectSettings } from "@ntalmagor/3drize-core";
+import { Object3D } from "three";
+interface CreatedObjectProps {
+    createdObject: CreatedObjectSettings;
+    children: React.ReactNode;
+    shouldApply3driseMaterial?: boolean;
+    onObjectReady?: (object: CreatedObjectSettings, ref: Object3D) => void;
+}
+declare const CreatedObject: React.FC<CreatedObjectProps>;
+export default CreatedObject;
+//# sourceMappingURL=CreatedObject.d.ts.map

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

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

package/dist/components/CreatedObject.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useState, memo } from "react";
+import { useDispatch } from "react-redux";
+import { DEFAULT_EDGES_SETTINGS } from "@ntalmagor/3drize-core";
+import { useMaterialApplication } from "../hooks/useMaterialApplication";
+import { useTransformControls } from "../hooks/useTransformControls";
+import { RigidBody } from '@react-three/rapier';
+import { cameraManager } from "../utils/CameraSingleton";
+import AnimatedObject from "./AnimatedObject";
+import { useFrameEffects } from "../hooks/useFrameEffects";
+// import { useSceneClick } from "~/contextProviders/SceneClickContext";
+import { useObjectEdges } from "../hooks/useObjectEdges";
+const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial = true, onObjectReady, }) => {
+    const isSelected = false;
+    // const isSelected = useObjectSelection(createdObject.id);
+    // const { handleObjectClick: contextHandleObjectClick } = useSceneClick();
+    const dispatch = useDispatch();
+    const meshRef = useRef(null);
+    const transformRef = useRef(null);
+    const baseColorRef = useRef(("color" in createdObject.materialSettings && createdObject.materialSettings.color) || '#ffffff');
+    // const [hovered, setHovered] = useState(false);
+    const [animatedTransform, setAnimatedTransform] = useState({
+        position: createdObject.meshSettings.position,
+        rotation: createdObject.meshSettings.rotation,
+        scale: createdObject.meshSettings.scale,
+    });
+    // Initialize transform controls
+    const { controllersRef } = useTransformControls();
+    const { handlePointerEnter, handlePointerLeave, hovered } = useFrameEffects(isSelected);
+    const [mountedObject, setMountedObject] = useState(null);
+    useObjectEdges(meshRef.current, createdObject.edgesSettings ?? DEFAULT_EDGES_SETTINGS);
+    // useObjectGenerativeEffects(mountedObject, createdObject.effects);
+    useMaterialApplication(meshRef.current, createdObject.materialSettings, shouldApply3driseMaterial);
+    const anchoredPosition = cameraManager.getAnchorPosition(createdObject.meshSettings.anchor?.anchor || 'center', 0, createdObject.meshSettings.anchor?.offset || { y: 0, x: 0, z: 0 }, createdObject.meshSettings.anchor?.padding || 0);
+    useEffect(() => {
+        if (meshRef.current) {
+            meshRef.current.userData.id = createdObject.id;
+            onObjectReady && onObjectReady(createdObject, meshRef.current);
+        }
+        return () => {
+        };
+    }, [meshRef.current]);
+    useEffect(() => {
+        if (transformRef.current && isSelected) {
+            controllersRef.current.set(createdObject.id.toString(), transformRef.current);
+            // console.log('Transform controls registered for object:', createdObject.id, createdObject.name);
+        }
+        return () => {
+            controllersRef.current.delete(createdObject.id.toString());
+            // console.log('Transform controls unregistered for object:', createdObject.id, createdObject.name);
+        };
+    }, [createdObject.id, isSelected]);
+    useEffect(() => {
+        setAnimatedTransform({
+            position: createdObject.meshSettings.position,
+            rotation: createdObject.meshSettings.rotation,
+            scale: createdObject.meshSettings.scale,
+        });
+    }, [createdObject.meshSettings.position, createdObject.meshSettings.rotation, createdObject.meshSettings.scale]);
+    // const [noiseTexture, setNoiseTexture] = useState<Texture | null>(null);
+    const isTransforming = useRef(false);
+    // useMaterialApplication(obj.object, createdObject.materialSettings);
+    // Check if this should use the new MaterialLibrary system for Drei materials
+    // console.log(object)
+    const handleObjectEnter = (e) => {
+        // console.log(e.eventObject)
+        // Only handle if this is the actual mesh group, not a child
+        if (e.eventObject !== meshRef.current)
+            return;
+        if (createdObject.type === 'particles' || createdObject.type === 'gallery')
+            return;
+        e.stopPropagation();
+        handlePointerEnter(e);
+    };
+    const handleObjectLeave = (e) => {
+        // Only handle if this is the actual mesh group, not a child
+        if (e.eventObject !== meshRef.current)
+            return;
+        if (createdObject.type === 'particles' || createdObject.type === 'gallery')
+            return;
+        handlePointerLeave();
+        e.stopPropagation();
+    };
+    const handleObjectClick = (e) => {
+        console.log('[1] CreatedObject.handleObjectClick:', createdObject.id, createdObject.meshSettings?.name);
+        if (createdObject.type === 'gallery') {
+            e.stopPropagation();
+            return;
+        }
+        // contextHandleObjectClick(
+        //   createdObject,
+        //   meshRef.current,
+        //   [0, 0, 0],
+        //   e
+        // );
+    };
+    const handleTransformStart = () => {
+        console.log('Transform started for object:', createdObject.id);
+        isTransforming.current = true;
+    };
+    const handleTransformEnd = () => {
+        isTransforming.current = false;
+        if (meshRef.current) {
+            console.log('Transform ended for object:', createdObject.id);
+            const updatedSettings = {
+                ...createdObject,
+                meshSettings: {
+                    ...createdObject.meshSettings,
+                    position: [meshRef.current.position.x, meshRef.current.position.y, meshRef.current.position.z],
+                    rotation: [meshRef.current.rotation.x, meshRef.current.rotation.y, meshRef.current.rotation.z],
+                    scale: [meshRef.current.scale.x, meshRef.current.scale.y, meshRef.current.scale.z]
+                }
+            };
+            // Here you could update the Redux store with final position/rotation/scale
+            // dispatch(updateObjectSettingsById(updatedSettings))
+            // updateObjectSettings && updateObjectSettings();
+        }
+    };
+    const anchorEnabled = createdObject.meshSettings.anchor && createdObject.meshSettings.anchor.enabled;
+    // console.log("createdObject.meshSettings", createdObject.meshSettings)
+    // console.log("Rendered CreatedObject:", createdObject.rigidBodySettings);
+    const stateKey = createdObject.meshSettings.name;
+    // console.log({stateKey})
+    return (_jsx(AnimatedObject
+    // animationId={createdObject.animationId || ''}
+    , { 
+        // animationId={createdObject.animationId || ''}
+        stateKey: createdObject.id, transitionSettings: {
+            ...animatedTransform,
+            position: anchorEnabled ? [anchoredPosition.x, anchoredPosition.y, anchoredPosition.z] : animatedTransform.position
+        }, createdObject: createdObject, 
+        // animateMaterial={!useDreiMaterials}
+        parentRef: meshRef, visible: createdObject.meshSettings.visible, onClick: handleObjectClick, onPointerEnter: handleObjectEnter, onPointerLeave: e => handleObjectLeave(e), children: createdObject.rigidBodySettings?.enabled ? (_jsx(RigidBody, { type: createdObject.rigidBodySettings?.type || 'dynamic', mass: createdObject.rigidBodySettings?.mass || 1, colliders: createdObject.userData?.type === 'plane'
+                ? 'cuboid' // Force box collider for planes
+                : undefined // Auto-detect for others
+            , friction: createdObject.rigidBodySettings?.friction, restitution: createdObject.rigidBodySettings?.restitution, gravityScale: createdObject.rigidBodySettings?.gravityScale ?? 1, linearDamping: createdObject.rigidBodySettings?.linearDamping ?? 0.01, angularDamping: createdObject.rigidBodySettings?.angularDamping ?? 0.01, children: children })) : (children) }));
+});
+CreatedObject.displayName = 'CreatedObject';
+export default CreatedObject;

package/dist/components/CustomPrimitive.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { type CameraState, type CreatedObjectSettings } from "@ntalmagor/3drize-core";
+import { Object3D } from "three";
+interface CustomPrimitiveProps {
+    createdObject: CreatedObjectSettings;
+    cameraSettings: CameraState;
+    updateObjectSettings?: (updatedSettings: CreatedObjectSettings) => void;
+    onObjectReady?: (object: CreatedObjectSettings, ref: Object3D) => void;
+}
+declare const CustomPrimitive: React.FC<CustomPrimitiveProps>;
+export default CustomPrimitive;
+//# sourceMappingURL=CustomPrimitive.d.ts.map

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

@@ -0,0 +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"}