@hatiolab/things-scene 3.4.43 → 3.4.45

package/dist/components/global-ref.d.ts

@@ -0,0 +1,36 @@
+export default class GlobalRef extends HTMLOverlayContainer {
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: ({
+            type: string;
+            label: string;
+            name: string;
+            placeholder: string;
+            property?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                options: string[];
+            };
+            placeholder?: undefined;
+        })[];
+        'value-property': string;
+        help: string;
+    };
+    get tagName(): string;
+    _element_bounds: {
+        offsetWidth: any;
+        offsetHeight: any;
+    } | undefined;
+    fetchRef(): Promise<void>;
+    __ref: any;
+    set ref(arg: any);
+    get ref(): any;
+    _releaseRef(): void;
+    onchange(after: any, before: any, hint: any): void;
+}
+import HTMLOverlayContainer from "./html-overlay-container";

package/dist/components/global-ref.js

@@ -0,0 +1,128 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import Component from './component';
+import HTMLOverlayContainer from './html-overlay-container';
+import { error } from '../core/logger';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'board-selector',
+            label: 'scene-number',
+            name: 'ref',
+            placeholder: 'SCENE-1'
+        },
+        {
+            type: 'select',
+            label: 'fit',
+            name: 'fit',
+            property: {
+                options: ['both', 'ratio']
+            }
+        },
+        {
+            type: 'select',
+            label: 'mode',
+            name: 'mode',
+            property: {
+                options: ['view', 'interaction']
+            }
+        }
+    ],
+    'value-property': 'ref',
+    help: 'scene/component/global-ref'
+};
+export default class GlobalRef extends HTMLOverlayContainer {
+    dispose() {
+        this._releaseRef();
+        super.dispose();
+    }
+    get nature() {
+        return NATURE;
+    }
+    get hasTextProperty() {
+        return false;
+    }
+    get tagName() {
+        return 'div';
+    }
+    setElementProperties(element) {
+        var { mode = 'view' } = this.state;
+        if (mode == 'view') {
+            element.style.pointerEvents = 'none';
+        }
+        else {
+            element.style.pointerEvents = 'inherit';
+        }
+    }
+    ready() {
+        super.ready();
+        this.fetchRef();
+    }
+    reposition() {
+        if (!this.element)
+            return;
+        super.reposition();
+        /* 컴포넌트 자신의 bound가 변화했다면, reference 를 다시 맞춘다. */
+        let oldBounds = this._element_bounds;
+        let { offsetWidth, offsetHeight } = this.element;
+        this._element_bounds = { offsetWidth, offsetHeight };
+        if (oldBounds && oldBounds.offsetWidth == offsetWidth && oldBounds.offsetHeight == offsetHeight) {
+            return;
+        }
+        if (this.ref && this.root.target_element) {
+            let { fit = 'ratio' } = this.state;
+            this.ref.fit(fit);
+        }
+    }
+    async fetchRef() {
+        this._releaseRef();
+        var { ref, fit = 'ratio' } = this.state;
+        if (!ref)
+            return;
+        var provider = this.app.refProvider;
+        if (provider && ref) {
+            try {
+                this.__ref = await provider.get(ref, true);
+                this.__ref.target = this.element;
+                this.__ref.fit(fit);
+                this.__ref.data = this.data;
+            }
+            catch (e) {
+                error(e);
+            }
+        }
+    }
+    get ref() {
+        return this.__ref;
+    }
+    set ref(ref) {
+        this.setState('ref', ref);
+    }
+    _releaseRef() {
+        if (this.__ref && this.__ref.release) {
+            this.__ref.release();
+        }
+        delete this.__ref;
+    }
+    onchange(after, before, hint) {
+        super.onchange(after, before, hint);
+        'ref' in after && this.fetchRef();
+        if ('fit' in after && this.ref) {
+            requestAnimationFrame(() => {
+                let { fit } = this.state;
+                this.ref.fit(fit);
+            });
+        }
+        if ('data' in after && this.ref) {
+            requestAnimationFrame(() => {
+                this.ref.data = after.data;
+            });
+        }
+    }
+}
+Component.register('global-ref', GlobalRef);
+//# sourceMappingURL=global-ref.js.map

