@operato/scene-visualizer 10.0.0-beta.1 → 10.0.0-beta.3

package/dist/editors/property-editor-gltf-info.d.ts

@@ -6,11 +6,18 @@ import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
 import { Component } from '@hatiolab/things-scene';
 export default class GLTFInfoEditor extends OxPropertyEditor {
     static styles: import("lit").CSSResult[];
-    src?: string;
+    src: string | undefined;
     width: number;
     height: number;
     depth: number;
+    constructor();
     editorTemplate(value: any, spec: PropertySpec): TemplateResult;
+    private _applyAction;
+    /**
+     * 현재 컴포넌트의 W/H/D 중 가장 큰 값을 기준으로,
+     * 원래 모델의 비율에 맞게 나머지 치수를 조절한다.
+     */
+    private _applyProportional;
     updated(changes: PropertyValues<this>): void;
     fetchSourceInfo(component: Component, src: string): Promise<unknown>;
 }

package/dist/editors/property-editor-gltf-info.js

@@ -35,16 +35,23 @@ let GLTFInfoEditor = class GLTFInfoEditor extends OxPropertyEditor {
         font-weight: bold;
       }
 
-      div[info] md-elevated-button {
+      .buttons {
+        display: flex;
+        gap: 4px;
         margin-left: auto;
+      }
+
+      .buttons md-elevated-button {
         --md-icon-size: 24px;
       }
     `
     ];
-    src;
-    width = 0;
-    height = 0;
-    depth = 0;
+    constructor() {
+        super();
+        this.width = 0;
+        this.height = 0;
+        this.depth = 0;
+    }
     editorTemplate(value, spec) {
         const valid = this.width && this.height && this.depth;
         var property = spec.property || {};
@@ -58,32 +65,81 @@ let GLTFInfoEditor = class GLTFInfoEditor extends OxPropertyEditor {
             <div label>[W x H x D] :</div>
             ${valid
             ? html ` <div value>${this.width} x ${this.height} x ${this.depth}</div>
-                  <md-elevated-button
-                    @click=${(e) => {
-                this.dispatchEvent(new CustomEvent('i-need-selected', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        callback: (selected) => {
-                            typeof action === 'function' &&
-                                action(selected[0], {
-                                    width: this.width,
-                                    height: this.height,
-                                    depth: this.depth
-                                });
-                        }
-                    }
-                }));
+                  <div class="buttons">
+                    <md-elevated-button
+                      title="원래 크기로 설정"
+                      @click=${() => {
+                this._applyAction(action, {
+                    width: this.width,
+                    height: this.height,
+                    depth: this.depth
+                });
             }}
-                  >
-                    <md-icon>autorenew</md-icon>
-                  </md-elevated-button>`
+                    >
+                      <md-icon>autorenew</md-icon>
+                    </md-elevated-button>
+                    <md-elevated-button
+                      title="현재 크기에 비율 맞춤"
+                      @click=${() => this._applyProportional(action)}
+                    >
+                      <md-icon>aspect_ratio</md-icon>
+                    </md-elevated-button>
+                  </div>`
             : html ` <div></div> `}
           </div>
         </div>
       </fieldset>
     `;
     }
+    _applyAction(action, dimension) {
+        this.dispatchEvent(new CustomEvent('i-need-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                callback: (selected) => {
+                    typeof action === 'function' && action(selected[0], dimension);
+                }
+            }
+        }));
+    }
+    /**
+     * 현재 컴포넌트의 W/H/D 중 가장 큰 값을 기준으로,
+     * 원래 모델의 비율에 맞게 나머지 치수를 조절한다.
+     */
+    _applyProportional(action) {
+        this.dispatchEvent(new CustomEvent('i-need-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                callback: (selected) => {
+                    const component = selected[0];
+                    if (!component || typeof action !== 'function')
+                        return;
+                    const { width: cw = 1, height: ch = 1, depth: cd = 1 } = component.state;
+                    const { width: ow, height: oh, depth: od } = this; // 원래 모델 치수
+                    if (!ow || !oh || !od)
+                        return;
+                    // 현재 치수 중 가장 큰 값과, 그에 대응하는 원래 모델 치수로 scale 계산
+                    const maxCurrent = Math.max(cw, ch, cd);
+                    let scale;
+                    if (maxCurrent === cw) {
+                        scale = cw / ow;
+                    }
+                    else if (maxCurrent === ch) {
+                        scale = ch / oh;
+                    }
+                    else {
+                        scale = cd / od;
+                    }
+                    action(component, {
+                        width: Math.round(ow * scale),
+                        height: Math.round(oh * scale),
+                        depth: Math.round(od * scale)
+                    });
+                }
+            }
+        }));
+    }
     updated(changes) {
         if (changes.has('src')) {
             this.dispatchEvent(new CustomEvent('i-need-selected', {

package/dist/editors/property-editor-gltf-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-editor-gltf-info.js","sourceRoot":"","sources":["../../src/editors/property-editor-gltf-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { Component } from '@hatiolab/things-scene'\n\nimport * as THREE from 'three'\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'\n\nconst EXT_SPECGLOSS = 'KHR_materials_pbrSpecularGlossiness'\n\nclass SpecGlossCompat {\n  name = EXT_SPECGLOSS\n  extendMaterialParams() {\n    return Promise.resolve()\n  }\n}\n\nfunction registerSpecGlossCompat(loader: GLTFLoader) {\n  loader.register(() => new SpecGlossCompat())\n}\n\n@customElement('property-editor-gltf-info')\nexport default class GLTFInfoEditor extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      div[info] {\n        display: flex;\n        flex-direction: row;\n        font-size: 12px;\n      }\n\n      div[info] * {\n        align-self: center;\n      }\n\n      div[info] title {\n        font-weight: bold;\n      }\n\n      div[info] md-elevated-button {\n        margin-left: auto;\n        --md-icon-size: 24px;\n      }\n    `\n  ]\n\n  @property({ type: String }) src?: string\n\n  @state() width: number = 0\n  @state() height: number = 0\n  @state() depth: number = 0\n\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    const valid = this.width && this.height && this.depth\n\n    var property = spec.property || {}\n    var { action } = property\n\n    return html`\n      <fieldset fullwidth>\n        <legend><ox-i18n msgid=\"label.gltf-info\">GLTF info.</ox-i18n></legend>\n\n        <div>\n          <div info>\n            <div label>[W x H x D] :</div>\n            ${valid\n              ? html` <div value>${this.width} x ${this.height} x ${this.depth}</div>\n                  <md-elevated-button\n                    @click=${(e: MouseEvent) => {\n                      this.dispatchEvent(\n                        new CustomEvent('i-need-selected', {\n                          bubbles: true,\n                          composed: true,\n                          detail: {\n                            callback: (selected: any[]) => {\n                              typeof action === 'function' &&\n                                action(selected[0], {\n                                  width: this.width,\n                                  height: this.height,\n                                  depth: this.depth\n                                })\n                            }\n                          }\n                        })\n                      )\n                    }}\n                  >\n                    <md-icon>autorenew</md-icon>\n                  </md-elevated-button>`\n              : html` <div></div> `}\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('src')) {\n      this.dispatchEvent(\n        new CustomEvent('i-need-selected', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            callback: async (selected: any[]) => {\n              await this.fetchSourceInfo(selected[0], this.src!)\n            }\n          }\n        })\n      )\n    }\n  }\n\n  async fetchSourceInfo(component: Component, src: string) {\n    if (!src || !src.trim()) {\n      return\n    }\n\n    try {\n      const path = component.app.url(src)\n\n      let gltfLoader = new GLTFLoader()\n      registerSpecGlossCompat(gltfLoader)\n\n      gltfLoader.setCrossOrigin('use-credentials')\n\n      return new Promise((resolve: any) => {\n        gltfLoader.load(path, gltf => {\n          var box = new THREE.Box3().setFromObject(gltf.scene)\n          var { x, y, z } = box.getSize(new THREE.Vector3())\n\n          this.width = Math.floor(x)\n          this.depth = Math.floor(y)\n          this.height = Math.floor(z)\n\n          resolve()\n        })\n      })\n    } catch (e) {\n      console.error(e)\n      return\n    }\n  }\n}\n"]}
+{"version":3,"file":"property-editor-gltf-info.js","sourceRoot":"","sources":["../../src/editors/property-editor-gltf-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { Component } from '@hatiolab/things-scene'\n\nimport * as THREE from 'three'\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'\n\nconst EXT_SPECGLOSS = 'KHR_materials_pbrSpecularGlossiness'\n\nclass SpecGlossCompat {\n  name = EXT_SPECGLOSS\n  extendMaterialParams() {\n    return Promise.resolve()\n  }\n}\n\nfunction registerSpecGlossCompat(loader: GLTFLoader) {\n  loader.register(() => new SpecGlossCompat())\n}\n\n@customElement('property-editor-gltf-info')\nexport default class GLTFInfoEditor extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      div[info] {\n        display: flex;\n        flex-direction: row;\n        font-size: 12px;\n      }\n\n      div[info] * {\n        align-self: center;\n      }\n\n      div[info] title {\n        font-weight: bold;\n      }\n\n      .buttons {\n        display: flex;\n        gap: 4px;\n        margin-left: auto;\n      }\n\n      .buttons md-elevated-button {\n        --md-icon-size: 24px;\n      }\n    `\n  ]\n\n  @property({ type: String }) declare src: string | undefined\n\n  @state() declare width: number\n  @state() declare height: number\n  @state() declare depth: number\n\n  constructor() {\n    super()\n    this.width = 0\n    this.height = 0\n    this.depth = 0\n  }\n\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    const valid = this.width && this.height && this.depth\n\n    var property = spec.property || {}\n    var { action } = property\n\n    return html`\n      <fieldset fullwidth>\n        <legend><ox-i18n msgid=\"label.gltf-info\">GLTF info.</ox-i18n></legend>\n\n        <div>\n          <div info>\n            <div label>[W x H x D] :</div>\n            ${valid\n              ? html` <div value>${this.width} x ${this.height} x ${this.depth}</div>\n                  <div class=\"buttons\">\n                    <md-elevated-button\n                      title=\"원래 크기로 설정\"\n                      @click=${() => {\n                        this._applyAction(action, {\n                          width: this.width,\n                          height: this.height,\n                          depth: this.depth\n                        })\n                      }}\n                    >\n                      <md-icon>autorenew</md-icon>\n                    </md-elevated-button>\n                    <md-elevated-button\n                      title=\"현재 크기에 비율 맞춤\"\n                      @click=${() => this._applyProportional(action)}\n                    >\n                      <md-icon>aspect_ratio</md-icon>\n                    </md-elevated-button>\n                  </div>`\n              : html` <div></div> `}\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _applyAction(action: any, dimension: { width: number; height: number; depth: number }) {\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            typeof action === 'function' && action(selected[0], dimension)\n          }\n        }\n      })\n    )\n  }\n\n  /**\n   * 현재 컴포넌트의 W/H/D 중 가장 큰 값을 기준으로,\n   * 원래 모델의 비율에 맞게 나머지 치수를 조절한다.\n   */\n  private _applyProportional(action: any) {\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            const component = selected[0]\n            if (!component || typeof action !== 'function') return\n\n            const { width: cw = 1, height: ch = 1, depth: cd = 1 } = component.state\n            const { width: ow, height: oh, depth: od } = this // 원래 모델 치수\n\n            if (!ow || !oh || !od) return\n\n            // 현재 치수 중 가장 큰 값과, 그에 대응하는 원래 모델 치수로 scale 계산\n            const maxCurrent = Math.max(cw, ch, cd)\n            let scale: number\n\n            if (maxCurrent === cw) {\n              scale = cw / ow\n            } else if (maxCurrent === ch) {\n              scale = ch / oh\n            } else {\n              scale = cd / od\n            }\n\n            action(component, {\n              width: Math.round(ow * scale),\n              height: Math.round(oh * scale),\n              depth: Math.round(od * scale)\n            })\n          }\n        }\n      })\n    )\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('src')) {\n      this.dispatchEvent(\n        new CustomEvent('i-need-selected', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            callback: async (selected: any[]) => {\n              await this.fetchSourceInfo(selected[0], this.src!)\n            }\n          }\n        })\n      )\n    }\n  }\n\n  async fetchSourceInfo(component: Component, src: string) {\n    if (!src || !src.trim()) {\n      return\n    }\n\n    try {\n      const path = component.app.url(src)\n\n      let gltfLoader = new GLTFLoader()\n      registerSpecGlossCompat(gltfLoader)\n\n      gltfLoader.setCrossOrigin('use-credentials')\n\n      return new Promise((resolve: any) => {\n        gltfLoader.load(path, gltf => {\n          var box = new THREE.Box3().setFromObject(gltf.scene)\n          var { x, y, z } = box.getSize(new THREE.Vector3())\n\n          this.width = Math.floor(x)\n          this.depth = Math.floor(y)\n          this.height = Math.floor(z)\n\n          resolve()\n        })\n      })\n    } catch (e) {\n      console.error(e)\n      return\n    }\n  }\n}\n"]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/scene-visualizer",
   "description": "visualizer component for operato-scene",
   "author": "heartyoh",
