complete initial models list

src/App.vue

@@ -1,6 +1,6 @@
 <!--suppress SillyAssignmentJS -->
 <script setup lang="ts">
-import {defineAsyncComponent, ref, Ref} from "vue";
+import {defineAsyncComponent, ref, Ref, shallowRef} from "vue";
 import Sidebar from "./misc/Sidebar.vue";
 import Loading from "./misc/Loading.vue";
 import Tools from "./tools/Tools.vue";
@@ -23,13 +23,21 @@ let openSidebarsByDefault: Ref<boolean> = ref(window.innerWidth > 1200);
 
 let sceneUrl = ref("")
 let viewer: Ref<InstanceType<typeof ModelViewerWrapperT> | null> = ref(null);
-let document = new Document();
+let document = shallowRef(new Document());
+
+async function onModelLoadRequest(model: NetworkUpdateEvent) {
+  await SceneMgr.loadModel(sceneUrl, document, model.name, model.url);
+  document.value = document.value.clone(); // Force update from this component!
+}
+
+function onModelRemoveRequest(name: string) {
+  SceneMgr.removeModel(sceneUrl, document, name);
+  document.value = document.value.clone(); // Force update from this component!
+}
 
 // Set up the load model event listener
 let networkMgr = new NetworkManager();
-networkMgr.addEventListener('update', async (model: NetworkUpdateEvent) => {
-  document = await SceneMgr.loadModel(sceneUrl, document, model.name, model.url);
-});
+networkMgr.addEventListener('update', onModelLoadRequest);
 // Start loading all configured models ASAP
 for (let model of settings.preloadModels) {
   networkMgr.load(model);
@@ -49,7 +57,7 @@ for (let model of settings.preloadModels) {
       <template #toolbar>
         <v-toolbar-title>Models</v-toolbar-title>
       </template>
-      <models :viewer="viewer"/>
+      <models :viewer="viewer" :document="document" @remove="onModelRemoveRequest"/>
     </sidebar>
 
     <!-- The right collapsible sidebar has the list of tools -->

src/misc/gltf.ts

@@ -1,7 +1,8 @@
-import {Document, Scene, Transform, WebIO} from "@gltf-transform/core";
+import {Document, Scene, Transform, WebIO, Buffer} from "@gltf-transform/core";
 import {unpartition} from "@gltf-transform/functions";
 
 let io = new WebIO();
+export let extrasNameKey = "__yacv_name";
 
 /**
  * Loads a GLB model from a URL and adds it to the document or replaces it if the names match.
@@ -31,32 +32,27 @@ export async function toBuffer(doc: Document): Promise<Uint8Array> {
     return io.writeBinary(doc);
 }
 
+export async function removeModel(name: string, document: Document): Promise<Document> {
+    return await document.transform(dropByName(name));
+}
+
 /** Given a parsed GLTF document and a name, it forces the names of all elements to be identified by the name (or derivatives) */
 function setNames(name: string): Transform {
     return (doc: Document, _: any) => {
         // Do this automatically for all elements changing any name
         for (let elem of doc.getGraph().listEdges().map(e => e.getChild())) {
-            // If setName is available, use it (preserving original names)
-            elem.setName(name + "/" + elem.getName());
-        }
-
-        // Special cases, specify the kind and number ID of primitives
-        let i = 0;
-        for (let mesh of doc.getRoot().listMeshes()) {
-            for (let prim of mesh.listPrimitives()) {
-                let kind = (prim.getMode() === WebGL2RenderingContext.POINTS ? "vertex" :
-                    (prim.getMode() === WebGL2RenderingContext.LINES ? "edge" : "face"));
-                prim.setName(name + "/" + kind + "/" + (i++));
-            }
+            if (!elem.getExtras()) elem.setExtras({});
+            elem.getExtras()[extrasNameKey] = name;
         }
     }
 }
 
 /** Ensures that all elements with the given name are removed from the document */
-function dropByName(name: string): Transform {
+export function dropByName(name: string): Transform {
     return (doc: Document, _: any) => {
         for (let elem of doc.getGraph().listEdges().map(e => e.getChild())) {
-            if (elem.getName().startsWith(name + "/") && !(elem instanceof Scene)) {
+            if (elem.getExtras() == null || elem instanceof Scene || elem instanceof Buffer) continue;
+            if ((elem.getExtras()[extrasNameKey]?.toString() ?? "") == name) {
                 elem.dispose();
             }
         }

src/misc/scene.ts

@@ -1,37 +1,46 @@
-import type {ModelViewerElement} from '@google/model-viewer';
-import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
-import {Ref} from 'vue';
+import {Ref, ShallowRef} from 'vue';
 import {Document} from '@gltf-transform/core';
-import {mergeFinalize, mergePartial, toBuffer} from "./gltf";
+import {mergeFinalize, mergePartial, removeModel, toBuffer} from "./gltf";
 
 /** This class helps manage SceneManagerData. All methods are static to support reactivity... */
 export class SceneMgr {
     /** Loads a GLB model from a URL and adds it to the viewer or replaces it if the names match */
-    static async loadModel(sceneUrl: Ref<string>, document: Document, name: string, url: string): Promise<Document> {
+    static async loadModel(sceneUrl: Ref<string>, document: ShallowRef<Document>, name: string, url: string) {
         let loadStart = performance.now();
 
         // Start merging into the current document, replacing or adding as needed
-        document = await mergePartial(url, name, document);
+        document.value = await mergePartial(url, name, document.value);
 
         // Display the final fully loaded model
-        document = await this.showCurrentDoc(sceneUrl, document);
+        await this.showCurrentDoc(sceneUrl, document);
 
         console.log("Model", name, "loaded in", performance.now() - loadStart, "ms");
         return document;
     }
 
-    /** Serializes the current document into a GLB and updates the viewerSrc */
-    private static async showCurrentDoc(sceneUrl: Ref<string>, document: Document): Promise<Document> {
-        // Make sure the document is fully loaded and ready to be shown
-        document = await mergeFinalize(document);
+    /** Removes a model from the viewer */
+    static async removeModel(sceneUrl: Ref<string>, document: ShallowRef<Document>, name: string) {
+        let loadStart = performance.now();
 
-        // Serialize the document into a GLB and update the viewerSrc
-        let buffer = await toBuffer(document);
-        let blob = new Blob([buffer], {type: 'model/gltf-binary'});
-        //console.log("Showing current doc", document, "as", Array.from(buffer));
-        sceneUrl.value = URL.createObjectURL(blob);
+        // Remove the model from the document
+        document.value = await removeModel(name, document.value)
 
-        // Return the updated document
+        // Display the final fully loaded model
+        await this.showCurrentDoc(sceneUrl, document);
+
+        console.log("Model", name, "removed in", performance.now() - loadStart, "ms");
         return document;
     }
+
+    /** Serializes the current document into a GLB and updates the viewerSrc */
+    private static async showCurrentDoc(sceneUrl: Ref<string>, document: ShallowRef<Document>) {
+        // Make sure the document is fully loaded and ready to be shown
+        document.value = await mergeFinalize(document.value);
+
+        // Serialize the document into a GLB and update the viewerSrc
+        let buffer = await toBuffer(document.value);
+        let blob = new Blob([buffer], {type: 'model/gltf-binary'});
+        console.debug("Showing current doc", document, "as", Array.from(buffer));
+        sceneUrl.value = URL.createObjectURL(blob);
+    }
 }

src/models/Model.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import {
+  VBtn,
+  VBtnToggle,
+  VExpansionPanel,
+  VExpansionPanelText,
+  VExpansionPanelTitle,
+  VSpacer,
+  VTooltip
+} from "vuetify/lib/components";
+import {extrasNameKey} from "../misc/gltf";
+import {Document, Mesh} from "@gltf-transform/core";
+import {watch} from "vue";
+
+import type ModelViewerWrapper from "../viewer/ModelViewerWrapper.vue";
+import {mdiDelete, mdiRectangle, mdiRectangleOutline, mdiVectorRectangle} from '@mdi/js'
+import SvgIcon from '@jamescoyle/vue-icon/lib/svg-icon.vue';
+
+const props = defineProps<{ mesh: Mesh, viewer: InstanceType<typeof ModelViewerWrapper> | null, document: Document }>();
+const emit = defineEmits<{ remove: [] }>()
+
+let modelName = props.mesh.getExtras()[extrasNameKey] // + " blah blah blah blah blag blah blah blah"
+
+let faceCount = props.mesh.listPrimitives().filter(p => p.getMode() === WebGL2RenderingContext.TRIANGLES).length
+let edgeCount = props.mesh.listPrimitives().filter(p => p.getMode() === WebGL2RenderingContext.LINE_STRIP).length
+let vertexCount = props.mesh.listPrimitives().filter(p => p.getMode() === WebGL2RenderingContext.POINTS).length
+
+const enabledFeatures = defineModel<Array<number>>("enabledFeatures", {default: [0, 1, 2]});
+
+let hasListener = false;
+
+function onEnabledFeaturesChange(newEnabledFeatures: Array<number>) {
+  //console.log('Enabled features may have changed', newEnabledFeatures)
+  let scene = props.viewer?.scene;
+  if (!scene || !scene._model) return;
+  if (!hasListener) { // Make sure we listen for reloads and re-apply enabled features
+    props.viewer.elem.addEventListener('load', () => onEnabledFeaturesChange(enabledFeatures.value));
+    hasListener = true;
+  }
+  // Iterate all primitives of the mesh and set their visibility based on the enabled features
+  // Use the scene graph instead of the document to avoid reloading the same model, at the cost
+  // of not actually removing the primitives from the scene graph
+  scene._model.traverse((child) => {
+    if (child.userData[extrasNameKey] === modelName) {
+      let childIsFace = child.type == 'Mesh' || child.type == 'SkinnedMesh'
+      let childIsEdge = child.type == 'Line'
+      let childIsVertex = child.type == 'Point'
+      if (childIsFace || childIsEdge || childIsVertex) {
+        let visible = newEnabledFeatures.includes(childIsFace ? 0 : childIsEdge ? 1 : childIsVertex ? 2 : -1);
+        if (child.visible !== visible) {
+          child.visible = visible;
+        }
+      }
+    }
+  });
+  scene.queueRender()
+}
+
+watch(enabledFeatures, onEnabledFeaturesChange);
+</script>
+
+<template>
+  <v-expansion-panel>
+    <v-expansion-panel-title expand-icon="hide-this-icon" collapse-icon="hide-this-icon">
+      <v-btn-toggle v-model="enabledFeatures" multiple @click.stop color="surface-light">
+        <v-btn icon>
+          <v-tooltip activator="parent">Toggle Faces ({{ faceCount }})</v-tooltip>
+          <svg-icon type="mdi" :path="mdiRectangle"></svg-icon>
+        </v-btn>
+        <v-btn icon>
+          <v-tooltip activator="parent">Toggle Edges ({{ edgeCount }})</v-tooltip>
+          <svg-icon type="mdi" :path="mdiRectangleOutline"></svg-icon>
+        </v-btn>
+        <v-btn icon>
+          <v-tooltip activator="parent">Toggle Vertices ({{ vertexCount }})</v-tooltip>
+          <svg-icon type="mdi" :path="mdiVectorRectangle"></svg-icon>
+        </v-btn>
+      </v-btn-toggle>
+      <div class="model-name">{{ modelName }}</div>
+      <v-spacer></v-spacer>
+      <v-btn icon @click.stop="emit('remove')">
+        <v-tooltip activator="parent">Remove</v-tooltip>
+        <svg-icon type="mdi" :path="mdiDelete"></svg-icon>
+      </v-btn>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
+      TODO: Settings...
+    </v-expansion-panel-text>
+  </v-expansion-panel>
+</template>
+
+<style scoped>
+/* Fix bug in hidden expansion panel text next to active expansion panel */
+.v-expansion-panel-title--active + .v-expansion-panel-text {
+  display: flex !important;
+}
+
+/* More compact accordions */
+.v-expansion-panel-title {
+  padding: 0;
+}
+
+.v-expansion-panel-title > .v-btn-toggle {
+  margin: 0;
+  margin-right: 8px;
+}
+
+.v-btn {
+  --v-btn-height: 16px;
+}
+
+.model-name {
+  width: 130px;
+  min-height: 1.15em; /* HACK: Avoid eating the bottom of the text when using 1 line */
+  max-height: 2em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* https://caniuse.com/?search=line-clamp */
+  -webkit-box-orient: vertical;
+}
+</style>
+
+<style>
+.hide-this-icon {
+  display: none !important;
+}
+</style>

src/models/Models.vue

@@ -1,29 +1,35 @@
 <script setup lang="ts">
-import {VExpansionPanel, VExpansionPanels, VExpansionPanelText, VExpansionPanelTitle} from "vuetify/lib/components";
+import {VExpansionPanels} from "vuetify/lib/components";
 import type ModelViewerWrapper from "../viewer/ModelViewerWrapper.vue";
 import Loading from "../misc/Loading.vue";
+import {Document, Mesh} from "@gltf-transform/core";
+import {extrasNameKey} from "../misc/gltf";
+import Model from "./Model.vue";
+import {watch, ref} from "vue";
 
-let props = defineProps<{ viewer: typeof ModelViewerWrapper | null }>();
+const props = defineProps<{ viewer: InstanceType<typeof ModelViewerWrapper> | null, document: Document }>();
+const emit = defineEmits<{ remove: [string] }>()
+
+function meshList(document: Document) {
+  return document.getRoot().listMeshes();
+}
+
+function meshName(mesh: Mesh) {
+  return mesh.getExtras()[extrasNameKey]?.toString() ?? 'Unnamed';
+}
+
+function onRemove(mesh: Mesh) {
+  emit('remove', meshName(mesh))
+}
 </script>
 
 <template>
-  <Loading v-if="!props.viewer"/>
-  <v-expansion-panels v-else>
-    <v-expansion-panel key="model-id">
-      <v-expansion-panel-title>? F ? E ? V | Model Name</v-expansion-panel-title>
-      <v-expansion-panel-text>Content</v-expansion-panel-text>
-    </v-expansion-panel>
+  <Loading v-if="!props.document"/>
+  <v-expansion-panels v-else v-for="mesh in meshList(props.document)" :key="meshName(mesh)">
+    <model :mesh="mesh" :viewer="props.viewer" :document="props.document" @remove="onRemove(mesh)"/>
   </v-expansion-panels>
 </template>
 
-<!--suppress CssUnusedSymbol -->
-<style scoped>
-/* Fix bug in hidden expansion panel text next to active expansion panel */
-.v-expansion-panel-title--active + .v-expansion-panel-text {
-  display: flex !important;
-}
-</style>
-
 <style>
 .mdi-chevron-down, .mdi-menu-down { /* HACK: mdi is not fully imported, only required icons... */
   background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 10l5 5 5-5H7z"/></svg>');

src/tools/Selection.vue

@@ -130,7 +130,7 @@ function toggleSelection() {
 
 <template>
   <div class="select-parent">
-    <v-btn icon @click="toggleSelection" :variant="selectionEnabled ? 'tonal' : 'elevated'">
+    <v-btn icon @click="toggleSelection" :color="selectionEnabled ? 'surface-light' : ''">
       <v-tooltip activator="parent">{{ selectionEnabled ? 'Disable Selection Mode' : 'Enable Selection Mode' }}
       </v-tooltip>
       <svg-icon type="mdi" :path="mdiCursorDefaultClick"/>

src/tools/Tools.vue

@@ -74,7 +74,6 @@ function toggleProjection() {
 }
 
 function centerCamera() {
-  console.log('Centering camera', props.viewer);
   let viewerEl: ModelViewerElement = props.viewer?.elem;
   if (!viewerEl) return;
   viewerEl.updateFraming();