package/dist/components/global-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-ref.js","sourceRoot":"","sources":["../../src/components/global-ref.js"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport Component from './component'\nimport HTMLOverlayContainer from './html-overlay-container'\nimport { error } from '../core/logger'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'board-selector',\n      label: 'scene-number',\n      name: 'ref',\n      placeholder: 'SCENE-1'\n    },\n    {\n      type: 'select',\n      label: 'fit',\n      name: 'fit',\n      property: {\n        options: ['both', 'ratio']\n      }\n    },\n    {\n      type: 'select',\n      label: 'mode',\n      name: 'mode',\n      property: {\n        options: ['view', 'interaction']\n      }\n    }\n  ],\n  'value-property': 'ref',\n  help: 'scene/component/global-ref'\n}\n\nexport default class GlobalRef extends HTMLOverlayContainer {\n  dispose() {\n    this._releaseRef()\n    super.dispose()\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  get hasTextProperty() {\n    return false\n  }\n\n  get tagName() {\n    return 'div'\n  }\n\n  setElementProperties(element) {\n    var { mode = 'view' } = this.state\n\n    if (mode == 'view') {\n      element.style.pointerEvents = 'none'\n    } else {\n      element.style.pointerEvents = 'inherit'\n    }\n  }\n\n  ready() {\n    super.ready()\n    this.fetchRef()\n  }\n\n  reposition() {\n    if (!this.element) return\n\n    super.reposition()\n\n    /* 컴포넌트 자신의 bound가 변화했다면, reference 를 다시 맞춘다. */\n    let oldBounds = this._element_bounds\n    let { offsetWidth, offsetHeight } = this.element\n    this._element_bounds = { offsetWidth, offsetHeight }\n\n    if (oldBounds && oldBounds.offsetWidth == offsetWidth && oldBounds.offsetHeight == offsetHeight) {\n      return\n    }\n\n    if (this.ref && this.root.target_element) {\n      let { fit = 'ratio' } = this.state\n\n      this.ref.fit(fit)\n    }\n  }\n\n  async fetchRef() {\n    this._releaseRef()\n\n    var { ref, fit = 'ratio' } = this.state\n\n    if (!ref) return\n\n    var provider = this.app.refProvider\n\n    if (provider && ref) {\n      try {\n        this.__ref = await provider.get(ref, true)\n        this.__ref.target = this.element\n        this.__ref.fit(fit)\n        this.__ref.data = this.data\n      } catch (e) {\n        error(e)\n      }\n    }\n  }\n\n  get ref() {\n    return this.__ref\n  }\n\n  set ref(ref) {\n    this.setState('ref', ref)\n  }\n\n  _releaseRef() {\n    if (this.__ref && this.__ref.release) {\n      this.__ref.release()\n    }\n    delete this.__ref\n  }\n\n  onchange(after, before, hint) {\n    super.onchange(after, before, hint)\n\n    'ref' in after && this.fetchRef()\n    if ('fit' in after && this.ref) {\n      requestAnimationFrame(() => {\n        let { fit } = this.state\n        this.ref.fit(fit)\n      })\n    }\n\n    if ('data' in after && this.ref) {\n      requestAnimationFrame(() => {\n        this.ref.data = after.data\n      })\n    }\n  }\n}\n\nComponent.register('global-ref', GlobalRef)\n"]}

package/dist/components/group.d.ts

@@ -0,0 +1,15 @@
+export default class Group extends Container {
+    isGroup(): boolean;
+    get(property: any): any;
+    set(props: any, propval: any): any;
+    capture(x: any, y: any, except: any): any;
+    set bounds(arg: any);
+    get bounds(): any;
+    path: any;
+    get focusible(): boolean;
+    calculateBounds(): void;
+    __MUTATING__: boolean | undefined;
+    render(context: any): void;
+    postrender(context: any): void;
+}
+import Container from "../components/container";

package/dist/components/group.js

