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

package/dist/layer/modeler/rotator.js

@@ -0,0 +1,120 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import Component from '../../components/component';
+import CommandChange from '../../command/command-change';
+const ROTATION_HANDLE_RADIUS = 4;
+const ROTATION_HANDLE_HEIGHT = 20;
+const THETA_360 = Math.PI * 2;
+const THETA_90 = Math.PI / 2;
+/*
+ * 컴포넌트의 회전 핸들은 컴포넌트 바운드의 탑라인 중앙 상단에 위치한다.
+ */
+function getRotateHandle(component, scale) {
+    var bounds = component.bounds;
+    return {
+        x: bounds.left + bounds.width / 2,
+        y: bounds.top - ROTATION_HANDLE_HEIGHT / scale.y
+    };
+}
+export default class Rotator {
+    constructor(layer) {
+        this.layer = layer;
+    }
+    reset() {
+        // 현재 선택된 로테이트 핸들의 정보
+        this.active = null;
+    }
+    get selected() {
+        return this.layer.selected;
+    }
+    contains(x, y, component, scale) {
+        if (!component.rotatable)
+            return false;
+        // 좌표가 회전 핸들에 포함되어있는지 확인함.
+        var handle = getRotateHandle(component, scale);
+        if (Math.abs(x - handle.x) <= ROTATION_HANDLE_RADIUS / scale.x &&
+            Math.abs(y - handle.y) <= ROTATION_HANDLE_RADIUS / scale.y) {
+            // 현재 선택된 로테이트 핸들의 정보
+            this.active = { component };
+            return true;
+        }
+        return false;
+    }
+    draw(context, component, scale) {
+        if (!component.rotatable)
+            return;
+        context.beginPath();
+        var rh = getRotateHandle(component, scale);
+        context.lineWidth = 1.5 / scale.x;
+        context.moveTo(rh.x, rh.y + ROTATION_HANDLE_HEIGHT / scale.y);
+        context.lineTo(rh.x, rh.y);
+        context.strokeStyle = '#656565';
+        context.stroke();
+        context.beginPath();
+        context.ellipse(rh.x, rh.y, ROTATION_HANDLE_RADIUS / scale.x, ROTATION_HANDLE_RADIUS / scale.y, 0, 0, THETA_360, true);
+        context.stroke();
+        context.fillStyle = '#fff';
+        context.fill();
+        var active = this.active;
+        if (active && active.component === component) {
+            context.strokeStyle = '#fa7703';
+            context.stroke();
+            if (active.toFill) {
+                context.fillStyle = '#ffb80c';
+                context.fill();
+            }
+        }
+    }
+    onmousedown(e) {
+        this.active.toFill = true;
+    }
+    ondragstart(e) {
+        var active = this.active;
+        var component = active.component;
+        active.start_rotation = active.component.get('rotation');
+        active.rotations = this.layer.selected.filter(c => c.rotatable).map(c => c.get('rotation'));
+    }
+    ondragmove(e) {
+        /* 로테이트 핸들의 이동을 처리한다. */
+        var { component } = this.active;
+        // 회전을 시키려는 대상 컴포넌트의 중심점과 이벤트 포인트와의 각도가 중요하므로,
+        // 컴포넌트 스케일과 회전이 감안되지 않은 부모의 좌표로 변환하여 계산한다.
+        var point = component.transcoordC2S(e.offsetX, e.offsetY);
+        point = component.transcoordS2P(point.x, point.y);
+        var rotatePoint = component.rotatePoint;
+        var oldTheta = component.get('rotation') || 0;
+        var newTheta = Math.atan((rotatePoint.y - point.y) / (rotatePoint.x - point.x));
+        newTheta = rotatePoint.x >= point.x ? newTheta - THETA_90 : THETA_90 + newTheta;
+        var deltaTheta = newTheta - oldTheta;
+        this.layer.selected
+            .filter(c => c.rotatable)
+            .forEach((c, i) => {
+            /* 최초의 바운드로 되돌려놓고 다시 계산한다. */
+            let rotation = ((c.get('rotation') || 0) + deltaTheta) % THETA_360;
+            c.set('rotation', c.adjustRotation(rotation, e.shiftKey));
+        });
+    }
+    ondragend(e) {
+        var { component, rotations } = this.active;
+        // var command = new CommandChange({
+        //   changes: this.layer.selected.filter(c => {
+        //     return c.rotatable
+        //   }).map((c, i) => {
+        //     return {
+        //       component: c,
+        //       before: {
+        //         rotation: rotations[i]
+        //       },
+        //       after: {
+        //         rotation: c.get('rotation')
+        //       }
+        //     }
+        //   })
+        // })
+        /* 커맨더 큐에 넣기만하고, 실행하지는 말라.(이미 실행된 상태이므로) */
+        // component.app.commander.execute(command, false)
+        component.app.commander.execute(null, false);
+    }
+}
+//# sourceMappingURL=rotator.js.map

