From ff23cbac9cf8c4ef57133a62f69b7c0c171f3f64 Mon Sep 17 00:00:00 2001 From: Kohei Futatsuka Date: Fri, 27 May 2022 17:51:14 +0900 Subject: [PATCH 1/2] add --- src/figni-viewer.js | 92 ++++++++++++++++++++++----------------------- 1 file changed, 46 insertions(+), 46 deletions(-) diff --git a/src/figni-viewer.js b/src/figni-viewer.js index c78a0b1..c3cc9fc 100644 --- a/src/figni-viewer.js +++ b/src/figni-viewer.js @@ -57,6 +57,11 @@ const HELP = { const TIPS = { DRAG: 'drag', } +const EVENT = { + LOAD: new CustomEvent('load'), + PROGRESS: new CustomEvent('progress'), + ANIMATION_FINISHED: new CustomEvent('animation-finished'), +} export default class FigniViewerElement extends HTMLElement { // html element @@ -80,7 +85,6 @@ export default class FigniViewerElement extends HTMLElement { // private field #completedInitialModelLoad = false #visibleAllHotspots = true - #events = {} #ABTEST = { AR_BUTTON_TEST: '実物大で見る', @@ -147,6 +151,18 @@ export default class FigniViewerElement extends HTMLElement { // Figni Viewer Base if (!this.#figniViewerBase) { this.#figniViewerBase = document.createElement('figni-viewer-base') + // イベントの登録 + this.#figniViewerBase.addEventListener('load', () => { + this.dispatchEvent(EVENT.LOAD) + }) + this.#figniViewerBase.addEventListener('progress', (event) => { + this.dispatchEvent(EVENT.PROGRESS, { + detail: { progress: event.detail.totalProgress }, + }) + }) + this.#figniViewerBase.addEventListener('finished', () => { + this.dispatchEvent(EVENT.ANIMATION_FINISHED) + }) this.appendChild(this.#figniViewerBase) } @@ -316,7 +332,7 @@ export default class FigniViewerElement extends HTMLElement { } } if (!isLoop) { - this.#figniViewerBase.addEventListener('finished', onFinishFunc, { + this.addEventListener('animation-finished', onFinishFunc, { once: true, }) } else { @@ -783,12 +799,6 @@ export default class FigniViewerElement extends HTMLElement { }) } - #subscribeEventLinstener(element, eventName, tag, callback) { - element.removeEventListener(eventName, this.#events[tag]) - element.addEventListener(eventName, callback) - this.#events[tag] = callback - } - #modifyHotspot(hotspot) { hotspot.classList.add('figni-viewer-hotspot') hotspot.classList.add('figni-viewer-hotspot-highlight') @@ -821,7 +831,7 @@ export default class FigniViewerElement extends HTMLElement { hotspot.getAttribute('closeup') == '' const isVisible = hotspot.getAttribute('to-state') != null - this.#subscribeEventLinstener(hotspot, 'click', `${name}-data`, (e) => { + hotspot.addEventListener('click', (e) => { if (this.#clickableHotspot(hotspot)) { if (e.target === hotspot) { this.#figniViewerBase.incrementHotspotClickCount(name) @@ -832,7 +842,7 @@ export default class FigniViewerElement extends HTMLElement { }) if (isAnime) { - this.#subscribeEventLinstener(hotspot, 'click', `${name}-anime`, (e) => { + hotspot.addEventListener('click', (e) => { if (this.#clickableHotspot(hotspot)) { if (e.target === hotspot) { const clip = hotspot.getAttribute('clip') || null @@ -853,46 +863,36 @@ export default class FigniViewerElement extends HTMLElement { }) } if (isCloseup) { - this.#subscribeEventLinstener( - hotspot, - 'click', - `${name}-closeup`, - (e) => { - if (this.#clickableHotspot(hotspot)) { - if (e.target === hotspot) { - const target = - hotspot.getAttribute('target') || - hotspot.getAttribute('position') || - SETTINGS.DEFAULT_HOTSPOT_POSITION - const orbit = hotspot.getAttribute('orbit') || this.orbit - if ( - this.#figniViewerBase.cameraTarget === target && - this.#figniViewerBase.cameraOrbit === orbit - ) { - this.resetCameraTargetAndOrbit() - } else { - this.setCameraTarget(target) - this.setCameraOrbit(orbit) - } + hotspot.addEventListener('click', (e) => { + if (this.#clickableHotspot(hotspot)) { + if (e.target === hotspot) { + const target = + hotspot.getAttribute('target') || + hotspot.getAttribute('position') || + SETTINGS.DEFAULT_HOTSPOT_POSITION + const orbit = hotspot.getAttribute('orbit') || this.orbit + if ( + this.#figniViewerBase.cameraTarget === target && + this.#figniViewerBase.cameraOrbit === orbit + ) { + this.resetCameraTargetAndOrbit() + } else { + this.setCameraTarget(target) + this.setCameraOrbit(orbit) } } } - ) + }) } if (!isAnime && isVisible) { const state = hotspot.getAttribute('to-state') - this.#subscribeEventLinstener( - hotspot, - 'click', - `${name}-visible`, - (e) => { - if (this.#clickableHotspot(hotspot)) { - if (e.target === hotspot) { - this.updateState(state) - } + hotspot.addEventListener('click', (e) => { + if (this.#clickableHotspot(hotspot)) { + if (e.target === hotspot) { + this.updateState(state) } } - ) + }) } const panels = hotspot.querySelectorAll('[slot^="panel"]') @@ -900,7 +900,7 @@ export default class FigniViewerElement extends HTMLElement { this.#panels.forEach((panel) => { this.#modifyPanel(panel) }) - this.#subscribeEventLinstener(hotspot, 'click', `${name}-panel`, (e) => { + hotspot.addEventListener('click', (e) => { if (this.#clickableHotspot(hotspot)) { if (e.target == hotspot) { if (panels.length > 0) { @@ -1041,7 +1041,7 @@ export default class FigniViewerElement extends HTMLElement { this.#ABTEST.AR_BUTTON_TEST }` this.#arButton.classList.add('figni-viewer-ar-button') - this.#figniViewerBase.addEventListener('load', () => { + this.addEventListener('load', () => { if (this.#figniViewerBase.canActivateAR) { this.#arButton.setAttribute('slot', 'ar-button') } else { @@ -1179,10 +1179,10 @@ export default class FigniViewerElement extends HTMLElement { if (p === 1) { this.#hideLoadingPanel() this.openTipsPanel(TIPS.DRAG) - this.#figniViewerBase.removeEventListener('progress', progress) + this.removeEventListener('progress', progress) } } - this.#figniViewerBase.addEventListener('progress', progress) + this.addEventListener('progress', progress) } else { this.#loadingPanel.style.display = '' } From 54f3539f15b5af0dd487069c8e1acb8d3a042e04 Mon Sep 17 00:00:00 2001 From: Kohei Futatsuka Date: Fri, 27 May 2022 17:59:59 +0900 Subject: [PATCH 2/2] add events --- CHANGELOG.md | 1 + src/figni-viewer.js | 21 +++++++++------------ 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 53c2a05..60b3096 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/). - WebXR の起動をサポート - QR コード表示パネルにアニメーションを追加 - 有効なアニメーションの一覧を取得できるプロパティ(`availableAnimations`)を追加 +- `load`, `progress`, `finished` イベントを追加 ### Changed diff --git a/src/figni-viewer.js b/src/figni-viewer.js index c3cc9fc..8c4c781 100644 --- a/src/figni-viewer.js +++ b/src/figni-viewer.js @@ -57,11 +57,6 @@ const HELP = { const TIPS = { DRAG: 'drag', } -const EVENT = { - LOAD: new CustomEvent('load'), - PROGRESS: new CustomEvent('progress'), - ANIMATION_FINISHED: new CustomEvent('animation-finished'), -} export default class FigniViewerElement extends HTMLElement { // html element @@ -153,15 +148,17 @@ export default class FigniViewerElement extends HTMLElement { this.#figniViewerBase = document.createElement('figni-viewer-base') // イベントの登録 this.#figniViewerBase.addEventListener('load', () => { - this.dispatchEvent(EVENT.LOAD) + this.dispatchEvent(new CustomEvent('load')) }) - this.#figniViewerBase.addEventListener('progress', (event) => { - this.dispatchEvent(EVENT.PROGRESS, { - detail: { progress: event.detail.totalProgress }, - }) + this.#figniViewerBase.addEventListener('progress', (e) => { + this.dispatchEvent( + new CustomEvent('progress', { + detail: { progress: e.detail.totalProgress }, + }) + ) }) this.#figniViewerBase.addEventListener('finished', () => { - this.dispatchEvent(EVENT.ANIMATION_FINISHED) + this.dispatchEvent(new CustomEvent('finished')) }) this.appendChild(this.#figniViewerBase) } @@ -1171,7 +1168,7 @@ export default class FigniViewerElement extends HTMLElement { loadingProgressBar.appendChild(loadingText) this.appendChild(this.#loadingPanel) const progress = (e) => { - const p = e.detail.totalProgress + const p = e.detail.progress loadingProgressBar.style.setProperty( '--figni-viewer-progress', `${Math.ceil(p * 100)}%`