@@ -0,0 +1,145 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import Container from '../components/container';
+import Component from './component';
+const GROUP_PROPS = ['refid', 'left', 'top', 'width', 'height', 'rotation', 'animation'];
+export default class Group extends Container {
+    isGroup() {
+        return true;
+    }
+    /*
+     * 컴포넌트의 모델 속성값을 가져오는 메쏘드.
+     */
+    get(property) {
+        return this._model[property];
+    }
+    /*
+     * 컴포넌트의 모델 속성값을 바꾸는 메쏘드. 그룹은 5개의 속성만을 가진다.
+     *
+     * - 하나의 속성을 변경하는 경우.
+     *  component.set('top', 10)
+     * - 여러개의 속성을 변경하는 경우.
+     *  component.set({top:10, left:50})
+     */
+    set(props, propval) {
+        if (typeof props === 'string')
+            return this.set({ [props]: propval });
+        var filtered = GROUP_PROPS.reduce((filtered, prop) => {
+            if (props.hasOwnProperty(prop))
+                filtered[prop] = props[prop];
+            return filtered;
+        }, {});
+        return super.set(filtered);
+    }
+    capture(x, y, except) {
+        var captured = super.capture(x, y, except);
+        // 그룹 자신은 capture를 받을 수 없다.
+        if (captured === this)
+            return;
+        return captured;
+    }
+    set bounds(bounds) {
+        if (this.__MUTATING__) {
+            super.bounds = bounds;
+            return;
+        }
+        // 1. left, top의 변화만큼 translate 한다.
+        var old_bounds = this.bounds;
+        // 2. width, height의 변화비율을 scale-x, scale-y 에 보관한다.
+        var scale = {
+            x: bounds.width / old_bounds.width,
+            y: bounds.height / old_bounds.height
+        };
+        // 3. 기존 포인트들을 기존 거리에 scale-x, scale-y 만큼 조정된 위치로 새로운 bounds의 left-top으로부터 설정한다.
+        this.path = this.path.map(point => {
+            return {
+                x: bounds.left + (point.x - old_bounds.left) * scale.x,
+                y: bounds.top + (point.y - old_bounds.top) * scale.y
+            };
+        });
+        // 4. PATH스타일(mutable)의 도형은 mutatePath를 사용하고,
+        //    Bounds 스타일 도형은 기존 포인트들을 기존 거리에 scale-x, scale-y 만큼 조정된 center 위치로부터
+        //      새로운 bounds를 설정한다.
+        this.components &&
+            this.components.forEach(comp => {
+                if (comp.mutable) {
+                    comp.mutatePath(null, function (path_in_parent) {
+                        return path_in_parent.map(function (point) {
+                            return {
+                                x: point.x * scale.x,
+                                y: point.y * scale.y
+                            };
+                        });
+                    });
+                }
+                else {
+                    let bounds = comp.bounds;
+                    let center = comp.center;
+                    let delta_center = {
+                        x: center.x * (1 - scale.x),
+                        y: center.y * (1 - scale.y)
+                    };
+                    let delta_width = bounds.width * (1 - scale.x);
+                    let delta_height = bounds.height * (1 - scale.y);
+                    let delta_left = -(delta_center.x - delta_width / 2);
+                    let delta_top = -(delta_center.y - delta_height / 2);
+                    comp.bounds = {
+                        left: bounds.left + delta_left,
+                        top: bounds.top + delta_top,
+                        width: bounds.width * scale.x,
+                        height: bounds.height * scale.y
+                    };
+                }
+            });
+    }
+    get focusible() {
+        return false;
+    }
+    get bounds() {
+        return super.bounds;
+    }
+    get hasTextProperty() {
+        return false;
+    }
+    calculateBounds() {
+        this.clearCache();
+        this.__MUTATING__ = true;
+        this.mutateBounds(function (bounds) {
+            var union = Component.union(this.components.map(component => {
+                return component.bounds;
+            }));
+            this.components.forEach(component => {
+                let cbounds = component.bounds;
+                component.bounds = {
+                    left: cbounds.left - union.left,
+                    top: cbounds.top - union.top,
+                    width: cbounds.width,
+                    height: cbounds.height
+                };
+            });
+            return {
+                left: bounds.left + union.left,
+                top: bounds.top + union.top,
+                width: union.width,
+                height: union.height
+            };
+        }, this);
+        this.__MUTATING__ = false;
+        if (this.parent.isGroup())
+            this.parent.calculateBounds();
+    }
+    /* 그룹은 자체적으로는 아무것도 그리지 않는다. */
+    render(context) { }
+    postrender(context) {
+        /* 자식 컴포넌트들 그리기 */
+        var { top, left, scale } = this.state;
+        context.translate(left, top);
+        this.layout.drawables(this).forEach(m => {
+            m.draw(context);
+        });
+        context.translate(-left, -top);
+    }
+}
+Component.register('group', Group);
+//# sourceMappingURL=group.js.map