package/dist/layer/modeler/rotator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rotator.js","sourceRoot":"","sources":["../../../src/layer/modeler/rotator.js"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport Component from '../../components/component'\nimport CommandChange from '../../command/command-change'\n\nconst ROTATION_HANDLE_RADIUS = 4\nconst ROTATION_HANDLE_HEIGHT = 20\n\nconst THETA_360 = Math.PI * 2\nconst THETA_90 = Math.PI / 2\n\n/*\n * 컴포넌트의 회전 핸들은 컴포넌트 바운드의 탑라인 중앙 상단에 위치한다.\n */\nfunction getRotateHandle(component, scale) {\n  var bounds = component.bounds\n\n  return {\n    x: bounds.left + bounds.width / 2,\n    y: bounds.top - ROTATION_HANDLE_HEIGHT / scale.y\n  }\n}\n\nexport default class Rotator {\n  constructor(layer) {\n    this.layer = layer\n  }\n\n  reset() {\n    // 현재 선택된 로테이트 핸들의 정보\n    this.active = null\n  }\n\n  get selected() {\n    return this.layer.selected\n  }\n\n  contains(x, y, component, scale) {\n    if (!component.rotatable) return false\n\n    // 좌표가 회전 핸들에 포함되어있는지 확인함.\n    var handle = getRotateHandle(component, scale)\n\n    if (\n      Math.abs(x - handle.x) <= ROTATION_HANDLE_RADIUS / scale.x &&\n      Math.abs(y - handle.y) <= ROTATION_HANDLE_RADIUS / scale.y\n    ) {\n      // 현재 선택된 로테이트 핸들의 정보\n      this.active = { component }\n      return true\n    }\n\n    return false\n  }\n\n  draw(context, component, scale) {\n    if (!component.rotatable) return\n\n    context.beginPath()\n\n    var rh = getRotateHandle(component, scale)\n    context.lineWidth = 1.5 / scale.x\n    context.moveTo(rh.x, rh.y + ROTATION_HANDLE_HEIGHT / scale.y)\n    context.lineTo(rh.x, rh.y)\n\n    context.strokeStyle = '#656565'\n    context.stroke()\n\n    context.beginPath()\n    context.ellipse(\n      rh.x,\n      rh.y,\n      ROTATION_HANDLE_RADIUS / scale.x,\n      ROTATION_HANDLE_RADIUS / scale.y,\n      0,\n      0,\n      THETA_360,\n      true\n    )\n\n    context.stroke()\n    context.fillStyle = '#fff'\n    context.fill()\n\n    var active = this.active\n\n    if (active && active.component === component) {\n      context.strokeStyle = '#fa7703'\n      context.stroke()\n\n      if (active.toFill) {\n        context.fillStyle = '#ffb80c'\n        context.fill()\n      }\n    }\n  }\n\n  onmousedown(e) {\n    this.active.toFill = true\n  }\n\n  ondragstart(e) {\n    var active = this.active\n    var component = active.component\n\n    active.start_rotation = active.component.get('rotation')\n    active.rotations = this.layer.selected.filter(c => c.rotatable).map(c => c.get('rotation'))\n  }\n\n  ondragmove(e) {\n    /* 로테이트 핸들의 이동을 처리한다. */\n    var { component } = this.active\n\n    // 회전을 시키려는 대상 컴포넌트의 중심점과 이벤트 포인트와의 각도가 중요하므로,\n    // 컴포넌트 스케일과 회전이 감안되지 않은 부모의 좌표로 변환하여 계산한다.\n\n    var point = component.transcoordC2S(e.offsetX, e.offsetY)\n    point = component.transcoordS2P(point.x, point.y)\n\n    var rotatePoint = component.rotatePoint\n\n    var oldTheta = component.get('rotation') || 0\n    var newTheta = Math.atan((rotatePoint.y - point.y) / (rotatePoint.x - point.x))\n    newTheta = rotatePoint.x >= point.x ? newTheta - THETA_90 : THETA_90 + newTheta\n\n    var deltaTheta = newTheta - oldTheta\n\n    this.layer.selected\n      .filter(c => c.rotatable)\n      .forEach((c, i) => {\n        /* 최초의 바운드로 되돌려놓고 다시 계산한다. */\n        let rotation = ((c.get('rotation') || 0) + deltaTheta) % THETA_360\n        c.set('rotation', c.adjustRotation(rotation, e.shiftKey))\n      })\n  }\n\n  ondragend(e) {\n    var { component, rotations } = this.active\n\n    // var command = new CommandChange({\n    //   changes: this.layer.selected.filter(c => {\n    //     return c.rotatable\n    //   }).map((c, i) => {\n    //     return {\n    //       component: c,\n    //       before: {\n    //         rotation: rotations[i]\n    //       },\n    //       after: {\n    //         rotation: c.get('rotation')\n    //       }\n    //     }\n    //   })\n    // })\n\n    /* 커맨더 큐에 넣기만하고, 실행하지는 말라.(이미 실행된 상태이므로) */\n    // component.app.commander.execute(command, false)\n    component.app.commander.execute(null, false)\n  }\n}\n"]}

