Keep selected enabled features on model updates instead of resetting them, better list of objects support and recover/disable previous selection on scene reloads.

frontend/App.vue

@@ -7,7 +7,7 @@ import Tools from "./tools/Tools.vue";
 import Models from "./models/Models.vue";
 import {VBtn, VLayout, VMain, VToolbarTitle} from "vuetify/lib/components/index.mjs";
 import {settings} from "./misc/settings";
-import {NetworkManager, NetworkUpdateEvent} from "./misc/network";
+import {NetworkManager, NetworkUpdateEvent, NetworkUpdateEventModel} from "./misc/network";
 import {SceneMgr} from "./misc/scene";
 import {Document} from "@gltf-transform/core";
 import type ModelViewerWrapperT from "./viewer/ModelViewerWrapper.vue";
@@ -28,6 +28,7 @@ const viewer: Ref<InstanceType<typeof ModelViewerWrapperT> | null> = ref(null);
 const sceneDocument = shallowRef(new Document());
 provide('sceneDocument', {sceneDocument});
 const models: Ref<InstanceType<typeof Models> | null> = ref(null)
+const tools: Ref<InstanceType<typeof Tools> | null> = ref(null)
 const disableTap = ref(false);
 const setDisableTap = (val: boolean) => disableTap.value = val;
 provide('disableTap', {disableTap, setDisableTap});
