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

package/dist/layer/modeler/path-handler.js

@@ -0,0 +1,300 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commandChange = _interopRequireDefault(require("../../command/command-change.js"));
+var _commandMigrate = _interopRequireDefault(require("../../command/command-migrate.js"));
+var _index = require("../../model/index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+const ANCHOR_HANDLE_RADIUS = 4;
+function theta(p1, p2) {
+  return Math.atan2(p2.y - p1.y, p2.x - p1.x);
+}
+function distance(p1, p2) {
+  return Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));
+}
+function whereis(p, theta, distance) {
+  return {
+    x: Math.cos(theta) * distance + p.x,
+    y: Math.sin(theta) * distance + p.y
+  };
+}
+const THETA_STEP = Math.PI * 15 / 180;
+const PATH_HANDLE_RADIUS = 4;
+class PathHandler {
+  constructor(layer) {
+    this.layer = layer;
+  }
+  reset() {
+    // 현재 선택된 패스이동 핸들의 정보
+    this.active = null;
+    this.created = null;
+  }
+  get selected() {
+    return this.layer.selected;
+  }
+  contains(x, y, component, scale) {
+    if (!component.mutable) return false;
+
+    // 좌표가 컴포넌트 path 핸들에 포함되어있는지 확인함.
+    component.path.every((point, index) => {
+      if (Math.abs(x - point.x) <= PATH_HANDLE_RADIUS / scale.x && Math.abs(y - point.y) <= PATH_HANDLE_RADIUS / scale.y) {
+        // 현재 선택된 패스이동 핸들의 정보
+        this.active = {
+          component,
+          index
+        };
+      }
+
+      // 찾았으면, 스톱한다.
+      return !this.active;
+    });
+    return !!this.active;
+  }
+  startLinkProcess(linkFrom, linkModel, e) {
+    try {
+      var created = (0, _index.compile)(linkModel, linkFrom.app);
+      linkFrom.rootModel.addComponent(created);
+      this.layer.selected = [created];
+      this.active = {
+        component: created,
+        index: 1
+      };
+      this.ondragstart(e);
+      return created;
+    } catch (ex) {
+      console.warn(e);
+    }
+  }
+  draw(context, component, scale) {
+    if (!component.mutable || component.stuck) return;
+
+    // 패스이동 핸들(Path Move Handle)을 그린다.
+    var path = component.path;
+    var active = this.active;
+    path.forEach((point, index) => {
+      context.beginPath();
+      context.ellipse(point.x, point.y, PATH_HANDLE_RADIUS / scale.x, PATH_HANDLE_RADIUS / scale.y, 0, 0, 2 * Math.PI, true);
+      context.lineWidth = 1 / scale.x;
+      context.strokeStyle = '#656565';
+      context.fillStyle = '#fff';
+      if (active && active.component === component && active.index === index) {
+        context.strokeStyle = '#fa7703';
+        if (active.toFill) context.fillStyle = '#ffb80c';
+      }
+      context.fill();
+      context.stroke();
+    });
+  }
+  ondblclick(e) {
+    var component = this.active.component;
+    if (!component.pathExtendable) return;
+    var path = component.path.slice();
+    if (path.length < 3) return;
+    path.splice(this.active.index, 1);
+    component.path = path;
+  }
+  onmousedown(e) {
+    this.active.toFill = true;
+  }
+  ondragstart(e) {
+    var {
+      index,
+      component
+    } = this.active;
+    if (!this.created) {
+      this.active.changes = _commandChange.default.before([component]);
+    }
+    if (index === 0 || index === component.path.length - 1) {
+      this.layer.counterEnd = index === 0 ? component.toEnd || {
+        fromto: 'to'
+      } : component.fromEnd || {
+        fromto: 'from'
+      };
+    }
+  }
+  ondragmove(e) {
+    /* 컴포넌트 패쓰 핸들의 이동을 처리한다. */
+
+    var {
+      component: line,
+      index
+    } = this.active || {};
+    const {
+      offsetX,
+      offsetY
+    } = e;
+    var point = line.transcoordC2S(offsetX, offsetY);
+    point = line.transcoordS2P(point.x, point.y);
+    if (e.shiftKey) {
+      /* shift-key를 누른 경우에는 이전 포인트에 대해서 15도의 각도로만 움직인다. */
+      var path = line.path;
+      var length = path.length;
+      var prev = line.isLine() && index == 0 ? line.path[1] : line.path[(index - 1 + length) % length];
+      prev = line.transcoordS2P(prev.x, prev.y);
+      var ptheta = 0;
+      if (length > 2) {
+        var pprev;
+        if (line.isLine()) {
+          if (index == 0) pprev = line.path[2];else if (index != 1) pprev = line.path[index - 2];
+        } else {
+          pprev = line.path[(index - 2 + length) % length];
+        }
+        if (pprev) {
+          pprev = line.transcoordS2P(pprev.x, pprev.y);
+          ptheta = theta(pprev, prev);
+        }
+      }
+      var radian = Math.round((theta(prev, point) - ptheta) / THETA_STEP) * THETA_STEP + ptheta;
+      point = whereis(prev, radian, distance(prev, point));
+    }
+
+    /**
+     * 시작점과 끝점인 경우 앵커의 주변에 놓여지게 될때 자석에 효과로 자리를 잡는다.
+     */
+    if (index === 0 || index === line.path.length - 1) {
+      const dest = this.layer.anchorTarget = line.rootModel.capture(offsetX, offsetY, c => {
+        return !c.isConnectable();
+      });
+      if (dest) {
+        const {
+          x,
+          y
+        } = dest.transcoordC2S(offsetX, offsetY);
+        const scale = this.layer.get('scale') || {
+          x: 1,
+          y: 1
+        };
+        const counterEnd = this.layer.counterEnd;
+        const anchor = (dest.anchors || []).find(anchor => {
+          const {
+            name,
+            inout,
+            multiplicity = Infinity,
+            position,
+            filter
+          } = anchor;
+          if (counterEnd) {
+            const {
+              anchor: counterAnchor,
+              fromto
+            } = counterEnd;
+            if (counterAnchor && (counterAnchor.inout === 'out' && inout === 'out' || counterAnchor.inout === 'in' && inout === 'in')) {
+              return false;
+            }
+            if (fromto === 'from' && inout === 'out' || fromto === 'to' && inout === 'in') {
+              return false;
+            }
+          } else {
+            console.error('should not be here.');
+          }
+          if (Math.abs(x - position.x) > ANCHOR_HANDLE_RADIUS * 2 / scale.x || Math.abs(y - position.y) > ANCHOR_HANDLE_RADIUS * 2 / scale.y) {
+            return false;
+          }
+          const lines = dest.findInOutLines(name);
+          if (lines.includes(line)) {
+            return true;
+          }
+          if (multiplicity !== Infinity && lines.length >= multiplicity) {
+            return false;
+          }
+          if (counterEnd && filter) {
+            return !!filter.call(anchor, counterEnd);
+          }
+          return true;
+        });
+        if (anchor) {
+          if (index == 0) {
+            line.from = {
+              component: dest.get('refid'),
+              anchor: anchor.name,
+              position: point
+            };
+          } else {
+            line.to = {
+              component: dest.get('refid'),
+              anchor: anchor.name,
+              position: point
+            };
+          }
+        } else {
+          if (index == 0) {
+            line.from = {
+              position: point
+            };
+          } else {
+            line.to = {
+              position: point
+            };
+          }
+        }
+      }
+    }
+    line.mutatePath(null, function (path) {
+      path[index] = point;
+    });
+  }
+  ondragend(e) {
+    var {
+      component,
+      index,
+      changes
+    } = this.active;
+    if (index === 0 || index === component.path.length - 1) {
+      const {
+        offsetX,
+        offsetY
+      } = e;
+      const dest = component.rootModel.capture(offsetX, offsetY, c => {
+        return c === component || c.isLine();
+      });
+      const {
+        x,
+        y
+      } = dest.transcoordC2S(offsetX, offsetY);
+      const scale = this.layer.get('scale') || {
+        x: 1,
+        y: 1
+      };
+      const anchor = (dest.anchors || []).find(anchor => {
+        return anchor && Math.abs(x - anchor.position.x) <= ANCHOR_HANDLE_RADIUS * 2 / scale.x && Math.abs(y - anchor.position.y) <= ANCHOR_HANDLE_RADIUS * 2 / scale.y;
+      });
+      if (anchor) {
+        if (index == 0) {
+          component.from = {
+            component: dest.get('refid'),
+            anchor: anchor.name
+          };
+        } else {
+          component.to = {
+            component: dest.get('refid'),
+            anchor: anchor.name
+          };
+        }
+      }
+      this.layer.endLinkProcess();
+    }
+    if (this.created) {
+      let command = new _commandMigrate.default({
+        changes: [{
+          component: this.created,
+          to_container: this.created.parent
+        }]
+      });
+      created.app.commander.execute(command);
+    } else {
+      _commandChange.default.after(changes, component.app.commander);
+    }
+
+    // Group의 바운드를 재계산함.
+    component.parent && component.parent.calculateBounds && component.parent.calculateBounds();
+  }
+}
+exports.default = PathHandler;
+//# sourceMappingURL=path-handler.js.map