package/dist/layer/modeling-layer.d.ts

@@ -0,0 +1,66 @@
+export default class ModelingLayer extends Layer {
+    pathHandler: Modeler.PathHandler;
+    _modelers: (Modeler.ControlHandler | Modeler.PathHandler | Modeler.Resizer | Modeler.Rotator)[];
+    _control_mode_modelers: (Modeler.ControlHandler | Modeler.PathHandler | Modeler.Resizer | Modeler.Rotator)[];
+    focusOutline: Modeler.FocusOutline;
+    groupOutline: Modeler.GroupOutline;
+    anchorHandler: Modeler.AnchorHandler;
+    _reversed_modelers: (Modeler.ControlHandler | Modeler.PathHandler | Modeler.Resizer | Modeler.Rotator)[];
+    _control_mode_reverse_modelers: (Modeler.ControlHandler | Modeler.PathHandler | Modeler.Resizer | Modeler.Rotator)[];
+    set hovered(arg: any);
+    get hovered(): any;
+    hoveredDest: any;
+    get modelers(): (Modeler.ControlHandler | Modeler.PathHandler | Modeler.Resizer | Modeler.Rotator)[];
+    get reversedModelers(): (Modeler.ControlHandler | Modeler.PathHandler | Modeler.Resizer | Modeler.Rotator)[];
+    ready(): void;
+    currentModeler: Modeler.ControlHandler | Modeler.PathHandler | Modeler.AnchorHandler | Modeler.Resizer | Modeler.Rotator | null | undefined;
+    _componentDrawer(context: any, component: any, scale: any, logic: any): void;
+    set anchorTarget(arg: any);
+    get anchorTarget(): any;
+    _anchorTarget: any;
+    _hovered: any;
+    startLinkProcess(linkFrom: any, linkModel: any, e: any): void;
+    processingLink: any;
+    set counterEnd(arg: any);
+    get counterEnd(): any;
+    _counter_end: any;
+    endLinkProcess(): void;
+    get eventMap(): {
+        'model-layer': {
+            '(all)': {
+                change: (after: any, before: any, hint: any) => void;
+                wheel: (e: any, hint: any) => void;
+                drop: (e: any, hint: any) => void;
+            };
+            '(descendant)': {
+                mouseenter: (e: any, hint: any) => void;
+                mouseleave: (e: any, hint: any) => void;
+            };
+        };
+        '(root)': {
+            '(self)': {
+                selected: (after: any, before: any) => void;
+                keydown: (e: any) => void;
+                keyup: (e: any) => void;
+            };
+        };
+    };
+    onmouseenter(e: any, hint: any): void;
+    onmouseleave(e: any, hint: any): void;
+    onkeydown(e: any): void;
+    _control_mode: boolean | undefined;
+    onkeyup(e: any): void;
+    onselected(after: any, before: any): void;
+    onchange_model(after: any, before: any, hint: any): void;
+    ondblclick(e: any): void;
+    onmousedown(e: any): void;
+    onmouseup(e: any): void;
+    ondragstart(e: any): void;
+    _state_dragging: boolean | undefined;
+    ondragmove(e: any): void;
+    ondragend(e: any): void;
+    ondrop(e: any, hint: any): void;
+    onwheel_scale(e: any, hint: any): void;
+}
+import Layer from "./layer";
+import * as Modeler from "./modeler";

