@hatiolab/things-scene 9.0.0-beta.2 → 9.0.0-beta.4

package/dist/animation/animate.d.ts

@@ -0,0 +1,4 @@
+export default function animate(config: any): {
+    start: () => any;
+    stop: () => any;
+};

package/dist/animation/animations/animation.d.ts

@@ -0,0 +1,14 @@
+export default class Animation {
+    constructor(client: any, config: any);
+    client: any;
+    config: any;
+    _started: boolean;
+    delta: any;
+    dispose(): void;
+    init(): void;
+    start(): void;
+    _raf: number | null | undefined;
+    stop(): void;
+    set started(arg: boolean);
+    get started(): boolean;
+}

package/dist/animation/animations/fade.d.ts

@@ -0,0 +1,4 @@
+export default class Fade extends Animation {
+    step(delta: any): void;
+}
+import Animation from "./animation";

package/dist/animation/animations/heartbeat.d.ts

@@ -0,0 +1,4 @@
+export default class HeartBeat extends Animation {
+    step(delta: any): void;
+}
+import Animation from "./animation";

package/dist/animation/animations/moving.d.ts

@@ -0,0 +1,4 @@
+export default class Moving extends Animation {
+    step(delta: any): void;
+}
+import Animation from "./animation";

package/dist/animation/animations/outline.d.ts

@@ -0,0 +1,10 @@
+/**
+ outline 애니메이션은 정지해있는 컴포넌트의 outline을 따라 움직이는 효과를 만들어낸다.
+ 만일 아웃라인을 제공하는 컴포넌트가 애니메이션 동작중이면, 애니메이션 동작에 의한 아웃라인의 변화는 반영되지 않는다.
+ 애니메이션이 아닌 실제 위치가 변경되는 경우에는 반영된다.
+ 아웃라인 컴포넌트와 애니메이션 컴포넌트가 동일 부모 아래서 적용된다면, 부모의 움직임이 반영되는 효과를 만들어 낼 수 있다.
+*/
+export default class Outline extends Animation {
+    step(delta: any): void;
+}
+import Animation from "./animation";

package/dist/animation/animations/rotation.d.ts

@@ -0,0 +1,4 @@
+export default class Rotation extends Animation {
+    step(delta: any): void;
+}
+import Animation from "./animation";

package/dist/animation/animations/vibration.d.ts

@@ -0,0 +1,4 @@
+export default class Vibration extends Animation {
+    step(delta: any): void;
+}
+import Animation from "./animation";

package/dist/animation/compile.d.ts

@@ -0,0 +1 @@
+export default function compile(client: any, animationConfig: any): any;

package/dist/animation/delta.d.ts

@@ -0,0 +1,19 @@
+export function linear(progress: any): any;
+export function quad(progress: any): number;
+export function circ(progress: any): number;
+export function back(progress: any, options?: {
+    x: number;
+}): number;
+export function bounce(progress: any): number | undefined;
+export function elastic(progress: any, options?: {
+    x: number;
+}): number;
+declare namespace _default {
+    export { linear };
+    export { quad };
+    export { circ };
+    export { back };
+    export { bounce };
+    export { elastic };
+}
+export default _default;

package/dist/animation/index.d.ts

@@ -0,0 +1 @@
+export { default as compile } from "./compile";

package/dist/command/command-change.d.ts

@@ -0,0 +1,7 @@
+export default class CommandChange extends Command {
+    static before(components: any): any;
+    static after(changes: any, commander: any): void;
+    static around(commander: any, changeFunc: any, self: any): void;
+    execute(): void;
+}
+import Command from "./command";

package/dist/command/command-migrate.d.ts

@@ -0,0 +1,4 @@
+export default class CommandMigrate extends Command {
+    execute(): void;
+}
+import Command from "./command";

package/dist/command/command-migrate.js

