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

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

@@ -0,0 +1,42 @@
+export default class AddLayer extends Layer {
+    ready(): void;
+    get eventMap(): {
+        '(root)': {
+            '(self)': {
+                addstart: (models: any, hint: any) => void;
+                addstop: () => void;
+                keydown: (e: any) => void;
+                dragstart: (e: any) => void;
+                dragmove: (e: any) => void;
+                dragend: (e: any, hint: any) => void;
+                mousedown: (e: any, hint: any) => void;
+                mouseup: (e: any, hint: any) => void;
+            };
+        };
+        'model-layer': {
+            '(self)': {
+                change: (after: any, before: any, hint: any) => void;
+            };
+        };
+    };
+    onchange_root_model(after: any, before: any, hint: any): void;
+    onaddstart(models: any, hint: any): void;
+    before_mode: any;
+    models: any;
+    onaddstop(): void;
+    onkeydown(e: any): void;
+    ondragstart(e: any): void;
+    addbox: {
+        sx: any;
+        sy: any;
+    } | undefined;
+    ondragmove(e: any): void;
+    ondragend(e: any, hint: any): void;
+    onmousedown(e: any, hint: any): void;
+    downpoint: {
+        x: any;
+        y: any;
+    } | undefined;
+    onmouseup(e: any, hint: any): void;
+}
+import Layer from "./layer";

package/dist/layer/add-layer.js

@@ -0,0 +1,142 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import Component from '../components/component';
+import * as Const from '../const';
+import { add } from '../things-scene/api';
+import Layer from './layer';
+export default class AddLayer extends Layer {
+    // 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);
+    }
+    render(ctx) {
+        var addbox = this.addbox;
+        if (addbox) {
+            let { sx, sy, ex, ey } = addbox;
+            let scale = this.get('scale') || { x: 1, y: 1 };
+            ctx.beginPath();
+            ctx.rect(sx, sy, ex - sx, ey - sy);
+            ctx.setLineDash([2 / scale.x, 4 / scale.y]);
+            ctx.lineWidth = 1 / scale.x;
+            ctx.strokeStyle = 'black';
+            ctx.stroke();
+        }
+    }
+    contains(x, y) {
+        return !!(this.app.mode == Const.MODE_ADD);
+    }
+    get eventMap() {
+        return {
+            '(root)': {
+                '(self)': {
+                    addstart: this.onaddstart,
+                    addstop: this.onaddstop,
+                    keydown: this.onkeydown,
+                    dragstart: this.ondragstart,
+                    dragmove: this.ondragmove,
+                    dragend: this.ondragend,
+                    mousedown: this.onmousedown,
+                    mouseup: this.onmouseup
+                }
+            },
+            'model-layer': {
+                '(self)': {
+                    change: this.onchange_root_model
+                }
+            }
+        };
+    }
+    onchange_root_model(after, before, hint) {
+        if (after.translate) {
+            // Model Base 레이어와 동일한 translate를 유지하도록 한다.
+            this.set('translate', after.translate);
+        }
+        if (after.scale) {
+            // Model Base 레이어와 동일한 scale 유지하도록 한다.
+            this.set('scale', after.scale);
+        }
+    }
+    onaddstart(models, hint) {
+        if (this.before_mode === undefined) {
+            this.before_mode = this.app.mode;
+            this.models = models;
+            this.app.mode = Const.MODE_ADD;
+        }
+    }
+    onaddstop() {
+        if (this.before_mode !== undefined) {
+            this.app.mode = this.before_mode;
+        }
+        delete this.before_mode;
+        delete this.addbox;
+        this.invalidate();
+    }
+    onkeydown(e) {
+        if (this.app.mode === Const.MODE_ADD && e.code === 'Esc') {
+            this.root.trigger('addstop');
+        }
+    }
+    /* default UI Event Handlers. */
+    ondragstart(e) {
+        var { x, y } = this.transcoordC2S(e.offsetX, e.offsetY);
+        this.addbox = {
+            sx: x,
+            sy: y
+        };
+    }
+    ondragmove(e) {
+        if (this.app.mode !== Const.MODE_ADD) {
+            return;
+        }
+        var { x, y } = this.transcoordC2S(e.offsetX, e.offsetY);
+        if (this.addbox) {
+            this.addbox.ex = x;
+            this.addbox.ey = y;
+            this.invalidate();
+        }
+    }
+    ondragend(e, hint) {
+        if (this.app.mode !== Const.MODE_ADD) {
+            return;
+        }
+        const { sx, sy, ex, ey } = this.addbox;
+        add.call(this.root, this.models, {
+            left: Math.min(sx, ex),
+            top: Math.min(sy, ey),
+            width: Math.abs(ex - sx),
+            height: Math.abs(ey - sy)
+        });
+        this.root.trigger('addstop');
+    }
+    onmousedown(e, hint) {
+        if (this.app.mode !== Const.MODE_ADD) {
+            return;
+        }
+        this.downpoint = {
+            x: e.offsetX,
+            y: e.offsetY
+        };
+    }
+    onmouseup(e, hint) {
+        /*
+         * 마우스가 눌린 위치와 동일한 위치에서 버튼릴리즈 된 경우만 처리한다.
+         */
+        if (this.downpoint.x !== e.offsetX || this.downpoint.y !== e.offsetY) {
+            return;
+        }
+        var { x, y } = this.transcoordC2S(e.offsetX, e.offsetY);
+        add.call(this.root, this.models, {
+            cx: x,
+            cy: y
+        });
+        this.root.trigger('addstop');
+    }
+}
+Component.register('add-layer', AddLayer);
+//# sourceMappingURL=add-layer.js.map