package/dist/components/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../src/components/group.js"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport Container from '../components/container'\nimport Component from './component'\n\nconst GROUP_PROPS = ['refid', 'left', 'top', 'width', 'height', 'rotation', 'animation']\n\nexport default class Group extends Container {\n  isGroup() {\n    return true\n  }\n\n  /*\n   * 컴포넌트의 모델 속성값을 가져오는 메쏘드.\n   */\n  get(property) {\n    return this._model[property]\n  }\n\n  /*\n   * 컴포넌트의 모델 속성값을 바꾸는 메쏘드. 그룹은 5개의 속성만을 가진다.\n   *\n   * - 하나의 속성을 변경하는 경우.\n   *  component.set('top', 10)\n   * - 여러개의 속성을 변경하는 경우.\n   *  component.set({top:10, left:50})\n   */\n\n  set(props, propval) {\n    if (typeof props === 'string') return this.set({ [props]: propval })\n\n    var filtered = GROUP_PROPS.reduce((filtered, prop) => {\n      if (props.hasOwnProperty(prop)) filtered[prop] = props[prop]\n      return filtered\n    }, {})\n\n    return super.set(filtered)\n  }\n\n  capture(x, y, except) {\n    var captured = super.capture(x, y, except)\n\n    // 그룹 자신은 capture를 받을 수 없다.\n    if (captured === this) return\n\n    return captured\n  }\n\n  set bounds(bounds) {\n    if (this.__MUTATING__) {\n      super.bounds = bounds\n      return\n    }\n\n    // 1. left, top의 변화만큼 translate 한다.\n\n    var old_bounds = this.bounds\n\n    // 2. width, height의 변화비율을 scale-x, scale-y 에 보관한다.\n\n    var scale = {\n      x: bounds.width / old_bounds.width,\n      y: bounds.height / old_bounds.height\n    }\n\n    // 3. 기존 포인트들을 기존 거리에 scale-x, scale-y 만큼 조정된 위치로 새로운 bounds의 left-top으로부터 설정한다.\n\n    this.path = this.path.map(point => {\n      return {\n        x: bounds.left + (point.x - old_bounds.left) * scale.x,\n        y: bounds.top + (point.y - old_bounds.top) * scale.y\n      }\n    })\n\n    // 4. PATH스타일(mutable)의 도형은 mutatePath를 사용하고,\n    //    Bounds 스타일 도형은 기존 포인트들을 기존 거리에 scale-x, scale-y 만큼 조정된 center 위치로부터\n    //      새로운 bounds를 설정한다.\n\n    this.components &&\n      this.components.forEach(comp => {\n        if (comp.mutable) {\n          comp.mutatePath(null, function (path_in_parent) {\n            return path_in_parent.map(function (point) {\n              return {\n                x: point.x * scale.x,\n                y: point.y * scale.y\n              }\n            })\n          })\n        } else {\n          let bounds = comp.bounds\n          let center = comp.center\n\n          let delta_center = {\n            x: center.x * (1 - scale.x),\n            y: center.y * (1 - scale.y)\n          }\n\n          let delta_width = bounds.width * (1 - scale.x)\n          let delta_height = bounds.height * (1 - scale.y)\n\n          let delta_left = -(delta_center.x - delta_width / 2)\n          let delta_top = -(delta_center.y - delta_height / 2)\n\n          comp.bounds = {\n            left: bounds.left + delta_left,\n            top: bounds.top + delta_top,\n            width: bounds.width * scale.x,\n            height: bounds.height * scale.y\n          }\n        }\n      })\n  }\n\n  get focusible() {\n    return false\n  }\n\n  get bounds() {\n    return super.bounds\n  }\n\n  get hasTextProperty() {\n    return false\n  }\n\n  calculateBounds() {\n    this.clearCache()\n\n    this.__MUTATING__ = true\n\n    this.mutateBounds(function (bounds) {\n      var union = Component.union(\n        this.components.map(component => {\n          return component.bounds\n        })\n      )\n\n      this.components.forEach(component => {\n        let cbounds = component.bounds\n\n        component.bounds = {\n          left: cbounds.left - union.left,\n          top: cbounds.top - union.top,\n          width: cbounds.width,\n          height: cbounds.height\n        }\n      })\n\n      return {\n        left: bounds.left + union.left,\n        top: bounds.top + union.top,\n        width: union.width,\n        height: union.height\n      }\n    }, this)\n\n    this.__MUTATING__ = false\n\n    if (this.parent.isGroup()) this.parent.calculateBounds()\n  }\n\n  /* 그룹은 자체적으로는 아무것도 그리지 않는다. */\n\n  render(context) {}\n\n  postrender(context) {\n    /* 자식 컴포넌트들 그리기 */\n    var { top, left, scale } = this.state\n    context.translate(left, top)\n\n    this.layout.drawables(this).forEach(m => {\n      m.draw(context)\n    })\n\n    context.translate(-left, -top)\n  }\n}\n\nComponent.register('group', Group)\n"]}

