diff --git a/src/figni-viewer-base.js b/src/figni-viewer-base.js index dbd37e2..f8b1c9f 100644 --- a/src/figni-viewer-base.js +++ b/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 diff --git a/src/figni-viewer.js b/src/figni-viewer.js index 8b2d285..81a2dbb 100644 --- a/src/figni-viewer.js +++ b/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) => { diff --git a/src/mesure.js b/src/mesure.js index 0603357..06a26e8 100644 --- a/src/mesure.js +++ b/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