-  "version": "10.0.0-beta.1",
+  "version": "10.0.0-beta.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -63,5 +63,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "bb127dd516b9e962fb2d0a24bc2d8c5e108f06fb"
+  "gitHead": "11790eeafaf6b7949e2f44e2ae670c0364c3a47d"
 }

package/dist/banner.d.ts

@@ -1,244 +0,0 @@
-import * as THREE from 'three';
-import { Component, ComponentNature, Shape, RealObject } from '@hatiolab/things-scene';
-export declare class Banner3D extends RealObject {
-    build(): void;
-    createCube(w: number, h: number, d: number): THREE.Mesh<THREE.BoxGeometry, THREE.MeshStandardMaterial, THREE.Object3DEventMap>;
-    createTextureBoard(w: number, h: number): THREE.Mesh<THREE.PlaneGeometry, THREE.MeshStandardMaterial, THREE.Object3DEventMap>;
-}
-declare const Banner_base: (new (...args: any[]) => {
-    contains(x: any, y: any): boolean;
-    get path(): {
-        x: any;
-        y: any;
-    }[];
-    set path(path: {
-        x: any;
-        y: any;
-    }[]): any;
-    get anchors(): {
-        name: string;
-        position: {
-            x: any;
-            y: any;
-        };
-    }[];
-    get bounds(): any;
-    set bounds(bounds: any): any;
-    render(ctx: any): void;
-    _app: any;
-    _model: any;
-    _state: any;
-    _delta: any;
-    _animation: any;
-    _animate: any;
-    _parent: any;
-    _disposed: any;
-    _textHidden: any;
-    _text_substitutor: any;
-    _value_substitutor: any;
-    _mappings: any;
-    _realObject: import("@hatiolab/things-scene").IRealObject | undefined;
-    _cachedState: any;
-    updatedAt: any;
-    fontSize: any;
-    __cache__: any;
-    created(): void;
-    added(parent: any): void;
-    removed(parent: any): void;
-    ready(): Promise<void>;
-    touch(): void;
-    clearCache(...attrs: any[]): void;
-    removeSelf(completely: any): void;
-    resetAnimation(): void;
-    dispose(): void;
-    get nature(): import("@hatiolab/things-scene").ComponentNature;
-    get disposed(): boolean;
-    isLayer(): boolean;
-    isGroup(): boolean;
-    isContainer(): this is import("@hatiolab/things-scene/dist-types/types/component").Container;
-    isLine(): boolean;
-    isRoot(): boolean;
-    isRootModel(): boolean;
-    is3dish(): boolean;
-    isIn3DSpace(): boolean;
-    isTemplate(): boolean;
-    isHTMLElement(): boolean;
-    isConnectable(): boolean;
-    isIdentifiable(): boolean;
-    isPositionable(): boolean;
-    replaceRefids(replaceMap: any): void;
-    get(property: any): any;
-    set(props: any, propval?: any): any;
-    getState(property: any): any;
-    setState(props: any, propval?: any): any;
-    get model(): any;
-    get state(): any;
-    get hierarchy(): any;
-    get volatile(): never[];
-    _applyProps(target: any, props: any, options: any): any;
-    move(offset: {
-        x: number;
-        y: number;
-    }, ...args: boolean[]): void;
-    symmetryX(x?: number): void;
-    symmetryY(y: number): void;
-    adjustResize(bounds: import("@hatiolab/things-scene").BOUNDS, origin_bounds: import("@hatiolab/things-scene").BOUNDS, diagonal: boolean): any;
-    adjustRotation(rotation: number, step: boolean): any;
-    outline(progress: number): any;
-    get center(): import("@hatiolab/things-scene").POINT;
-    set center(p: import("@hatiolab/things-scene").POINT): any;
-    get location(): import("@hatiolab/things-scene").POINT;
-    set location(l: import("@hatiolab/things-scene").POINT): any;
-    get rotate(): import("@hatiolab/things-scene").POINT;
-    set rotate(r: import("@hatiolab/things-scene").POINT): any;
-    get dimension(): import("@hatiolab/things-scene").DIMENSION;
-    set dimension(d: import("@hatiolab/things-scene").DIMENSION): any;
-    get drawPath(): import("@hatiolab/things-scene").POINT[];
-    get rotatePoint(): import("@hatiolab/things-scene").POINT;
-    get mutable(): boolean;
-    get resizable(): boolean;
-    get rotatable(): boolean;
-    buildRealObject(): import("@hatiolab/things-scene").IRealObject | undefined;
-    get realObject(): import("@hatiolab/things-scene").IRealObject | undefined;
-    draw(context?: import("@hatiolab/things-scene").SceneRenderContext): void;
-    prerender(context: import("@hatiolab/things-scene").SceneRenderContext): void;
-    postrender(context: import("@hatiolab/things-scene").SceneRenderContext): void;
-    prepare(resolve: (component: Component) => void, reject: (reason: any) => void): void;
-    prepareIf(condition: boolean): void;
-    drawText(context: import("@hatiolab/things-scene").SceneRenderContext): void;
-    drawStroke(context: import("@hatiolab/things-scene").SceneRenderContext, override?: Record<string, unknown>): void;
-    drawFill(context: import("@hatiolab/things-scene").SceneRenderContext, override?: Record<string, unknown>): void;
-    get strokeStyle(): any;
-    set strokeStyle(v: any): any;
-    get fillStyle(): any;
-    set fillStyle(v: any): any;
-    get fontColor(): string;
-    set fontColor(v: string): any;
-    get rotation(): number;
-    set rotation(v: number): any;
-    get decorators(): string[];
-    get decotag(): string;
-    get hidden(): boolean;
-    set hidden(v: boolean): any;
-    get tag(): string;
-    set tag(v: string): any;
-    get appendum(): any;
-    set appendum(v: any): any;
-    defaultTextSubstitutor(): any;
-    textLines(context?: import("@hatiolab/things-scene").SceneRenderContext): any;
-    get font(): string;
-    get lineHeight(): number;
-    get textSubstitutor(): () => string;
-    get text(): string;
-    set text(v: string): any;
-    get textBounds(): import("@hatiolab/things-scene").BOUNDS;
-    get textRotation(): number;
-    get textHidden(): boolean;
-    set textHidden(v: boolean): any;
-    get hasTextProperty(): boolean;
-    animate(opts: import("@hatiolab/things-scene/dist-types/animation/interfaces").AnimationConfig): any;
-    effect(context: import("@hatiolab/things-scene").SceneRenderContext, model: any): any;
-    serialize(...others: any[]): any;
-    trim(): void;
-    closeScene(data: any): void;
-    delta(attr?: string | object, value?: any): any;
-    invalidate(): void;
-    get value(): any;
-    set value(v: any): any;
-    get data(): any;
-    set data(v: any): any;
-    set tap(v: any): any;
-    get mappings(): any[];
-    get retention(): number;
-    get animation(): import("@hatiolab/things-scene/dist-types/animation/interfaces").AnimationController | undefined;
-    get started(): boolean;
-    set started(v: boolean): any;
-    get controls(): import("@hatiolab/things-scene").Control[] | undefined;
-    findFirst(finder: string | ((c: Component) => boolean), ...others: any[]): any;
-    findAll(s: string | ((c: Component) => boolean), ...others: any[]): any;
-    capture(x: number, y: number, except?: (c: Component) => boolean): any;
-    findAnchor(name: string): any;
-    isDescendible(container: Component): any;
-    getContext(component?: unknown): any;
-    get root(): Component;
-    get rootModel(): Component;
-    get parent(): Component;
-    set parent(v: Component): any;
-    get scalable(): boolean;
-    get stuck(): boolean;
-    get capturable(): boolean;
-    get position(): string;
-    get origin(): string;
-    get offset(): import("@hatiolab/things-scene").POINT;
-    get app(): import("@hatiolab/things-scene").ApplicationContext;
-    drawEffect(context: import("@hatiolab/things-scene").SceneRenderContext): void;
-    prepareFill(resolve: Function, reject: Function): void;
-    prepareFillIf(condition: boolean): void;
-    onchangeFill(after: Record<string, any>, before: Record<string, any>): void;
-    drawImage(context: import("@hatiolab/things-scene").SceneRenderContext, image: HTMLImageElement, left: number, top: number, width: number, height: number): void;
-    mutateBounds(logic: ((bounds: import("@hatiolab/things-scene").BOUNDS) => import("@hatiolab/things-scene").BOUNDS | void) | null, context?: any): void;
-    mutatePath(beforeLogic: ((path: import("@hatiolab/things-scene").POINT[]) => import("@hatiolab/things-scene").POINT[] | void) | null, afterLogic: ((path: import("@hatiolab/things-scene").POINT[]) => import("@hatiolab/things-scene").POINT[] | void) | null, context?: any): void;
-    access(accessor: string, data: any): any;
-    substitute(template: string, data: any): any;
-    onchangeMappings(after: Record<string, any>, before: Record<string, any>): void;
-    onchangeData(after: Record<string, any>, before: Record<string, any>): void;
-    buildMappings(): void;
-    executeMappings(force?: boolean): void;
-    disposeMappings(): void;
-    ondropfile(transfered: FileList, files: string[]): void;
-    transcoordS2P(x: number, y: number, rp?: import("@hatiolab/things-scene").POINT): import("@hatiolab/things-scene").POINT;
-    transcoordP2S(x: number, y: number, rp?: import("@hatiolab/things-scene").POINT): import("@hatiolab/things-scene").POINT;
-    transcoordS2T(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
-    transcoordT2P(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
-    transcoordT2S(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
-    transcoordS2TR(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
-    transcoordS2O(x: number, y: number, target: Component): import("@hatiolab/things-scene").POINT;
-    transcoordC2S(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
-    transcoordS2C(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
-    toParent(x: number, y: number, rp?: import("@hatiolab/things-scene").POINT): import("@hatiolab/things-scene").POINT;
-    fromParent(x: number, y: number, rp?: import("@hatiolab/things-scene").POINT): import("@hatiolab/things-scene").POINT;
-    toScene(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
-    fromScene(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
-    toLocal(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
-    toGlobal(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
-    toOther(x: number, y: number, target: Component): import("@hatiolab/things-scene").POINT;
-    on(name: string | object, callback: Function, context?: any): any;
-    off(name?: string | object, callback?: Function, context?: any): any;
-    once(name: string | object, callback: Function, context?: any): any;
-    trigger(name: string, ...args: any[]): any;
-    delegate_on(delegator: any): any;
-    delegate_off(delegator: any): any;
-    onchange(after: Record<string, any>, before: Record<string, any>): void;
-    calculateBounds?(): void;
-    oncreate_element?(element: HTMLElement): void;
-    removeComponent(component: Component, ghost?: boolean): void;
-    addComponent(component: Component, ghost?: boolean): void;
-    insertComponentAt(component: Component, index: number, ghost?: boolean): void;
-    getOverlay(component: Component): HTMLElement | undefined;
-    findById(id: string): Component | undefined;
-    findByRefid(ref: string | number): Component | undefined;
-    findAllById(id: string): Component[];
-    resize(): void;
-    fit(type?: string): void;
-    get components(): Component[] | undefined;
-    get layout(): any;
-    get auxOverlay(): HTMLElement | undefined;
-    get isReady(): boolean;
-    get unitScale(): number;
-    get selected(): Component[];
-    set selected(_v: Component[]): any;
-    get focused(): Component | null;
-    set focused(_v: Component | null): any;
-    get hasSameParentForAllSelected(): boolean;
-    set hasSameParentForAllSelected(_v: boolean): any;
-    get fitMode(): string | undefined;
-    set fitMode(_v: string | undefined): any;
-    get element(): HTMLElement | null;
-    set element(_v: HTMLElement | null): any;
-}) & typeof Shape;
-export declare class Banner extends Banner_base {
-    is3dish(): boolean;
-    get nature(): ComponentNature;
-    buildRealObject(): RealObject | undefined;
-}
-export {};

package/dist/banner.js

@@ -1,75 +0,0 @@
-import { __decorate } from "tslib";
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import * as THREE from 'three';
-import { RectPath, Shape, sceneComponent, RealObject } from '@hatiolab/things-scene';
-const NATURE = {
-    mutable: false,
-    resizable: true,
-    rotatable: true,
-    properties: [
-        {
-            type: 'color',
-            label: 'box-color',
-            name: 'boxColor',
-            property: 'boxColor'
-        }
-    ],
-    help: 'scene/component/banner'
-};
-export class Banner3D extends RealObject {
-    build() {
-        super.build();
-        var { width = 1, height = 1, depth = 1 } = this.component.state;
-        this.object3d.add(this.createCube(width, height, depth));
-        let textureBoard = this.createTextureBoard(width, depth);
-        textureBoard.position.set(0, 0, 0.5 * height + 1);
-        this.object3d.add(textureBoard);
-    }
-    createCube(w, h, d) {
-        var { boxColor = '#ccaa76' } = this.component.state;
-        var geometry = new THREE.BoxGeometry(w, d, h);
-        var material = new THREE.MeshStandardMaterial({
-            color: boxColor,
-            side: THREE.FrontSide
-        });
-        var cube = new THREE.Mesh(geometry, material);
-        cube.castShadow = true;
-        return cube;
-    }
-    createTextureBoard(w, h) {
-        var boardMaterial;
-        let { fillStyle = '#ccaa76' } = this.component.state;
-        const texture = RealObject.buildFillStyleTexture(this.component);
-        if (texture) {
-            boardMaterial = new THREE.MeshStandardMaterial({ map: texture });
-        }
-        else {
-            boardMaterial = new THREE.MeshStandardMaterial({
-                color: fillStyle || '#ccaa76',
-                side: THREE.FrontSide
-            });
-        }
-        var boardGeometry = new THREE.PlaneGeometry(w, h, 1, 1);
-        var boardMesh = new THREE.Mesh(boardGeometry, boardMaterial);
-        boardMesh.castShadow = true;
-        return boardMesh;
-    }
-}
-let Banner = class Banner extends RectPath(Shape) {
-    is3dish() {
-        return true;
-    }
-    get nature() {
-        return NATURE;
-    }
-    buildRealObject() {
-        return new Banner3D(this);
-    }
-};
-Banner = __decorate([
-    sceneComponent('banner')
-], Banner);
-export { Banner };
-//# sourceMappingURL=banner.js.map

package/dist/banner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"banner.js","sourceRoot":"","sources":["../src/banner.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport * as THREE from 'three'\nimport { Component, ComponentNature, RectPath, Shape, sceneComponent, RealObject, RealObjectMesh } from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'color',\n      label: 'box-color',\n      name: 'boxColor',\n      property: 'boxColor'\n    }\n  ],\n  help: 'scene/component/banner'\n}\n\nexport class Banner3D extends RealObject {\n  build() {\n    super.build()\n\n    var { width = 1, height = 1, depth = 1 } = this.component.state\n\n    this.object3d.add(this.createCube(width, height, depth))\n\n    let textureBoard = this.createTextureBoard(width, depth)\n    textureBoard.position.set(0, 0, 0.5 * height + 1)\n    this.object3d.add(textureBoard)\n  }\n\n  createCube(w: number, h: number, d: number) {\n    var { boxColor = '#ccaa76' } = this.component.state\n\n    var geometry = new THREE.BoxGeometry(w, d, h)\n    var material = new THREE.MeshStandardMaterial({\n      color: boxColor,\n      side: THREE.FrontSide\n    })\n\n    var cube = new THREE.Mesh(geometry, material)\n    cube.castShadow = true\n\n    return cube\n  }\n\n  createTextureBoard(w: number, h: number) {\n    var boardMaterial\n\n    let { fillStyle = '#ccaa76' } = this.component.state\n    const texture = RealObject.buildFillStyleTexture(this.component)\n\n    if (texture) {\n      boardMaterial = new THREE.MeshStandardMaterial({ map: texture })\n    } else {\n      boardMaterial = new THREE.MeshStandardMaterial({\n        color: fillStyle || '#ccaa76',\n        side: THREE.FrontSide\n      })\n    }\n\n    var boardGeometry = new THREE.PlaneGeometry(w, h, 1, 1)\n    var boardMesh = new THREE.Mesh(boardGeometry, boardMaterial)\n    boardMesh.castShadow = true\n\n    return boardMesh\n  }\n}\n\n@sceneComponent('banner')\nexport class Banner extends RectPath(Shape) {\n  is3dish() {\n    return true\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new Banner3D(this as any)\n  }\n}\n"]}