@@ -0,0 +1,85 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import Component from '../components/component';
+import Command from './command';
+function calculate_bounds_on_root(component) {
+    if (component.isRootModel())
+        return component.bounds;
+    var { bounds, rotatePoint } = component;
+    var pointOnTop = rotatePoint;
+    // if(component.parent && !component.parent.isRootModel())
+    // pointOnTop = recursive_transcoordS2P(pointOnTop, component.parent)
+    // TODO 목적상 아래 로직으로 대체 가능할 것이다. 검토하라. (스케일된 컴포넌트에 대해서 이상작동한다.)
+    pointOnTop = component.transcoordS2T(pointOnTop.x, pointOnTop.y);
+    return {
+        left: pointOnTop.x - (rotatePoint.x - bounds.left),
+        top: pointOnTop.y - (rotatePoint.y - bounds.top),
+        width: bounds.width,
+        height: bounds.height
+    };
+}
+function calculate_bounds_on_container(component, container) {
+    if (container.isRootModel())
+        return component.bounds;
+    var { bounds, rotatePoint } = component;
+    var pointOnContainer = container.transcoordT2S(rotatePoint.x, rotatePoint.y);
+    var container_bounds = container.bounds;
+    return {
+        left: pointOnContainer.x - (rotatePoint.x - bounds.left) - container_bounds.left,
+        top: pointOnContainer.y - (rotatePoint.y - bounds.top) - container_bounds.top,
+        width: bounds.width,
+        height: bounds.height
+    };
+}
+function calculate_rotation_on_root(component) {
+    var rotation = 0;
+    while (component && !component.isRootModel()) {
+        rotation += component.get('rotation') || 0;
+        component = component.parent;
+    }
+    return rotation % (Math.PI * 2);
+}
+function calculate_rotation_on_container(component, container) {
+    var rotation = component.get('rotation') || 0;
+    var container_rotation = calculate_rotation_on_root(container);
+    return (rotation - container_rotation) % (Math.PI * 2);
+}
+/*
+ * 컴포넌트가 추가, 삭제되거나 부모컨테이너를 바꿔서 이동하는 경우.
+ * 새로운 그룹을 만들거나, 그룹해제 되는 경우도 포함됨.
+ *
+ * to_container, component, to_index
+ *
+ */
+export default class CommandMigrate extends Command {
+    execute() {
+        var changes = this.params.changes;
+        changes.forEach(change => {
+            let { component, to_container, to_index, to_left, to_top, hint } = change;
+            let bounds = calculate_bounds_on_root(component);
+            let rotation = calculate_rotation_on_root(component);
+            /* to_container가 없으면, 완전히 제거함 */
+            component.removeSelf(!to_container);
+            component.bounds = bounds;
+            component.set('rotation', rotation);
+            if (to_container) {
+                component.set('rotation', calculate_rotation_on_container(component, to_container));
+                let bounds = calculate_bounds_on_container(component, to_container);
+                change.to_left = to_left !== undefined ? to_left : bounds.left;
+                change.to_top = to_top !== undefined ? to_top : bounds.top;
+                component.bounds = {
+                    left: change.to_left,
+                    top: change.to_top,
+                    width: bounds.width,
+                    height: bounds.height
+                };
+                if (typeof to_index === 'undefined')
+                    to_container.addComponent(component);
+                else
+                    to_container.insertComponentAt(component, to_index);
+            }
+        });
+    }
+}
+//# sourceMappingURL=command-migrate.js.map

package/dist/command/command-migrate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-migrate.js","sourceRoot":"","sources":["../../src/command/command-migrate.js"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport Component from '../components/component'\nimport Command from './command'\n\nfunction calculate_bounds_on_root(component) {\n  if (component.isRootModel()) return component.bounds\n\n  var { bounds, rotatePoint } = component\n\n  var pointOnTop = rotatePoint\n  // if(component.parent && !component.parent.isRootModel())\n  // pointOnTop = recursive_transcoordS2P(pointOnTop, component.parent)\n  // TODO 목적상 아래 로직으로 대체 가능할 것이다. 검토하라. (스케일된 컴포넌트에 대해서 이상작동한다.)\n  pointOnTop = component.transcoordS2T(pointOnTop.x, pointOnTop.y)\n\n  return {\n    left: pointOnTop.x - (rotatePoint.x - bounds.left),\n    top: pointOnTop.y - (rotatePoint.y - bounds.top),\n    width: bounds.width,\n    height: bounds.height\n  }\n}\n\nfunction calculate_bounds_on_container(component, container) {\n  if (container.isRootModel()) return component.bounds\n\n  var { bounds, rotatePoint } = component\n\n  var pointOnContainer = container.transcoordT2S(rotatePoint.x, rotatePoint.y)\n\n  var container_bounds = container.bounds\n\n  return {\n    left: pointOnContainer.x - (rotatePoint.x - bounds.left) - container_bounds.left,\n    top: pointOnContainer.y - (rotatePoint.y - bounds.top) - container_bounds.top,\n    width: bounds.width,\n    height: bounds.height\n  }\n}\n\nfunction calculate_rotation_on_root(component) {\n  var rotation = 0\n\n  while (component && !component.isRootModel()) {\n    rotation += component.get('rotation') || 0\n\n    component = component.parent\n  }\n\n  return rotation % (Math.PI * 2)\n}\n\nfunction calculate_rotation_on_container(component, container) {\n  var rotation = component.get('rotation') || 0\n  var container_rotation = calculate_rotation_on_root(container)\n\n  return (rotation - container_rotation) % (Math.PI * 2)\n}\n\n/*\n * 컴포넌트가 추가, 삭제되거나 부모컨테이너를 바꿔서 이동하는 경우.\n * 새로운 그룹을 만들거나, 그룹해제 되는 경우도 포함됨.\n *\n * to_container, component, to_index\n *\n */\nexport default class CommandMigrate extends Command {\n  execute() {\n    var changes = this.params.changes\n\n    changes.forEach(change => {\n      let { component, to_container, to_index, to_left, to_top, hint } = change\n\n      let bounds = calculate_bounds_on_root(component)\n      let rotation = calculate_rotation_on_root(component)\n\n      /* to_container가 없으면, 완전히 제거함 */\n      component.removeSelf(!to_container)\n\n      component.bounds = bounds\n      component.set('rotation', rotation)\n\n      if (to_container) {\n        component.set('rotation', calculate_rotation_on_container(component, to_container))\n        let bounds = calculate_bounds_on_container(component, to_container)\n\n        change.to_left = to_left !== undefined ? to_left : bounds.left\n        change.to_top = to_top !== undefined ? to_top : bounds.top\n\n        component.bounds = {\n          left: change.to_left,\n          top: change.to_top,\n          width: bounds.width,\n          height: bounds.height\n        }\n\n        if (typeof to_index === 'undefined') to_container.addComponent(component)\n        else to_container.insertComponentAt(component, to_index)\n      }\n    })\n  }\n}\n"]}

