Merge pull request #148 from cynack/fix/hide_loading_panel

fix: 3D表示画面にmin-heightを設定

index.html

@@ -177,7 +177,6 @@ <h4>タイトル</h4>
       }
       figni-viewer {
         width: 100%;
-        height: 500px;
         --figni-viewer-primary: #e7b56a;
         --figni-viewer-secondary: #51a2ff;
         --figni-viewer-background: #faeac9;

src/figni-viewer-base.js

@@ -20,16 +20,11 @@ export default class FigniViewerBaseElement extends ModelViewerElement {
   #abtest = {}
   #events = {}
 
-  constructor() {
-    super()
-
-    // model-viewer setup
-    this.#setupModelViewer()
-  }
-
   async connectedCallback() {
     super.connectedCallback()
 
+    this.#setupModelViewer()
+
     const style = document.createElement('style')
     style.textContent = `
       :not(style[outline="none"]) {

src/figni-viewer.js

@@ -165,28 +165,28 @@ export default class FigniViewerElement extends HTMLElement {
 
   async connectedCallback() {
     // Figni Viewer Base
-    if (!this.#figniViewerBase) {
+    if (!this.base) {
       this.#figniViewerBase = document.createElement('figni-viewer-base')
       // イベントの登録
-      this.#figniViewerBase.addEventListener('load', () => {
+      this.base.addEventListener('load', () => {
         this.dispatchEvent(new CustomEvent('load'))
       })
-      this.#figniViewerBase.addEventListener('progress', (e) => {
+      this.base.addEventListener('progress', (e) => {
         this.dispatchEvent(
           new CustomEvent('progress', {
             detail: { progress: e.detail.totalProgress },
           })
         )
       })
-      this.#figniViewerBase.addEventListener('finished', () => {
+      this.base.addEventListener('finished', () => {
         this.dispatchEvent(new CustomEvent('animation-finished'))
       })
-      this.#figniViewerBase.addEventListener('camera-change', (e) => {
+      this.base.addEventListener('camera-change', (e) => {
         this.dispatchEvent(
           new CustomEvent('camera-change', { detail: e.detail })
         )
       })
-      this.appendChild(this.#figniViewerBase)
+      this.appendChild(this.base)
     }
 
     this.addEventListener('camera-change', (e) => {

src/style.scss

@@ -13,6 +13,7 @@ figni-viewer {
     flex-direction: column;
     height: 100%;
     width: 0;
+    min-height: 1px;
   }
   --figni-viewer-primary: #ff733b;
   --figni-viewer-secondary: #3b5eff;