@fps-games/editor 0.2.1-beta.1 → 0.2.1-beta.3

package/node_modules/@fps-games/editor-babylon/dist/transform-gizmo-controller.js

@@ -19,6 +19,24 @@ export function resolveBabylonTransformHandleConstraint(tool, handleKey) {
     return null;
 }
 const LARGE_SELECTION_GIZMO_LIMIT = 200;
+const EDITOR_TRANSFORM_GIZMO_SCALE_RATIO = 0.9;
+const FREE_MOVE_HANDLE_DIAMETER = 0.018;
+const TRANSFORM_GIZMO_DIAGNOSTIC_PREFIX = '[fps-editor:gizmo]';
+function isTransformGizmoDiagnosticEnabled() {
+    const scope = globalThis;
+    if (scope.__FPS_EDITOR_DEBUG_TRANSFORM_GIZMO === true)
+        return true;
+    const search = scope.location?.search;
+    return typeof search === 'string' && /(?:^|[?&])debugGizmo=(?:1|true)(?:&|$)/.test(search);
+}
+function logTransformGizmoDiagnostic(event, details = {}) {
+    if (!isTransformGizmoDiagnosticEnabled())
+        return;
+    const timestamp = typeof performance !== 'undefined' && typeof performance.now === 'function'
+        ? Number(performance.now().toFixed(2))
+        : Date.now();
+    console.info(TRANSFORM_GIZMO_DIAGNOSTIC_PREFIX, event, { timestamp, ...details });
+}
 export function createBabylonTransformGizmoController(options) {
     const GizmoManagerCtor = options.babylon.GizmoManager;
     if (!GizmoManagerCtor)
@@ -40,15 +58,44 @@ export function createBabylonTransformGizmoController(options) {
     let placementMarker = null;
     let placementMarkerMaterial = null;
     let manager = null;
+    let utilityLayer = null;
+    let keepDepthUtilityLayer = null;
     let managerPrewarmed = false;
+    let materialPrewarmPromise = null;
+    let attachmentDiagnosticSequence = 0;
     const canvas = options.scene.getEngine?.().getRenderingCanvas?.();
     function ensureGizmoManager() {
-        if (manager)
+        if (manager) {
+            logTransformGizmoDiagnostic('manager.reuse', {
+                tool,
+                selectedNodeId,
+                selectedNodeIds: [...selectedNodeIds],
+            });
             return manager;
-        manager = new GizmoManagerCtor(options.scene);
+        }
+        const startedAt = typeof performance !== 'undefined' ? performance.now() : Date.now();
+        const UtilityLayerRendererCtor = options.babylon.UtilityLayerRenderer;
+        if (UtilityLayerRendererCtor) {
+            utilityLayer = new UtilityLayerRendererCtor(options.scene);
+            keepDepthUtilityLayer = new UtilityLayerRendererCtor(options.scene);
+            try {
+                keepDepthUtilityLayer.utilityLayerScene.autoClearDepthAndStencil = false;
+            }
+            catch { }
+            manager = new GizmoManagerCtor(options.scene, 1, utilityLayer, keepDepthUtilityLayer);
+        }
+        else {
+            manager = new GizmoManagerCtor(options.scene);
+        }
         manager.usePointerToAttachGizmos = false;
         manager.clearGizmoOnEmptyPointerEvent = false;
         manager.boundingBoxGizmoEnabled = false;
+        applyGizmoPresentation(manager);
+        logTransformGizmoDiagnostic('manager.created', {
+            durationMs: Number(((typeof performance !== 'undefined' ? performance.now() : Date.now()) - startedAt).toFixed(2)),
+            editorOwnedUtilityLayers: !!UtilityLayerRendererCtor,
+            sceneActiveCamera: options.scene.activeCamera?.name ?? null,
+        });
         return manager;
     }
     function activeTransformTool() {
@@ -213,7 +260,30 @@ export function createBabylonTransformGizmoController(options) {
             catch { }
         }
     }
+    function applyGizmoPresentation(activeManager) {
+        try {
+            activeManager.scaleRatio = EDITOR_TRANSFORM_GIZMO_SCALE_RATIO;
+        }
+        catch { }
+        for (const gizmo of [
+            activeManager.gizmos?.positionGizmo,
+            activeManager.gizmos?.rotationGizmo,
+            activeManager.gizmos?.scaleGizmo,
+        ]) {
+            if (!gizmo)
+                continue;
+            try {
+                gizmo.scaleRatio = EDITOR_TRANSFORM_GIZMO_SCALE_RATIO;
+            }
+            catch { }
+            try {
+                gizmo.updateScale = true;
+            }
+            catch { }
+        }
+    }
     function attachCurrentSelection() {
+        const startedAt = typeof performance !== 'undefined' ? performance.now() : Date.now();
         clearDragObservers();
         const activeTool = activeTransformTool();
         if (!activeTool) {
@@ -227,6 +297,12 @@ export function createBabylonTransformGizmoController(options) {
                 catch { }
             }
             updateFreeMoveHandle();
+            logTransformGizmoDiagnostic('attachment.skipped', {
+                reason: 'select-tool',
+                tool,
+                selectedNodeId,
+                selectedNodeIds: [...selectedNodeIds],
+            });
             return;
         }
         const activeManager = ensureGizmoManager();
@@ -238,27 +314,95 @@ export function createBabylonTransformGizmoController(options) {
         activeManager.positionGizmoEnabled = activeTool === 'move';
         activeManager.rotationGizmoEnabled = activeTool === 'rotate';
         activeManager.scaleGizmoEnabled = activeTool === 'scale';
+        applyGizmoPresentation(activeManager);
         applyHandlePreference();
         applySpacePreference();
         registerDragObservers();
         let target = null;
-        target = attachNativeTransformProxy(getCurrentTransformTargetIds(), activeTool, constraint);
+        const requestedTargetIds = getCurrentTransformTargetIds();
+        const attachableTargetIds = requestedTargetIds.filter(nodeId => !!options.projection.getAttachableRoot(nodeId));
+        target = attachNativeTransformProxy(requestedTargetIds, activeTool, constraint);
+        let attachError = null;
         try {
             activeManager.attachToNode?.(target ?? null);
         }
         catch (error) {
+            attachError = error;
             options.logger?.warn?.('[BabylonTransformGizmoController] failed to attach gizmo', error);
         }
         updateFreeMoveHandle();
+        const activeGizmo = activeTool === 'move'
+            ? activeManager.gizmos?.positionGizmo
+            : activeTool === 'rotate'
+                ? activeManager.gizmos?.rotationGizmo
+                : activeManager.gizmos?.scaleGizmo;
+        const diagnosticSequence = ++attachmentDiagnosticSequence;
+        const collectRenderDetails = () => {
+            const rootMesh = activeGizmo?._rootMesh ?? activeGizmo?.rootMesh ?? null;
+            const absolutePosition = rootMesh?.getAbsolutePosition?.() ?? rootMesh?.absolutePosition ?? rootMesh?.position ?? null;
+            const scaling = rootMesh?.scaling ?? null;
+            return {
+                diagnosticSequence,
+                gizmoRootEnabled: rootMesh?.isEnabled?.() ?? null,
+                gizmoRootVisible: rootMesh?.isVisible ?? null,
+                gizmoRootVisibility: rootMesh?.visibility ?? null,
+                gizmoRootChildCount: rootMesh?.getChildMeshes?.(false)?.length ?? null,
+                gizmoRootPosition: absolutePosition
+                    ? { x: absolutePosition.x, y: absolutePosition.y, z: absolutePosition.z }
+                    : null,
+                gizmoRootScaling: scaling ? { x: scaling.x, y: scaling.y, z: scaling.z } : null,
+                gizmoScaleRatio: activeGizmo?.scaleRatio ?? null,
+                utilityLayerMeshCount: utilityLayer?.utilityLayerScene?.meshes?.length ?? null,
+                utilityLayerActiveMeshCount: utilityLayer?.utilityLayerScene?.getActiveMeshes?.()?.length ?? null,
+                utilityLayerRenderId: utilityLayer?.utilityLayerScene?.getRenderId?.() ?? null,
+                sceneRenderId: options.scene.getRenderId?.() ?? null,
+            };
+        };
+        logTransformGizmoDiagnostic('attachment.result', {
+            durationMs: Number(((typeof performance !== 'undefined' ? performance.now() : Date.now()) - startedAt).toFixed(2)),
+            tool,
+            space,
+            constraint,
+            selectedNodeId,
+            selectedNodeIds: [...selectedNodeIds],
+            requestedTargetIds,
+            attachableTargetIds,
+            targetCreated: !!target,
+            targetName: target?.name ?? null,
+            managerAttachedNode: activeManager.attachedNode?.name ?? activeManager._attachedNode?.name ?? null,
+            gizmoAttachedNode: activeGizmo?.attachedNode?.name ?? null,
+            gizmoAttachedMesh: activeGizmo?.attachedMesh?.name ?? null,
+            positionEnabled: activeManager.positionGizmoEnabled === true,
+            rotationEnabled: activeManager.rotationGizmoEnabled === true,
+            scaleEnabled: activeManager.scaleGizmoEnabled === true,
+            sceneActiveCamera: options.scene.activeCamera?.name ?? null,
+            utilityLayerActiveCamera: utilityLayer?.utilityLayerScene?.activeCamera?.name ?? null,
+            utilityLayerShouldRender: utilityLayer?.shouldRender ?? null,
+            attachError: attachError instanceof Error ? attachError.message : attachError ? String(attachError) : null,
+            ...collectRenderDetails(),
+        });
+        if (isTransformGizmoDiagnosticEnabled()) {
+            utilityLayer?.utilityLayerScene?.onAfterRenderObservable?.addOnce?.(() => {
+                logTransformGizmoDiagnostic('utility-layer.rendered', {
+                    tool,
+                    selectedNodeId,
+                    ...collectRenderDetails(),
+                });
+            });
+        }
     }
     function prewarmGizmoManager(activeManager) {
-        if (managerPrewarmed)
+        if (managerPrewarmed) {
+            logTransformGizmoDiagnostic('manager.prewarm.reuse', { tool });
             return;
+        }
+        const startedAt = typeof performance !== 'undefined' ? performance.now() : Date.now();
         managerPrewarmed = true;
         try {
             activeManager.positionGizmoEnabled = true;
             activeManager.rotationGizmoEnabled = true;
             activeManager.scaleGizmoEnabled = true;
+            applyGizmoPresentation(activeManager);
             activeManager.attachToNode?.(null);
             activeManager.positionGizmoEnabled = false;
             activeManager.rotationGizmoEnabled = false;
@@ -267,6 +411,38 @@ export function createBabylonTransformGizmoController(options) {
         catch (error) {
             options.logger?.warn?.('[BabylonTransformGizmoController] failed to prewarm gizmo manager', error);
         }
+        logTransformGizmoDiagnostic('manager.prewarm.complete', {
+            durationMs: Number(((typeof performance !== 'undefined' ? performance.now() : Date.now()) - startedAt).toFixed(2)),
+            hasPositionGizmo: !!activeManager.gizmos?.positionGizmo,
+            hasRotationGizmo: !!activeManager.gizmos?.rotationGizmo,
+            hasScaleGizmo: !!activeManager.gizmos?.scaleGizmo,
+        });
+    }
+    function prewarmGizmoMaterials() {
+        if (materialPrewarmPromise)
+            return materialPrewarmPromise;
+        const startedAt = typeof performance !== 'undefined' ? performance.now() : Date.now();
+        const targets = new Map();
+        for (const layer of [utilityLayer, keepDepthUtilityLayer]) {
+            for (const mesh of layer?.utilityLayerScene?.meshes ?? []) {
+                const material = mesh?.material;
+                if (!material || typeof material.forceCompilationAsync !== 'function' || targets.has(material))
+                    continue;
+                targets.set(material, mesh);
+            }
+        }
+        logTransformGizmoDiagnostic('material-prewarm.started', {
+            targetCount: targets.size,
+        });
+        materialPrewarmPromise = Promise.allSettled([...targets].map(([material, mesh]) => material.forceCompilationAsync(mesh))).then((results) => {
+            const failureCount = results.filter(result => result.status === 'rejected').length;
+            logTransformGizmoDiagnostic('material-prewarm.completed', {
+                durationMs: Number(((typeof performance !== 'undefined' ? performance.now() : Date.now()) - startedAt).toFixed(2)),
+                targetCount: targets.size,
+                failureCount,
+            });
+        });
+        return materialPrewarmPromise;
     }
     function beginDrag(activeConstraint = constraint, handleKey) {
         if (activeDrag)
@@ -332,8 +508,9 @@ export function createBabylonTransformGizmoController(options) {
         const validTargetIds = targetIds.filter(nodeId => !!options.projection.getAttachableRoot(nodeId));
         if (validTargetIds.length === 0)
             return null;
-        const pivot = validTargetIds.length > 1
+        const pivot = (activeTool === 'move' || validTargetIds.length > 1)
             ? options.projection.getSelectionPivot(validTargetIds)
+                ?? createSingleTargetPivot(validTargetIds[0])
             : createSingleTargetPivot(validTargetIds[0]);
         if (!pivot)
             return null;
@@ -402,8 +579,11 @@ export function createBabylonTransformGizmoController(options) {
                 duplicate,
             });
         }
-        const pivot = validTargetIds.length > 1
-            ? options.projection.getSelectionPivot(validTargetIds)
+        const pivot = (activeTool === 'move' || validTargetIds.length > 1)
+            ? options.projection.getSelectionPivot(validTargetIds) ?? {
+                mode: 'selection-center',
+                position: readEditorTransformPosition(beforeTransforms[validTargetIds[0]]),
+            }
             : {
                 mode: 'selection-center',
                 position: readEditorTransformPosition(beforeTransforms[validTargetIds[0]]),
@@ -994,7 +1174,7 @@ export function createBabylonTransformGizmoController(options) {
         const utilityScene = activeManager?.utilityLayer?.utilityLayerScene;
         if (!MeshBuilder?.CreateSphere || !utilityScene)
             return null;
-        freeMoveHandle = MeshBuilder.CreateSphere('editor.transform.freeMoveHandle', { diameter: 0.22, segments: 12 }, utilityScene);
+        freeMoveHandle = MeshBuilder.CreateSphere('editor.transform.freeMoveHandle', { diameter: FREE_MOVE_HANDLE_DIAMETER, segments: 16 }, utilityScene);
         freeMoveHandle.metadata = {
             ...(freeMoveHandle.metadata ?? {}),
             editorProjectionHelper: true,
@@ -1003,9 +1183,10 @@ export function createBabylonTransformGizmoController(options) {
         freeMoveHandle.isPickable = true;
         if (StandardMaterial && Color3) {
             freeMoveHandleMaterial = new StandardMaterial('editor.transform.freeMoveHandle.material', utilityScene);
-            freeMoveHandleMaterial.diffuseColor = new Color3(1, 0.82, 0.28);
-            freeMoveHandleMaterial.emissiveColor = new Color3(1, 0.68, 0.18);
-            freeMoveHandleMaterial.specularColor = new Color3(0.2, 0.18, 0.08);
+            freeMoveHandleMaterial.diffuseColor = new Color3(0.94, 0.96, 0.98);
+            freeMoveHandleMaterial.emissiveColor = new Color3(0.88, 0.91, 0.95);
+            freeMoveHandleMaterial.specularColor = new Color3(0.08, 0.1, 0.12);
+            freeMoveHandleMaterial.disableLighting = true;
             freeMoveHandle.material = freeMoveHandleMaterial;
         }
         setFreeMoveHandleVisible(false);
@@ -1025,7 +1206,17 @@ export function createBabylonTransformGizmoController(options) {
         const Vector3 = options.babylon.Vector3;
         if (!handle || !Vector3)
             return;
-        handle.position = new Vector3(position.x, position.y, position.z);
+        const gizmoRoot = manager?.gizmos?.positionGizmo?.xGizmo?._rootMesh
+            ?? manager?.gizmos?.positionGizmo?.xGizmo?.rootMesh
+            ?? null;
+        if (gizmoRoot) {
+            handle.parent = gizmoRoot;
+            handle.position = new Vector3(0, 0, 0);
+        }
+        else {
+            handle.parent = null;
+            handle.position = new Vector3(position.x, position.y, position.z);
+        }
         setFreeMoveHandleVisible(true);
     }
     function updateFreeMoveHandle() {
@@ -1038,9 +1229,7 @@ export function createBabylonTransformGizmoController(options) {
             setFreeMoveHandleVisible(false);
             return;
         }
-        const pivot = targetIds.length > 1
-            ? options.projection.getSelectionPivot(targetIds)
-            : null;
+        const pivot = options.projection.getSelectionPivot(targetIds);
         const position = pivot?.position
             ?? (targetIds[0] ? createTransformPivot(options.projection.readNodeTransform(targetIds[0]))?.position : null);
         if (!position) {
@@ -1118,9 +1307,31 @@ export function createBabylonTransformGizmoController(options) {
                 constraint,
             };
         },
+        async prepare() {
+            if (disposed)
+                return;
+            logTransformGizmoDiagnostic('prepare.requested', {
+                tool,
+                selectedNodeId,
+                selectedNodeIds: [...selectedNodeIds],
+            });
+            const activeManager = ensureGizmoManager();
+            if (!activeManager)
+                return;
+            prewarmGizmoManager(activeManager);
+            attachCurrentSelection();
+            await prewarmGizmoMaterials();
+        },
         setTool(nextTool) {
             if (disposed)
                 return;
+            logTransformGizmoDiagnostic('tool.requested', {
+                previousTool: tool,
+                nextTool,
+                repeated: tool === nextTool,
+                selectedNodeId,
+                selectedNodeIds: [...selectedNodeIds],
+            });
             if (tool === nextTool) {
                 if (!activeDrag)
                     attachCurrentSelection();
@@ -1186,6 +1397,13 @@ export function createBabylonTransformGizmoController(options) {
                 ? [selection.activeId].filter((id) => !!id)
                 : [...selection.selectedIds];
             const nextActiveId = selection.activeId;
+            logTransformGizmoDiagnostic('selection.requested', {
+                previousActiveId: selectedNodeId,
+                previousSelectedIds: [...selectedNodeIds],
+                nextActiveId,
+                nextSelectedIds: [...nextNodeIds],
+                tool,
+            });
             if (selectedNodeId === nextActiveId
                 && selectedNodeIds.length === nextNodeIds.length
                 && selectedNodeIds.every((id, index) => id === nextNodeIds[index])) {
@@ -1201,6 +1419,11 @@ export function createBabylonTransformGizmoController(options) {
                 return;
             if (activeDrag)
                 return;
+            logTransformGizmoDiagnostic('selection.refresh', {
+                selectedNodeId,
+                selectedNodeIds: [...selectedNodeIds],
+                tool,
+            });
             attachCurrentSelection();
         },
         isGizmoDragCandidate,
@@ -1237,6 +1460,14 @@ export function createBabylonTransformGizmoController(options) {
                 manager?.dispose?.();
             }
             catch { }
+            try {
+                utilityLayer?.dispose?.();
+            }
+            catch { }
+            try {
+                keepDepthUtilityLayer?.dispose?.();
+            }
+            catch { }
             try {
                 pivotProxy?.dispose?.();
             }
@@ -1263,7 +1494,10 @@ export function createBabylonTransformGizmoController(options) {
             placementMarker = null;
             placementMarkerMaterial = null;
             manager = null;
+            utilityLayer = null;
+            keepDepthUtilityLayer = null;
             managerPrewarmed = false;
+            materialPrewarmPromise = null;
             disposed = true;
         },
     };