@operato/scene-basic 1.2.5

package/dist/ellipse.js

@@ -0,0 +1,72 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, Connectable, Shape } from '@hatiolab/things-scene';
+import ellipseAnchors from './anchors/ellipse-anchors';
+import ellipseOutline from './outline/ellipse-outline';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [],
+    'value-property': 'text'
+};
+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);
+    }
+    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/ellipse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ellipse.js","sourceRoot":"","sources":["../src/ellipse.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAU,SAAS,EAAmB,WAAW,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAE/F,OAAO,cAAc,MAAM,2BAA2B,CAAA;AACtD,OAAO,cAAc,MAAM,2BAA2B,CAAA;AAEtD,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,EAAE;IACd,gBAAgB,EAAE,MAAM;CACzB,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,WAAW,CAAC,KAAK,CAAC;IACrD,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,CAAC,OAAiC;QACtC,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAExE,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,OAAO,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,IAAI,CAAC,EAAE,QAAQ,IAAI,CAAC,GAAG,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC,CAAA;IACjH,CAAC;IAED,IAAI,IAAI;QACN,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAEnC,OAAO;YACL;gBACE,CAAC,EAAE,EAAE,GAAG,EAAE;gBACV,CAAC,EAAE,EAAE,GAAG,EAAE;aACX;YACD;gBACE,CAAC,EAAE,EAAE,GAAG,EAAE;gBACV,CAAC,EAAE,EAAE,GAAG,EAAE;aACX;YACD;gBACE,CAAC,EAAE,EAAE,GAAG,EAAE;gBACV,CAAC,EAAE,EAAE,GAAG,EAAE;aACX;YACD;gBACE,CAAC,EAAE,EAAE,GAAG,EAAE;gBACV,CAAC,EAAE,EAAE,GAAG,EAAE;aACX;SACF,CAAA;IACH,CAAC;IAED,IAAI,IAAI,CAAC,IAAI;QACX,IAAI,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;QACtB,IAAI,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;QAE1B,IAAI,CAAC,GAAG,CAAC;YACP,EAAE,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;YAClD,EAAE,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;YAClD,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;YACrC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;SACtC,CAAC,CAAA;IACJ,CAAC;IAED,QAAQ,CAAC,CAAS,EAAE,CAAS;QAC3B,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAEnC,IAAI,KAAK,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,CAAC,CAAA;QACrC,IAAI,KAAK,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,CAAC,CAAA;QAErC,OAAO,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,CAAA;IAC7C,CAAC;IAED,OAAO,CAAC,QAAgB;QACtB,OAAO,cAAc,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;IACvC,CAAC;IAED,IAAI,OAAO;QACT,OAAO,cAAc,CAAC,IAAI,CAAC,CAAA;IAC7B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAA;AAEnD,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Anchor, Component, ComponentNature, Connectable, Shape } from '@hatiolab/things-scene'\n\nimport ellipseAnchors from './anchors/ellipse-anchors'\nimport ellipseOutline from './outline/ellipse-outline'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [],\n  'value-property': 'text'\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  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/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/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/gif-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gif-view.js","sourceRoot":"","sources":["../src/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"]}

package/dist/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/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

package/dist/image-view.js.map

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

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Ellipse } from './ellipse';
+export { default as Rect } from './rect';
+export { default as Polygon } from './polygon';
+export { default as Polyline } from './polyline';
+export { default as ImageView } from './image-view';
+export { default as GifView } from './gif-view';
+export { default as AudioPlayer } from './audio';
+export { default as Text } from './text';
+export { default as Triangle } from './triangle';
+export { default as Donut } from './donut';
+export { default as Star } from './star';

package/dist/index.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+export { default as Ellipse } from './ellipse';
+export { default as Rect } from './rect';
+export { default as Polygon } from './polygon';
+export { default as Polyline } from './polyline';
+export { default as ImageView } from './image-view';
+export { default as GifView } from './gif-view';
+export { default as AudioPlayer } from './audio';
+export { default as Text } from './text';
+export { default as Triangle } from './triangle';
+export { default as Donut } from './donut';
+export { default as Star } from './star';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AAExC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport { default as Ellipse } from './ellipse'\nexport { default as Rect } from './rect'\nexport { default as Polygon } from './polygon'\nexport { default as Polyline } from './polyline'\nexport { default as ImageView } from './image-view'\nexport { default as GifView } from './gif-view'\nexport { default as AudioPlayer } from './audio'\nexport { default as Text } from './text'\n\nexport { default as Triangle } from './triangle'\nexport { default as Donut } from './donut'\nexport { default as Star } from './star'\n"]}

package/dist/outline/ellipse-outline.d.ts

@@ -0,0 +1,2 @@
+import { Component } from '@hatiolab/things-scene';
+export default function ellipseOutline(component: Component, progress: number): import("@hatiolab/things-scene").DIMENSION;

package/dist/outline/ellipse-outline.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+export default function ellipseOutline(component, progress) {
+    var { cx, cy, rx, ry } = component.model;
+    var theta = Math.PI * 2 * progress;
+    var x = cx + rx * Math.cos(theta);
+    var y = cy + ry * Math.sin(theta);
+    return component.transcoordS2T(x, y);
+}
+//# sourceMappingURL=ellipse-outline.js.map

package/dist/outline/ellipse-outline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ellipse-outline.js","sourceRoot":"","sources":["../../src/outline/ellipse-outline.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,SAAoB,EAAE,QAAgB;IAC3E,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,KAAK,CAAA;IACxC,IAAI,KAAK,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,GAAG,QAAQ,CAAA;IAElC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;IACjC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;IAEjC,OAAO,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACtC,CAAC","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component } from '@hatiolab/things-scene'\n\nexport default function ellipseOutline(component: Component, progress: number) {\n  var { cx, cy, rx, ry } = component.model\n  var theta = Math.PI * 2 * progress\n\n  var x = cx + rx * Math.cos(theta)\n  var y = cy + ry * Math.sin(theta)\n\n  return component.transcoordS2T(x, y)\n}\n"]}