package/dist/components/html/elements.d.ts

@@ -0,0 +1,2 @@
+export const createCanvas: any;
+export const createElement: any;

package/dist/components/html/fill.d.ts

@@ -0,0 +1 @@
+export default function fill(component: any): void;

package/dist/components/html/reposition.d.ts

@@ -0,0 +1 @@
+export default function reposition(component: any): void;

package/dist/components/html/shadow.d.ts

@@ -0,0 +1 @@
+export default function shadow(component: any): void;

package/dist/components/html-overlay-container.d.ts

@@ -0,0 +1,27 @@
+declare const HTMLOverlayContainer_base: {
+    new (): {
+        [x: string]: any;
+        isHTMLElement(): boolean;
+        isShadowable(): boolean;
+        element: any;
+        _element: any;
+        readonly tagName: any;
+        setElementProperties(element: any): void;
+        createElement(): void;
+        userInputEventHandler(e: any): void;
+        reposition(): void;
+        disposeElement(): void;
+        ready(): void;
+        dispose(): void;
+        readonly hasTextProperty: boolean;
+        readonly textHidden: boolean;
+        onchange(after: any, before: any): void;
+        isDescendible(container: any): any;
+    };
+    [x: string]: any;
+};
+export default class HTMLOverlayContainer extends HTMLOverlayContainer_base {
+    render(context: any): void;
+    get layout(): any;
+}
+export {};

package/dist/components/html-overlay-container.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import ContainerAbstract from './container-abstract';
+import MixinHTMLElement from './mixins/html-element';
+import { Layout, HTMLAbsoluteLayout } from '../layout';
+export default class HTMLOverlayContainer extends MixinHTMLElement(ContainerAbstract) {
+    /* render .. */
+    render(context) { }
+    get layout() {
+        return Layout.get(this.get('layout')) || HTMLAbsoluteLayout;
+    }
+}
+//# sourceMappingURL=html-overlay-container.js.map

package/dist/components/html-overlay-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-overlay-container.js","sourceRoot":"","sources":["../../src/components/html-overlay-container.js"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,iBAAiB,MAAM,sBAAsB,CAAA;AACpD,OAAO,gBAAgB,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAEtD,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,gBAAgB,CAAC,iBAAiB,CAAC;IACnF,eAAe;IAEf,MAAM,CAAC,OAAO,IAAG,CAAC;IAElB,IAAI,MAAM;QACR,OAAO,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,kBAAkB,CAAA;IAC7D,CAAC;CACF","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport ContainerAbstract from './container-abstract'\nimport MixinHTMLElement from './mixins/html-element'\nimport { Layout, HTMLAbsoluteLayout } from '../layout'\n\nexport default class HTMLOverlayContainer extends MixinHTMLElement(ContainerAbstract) {\n  /* render .. */\n\n  render(context) {}\n\n  get layout() {\n    return Layout.get(this.get('layout')) || HTMLAbsoluteLayout\n  }\n}\n"]}

package/dist/components/html-overlay-element.d.ts

