Add option to hide splats and remove them

src/editor.ts

@@ -27,7 +27,7 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
     // get the list of selected splats (currently limited to just a single one)
     const selectedSplats = () => {
         const selected = events.invoke('selection') as Splat;
-        return selected ? [selected] : [];
+        return selected?.visible ? [selected] : [];
     };
 
     const debugSphereCenter = new Vec3();

src/file-handler.ts

@@ -119,9 +119,9 @@ const initFileHandler = async (scene: Scene, events: Events, canvas: HTMLCanvasE
         }
     });
 
-    // get the active splat
+    // get the array of visible splats
     const getSplats = () => {
-        return scene.getElementsByType(ElementType.splat) as Splat[];
+        return (scene.getElementsByType(ElementType.splat) as Splat[]).filter(splat => splat.visible);
     };
 
     events.function('scene.canSave', () => {

src/selection.ts

@@ -1,4 +1,5 @@
 import { Element, ElementType } from './element';
+import { Splat } from './splat';
 import { Events } from './events';
 import { Scene } from './scene';
 
@@ -21,20 +22,13 @@ const initSelection = (events: Events, scene: Scene) => {
     });
 
     events.on('selection', (element: Element) => {
-        if (element !== selection) {
+        if (element !== selection && (!element || (element as Splat).visible)) {
             selection = element;
             events.fire('selection.changed', selection);
             scene.forceRender = true;
         }
     });
 
-    events.on('selection.byUid', (uid: number) => {
-        const splat = scene.getElementsByType(ElementType.splat).find(v => v.uid === uid);
-        if (splat) {
-            events.fire('selection', splat);
-        }
-    });
-
     events.function('selection', () => {
         return selection;
     });
@@ -46,6 +40,12 @@ const initSelection = (events: Events, scene: Scene) => {
             events.fire('selection', splats[(idx + 1) % splats.length]);
         }
     });
+
+    events.on('splat.vis', (splat: Splat) => {
+        if (splat === selection && !splat.visible) {
+            events.fire('selection', null);
+        }
+    });
 };
 
 export { initSelection };

src/splat.ts

@@ -139,6 +139,7 @@ class Splat extends Element {
     worldBoundStorage: BoundingBox;
     localBoundDirty = true;
     worldBoundDirty = true;
+    visible_ = true;
 
     constructor(asset: Asset) {
         super(ElementType.splat);
@@ -263,6 +264,7 @@ class Splat extends Element {
     serialize(serializer: Serializer) {
         serializer.packa(this.entity.getWorldTransform().data);
         serializer.pack(this.changedCounter);
+        serializer.pack(this.visible);
     }
 
     onPreRender() {
@@ -276,10 +278,12 @@ class Splat extends Element {
         material.setParameter('ringSize', (selected && cameraMode === 'rings' && splatSize > 0) ? 0.04 : 0);
 
         // render splat centers
-        if (selected && cameraMode === 'centers' && splatSize > 0) {
+        if (this.visible && selected && cameraMode === 'centers' && splatSize > 0) {
             this.splatDebug.splatSize = splatSize;
             this.scene.app.drawMeshInstance(this.splatDebug.meshInstance);
         }
+
+        this.entity.enabled = this.visible;
     }
 
     focalPoint() {
@@ -342,6 +346,17 @@ class Splat extends Element {
 
         return this.worldBoundStorage;
     }
+
+    get visible() {
+        return this.visible_;
+    }
+
+    set visible(value: boolean) {
+        if (value !== this.visible) {
+            this.visible_ = value;
+            this.scene.events.fire('splat.vis', this);
+        }
+    }
 }
 
 export { Splat };

src/style.scss

@@ -92,6 +92,79 @@ body {
     background-color: royalblue;
 }
 
+.scene-panel-splat-item {
+    display: flex;
+    flex-direction: row;
+
+    border-bottom: 1px solid $bcg-darker;
+
+    &:hover:not(.selected) {
+        background-color: $bcg-darkest;
+    }
+
+    &.selected {
+        color: $text-primary;
+        background-color: royalblue;
+    }
+}
+
+.scene-panel-splat-item-text {
+    flex-grow: 1;
+    flex-shrink: 1;
+    pointer-events: none;
+
+    .selected & {
+        color: $text-primary;
+    }
+}
+
+.scene-panel-splat-item-visible {
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    // border: 1px solid black;
+    padding: 4px;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+
+    color: black;
+    background-color: transparent;
+
+    cursor: pointer;
+
+    &.checked {
+        color: $text-active;
+    }
+
+    &::after {
+        font-family: pc-icon;
+        font-size: 18px;
+        content: '\E117';
+    }
+}
+
+.scene-panel-splat-item-delete {
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    // border: 1px solid black;
+    padding: 4px;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+
+    color: $text-secondary;
+
+    cursor: pointer;
+
+    &::after {
+        font-family: pc-icon;
+        font-size: 16px;
+        content: '\E124';
+    }
+}
+
 #file-selector {
     display: none;
 }