package/dist/layer/modeling-layer.js

@@ -0,0 +1,451 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import CommandChange from '../command/command-change';
+import CommandMigrate from '../command/command-migrate';
+import Component from '../components/component';
+import * as Const from '../const';
+import compile from '../model/compile';
+import Layer from './layer';
+import * as Modeler from './modeler';
+export default class ModelingLayer extends Layer {
+    constructor(model, context) {
+        super(model, context);
+        this.pathHandler = new Modeler.PathHandler(this);
+        var ph = this.pathHandler;
+        var ch = new Modeler.ControlHandler(this);
+        var rs = new Modeler.Resizer(this);
+        var rt = new Modeler.Rotator(this);
+        this._modelers = [ph, ch, rs, rt];
+        this._control_mode_modelers = [ch, ph, rs, rt];
+        this.focusOutline = new Modeler.FocusOutline(this);
+        this.groupOutline = new Modeler.GroupOutline(this);
+        this.anchorHandler = new Modeler.AnchorHandler(this);
+        // 그릴 때는 contains 순서의 역순으로 그린다.
+        this._reversed_modelers = this._modelers.slice().reverse();
+        this._control_mode_reverse_modelers = this._control_mode_modelers.slice().reverse();
+        this.hovered = null;
+        this.hoveredDest = null;
+    }
+    get modelers() {
+        return this._control_mode ? this._control_mode_modelers : this._modelers;
+    }
+    get reversedModelers() {
+        return this._control_mode ? this._control_mode_reverse_modelers : this._reversed_modelers;
+    }
+    // Lifecycle
+    ready() {
+        super.ready();
+        var rootModel = this.rootModel;
+        var translate = rootModel.get('translate');
+        var scale = rootModel.get('scale');
+        this.set('translate', translate);
+        this.set('scale', scale);
+    }
+    contains(x, y) {
+        var components = this.selected.filter(c => !!c.parent);
+        var scale = this.get('scale') || { x: 1, y: 1 };
+        if (this._state_dragging) {
+            if (this._counter_end) {
+                let point = this.anchorTarget.transcoordT2S(x, y);
+                if (this.anchorHandler.contains(point.x, point.y, this.anchorTarget, scale)) {
+                    return true;
+                }
+            }
+            return true;
+        }
+        this.modelers.forEach(modeler => modeler.reset());
+        /*
+         * 부모가 있는 컴포넌트만을 그린다.
+         * (selected에는 남아있을 수 있으나, undo에 의해서 이미 제거된 것일 수 있다.)
+         */
+        var components = this.selected.filter(c => !!c.parent);
+        for (let i = 0; i < components.length; i++) {
+            let component = components[i];
+            let point = component.transcoordT2S(x, y);
+            for (let j = 0; j < this.modelers.length; j++) {
+                let modeler = this.modelers[j];
+                if (modeler.contains(point.x, point.y, component, scale)) {
+                    this.currentModeler = modeler;
+                    return true;
+                }
+            }
+        }
+        if (this.anchorTarget) {
+            let point = this.anchorTarget.transcoordT2S(x, y);
+            if (this.anchorHandler.contains(point.x, point.y, this.anchorTarget, scale)) {
+                this.currentModeler = this.anchorHandler;
+                return true;
+            }
+        }
+        else {
+            this.anchorHandler.reset();
+        }
+        this.currentModeler = null;
+        return false;
+    }
+    _componentDrawer(context, component, scale, logic) {
+        let ancester = [];
+        let parent = component.parent;
+        if (component.isRootModel()) {
+            context.save();
+            logic(context, component, scale);
+            context.restore();
+            return;
+        }
+        while (parent && !parent.isRootModel()) {
+            ancester.push(parent);
+            parent = parent.parent;
+        }
+        context.save();
+        ancester.reverse().forEach(function (parent) {
+            // 원점으로 이동하여 회전.
+            let rotatePoint = parent.rotatePoint;
+            context.translate(rotatePoint.x, rotatePoint.y);
+            let parent_scale = parent.get('scale');
+            if (parent_scale)
+                context.scale(parent_scale.x, parent_scale.y);
+            context.rotate(parent.get('rotation'));
+            context.translate(-rotatePoint.x, -rotatePoint.y);
+            let bounds = parent.bounds;
+            context.translate(bounds.left, bounds.top);
+        });
+        let rotatePoint = component.rotatePoint;
+        context.translate(rotatePoint.x, rotatePoint.y);
+        let component_scale = component.get('scale');
+        if (component_scale)
+            context.scale(component_scale.x, component_scale.y);
+        context.rotate(component.get('rotation'));
+        context.translate(-rotatePoint.x, -rotatePoint.y);
+        logic(context, component, scale);
+        context.restore();
+    }
+    prerender(context) {
+        var { translate, scale = { x: 1, y: 1 }, rotation } = this.model;
+        // Scene 모델 바깥쪽을 표현하기 위해서, 먼저 전체 바탕을 회색으로 칠한다.
+        context.save();
+        context.beginPath();
+        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+        context.rect(0, 0, context.canvas.width, context.canvas.height);
+        context.fillStyle = 'black';
+        context.globalAlpha = 0.5;
+        context.fill();
+        context.restore();
+        translate && context.translate(translate.x * Const.DPPX, translate.y * Const.DPPX);
+        context.scale(scale.x * Const.DPPX, scale.y * Const.DPPX);
+        rotation && context.rotate(rotation);
+        context.clearRect(0, 0, this.rootModel.get('width'), this.rootModel.get('height'));
+    }
+    render(context) {
+        context.beginPath();
+        var scale = this.get('scale') || { x: 1, y: 1 };
+        /*
+         * 부모가 있는 컴포넌트만을 그린다.
+         * (selected에는 남아있을 수 있으나, undo에 의해서 이미 제거된 것일 수 있다.)
+         */
+        var selected = this.selected.filter(c => !!c.parent);
+        if (this.focused) {
+            this._componentDrawer(context, this.focused, scale, (context, component, scale) => {
+                this.focusOutline.draw(context, component, scale);
+            });
+        }
+        /* TODO selected의 부모가 group인 경우에 최상위 그룹의 모델링 레이아웃을 그려주어야 한다. */
+        if (selected.length > 0 && selected[0].parent.isGroup()) {
+            let rootGroup = selected[0].parent;
+            while (rootGroup.parent.isGroup())
+                rootGroup = rootGroup.parent;
+            this._componentDrawer(context, rootGroup, scale, (context, component, scale) => {
+                this.groupOutline.draw(context, component, scale);
+            });
+        }
+        selected.forEach(component => {
+            this._componentDrawer(context, component, scale, (context, component, scale) => {
+                this.reversedModelers.forEach(modeler => modeler.draw(context, component, scale));
+            });
+        });
+        this.anchorTarget &&
+            this._componentDrawer(context, this.anchorTarget, scale, (context, component, scale) => {
+                this.anchorHandler.draw(context, component, scale);
+            });
+    }
+    get anchorTarget() {
+        var _a;
+        if (this.currentModeler !== this.anchorHandler &&
+            this.currentModeler !== this.pathHandler &&
+            !((_a = this.hovered) === null || _a === void 0 ? void 0 : _a.isLine())) {
+            this._anchorTarget = this.hovered;
+        }
+        return this._anchorTarget;
+    }
+    set anchorTarget(target) {
+        this._anchorTarget = target;
+    }
+    get hovered() {
+        return this._hovered;
+    }
+    set hovered(hovered) {
+        this._hovered = hovered;
+        this.invalidate();
+    }
+    startLinkProcess(linkFrom, linkModel, e) {
+        this.currentModeler = this.pathHandler;
+        this.processingLink = this.pathHandler.startLinkProcess(linkFrom, linkModel, e);
+        this.counterEnd = this.processingLink.fromEnd;
+        this.processingLink.trigger('tag');
+    }
+    set counterEnd(anchor) {
+        this.currentModeler = this.pathHandler;
+        this._counter_end = anchor;
+    }
+    get counterEnd() {
+        return this._counter_end;
+    }
+    endLinkProcess() {
+        var _a;
+        (_a = this.processingLink) === null || _a === void 0 ? void 0 : _a.trigger('tagreset');
+        this.processingLink = null;
+        this._counter_end = null;
+    }
+    get eventMap() {
+        return {
+            'model-layer': {
+                '(all)': {
+                    change: this.onchange_model,
+                    wheel: this.onwheel_scale,
+                    drop: this.ondrop
+                },
+                '(descendant)': {
+                    mouseenter: this.onmouseenter,
+                    mouseleave: this.onmouseleave
+                }
+            },
+            '(root)': {
+                '(self)': {
+                    selected: this.onselected,
+                    keydown: this.onkeydown,
+                    keyup: this.onkeyup
+                }
+            }
+        };
+    }
+    onmouseenter(e, hint) {
+        this.hovered = hint === null || hint === void 0 ? void 0 : hint.origin;
+    }
+    onmouseleave(e, hint) {
+        this.hovered = null;
+    }
+    onkeydown(e) {
+        if (e.key == 'Alt') {
+            this._control_mode = true;
+            this.invalidate();
+        }
+    }
+    onkeyup(e) {
+        if (e.key == 'Alt') {
+            this._control_mode = false;
+            this.invalidate();
+        }
+    }
+    onselected(after, before) {
+        this.invalidate();
+    }
+    onchange_model(after, before, hint) {
+        var { origin, deliverer } = hint;
+        if (origin === deliverer) {
+            if (after.translate)
+                // Model Base 레이어와 동일한 translate를 유지하도록 한다.
+                this.set('translate', after.translate);
+            if (after.rotation !== undefined)
+                // Model Base 레이어와 동일한 rotation을 유지하도록 한다.
+                this.set('rotation', after.rotation);
+            if (after.scale)
+                // Model Base 레이어와 동일한 scale을 유지하도록 한다.
+                this.set('scale', after.scale);
+        }
+        // Model Base 레이어에서 발생하는 대부분의 변화는 Selection 레이어에서도 반영해야한다.
+        this.invalidate();
+    }
+    /* default UI Event Handlers. */
+    ondblclick(e) {
+        if (typeof this.currentModeler.ondblclick === 'function')
+            this.currentModeler.ondblclick(e);
+        this.invalidate();
+    }
+    onmousedown(e) {
+        this.currentModeler.onmousedown(e);
+        this.invalidate();
+    }
+    onmouseup(e) {
+        if (typeof this.currentModeler.onmouseup === 'function')
+            this.currentModeler.onmouseup(e);
+        this.invalidate();
+    }
+    ondragstart(e) {
+        this.currentModeler.ondragstart(e);
+        this._state_dragging = true;
+    }
+    ondragmove(e) {
+        this.currentModeler.ondragmove(e);
+        this.invalidate();
+    }
+    ondragend(e) {
+        this._state_dragging = false;
+        this.currentModeler.ondragend(e);
+        this.invalidate();
+    }
+    ondrop(e, hint) {
+        /* 현재는 이미지 파일 만 추가할 수 있음 */
+        var { origin } = hint;
+        var transfered = e.dataTransfer.files;
+        if (transfered.length < 1)
+            return;
+        let center = this.rootModel.transcoordC2S(e.offsetX, e.offsetY);
+        let rootModel = this.rootModel;
+        Promise.all(Array.from(transfered).map(file => {
+            return new Promise((resolve, reject) => {
+                let reader = new FileReader();
+                reader.addEventListener('loadend', e => {
+                    resolve(reader.result);
+                });
+                ['error', 'abort'].forEach(event => reader.addEventListener(event, e => {
+                    reject(e);
+                }));
+                reader.readAsDataURL(file);
+            });
+        })).then(files => {
+            if (e.altKey) {
+                CommandChange.around(this.app.commander, () => {
+                    origin.ondropfile(transfered, files);
+                });
+                this.selected = [origin];
+                return;
+            }
+            let pendings = [];
+            let changes = files
+                .map((file, idx) => {
+                let component;
+                let type = transfered[idx].type;
+                let name = transfered[idx].name;
+                if (type.startsWith('image/')) {
+                    component = compile({
+                        type: type.startsWith('image/gif') ? 'gif-view' : 'image-view',
+                        top: 0,
+                        left: 0,
+                        width: 200,
+                        height: 200,
+                        src: file
+                    }, rootModel.app);
+                    pendings.push(new Promise((resolve, reject) => {
+                        let image = new Image();
+                        image.src = file;
+                        image.onload = () => {
+                            component.set({
+                                width: image.width,
+                                height: image.height
+                            });
+                            resolve();
+                        };
+                        image.onerror = e => {
+                            reject(e);
+                        };
+                    }));
+                }
+                else if (type.startsWith('audio/')) {
+                    component = compile({
+                        type: 'audio',
+                        top: 0,
+                        left: 0,
+                        width: 100,
+                        height: 100,
+                        src: file
+                    }, rootModel.app);
+                }
+                else if (type.startsWith('vnd.ms-excel/') || /\.xlsx?$/.test(name)) {
+                    component = compile({
+                        type: 'excel',
+                        top: 0,
+                        left: 0,
+                        width: 100,
+                        height: 100,
+                        src: file
+                    }, rootModel.app);
+                }
+                else {
+                    console.log('droped file', transfered[idx]);
+                }
+                if (component) {
+                    component.center = center;
+                    center.x += 50;
+                    center.y += 50;
+                }
+                return component;
+            })
+                .filter(Boolean)
+                .map(component => {
+                return {
+                    component: component,
+                    to_container: rootModel
+                };
+            });
+            if (changes.length > 0) {
+                Promise.all(pendings).then(() => {
+                    this.app.commander.execute(new CommandMigrate({ changes }));
+                    this.selected = changes.map(change => change.component);
+                }, reason => {
+                    console.error(reason);
+                });
+            }
+        }, reason => {
+            console.error(reason);
+        });
+    }
+    onwheel_scale(e, hint) {
+        /* shiftKey + wheel 은 deltaX 값을 변화시킨다. */
+        if (e.deltaY == 0 && e.deltaX == 0)
+            return;
+        var model_layer = hint.deliverer;
+        if (e.shiftKey) {
+            if (navigator.userAgent.indexOf('Win') != -1) {
+                var dir = e.deltaY < 0 ? 1 : -1;
+            }
+            else {
+                var dir = e.deltaX < 0 ? 1 : -1;
+            }
+            CommandChange.around(this.app.commander, () => {
+                /* 선택된 컴포넌트의 텍스트 사이즈를 조절한다. */
+                model_layer.selected.forEach(component => {
+                    let fontSize = component.get('fontSize') || Const.DEFAULT.FONT_SIZE;
+                    if (fontSize < 1)
+                        fontSize = 1;
+                    fontSize += dir;
+                    component.set('fontSize', fontSize);
+                });
+            });
+        }
+        else {
+            var dir = e.deltaY < 0 ? 1 : -1;
+            let scale = model_layer.get('scale') || { x: 1, y: 1 };
+            let translate = model_layer.get('translate');
+            let x = e.offsetX;
+            let y = e.offsetY;
+            let p = model_layer.transcoordC2S(x, y);
+            let delta = dir * 0.1;
+            let newscale = {
+                x: scale.x + delta,
+                y: scale.y + delta
+            };
+            if ((dir < 0 && scale.x < 0.2) || (dir > 0 && scale.x > 10))
+                return;
+            /* 휠을 밀면.. 확대 : zoom in */
+            /* 휠을 당기면.. 축소 : zoom out */
+            model_layer.set('scale', newscale);
+            let newp = model_layer.transcoordC2S(x, y);
+            model_layer.set('translate', {
+                x: translate.x + (newp.x - p.x) * newscale.x,
+                y: translate.y + (newp.y - p.y) * newscale.y
+            });
+        }
+    }
+}
+Component.register('modeling-layer', ModelingLayer);
+//# sourceMappingURL=modeling-layer.js.map