@hatiolab/things-scene 3.4.42 → 3.4.44

package/dist/components/container.js

@@ -0,0 +1,75 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { HTMLAbsoluteLayout, Layout } from '../layout';
+import Component from './component';
+import ContainerAbstract from './container-abstract';
+import MixinHTMLElement from './mixins/html-element';
+const SCALE_DEFAULT = { x: 1, y: 1 };
+const DEFAULT_STYLE = {
+    boxSizing: 'border-box',
+    margin: '0px',
+    position: 'absolute',
+    outline: 'none'
+};
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'layout',
+            label: 'layout',
+            name: 'layoutOption'
+        }
+    ],
+    help: 'scene/component/container'
+};
+export default class Container extends MixinHTMLElement(ContainerAbstract) {
+    get tagName() {
+        return 'div';
+    }
+    get nature() {
+        return NATURE;
+    }
+    setElementProperties(element) { }
+    get layout() {
+        return Layout.get(this.get('layout')) || HTMLAbsoluteLayout;
+    }
+    reposition() {
+        if (!this.element)
+            return;
+        var component = this;
+        var { id, class: className, scale = SCALE_DEFAULT } = component.state;
+        var { rotation = 0, hidden } = component;
+        var { left, top, width, height } = component.bounds;
+        var cx = width / 2;
+        var cy = height / 2;
+        // element의 기본 속성을 설정한다.
+        var element = component.element;
+        element.hidden = hidden;
+        if (id)
+            element.id = id;
+        if (className)
+            element.className = className;
+        // element의 기본 style을 설정한다.
+        Object.assign(element.style, DEFAULT_STYLE, {
+            left: left + 'px',
+            top: top + 'px',
+            width: '0px',
+            height: '0px',
+            backgroundColor: 'transparent'
+        });
+        var delta = component.delta();
+        var sx = ((scale && scale.x) || 1) * delta.sx;
+        var sy = ((scale && scale.y) || 1) * delta.sy;
+        var theta = (rotation || 0) + delta.theta;
+        var tx = delta.tx || 0;
+        var ty = delta.ty || 0;
+        ['-webkit-', '-moz-', '-ms-', '-o-', ''].forEach(prefix => {
+            element.style[prefix + 'transform'] = `translate(${tx + cx}px, ${ty + cy}px) rotate(${theta}rad) translate(${-cx}px, ${-cy}px) scale(${sx}, ${sy}) perspective(1px)`;
+        });
+    }
+}
+Component.register('container', Container);
+//# sourceMappingURL=container.js.map

package/dist/components/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../src/components/container.js"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { HTMLAbsoluteLayout, Layout } from '../layout'\n\nimport Component from './component'\nimport ContainerAbstract from './container-abstract'\nimport MixinHTMLElement from './mixins/html-element'\n\nconst SCALE_DEFAULT = { x: 1, y: 1 }\nconst DEFAULT_STYLE = {\n  boxSizing: 'border-box',\n  margin: '0px',\n  position: 'absolute',\n  outline: 'none'\n}\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'layout',\n      label: 'layout',\n      name: 'layoutOption'\n    }\n  ],\n  help: 'scene/component/container'\n}\n\nexport default class Container extends MixinHTMLElement(ContainerAbstract) {\n  get tagName() {\n    return 'div'\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  setElementProperties(element) {}\n\n  get layout() {\n    return Layout.get(this.get('layout')) || HTMLAbsoluteLayout\n  }\n\n  reposition() {\n    if (!this.element) return\n\n    var component = this\n\n    var { id, class: className, scale = SCALE_DEFAULT } = component.state\n\n    var { rotation = 0, hidden } = component\n\n    var { left, top, width, height } = component.bounds\n    var cx = width / 2\n    var cy = height / 2\n\n    // element의 기본 속성을 설정한다.\n    var element = component.element\n\n    element.hidden = hidden\n    if (id) element.id = id\n    if (className) element.className = className\n\n    // element의 기본 style을 설정한다.\n\n    Object.assign(element.style, DEFAULT_STYLE, {\n      left: left + 'px',\n      top: top + 'px',\n      width: '0px',\n      height: '0px',\n      backgroundColor: 'transparent'\n    })\n\n    var delta = component.delta()\n    var sx = ((scale && scale.x) || 1) * delta.sx\n    var sy = ((scale && scale.y) || 1) * delta.sy\n    var theta = (rotation || 0) + delta.theta\n    var tx = delta.tx || 0\n    var ty = delta.ty || 0\n\n    /* CONFIRM-ME `transform: perspective(1px)` 스타일 설정은 scaling된 dom element를 좀 더 선명하게 보이도록 해준다. (Chrome 브라우저에서) */\n    ;['-webkit-', '-moz-', '-ms-', '-o-', ''].forEach(prefix => {\n      element.style[prefix + 'transform'] = `translate(${tx + cx}px, ${\n        ty + cy\n      }px) rotate(${theta}rad) translate(${-cx}px, ${-cy}px) scale(${sx}, ${sy}) perspective(1px)`\n    })\n  }\n}\n\nComponent.register('container', Container)\n"]}