package/dist/layer/add-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-layer.js","sourceRoot":"","sources":["../../src/layer/add-layer.js"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport Component from '../components/component'\nimport * as Const from '../const'\nimport { add } from '../things-scene/api'\nimport Layer from './layer'\n\nexport default class AddLayer extends Layer {\n  // Lifecycle\n  ready() {\n    super.ready()\n    var rootModel = this.rootModel\n\n    var translate = rootModel.get('translate')\n    var scale = rootModel.get('scale')\n\n    this.set('translate', translate)\n    this.set('scale', scale)\n  }\n\n  render(ctx) {\n    var addbox = this.addbox\n\n    if (addbox) {\n      let { sx, sy, ex, ey } = addbox\n      let scale = this.get('scale') || { x: 1, y: 1 }\n\n      ctx.beginPath()\n\n      ctx.rect(sx, sy, ex - sx, ey - sy)\n\n      ctx.setLineDash([2 / scale.x, 4 / scale.y])\n      ctx.lineWidth = 1 / scale.x\n      ctx.strokeStyle = 'black'\n\n      ctx.stroke()\n    }\n  }\n\n  contains(x, y) {\n    return !!(this.app.mode == Const.MODE_ADD)\n  }\n\n  get eventMap() {\n    return {\n      '(root)': {\n        '(self)': {\n          addstart: this.onaddstart,\n          addstop: this.onaddstop,\n          keydown: this.onkeydown,\n          dragstart: this.ondragstart,\n          dragmove: this.ondragmove,\n          dragend: this.ondragend,\n          mousedown: this.onmousedown,\n          mouseup: this.onmouseup\n        }\n      },\n      'model-layer': {\n        '(self)': {\n          change: this.onchange_root_model\n        }\n      }\n    }\n  }\n\n  onchange_root_model(after, before, hint) {\n    if (after.translate) {\n      // Model Base 레이어와 동일한 translate를 유지하도록 한다.\n      this.set('translate', after.translate)\n    }\n\n    if (after.scale) {\n      // Model Base 레이어와 동일한 scale 유지하도록 한다.\n      this.set('scale', after.scale)\n    }\n  }\n\n  onaddstart(models, hint) {\n    if (this.before_mode === undefined) {\n      this.before_mode = this.app.mode\n      this.models = models\n      this.app.mode = Const.MODE_ADD\n    }\n  }\n\n  onaddstop() {\n    if (this.before_mode !== undefined) {\n      this.app.mode = this.before_mode\n    }\n    delete this.before_mode\n    delete this.addbox\n\n    this.invalidate()\n  }\n\n  onkeydown(e) {\n    if (this.app.mode === Const.MODE_ADD && e.code === 'Esc') {\n      this.root.trigger('addstop')\n    }\n  }\n\n  /* default UI Event Handlers. */\n\n  ondragstart(e) {\n    var { x, y } = this.transcoordC2S(e.offsetX, e.offsetY)\n\n    this.addbox = {\n      sx: x,\n      sy: y\n    }\n  }\n\n  ondragmove(e) {\n    if (this.app.mode !== Const.MODE_ADD) {\n      return\n    }\n\n    var { x, y } = this.transcoordC2S(e.offsetX, e.offsetY)\n\n    if (this.addbox) {\n      this.addbox.ex = x\n      this.addbox.ey = y\n\n      this.invalidate()\n    }\n  }\n\n  ondragend(e, hint) {\n    if (this.app.mode !== Const.MODE_ADD) {\n      return\n    }\n\n    const { sx, sy, ex, ey } = this.addbox\n\n    add.call(this.root, this.models, {\n      left: Math.min(sx, ex),\n      top: Math.min(sy, ey),\n      width: Math.abs(ex - sx),\n      height: Math.abs(ey - sy)\n    })\n\n    this.root.trigger('addstop')\n  }\n\n  onmousedown(e, hint) {\n    if (this.app.mode !== Const.MODE_ADD) {\n      return\n    }\n\n    this.downpoint = {\n      x: e.offsetX,\n      y: e.offsetY\n    }\n  }\n\n  onmouseup(e, hint) {\n    /*\n     * 마우스가 눌린 위치와 동일한 위치에서 버튼릴리즈 된 경우만 처리한다.\n     */\n    if (this.downpoint.x !== e.offsetX || this.downpoint.y !== e.offsetY) {\n      return\n    }\n\n    var { x, y } = this.transcoordC2S(e.offsetX, e.offsetY)\n\n    add.call(this.root, this.models, {\n      cx: x,\n      cy: y\n    })\n\n    this.root.trigger('addstop')\n  }\n}\n\nComponent.register('add-layer', AddLayer)\n"]}

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

