@hatiolab/things-scene 9.0.0-beta.35 → 9.0.0-beta.36

package/dist/layer/add-layer.js

@@ -0,0 +1,180 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _component = _interopRequireDefault(require("../components/component.js"));
+var Const = _interopRequireWildcard(require("../const.js"));
+var _index = require("../things-scene/api/index.js");
+var _layer = _interopRequireDefault(require("./layer.js"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+class AddLayer extends _layer.default {
+  // 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);
+  }
+  get pointerEvents() {
+    return 'none';
+  }
+  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' || e.code == 'Escape')) {
+      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;
+    _index.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);
+    _index.add.call(this.root, this.models, {
+      cx: x,
+      cy: y
+    });
+    this.root.trigger('addstop');
+  }
+}
+exports.default = AddLayer;
+_component.default.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","names":["_component","_interopRequireDefault","require","Const","_interopRequireWildcard","_index","_layer","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AddLayer","Layer","ready","rootModel","translate","scale","pointerEvents","render","ctx","addbox","sx","sy","ex","ey","x","y","beginPath","rect","setLineDash","lineWidth","strokeStyle","stroke","contains","app","mode","MODE_ADD","eventMap","addstart","onaddstart","addstop","onaddstop","keydown","onkeydown","dragstart","ondragstart","dragmove","ondragmove","dragend","ondragend","mousedown","onmousedown","mouseup","onmouseup","change","onchange_root_model","after","before","hint","models","before_mode","undefined","invalidate","code","root","trigger","transcoordC2S","offsetX","offsetY","add","left","Math","min","top","width","abs","height","downpoint","cx","cy","exports","Component","register"],"sources":["../../src/layer/add-layer.js"],"sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport Component from '../components/component.js'\nimport * as Const from '../const.js'\nimport { add } from '../things-scene/api/index.js'\nimport Layer from './layer.js'\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  get pointerEvents() {\n    return 'none'\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' || e.code == 'Escape')) {\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"],"mappings":"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","ignoreList":[]}

package/dist/layer/decotag-layer.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _component = _interopRequireDefault(require("../components/component.js"));
+var _index = require("../decorator/index.js");
+var _layer = _interopRequireDefault(require("./layer.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+/*
+ * DecoTagLayer 선택된 컴포넌트에 대한 정보를 보여준다.
+ *
+ * Tooltip 을 통해서 id, class 설정 정보를 보여준다.
+ * 변수에 의한 데이타 흐름은 선을 통해서 보여준다.
+ */
+
+class DecoTagLayer extends _layer.default {
+  constructor(model, context) {
+    super(model, context);
+    this._anim_alpha = 1;
+  }
+  get pointerEvents() {
+    return 'none';
+  }
+  animOnTargetChange(decoTargets) {
+    if (decoTargets === this._lastTargets) return;
+    this._lastTargets = decoTargets;
+    this._anim_alpha = 1;
+    this.animate({
+      step: delta => {
+        this._anim_alpha = 1 - delta;
+        this.invalidate();
+      },
+      duration: 5000,
+      delta: 'circ',
+      ease: 'in'
+    }).start();
+  }
+  decorate(component, context, delta) {
+    const decorators = component.decorators;
+    var rendered = false;
+    decorators.map(decorator => typeof decorator == 'string' ? (0, _index.getDecorator)(decorator) : decorator).filter(decorator => decorator && typeof decorator == 'function').map(decorator => {
+      const result = decorator(component, context, 1 - delta);
+      rendered ||= result;
+    });
+    return rendered;
+  }
+  render(context) {
+    var decoTargets = this.decoTargets && this.decoTargets.filter(target => target.rootModel);
+    if (!decoTargets || decoTargets.length == 0) {
+      this._animate && this._animate.stop();
+      delete this._animate;
+      return;
+    }
+    context.globalAlpha *= this._anim_alpha;
+    var needAnimation = false;
+    decoTargets.forEach(target => {
+      if (this.decorate(target, context, 1 - this._anim_alpha)) {
+        needAnimation = true;
+      }
+    });
+    needAnimation && this.animOnTargetChange(this.decoTargets);
+  }
+  get decoTargets() {
+    return this._decoTargets;
+  }
+  set decoTargets(decoTargets) {
+    this._decoTargets = decoTargets && decoTargets.filter(target => !target.isLayer());
+    this.invalidate();
+  }
+  get eventMap() {
+    return {
+      'model-layer': {
+        '(descendant)': {
+          tag: this.ondecotag,
+          tagreset: this.ondecotagreset,
+          mouseenter: this.onmouseenter,
+          mouseleave: this.onmouseleave
+        }
+      }
+    };
+  }
+  onmouseenter(e, hint) {
+    this._decotagreset();
+    this._ondecotag(hint.origin);
+  }
+  onmouseleave(e, hint) {
+    this._decotagreset();
+  }
+  ondecotagreset(hint) {
+    this._decotagreset();
+  }
+  ondecotag(hint) {
+    this._ondecotag(hint.origin);
+  }
+  offdecotag(e, hint) {
+    this._offdecotag(hint.origin);
+  }
+  _ondecotag(target) {
+    if (this.decoTargets && this.decoTargets.lastIndexOf(target) !== -1) return;
+    this.decoTargets = (this.decoTargets || []).concat(target);
+  }
+  _offdecotag(target) {
+    if (!this.decoTargets) return;
+    var copied = this.decoTargets.slice();
+    copied.splice(this.decoTargets.lastIndexOf(target), 1);
+    this.decoTargets = copied;
+  }
+  _decotagreset() {
+    this.decoTargets = [];
+  }
+}
+exports.default = DecoTagLayer;
+_component.default.register('decotag-layer', DecoTagLayer);
+_component.default.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","names":["_component","_interopRequireDefault","require","_index","_layer","e","__esModule","default","DecoTagLayer","Layer","constructor","model","context","_anim_alpha","pointerEvents","animOnTargetChange","decoTargets","_lastTargets","animate","step","delta","invalidate","duration","ease","start","decorate","component","decorators","rendered","map","decorator","getDecorator","filter","result","render","target","rootModel","length","_animate","stop","globalAlpha","needAnimation","forEach","_decoTargets","isLayer","eventMap","tag","ondecotag","tagreset","ondecotagreset","mouseenter","onmouseenter","mouseleave","onmouseleave","hint","_decotagreset","_ondecotag","origin","offdecotag","_offdecotag","lastIndexOf","concat","copied","slice","splice","exports","Component","register"],"sources":["../../src/layer/decotag-layer.js"],"sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport Component from '../components/component.js'\nimport { getDecorator } from '../decorator/index.js'\nimport Layer from './layer.js'\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  get pointerEvents() {\n    return 'none'\n  }\n\n  animOnTargetChange(decoTargets) {\n    if (decoTargets === this._lastTargets) return\n\n    this._lastTargets = decoTargets\n\n    this._anim_alpha = 1\n\n    this.animate({\n      step: delta => {\n        this._anim_alpha = 1 - delta\n        this.invalidate()\n      },\n      duration: 5000,\n      delta: 'circ',\n      ease: 'in'\n    }).start()\n  }\n\n  decorate(component, context, delta) {\n    const decorators = component.decorators\n    var rendered = false\n\n    decorators\n      .map(decorator => (typeof decorator == 'string' ? getDecorator(decorator) : decorator))\n      .filter(decorator => decorator && typeof decorator == 'function')\n      .map(decorator => {\n        const result = decorator(component, context, 1 - delta)\n        rendered ||= result\n      })\n\n    return rendered\n  }\n\n  render(context) {\n    var decoTargets = this.decoTargets && this.decoTargets.filter(target => target.rootModel)\n    if (!decoTargets || decoTargets.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    decoTargets.forEach(target => {\n      if (this.decorate(target, context, 1 - this._anim_alpha)) {\n        needAnimation = true\n      }\n    })\n\n    needAnimation && this.animOnTargetChange(this.decoTargets)\n  }\n\n  get decoTargets() {\n    return this._decoTargets\n  }\n\n  set decoTargets(decoTargets) {\n    this._decoTargets = decoTargets && decoTargets.filter(target => !target.isLayer())\n    this.invalidate()\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  onmouseenter(e, hint) {\n    this._decotagreset()\n    this._ondecotag(hint.origin)\n  }\n\n  onmouseleave(e, hint) {\n    this._decotagreset()\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.decoTargets && this.decoTargets.lastIndexOf(target) !== -1) return\n\n    this.decoTargets = (this.decoTargets || []).concat(target)\n  }\n\n  _offdecotag(target) {\n    if (!this.decoTargets) return\n\n    var copied = this.decoTargets.slice()\n    copied.splice(this.decoTargets.lastIndexOf(target), 1)\n    this.decoTargets = copied\n  }\n\n  _decotagreset() {\n    this.decoTargets = []\n  }\n}\n\nComponent.register('decotag-layer', DecoTagLayer)\nComponent.register('tag-layer', DecoTagLayer) // TOBE deprecated\n"],"mappings":"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","ignoreList":[]}

package/dist/layer/guide-layer.js

@@ -0,0 +1,292 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _component = _interopRequireDefault(require("../components/component.js"));
+var _rect = _interopRequireDefault(require("../components/rect.js"));
+var _ruler = _interopRequireDefault(require("../components/ruler.js"));
+var Const = _interopRequireWildcard(require("../const.js"));
+var _layer = _interopRequireDefault(require("./layer.js"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+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.default.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
+  };
+}
+class GuideLayer extends _layer.default {
+  constructor(model, context) {
+    super(model, context);
+    this.appScale = {
+      x: 1,
+      y: 1
+    };
+    if (model.ruler !== 'disabled') {
+      this.hruler = new _ruler.default({
+        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.default({
+        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.default({
+        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);
+  }
+}
+exports.default = GuideLayer;
+_component.default.register('guide-layer', GuideLayer);
+//# sourceMappingURL=guide-layer.js.map