package/dist/polygon.d.ts

@@ -0,0 +1,19 @@
+import { Component, ComponentNature, DIMENSION, Shape } from '@hatiolab/things-scene';
+export default class Polygon extends Shape {
+    is3dish(): boolean;
+    get mutable(): boolean;
+    get pathExtendable(): boolean;
+    get path(): any;
+    set path(path: any);
+    contains(x: number, y: number): boolean;
+    get controls(): {
+        x: number;
+        y: number;
+        handler: {
+            ondragstart: (point: DIMENSION, index: number, component: Component) => void;
+            ondragmove: (point: DIMENSION, index: number, component: Component) => void;
+            ondragend: (point: DIMENSION, index: number, component: Component) => void;
+        };
+    }[];
+    get nature(): ComponentNature;
+}

package/dist/polygon.js

@@ -0,0 +1,84 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, Shape } from '@hatiolab/things-scene';
+var controlHandler = {
+    ondragstart: function (point, index, component) {
+        component.mutatePath(null, function (path) {
+            path.splice(index + 1, 0, point);
+        });
+    },
+    ondragmove: function (point, index, component) {
+        component.mutatePath(null, function (path) {
+            path[index + 1] = point;
+        });
+    },
+    ondragend: function (point, index, component) { }
+};
+const NATURE = {
+    mutable: true,
+    resizable: false,
+    rotatable: true,
+    properties: [
+        {
+            type: 'number',
+            label: 'round',
+            name: 'round',
+            property: {
+                min: 0,
+                max: 100,
+                step: 1
+            }
+        }
+    ],
+    help: 'scene/component/polygon'
+};
+export default class Polygon extends Shape {
+    is3dish() {
+        return true;
+    }
+    get mutable() {
+        return true;
+    }
+    get pathExtendable() {
+        return true;
+    }
+    get path() {
+        return this.state.path;
+    }
+    set path(path) {
+        this.set('path', path);
+    }
+    contains(x, y) {
+        var path = this.state.path;
+        var result = false;
+        path.forEach((p, idx) => {
+            let j = (idx + path.length + 1) % path.length;
+            let x1 = p.x;
+            let y1 = p.y;
+            let x2 = path[j].x;
+            let y2 = path[j].y;
+            if (y1 > y != y2 > y && x < ((x2 - x1) * (y - y1)) / (y2 - y1) + x1)
+                result = !result;
+        });
+        return result;
+    }
+    get controls() {
+        // 폴리곤에서의 control은 새로운 path를 추가하는 포인트이다.
+        var path = this.path;
+        return path.map((p1, i) => {
+            let p2 = path[i + 1 >= path.length ? 0 : i + 1];
+            return {
+                x: (p1.x + p2.x) / 2,
+                y: (p1.y + p2.y) / 2,
+                handler: controlHandler
+            };
+        });
+    }
+    get nature() {
+        return NATURE;
+    }
+}
+Component.memoize(Polygon.prototype, 'controls', false);
+Component.register('polygon', Polygon);
+//# sourceMappingURL=polygon.js.map

package/dist/polygon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polygon.js","sourceRoot":"","sources":["../src/polygon.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, DIMENSION, POSITION, Properties, RectPath, Shape } from '@hatiolab/things-scene'\n\nvar controlHandler = {\n  ondragstart: function (point: POSITION, index: number, component: Component) {\n    component.mutatePath(null, function (path: Array<DIMENSION>) {\n      path.splice(index + 1, 0, point)\n    })\n  },\n\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    component.mutatePath(null, function (path: Array<DIMENSION>) {\n      path[index + 1] = point\n    })\n  },\n\n  ondragend: function (point: POSITION, index: number, component: Component) {}\n}\n\nconst NATURE: ComponentNature = {\n  mutable: true,\n  resizable: false,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0,\n        max: 100,\n        step: 1\n      }\n    }\n  ],\n  help: 'scene/component/polygon'\n}\n\nexport default class Polygon extends Shape {\n  is3dish() {\n    return true\n  }\n\n  get mutable() {\n    return true\n  }\n\n  get pathExtendable() {\n    return true\n  }\n\n  get path() {\n    return this.state.path\n  }\n\n  set path(path) {\n    this.set('path', path)\n  }\n\n  contains(x: number, y: number) {\n    var path = this.state.path as Array<DIMENSION>\n    var result = false\n\n    path.forEach((p, idx) => {\n      let j = (idx + path.length + 1) % path.length\n\n      let x1 = p.x\n      let y1 = p.y\n      let x2 = path[j].x\n      let y2 = path[j].y\n\n      if (y1 > y != y2 > y && x < ((x2 - x1) * (y - y1)) / (y2 - y1) + x1) result = !result\n    })\n\n    return result\n  }\n\n  get controls() {\n    // 폴리곤에서의 control은 새로운 path를 추가하는 포인트이다.\n    var path = this.path as Array<DIMENSION>\n\n    return path.map((p1, i) => {\n      let p2 = path[i + 1 >= path.length ? 0 : i + 1]\n\n      return {\n        x: (p1.x + p2.x) / 2,\n        y: (p1.y + p2.y) / 2,\n        handler: controlHandler\n      }\n    })\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.memoize(Polygon.prototype, 'controls', false)\n\nComponent.register('polygon', Polygon)\n"]}