@c4h/chuci 0.1.0 → 0.2.0

package/src/components/viewer/cc-viewer-image.ts

@@ -1,190 +1,190 @@
-import { CcViewerBase } from './cc-viewer-base'
-import Viewer from 'viewerjs'
-import viewerStyles from 'viewerjs/dist/viewer.css?inline'
-
-export class CcViewerImage extends CcViewerBase {
-  private viewer?: Viewer
-  private container?: HTMLDivElement
-  private imageUrl = ''
-  
-  protected doOpen(url: string): void {
-    this.imageUrl = url
-    
-    setTimeout(() => {
-      this.container = this.query('#imageContainer') ?? undefined
-      if (!this.container) return
-      
-      const img = document.createElement('img')
-      img.src = this.imageUrl
-      img.style.display = 'none'  // 元の画像を非表示に
-      
-      this.container.appendChild(img)
-      
-      // ViewerJSをインラインモードで使用して、独自のコンテナ内で表示
-      this.viewer = new Viewer(img, {
-        inline: true,  // インラインモードに変更
-        container: this.container,  // コンテナを指定
-        toolbar: {
-          zoomIn: true,
-          zoomOut: true,
-          oneToOne: true,
-          reset: true,
-          prev: false,
-          play: false,
-          next: false,
-          rotateLeft: true,
-          rotateRight: true,
-          flipHorizontal: true,
-          flipVertical: true,
-        },
-        navbar: false,
-        title: false,
-        keyboard: true,
-        backdrop: false,  // インラインモードでは背景を無効化
-        button: false,    // 閉じるボタンを無効化
-        movable: true,
-        zoomable: true,
-        rotatable: true,
-        scalable: true,
-        transition: true,
-        fullscreen: false,
-        ready: () => {
-          this.addNavigationListeners()
-        }
-      })
-      
-      // show()を呼ばない - インラインモードでは自動的に表示される
-    }, 0)
-  }
-  
-  protected doClose(): void {
-    if (this.viewer) {
-      this.viewer.destroy()
-      this.viewer = undefined
-    }
-    this.imageUrl = ''
-  }
-  
-  protected getViewerContent(): string {
-    return `
-      <div id="imageContainer">
-        ${this.isLoading ? '<div class="loading">Loading...</div>' : ''}
-      </div>
-    `
-  }
-  
-  protected getCustomStyles(): string {
-    const styles = this.css`
-      ${viewerStyles}
-      
-      :host {
-        --cc-viewer-z-index-each: 1000;
-      }
-      
-      #imageContainer {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: var(--cc-viewer-z-index-each, 1000);
-        background: rgba(0, 0, 0, 0.9);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      
-      /* ViewerJS inline mode adjustments */
-      .viewer-container {
-        width: 100% !important;
-        height: 100% !important;
-        position: relative !important;
-      }
-      
-      .viewer-canvas {
-        width: 100% !important;
-        height: 100% !important;
-      }
-      
-      /* Hide the original image */
-      #imageContainer > img {
-        display: none !important;
-      }
-      
-      /* Ensure viewer takes full space */
-      .viewer-container.viewer-inline {
-        width: 100% !important;
-        height: 100% !important;
-      }
-      
-      ${this.getNavigationStyles()}
-      
-      /* Override viewerjs styles for navigation */
-      :host ::ng-deep .viewer-container {
-        position: relative;
-      }
-    `
-    
-    return styles
-  }
-  
-  // Override to do setup after render
-  protected onAfterRender(): void {
-    if (!this.isShow || !this.imageUrl) return
-    
-    // Avoid duplicate initialization
-    if (this.viewer) return
-    
-    this.container = this.query('#imageContainer') as HTMLDivElement
-    if (!this.container) return
-    
-    const img = document.createElement('img')
-    img.src = this.imageUrl
-    img.style.display = 'none'  // 元の画像を非表示に
-    
-    this.container.appendChild(img)
-    
-    // ViewerJSをインラインモードで使用して、独自のコンテナ内で表示
-    this.viewer = new Viewer(img, {
-      inline: true,  // インラインモードに変更
-      container: this.container,  // コンテナを指定
-      toolbar: {
-        zoomIn: true,
-        zoomOut: true,
-        oneToOne: true,
-        reset: true,
-        prev: false,
-        play: false,
-        next: false,
-        rotateLeft: true,
-        rotateRight: true,
-        flipHorizontal: true,
-        flipVertical: true,
-      },
-      navbar: false,
-      title: false,
-      keyboard: true,
-      backdrop: false,  // インラインモードでは背景を無効化
-      button: false,    // 閉じるボタンを無効化
-      movable: true,
-      zoomable: true,
-      rotatable: true,
-      scalable: true,
-      transition: true,
-      fullscreen: false,
-      ready: () => {
-        this.isLoading = false
-      }
-    })
-  }
-}
-
-if (!customElements.get('cc-viewer-image')) {
-  customElements.define('cc-viewer-image', CcViewerImage)
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'cc-viewer-image': CcViewerImage
-  }
+import { CcViewerBase } from './cc-viewer-base'
+import Viewer from 'viewerjs'
+import viewerStyles from 'viewerjs/dist/viewer.css?inline'
+
+export class CcViewerImage extends CcViewerBase {
+  private viewer?: Viewer
+  private container?: HTMLDivElement
+  private imageUrl = ''
+  
+  protected doOpen(url: string): void {
+    this.imageUrl = url
+    
+    setTimeout(() => {
+      this.container = this.query('#imageContainer') ?? undefined
+      if (!this.container) return
+      
+      const img = document.createElement('img')
+      img.src = this.imageUrl
+      img.style.display = 'none'  // 元の画像を非表示に
+      
+      this.container.appendChild(img)
+      
+      // ViewerJSをインラインモードで使用して、独自のコンテナ内で表示
+      this.viewer = new Viewer(img, {
+        inline: true,  // インラインモードに変更
+        container: this.container,  // コンテナを指定
+        toolbar: {
+          zoomIn: true,
+          zoomOut: true,
+          oneToOne: true,
+          reset: true,
+          prev: false,
+          play: false,
+          next: false,
+          rotateLeft: true,
+          rotateRight: true,
+          flipHorizontal: true,
+          flipVertical: true,
+        },
+        navbar: false,
+        title: false,
+        keyboard: true,
+        backdrop: false,  // インラインモードでは背景を無効化
+        button: false,    // 閉じるボタンを無効化
+        movable: true,
+        zoomable: true,
+        rotatable: true,
+        scalable: true,
+        transition: true,
+        fullscreen: false,
+        ready: () => {
+          this.addNavigationListeners()
+        }
+      })
+      
+      // show()を呼ばない - インラインモードでは自動的に表示される
+    }, 0)
+  }
+  
+  protected doClose(): void {
+    if (this.viewer) {
+      this.viewer.destroy()
+      this.viewer = undefined
+    }
+    this.imageUrl = ''
+  }
+  
+  protected getViewerContent(): string {
+    return `
+      <div id="imageContainer">
+        ${this.isLoading ? '<div class="loading">Loading...</div>' : ''}
+      </div>
+    `
+  }
+  
+  protected getCustomStyles(): string {
+    const styles = this.css`
+      ${viewerStyles}
+      
+      :host {
+        --cc-viewer-z-index-each: 1000;
+      }
+      
+      #imageContainer {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: var(--cc-viewer-z-index-each, 1000);
+        background: rgba(0, 0, 0, 0.9);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      
+      /* ViewerJS inline mode adjustments */
+      .viewer-container {
+        width: 100% !important;
+        height: 100% !important;
+        position: relative !important;
+      }
+      
+      .viewer-canvas {
+        width: 100% !important;
+        height: 100% !important;
+      }
+      
+      /* Hide the original image */
+      #imageContainer > img {
+        display: none !important;
+      }
+      
+      /* Ensure viewer takes full space */
+      .viewer-container.viewer-inline {
+        width: 100% !important;
+        height: 100% !important;
+      }
+      
+      ${this.getNavigationStyles()}
+      
+      /* Override viewerjs styles for navigation */
+      :host ::ng-deep .viewer-container {
+        position: relative;
+      }
+    `
+    
+    return styles
+  }
+  
+  // Override to do setup after render
+  protected onAfterRender(): void {
+    if (!this.isShow || !this.imageUrl) return
+    
+    // Avoid duplicate initialization
+    if (this.viewer) return
+    
+    this.container = this.query('#imageContainer') as HTMLDivElement
+    if (!this.container) return
+    
+    const img = document.createElement('img')
+    img.src = this.imageUrl
+    img.style.display = 'none'  // 元の画像を非表示に
+    
+    this.container.appendChild(img)
+    
+    // ViewerJSをインラインモードで使用して、独自のコンテナ内で表示
+    this.viewer = new Viewer(img, {
+      inline: true,  // インラインモードに変更
+      container: this.container,  // コンテナを指定
+      toolbar: {
+        zoomIn: true,
+        zoomOut: true,
+        oneToOne: true,
+        reset: true,
+        prev: false,
+        play: false,
+        next: false,
+        rotateLeft: true,
+        rotateRight: true,
+        flipHorizontal: true,
+        flipVertical: true,
+      },
+      navbar: false,
+      title: false,
+      keyboard: true,
+      backdrop: false,  // インラインモードでは背景を無効化
+      button: false,    // 閉じるボタンを無効化
+      movable: true,
+      zoomable: true,
+      rotatable: true,
+      scalable: true,
+      transition: true,
+      fullscreen: false,
+      ready: () => {
+        this.isLoading = false
+      }
+    })
+  }
+}
+
+if (!customElements.get('cc-viewer-image')) {
+  customElements.define('cc-viewer-image', CcViewerImage)
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cc-viewer-image': CcViewerImage
+  }
 }

