@bimdata/bcf-components 6.5.0 → 6.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bimdata/bcf-components",
-  "version": "6.5.0",
+  "version": "6.5.2",
   "files": [
     "src",
     "vue3-plugin.js"

package/src/components/bcf-topic-overview/bcf-topic-comments/BcfTopicComments.vue

@@ -49,7 +49,7 @@
                     @mouseenter="highlightViewer(element.context)"
                     @mouseleave="unhighlightViewer(element.context)"
                   >
-                    {{ `(${element.index}) ${element.name}` }}
+                    {{ `(${element.index + 1}) ${element.name}` }}
                   </div>
                 </template>
               </BIMDataDropdownList>
@@ -94,7 +94,7 @@
 </template>
 
 <script>
-import { onMounted, inject, ref, watch, onBeforeUnmount } from "vue";
+import { onMounted, inject, ref, watch, onBeforeUnmount, shallowRef } from "vue";
 import service from "../../../service.js";
 import { getViewerOptions, getViewerViewpoint, highlightViewer, unhighlightViewer } from "../../../utils/viewer.js";
 
@@ -125,7 +125,7 @@ export default {
   },
   emis: ["comment-created", "comment-updated", "comment-deleted", "view-comment-snapshot"],
   setup(props, { emit }) {
-    let pluginCreatedSub, pluginDestroyedSub;
+    let windowOpenSub, windowCloseSub;
 
     const $viewer = inject("$viewer", null);
 
@@ -136,13 +136,15 @@ export default {
     const text = ref("");
     const viewpoint = ref(null);
     const viewerSelectVisible = ref(false);
-    const viewerSelectOptions = ref([]);
+    const viewerSelectOptions = shallowRef([]);
 
     const loadComments = async () => {
       comments.value = await service.fetchTopicComments(props.project, props.topic);
     };
 
     const setCommentViewpoint = async () => {
+      viewerSelectOptions.value = getViewerOptions($viewer);
+
       if (viewerSelectOptions.value.length === 1) {
         await createViewpoint(viewerSelectOptions.value[0]);
       } else if (viewerSelectOptions.value.length > 1) {
@@ -204,20 +206,18 @@ export default {
 
     onMounted(() => {
       if ($viewer) {
-        viewerSelectOptions.value = getViewerOptions($viewer);
-        pluginCreatedSub = $viewer.globalContext.hub.on("plugin-created", () => {
-          viewerSelectOptions.value = getViewerOptions($viewer);
-        });
-        pluginDestroyedSub = $viewer.globalContext.hub.on("plugin-destroyed", () => {
-          viewerSelectOptions.value = getViewerOptions($viewer);
-        });
+        const hideViewerSelect = () => {
+          viewerSelectVisible.value = false;
+        };
+        windowOpenSub = $viewer.globalContext.hub.on("window-open", hideViewerSelect);
+        windowCloseSub = $viewer.globalContext.hub.on("window-close", hideViewerSelect);
       }
     });
 
     onBeforeUnmount(() => {
       if ($viewer) {
-        $viewer.globalContext.hub.off(pluginCreatedSub);
-        $viewer.globalContext.hub.off(pluginDestroyedSub);
+        $viewer.globalContext.hub.off(windowOpenSub);
+        $viewer.globalContext.hub.off(windowCloseSub);
       }
     });
 

package/src/utils/viewer.js

@@ -1,7 +1,9 @@
+import { markRaw } from "vue";
+
 export function getViewerOptions($viewer) {
   return $viewer.globalContext.localContexts
     .filter(ctx => ctx.viewer && ctx.loadedModels.length > 0)
-    .map((ctx, i) => ({ key: ctx.id, index: i, name: ctx.viewer.$plugin.name, context: ctx }));
+    .map((ctx, i) => ({ key: ctx.id, index: i, name: ctx.viewer.$plugin.name, context: markRaw(ctx) }));
 }
 
 export async function getViewerViewpoint(context) {
@@ -13,14 +15,14 @@ export async function getViewerViewpoint(context) {
 
 export function highlightViewer(context) {
   const ctx = context.viewer.$viewer.localContext;
-  ctx.el.style.boxSizing = "border-box";
-  ctx.el.style.border = "2px solid var(--color-primary)";
+  ctx.el.style.outlineOffset = "-2px";
+  ctx.el.style.outline = "2px solid var(--color-primary)";
   ctx.el.style.opacity = ".85";
 }
 
 export function unhighlightViewer(context) {
   const ctx = context.viewer.$viewer.localContext;
-  ctx.el.style.boxSizing = "";
-  ctx.el.style.border = "";
+  ctx.el.style.outlineOffset = "";
+  ctx.el.style.outline = "";
   ctx.el.style.opacity = "";
 }