Double click updates (#379)

src/entity-transform-handler.ts

@@ -46,7 +46,7 @@ class EntityTransformHandler implements TransformHandler {
         });
 
         events.on('camera.focalPointPicked', (details: { splat: Splat, position: Vec3 }) => {
-            if (this.splat) {
+            if (this.splat && ['move', 'rotate', 'scale'].includes(this.events.invoke('tool.active'))) {
                 const pivot = events.invoke('pivot') as Pivot;
                 const newt = new Transform(details.position, pivot.transform.rotation, pivot.transform.scale);
                 const op = new PlacePivotOp({ pivot, oldt: pivot.transform.clone(), newt });

src/splats-transform-handler.ts

@@ -56,7 +56,7 @@ class SplatsTransformHandler implements TransformHandler {
         });
 
         events.on('camera.focalPointPicked', (details: { splat: Splat, position: Vec3 }) => {
-            if (this.splat) {
+            if (this.splat && ['move', 'rotate', 'scale'].includes(this.events.invoke('tool.active'))) {
                 const pivot = events.invoke('pivot') as Pivot;
                 const oldt = pivot.transform.clone();
                 const newt = new Transform(details.position, pivot.transform.rotation, pivot.transform.scale);

src/tools/move-tool.ts

@@ -1,7 +1,6 @@
 import { TranslateGizmo } from 'playcanvas';
 
 import { TransformTool } from './transform-tool';
-import { EditHistory } from '../edit-history';
 import { Events } from '../events';
 import { Scene } from '../scene';
 

src/tools/rotate-tool.ts

@@ -1,7 +1,6 @@
 import { RotateGizmo } from 'playcanvas';
 
 import { TransformTool } from './transform-tool';
-import { EditHistory } from '../edit-history';
 import { Events } from '../events';
 import { Scene } from '../scene';
 

src/tools/scale-tool.ts

@@ -1,7 +1,6 @@
 import { ScaleGizmo } from 'playcanvas';
 
 import { TransformTool } from './transform-tool';
-import { EditHistory } from '../edit-history';
 import { Events } from '../events';
 import { Scene } from '../scene';
 

src/ui/editor.ts

@@ -1,12 +1,12 @@
 import { Container, Label } from 'pcui';
-import { Mat4 } from 'playcanvas';
+import { Mat4, Vec3 } from 'playcanvas';
 
 import { DataPanel } from './data-panel';
 import { Events } from '../events';
 import { BottomToolbar } from './bottom-toolbar';
 import { CameraPanel } from './camera-panel';
 import { ColorPanel } from './color-panel';
-import { localizeInit } from './localization';
+import { localize, localizeInit } from './localization';
 import { Menu } from './menu';
 import { ModeToggle } from './mode-toggle';
 import logo from './playcanvas-logo.png';
@@ -64,12 +64,38 @@ class EditorUI {
         const canvas = document.createElement('canvas');
         canvas.id = 'canvas';
 
-        // filename label
+        // app label
         const appLabel = new Label({
             id: 'app-label',
             text: `SUPERSPLAT v${version}`
         });
 
+        // cursor label
+        const cursorLabel = new Label({
+            id: 'cursor-label'
+        });
+
+        let fullprecision = '';
+
+        events.on('camera.focalPointPicked', (details: { position: Vec3 }) => {
+            cursorLabel.text = `${details.position.x.toFixed(2)}, ${details.position.y.toFixed(2)}, ${details.position.z.toFixed(2)}`;
+            fullprecision = `${details.position.x}, ${details.position.y}, ${details.position.z}`;
+        });
+
+        ['pointerdown', 'pointerup', 'pointermove', 'wheel', 'dblclick'].forEach((eventName) => {
+            cursorLabel.dom.addEventListener(eventName, (event: Event) => event.stopPropagation());
+        });
+
+        cursorLabel.dom.addEventListener('pointerdown', () => {
+            navigator.clipboard.writeText(fullprecision);
+
+            const orig = cursorLabel.text;
+            cursorLabel.text = localize('cursor.copied');
+            setTimeout(() => {
+                cursorLabel.text = orig;
+            }, 1000);
+        });
+
         // canvas container
         const canvasContainer = new Container({
             id: 'canvas-container'
@@ -96,6 +122,7 @@ class EditorUI {
 
         canvasContainer.dom.appendChild(canvas);
         canvasContainer.append(appLabel);
+        canvasContainer.append(cursorLabel);
         canvasContainer.append(toolsContainer);
         canvasContainer.append(scenePanel);
         canvasContainer.append(viewPanel);
@@ -127,6 +154,8 @@ class EditorUI {
 
         editorContainer.append(mainContainer);
 
+        tooltips.register(cursorLabel, localize('cursor.click-to-copy'), 'top');
+
         // message popup
         const popup = new Popup(tooltips);
 

src/ui/localization.ts

@@ -182,7 +182,11 @@ const localizeInit = () => {
                     'export.pose-camera': '1. Kamera Pose',
                     'export.fov': 'Sichtfeld (FoV)',
                     'export.background-color': 'Hintergrund',
-                    'export.filename': 'Dateiname'
+                    'export.filename': 'Dateiname',
+
+                    // cursor
+                    'cursor.click-to-copy': 'Klicken zum kopieren',
+                    'cursor.copied': 'Kopiert!'
                 }
             },
             en: {
@@ -368,6 +372,10 @@ const localizeInit = () => {
                     'export.background-color': 'Background',
                     'export.filename': 'Filename',
 
+                    // cursor
+                    'cursor.click-to-copy': 'Click to copy',
+                    'cursor.copied': 'Copied!',
+
                     // Publish Settings Dialog
                     'publish.header': 'PUBLISH SETTINGS',
                     'publish.ok': 'Publish',
@@ -553,7 +561,11 @@ const localizeInit = () => {
                     'export.pose-camera': '1ère pose de caméra',
                     'export.fov': 'Champ de vision',
                     'export.background-color': 'Arrière-plan',
-                    'export.filename': 'Nom de fichier'
+                    'export.filename': 'Nom de fichier',
+
+                    // cursor
+                    'cursor.click-to-copy': 'Cliquez pour copier',
+                    'cursor.copied': 'Copié!'
                 }
             },
             ja: {
@@ -727,7 +739,11 @@ const localizeInit = () => {
                     'export.pose-camera': '1番目のカメラポーズ',
                     'export.fov': '視野角',
                     'export.background-color': '背景色',
-                    'export.filename': 'ファイル名'
+                    'export.filename': 'ファイル名',
+
+                    // cursor
+                    'cursor.click-to-copy': 'クリックしてコピー',
+                    'cursor.copied': 'コピーしました！'
                 }
             },
             ko: {
@@ -901,7 +917,11 @@ const localizeInit = () => {
                     'export.pose-camera': '1번째 카메라 포즈',
                     'export.fov': '시야각',
                     'export.background-color': '배경색',
-                    'export.filename': '파일 이름'
+                    'export.filename': '파일 이름',
+
+                    // cursor
+                    'cursor.click-to-copy': '클릭하여 복사',
+                    'cursor.copied': '복사됨!'
                 }
             },
             'zh-CN': {
@@ -1075,7 +1095,11 @@ const localizeInit = () => {
                     'export.pose-camera': '第一个相机姿势',
                     'export.fov': '视野角',
                     'export.background-color': '背景颜色',
-                    'export.filename': '文件名'
+                    'export.filename': '文件名',
+
+                    // cursor
+                    'cursor.click-to-copy': '点击复制',
+                    'cursor.copied': '已复制!'
                 }
             }
         },

src/ui/scss/style.scss

@@ -118,6 +118,26 @@ body {
     text-shadow: 1px 1px 4px black;
 }
 
+#cursor-label {
+    position: absolute;
+    left: 12px;
+    bottom: 12px;
+    color: $text-primary;
+    text-shadow: 1px 1px 4px black;
+
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid transparent;
+
+    cursor: pointer;
+
+    &:hover {
+
+        border: 1px solid $clr-hilight;
+        background-color: rgba(0, 0, 0, 0.25);
+    }
+}
+
 .select-svg {
     display: none;
     position: absolute;