package/dist/components/data/data-mapping.d.ts

@@ -0,0 +1,16 @@
+export default class DataMapping {
+    constructor(model: any, owner: any);
+    owner: any;
+    set model(arg: any);
+    get model(): any;
+    dispose(): void;
+    _model: any;
+    evaluator: any;
+    accessor: ((o: any) => any) | undefined;
+    propAccessor: ((o: any) => any) | undefined;
+    partAccessor: ((o: any) => any) | undefined;
+    get target(): any;
+    get property(): any;
+    get param(): any;
+    get ndnsp(): boolean;
+}

package/dist/components/data/data.d.ts

@@ -0,0 +1,8 @@
+export function executeMappings(force?: boolean): void;
+export function onchangeData(after: any, before: any): void;
+export function buildMappings(): void;
+export class buildMappings {
+    _mappings: any;
+}
+export function disposeMappings(): void;
+export function onchangeMappings(after: any, before: any): void;

package/dist/components/data/evaluator.d.ts

@@ -0,0 +1 @@
+export default function buildEvaluator(mapping: any, owner: any, rule: any, param: any, type: any): any;

package/dist/components/donut.d.ts

@@ -0,0 +1,15 @@
+import { Component, ComponentNature } from '@hatiolab/things-scene';
+import Ellipse from './ellipse';
+export default class Donut extends Ellipse {
+    is3dish(): boolean;
+    render(ctx: CanvasRenderingContext2D): void;
+    contains(x: number, y: number): boolean;
+    get controls(): {
+        x: any;
+        y: any;
+        handler: {
+            ondragmove: (point: import("@hatiolab/things-scene").DIMENSION, index: number, component: Component) => void;
+        };
+    }[];
+    get nature(): ComponentNature;
+}

package/dist/components/donut.js