@@ -0,0 +1,27 @@
+export default class DecoTagLayer extends Layer {
+    _anim_alpha: number;
+    animOnTargetChange(targets: any): void;
+    _lastTargets: any;
+    set targets(arg: any);
+    get targets(): any;
+    _targets: any;
+    onmouseenter(e: any, hint: any): void;
+    onmouseleave(e: any, hint: any): void;
+    get eventMap(): {
+        'model-layer': {
+            '(descendant)': {
+                tag: (hint: any) => void;
+                tagreset: (hint: any) => void;
+                mouseenter: (e: any, hint: any) => void;
+                mouseleave: (e: any, hint: any) => void;
+            };
+        };
+    };
+    ondecotagreset(hint: any): void;
+    ondecotag(hint: any): void;
+    offdecotag(e: any, hint: any): void;
+    _ondecotag(target: any): void;
+    _offdecotag(target: any): void;
+    _decotagreset(): void;
+}
+import Layer from "./layer";

package/dist/layer/decotag-layer.js

@@ -0,0 +1,105 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import Component from '../components/component';
+import Layer from './layer';
+import { decorate } from '../decorator/index';
+/*
+ * DecoTagLayer 선택된 컴포넌트에 대한 정보를 보여준다.
+ *
+ * Tooltip 을 통해서 id, class 설정 정보를 보여준다.
+ * 변수에 의한 데이타 흐름은 선을 통해서 보여준다.
+ */
+export default class DecoTagLayer extends Layer {
+    constructor(model, context) {
+        super(model, context);
+        this._anim_alpha = 1;
+    }
+    animOnTargetChange(targets) {
+        if (targets === this._lastTargets)
+            return;
+        this._lastTargets = targets;
+        this._anim_alpha = 1;
+        this.animate({
+            step: delta => {
+                this._anim_alpha = 1 - delta * delta;
+                this.invalidate();
+            },
+            duration: 5000,
+            delta: 'linear',
+            options: {
+                x: 1
+            },
+            ease: 'out'
+        }).start();
+    }
+    render(context) {
+        var targets = this.targets && this.targets.filter(target => target.rootModel);
+        if (!targets || targets.length == 0) {
+            this._animate && this._animate.stop();
+            delete this._animate;
+            return;
+        }
+        context.globalAlpha *= this._anim_alpha;
+        var needAnimation = false;
+        targets.forEach(target => {
+            if (decorate(target, context)) {
+                needAnimation = true;
+            }
+        });
+        needAnimation && this.animOnTargetChange(this.targets);
+    }
+    get targets() {
+        return this._targets;
+    }
+    set targets(targets) {
+        this._targets = targets && targets.filter(target => !target.isLayer());
+        this.invalidate();
+    }
+    onmouseenter(e, hint) {
+        this._decotagreset();
+        this._ondecotag(hint.origin);
+    }
+    onmouseleave(e, hint) {
+        this._decotagreset();
+    }
+    get eventMap() {
+        return {
+            'model-layer': {
+                '(descendant)': {
+                    tag: this.ondecotag,
+                    tagreset: this.ondecotagreset,
+                    mouseenter: this.onmouseenter,
+                    mouseleave: this.onmouseleave
+                }
+            }
+        };
+    }
+    ondecotagreset(hint) {
+        this._decotagreset();
+    }
+    ondecotag(hint) {
+        this._ondecotag(hint.origin);
+    }
+    offdecotag(e, hint) {
+        this._offdecotag(hint.origin);
+    }
+    _ondecotag(target) {
+        if (this.targets && this.targets.lastIndexOf(target) !== -1)
+            return;
+        this.targets = (this.targets || []).concat(target);
+    }
+    _offdecotag(target) {
+        if (!this.targets)
+            return;
+        var copied = this.targets.slice();
+        copied.splice(this.targets.lastIndexOf(target), 1);
+        this.targets = copied;
+    }
+    _decotagreset() {
+        this.targets = [];
+    }
+}
+Component.register('decotag-layer', DecoTagLayer);
+Component.register('tag-layer', DecoTagLayer); // TOBE deprecated
+//# sourceMappingURL=decotag-layer.js.map

