@hatiolab/things-scene 3.4.39 → 3.4.42

package/dist/layer/modeler/rotator.js

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

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

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

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