fix: 初期設定に関しての軽微な修正

script/analyze.mjs

@@ -12,9 +12,9 @@ const options = {
     '.json': 'text',
   },
   define: {
-    VERSION: JSON.stringify(process.env.VERSION || ''),
-    API_BASE: JSON.stringify(process.env.API_BASE || ''),
-    WEBSOCKET_BASE: JSON.stringify(process.env.WEBSOCKET_BASE || ''),
+    VERSION: JSON.stringify('development'),
+    API_BASE: JSON.stringify('https://api.stg.figni.io/api'),
+    WEBSOCKET_BASE: JSON.stringify('wss://api.stg.figni.io/ws'),
   },
   plugins: [sassPlugin({ type: 'style' })],
   metafile: true,

script/watch.mjs

@@ -31,7 +31,7 @@ const ctx = await esbuild.context({
   color: true,
   sourcemap: true,
   define: {
-    VERSION: JSON.stringify(process.env.VERSION || ''),
+    VERSION: JSON.stringify('development'),
     API_BASE: JSON.stringify('https://api.stg.figni.io/api'),
     WEBSOCKET_BASE: JSON.stringify('wss://api.stg.figni.io/ws'),
   },

src/figni-viewer-base.js

@@ -9,6 +9,9 @@ const SETTINGS = {
 }
 
 export default class FigniViewerBaseElement extends ModelViewerElement {
+  // element
+  #style
+
   // analytics data
   #websocket
   #arCount = 0
@@ -26,8 +29,9 @@ export default class FigniViewerBaseElement extends ModelViewerElement {
 
     this.#setupModelViewer()
 
-    const style = document.createElement('style')
-    style.textContent = `
+    if (!this.#style) {
+      this.#style = document.createElement('style')
+      this.#style.textContent = `
       :not(style[outline="none"]) {
         outline: none !important;
       }
@@ -38,7 +42,8 @@ export default class FigniViewerBaseElement extends ModelViewerElement {
         display: none;
       }
     `
-    this.appendChild(style)
+      this.appendChild(this.#style)
+    }
   }
 
   /**

src/figni-viewer.js

@@ -170,6 +170,20 @@ export default class FigniViewerElement extends HTMLElement {
   constructor() {
     super()
 
+    this.addEventListener('camera-change', (e) => {
+      if (this.#tempHidedHotspot) {
+        if (!this.#clickableHotspot(this.#tempHidedHotspot.target)) {
+          this.#showInitCameraButton()
+        } else {
+          this.#hideInitCameraButton()
+        }
+      }
+    })
+  }
+
+  async connectedCallback() {
+    this.#completedInitialModelLoad = false
+
     if (!this.base) {
       this.#figniViewerBase = document.createElement('figni-viewer-base')
       // イベントの登録
@@ -197,31 +211,27 @@ export default class FigniViewerElement extends HTMLElement {
       this.appendChild(this.base)
     }
 
-    this.addEventListener('camera-change', (e) => {
-      if (this.#tempHidedHotspot) {
-        if (!this.#clickableHotspot(this.#tempHidedHotspot.target)) {
-          this.#showInitCameraButton()
-        } else {
-          this.#hideInitCameraButton()
+    // Hotspot
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach(async (node) => {
+            if (node.slot && node.slot.startsWith('hotspot-')) {
+              if (!node.classList.contains('figni-viewer-hotspot')) {
+                this.base.appendChild(node)
+                await this.base.updateComplete
+                this.#modifyHotspot(node)
+                this.#hotspots.push(node)
+              }
+            }
+          })
         }
-      }
+      })
     })
-  }
-
-  async connectedCallback() {
-    this.#completedInitialModelLoad = false
-
-    // Hotspot
+    observer.observe(this, { childList: true, subtree: true })
     this.querySelectorAll('[slot^="hotspot-"]').forEach((hotspot) => {
       this.#hotspots.push(this.base.appendChild(hotspot))
     })
-    await this.base.updateComplete
-    this.#hotspots = Array.from(new Set(this.#hotspots))
-    this.#hotspots.forEach((hotspot) => {
-      if (!hotspot.classList.contains('figni-viewer-hotspot')) {
-        this.#modifyHotspot(hotspot)
-      }
-    })
     this.addEventListener('load', () => {
       setTimeout(() => {
         this.#enableAllHotspots()
@@ -580,6 +590,7 @@ export default class FigniViewerElement extends HTMLElement {
     }
 
     await this.base.updateComplete
+
     this.#modifyHotspot(hotspot)
     this.updateState(this.state)
   }

src/style.scss

@@ -448,10 +448,10 @@ figni-viewer {
 }
 
 .figni-viewer-loading-animation-ring {
-  width: 1em;
-  height: 1em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin-right: 0.5em;
-  margin-bottom: 0.1em;
 
   .ring path {
     stroke: var(--figni-viewer-primary);