package/dist/command/command.d.ts

@@ -0,0 +1,5 @@
+export default class Command {
+    constructor(params: any);
+    params: any;
+    excute(): void;
+}

package/dist/command/snapshot-commander.d.ts

@@ -0,0 +1,15 @@
+export default class SnapshotCommander {
+    constructor(container: any);
+    container: any;
+    timecapsule: TimeCapsule;
+    snapshot_taker: SnapshotTaker;
+    dispose(): void;
+    execute(command: any, doit: any): void;
+    undo(): void;
+    redo(): void;
+    undoable(): boolean;
+    redoable(): boolean;
+    reset(): void;
+}
+import TimeCapsule from "../core/timecapsule";
+import SnapshotTaker from "../core/snapshot-taker";

package/dist/components/anchor/anchor.d.ts

@@ -0,0 +1,128 @@
+/**
+ * Position definition
+ * @typedef {Object} Position
+ * @property {number} x - x position
+ * @property {number} y - y position
+ */
+/**
+ * Bounds definition
+ * @typedef {Object} Bounds
+ * @property {number} left - left position
+ * @property {number} top - top position
+ * @property {number} width - width
+ * @property {number} height - height
+ */
+/**
+ * anchorDrawFunction
+ * @param {CanvasRenderingContext2D} context
+ * @param {Component} component
+ */
+/**
+ * Anchor definition
+ * @typedef {Object} Anchor
+ * @property {string} name - name of the anchor
+ * @property {string} type - type of the anchor
+ * @property {string} inout - inout direction of the anchor 'in', 'out', 'inout'
+ * @property {Position} position - position of the anchor
+ * @property {Bounds} bounds - bounds of the anchor
+ * @property {boolean} multiplicity - multiplicity
+ * @property {anchorDrawFunction} draw
+ */
+/**
+ * @function findInOutLines
+ * @param {Component} component
+ * @param {string} anchorName
+ * @return {Line[]}
+ */
+export function findInOutLines(component: Component, anchorName: string): Line[];
+/**
+ * @function findOutletLines
+ * @param {Component} component
+ * @param {string} anchorName
+ * @return {Line[]}
+ */
+export function findOutletLines(component: Component, anchorName: string): Line[];
+/**
+ * @function findOutletEnds
+ * @param {Component} component
+ * @param {string} anchorName
+ * @return {Component[]}
+ */
+export function findOutletEnds(component: Component, anchorName: string): Component[];
+/**
+ * @function findInletLines
+ * @param {Component} component
+ * @return {Line[]}
+ */
+export function findInletLines(component: Component, anchorName: any): Line[];
+/**
+ * @function findInletEnds
+ * @param {Component} component
+ * @param {string} anchorName
+ * @return {Component[]}
+ */
+export function findInletEnds(component: Component, anchorName: string): Component[];
+/**
+ * Position definition
+ */
+export type Position = {
+    /**
+     * - x position
+     */
+    x: number;
+    /**
+     * - y position
+     */
+    y: number;
+};
+/**
+ * Bounds definition
+ */
+export type Bounds = {
+    /**
+     * - left position
+     */
+    left: number;
+    /**
+     * - top position
+     */
+    top: number;
+    /**
+     * - width
+     */
+    width: number;
+    /**
+     * - height
+     */
+    height: number;
+};
+/**
+ * Anchor definition
+ */
+export type Anchor = {
+    /**
+     * - name of the anchor
+     */
+    name: string;
+    /**
+     * - type of the anchor
+     */
+    type: string;
+    /**
+     * - inout direction of the anchor 'in', 'out', 'inout'
+     */
+    inout: string;
+    /**
+     * - position of the anchor
+     */
+    position: Position;
+    /**
+     * - bounds of the anchor
+     */
+    bounds: Bounds;
+    /**
+     * - multiplicity
+     */
+    multiplicity: boolean;
+    draw: anchorDrawFunction;
+};

package/dist/components/anchor/ellipse-anchors.d.ts

@@ -0,0 +1,2 @@
+import { Anchor, Component } from '@hatiolab/things-scene';
+export default function ellipseAnchors(component: Component): Anchor[];

package/dist/components/anchor/ellipse-anchors.js

@@ -0,0 +1,38 @@
+export default function ellipseAnchors(component) {
+    var { left, top, width, height } = component.bounds;
+    var centerx = left + width / 2;
+    var centery = top + height / 2;
+    var right = left + width;
+    var bottom = top + height;
+    return [
+        {
+            name: 'TOP',
+            position: {
+                x: centerx,
+                y: top
+            }
+        },
+        {
+            name: 'RIGHT',
+            position: {
+                x: right,
+                y: centery
+            }
+        },
+        {
+            name: 'BOTTOM',
+            position: {
+                x: centerx,
+                y: bottom
+            }
+        },
+        {
+            name: 'LEFT',
+            position: {
+                x: left,
+                y: centery
+            }
+        }
+    ];
+}
+//# sourceMappingURL=ellipse-anchors.js.map