@@ -0,0 +1,25 @@
+declare const HTMLOverlayElement_base: {
+    new (): {
+        [x: string]: any;
+        isHTMLElement(): boolean;
+        isShadowable(): boolean;
+        element: any;
+        _element: any;
+        readonly tagName: any;
+        setElementProperties(element: any): void;
+        createElement(): void;
+        userInputEventHandler(e: any): void;
+        reposition(): void;
+        disposeElement(): void;
+        ready(): void;
+        dispose(): void;
+        readonly hasTextProperty: boolean;
+        readonly textHidden: boolean;
+        onchange(after: any, before: any): void;
+        isDescendible(container: any): any;
+    };
+    [x: string]: any;
+};
+export default class HTMLOverlayElement extends HTMLOverlayElement_base {
+}
+export {};

package/dist/components/html-overlay-element.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import Component from './component';
+import RectPath from './mixins/rect-path';
+import MixinHTMLElement from './mixins/html-element';
+export default class HTMLOverlayElement extends MixinHTMLElement(RectPath(Component)) {
+}
+//# sourceMappingURL=html-overlay-element.js.map

package/dist/components/html-overlay-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-overlay-element.js","sourceRoot":"","sources":["../../src/components/html-overlay-element.js"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AACzC,OAAO,gBAAgB,MAAM,uBAAuB,CAAA;AAEpD,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,gBAAgB,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;CAAG","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport Component from './component'\nimport RectPath from './mixins/rect-path'\nimport MixinHTMLElement from './mixins/html-element'\n\nexport default class HTMLOverlayElement extends MixinHTMLElement(RectPath(Component)) {}\n"]}

package/dist/components/image-view.d.ts

@@ -0,0 +1,19 @@
+import { ComponentNature, Properties, Shape } from '@hatiolab/things-scene';
+declare const ImageView_base: typeof Shape;
+export default class ImageView extends ImageView_base {
+    static NOIMAGE?: any;
+    static get noimage(): any;
+    _offcanvas?: HTMLCanvasElement;
+    _image?: any;
+    dispose(): void;
+    render(ctx: CanvasRenderingContext2D): void;
+    get nature(): ComponentNature;
+    get hasTextProperty(): boolean;
+    ready(): void;
+    prepare(resolve: (ret?: any) => void, reject: (e?: any) => void): void;
+    get src(): any;
+    set src(src: any);
+    onchange(after: Properties, before: Properties): void;
+    ondropfile(transfered: DataTransferItemList, files: FileList): void;
+}
+export {};

package/dist/components/image-view.js