package/dist/layer/decotag-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decotag-layer.js","sourceRoot":"","sources":["../../src/layer/decotag-layer.js"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,SAAS,MAAM,yBAAyB,CAAA;AAC/C,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C;;;;;GAKG;AAEH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,KAAK;IAC7C,YAAY,KAAK,EAAE,OAAO;QACxB,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;QACrB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAA;IACtB,CAAC;IAED,kBAAkB,CAAC,OAAO;QACxB,IAAI,OAAO,KAAK,IAAI,CAAC,YAAY;YAAE,OAAM;QAEzC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAA;QAE3B,IAAI,CAAC,WAAW,GAAG,CAAC,CAAA;QAEpB,IAAI,CAAC,OAAO,CAAC;YACX,IAAI,EAAE,KAAK,CAAC,EAAE;gBACZ,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,KAAK,GAAG,KAAK,CAAA;gBACpC,IAAI,CAAC,UAAU,EAAE,CAAA;YACnB,CAAC;YACD,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,QAAQ;YACf,OAAO,EAAE;gBACP,CAAC,EAAE,CAAC;aACL;YACD,IAAI,EAAE,KAAK;SACZ,CAAC,CAAC,KAAK,EAAE,CAAA;IACZ,CAAC;IAED,MAAM,CAAC,OAAO;QACZ,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;QAC7E,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,IAAI,CAAC,EAAE;YACnC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAA;YACrC,OAAO,IAAI,CAAC,QAAQ,CAAA;YACpB,OAAM;SACP;QAED,OAAO,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAA;QAEvC,IAAI,aAAa,GAAG,KAAK,CAAA;QAEzB,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE;gBAC7B,aAAa,GAAG,IAAI,CAAA;aACrB;QACH,CAAC,CAAC,CAAA;QAEF,aAAa,IAAI,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IACxD,CAAC;IAED,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,QAAQ,CAAA;IACtB,CAAC;IAED,IAAI,OAAO,CAAC,OAAO;QACjB,IAAI,CAAC,QAAQ,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAA;QACtE,IAAI,CAAC,UAAU,EAAE,CAAA;IACnB,CAAC;IAED,YAAY,CAAC,CAAC,EAAE,IAAI;QAClB,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAC9B,CAAC;IAED,YAAY,CAAC,CAAC,EAAE,IAAI;QAClB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,IAAI,QAAQ;QACV,OAAO;YACL,aAAa,EAAE;gBACb,cAAc,EAAE;oBACd,GAAG,EAAE,IAAI,CAAC,SAAS;oBACnB,QAAQ,EAAE,IAAI,CAAC,cAAc;oBAC7B,UAAU,EAAE,IAAI,CAAC,YAAY;oBAC7B,UAAU,EAAE,IAAI,CAAC,YAAY;iBAC9B;aACF;SACF,CAAA;IACH,CAAC;IAED,cAAc,CAAC,IAAI;QACjB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,SAAS,CAAC,IAAI;QACZ,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAC9B,CAAC;IAED,UAAU,CAAC,CAAC,EAAE,IAAI;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAC/B,CAAC;IAED,UAAU,CAAC,MAAM;QACf,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAAE,OAAM;QAEnE,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IACpD,CAAC;IAED,WAAW,CAAC,MAAM;QAChB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAM;QAEzB,IAAI,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;QACjC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAA;QAClD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAA;IACvB,CAAC;IAED,aAAa;QACX,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;IACnB,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,eAAe,EAAE,YAAY,CAAC,CAAA;AACjD,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,YAAY,CAAC,CAAA,CAAC,kBAAkB","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport Component from '../components/component'\nimport Layer from './layer'\nimport { decorate } from '../decorator/index'\n\n/*\n * DecoTagLayer 선택된 컴포넌트에 대한 정보를 보여준다.\n *\n * Tooltip 을 통해서 id, class 설정 정보를 보여준다.\n * 변수에 의한 데이타 흐름은 선을 통해서 보여준다.\n */\n\nexport default class DecoTagLayer extends Layer {\n  constructor(model, context) {\n    super(model, context)\n    this._anim_alpha = 1\n  }\n\n  animOnTargetChange(targets) {\n    if (targets === this._lastTargets) return\n\n    this._lastTargets = targets\n\n    this._anim_alpha = 1\n\n    this.animate({\n      step: delta => {\n        this._anim_alpha = 1 - delta * delta\n        this.invalidate()\n      },\n      duration: 5000,\n      delta: 'linear',\n      options: {\n        x: 1\n      },\n      ease: 'out'\n    }).start()\n  }\n\n  render(context) {\n    var targets = this.targets && this.targets.filter(target => target.rootModel)\n    if (!targets || targets.length == 0) {\n      this._animate && this._animate.stop()\n      delete this._animate\n      return\n    }\n\n    context.globalAlpha *= this._anim_alpha\n\n    var needAnimation = false\n\n    targets.forEach(target => {\n      if (decorate(target, context)) {\n        needAnimation = true\n      }\n    })\n\n    needAnimation && this.animOnTargetChange(this.targets)\n  }\n\n  get targets() {\n    return this._targets\n  }\n\n  set targets(targets) {\n    this._targets = targets && targets.filter(target => !target.isLayer())\n    this.invalidate()\n  }\n\n  onmouseenter(e, hint) {\n    this._decotagreset()\n    this._ondecotag(hint.origin)\n  }\n\n  onmouseleave(e, hint) {\n    this._decotagreset()\n  }\n\n  get eventMap() {\n    return {\n      'model-layer': {\n        '(descendant)': {\n          tag: this.ondecotag,\n          tagreset: this.ondecotagreset,\n          mouseenter: this.onmouseenter,\n          mouseleave: this.onmouseleave\n        }\n      }\n    }\n  }\n\n  ondecotagreset(hint) {\n    this._decotagreset()\n  }\n\n  ondecotag(hint) {\n    this._ondecotag(hint.origin)\n  }\n\n  offdecotag(e, hint) {\n    this._offdecotag(hint.origin)\n  }\n\n  _ondecotag(target) {\n    if (this.targets && this.targets.lastIndexOf(target) !== -1) return\n\n    this.targets = (this.targets || []).concat(target)\n  }\n\n  _offdecotag(target) {\n    if (!this.targets) return\n\n    var copied = this.targets.slice()\n    copied.splice(this.targets.lastIndexOf(target), 1)\n    this.targets = copied\n  }\n\n  _decotagreset() {\n    this.targets = []\n  }\n}\n\nComponent.register('decotag-layer', DecoTagLayer)\nComponent.register('tag-layer', DecoTagLayer) // TOBE deprecated\n"]}

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