package/dist/components/anchor/ellipse-anchors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ellipse-anchors.js","sourceRoot":"","sources":["../../../src/components/anchor/ellipse-anchors.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,SAAoB;IACzD,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAA;IAEnD,IAAI,OAAO,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,CAAA;IAC9B,IAAI,OAAO,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,CAAA;IAC9B,IAAI,KAAK,GAAG,IAAI,GAAG,KAAK,CAAA;IACxB,IAAI,MAAM,GAAG,GAAG,GAAG,MAAM,CAAA;IAEzB,OAAO;QACL;YACE,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE;gBACR,CAAC,EAAE,OAAO;gBACV,CAAC,EAAE,GAAG;aACP;SACF;QACD;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE;gBACR,CAAC,EAAE,KAAK;gBACR,CAAC,EAAE,OAAO;aACX;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE;gBACR,CAAC,EAAE,OAAO;gBACV,CAAC,EAAE,MAAM;aACV;SACF;QACD;YACE,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE;gBACR,CAAC,EAAE,IAAI;gBACP,CAAC,EAAE,OAAO;aACX;SACF;KACF,CAAA;AACH,CAAC","sourcesContent":["import { Anchor, Component } from '@hatiolab/things-scene'\n\nexport default function ellipseAnchors(component: Component): Anchor[] {\n  var { left, top, width, height } = component.bounds\n\n  var centerx = left + width / 2\n  var centery = top + height / 2\n  var right = left + width\n  var bottom = top + height\n\n  return [\n    {\n      name: 'TOP',\n      position: {\n        x: centerx,\n        y: top\n      }\n    },\n    {\n      name: 'RIGHT',\n      position: {\n        x: right,\n        y: centery\n      }\n    },\n    {\n      name: 'BOTTOM',\n      position: {\n        x: centerx,\n        y: bottom\n      }\n    },\n    {\n      name: 'LEFT',\n      position: {\n        x: left,\n        y: centery\n      }\n    }\n  ]\n}\n"]}

package/dist/components/anchor/rect-anchors.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @typedef {import('./anchor.js').Anchor} Anchor
+ */
+/**
+ * @function rectAnchors
+ * @param {Component} component
+ * @return {Anchor[]}
+ */
+export default function rectAnchors(component: Component): Anchor[];
+export type Anchor = import('./anchor.js').Anchor;

package/dist/components/audio.d.ts

@@ -0,0 +1,25 @@
+import { ComponentNature, Properties, Shape } from '@hatiolab/things-scene';
+declare const AudioPlayer_base: typeof Shape;
+export default class AudioPlayer extends AudioPlayer_base {
+    static IMAGE: HTMLImageElement;
+    static get image(): HTMLImageElement;
+    _audio: any;
+    dispose(): void;
+    ready(): void;
+    render(ctx: CanvasRenderingContext2D): void;
+    get nature(): ComponentNature;
+    get hasTextProperty(): boolean;
+    get src(): any;
+    set src(src: any);
+    get started(): boolean;
+    set started(started: boolean);
+    start(): void;
+    pause(): void;
+    onchangeSrc(src: string): void;
+    onchangeStarted(started: boolean): void;
+    onchangeLoop(loop: boolean): void;
+    onchange(after: Properties, before: Properties): void;
+    ondblclick(e: MouseEvent): void;
+    ondropfile(transfered: DataTransferItemList, files: FileList): void;
+}
+export {};

package/dist/components/audio.js