@@ -0,0 +1,180 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { error, Component, RectPath, Shape } from '@hatiolab/things-scene';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'image-selector',
+            label: 'image-src',
+            name: 'src',
+            property: {
+                displayField: 'id',
+                displayFullUrl: true,
+                baseUrlAlias: '$base_url',
+                defaultStorage: 'scene-image',
+                storageFilters: {
+                    type: Array,
+                    value: [
+                        {
+                            name: 'category',
+                            value: 'image'
+                        }
+                    ]
+                },
+                useUpload: true
+            }
+        },
+        {
+            type: 'select',
+            label: 'cross-origin',
+            name: 'crossOrigin',
+            property: {
+                options: ['', 'anonymous', 'use-credentials']
+            }
+        }
+    ],
+    'value-property': 'src',
+    help: 'scene/component/image-view'
+};
+const NOIMAGE_DATA_URI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABIBAMAAAD7Se1QAAAAIVBMVEUAAABHcEwBAQEREREBAQEEBAQGBgYLCwsDAwMDAwMICAi6HF9tAAAAC3RSTlNNAEAERiMYCS41Eac10lYAAAEgSURBVHhe7dY9asQwEAXgh7DNertNiJy48pIitY3SB7bYdk0ukL1BDDmA9gZecoH4pmFQ3MQayUMguPBrNPD4wD9TCMvJmt3M/AtYwXOlXiWgqADVCUBD46MAnGhMBaCiUQmAm8VA/Eh/eWl9Fn5WcxD+OLuRrUYJDKLluwH2InACUgkoACSdADxQc50Bytadb9RkM0CT13TcvlCT1HFg8UTHvasuUVACCa3El6u2UdD8LFTlKhUFFgA+d3dj10aABkUN72N3jAADCrJq7PIIsPidcxBoTHIIAjMFmyCwmGYIAA1P9gFgfCANAOsDSccCDW+uLDB+kLGg94OkZoAGkwsDDAe2DOg5oPxAg03rBR88OHpBz4N8UVeHFSwma74BTW6Ge4rIRa4AAAAASUVORK5CYII=';
+export default class ImageView extends RectPath(Shape) {
+    static get noimage() {
+        if (!ImageView.NOIMAGE) {
+            ImageView.NOIMAGE = new Image();
+            ImageView.NOIMAGE.src = NOIMAGE_DATA_URI;
+        }
+        return ImageView.NOIMAGE;
+    }
+    dispose() {
+        super.dispose();
+        delete this._offcanvas;
+        delete this._image;
+    }
+    render(ctx) {
+        var { left, top, width, height, isGray = false, alpha = 1, src } = this.state;
+        this.prepareIf(!this._image && src);
+        // 박스 그리기
+        ctx.beginPath();
+        ctx.globalAlpha *= alpha;
+        if (this._image && this._image.complete) {
+            if (isGray && this._offcanvas) {
+                ctx.drawImage(this._offcanvas, left, top, width, height);
+            }
+            else {
+                try {
+                    ctx.drawImage(this._image, left, top, width, height);
+                }
+                catch (e) {
+                    ctx.drawImage(ImageView.noimage, left, top, width, height);
+                }
+            }
+        }
+        else {
+            !this.app.isViewMode && ctx.drawImage(ImageView.noimage, left, top, width, height);
+        }
+    }
+    get nature() {
+        return NATURE;
+    }
+    get hasTextProperty() {
+        return false;
+    }
+    ready() {
+        super.ready();
+        this.prepareIf(!this._image && this.state.src);
+    }
+    prepare(resolve, reject) {
+        var { src, crossOrigin } = this.state;
+        if (!src) {
+            resolve(this);
+            return;
+        }
+        this._image = new Image();
+        try {
+            if (crossOrigin) {
+                this._image.crossOrigin = crossOrigin;
+            }
+            this._image.src = this.app.url(src) || '';
+        }
+        catch (e) {
+            reject(e);
+            return;
+        }
+        this._image.onload = () => {
+            if (this.get('isGray')) {
+                let width = this._image.width;
+                let height = this._image.height;
+                this._offcanvas = Component.createCanvas(width, height);
+                let offcontext = this._offcanvas.getContext('2d');
+                offcontext.drawImage(this._image, 0, 0);
+                let imageData = makeGrayImage(offcontext, width, height);
+                offcontext.putImageData(imageData, 0, 0);
+            }
+            resolve(this);
+        };
+        this._image.onerror = (e) => {
+            if (this._image && !this._image.currentSrc)
+                this._image = null;
+            reject(e);
+        };
+    }
+    get src() {
+        return this.get('src');
+    }
+    set src(src) {
+        this.set('src', src);
+    }
+    onchange(after, before) {
+        if (after.hasOwnProperty('src') || after.hasOwnProperty('isGray')) {
+            delete this._offcanvas;
+            delete this._image;
+            this.prepareIf(after.src);
+        }
+    }
+    ondropfile(transfered, files) {
+        for (let i = 0; i < transfered.length; i++) {
+            if (transfered[i].type.startsWith('image/')) {
+                this.src = files[i];
+                return;
+            }
+        }
+    }
+}
+function makeGrayImage(ctx, width, height) {
+    try {
+        var img = ctx.getImageData(0, 0, width, height);
+    }
+    catch (e) {
+        error('Get Image Data Error: ' + e.message);
+        return null;
+    }
+    var data = img.data;
+    // Loop through data.
+    for (let i = 0; i < width * height * 4; i += 4) {
+        // First bytes are red bytes.
+        // Get red value.
+        let red = data[i];
+        // Second bytes are green bytes.
+        // Get green value.
+        let green = data[i + 1];
+        // Third bytes are blue bytes.
+        // Get blue value.
+        let blue = data[i + 2];
+        // Fourth bytes are alpha bytes
+        // We don't care about alpha here.
+        // Add the three values and divide by three.
+        // Make it an integer.
+        let gray = parseInt(String((red + green + blue) / 3));
+        // Assign average to red, green, and blue.
+        img.data[i] = gray;
+        img.data[i + 1] = gray;
+        img.data[i + 2] = gray;
+    }
+    return img;
+}
+Component.register('image-view', ImageView);
+//# sourceMappingURL=image-view.js.map