@@ -0,0 +1,44 @@
+export default class GuideLayer extends Layer {
+    appScale: {
+        x: number;
+        y: number;
+    };
+    hruler: Ruler | undefined;
+    vruler: Ruler | undefined;
+    origin_rect: Rect | undefined;
+    get capturable(): boolean;
+    ready(): void;
+    screen_coord: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    } | undefined;
+    set guide(arg: any);
+    get guide(): any;
+    _guide: any;
+    get eventMap(): {
+        '(root)': {
+            '(descendant)': {
+                mousemove: (e: any, hint: any) => void;
+                mouseout: (e: any) => void;
+                dragmove: (e: any, hint: any) => void;
+            };
+            'model-layer': {
+                change: (after: any, before: any, desc: any) => void;
+            };
+        };
+        '(self)': {
+            '(descendant)': {
+                mousedown: (e: any, hint: any) => void;
+            };
+        };
+    };
+    onmousedown_origin(e: any, hint: any): void;
+    onchange_root_model(after: any, before: any, desc: any): void;
+    onmouseout_child(e: any): void;
+    onmousemove_child(e: any, hint: any): void;
+}
+import Layer from "./layer";
+import Ruler from "../components/ruler";
+import Rect from "../components/rect";

package/dist/layer/guide-layer.js