@@ -0,0 +1,141 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, RectPath, Shape } from '@hatiolab/things-scene';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'string',
+            label: 'src',
+            name: 'src'
+        },
+        {
+            type: 'checkbox',
+            label: 'started',
+            name: 'started'
+        },
+        {
+            type: 'checkbox',
+            label: 'loop',
+            name: 'loop'
+        }
+    ],
+    'value-property': 'src',
+    help: 'scene/component/audio'
+};
+const AUDIO_IMAGE = 'data:image/png;base64,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';
+export default class AudioPlayer extends RectPath(Shape) {
+    static get image() {
+        if (!AudioPlayer.IMAGE) {
+            AudioPlayer.IMAGE = new Image();
+            AudioPlayer.IMAGE.src = AUDIO_IMAGE;
+        }
+        return AudioPlayer.IMAGE;
+    }
+    dispose() {
+        super.dispose();
+        this.started = false;
+        delete this._audio;
+    }
+    ready() {
+        super.ready();
+        this._audio = new Audio();
+        this._audio.addEventListener('canplay', () => {
+            this.started && this._audio.play();
+        });
+        var { src = '', loop = false, started = false } = this.state;
+        this.onchangeSrc(src);
+        this.onchangeLoop(loop);
+        this.onchangeStarted(started);
+    }
+    render(ctx) {
+        var { left, top, width, height, src } = this.state;
+        ctx.beginPath();
+        this.drawImage(ctx, AudioPlayer.image, left, top, width, height);
+    }
+    get nature() {
+        return NATURE;
+    }
+    get hasTextProperty() {
+        return false;
+    }
+    get src() {
+        return this.get('src');
+    }
+    set src(src) {
+        this.set('src', src);
+    }
+    get started() {
+        return !!this.get('started');
+    }
+    set started(started) {
+        this.set('started', started);
+    }
+    start() {
+        if (!this._audio)
+            return;
+        this._audio.classList.add('active');
+        this._audio.play();
+    }
+    pause() {
+        if (!this._audio)
+            return;
+        this._audio.classList.remove('active');
+        this._audio.pause();
+    }
+    onchangeSrc(src) {
+        try {
+            // this._audio.crossOrigin = "anonymous";
+            if (String(src).substring(0, 4) !== 'data')
+                this._audio.crossOrigin = 'use-credentials';
+            else
+                this._audio.crossOrigin = null;
+            this._audio.src = typeof src === 'string' ? this.app.url(src) : src;
+        }
+        catch (e) {
+            console.error(e);
+            return;
+        }
+    }
+    onchangeStarted(started) {
+        const audio = this._audio;
+        if (started) {
+            /*
+              [ audio/video.readyState ]
+              0 = HAVE_NOTHING - no information whether or not the audio/video is ready
+              1 = HAVE_METADATA - metadata for the audio/video is ready
+              2 = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond
+              3 = HAVE_FUTURE_DATA - data for the current and at least the next frame is available
+              4 = HAVE_ENOUGH_DATA - enough data available to start playing
+            */
+            audio.readyState == 4 && audio.play();
+        }
+        else {
+            audio.pause();
+        }
+    }
+    onchangeLoop(loop) {
+        this._audio.loop = loop;
+    }
+    onchange(after, before) {
+        'src' in after && this.onchangeSrc(after.src);
+        'started' in after && this.onchangeStarted(after.started);
+        'loop' in after && this.onchangeLoop(after.loop);
+    }
+    ondblclick(e) {
+        this.started = !this.started;
+    }
+    ondropfile(transfered, files) {
+        for (let i = 0; i < transfered.length; i++) {
+            if (transfered[i].type.startsWith('audio/')) {
+                this.src = files[i];
+                return;
+            }
+        }
+    }
+}
+Component.register('audio', AudioPlayer);
+//# sourceMappingURL=audio.js.map