package/dist/layer/modeler/path-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"path-handler.js","names":["_commandChange","_interopRequireDefault","require","_commandMigrate","_index","e","__esModule","default","ANCHOR_HANDLE_RADIUS","theta","p1","p2","Math","atan2","y","x","distance","sqrt","whereis","p","cos","sin","THETA_STEP","PI","PATH_HANDLE_RADIUS","PathHandler","constructor","layer","reset","active","created","selected","contains","component","scale","mutable","path","every","point","index","abs","startLinkProcess","linkFrom","linkModel","compile","app","rootModel","addComponent","ondragstart","ex","console","warn","draw","context","stuck","forEach","beginPath","ellipse","lineWidth","strokeStyle","fillStyle","toFill","fill","stroke","ondblclick","pathExtendable","slice","length","splice","onmousedown","changes","CommandChange","before","counterEnd","toEnd","fromto","fromEnd","ondragmove","line","offsetX","offsetY","transcoordC2S","transcoordS2P","shiftKey","prev","isLine","ptheta","pprev","radian","round","dest","anchorTarget","capture","c","isConnectable","get","anchor","anchors","find","name","inout","multiplicity","Infinity","position","filter","counterAnchor","error","lines","findInOutLines","includes","call","from","to","mutatePath","ondragend","endLinkProcess","command","CommandMigrate","to_container","parent","commander","execute","after","calculateBounds","exports"],"sources":["../../../src/layer/modeler/path-handler.js"],"sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport CommandChange from '../../command/command-change.js'\nimport CommandMigrate from '../../command/command-migrate.js'\nimport { compile } from '../../model/index.js'\n\nconst ANCHOR_HANDLE_RADIUS = 4\n\nfunction theta(p1, p2) {\n  return Math.atan2(p2.y - p1.y, p2.x - p1.x)\n}\n\nfunction distance(p1, p2) {\n  return Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y))\n}\n\nfunction whereis(p, theta, distance) {\n  return {\n    x: Math.cos(theta) * distance + p.x,\n    y: Math.sin(theta) * distance + p.y\n  }\n}\n\nconst THETA_STEP = (Math.PI * 15) / 180\nconst PATH_HANDLE_RADIUS = 4\n\nexport default class PathHandler {\n  constructor(layer) {\n    this.layer = layer\n  }\n\n  reset() {\n    // 현재 선택된 패스이동 핸들의 정보\n    this.active = null\n    this.created = null\n  }\n\n  get selected() {\n    return this.layer.selected\n  }\n\n  contains(x, y, component, scale) {\n    if (!component.mutable) return false\n\n    // 좌표가 컴포넌트 path 핸들에 포함되어있는지 확인함.\n    component.path.every((point, index) => {\n      if (\n        Math.abs(x - point.x) <= PATH_HANDLE_RADIUS / scale.x &&\n        Math.abs(y - point.y) <= PATH_HANDLE_RADIUS / scale.y\n      ) {\n        // 현재 선택된 패스이동 핸들의 정보\n        this.active = { component, index }\n      }\n\n      // 찾았으면, 스톱한다.\n      return !this.active\n    })\n\n    return !!this.active\n  }\n\n  startLinkProcess(linkFrom, linkModel, e) {\n    try {\n      var created = compile(linkModel, linkFrom.app)\n      linkFrom.rootModel.addComponent(created)\n\n      this.layer.selected = [created]\n      this.active = {\n        component: created,\n        index: 1\n      }\n\n      this.ondragstart(e)\n\n      return created\n    } catch (ex) {\n      console.warn(e)\n    }\n  }\n\n  draw(context, component, scale) {\n    if (!component.mutable || component.stuck) return\n\n    // 패스이동 핸들(Path Move Handle)을 그린다.\n    var path = component.path\n    var active = this.active\n\n    path.forEach((point, index) => {\n      context.beginPath()\n\n      context.ellipse(\n        point.x,\n        point.y,\n        PATH_HANDLE_RADIUS / scale.x,\n        PATH_HANDLE_RADIUS / scale.y,\n        0,\n        0,\n        2 * Math.PI,\n        true\n      )\n      context.lineWidth = 1 / scale.x\n      context.strokeStyle = '#656565'\n      context.fillStyle = '#fff'\n\n      if (active && active.component === component && active.index === index) {\n        context.strokeStyle = '#fa7703'\n\n        if (active.toFill) context.fillStyle = '#ffb80c'\n      }\n\n      context.fill()\n      context.stroke()\n    })\n  }\n\n  ondblclick(e) {\n    var component = this.active.component\n\n    if (!component.pathExtendable) return\n\n    var path = component.path.slice()\n    if (path.length < 3) return\n\n    path.splice(this.active.index, 1)\n    component.path = path\n  }\n\n  onmousedown(e) {\n    this.active.toFill = true\n  }\n\n  ondragstart(e) {\n    var { index, component } = this.active\n\n    if (!this.created) {\n      this.active.changes = CommandChange.before([component])\n    }\n\n    if (index === 0 || index === component.path.length - 1) {\n      this.layer.counterEnd =\n        index === 0 ? component.toEnd || { fromto: 'to' } : component.fromEnd || { fromto: 'from' }\n    }\n  }\n\n  ondragmove(e) {\n    /* 컴포넌트 패쓰 핸들의 이동을 처리한다. */\n\n    var { component: line, index } = this.active || {}\n    const { offsetX, offsetY } = e\n\n    var point = line.transcoordC2S(offsetX, offsetY)\n    point = line.transcoordS2P(point.x, point.y)\n\n    if (e.shiftKey) {\n      /* shift-key를 누른 경우에는 이전 포인트에 대해서 15도의 각도로만 움직인다. */\n      var path = line.path\n      var length = path.length\n\n      var prev = line.isLine() && index == 0 ? line.path[1] : line.path[(index - 1 + length) % length]\n      prev = line.transcoordS2P(prev.x, prev.y)\n\n      var ptheta = 0\n\n      if (length > 2) {\n        var pprev\n\n        if (line.isLine()) {\n          if (index == 0) pprev = line.path[2]\n          else if (index != 1) pprev = line.path[index - 2]\n        } else {\n          pprev = line.path[(index - 2 + length) % length]\n        }\n\n        if (pprev) {\n          pprev = line.transcoordS2P(pprev.x, pprev.y)\n          ptheta = theta(pprev, prev)\n        }\n      }\n\n      var radian = Math.round((theta(prev, point) - ptheta) / THETA_STEP) * THETA_STEP + ptheta\n      point = whereis(prev, radian, distance(prev, point))\n    }\n\n    /**\n     * 시작점과 끝점인 경우 앵커의 주변에 놓여지게 될때 자석에 효과로 자리를 잡는다.\n     */\n    if (index === 0 || index === line.path.length - 1) {\n      const dest = (this.layer.anchorTarget = line.rootModel.capture(offsetX, offsetY, c => {\n        return !c.isConnectable()\n      }))\n\n      if (dest) {\n        const { x, y } = dest.transcoordC2S(offsetX, offsetY)\n        const scale = this.layer.get('scale') || { x: 1, y: 1 }\n        const counterEnd = this.layer.counterEnd\n\n        const anchor = (dest.anchors || []).find(anchor => {\n          const { name, inout, multiplicity = Infinity, position, filter } = anchor\n\n          if (counterEnd) {\n            const { anchor: counterAnchor, fromto } = counterEnd\n\n            if (\n              counterAnchor &&\n              ((counterAnchor.inout === 'out' && inout === 'out') || (counterAnchor.inout === 'in' && inout === 'in'))\n            ) {\n              return false\n            }\n\n            if ((fromto === 'from' && inout === 'out') || (fromto === 'to' && inout === 'in')) {\n              return false\n            }\n          } else {\n            console.error('should not be here.')\n          }\n\n          if (\n            Math.abs(x - position.x) > (ANCHOR_HANDLE_RADIUS * 2) / scale.x ||\n            Math.abs(y - position.y) > (ANCHOR_HANDLE_RADIUS * 2) / scale.y\n          ) {\n            return false\n          }\n\n          const lines = dest.findInOutLines(name)\n          if (lines.includes(line)) {\n            return true\n          }\n\n          if (multiplicity !== Infinity && lines.length >= multiplicity) {\n            return false\n          }\n\n          if (counterEnd && filter) {\n            return !!filter.call(anchor, counterEnd)\n          }\n\n          return true\n        })\n\n        if (anchor) {\n          if (index == 0) {\n            line.from = {\n              component: dest.get('refid'),\n              anchor: anchor.name,\n              position: point\n            }\n          } else {\n            line.to = {\n              component: dest.get('refid'),\n              anchor: anchor.name,\n              position: point\n            }\n          }\n        } else {\n          if (index == 0) {\n            line.from = {\n              position: point\n            }\n          } else {\n            line.to = {\n              position: point\n            }\n          }\n        }\n      }\n    }\n\n    line.mutatePath(null, function (path) {\n      path[index] = point\n    })\n  }\n\n  ondragend(e) {\n    var { component, index, changes } = this.active\n\n    if (index === 0 || index === component.path.length - 1) {\n      const { offsetX, offsetY } = e\n      const dest = component.rootModel.capture(offsetX, offsetY, c => {\n        return c === component || c.isLine()\n      })\n      const { x, y } = dest.transcoordC2S(offsetX, offsetY)\n      const scale = this.layer.get('scale') || { x: 1, y: 1 }\n\n      const anchor = (dest.anchors || []).find(anchor => {\n        return (\n          anchor &&\n          Math.abs(x - anchor.position.x) <= (ANCHOR_HANDLE_RADIUS * 2) / scale.x &&\n          Math.abs(y - anchor.position.y) <= (ANCHOR_HANDLE_RADIUS * 2) / scale.y\n        )\n      })\n\n      if (anchor) {\n        if (index == 0) {\n          component.from = {\n            component: dest.get('refid'),\n            anchor: anchor.name\n          }\n        } else {\n          component.to = {\n            component: dest.get('refid'),\n            anchor: anchor.name\n          }\n        }\n      }\n\n      this.layer.endLinkProcess()\n    }\n\n    if (this.created) {\n      let command = new CommandMigrate({\n        changes: [\n          {\n            component: this.created,\n            to_container: this.created.parent\n          }\n        ]\n      })\n\n      created.app.commander.execute(command)\n    } else {\n      CommandChange.after(changes, component.app.commander)\n    }\n\n    // Group의 바운드를 재계산함.\n    component.parent && component.parent.calculateBounds && component.parent.calculateBounds()\n  }\n}\n"],"mappings":";;;;;;AAIA,IAAAA,cAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAA8C,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAN9C;AACA;AACA;;AAMA,MAAMG,oBAAoB,GAAG,CAAC;AAE9B,SAASC,KAAKA,CAACC,EAAE,EAAEC,EAAE,EAAE;EACrB,OAAOC,IAAI,CAACC,KAAK,CAACF,EAAE,CAACG,CAAC,GAAGJ,EAAE,CAACI,CAAC,EAAEH,EAAE,CAACI,CAAC,GAAGL,EAAE,CAACK,CAAC,CAAC;AAC7C;AAEA,SAASC,QAAQA,CAACN,EAAE,EAAEC,EAAE,EAAE;EACxB,OAAOC,IAAI,CAACK,IAAI,CAAC,CAACN,EAAE,CAACI,CAAC,GAAGL,EAAE,CAACK,CAAC,KAAKJ,EAAE,CAACI,CAAC,GAAGL,EAAE,CAACK,CAAC,CAAC,GAAG,CAACJ,EAAE,CAACG,CAAC,GAAGJ,EAAE,CAACI,CAAC,KAAKH,EAAE,CAACG,CAAC,GAAGJ,EAAE,CAACI,CAAC,CAAC,CAAC;AACjF;AAEA,SAASI,OAAOA,CAACC,CAAC,EAAEV,KAAK,EAAEO,QAAQ,EAAE;EACnC,OAAO;IACLD,CAAC,EAAEH,IAAI,CAACQ,GAAG,CAACX,KAAK,CAAC,GAAGO,QAAQ,GAAGG,CAAC,CAACJ,CAAC;IACnCD,CAAC,EAAEF,IAAI,CAACS,GAAG,CAACZ,KAAK,CAAC,GAAGO,QAAQ,GAAGG,CAAC,CAACL;EACpC,CAAC;AACH;AAEA,MAAMQ,UAAU,GAAIV,IAAI,CAACW,EAAE,GAAG,EAAE,GAAI,GAAG;AACvC,MAAMC,kBAAkB,GAAG,CAAC;AAEb,MAAMC,WAAW,CAAC;EAC/BC,WAAWA,CAACC,KAAK,EAAE;IACjB,IAAI,CAACA,KAAK,GAAGA,KAAK;EACpB;EAEAC,KAAKA,CAAA,EAAG;IACN;IACA,IAAI,CAACC,MAAM,GAAG,IAAI;IAClB,IAAI,CAACC,OAAO,GAAG,IAAI;EACrB;EAEA,IAAIC,QAAQA,CAAA,EAAG;IACb,OAAO,IAAI,CAACJ,KAAK,CAACI,QAAQ;EAC5B;EAEAC,QAAQA,CAACjB,CAAC,EAAED,CAAC,EAAEmB,SAAS,EAAEC,KAAK,EAAE;IAC/B,IAAI,CAACD,SAAS,CAACE,OAAO,EAAE,OAAO,KAAK;;IAEpC;IACAF,SAAS,CAACG,IAAI,CAACC,KAAK,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;MACrC,IACE3B,IAAI,CAAC4B,GAAG,CAACzB,CAAC,GAAGuB,KAAK,CAACvB,CAAC,CAAC,IAAIS,kBAAkB,GAAGU,KAAK,CAACnB,CAAC,IACrDH,IAAI,CAAC4B,GAAG,CAAC1B,CAAC,GAAGwB,KAAK,CAACxB,CAAC,CAAC,IAAIU,kBAAkB,GAAGU,KAAK,CAACpB,CAAC,EACrD;QACA;QACA,IAAI,CAACe,MAAM,GAAG;UAAEI,SAAS;UAAEM;QAAM,CAAC;MACpC;;MAEA;MACA,OAAO,CAAC,IAAI,CAACV,MAAM;IACrB,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC,IAAI,CAACA,MAAM;EACtB;EAEAY,gBAAgBA,CAACC,QAAQ,EAAEC,SAAS,EAAEtC,CAAC,EAAE;IACvC,IAAI;MACF,IAAIyB,OAAO,GAAG,IAAAc,cAAO,EAACD,SAAS,EAAED,QAAQ,CAACG,GAAG,CAAC;MAC9CH,QAAQ,CAACI,SAAS,CAACC,YAAY,CAACjB,OAAO,CAAC;MAExC,IAAI,CAACH,KAAK,CAACI,QAAQ,GAAG,CAACD,OAAO,CAAC;MAC/B,IAAI,CAACD,MAAM,GAAG;QACZI,SAAS,EAAEH,OAAO;QAClBS,KAAK,EAAE;MACT,CAAC;MAED,IAAI,CAACS,WAAW,CAAC3C,CAAC,CAAC;MAEnB,OAAOyB,OAAO;IAChB,CAAC,CAAC,OAAOmB,EAAE,EAAE;MACXC,OAAO,CAACC,IAAI,CAAC9C,CAAC,CAAC;IACjB;EACF;EAEA+C,IAAIA,CAACC,OAAO,EAAEpB,SAAS,EAAEC,KAAK,EAAE;IAC9B,IAAI,CAACD,SAAS,CAACE,OAAO,IAAIF,SAAS,CAACqB,KAAK,EAAE;;IAE3C;IACA,IAAIlB,IAAI,GAAGH,SAAS,CAACG,IAAI;IACzB,IAAIP,MAAM,GAAG,IAAI,CAACA,MAAM;IAExBO,IAAI,CAACmB,OAAO,CAAC,CAACjB,KAAK,EAAEC,KAAK,KAAK;MAC7Bc,OAAO,CAACG,SAAS,CAAC,CAAC;MAEnBH,OAAO,CAACI,OAAO,CACbnB,KAAK,CAACvB,CAAC,EACPuB,KAAK,CAACxB,CAAC,EACPU,kBAAkB,GAAGU,KAAK,CAACnB,CAAC,EAC5BS,kBAAkB,GAAGU,KAAK,CAACpB,CAAC,EAC5B,CAAC,EACD,CAAC,EACD,CAAC,GAAGF,IAAI,CAACW,EAAE,EACX,IACF,CAAC;MACD8B,OAAO,CAACK,SAAS,GAAG,CAAC,GAAGxB,KAAK,CAACnB,CAAC;MAC/BsC,OAAO,CAACM,WAAW,GAAG,SAAS;MAC/BN,OAAO,CAACO,SAAS,GAAG,MAAM;MAE1B,IAAI/B,MAAM,IAAIA,MAAM,CAACI,SAAS,KAAKA,SAAS,IAAIJ,MAAM,CAACU,KAAK,KAAKA,KAAK,EAAE;QACtEc,OAAO,CAACM,WAAW,GAAG,SAAS;QAE/B,IAAI9B,MAAM,CAACgC,MAAM,EAAER,OAAO,CAACO,SAAS,GAAG,SAAS;MAClD;MAEAP,OAAO,CAACS,IAAI,CAAC,CAAC;MACdT,OAAO,CAACU,MAAM,CAAC,CAAC;IAClB,CAAC,CAAC;EACJ;EAEAC,UAAUA,CAAC3D,CAAC,EAAE;IACZ,IAAI4B,SAAS,GAAG,IAAI,CAACJ,MAAM,CAACI,SAAS;IAErC,IAAI,CAACA,SAAS,CAACgC,cAAc,EAAE;IAE/B,IAAI7B,IAAI,GAAGH,SAAS,CAACG,IAAI,CAAC8B,KAAK,CAAC,CAAC;IACjC,IAAI9B,IAAI,CAAC+B,MAAM,GAAG,CAAC,EAAE;IAErB/B,IAAI,CAACgC,MAAM,CAAC,IAAI,CAACvC,MAAM,CAACU,KAAK,EAAE,CAAC,CAAC;IACjCN,SAAS,CAACG,IAAI,GAAGA,IAAI;EACvB;EAEAiC,WAAWA,CAAChE,CAAC,EAAE;IACb,IAAI,CAACwB,MAAM,CAACgC,MAAM,GAAG,IAAI;EAC3B;EAEAb,WAAWA,CAAC3C,CAAC,EAAE;IACb,IAAI;MAAEkC,KAAK;MAAEN;IAAU,CAAC,GAAG,IAAI,CAACJ,MAAM;IAEtC,IAAI,CAAC,IAAI,CAACC,OAAO,EAAE;MACjB,IAAI,CAACD,MAAM,CAACyC,OAAO,GAAGC,sBAAa,CAACC,MAAM,CAAC,CAACvC,SAAS,CAAC,CAAC;IACzD;IAEA,IAAIM,KAAK,KAAK,CAAC,IAAIA,KAAK,KAAKN,SAAS,CAACG,IAAI,CAAC+B,MAAM,GAAG,CAAC,EAAE;MACtD,IAAI,CAACxC,KAAK,CAAC8C,UAAU,GACnBlC,KAAK,KAAK,CAAC,GAAGN,SAAS,CAACyC,KAAK,IAAI;QAAEC,MAAM,EAAE;MAAK,CAAC,GAAG1C,SAAS,CAAC2C,OAAO,IAAI;QAAED,MAAM,EAAE;MAAO,CAAC;IAC/F;EACF;EAEAE,UAAUA,CAACxE,CAAC,EAAE;IACZ;;IAEA,IAAI;MAAE4B,SAAS,EAAE6C,IAAI;MAAEvC;IAAM,CAAC,GAAG,IAAI,CAACV,MAAM,IAAI,CAAC,CAAC;IAClD,MAAM;MAAEkD,OAAO;MAAEC;IAAQ,CAAC,GAAG3E,CAAC;IAE9B,IAAIiC,KAAK,GAAGwC,IAAI,CAACG,aAAa,CAACF,OAAO,EAAEC,OAAO,CAAC;IAChD1C,KAAK,GAAGwC,IAAI,CAACI,aAAa,CAAC5C,KAAK,CAACvB,CAAC,EAAEuB,KAAK,CAACxB,CAAC,CAAC;IAE5C,IAAIT,CAAC,CAAC8E,QAAQ,EAAE;MACd;MACA,IAAI/C,IAAI,GAAG0C,IAAI,CAAC1C,IAAI;MACpB,IAAI+B,MAAM,GAAG/B,IAAI,CAAC+B,MAAM;MAExB,IAAIiB,IAAI,GAAGN,IAAI,CAACO,MAAM,CAAC,CAAC,IAAI9C,KAAK,IAAI,CAAC,GAAGuC,IAAI,CAAC1C,IAAI,CAAC,CAAC,CAAC,GAAG0C,IAAI,CAAC1C,IAAI,CAAC,CAACG,KAAK,GAAG,CAAC,GAAG4B,MAAM,IAAIA,MAAM,CAAC;MAChGiB,IAAI,GAAGN,IAAI,CAACI,aAAa,CAACE,IAAI,CAACrE,CAAC,EAAEqE,IAAI,CAACtE,CAAC,CAAC;MAEzC,IAAIwE,MAAM,GAAG,CAAC;MAEd,IAAInB,MAAM,GAAG,CAAC,EAAE;QACd,IAAIoB,KAAK;QAET,IAAIT,IAAI,CAACO,MAAM,CAAC,CAAC,EAAE;UACjB,IAAI9C,KAAK,IAAI,CAAC,EAAEgD,KAAK,GAAGT,IAAI,CAAC1C,IAAI,CAAC,CAAC,CAAC,MAC/B,IAAIG,KAAK,IAAI,CAAC,EAAEgD,KAAK,GAAGT,IAAI,CAAC1C,IAAI,CAACG,KAAK,GAAG,CAAC,CAAC;QACnD,CAAC,MAAM;UACLgD,KAAK,GAAGT,IAAI,CAAC1C,IAAI,CAAC,CAACG,KAAK,GAAG,CAAC,GAAG4B,MAAM,IAAIA,MAAM,CAAC;QAClD;QAEA,IAAIoB,KAAK,EAAE;UACTA,KAAK,GAAGT,IAAI,CAACI,aAAa,CAACK,KAAK,CAACxE,CAAC,EAAEwE,KAAK,CAACzE,CAAC,CAAC;UAC5CwE,MAAM,GAAG7E,KAAK,CAAC8E,KAAK,EAAEH,IAAI,CAAC;QAC7B;MACF;MAEA,IAAII,MAAM,GAAG5E,IAAI,CAAC6E,KAAK,CAAC,CAAChF,KAAK,CAAC2E,IAAI,EAAE9C,KAAK,CAAC,GAAGgD,MAAM,IAAIhE,UAAU,CAAC,GAAGA,UAAU,GAAGgE,MAAM;MACzFhD,KAAK,GAAGpB,OAAO,CAACkE,IAAI,EAAEI,MAAM,EAAExE,QAAQ,CAACoE,IAAI,EAAE9C,KAAK,CAAC,CAAC;IACtD;;IAEA;AACJ;AACA;IACI,IAAIC,KAAK,KAAK,CAAC,IAAIA,KAAK,KAAKuC,IAAI,CAAC1C,IAAI,CAAC+B,MAAM,GAAG,CAAC,EAAE;MACjD,MAAMuB,IAAI,GAAI,IAAI,CAAC/D,KAAK,CAACgE,YAAY,GAAGb,IAAI,CAAChC,SAAS,CAAC8C,OAAO,CAACb,OAAO,EAAEC,OAAO,EAAEa,CAAC,IAAI;QACpF,OAAO,CAACA,CAAC,CAACC,aAAa,CAAC,CAAC;MAC3B,CAAC,CAAE;MAEH,IAAIJ,IAAI,EAAE;QACR,MAAM;UAAE3E,CAAC;UAAED;QAAE,CAAC,GAAG4E,IAAI,CAACT,aAAa,CAACF,OAAO,EAAEC,OAAO,CAAC;QACrD,MAAM9C,KAAK,GAAG,IAAI,CAACP,KAAK,CAACoE,GAAG,CAAC,OAAO,CAAC,IAAI;UAAEhF,CAAC,EAAE,CAAC;UAAED,CAAC,EAAE;QAAE,CAAC;QACvD,MAAM2D,UAAU,GAAG,IAAI,CAAC9C,KAAK,CAAC8C,UAAU;QAExC,MAAMuB,MAAM,GAAG,CAACN,IAAI,CAACO,OAAO,IAAI,EAAE,EAAEC,IAAI,CAACF,MAAM,IAAI;UACjD,MAAM;YAAEG,IAAI;YAAEC,KAAK;YAAEC,YAAY,GAAGC,QAAQ;YAAEC,QAAQ;YAAEC;UAAO,CAAC,GAAGR,MAAM;UAEzE,IAAIvB,UAAU,EAAE;YACd,MAAM;cAAEuB,MAAM,EAAES,aAAa;cAAE9B;YAAO,CAAC,GAAGF,UAAU;YAEpD,IACEgC,aAAa,KACXA,aAAa,CAACL,KAAK,KAAK,KAAK,IAAIA,KAAK,KAAK,KAAK,IAAMK,aAAa,CAACL,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,IAAK,CAAC,EACxG;cACA,OAAO,KAAK;YACd;YAEA,IAAKzB,MAAM,KAAK,MAAM,IAAIyB,KAAK,KAAK,KAAK,IAAMzB,MAAM,KAAK,IAAI,IAAIyB,KAAK,KAAK,IAAK,EAAE;cACjF,OAAO,KAAK;YACd;UACF,CAAC,MAAM;YACLlD,OAAO,CAACwD,KAAK,CAAC,qBAAqB,CAAC;UACtC;UAEA,IACE9F,IAAI,CAAC4B,GAAG,CAACzB,CAAC,GAAGwF,QAAQ,CAACxF,CAAC,CAAC,GAAIP,oBAAoB,GAAG,CAAC,GAAI0B,KAAK,CAACnB,CAAC,IAC/DH,IAAI,CAAC4B,GAAG,CAAC1B,CAAC,GAAGyF,QAAQ,CAACzF,CAAC,CAAC,GAAIN,oBAAoB,GAAG,CAAC,GAAI0B,KAAK,CAACpB,CAAC,EAC/D;YACA,OAAO,KAAK;UACd;UAEA,MAAM6F,KAAK,GAAGjB,IAAI,CAACkB,cAAc,CAACT,IAAI,CAAC;UACvC,IAAIQ,KAAK,CAACE,QAAQ,CAAC/B,IAAI,CAAC,EAAE;YACxB,OAAO,IAAI;UACb;UAEA,IAAIuB,YAAY,KAAKC,QAAQ,IAAIK,KAAK,CAACxC,MAAM,IAAIkC,YAAY,EAAE;YAC7D,OAAO,KAAK;UACd;UAEA,IAAI5B,UAAU,IAAI+B,MAAM,EAAE;YACxB,OAAO,CAAC,CAACA,MAAM,CAACM,IAAI,CAACd,MAAM,EAAEvB,UAAU,CAAC;UAC1C;UAEA,OAAO,IAAI;QACb,CAAC,CAAC;QAEF,IAAIuB,MAAM,EAAE;UACV,IAAIzD,KAAK,IAAI,CAAC,EAAE;YACduC,IAAI,CAACiC,IAAI,GAAG;cACV9E,SAAS,EAAEyD,IAAI,CAACK,GAAG,CAAC,OAAO,CAAC;cAC5BC,MAAM,EAAEA,MAAM,CAACG,IAAI;cACnBI,QAAQ,EAAEjE;YACZ,CAAC;UACH,CAAC,MAAM;YACLwC,IAAI,CAACkC,EAAE,GAAG;cACR/E,SAAS,EAAEyD,IAAI,CAACK,GAAG,CAAC,OAAO,CAAC;cAC5BC,MAAM,EAAEA,MAAM,CAACG,IAAI;cACnBI,QAAQ,EAAEjE;YACZ,CAAC;UACH;QACF,CAAC,MAAM;UACL,IAAIC,KAAK,IAAI,CAAC,EAAE;YACduC,IAAI,CAACiC,IAAI,GAAG;cACVR,QAAQ,EAAEjE;YACZ,CAAC;UACH,CAAC,MAAM;YACLwC,IAAI,CAACkC,EAAE,GAAG;cACRT,QAAQ,EAAEjE;YACZ,CAAC;UACH;QACF;MACF;IACF;IAEAwC,IAAI,CAACmC,UAAU,CAAC,IAAI,EAAE,UAAU7E,IAAI,EAAE;MACpCA,IAAI,CAACG,KAAK,CAAC,GAAGD,KAAK;IACrB,CAAC,CAAC;EACJ;EAEA4E,SAASA,CAAC7G,CAAC,EAAE;IACX,IAAI;MAAE4B,SAAS;MAAEM,KAAK;MAAE+B;IAAQ,CAAC,GAAG,IAAI,CAACzC,MAAM;IAE/C,IAAIU,KAAK,KAAK,CAAC,IAAIA,KAAK,KAAKN,SAAS,CAACG,IAAI,CAAC+B,MAAM,GAAG,CAAC,EAAE;MACtD,MAAM;QAAEY,OAAO;QAAEC;MAAQ,CAAC,GAAG3E,CAAC;MAC9B,MAAMqF,IAAI,GAAGzD,SAAS,CAACa,SAAS,CAAC8C,OAAO,CAACb,OAAO,EAAEC,OAAO,EAAEa,CAAC,IAAI;QAC9D,OAAOA,CAAC,KAAK5D,SAAS,IAAI4D,CAAC,CAACR,MAAM,CAAC,CAAC;MACtC,CAAC,CAAC;MACF,MAAM;QAAEtE,CAAC;QAAED;MAAE,CAAC,GAAG4E,IAAI,CAACT,aAAa,CAACF,OAAO,EAAEC,OAAO,CAAC;MACrD,MAAM9C,KAAK,GAAG,IAAI,CAACP,KAAK,CAACoE,GAAG,CAAC,OAAO,CAAC,IAAI;QAAEhF,CAAC,EAAE,CAAC;QAAED,CAAC,EAAE;MAAE,CAAC;MAEvD,MAAMkF,MAAM,GAAG,CAACN,IAAI,CAACO,OAAO,IAAI,EAAE,EAAEC,IAAI,CAACF,MAAM,IAAI;QACjD,OACEA,MAAM,IACNpF,IAAI,CAAC4B,GAAG,CAACzB,CAAC,GAAGiF,MAAM,CAACO,QAAQ,CAACxF,CAAC,CAAC,IAAKP,oBAAoB,GAAG,CAAC,GAAI0B,KAAK,CAACnB,CAAC,IACvEH,IAAI,CAAC4B,GAAG,CAAC1B,CAAC,GAAGkF,MAAM,CAACO,QAAQ,CAACzF,CAAC,CAAC,IAAKN,oBAAoB,GAAG,CAAC,GAAI0B,KAAK,CAACpB,CAAC;MAE3E,CAAC,CAAC;MAEF,IAAIkF,MAAM,EAAE;QACV,IAAIzD,KAAK,IAAI,CAAC,EAAE;UACdN,SAAS,CAAC8E,IAAI,GAAG;YACf9E,SAAS,EAAEyD,IAAI,CAACK,GAAG,CAAC,OAAO,CAAC;YAC5BC,MAAM,EAAEA,MAAM,CAACG;UACjB,CAAC;QACH,CAAC,MAAM;UACLlE,SAAS,CAAC+E,EAAE,GAAG;YACb/E,SAAS,EAAEyD,IAAI,CAACK,GAAG,CAAC,OAAO,CAAC;YAC5BC,MAAM,EAAEA,MAAM,CAACG;UACjB,CAAC;QACH;MACF;MAEA,IAAI,CAACxE,KAAK,CAACwF,cAAc,CAAC,CAAC;IAC7B;IAEA,IAAI,IAAI,CAACrF,OAAO,EAAE;MAChB,IAAIsF,OAAO,GAAG,IAAIC,uBAAc,CAAC;QAC/B/C,OAAO,EAAE,CACP;UACErC,SAAS,EAAE,IAAI,CAACH,OAAO;UACvBwF,YAAY,EAAE,IAAI,CAACxF,OAAO,CAACyF;QAC7B,CAAC;MAEL,CAAC,CAAC;MAEFzF,OAAO,CAACe,GAAG,CAAC2E,SAAS,CAACC,OAAO,CAACL,OAAO,CAAC;IACxC,CAAC,MAAM;MACL7C,sBAAa,CAACmD,KAAK,CAACpD,OAAO,EAAErC,SAAS,CAACY,GAAG,CAAC2E,SAAS,CAAC;IACvD;;IAEA;IACAvF,SAAS,CAACsF,MAAM,IAAItF,SAAS,CAACsF,MAAM,CAACI,eAAe,IAAI1F,SAAS,CAACsF,MAAM,CAACI,eAAe,CAAC,CAAC;EAC5F;AACF;AAACC,OAAA,CAAArH,OAAA,GAAAkB,WAAA","ignoreList":[]}