@@ -49,6 +50,7 @@ async function onModelUpdateRequest(event: NetworkUpdateEvent) {
   for (let modelIndex in event.models) {
     let isLast = parseInt(modelIndex) === event.models.length - 1;
     let model = event.models[modelIndex];
+    tools.value?.removeObjectSelections(model.name);
     try {
       if (!model.isRemove) {
         doc = await SceneMgr.loadModel(sceneUrl, doc, model.name, model.url, isLast && settings.loadHelpers, isLast);
@@ -68,8 +70,8 @@ async function onModelUpdateRequest(event: NetworkUpdateEvent) {
 }
 
 async function onModelRemoveRequest(name: string) {
-  sceneDocument.value = await SceneMgr.removeModel(sceneUrl, sceneDocument.value, name);
-  triggerRef(sceneDocument); // Why not triggered automatically?
+  await onModelUpdateRequest(new NetworkUpdateEvent([new NetworkUpdateEventModel(name, "", null, true)], () => {
+  }));
 }
 
 // Set up the load model event listener
@@ -114,7 +116,7 @@ async function loadModelManual() {
       <template #toolbar>
         <v-toolbar-title>Tools</v-toolbar-title>
       </template>
-      <tools :viewer="viewer" @findModel="(name) => models?.findModel(name)"/>
+      <tools ref="tools" :viewer="viewer" @findModel="(name) => models?.findModel(name)"/>
     </sidebar>
 
   </v-layout>

frontend/misc/distances.ts

@@ -8,7 +8,6 @@ function getCenterAndVertexList(selInfo: SelectionInfo, scene: ModelScene): {
     center: Vector3,
     vertices: Array<Vector3>
 } {
-    selInfo.object.updateMatrixWorld();
     let pos: BufferAttribute | InterleavedBufferAttribute = selInfo.object.geometry.getAttribute('position');
     let ind: BufferAttribute | null = selInfo.object.geometry.index;
     if (ind === null) {

frontend/misc/network.ts

@@ -2,7 +2,7 @@ import {settings} from "./settings";
 
 const batchTimeout = 250; // ms
 
-class NetworkUpdateEventModel {
+export class NetworkUpdateEventModel {
     name: string;
     url: string;
     // TODO: Detect and manage instances of the same object (same hash, different name)

frontend/models/Model.vue

@@ -12,8 +12,8 @@ import {
   VTooltip,
 } from "vuetify/lib/components/index.mjs";
 import {extrasNameKey, extrasNameValueHelpers} from "../misc/gltf";
-import {Document, Mesh} from "@gltf-transform/core";
-import {inject, ref, type ShallowRef, watch} from "vue";
+import {Mesh} from "@gltf-transform/core";
+import {ref, watch} from "vue";
 import type ModelViewerWrapper from "../viewer/ModelViewerWrapper.vue";
 import {
   mdiCircleOpacity,
@@ -85,7 +85,7 @@ function onEnabledFeaturesChange(newEnabledFeatures: Array<number>) {
   scene.queueRender()
 }
 
-watch(enabledFeatures, onEnabledFeaturesChange);
+watch(enabledFeatures, onEnabledFeaturesChange, {deep: true});
 
 function onOpacityChange(newOpacity: number) {
   let scene = props.viewer?.scene;
@@ -122,8 +122,6 @@ function onWireframeChange(newWireframe: boolean) {
 
 watch(wireframe, onWireframeChange);
 
-let {sceneDocument} = inject<{ sceneDocument: ShallowRef<Document> }>('sceneDocument')!!;
-
 function onClipPlanesChange() {
   let scene = props.viewer?.scene;
   let sceneModel = (scene as any)?._model;
@@ -245,9 +243,35 @@ function onModelLoad() {
   let sceneModel = (scene as any)?._model;
   if (!scene || !sceneModel) return;
 
+  // Count the number of faces, edges and vertices
+  const isFirstLoad = faceCount.value === -1;
+  faceCount.value = props.meshes
+      .flatMap((m) => m.listPrimitives().filter(p => p.getMode() === WebGL2RenderingContext.TRIANGLES))
+      .map(p => (p.getExtras()?.face_triangles_end as any)?.length ?? 1)
+      .reduce((a, b) => a + b, 0)
+  edgeCount.value = props.meshes
+      .flatMap((m) => m.listPrimitives().filter(p => p.getMode() in [WebGL2RenderingContext.LINE_STRIP, WebGL2RenderingContext.LINES]))
+      .map(p => (p.getExtras()?.edge_points_end as any)?.length ?? 0)
+      .reduce((a, b) => a + b, 0)
+  vertexCount.value = props.meshes
+      .flatMap((m) => m.listPrimitives().filter(p => p.getMode() === WebGL2RenderingContext.POINTS))
+      .map(p => (p.getAttribute("POSITION")?.getCount() ?? 0))
+      .reduce((a, b) => a + b, 0)
+
+  // First time: set the enabled features to all provided features
+  if (isFirstLoad) {
+    if (faceCount.value === 0) enabledFeatures.value = enabledFeatures.value.filter((f) => f !== 0)
+    else if (!enabledFeatures.value.includes(0)) enabledFeatures.value.push(0)
+    if (edgeCount.value === 0) enabledFeatures.value = enabledFeatures.value.filter((f) => f !== 1)
+    else if (!enabledFeatures.value.includes(1)) enabledFeatures.value.push(1)
+    if (vertexCount.value === 0) enabledFeatures.value = enabledFeatures.value.filter((f) => f !== 2)
+    else if (!enabledFeatures.value.includes(2)) enabledFeatures.value.push(2)
+  }
+
   // Add darkened back faces for all face objects to improve cutting planes
   let childrenToAdd: Array<MObject3D> = [];
   sceneModel.traverse((child: MObject3D) => {
+    child.updateMatrixWorld();  // Objects are mostly static, so ensure updated matrices
     if (child.userData[extrasNameKey] === modelName) {
       if (child.type == 'Mesh' || child.type == 'SkinnedMesh') {
         // Compute a BVH for faster raycasting (MUCH faster selection)
@@ -278,28 +302,6 @@ function onModelLoad() {
   });
   childrenToAdd.forEach((child: MObject3D) => sceneModel.add(child));
 
-  // Count the number of faces, edges and vertices
-  faceCount.value = props.meshes
-      .flatMap((m) => m.listPrimitives().filter(p => p.getMode() === WebGL2RenderingContext.TRIANGLES))
-      .map(p => (p.getExtras()?.face_triangles_end as any)?.length ?? 1)
-      .reduce((a, b) => a + b, 0)
-  edgeCount.value = props.meshes
-      .flatMap((m) => m.listPrimitives().filter(p => p.getMode() in [WebGL2RenderingContext.LINE_STRIP, WebGL2RenderingContext.LINES]))
-      .map(p => (p.getExtras()?.edge_points_end as any)?.length ?? 0)
-      .reduce((a, b) => a + b, 0)
-  vertexCount.value = props.meshes
-      .flatMap((m) => m.listPrimitives().filter(p => p.getMode() === WebGL2RenderingContext.POINTS))
-      .map(p => (p.getAttribute("POSITION")?.getCount() ?? 0))
-      .reduce((a, b) => a + b, 0)
-
-  // Set the enabled features to all provided features
-  if (faceCount.value === 0) enabledFeatures.value = enabledFeatures.value.filter((f) => f !== 0)
-  else if (!enabledFeatures.value.includes(0)) enabledFeatures.value.push(0)
-  if (edgeCount.value === 0) enabledFeatures.value = enabledFeatures.value.filter((f) => f !== 1)
-  else if (!enabledFeatures.value.includes(1)) enabledFeatures.value.push(1)
-  if (vertexCount.value === 0) enabledFeatures.value = enabledFeatures.value.filter((f) => f !== 2)
-  else if (!enabledFeatures.value.includes(2)) enabledFeatures.value.push(2)
-
   // Furthermore...
   // Enabled features may have been reset after a reload
   onEnabledFeaturesChange(enabledFeatures.value)

frontend/tools/Selection.vue

@@ -33,21 +33,23 @@ let showBoundingBox = ref<Boolean>(false); // Enabled automatically on start
 let showDistances = ref<Boolean>(true);
 
 let mouseDownAt: [number, number] | null = null;
+let mouseDownTime = 0;
 let selectFilter = ref('Any (S)');
 const raycaster = new Raycaster();
 
 
-let selectionMoveListener = (event: MouseEvent) => {
+let mouseDownListener = (event: MouseEvent) => {
   mouseDownAt = [event.clientX, event.clientY];
+  mouseDownTime = performance.now();
   if (!selectionEnabled.value) return;
 };
 
-let selectionListener = (event: MouseEvent) => {
+let mouseUpListener = (event: MouseEvent) => {
   // If the mouse moved while clicked (dragging), avoid selection logic
   if (mouseDownAt) {
     let [x, y] = mouseDownAt;
     mouseDownAt = null;
-    if (Math.abs(event.clientX - x) > 5 || Math.abs(event.clientY - y) > 5) {
+    if (Math.abs(event.clientX - x) > 5 || Math.abs(event.clientY - y) > 5 || performance.now() - mouseDownTime > 500) {
       return;
     }
   }
@@ -254,14 +256,29 @@ let onViewerReady = (viewer: typeof ModelViewerWrapperT) => {
   viewer.onElemReady((elem: ModelViewerElement) => {
     if (hasListeners) return;
     hasListeners = true;
-    elem.addEventListener('mouseup', selectionListener);
-    elem.addEventListener('mousedown', selectionMoveListener); // Avoid clicking when dragging
+    elem.addEventListener('mousedown', mouseDownListener); // Avoid clicking when dragging
+    elem.addEventListener('mouseup', mouseUpListener);
     elem.addEventListener('load', () => {
+      // After a reload of the scene, we need to recover object references and highlight them again
+      for (let sel of selected.value) {
+        let scene = props.viewer?.scene;
+        if (!scene) continue;
+        let foundObject = null;
+        scene.traverse((obj: MObject3D) => {
+          if (sel.matches(obj)) {
+            foundObject = obj as MObject3D;
+          }
+        });
+        if (foundObject) {
+          sel.object = foundObject;
+          highlight(sel);
+        } else {
+          selected.value = selected.value.filter((m) => m.getKey() !== sel.getKey());
+        }
+      }
       if (firstLoad) {
         toggleShowBoundingBox();
         firstLoad = false;
-      } else {
-        updateBoundingBox();
       }
     });
     elem.addEventListener('camera-change', onCameraChange);
@@ -406,6 +423,8 @@ function updateDistances() {
   return;
 }
 
+defineExpose({deselect, updateBoundingBox, updateDistances});
+
 // Add keyboard shortcuts
 window.addEventListener('keydown', (event) => {
   if (event.key === 's') {

frontend/tools/Tools.vue

@@ -19,7 +19,7 @@ import type {ModelViewerElement} from '@google/model-viewer';
 import type {MObject3D} from "./Selection.vue";
 import Loading from "../misc/Loading.vue";
 import type ModelViewerWrapper from "../viewer/ModelViewerWrapper.vue";
-import {defineAsyncComponent, type Ref, ref} from "vue";
+import {defineAsyncComponent, ref, type Ref} from "vue";
 import type {SelectionInfo} from "./selection";
 
 const SelectionComponent = defineAsyncComponent({
@@ -107,6 +107,15 @@ async function openGithub() {
   window.open('https://github.com/yeicor-3d/yet-another-cad-viewer', '_blank')
 }
 
+function removeObjectSelections(objName: string) {
+  for (let selInfo of selection.value.filter((s) => s.getObjectName() === objName)) {
+    selectionComp.value?.deselect(selInfo);
+  }
+  selectionComp.value?.updateBoundingBox();
+  selectionComp.value?.updateDistances();
+}
+
+defineExpose({removeObjectSelections});
 
 // Add keyboard shortcuts
 window.addEventListener('keydown', (event) => {
@@ -133,7 +142,7 @@ window.addEventListener('keydown', (event) => {
   </v-btn>
   <v-divider/>
   <h5>Selection ({{ selectionFaceCount() }}F {{ selectionEdgeCount() }}E {{ selectionVertexCount() }}V)</h5>
-  <selection-component :ref="selectionComp as any" :viewer="props.viewer as any" v-model="selection"
+  <selection-component ref="selectionComp" :viewer="props.viewer as any" v-model="selection"
                        @findModel="(name) => emit('findModel', name)"/>
   <v-divider/>
   <v-spacer></v-spacer>
@@ -187,4 +196,8 @@ window.addEventListener('keydown', (event) => {
   position: relative;
   top: 5px;
 }
+
+h5 {
+  font-size: 14px;
+}
 </style>

frontend/tools/selection.ts

@@ -3,6 +3,7 @@
 import type {MObject3D} from "./Selection.vue";
 import type {Intersection} from "three";
 import {Box3} from "three";
+import {extrasNameKey} from "../misc/gltf";
 
 /** Information about a single item in the selection */
 export class SelectionInfo {
@@ -19,6 +20,17 @@ export class SelectionInfo {
         this.indices = indices;
     }
 
+    public getObjectName() {
+        return this.object.userData[extrasNameKey];
+    }
+
+    public matches(object: MObject3D) {
+        return this.getObjectName() === object.userData[extrasNameKey] &&
+            (this.kind === 'face' && (object.type === 'Mesh' || object.type === 'SkinnedMesh') ||
+                this.kind === 'edge' && (object.type === 'Line' || object.type === 'LineSegments') ||
+                this.kind === 'vertex' && object.type === 'Points')
+    }
+
     public getKey() {
         return this.object.uuid + this.kind + this.indices[0].toFixed() + this.indices[1].toFixed();
     }