@@ -0,0 +1,261 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import Component from '../components/component';
+import Rect from '../components/rect';
+import Ruler from '../components/ruler';
+import * as Const from '../const';
+import Layer from './layer';
+const HRULER_LEFT = 20;
+const HRULER_TOP = 0;
+const HRULER_ORIGIN = 20;
+const VRULER_LEFT = 0; /* 회전된 상태에서의 LEFT */
+const VRULER_TOP = 20; /* 회전된 상태에서의 TOP */
+const VRULER_ORIGIN = 20;
+const VRULER_ROTATE = (90 * Math.PI) / 180;
+const RULER_UNIT = 'm';
+const RULER_MARGIN = 0;
+const RULER_FONT = '9px Verdana';
+const RULER_HEIGHT = 20;
+const RULER_COLOR = '#f4f4f4';
+const RULER_STROKE = '#999';
+function calcOriginRectCoord(translate, width, height) {
+    return {
+        left: -translate.x,
+        top: -translate.y,
+        width: HRULER_LEFT,
+        height: RULER_HEIGHT
+    };
+}
+function calcHRulerCoord(translate, width, height, ruler) {
+    return {
+        left: HRULER_LEFT - translate.x,
+        top: HRULER_TOP - translate.y,
+        origin: HRULER_ORIGIN - translate.x,
+        width: width - HRULER_LEFT,
+        height: RULER_HEIGHT
+    };
+}
+function calcVRulerCoord(translate, width, height, ruler) {
+    // 1. 레이어 관점의 좌표계에서 Ruler의 센터를 잡는다
+    var center = {
+        x: -translate.x + VRULER_LEFT + RULER_HEIGHT / 2,
+        y: -translate.y + VRULER_TOP + (height - VRULER_TOP) / 2
+    };
+    // 2. 계산된 센터값을 이용해서 Ruler의 LEFT TOP에 해당하는 지점의 Ruler 관점의 좌표값을 계산한다.
+    var right_top = Component.transcoordRR(-translate.x + VRULER_LEFT, -translate.y + VRULER_TOP, center, VRULER_ROTATE);
+    // 3. 변경된 속성값을 리턴한다.
+    return {
+        left: right_top.x - (height - VRULER_TOP),
+        top: right_top.y,
+        origin: VRULER_ORIGIN - translate.y,
+        width: height - VRULER_TOP,
+        height: RULER_HEIGHT
+    };
+}
+function calcBounds(layout) {
+    var translate = layout.get('translate');
+    return {
+        left: -translate.x,
+        top: -translate.y,
+        width: layout.canvas.width / Const.DPPX,
+        height: layout.canvas.height / Const.DPPX
+    };
+}
+export default class GuideLayer extends Layer {
+    constructor(model, context) {
+        super(model, context);
+        this.appScale = {
+            x: 1,
+            y: 1
+        };
+        if (model.ruler !== 'disabled') {
+            this.hruler = new Ruler({
+                left: HRULER_LEFT,
+                top: HRULER_TOP,
+                origin: HRULER_ORIGIN,
+                margin: RULER_MARGIN,
+                height: RULER_HEIGHT,
+                unit: RULER_UNIT,
+                rotation: 0,
+                font: RULER_FONT,
+                fillStyle: RULER_COLOR,
+                strokeStyle: RULER_STROKE,
+                capturable: false
+            });
+            this.vruler = new Ruler({
+                left: 0,
+                top: 0,
+                origin: VRULER_ORIGIN,
+                margin: RULER_MARGIN,
+                height: RULER_HEIGHT,
+                unit: RULER_UNIT,
+                rotation: VRULER_ROTATE,
+                font: RULER_FONT,
+                side: 'top',
+                fillStyle: RULER_COLOR,
+                strokeStyle: RULER_STROKE,
+                capturable: false
+            });
+            this.origin_rect = new Rect({
+                left: -HRULER_ORIGIN,
+                top: -VRULER_ORIGIN,
+                width: HRULER_ORIGIN,
+                height: VRULER_ORIGIN,
+                fillStyle: RULER_COLOR,
+                strokeStyle: RULER_STROKE,
+                lineWidth: 1
+            });
+            this.addComponent(this.hruler);
+            this.addComponent(this.vruler);
+            this.addComponent(this.origin_rect);
+        }
+        this.invalidate();
+    }
+    get capturable() {
+        return false;
+    }
+    ready() {
+        super.ready();
+        if (!this.hruler) {
+            this.screen_coord = calcBounds(this);
+            return;
+        }
+        var rootModel = this.rootModel;
+        var translate = Object.assign({}, rootModel.get('translate'));
+        if (translate.x < HRULER_LEFT)
+            translate.x += HRULER_LEFT;
+        if (translate.y < VRULER_TOP)
+            translate.y += VRULER_TOP;
+        /* set scale */
+        var scale = rootModel.get('scale') || { x: 1, y: 1 };
+        this.appScale = scale;
+        this.hruler.set('scale', scale.x);
+        this.vruler.set('scale', scale.y);
+        /* set translate */
+        rootModel.set('translate', translate);
+        this.set('translate', translate);
+        this.screen_coord = calcBounds(this);
+        var { width, height } = this.screen_coord;
+        this.hruler.set(calcHRulerCoord(translate, width, height, this.hruler));
+        this.vruler.set(calcVRulerCoord(translate, width, height, this.vruler));
+        this.origin_rect.set(calcOriginRectCoord(translate, width, height));
+    }
+    resize() {
+        super.resize();
+        this.screen_coord = calcBounds(this);
+        var { width, height } = this.screen_coord;
+        if (this.hruler) {
+            /* 레이어의 디멘션이 변경될 때, Ruler의 초기 width 값을 설정한다. */
+            this.hruler.set(calcHRulerCoord(this.model.translate, width, height, this.hruler));
+            this.vruler.set(calcVRulerCoord(this.model.translate, width, height, this.vruler));
+            this.origin_rect.set(calcOriginRectCoord(this.model.translate, width, height));
+        }
+    }
+    render(ctx) {
+        // 선 그리기.
+        if (!this.guide)
+            return;
+        ctx.save();
+        var { x, y } = this.guide;
+        var { top, left, width, height } = this.screen_coord;
+        ctx.beginPath();
+        ctx.moveTo(x, top);
+        ctx.lineTo(x, top + height);
+        ctx.moveTo(left, y);
+        ctx.lineTo(left + width, y);
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = 'tomato';
+        ctx.setLineDash([2, 3]);
+        ctx.font = '10px tahoma';
+        ctx.fillStyle = '#333';
+        var screen_coord = this.transcoordS2C(x, y, this.rootModel);
+        ctx.textBaseline = screen_coord.y > 200 ? 'bottom' : 'top';
+        ctx.textAlign = screen_coord.x > 200 ? 'right' : 'left';
+        var yMargin = screen_coord.y > 200 ? -5 : 5;
+        var xMargin = screen_coord.x > 200 ? -5 : 5;
+        var scaled_x = Math.round(x / this.appScale.x);
+        var scaled_y = Math.round(y / this.appScale.y);
+        ctx.fillText(` ${scaled_x}, ${scaled_y} `, x + xMargin, y + yMargin);
+        ctx.stroke();
+        ctx.restore();
+    }
+    get guide() {
+        return this._guide;
+    }
+    set guide(guide) {
+        this._guide = guide;
+        this.invalidate();
+    }
+    contains(x, y) {
+        return true;
+    }
+    get eventMap() {
+        return {
+            '(root)': {
+                '(descendant)': {
+                    mousemove: this.onmousemove_child,
+                    mouseout: this.onmouseout_child,
+                    /* CONFIRMME DragMove 이벤트 중에는 MouseMove 이벤트가 발생하지 않으므로 (현재까지는..), 아래 이벤트 핸들러를 추가해준다. */
+                    dragmove: this.onmousemove_child
+                },
+                'model-layer': {
+                    change: this.onchange_root_model
+                }
+            },
+            '(self)': {
+                '(descendant)': {
+                    mousedown: this.onmousedown_origin
+                }
+            }
+        };
+    }
+    onmousedown_origin(e, hint) {
+        // 모델레이어의 원점을 움직인다.
+        this.rootModel.set('translate', {
+            x: HRULER_ORIGIN,
+            y: VRULER_ORIGIN
+        });
+    }
+    onchange_root_model(after, before, desc) {
+        if (after.scale) {
+            this.appScale = after.scale;
+            if (this.hruler) {
+                this.hruler.set('scale', after.scale.x);
+                this.vruler.set('scale', after.scale.y);
+            }
+        }
+        if (after.translate) {
+            this.set({
+                translate: {
+                    x: after.translate.x,
+                    y: after.translate.y
+                }
+            });
+        }
+        if (after.scale || after.translate) {
+            this.screen_coord = calcBounds(this);
+            if (this.hruler) {
+                var { translate } = this.model;
+                var { width, height } = this.screen_coord;
+                this.hruler.set(calcHRulerCoord(translate, width, height, this.hruler));
+                this.vruler.set(calcVRulerCoord(translate, width, height, this.vruler));
+                this.origin_rect.set(calcOriginRectCoord(translate, width, height));
+            }
+            this._guide = null;
+        }
+        this.invalidate();
+    }
+    onmouseout_child(e) {
+        this._guide = null;
+        this.invalidate();
+    }
+    onmousemove_child(e, hint) {
+        if (e.target && e.target.tagName !== 'CANVAS')
+            this.guide = null;
+        else
+            this.guide = this.transcoordC2S(e.offsetX, e.offsetY);
+    }
+}
+Component.register('guide-layer', GuideLayer);
+//# sourceMappingURL=guide-layer.js.map