package/dist/components/audio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio.js","sourceRoot":"","sources":["../../src/components/audio.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { 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: 'string',\n      label: 'src',\n      name: 'src'\n    },\n    {\n      type: 'checkbox',\n      label: 'started',\n      name: 'started'\n    },\n    {\n      type: 'checkbox',\n      label: 'loop',\n      name: 'loop'\n    }\n  ],\n  'value-property': 'src',\n  help: 'scene/component/audio'\n}\n\nconst AUDIO_IMAGE =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAP1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACzJYIvAAAAFHRSTlMA8BAwgNBgQKB/wCBwUJDg37CvXyUlBK8AABFYSURBVHja7NsBkqIwFIThTiAQgyBq3/+sm6p1tnamZkaTMhJJf1f4S/JeEIiIiIiIiIiIiIiIiEhD7Hg4BH84TpAKjJ4f3NFCtjVd+InXz2RTs+FXlxGylYHfcVfIJmb+YFWSLUyGVJKKBJJKUo+Rd6w63l/qzLuCkryO5fe0l2xk5mMWbe+v0fNBRqf7S3je6CipQ2ACr+dWcYEpzBFS1plpguatsnomMgdIQSOTuQ5SjmE6/UgK8szgdJIUM/FG41YlFmYJ2kkKsY5ZzAwBurHDk3WGeRY0bvYrGa1+rqNI22f7dS32ZnUK1GMr0eSK3mEc9dhKMxp+ZTo8kT2emOXS5LQ1kCxbJBocSd2k5PaIjMVzjWcdJPk9ooBnmzx1t5XbIxqBKpJ4NGTgzwKiGpK4do72gb+ZUMIYtCPm9WCPMsYTE5k2hq2ZvzujlCE1iRmwf3dvmRyKsT0T7b9I7HEPCpqCiqT2IIqaT1pI0noQZdlFC8l/PbYPAnRORT56VBEE6FXkb49agmByKhJ71BME6FsvEntUFQTdqekisUdlQWCXhovEHtUFAWbTapHYo8YgmFybO3vsUWcQYGmxSOxRbRAMprkisUfFQVKmrX18sxt7VB0ENjT1xir2qDxIwkFi3v89e+xRfxAMzfzzIfZ4hyAYDR9zwVuLPd4jCDrTwoLYGb5LEFi3/+E3rweR6urX20c/Fvls2Pvwm9mDSGIPhv8YPyGf3/eo9Ye7O8B2FIShAAooakEttex/rbODad5/yTHIAjqn505IQPv+Xz06dz+4VXORHEZcgAcB8updM8F6e25jBzwIkE07l+x8amMnPDp6nsNJ+BoZ7Q6F8egqAda9VEuRNlZjBzwYkMskdXR73okd8GBAJiKYjBcZKKqG9OiKDbgdfxJ5VhsBPDiQZhaouD3p4hfw4EAmwxisz3MSHwAPEmQ1TB1N+SmXWoAHC7JbZsWl/IxLLcCDBplNo3lrfMLsmwAPGmShAxX5/1vOEzjEz3iyfQ/hI36W4TctsUesOAifPdrQg8M++KYl95iCBkjI1r8634betBAPHZDTPFAmD3zLiHgogVTziMsahz0eIh5aIGHGRSJ2mFtHPR4iHhQIP2UvWGMf8wk74qEIEib7rLjPiBfxiAcCwp8V+Nae3uMdRhAPDIR/J5f/Q2DTcC+hIB7qIGEq3Ti9bx+sryMeAAgS70OK8G2kBD8L8QBAoLWU3g3vUVIc6D0txAMAsY+4jBWowXHO64gHBGKfYJ2T5qY1BxcL98BB+PQ+XiS9xxh9EQ8ChA6C5UXWIUoE9MBB8LVHQoS7ib8/dRn3sAcJ6bQRSdH96RDxIEH4QEX+AHF4LxHEAwUh12xyr1V8lwjiQYDYF8kuf1jluUQQDwrEvkhW8Wc6LhHUgwfhi4QPlHm7LRHawx4kpE191Dq8lgjhAYDQa1cftYrPEiE8OJDb40uqyzdQCA8WhAzL4G/PT4c3WrgHD2IfllGl53V37zsgHg5ApPNvVvq4Fn4spx4oiH1W3CwtEV+PDhEPJyBSkVX4aa7emkM83ICEKWpGM7wdvYCCeDgCEYpcwhLxczhEPFyBCEUWnRL5T6X59SBASBF+9l28TL5F7uEORCZyCUvEx+S7yT0cgoRVb9JaXLR1qUdfgksQ0fTbgmhFB20d8HAKEha14+F8f1sHPNyCiL6EqK+n20/rgIdjkFC0Ho1s6Gndvcc9ICkr/ey8/rHO6vp9KawL8DAFOV6l9Fyub7IbflsCag1qRfVsXWvxHjxIejU+BHZV6uvHD1XiEb++Bw8i+dNd+Wv0eCQmhcPhRPwUUt2DB5G1sfa1aeyzAuyJj9x2HjyIdKzIKw5SI14ieFtvo3kIQERj3lVhkUOnRD7AnjV5369QkAOJZeCH+Jh41xOLs73dQwAifY6dpxCCbjTDzLf1Bm1Y93tAIDOWXcLPvrHyr2hVoEAceEAgDQzB4jetk0/c2OXRHB48EJCpa4dgpYh2ETxtrshz7zx4ICCzfuTSDn8p/EOS9OTjwgMB+cABP3yWYuOPIofs33LigYCULlpZNXJppVU30Vf14kGAUCLijf1D71lN9FW9eFiA9KgZ8FPpPUsSnufGA+8hvAg2Kpz0nrX//qp+PIgpC3i6xJRITOye9fn1VT15ICCrVlQG5rywo0H8x965bVkNwmCYQ2kR6Gmb939WXV65dFnI/tPdjPBfO7XMN4EkTUJtqZp4sCJ1+8jwkhMu0KpMxFXFA8hlVfQSMxGH5mDK1VKV8QCyvTVtUiYyo7V358VStfGoAEFMhGYhEwloxZy9WKo2Hjwg5iSOvFDXeUYd33+PuVfHgwnEBWLocDJp+IIa2fyvperjwQRiXCKGosyXqoA+YfsIELuYu4HAt+msMknfDK4jfQJIzOZ2IPAQWJtFOhQKivR2IDZ6Awis7V0iLxqBI7uEZo19dakTogLSwKvf8yk8Jq6CGK0GKvWlatG7b7kkUU/Lo1gdXWn7/4E0j0qeJDpqN/ABqQcgJgdqURb4chjQktIugDS6wFFiz3JgaJj7AGJmholAe9YKhoZLJ0Ca6smjwJ4VwVN96gVIE5GM71kHaGKxGyAtRDaB2NBhLVmpHyANRKzDO28W7FS3HQFpaIWa8TrfCXQwegJSL5k+8M9UJ+pm9QTEnCIZrR0MDQeQ9ua0iCcYQaBTV0CqNXQW/yiyYG7W1heQanPaCkciBXuH1BkQJzHcDQxmpgGkPatl4WkbCXO/bW9AqlNg4H0PPMi6A1IxkQmOZ8D0ousNSMVEEuyreTAQ6Q7IRJeCX2YZQHhv6SrBOmpkM+YUzN0BqSRQCupmTeCP9wdkhiOREwtEzgGEsWcF9BhK9R8fQDiN7A8DiR0CKXQlj/q9IM8OgXjIzcKBlAHkD6FulgNzJwPIHwpo8mQAkX3LiPq9dKUMAQk9AqmcqmjuBAJCPQIpA4guIAsKJA0gnwNy3A4kDyBIHCEPxAwgf8gPILqA5AFEF5CxZX0lIHYc6rqADLf380BmFMgxgIzUyf8MJKLTRelKHgKy9wgkjfS7LiA0gKgC8vQn3HUA4RQ5LKPIAQciWbqIEg0YkLNDIHYUyqkCsmKN5vg3+W0AYTRATaPY+uu1IwS6UMGAlO6AFPjSCQMStaNh53cdcPG7Hx1Uupo+rx+Bltn1BuTAj5BptEV/bHAAwbnJMICwRmtUDOSEA8s4Rmtw3nITGD6TwUNoG0Ca7xi2YKSPj2eKXQFxQWKA2QbGMWEMMGseOb7C7T47uJS1JyAzVbTjqZdU3zbHzMXWS+qp4Fgn8Ahy/QCRGqQcwU1vGnN7fylboWn8Bzg//hyjxltvdcl45bwFfYKzFyBy11UU9BnjuoqfWizVlQXulpzBTNbaB5Aid+VRrkBFB630AMS9BC8FK2ggE7u/FGy1kvfcB9TKQufX5uUXNWl3EjvWCi4k/u9A3Ddq1CpTIQGe6VN1qd8ArcvDQNw3S41Kn6qQmOq5e7pRr+8fAYLiIJtFrrvYRMYL0q06vj8EZLXUriJzRY8H1xEagOCK7gkghRg6RQYO0I6aWPwIEAru80AiMWSdzAeuDXUKyr+WqpAID8hMHC1Ct8F4mUsQ6W8pJMICki0JHCBczAFdBl38G3VE6ErQhhWlih4LWrCSLpaqjggHiGe9mVjRY0YPoelyqcqIcIDEe97rqJFFH7FcLlUZEQ6Qg5plvZiBFNhtri1VFREGEC/Eg4nZoU5vqi1VFREGkIXDQ8xAIhzoT/WlKiLCAFIYPOQMxOPdjfWlKiLCADJRm3YGj+pDE2xktmmpaogwgMz8d8GrumZ4xzpbvinqISJ+hiTWm7wEqoJdI9JEV9JChAEkS3xCZzKecLcgN6YwlRBhAGmweTsblg6qKMM7Vmh321UQ4QAp1VfwhqVJIh+Wm03W0qV0EOEAybXtivkCmWrKeH2EZ/xBaSBCV2L9Re+LYSqJJIxDu1ew07U0EGEBcTtmHty4JuPtQhvLh1BAhK7Uvvq0GK484QZST0GvvFDqeSJ1IA0r2mfDljvqBoJ//rVsq7yZCA6kXgVkJ2f4ijIGMjOfMVsCBBORB2Jy+sM6ijNvaBUqmw/cStZ8EiKciHwp6Rp++88qmxXQeTUxDiJWJ9wSISvBicgXW+dypn1PqWTznlwgwdZdfiLHr5OELEAEASKvJFRE5JCPKbh8OxHdQKJU0crEzRXrJ/IEkFms6tGyrUw9kQeALFRXvK2iSzsRAAi6BLxM+60xdsqJAEBuXMAMxDLVp+gmAgC57/UT4qvVj3TVRCAgSAYL91aXtyNLzUQAIFhAiP8m0/NHOp+ILiBtPFKrs6bgSOcT0QTEB8nO3QR1yKslggKRf+m11UB0HOl8IlqAeCvauXuo8HnfIqIDyCw6G8XMcGiplMingMzCnbuHFp/3LSLPA4nUpqm5YkWNzwsQeQxIDsKjH5wVSU5qJPIJIIt4jjpqNBAekQeBfJOeHWS81FQoo4/I7UDcS3wUh0liTzLqiEgDqddx4ZHDrNZAACIAEMw88HPYWb0GAhABgEDmgf9Vb5oNBCByOxD3uqWYbCHVBgIQuRlIsbfwMEG5gQBE7gSyHMDsOayrxJvHBRC5B0hOxJH1nK4SlUE6QOR+IG6ju3iYQEqDdIDIzUDyZu/jMRHpS/OiRG4FkiPRfTw8kbrvIAJEACAIDpyHC1/GQHhEbgKSXwTyqIeEur6kixEBgABHOTr7YSX1MSFAhA0E307wUU76Y0KACAsI/tvCRzkF+iIuL0AEAYLbR2QOfvhKJ/obRESBxNt5rPSFXN4f7dyNdqMgEIbhAXWwJErT/e7/Wreb5HTT07QVgWSAeW5g7b4n8qOSUCRPEId4HP93SXp5dDNGRJFcQTxihSH+NW1Bb1cXKpIryJAwnG/zhl8ZcSP6jiKZghwRaaWLnP/AkcSKKJIniEcUs8QfjFLdEmRvkSxB4lfn0QN6DY+lshQpHiT96Dlr6r5hxRUpHST9ZEY71X7DOmOZQVZLsd5Q8wzrPxYYJDiKNqOBG1ZCkZKzrNXu6lHvkjChSFqQsdTPg45ApXtYaUXKr9TNuPcvqO2pVMkitFXAL2a79/qr3HQvVSTXUtofCl79RDXh5CDpw3pwu6+9kRlvtiI5VtPhmHLltT4EKVQkfb8pcOHrXqk6nBAksUjgpKtuYsskaxGKYT0+84uYgziE4YQgMdx0m8PRfis2MbL33PMXoVjD6PEunI4HSjDjStiJP08vQk9hZzQ7oH/geoLYCUBDW4rf4FqCDFt7THUO6B+4jiDn2XNTW7zf4hqCMND4BOsGyw+yAmh0x+QeFh7EeqD5Ce8nLDrI8NpbDyIWHIQNruo4GyAPlhrEzuixBxHLDDJMnfYgYolBricHNfjIdgMWF+Qyu+pkgX4HCwuymL57ELGkIHZG7z2IWE6Q5VV7vGMhQewbtMcZiwhyHj26ne9+xs8PcvDQHnFFqCD7Au0RW4TK+fOKqw4eoOcqYqgU53HR3/5uShFPCfKey9hFDyJO/vAi7RDZnp7X5igyUH72xSDW1E2Pn4tMRCQgR8vLwbgii4gcmLvqQcSPGtIPX3M08wn6I4qYQ94cM/Yw9Xxhmw+X/59wHrtMlX1AmIkzdyaaAnLg1Nnw8WGYSk40X/BOh4+El6LMSBnN2Cd0tPq4w/LJXGrMbCX06PZ2dcM65yzlNertShSHf3SzRAyPM332IcSAHUKPi8EHmXU0l8Uglmni0yipDoi16s+jJKejhywLooz68yiMEcHr2qM4h81CJ++VPJfTu5UwBpv4Pp9DJSi6MJx0bvUwiw4ewgT8zNR0LHUL+OccOpY/3ElzyGKD5pBlMJpDlsOkMythRoNbXh95PJsdA67MrMtAEYbjeDqNo+7oKqWUUkoppZRSSimllFJKFfMXp4vmSjB8n6sAAAAASUVORK5CYII='\n\nexport default class AudioPlayer extends RectPath(Shape) {\n  static IMAGE: HTMLImageElement\n\n  static get image() {\n    if (!AudioPlayer.IMAGE) {\n      AudioPlayer.IMAGE = new Image()\n      AudioPlayer.IMAGE.src = AUDIO_IMAGE\n    }\n\n    return AudioPlayer.IMAGE\n  }\n\n  _audio: any\n\n  dispose() {\n    super.dispose()\n\n    this.started = false\n    delete this._audio\n  }\n\n  ready() {\n    super.ready()\n\n    this._audio = new Audio()\n\n    this._audio.addEventListener('canplay', () => {\n      this.started && this._audio.play()\n    })\n\n    var { src = '', loop = false, started = false } = this.state\n\n    this.onchangeSrc(src)\n    this.onchangeLoop(loop)\n    this.onchangeStarted(started)\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { left, top, width, height, src } = this.state\n\n    ctx.beginPath()\n\n    this.drawImage(ctx, AudioPlayer.image, left, top, width, height)\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  get hasTextProperty() {\n    return false\n  }\n\n  get src() {\n    return this.get('src')\n  }\n\n  set src(src) {\n    this.set('src', src)\n  }\n\n  get started() {\n    return !!this.get('started')\n  }\n\n  set started(started) {\n    this.set('started', started)\n  }\n\n  start() {\n    if (!this._audio) return\n\n    this._audio.classList.add('active')\n    this._audio.play()\n  }\n\n  pause() {\n    if (!this._audio) return\n\n    this._audio.classList.remove('active')\n    this._audio.pause()\n  }\n\n  onchangeSrc(src: string) {\n    try {\n      // this._audio.crossOrigin = \"anonymous\";\n      if (String(src).substring(0, 4) !== 'data') this._audio.crossOrigin = 'use-credentials'\n      else this._audio.crossOrigin = null\n\n      this._audio.src = typeof src === 'string' ? this.app.url(src) : src\n    } catch (e) {\n      console.error(e)\n      return\n    }\n  }\n\n  onchangeStarted(started: boolean) {\n    const audio = this._audio\n\n    if (started) {\n      /* \n        [ audio/video.readyState ]\n        0 = HAVE_NOTHING - no information whether or not the audio/video is ready\n        1 = HAVE_METADATA - metadata for the audio/video is ready\n        2 = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond\n        3 = HAVE_FUTURE_DATA - data for the current and at least the next frame is available\n        4 = HAVE_ENOUGH_DATA - enough data available to start playing\n      */\n      audio.readyState == 4 && audio.play()\n    } else {\n      audio.pause()\n    }\n  }\n\n  onchangeLoop(loop: boolean) {\n    this._audio.loop = loop\n  }\n\n  onchange(after: Properties, before: Properties) {\n    'src' in after && this.onchangeSrc(after.src)\n    'started' in after && this.onchangeStarted(after.started)\n    'loop' in after && this.onchangeLoop(after.loop)\n  }\n\n  ondblclick(e: MouseEvent) {\n    this.started = !this.started\n  }\n\n  ondropfile(transfered: DataTransferItemList, files: FileList) {\n    for (let i = 0; i < transfered.length; i++) {\n      if (transfered[i].type.startsWith('audio/')) {\n        this.src = files[i]\n        return\n      }\n    }\n  }\n}\n\nComponent.register('audio', AudioPlayer)\n"]}

package/dist/components/cloud.d.ts

@@ -0,0 +1,13 @@
+import { Component } from '@hatiolab/things-scene';
+export default class Cloud extends Component {
+    prerender(ctx: CanvasRenderingContext2D): void;
+    render(ctx: CanvasRenderingContext2D): void;
+    get path(): {
+        x: any;
+        y: any;
+    }[];
+    set path(path: {
+        x: any;
+        y: any;
+    }[]);
+}