package/src/components/viewer/cc-viewer-panorama.ts

@@ -1,86 +1,86 @@
-import { CcViewerBase } from './cc-viewer-base'
-
-export class CcViewerPanorama extends CcViewerBase {
-  private imgUrl = ''
-  
-  static get observedAttributes() {
-    return ['show']
-  }
-  
-  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
-    if (name === 'show') {
-      this.isShow = newValue === 'true'
-    }
-    super.attributeChangedCallback(name, oldValue, newValue)
-  }
-  
-  protected doOpen(imgUrl: string): void {
-    this.imgUrl = imgUrl
-  }
-  
-  protected doClose(): void {
-    const iframeEl = this.query('.iframe') as HTMLIFrameElement
-    if (iframeEl) {
-      iframeEl.srcdoc = ''
-    }
-    this.imgUrl = ''
-  }
-  
-  protected getViewerContent(): string {
-    return `<iframe class="iframe"></iframe>`
-  }
-  
-  protected getCustomStyles(): string {
-    return `
-      .iframe {
-        width: 100%;
-        height: 100%;
-        border: 0;
-      }
-    `
-  }
-  
-  protected onAfterRender(): void {
-    if (this.imgUrl && this.isShow) {
-      const iframeEl = this.query('.iframe') as HTMLIFrameElement
-      if (iframeEl) {
-        const iframeHtml = `
-          <!DOCTYPE html>
-          <html>
-            <head>
-              <title>A-Frame Panorama</title>
-              <style>
-              html,body {
-                width:100%;
-                height:100vh;
-                overflow: hidden;
-              }
-              .a-enter-vr, .a-enter-ar {
-                display: none;
-              }
-              </style>
-              <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
-            </head>
-            <body>
-              <a-scene embedded xr-mode-ui="enabled: false; XRMode: false;">
-                <a-sky src="${this.imgUrl}" rotation="0 -90 0"></a-sky>
-                <a-entity camera look-controls="reverseMouseDrag: true"></a-entity>
-              </a-scene>
-            </body>
-          </html>
-        `
-        iframeEl.srcdoc = iframeHtml
-      }
-    }
-  }
-}
-
-if (!customElements.get('cc-viewer-panorama')) {
-  customElements.define('cc-viewer-panorama', CcViewerPanorama)
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'cc-viewer-panorama': CcViewerPanorama
-  }
+import { CcViewerBase } from './cc-viewer-base'
+
+export class CcViewerPanorama extends CcViewerBase {
+  private imgUrl = ''
+  
+  static get observedAttributes() {
+    return ['show']
+  }
+  
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+    if (name === 'show') {
+      this.isShow = newValue === 'true'
+    }
+    super.attributeChangedCallback(name, oldValue, newValue)
+  }
+  
+  protected doOpen(imgUrl: string): void {
+    this.imgUrl = imgUrl
+  }
+  
+  protected doClose(): void {
+    const iframeEl = this.query('.iframe') as HTMLIFrameElement
+    if (iframeEl) {
+      iframeEl.srcdoc = ''
+    }
+    this.imgUrl = ''
+  }
+  
+  protected getViewerContent(): string {
+    return `<iframe class="iframe"></iframe>`
+  }
+  
+  protected getCustomStyles(): string {
+    return `
+      .iframe {
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
+    `
+  }
+  
+  protected onAfterRender(): void {
+    if (this.imgUrl && this.isShow) {
+      const iframeEl = this.query('.iframe') as HTMLIFrameElement
+      if (iframeEl) {
+        const iframeHtml = `
+          <!DOCTYPE html>
+          <html>
+            <head>
+              <title>A-Frame Panorama</title>
+              <style>
+              html,body {
+                width:100%;
+                height:100vh;
+                overflow: hidden;
+              }
+              .a-enter-vr, .a-enter-ar {
+                display: none;
+              }
+              </style>
+              <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
+            </head>
+            <body>
+              <a-scene embedded xr-mode-ui="enabled: false; XRMode: false;">
+                <a-sky src="${this.imgUrl}" rotation="0 -90 0"></a-sky>
+                <a-entity camera look-controls="reverseMouseDrag: true"></a-entity>
+              </a-scene>
+            </body>
+          </html>
+        `
+        iframeEl.srcdoc = iframeHtml
+      }
+    }
+  }
+}
+
+if (!customElements.get('cc-viewer-panorama')) {
+  customElements.define('cc-viewer-panorama', CcViewerPanorama)
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cc-viewer-panorama': CcViewerPanorama
+  }
 }

package/src/components/viewer/cc-viewer-styles.ts

@@ -1,56 +1,56 @@
-export const viewerStyles = `
-  :host {
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: var(--cc-viewer-z-index, 1000);
-  }
-  
-  .viewer-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.9);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .viewer-content {
-    position: relative;
-    max-width: 90%;
-    max-height: 90%;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .close-button {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    background: rgba(0, 0, 0, 0.5);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    width: 48px;
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: background 0.3s;
-    z-index: 10;
-  }
-  
-  .close-button:hover {
-    background: rgba(0, 0, 0, 0.7);
-  }
+export const viewerStyles = `
+  :host {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: var(--cc-viewer-z-index, 1000);
+  }
+  
+  .viewer-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .viewer-content {
+    position: relative;
+    max-width: 90%;
+    max-height: 90%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .close-button {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 0.3s;
+    z-index: 10;
+  }
+  
+  .close-button:hover {
+    background: rgba(0, 0, 0, 0.7);
+  }
 `