@@ -0,0 +1,74 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component } from '@hatiolab/things-scene';
+import Ellipse from './ellipse';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'number',
+            label: 'ratio',
+            name: 'ratio',
+            property: 'ratio'
+        }
+    ],
+    help: 'scene/component/donut'
+};
+var controlHandler = {
+    ondragmove: function (point, index, component) {
+        var { cx, rx } = component.model;
+        rx = Math.abs(rx);
+        var transcoorded = component.transcoordP2S(point.x, point.y);
+        var ratio = ((transcoorded.x - cx) / rx) * 100;
+        ratio = ratio >= 100 || ratio <= -100 ? 100 : Math.abs(ratio);
+        component.set({ ratio });
+    }
+};
+export default class Donut extends Ellipse {
+    is3dish() {
+        return false;
+    }
+    render(ctx) {
+        var { ratio = 50, cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state;
+        rx = Math.abs(rx);
+        ry = Math.abs(ry);
+        ctx.beginPath();
+        ctx.ellipse(cx, cy, rx, ry, 0, startAngle || 0, endAngle || 2 * Math.PI, anticlockwise);
+        ctx.moveTo(cx + (rx / 100) * ratio, cy);
+        // 맨 마지막 속성이 true면 원의 범위만큼 공백이 됨
+        ctx.ellipse(cx, cy, (rx / 100) * ratio, (ry / 100) * ratio, 0, startAngle || 0, endAngle || 2 * Math.PI, true);
+    }
+    contains(x, y) {
+        var { cx, cy, rx, ry, ratio } = this.state;
+        rx = Math.abs(rx);
+        ry = Math.abs(ry);
+        var normx = (x - cx) / (rx * 2 - 0.5);
+        var normy = (y - cy) / (ry * 2 - 0.5);
+        var ratiox = (x - cx) / ((rx / 100) * ratio * 2 - 0.5);
+        var ratioy = (y - cy) / ((ry / 100) * ratio * 2 - 0.5);
+        var result = false;
+        if (normx * normx + normy * normy < 0.25 && ratiox * ratiox + ratioy * ratioy > 0.25)
+            result = !result;
+        return result;
+    }
+    get controls() {
+        var { cx, cy, rx, ratio } = this.state;
+        rx = Math.abs(rx);
+        return [
+            {
+                x: cx + (rx / 100) * ratio,
+                y: cy,
+                handler: controlHandler
+            }
+        ];
+    }
+    get nature() {
+        return NATURE;
+    }
+}
+Component.memoize(Donut.prototype, 'controls', false);
+Component.register('donut', Donut);
+//# sourceMappingURL=donut.js.map

package/dist/components/donut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"donut.js","sourceRoot":"","sources":["../../src/components/donut.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, POSITION } from '@hatiolab/things-scene'\nimport Ellipse from './ellipse'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'ratio',\n      name: 'ratio',\n      property: 'ratio'\n    }\n  ],\n  help: 'scene/component/donut'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { cx, rx } = component.model\n    rx = Math.abs(rx)\n\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n\n    var ratio = ((transcoorded.x - cx) / rx) * 100\n\n    ratio = ratio >= 100 || ratio <= -100 ? 100 : Math.abs(ratio)\n\n    component.set({ ratio })\n  }\n}\n\nexport default class Donut extends Ellipse {\n  is3dish() {\n    return false\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { ratio = 50, cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state\n    rx = Math.abs(rx)\n    ry = Math.abs(ry)\n\n    ctx.beginPath()\n    ctx.ellipse(cx, cy, rx, ry, 0, startAngle || 0, endAngle || 2 * Math.PI, anticlockwise)\n\n    ctx.moveTo(cx + (rx / 100) * ratio, cy)\n    // 맨 마지막 속성이 true면 원의 범위만큼 공백이 됨\n    ctx.ellipse(cx, cy, (rx / 100) * ratio, (ry / 100) * ratio, 0, startAngle || 0, endAngle || 2 * Math.PI, true)\n  }\n\n  contains(x: number, y: number) {\n    var { cx, cy, rx, ry, ratio } = this.state\n    rx = Math.abs(rx)\n    ry = Math.abs(ry)\n\n    var normx = (x - cx) / (rx * 2 - 0.5)\n    var normy = (y - cy) / (ry * 2 - 0.5)\n    var ratiox = (x - cx) / ((rx / 100) * ratio * 2 - 0.5)\n    var ratioy = (y - cy) / ((ry / 100) * ratio * 2 - 0.5)\n    var result = false\n\n    if (normx * normx + normy * normy < 0.25 && ratiox * ratiox + ratioy * ratioy > 0.25) result = !result\n\n    return result\n  }\n\n  get controls() {\n    var { cx, cy, rx, ratio } = this.state\n    rx = Math.abs(rx)\n\n    return [\n      {\n        x: cx + (rx / 100) * ratio,\n        y: cy,\n        handler: controlHandler\n      }\n    ]\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.memoize(Donut.prototype, 'controls', false)\n\nComponent.register('donut', Donut)\n"]}

package/dist/components/drawer/draw-image-pendable.d.ts

@@ -0,0 +1 @@
+export default function drawImage(context: any, image: any, left: any, top: any, width: any, height: any): void;

package/dist/components/drawer/effect.d.ts

@@ -0,0 +1 @@
+export default function effect(context: any): void;

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

@@ -0,0 +1,14 @@
+export function drawFill(context: any, bounds: any, center: any, style: any, host_component: any): void;
+export function prepareFill(resolve: any, reject: any): void;
+export class prepareFill {
+    constructor(resolve: any, reject: any);
+    _pattern_image_origin: any;
+    _pattern_image: any;
+}
+export function prepareFillIf(condition: any): void;
+export function onchangeFill(after: any, before: any): void;
+export class onchangeFill {
+    constructor(after: any, before: any);
+    _pattern_image: any;
+    _pattern_image_origin: any;
+}

package/dist/components/drawer/format.d.ts

@@ -0,0 +1 @@
+export default function format(mask: any, value: any): any;

package/dist/components/drawer/line.d.ts

@@ -0,0 +1,3 @@
+export function containedInPath(x: any, y: any, path: any, lineWidth?: number): boolean;
+export function getTipNeckPos(tipType: any, lineWidth: any, p1: any, p2: any): any;
+export function drawEndTips(ctx: any, path: any, style: any): void;

package/dist/components/drawer/stroke.d.ts

@@ -0,0 +1 @@
+export default function stroke(context: any, style: any, hostComponent: any): void;

