UI refresh

package.json

@@ -1,6 +1,6 @@
 {
     "name": "supersplat",
-    "version": "0.25.2",
+    "version": "1.0.0",
     "author": "PlayCanvas<[email protected]>",
     "homepage": "https://playcanvas.com/supersplat/editor",
     "description": "3D Gaussian Splat Editor",
@@ -51,7 +51,7 @@
         "test": "jest"
     },
     "devDependencies": {
-        "@playcanvas/eslint-config": "^1.7.1",
+        "@playcanvas/eslint-config": "^1.7.4",
         "@playcanvas/pcui": "^4.4.0",
         "@rollup/plugin-alias": "^5.1.0",
         "@rollup/plugin-image": "^3.0.3",
@@ -63,13 +63,15 @@
         "@types/wicg-file-system-access": "^2023.10.5",
         "@typescript-eslint/eslint-plugin": "^7.15.0",
         "@typescript-eslint/parser": "^7.15.0",
+        "autoprefixer": "^10.4.20",
         "concurrently": "^8.2.2",
         "cors": "^2.8.5",
         "cross-env": "^7.0.3",
         "eslint": "^8.56.0",
         "jest": "^29.7.0",
-        "playcanvas": "^1.73.1",
-        "rollup": "^4.18.0",
+        "playcanvas": "^1.73.4",
+        "postcss": "^8.4.41",
+        "rollup": "^4.20.0",
         "rollup-plugin-sass": "^1.13.0",
         "rollup-plugin-visualizer": "^5.12.0",
         "serve": "^14.2.3",

rollup.config.mjs

@@ -7,9 +7,12 @@ import resolve from '@rollup/plugin-node-resolve';
 import strip from '@rollup/plugin-strip';
 import typescript from '@rollup/plugin-typescript';
 import json from '@rollup/plugin-json';
-import sass from 'rollup-plugin-sass';
 // import { visualizer } from 'rollup-plugin-visualizer';
 
+import autoprefixer from 'autoprefixer';
+import postcss from 'postcss';
+import sass from 'rollup-plugin-sass';
+
 // prod is release build
 if (process.env.BUILD_TYPE === 'prod') {
     process.env.BUILD_TYPE = 'release';
@@ -63,10 +66,15 @@ const application = {
         }),
         alias({entries: aliasEntries}),
         resolve(),
-        image({dom: true}),
+        image({dom: false}),
         sass({
             output: false,
-            insert: true
+            insert: true,
+            processor: (css) => {
+                return postcss([autoprefixer])
+                        .process(css)
+                        .then(result => result.css);
+            }
         }),
         json(),
         typescript({

src/camera.ts

@@ -476,7 +476,7 @@ class Camera extends Element {
 
         const device = this.scene.graphicsDevice as WebglGraphicsDevice;
         const events = this.scene.events;
-        const alpha = events.invoke('camera.mode') === 'rings' ? 0.0 : 0.2;
+        const alpha = events.invoke('camera.debug') && events.invoke('camera.mode') === 'rings' ? 0.0 : 0.2;
 
         // hide non-selected elements
         const splats = this.scene.getElementsByType(ElementType.splat);

src/controllers.ts

@@ -142,7 +142,9 @@ class PointerController {
         };
 
         const dblclick = (event: globalThis.MouseEvent) => {
-            camera.pickFocalPoint(event.offsetX, event.offsetY);
+            if (event.target === target) {
+                camera.pickFocalPoint(event.offsetX, event.offsetY);
+            }
         };
 
         // key state

src/editor.ts

@@ -1,6 +1,5 @@
 import {
     BoundingBox,
-    Color,
     Mat4,
     Vec3,
     Vec4,
@@ -30,41 +29,6 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
         return selected?.visible ? [selected] : [];
     };
 
-    const debugSphereCenter = new Vec3();
-    let debugSphereRadius = 0;
-
-    const debugPlane = new Vec3();
-    let debugPlaneDistance = 0;
-
-    // draw debug mesh instances
-    events.on('prerender', () => {
-        const app = scene.app;
-
-        if (debugSphereRadius > 0) {
-            app.drawWireSphere(debugSphereCenter, debugSphereRadius, Color.RED, 40);
-        }
-
-        if (debugPlane.length() > 0) {
-            vec.copy(debugPlane).mulScalar(debugPlaneDistance);
-            vec2.add2(vec, debugPlane);
-
-            mat.setLookAt(vec, vec2, Math.abs(Vec3.UP.dot(debugPlane)) > 0.99 ? Vec3.FORWARD : Vec3.UP);
-
-            const lines = [
-                new Vec3(-1,-1, 0), new Vec3( 1,-1, 0),
-                new Vec3( 1,-1, 0), new Vec3( 1, 1, 0),
-                new Vec3( 1, 1, 0), new Vec3(-1, 1, 0),
-                new Vec3(-1, 1, 0), new Vec3(-1,-1, 0),
-                new Vec3( 0, 0, 0), new Vec3( 0, 0,-1)
-            ];
-            for (let i = 0; i < lines.length; ++i) {
-                mat.transformPoint(lines[i], lines[i]);
-            }
-
-            app.drawLines(lines, Color.RED);
-        }
-    });
-
     const processSelection = (state: Uint8Array, op: string, pred: (i: number) => boolean) => {
         for (let i = 0; i < state.length; ++i) {
             if (state[i] & (State.deleted | State.hidden)) {
@@ -94,7 +58,7 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
 
     // add unsaved changes warning message.
     window.addEventListener("beforeunload", function (e) {
-        if (editHistory.cursor === lastExportCursor) {
+        if (!events.invoke('scene.dirty')) {
             // if the undo cursor matches last export, then we have no unsaved changes
             return undefined;
         }
@@ -104,6 +68,10 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
         return msg;
     });
 
+    events.function('scene.dirty', () => {
+        return editHistory.cursor !== lastExportCursor;
+    });
+
     events.on('scene.saved', () => {
         lastExportCursor = editHistory.cursor;
     });
@@ -112,24 +80,31 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
         scene.forceRender = true;
     });
 
-    events.on('splatSize', () => {
+    events.on('camera.debug', () => {
         scene.forceRender = true;
     });
 
-    events.on('show.gridOn', () => {
-        scene.grid.visible = true;
+    events.on('camera.splatSize', () => {
+        scene.forceRender = true;
     });
 
-    events.on('show.gridOff', () => {
-        scene.grid.visible = false;
+    const setGridVisible = (visible: boolean) => {
+        if (visible !== scene.grid.visible) {
+            scene.grid.visible = visible;
+            events.fire('grid.visible', visible);
+        }
+    };
+
+    events.function('grid.visible', () => {
+        return scene.grid.visible;
     });
 
-    events.on('show.gridToggle', () => {
-        scene.grid.visible = !scene.grid.visible;
+    events.on('grid.toggleVisible', () => {
+        setGridVisible(!scene.grid.visible);
     });
 
-    events.function('show.grid', () => {
-        return scene.grid.visible;
+    events.on('grid.setVisible', (visible: boolean) => {
+        setGridVisible(visible);
     });
 
     events.on('camera.focus', () => {
@@ -208,20 +183,6 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
         });
     });
 
-    events.on('select.bySpherePlacement', (sphere: number[]) => {
-        debugSphereCenter.set(sphere[0], sphere[1], sphere[2]);
-        debugSphereRadius = sphere[3];
-
-        scene.forceRender = true;
-    });
-
-    events.on('select.byPlanePlacement', (axis: number[], distance: number) => {
-        debugPlane.set(axis[0], axis[1], axis[2]);
-        debugPlaneDistance = distance;
-
-        scene.forceRender = true;
-    });
-
     events.on('select.bySphere', (op: string, sphere: number[]) => {
         selectedSplats().forEach((splat) => {
             const splatData = splat.splatData;
@@ -230,7 +191,9 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
             const y = splatData.getProp('y');
             const z = splatData.getProp('z');
 
-            const radius2 = sphere[3] * sphere[3];
+            splat.worldTransform.getScale(vec);
+
+            const radius2 = (sphere[3] / vec.x) ** 2;
             vec.set(sphere[0], sphere[1], sphere[2]);
 
             mat.invert(splat.worldTransform);
@@ -405,7 +368,7 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
                 const y = splatData.getProp('y');
                 const z = splatData.getProp('z');
 
-                const splatSize = events.invoke('splatSize');
+                const splatSize = events.invoke('camera.splatSize');
                 const camera = scene.camera.entity.camera;
                 const sx = point.x * width;
                 const sy = point.y * height;
@@ -478,8 +441,84 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
         });
     });
 
-    events.on('allData', (value: boolean) => {
-        scene.assetLoader.loadAllData = value;
+    const setAllData = (value: boolean) => {
+        if (value !== scene.assetLoader.loadAllData) {
+            scene.assetLoader.loadAllData = value;
+            events.fire('allData', scene.assetLoader.loadAllData);
+        }
+    };
+
+    events.function('allData', () => {
+        return scene.assetLoader.loadAllData;
+    });
+
+    events.on('toggleAllData', (value: boolean) => {
+        setAllData(!events.invoke('allData'));
+    });
+
+    // camera mode
+
+    let activeMode = 'centers';
+
+    const setCameraMode = (mode: string) => {
+        if (mode !== activeMode) {
+            activeMode = mode;
+            events.fire('camera.mode', activeMode);
+        }
+    };
+
+    events.function('camera.mode', () => {
+        return activeMode;
+    });
+
+    events.on('camera.setMode', (mode: string) => {
+        setCameraMode(mode);
+    });
+
+    events.on('camera.toggleMode', () => {
+        setCameraMode(events.invoke('camera.mode') === 'centers' ? 'rings' : 'centers');
+    });
+
+    // camera debug
+
+    let cameraDebug = true;
+
+    const setCameraDebug = (enabled: boolean) => {
+        if (enabled !== cameraDebug) {
+            cameraDebug = enabled;
+            events.fire('camera.debug', cameraDebug);
+        }
+    };
+
+    events.function('camera.debug', () => {
+        return cameraDebug;
+    });
+
+    events.on('camera.setDebug', (value: boolean) => {
+        setCameraDebug(value);
+    });
+
+    events.on('camera.toggleDebug', () => {
+        setCameraDebug(!events.invoke('camera.debug'));
+    });
+
+    // splat size
+
+    let splatSize = 2;
+
+    const setSplatSize = (value: number) => {
+        if (value !== splatSize) {
+            splatSize = value;
+            events.fire('camera.splatSize', splatSize);
+        }
+    };
+
+    events.function('camera.splatSize', () => {
+        return splatSize;
+    });
+
+    events.on('camera.setSplatSize', (value: number) => {
+        setSplatSize(value);
     });
 }