package/dist/layer/modeler/resizer.js

@@ -0,0 +1,333 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+const RESIZE_HANDLE_HALF_SIZE = 4;
+const RESIZE_HANDLE_FULL_SIZE = 8;
+const RESIZE_HANDLE_THRESHOLD = 50;
+const LEFT_TOP = 0;
+const TOP = 1;
+const RIGHT_TOP = 2;
+const RIGHT = 3;
+const RIGHT_BOTTOM = 4;
+const BOTTOM = 5;
+const LEFT_BOTTOM = 6;
+const LEFT = 7;
+function calcDelta(component, index, point) {
+  // 1. 컴포넌트의 원래 바운드를 가져온다.
+  var {
+    left,
+    top,
+    width,
+    height
+  } = component.bounds;
+
+  // 2. 해당 바운드 인덱스의 이전 값을 가져온다.
+  var x, y;
+  switch (index) {
+    case LEFT_TOP:
+      x = left;
+      y = top;
+      break;
+    case TOP:
+      x = left + width / 2;
+      y = top;
+      break;
+    case RIGHT_TOP:
+      x = left + width;
+      y = top;
+      break;
+    case RIGHT:
+      x = left + width;
+      y = top + height / 2;
+      break;
+    case RIGHT_BOTTOM:
+      x = left + width;
+      y = top + height;
+      break;
+    case BOTTOM:
+      x = left + width / 2;
+      y = top + height;
+      break;
+    case LEFT_BOTTOM:
+      x = left;
+      y = top + height;
+      break;
+    case LEFT:
+      x = left;
+      y = top + height / 2;
+      break;
+  }
+  var old_position = {
+    x,
+    y
+  };
+
+  // 4. 포인트 파라미터를 transcoord 해서 변환된 좌표값을 구한다.
+
+  var new_position = component.transcoordT2S(point.x, point.y);
+
+  // 5. 움직인 거리의 가로 방향 거리, 세로 방향 거리를 구한다.
+  return {
+    dx: new_position.x - old_position.x,
+    dy: new_position.y - old_position.y
+  };
+}
+function resizeComponent(component, index, diagonal, delta_x, delta_y, final) {
+  var {
+    left,
+    top,
+    width,
+    height
+  } = component.bounds;
+  var origin_bounds = {
+    left,
+    top,
+    width,
+    height
+  };
+  switch (index) {
+    case LEFT_TOP:
+      left += delta_x;
+      top += delta_y;
+      width -= delta_x;
+      height -= delta_y;
+      break;
+    case TOP:
+      top += delta_y;
+      height -= delta_y;
+      break;
+    case RIGHT_TOP:
+      top += delta_y;
+      width += delta_x;
+      height -= delta_y;
+      break;
+    case RIGHT:
+      width += delta_x;
+      break;
+    case RIGHT_BOTTOM:
+      width += delta_x;
+      height += delta_y;
+      break;
+    case BOTTOM:
+      height += delta_y;
+      break;
+    case LEFT_BOTTOM:
+      left += delta_x;
+      width -= delta_x;
+      height += delta_y;
+      break;
+    case LEFT:
+      left += delta_x;
+      width -= delta_x;
+      break;
+  }
+
+  /* 최초의 bounds상태로 되돌린 후에, 변량을 적용한다. 여기서 변량은, 최초상태에서의 변화량이기 때문이다. */
+
+  component.mutateBounds(function (bounds) {
+    if (Math.abs(width) <= 0.001) {
+      width = 0.001;
+    }
+    if (Math.abs(height) <= 0.001) {
+      height = 0.001;
+    }
+    return component.adjustResize({
+      left,
+      top,
+      width,
+      height
+    }, origin_bounds, diagonal);
+  }, this);
+
+  // Absolute Container이고, TOP/LEFT의 위치가 바뀌는 경우에는 하위 컴포넌트들의 위치를 재조정해준다.
+  if (component.isContainer() && component.layout.ABSOLUTE && !component.isGroup()) {
+    var dl = origin_bounds.left - left;
+    var dt = origin_bounds.top - top;
+    if (!final) component.components.forEach(component => {
+      component.delta('tx', dl);
+      component.delta('ty', dt);
+    });else component.components.forEach(component => {
+      component.delta('tx', 0);
+      component.delta('ty', 0);
+      component.move({
+        x: dl,
+        y: dt
+      }, false /* relatively - leave relations among components */);
+    });
+    return;
+  }
+
+  // Group의 바운드를 재계산함.
+  var parent = final && component.parent;
+  parent && parent.isGroup() && parent.calculateBounds();
+}
+function getResizeHandles(bounds, scale) {
+  var {
+    left,
+    top,
+    width,
+    height
+  } = bounds;
+  var centerx = left + width / 2;
+  var centery = top + height / 2;
+  var right = left + width;
+  var bottom = top + height;
+  const denseX = width * scale.x > RESIZE_HANDLE_THRESHOLD;
+  const denseY = height * scale.y > RESIZE_HANDLE_THRESHOLD;
+  return [{
+    x: left,
+    y: top
+  }, denseX ? {
+    x: centerx,
+    y: top
+  } : null, {
+    x: right,
+    y: top
+  }, denseY ? {
+    x: right,
+    y: centery
+  } : null, {
+    x: right,
+    y: bottom
+  }, denseX ? {
+    x: centerx,
+    y: bottom
+  } : null, {
+    x: left,
+    y: bottom
+  }, denseY ? {
+    x: left,
+    y: centery
+  } : null];
+}
+class Resizer {
+  constructor(layer) {
+    this.layer = layer;
+  }
+  reset() {
+    // 현재 선택된 리사이즈 핸들의 정보
+    this.active = null;
+  }
+  get selected() {
+    return this.layer.selected;
+  }
+  contains(x, y, component, scale) {
+    if (!component.resizable) return false;
+
+    // 좌표가 바운드 핸들에 포함되어있는지 확인함.
+    getResizeHandles(component.bounds, scale).every((handle, index) => {
+      if (handle && Math.abs(x - handle.x) <= RESIZE_HANDLE_HALF_SIZE / scale.x && Math.abs(y - handle.y) <= RESIZE_HANDLE_HALF_SIZE / scale.y) {
+        // 현재 선택된 리사이즈 핸들의 정보
+        this.active = {
+          component,
+          index
+        };
+      }
+
+      // 찾았으면, 스톱한다.
+      return !this.active;
+    });
+    return !!this.active;
+  }
+  draw(ctx, component, scale) {
+    // Line 같은 경우는 그리지 않는다.
+    if (component.isLine()) return;
+
+    // Bound 박스를 그린다.
+    var {
+      left,
+      top,
+      width,
+      height
+    } = component.bounds;
+    ctx.beginPath();
+    ctx.rect(left - 4 / scale.x, top - 4 / scale.y, width + 8 / scale.x, height + 8 / scale.y);
+    ctx.setLineDash([3 / scale.x, 4 / scale.y]);
+    ctx.lineWidth = 1 / scale.x;
+    ctx.strokeStyle = 'black';
+    ctx.stroke();
+    ctx.setLineDash([]); // reset lineDash
+
+    if (!component.resizable) return;
+
+    // Bound 핸들(Resize Handle)을 그린다.
+    var active = this.active;
+    getResizeHandles(component.bounds, scale).forEach((point, index) => {
+      if (!point) {
+        return;
+      }
+      ctx.beginPath();
+      ctx.rect(point.x - RESIZE_HANDLE_HALF_SIZE / scale.x, point.y - RESIZE_HANDLE_HALF_SIZE / scale.y, RESIZE_HANDLE_FULL_SIZE / scale.x, RESIZE_HANDLE_FULL_SIZE / scale.y);
+      ctx.setLineDash([0, 0]);
+      ctx.strokeStyle = '#656565';
+      ctx.stroke();
+      ctx.fillStyle = '#fff';
+      if (active && active.component === component && active.index === index) {
+        ctx.strokeStyle = '#fa7703';
+        if (active.focus) ctx.fillStyle = '#ffb80c';
+      }
+      ctx.fill();
+      ctx.stroke();
+    });
+  }
+  onmousedown(e) {
+    this.active.focus = true;
+  }
+  ondragstart(e) {
+    var {
+      component
+    } = this.active;
+    this.active.bounds = component.bounds;
+    this.active.boundsList = this.layer.selected.filter(c => c.resizable).map(c => c.bounds);
+  }
+  ondragmove(e) {
+    /* 리사이즈 핸들의 이동을 처리한다. */
+    var {
+      component,
+      index,
+      boundsList,
+      bounds
+    } = this.active;
+    var point = this.layer.transcoordC2S(e.offsetX, e.offsetY);
+
+    /* 최초의 바운드로 되돌려놓고 다시 계산한다. */
+    component.bounds = bounds;
+    var delta = calcDelta(component, index, point);
+    this.layer.selected.filter(c => c.resizable).forEach((c, i) => {
+      /* 최초의 바운드로 되돌려놓고 다시 계산한다. 그룹에 반영은 하지 않는다. */
+      c.bounds = boundsList[i];
+      resizeComponent(c, index, e.shiftKey, delta.dx, delta.dy, false);
+    });
+  }
+  ondragend(e) {
+    /* 리사이즈 핸들의 이동을 처리한다. */
+    var {
+      component,
+      index,
+      boundsList,
+      bounds
+    } = this.active;
+    var point = this.layer.transcoordC2S(e.offsetX, e.offsetY);
+
+    /* 최초의 바운드로 되돌려놓고 다시 계산한다. */
+    component.bounds = bounds;
+    var delta = calcDelta(component, index, point);
+    this.layer.selected.filter(c => c.resizable).forEach((c, i) => {
+      /* 최초의 바운드로 되돌려놓고 다시 계산한다. 그룹에 반영은 하지 않는다. */
+      c.bounds = boundsList[i];
+      resizeComponent(c, index, e.shiftKey, delta.dx, delta.dy, true);
+    });
+
+    /* 커맨더 큐에 넣기만하고, 실행하지는 말라.(이미 실행된 상태이므로) */
+    this.active.component.app.commander.execute(null, false);
+  }
+}
+exports.default = Resizer;
+//# sourceMappingURL=resizer.js.map