feat: 操作開始までの時間を取得

src/figni-viewer-base.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { endMesure, getElapsedTime, startMesure } from './mesure'
+import { endMesure, getElapsedTime, getSumTime, startMesure } from './mesure'
 import { ModelViewerElement } from './model-viewer'
 
 const VIEW_THRESHOLD = 0.7
@@ -130,6 +130,7 @@ export default class FigniViewerBaseElement extends ModelViewerElement {
     }
     startMesure('view-time')
     endMesure('initial-interaction-time')
+    endMesure('initial-interaction-from-display-time')
   }
 
   /**
@@ -151,6 +152,7 @@ export default class FigniViewerBaseElement extends ModelViewerElement {
     this.#wantUseArCount++
     startMesure('view-time')
     endMesure('initial-interaction-time')
+    endMesure('initial-interaction-from-display-time')
     if (this.canActivateAR) {
       this.#arCount++
       if (this.#arCount == 1) {
@@ -352,12 +354,18 @@ export default class FigniViewerBaseElement extends ModelViewerElement {
       let wasInViewport = this.#isInViewport
       if (wasInViewport) {
         startMesure('display-time')
+        if (getSumTime('initial-interaction-from-display-time') === 0) {
+          startMesure('initial-interaction-from-display-time', true)
+        }
       }
       this.#registerEventListener(
         'scroll',
         () => {
           if (!wasInViewport && this.#isInViewport) {
             startMesure('display-time')
+            if (getSumTime('initial-interaction-from-display-time') === 0) {
+              startMesure('initial-interaction-from-display-time', true)
+            }
           } else if (wasInViewport && !this.#isInViewport) {
             endMesure('display-time')
             endMesure('view-time')
@@ -391,6 +399,7 @@ export default class FigniViewerBaseElement extends ModelViewerElement {
         startMesure('view-time')
         startMesure('interaction-time')
         endMesure('initial-interaction-time')
+        endMesure('initial-interaction-from-display-time')
       })
       this.#registerEventListener('interaction-end', () => {
         endMesure('interaction-time')
@@ -410,6 +419,8 @@ export default class FigniViewerBaseElement extends ModelViewerElement {
               interaction_time: this.#interactionTime,
               initial_model_view_time: this.#initialModelViewTime,
               initial_interaction_time: this.#initialInteractionTime,
+              initial_interaction_from_display_time:
+                this.#initialInteractionFromDisplayTime,
               ar_count: this.#arCount,
               want_use_ar_count: this.#wantUseArCount,
               initial_ar_use_time: this.#initialArUseTime,
@@ -459,6 +470,12 @@ export default class FigniViewerBaseElement extends ModelViewerElement {
     return Number(getElapsedTime('initial-interaction-time').toFixed(2))
   }
 
+  get #initialInteractionFromDisplayTime() {
+    return Number(
+      getElapsedTime('initial-interaction-from-display-time').toFixed(2)
+    )
+  }
+
   get #isInViewport() {
     const rect = this.parentElement.getBoundingClientRect()
     const area = rect.width * rect.height

src/figni-viewer.js

@@ -1021,7 +1021,7 @@ export default class FigniViewerElement extends HTMLElement {
 
     const panels = hotspot.querySelectorAll('[slot^="panel-"]')
     this.#panels.push(...Array.from(panels))
-    this.#panels.forEach((panel) => {
+    panels.forEach((panel) => {
       this.#modifyPanel(panel)
     })
     hotspot.addEventListener('click', (e) => {
@@ -1147,7 +1147,8 @@ export default class FigniViewerElement extends HTMLElement {
     }
 
     const name = panel.getAttribute('slot').replace(/^panel-/, '')
-    new ClassWatcher(
+    delete panel.classWatcher
+    panel.classWatcher = new ClassWatcher(
       panel,
       'figni-viewer-panel-hide',
       (p) => {

src/mesure.js

@@ -6,12 +6,13 @@ const db = {}
 /**
  * 時間の計測を開始する
  * @param {string} name 計測している時間の名前
+ * @param {boolean} restart 計測開始時間をリセットするかどうか
  */
-export function startMesure(name) {
+export function startMesure(name, restart = false) {
   if (!db[name]) {
     db[name] = { mark: 0, sum: 0, mesuring: false }
   }
-  if (!db[name].mesuring) {
+  if (!db[name].mesuring || restart) {
     db[name].mark = performance.now()
   }
   db[name].mesuring = true
@@ -39,6 +40,15 @@ export function endMesure(name) {
  * @param {string} name 計測している時間の名前
  * @return {number} 経過時間の累積
  */
+export function getSumTime(name) {
+  return db[name] ? db[name].sum : 0
+}
+
+/**
+ * 任意の計測している時間の現在までの経過時間の累積と計測中の値を足したものを取得する
+ * @param {string} name 計測している時間の名前
+ * @return {number} 経過時間の累積
+ */
 export function getElapsedTime(name) {
   if (!db[name]) {
     return 0