@hatiolab/things-scene 3.4.38 → 3.4.41

package/dist/components/container.js

@@ -1,75 +0,0 @@
-/*
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,16 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

package/dist/components/donut.d.ts

@@ -1,15 +0,0 @@
-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

@@ -1,74 +0,0 @@
-/*
- * 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

@@ -1 +0,0 @@
-{"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

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

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

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

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

@@ -1,14 +0,0 @@
-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

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

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

@@ -1,3 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-/**
- * 주어진 텍스트를 주어진 폭(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

@@ -1,3 +0,0 @@
-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

@@ -1,35 +0,0 @@
-/// <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

@@ -1,99 +0,0 @@
-/*
- * 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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1,15 +0,0 @@
-/**
- * !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

@@ -1,41 +0,0 @@
-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

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

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

@@ -1,18 +0,0 @@
-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

@@ -1,116 +0,0 @@
-/*
- * 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

@@ -1 +0,0 @@
-{"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"]}