package/dist/components/drawer/text-wrapper.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 주어진 텍스트를 주어진 폭(width)에 맞게 줄바꿈할 때, 각 라인별 word의 배열을 제공한다.
+ *
+ * @param  context object  사용될 폰트가 설정된 Context2D 레퍼런스
+ * @param  word    string  줄바꿈 대상 문장
+ * @param  width   number  줄바꿈 기준 폭
+ * @param  wrap    boolean 자동 줄바꿈 여부
+ * @return array           각 라인별 word의 배열([[word1, word2, word3], [word4, word5]] 형식임)
+ */
+export default function splitTextToLines(context: any, text: any, width: any, wrap: any): string[][];

package/dist/components/drawer/text.d.ts

@@ -0,0 +1,3 @@
+export function textLines(context: any, width: any, font: any, text: any, wrap: any): string[][];
+export function font(style: any): string;
+export function drawText(context: any, bounds: any, lines: any, style: any): void;

package/dist/components/ellipse.d.ts

@@ -0,0 +1,35 @@
+/// <reference path="../../things-scene.d.ts" />
+/// <reference path="../../src/component.d.ts" />
+import * as THREE from 'three';
+import { Anchor, Component, ComponentNature, Shape } from '@hatiolab/things-scene';
+import RealObjectExtrude from '../threed/real-object-extrude';
+import RealObject from '../threed/real-object';
+export declare class EllipseExtrude extends RealObjectExtrude {
+    get cx(): number;
+    get cy(): number;
+    get shape(): THREE.Shape;
+}
+declare const Ellipse_base: (new (...args: any[]) => {
+    findOutletLines(anchorName: string): import("@hatiolab/things-scene").Line[];
+    findOutletEnds(anchorName: string): Component[];
+    findInletLines(anchorName: string): import("@hatiolab/things-scene").Line[];
+    findInletEnds(anchorName: string): Component[];
+}) & typeof Shape;
+export default class Ellipse extends Ellipse_base {
+    is3dish(): boolean;
+    render(context: CanvasRenderingContext2D): void;
+    get path(): {
+        x: any;
+        y: any;
+    }[];
+    set path(path: {
+        x: any;
+        y: any;
+    }[]);
+    contains(x: number, y: number): boolean;
+    outline(progress: number): import("@hatiolab/things-scene").DIMENSION;
+    buildRealObject(): RealObject | undefined;
+    get anchors(): Array<Anchor>;
+    get nature(): ComponentNature;
+}
+export {};

package/dist/components/ellipse.js

@@ -0,0 +1,99 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import * as THREE from 'three';
+import { Component, Connectable, Shape } from '@hatiolab/things-scene';
+import RealObjectExtrude from '../threed/real-object-extrude';
+import ellipseAnchors from './anchor/ellipse-anchors';
+import ellipseOutline from './outline/ellipse-outline';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [],
+    'value-property': 'text'
+};
+export class EllipseExtrude extends RealObjectExtrude {
+    get cx() {
+        var { cx = 0 } = this.component.state;
+        var { width: parentWidth = 0 } = this.component.parent.bounds;
+        return cx - parentWidth / 2;
+    }
+    get cy() {
+        var { cy = 0 } = this.component.state;
+        var { height: parentHeight = 0 } = this.component.parent.bounds;
+        return cy - parentHeight / 2;
+    }
+    get shape() {
+        var { cx = 0, cy = 0, rx = 1, ry = 1, startAngle = 0, endAngle = 2 * Math.PI, anticlockwise = false } = this.component.state;
+        const curve = new THREE.EllipseCurve(cx, cy, // ax, aY
+        Math.abs(rx), Math.abs(ry), // xRadius, yRadius
+        startAngle, endAngle, // aStartAngle, aEndAngle
+        anticlockwise, // aClockwise
+        0 // aRotation
+        );
+        return new THREE.Shape(curve.getPoints(50));
+    }
+}
+export default class Ellipse extends Connectable(Shape) {
+    is3dish() {
+        return true;
+    }
+    render(context) {
+        var { cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state;
+        context.beginPath();
+        context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngle || 0, endAngle || 2 * Math.PI, anticlockwise);
+    }
+    get path() {
+        var { cx, cy, rx, ry } = this.state;
+        return [
+            {
+                x: cx - rx,
+                y: cy - ry
+            },
+            {
+                x: cx + rx,
+                y: cy - ry
+            },
+            {
+                x: cx + rx,
+                y: cy + ry
+            },
+            {
+                x: cx - rx,
+                y: cy + ry
+            }
+        ];
+    }
+    set path(path) {
+        var left_top = path[0];
+        var right_bottom = path[2];
+        this.set({
+            cx: left_top.x + (right_bottom.x - left_top.x) / 2,
+            cy: left_top.y + (right_bottom.y - left_top.y) / 2,
+            rx: (right_bottom.x - left_top.x) / 2,
+            ry: (right_bottom.y - left_top.y) / 2
+        });
+    }
+    contains(x, y) {
+        var { cx, cy, rx, ry } = this.state;
+        var normx = (x - cx) / (rx * 2 - 0.5);
+        var normy = (y - cy) / (ry * 2 - 0.5);
+        return normx * normx + normy * normy < 0.25;
+    }
+    outline(progress) {
+        return ellipseOutline(this, progress);
+    }
+    buildRealObject() {
+        return new EllipseExtrude(this);
+    }
+    get anchors() {
+        return ellipseAnchors(this);
+    }
+    get nature() {
+        return NATURE;
+    }
+}
+Component.memoize(Ellipse.prototype, 'path', false);
+Component.register('ellipse', Ellipse);
+//# sourceMappingURL=ellipse.js.map

package/dist/components/ellipse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ellipse.js","sourceRoot":"","sources":["../../src/components/ellipse.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport * as THREE from 'three'\nimport { Anchor, Component, ComponentNature, Connectable, Shape } from '@hatiolab/things-scene'\n\nimport RealObjectExtrude from '../threed/real-object-extrude'\nimport ellipseAnchors from './anchor/ellipse-anchors'\nimport ellipseOutline from './outline/ellipse-outline'\nimport RealObject from '../threed/real-object'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [],\n  'value-property': 'text'\n}\n\nexport class EllipseExtrude extends RealObjectExtrude {\n  get cx() {\n    var { cx = 0 } = this.component.state\n    var { width: parentWidth = 0 } = this.component.parent.bounds\n\n    return cx - parentWidth / 2\n  }\n\n  get cy() {\n    var { cy = 0 } = this.component.state\n    var { height: parentHeight = 0 } = this.component.parent.bounds\n\n    return cy - parentHeight / 2\n  }\n\n  get shape() {\n    var {\n      cx = 0,\n      cy = 0,\n      rx = 1,\n      ry = 1,\n      startAngle = 0,\n      endAngle = 2 * Math.PI,\n      anticlockwise = false\n    } = this.component.state\n\n    const curve = new THREE.EllipseCurve(\n      cx,\n      cy, // ax, aY\n      Math.abs(rx),\n      Math.abs(ry), // xRadius, yRadius\n      startAngle,\n      endAngle, // aStartAngle, aEndAngle\n      anticlockwise, // aClockwise\n      0 // aRotation\n    )\n\n    return new THREE.Shape(curve.getPoints(50))\n  }\n}\n\nexport default class Ellipse extends Connectable(Shape) {\n  is3dish() {\n    return true\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state\n\n    context.beginPath()\n\n    context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngle || 0, endAngle || 2 * Math.PI, anticlockwise)\n  }\n\n  get path() {\n    var { cx, cy, rx, ry } = this.state\n\n    return [\n      {\n        x: cx - rx,\n        y: cy - ry\n      },\n      {\n        x: cx + rx,\n        y: cy - ry\n      },\n      {\n        x: cx + rx,\n        y: cy + ry\n      },\n      {\n        x: cx - rx,\n        y: cy + ry\n      }\n    ]\n  }\n\n  set path(path) {\n    var left_top = path[0]\n    var right_bottom = path[2]\n\n    this.set({\n      cx: left_top.x + (right_bottom.x - left_top.x) / 2,\n      cy: left_top.y + (right_bottom.y - left_top.y) / 2,\n      rx: (right_bottom.x - left_top.x) / 2,\n      ry: (right_bottom.y - left_top.y) / 2\n    })\n  }\n\n  contains(x: number, y: number) {\n    var { cx, cy, rx, ry } = this.state\n\n    var normx = (x - cx) / (rx * 2 - 0.5)\n    var normy = (y - cy) / (ry * 2 - 0.5)\n\n    return normx * normx + normy * normy < 0.25\n  }\n\n  outline(progress: number) {\n    return ellipseOutline(this, progress)\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new EllipseExtrude(this)\n  }\n\n  get anchors(): Array<Anchor> {\n    return ellipseAnchors(this)\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.memoize(Ellipse.prototype, 'path', false)\n\nComponent.register('ellipse', Ellipse)\n"]}

package/dist/components/file/ondropfile.d.ts

@@ -0,0 +1 @@
+export function ondropfile(transfered: any, files: any): void;

package/dist/components/fit/fit.d.ts

@@ -0,0 +1,15 @@
+/**
+ * !this should be root-container
+ *
+ * @param {String} type assigns fitMode property of root container before fitting
+ */
+export default function fit(type: string): void;
+export default class fit {
+    /**
+     * !this should be root-container
+     *
+     * @param {String} type assigns fitMode property of root container before fitting
+     */
+    constructor(type: string);
+    fitMode: any;
+}

package/dist/components/geometry/transcoord.d.ts

@@ -0,0 +1,41 @@
+export function transcoordR(x: any, y: any, rotatePoint?: {
+    x: number;
+    y: number;
+}, rotation?: number, scale?: {
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+};
+export function transcoordRR(x: any, y: any, rotatePoint?: {
+    x: number;
+    y: number;
+}, rotation?: number, scale?: {
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+};
+export function transcoordP2S(x: any, y: any, rotatePoint: any): {
+    x: any;
+    y: any;
+};
+export function transcoordS2P(x: any, y: any, rotatePoint: any): {
+    x: any;
+    y: any;
+};
+export function transcoordS2TR(x: any, y: any, top: any): {
+    x: number;
+    y: number;
+};
+export function transcoordS2T(x: any, y: any, top: any): any;
+export function transcoordT2P(x: any, y: any, top: any): {
+    x: any;
+    y: any;
+};
+export function transcoordT2S(x: any, y: any, top: any): any;
+export function transcoordS2O(x: any, y: any, to: any): any;
+export function transcoordC2S(x: any, y: any, top: any): any;
+export function transcoordS2C(x: any, y: any, top: any): any;

package/dist/components/geometry/union.d.ts

@@ -0,0 +1,6 @@
+export default function union(boundsList: any): {
+    left: undefined;
+    top: undefined;
+    width: number;
+    height: number;
+};

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

@@ -0,0 +1,18 @@
+import { ComponentNature, HTMLOverlayElement, Properties } from '@hatiolab/things-scene';
+import { SuperGif } from '@wizpanda/super-gif';
+export default class GifView extends HTMLOverlayElement {
+    _superGif?: SuperGif;
+    oncreate_element(div: HTMLDivElement): Promise<void>;
+    buildImg(): HTMLImageElement;
+    onchange(after: Properties, before: Properties): void;
+    setElementProperties(div: HTMLDivElement): void;
+    onchangeplay(play: boolean): void;
+    onchangesrc(src: string): void;
+    ondropfile(transfered: DataTransferItemList, files: FileList): void;
+    get src(): any;
+    set src(src: any);
+    get play(): any;
+    set play(play: any);
+    get nature(): ComponentNature;
+    get tagName(): string;
+}

package/dist/components/gif-view.js

@@ -0,0 +1,116 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, HTMLOverlayElement } from '@hatiolab/things-scene';
+import { SuperGif } from '@wizpanda/super-gif';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'string',
+            label: 'src',
+            name: 'src'
+        },
+        {
+            type: 'checkbox',
+            label: 'play',
+            name: 'play'
+        }
+    ],
+    'value-property': 'src',
+    help: 'scene/component/gif-view'
+};
+const NOIMAGE_DATA_URI = 'data:image/gif;base64,R0lGODlhYABIAPcAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKio+Pj5iYmKCgoKampqurq66urrCwsLGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrOzs7S0tLa2tre3t7m5ubu7u7+/v8DAwMHBwcPDw8XFxcfHx8vLy8/Pz9LS0tXV1dfX193d3eTk5Onp6fj4+Pz8/P7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v///////////////////////////////////////////////////////////////////////////////yH5BAkAAPUAIf47R2VuZXJhdGVkIGJ5IGpzZ2lmIChodHRwczovL2dpdGh1Yi5jb20vYW50aW1hdHRlcjE1L2pzZ2lmLykALAAAAABgAEgAAAj+AGcJHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmR9VKqXMmypcuXMGPKnJkSIs2bOHPqZGlzp8+fQOv1DEq0KMyhRpMmRaq0KVCmTqPmhCq1qkyqLrFRSyYwGTVsVo1iZXmNa8Fk18ISHasSm1mDycCq/ck2JTWF1ObSfTjz7cFken3WFbow8M7BDA3rHOwXruKpfGXeTZg3qDVrUge7RRg3KLZjx+Q2HVyvLNy0QaMJjBaVdD2tZr2K/mmNIObRkR+n9AsYt0Pddg1WXppb8bWDx1CLLW74GcJnSl3TtDY8Zu2Et4tKl7n52eyWnxXvhl7+26jqrspbnlfIWjtz2gWPZV95neH8veU9NxZYfbfD3kFt99J6Bnmn0mQO9XfYezrVxxlmx0GUXIAM4hSeffsxBN1TFd5E4Ef3QZbfTg6CNJ5gHXJ3TEntLThiTh+KFCJNAqZU4kgAitjQTheepOBMNcZI0oQ6JpbTjSZtiNN2PZ400IxHpdiSc07G911M0iFZZYtAStnWilUeBGVLrlEZpmM0elmPlmfO8iOZXl4DZpsGEYmll2bSWWCXLwJXVY1+urhjoGEBSuiSah6K36CKtpZoo4s9CimielZq6aWYZqrpppx26umnoIZ6UkAAOw==';
+export default class GifView extends HTMLOverlayElement {
+    async oncreate_element(div) {
+        var { src, play } = this.state;
+        this.onchangesrc(src);
+        this.onchangeplay(play);
+    }
+    buildImg() {
+        /* clear first */
+        var div = this.element;
+        div.innerHTML = '';
+        var gif = document.createElement('img');
+        gif.style.width = '100%';
+        gif.style.height = '100%';
+        div.appendChild(gif);
+        return gif;
+    }
+    onchange(after, before) {
+        super.onchange(after, before);
+        'src' in after && this.onchangesrc(after.src);
+        'play' in after && this.onchangeplay(after.play);
+    }
+    setElementProperties(div) { }
+    onchangeplay(play) {
+        var superGif = this._superGif;
+        if (!superGif || !superGif.isReady()) {
+            return;
+        }
+        if (play) {
+            superGif.play();
+        }
+        else {
+            superGif.pause();
+        }
+    }
+    onchangesrc(src) {
+        var gif = this.buildImg();
+        if (!src)
+            src = NOIMAGE_DATA_URI;
+        gif.src = src;
+        gif.setAttribute('rel:animated_src', src);
+        gif.setAttribute('rel:auto_play', '0');
+        this._superGif = new SuperGif(gif, {
+            autoPlay: false /* Without this setting, the first play's framerate is too fast. */
+        });
+        //@ts-ignore
+        this._superGif.init();
+        for (const child of this.element.children) {
+            child.style.width = '100%';
+            child.style.height = '100%';
+        }
+        var canvas = this._superGif.getCanvas();
+        canvas.style.width = '100%';
+        canvas.style.height = '100%';
+        this._superGif.load(() => {
+            this._superGif.moveTo(0);
+            /*
+             * FIXME. this.play 는 컴포넌트의 getState()를 통해서 가져오게 되는데, 체크박스의 경우 문제가 있는 것 같다.
+             * 문제 해결 후 this.get("play") => this.play로 수정할 것.
+             */
+            this.play && this._superGif.play();
+        });
+    }
+    ondropfile(transfered, files) {
+        for (let i = 0; i < transfered.length; i++) {
+            if (/\.gif$/.test(transfered[i].name)) {
+                this.src = files[i];
+                return;
+            }
+        }
+    }
+    get src() {
+        return this.getState('src');
+    }
+    set src(src) {
+        this.set('src', src);
+    }
+    get play() {
+        return this.getState('play');
+    }
+    set play(play) {
+        this.setState('play', play);
+    }
+    get nature() {
+        return NATURE;
+    }
+    get tagName() {
+        return 'div';
+    }
+}
+Component.register('gif-view', GifView);
+//# sourceMappingURL=gif-view.js.map

package/dist/components/gif-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gif-view.js","sourceRoot":"","sources":["../../src/components/gif-view.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, ComponentNature, HTMLOverlayElement, Properties, RectPath, Shape } from '@hatiolab/things-scene'\nimport { SuperGif } from '@wizpanda/super-gif'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      label: 'src',\n      name: 'src'\n    },\n    {\n      type: 'checkbox',\n      label: 'play',\n      name: 'play'\n    }\n  ],\n  'value-property': 'src',\n  help: 'scene/component/gif-view'\n}\n\nconst NOIMAGE_DATA_URI =\n  'data:image/gif;base64,R0lGODlhYABIAPcAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKio+Pj5iYmKCgoKampqurq66urrCwsLGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrOzs7S0tLa2tre3t7m5ubu7u7+/v8DAwMHBwcPDw8XFxcfHx8vLy8/Pz9LS0tXV1dfX193d3eTk5Onp6fj4+Pz8/P7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v///////////////////////////////////////////////////////////////////////////////yH5BAkAAPUAIf47R2VuZXJhdGVkIGJ5IGpzZ2lmIChodHRwczovL2dpdGh1Yi5jb20vYW50aW1hdHRlcjE1L2pzZ2lmLykALAAAAABgAEgAAAj+AGcJHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmR9VKqXMmypcuXMGPKnJkSIs2bOHPqZGlzp8+fQOv1DEq0KMyhRpMmRaq0KVCmTqPmhCq1qkyqLrFRSyYwGTVsVo1iZXmNa8Fk18ISHasSm1mDycCq/ck2JTWF1ObSfTjz7cFken3WFbow8M7BDA3rHOwXruKpfGXeTZg3qDVrUge7RRg3KLZjx+Q2HVyvLNy0QaMJjBaVdD2tZr2K/mmNIObRkR+n9AsYt0Pddg1WXppb8bWDx1CLLW74GcJnSl3TtDY8Zu2Et4tKl7n52eyWnxXvhl7+26jqrspbnlfIWjtz2gWPZV95neH8veU9NxZYfbfD3kFt99J6Bnmn0mQO9XfYezrVxxlmx0GUXIAM4hSeffsxBN1TFd5E4Ef3QZbfTg6CNJ5gHXJ3TEntLThiTh+KFCJNAqZU4kgAitjQTheepOBMNcZI0oQ6JpbTjSZtiNN2PZ400IxHpdiSc07G911M0iFZZYtAStnWilUeBGVLrlEZpmM0elmPlmfO8iOZXl4DZpsGEYmll2bSWWCXLwJXVY1+urhjoGEBSuiSah6K36CKtpZoo4s9CimielZq6aWYZqrpppx26umnoIZ6UkAAOw=='\n\nexport default class GifView extends HTMLOverlayElement {\n  _superGif?: SuperGif\n\n  async oncreate_element(div: HTMLDivElement) {\n    var { src, play } = this.state\n\n    this.onchangesrc(src)\n    this.onchangeplay(play)\n  }\n\n  buildImg() {\n    /* clear first */\n    var div = this.element\n    div.innerHTML = ''\n\n    var gif = document.createElement('img')\n    gif.style.width = '100%'\n    gif.style.height = '100%'\n\n    div.appendChild(gif)\n\n    return gif\n  }\n\n  onchange(after: Properties, before: Properties) {\n    super.onchange(after, before)\n\n    'src' in after && this.onchangesrc(after.src)\n    'play' in after && this.onchangeplay(after.play)\n  }\n\n  setElementProperties(div: HTMLDivElement) {}\n\n  onchangeplay(play: boolean) {\n    var superGif = this._superGif\n\n    if (!superGif || !superGif.isReady()) {\n      return\n    }\n\n    if (play) {\n      superGif.play()\n    } else {\n      superGif.pause()\n    }\n  }\n\n  onchangesrc(src: string) {\n    var gif = this.buildImg()\n\n    if (!src) src = NOIMAGE_DATA_URI\n\n    gif.src = src\n    gif.setAttribute('rel:animated_src', src)\n    gif.setAttribute('rel:auto_play', '0')\n\n    this._superGif = new SuperGif(gif, {\n      autoPlay: false /* Without this setting, the first play's framerate is too fast. */\n    })\n    //@ts-ignore\n    this._superGif!.init()\n\n    for (const child of this.element.children as any) {\n      child.style.width = '100%'\n      child.style.height = '100%'\n    }\n\n    var canvas = this._superGif!.getCanvas()\n    canvas.style.width = '100%'\n    canvas.style.height = '100%'\n\n    this._superGif.load(() => {\n      this._superGif!.moveTo(0)\n\n      /*\n       * FIXME. this.play 는 컴포넌트의 getState()를 통해서 가져오게 되는데, 체크박스의 경우 문제가 있는 것 같다.\n       * 문제 해결 후 this.get(\"play\") => this.play로 수정할 것.\n       */\n      this.play && this._superGif!.play()\n    })\n  }\n\n  ondropfile(transfered: DataTransferItemList, files: FileList) {\n    for (let i = 0; i < transfered.length; i++) {\n      if (/\\.gif$/.test((transfered[i] as any).name)) {\n        this.src = files[i]\n        return\n      }\n    }\n  }\n\n  get src() {\n    return this.getState('src')\n  }\n\n  set src(src) {\n    this.set('src', src)\n  }\n\n  get play() {\n    return this.getState('play')\n  }\n\n  set play(play) {\n    this.setState('play', play)\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  get tagName() {\n    return 'div'\n  }\n}\n\nComponent.register('gif-view', GifView)\n"]}