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

package/dist/components/geometry/transcoord.js

@@ -0,0 +1,339 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transcoordC2S = transcoordC2S;
+exports.transcoordP2S = transcoordP2S;
+exports.transcoordR = transcoordR;
+exports.transcoordRR = transcoordRR;
+exports.transcoordS2C = transcoordS2C;
+exports.transcoordS2O = transcoordS2O;
+exports.transcoordS2P = transcoordS2P;
+exports.transcoordS2T = transcoordS2T;
+exports.transcoordS2TR = transcoordS2TR;
+exports.transcoordT2P = transcoordT2P;
+exports.transcoordT2S = transcoordT2S;
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+/*
+ * 좌표 변환 API.
+ */
+
+/*
+ * transcoordR은 부모 기준의 좌표를, 자신의 회전각을 감안하여 부모의 원점을 이동시킨 후의 좌표값으로 변환하는 기능.
+ * (기존의 transcoord와 동일함 - R은 Rotation을 의미함.)
+ */
+function transcoordR(x, y, rotatePoint = {
+  x: 0,
+  y: 0
+}, rotation = 0, scale = {
+  x: 1,
+  y: 1
+}) {
+  const cos = Math.cos(-rotation);
+  const sin = Math.sin(-rotation);
+  x -= rotatePoint.x;
+  y -= rotatePoint.y;
+  return {
+    x: (x * cos - y * sin + rotatePoint.x) / scale.x,
+    y: (x * sin + y * cos + rotatePoint.y) / scale.y
+  };
+}
+
+/*
+ * transcoordRR은 자신의 회전각을 감안하여 부모의 원점을 이동시킨 상태의 좌표값을 (반대로 회전시켜서)
+ * 부모 원점 기준의 좌표로 변환하는 기능.
+ * (기존의 reverseTranscoord와 동일함 - RR은 Reverse Rotation을 의미함.)
+ */
+function transcoordRR(x, y, rotatePoint = {
+  x: 0,
+  y: 0
+}, rotation = 0, scale = {
+  x: 1,
+  y: 1
+}) {
+  const cos = Math.cos(rotation);
+  const sin = Math.sin(rotation);
+  x -= rotatePoint.x;
+  y -= rotatePoint.y;
+  return {
+    x: (x * cos - y * sin + rotatePoint.x) * scale.x,
+    y: (x * sin + y * cos + rotatePoint.y) * scale.y
+  };
+}
+
+/*
+ * transcoordP2S는 부모(Parent) 컨테이너 기준의 논리좌표를 현재 컴포넌트(Self) 기준의 논리좌표로 변환한다.
+ */
+function transcoordP2S(x, y, rotatePoint) {
+  // 1. 최상위 루트 컴포넌트이면, 변환하지 않는다.
+  if (!this.parent) return {
+    x,
+    y
+  };
+  const {
+    rotation = 0,
+    scale = {
+      x: 1,
+      y: 1
+    }
+  } = this.state;
+
+  // 2. Canvas를 가진 레이어 모델이면
+  if (this.isLayer()) {
+    const translate = this.state.translate;
+    let point = transcoordR(x, y, translate, rotation, scale);
+    if (translate) {
+      point.x -= translate.x / scale.x;
+      point.y -= translate.y / scale.y;
+    }
+    return point;
+  }
+
+  // 3. 그 외..
+  rotatePoint = rotatePoint || this.rotatePoint;
+  const point = transcoordR(x, y, rotatePoint, rotation, scale);
+
+  // 4. 컴포넌트별 스케일에 대한 처리
+  // TODO 컴포넌트별 스케이 처리가 미진함. 정리할 것.(또는, 지원하지 말것.)
+  return {
+    x: point.x + (rotatePoint.x - rotatePoint.x / scale.x),
+    y: point.y + (rotatePoint.y - rotatePoint.y / scale.y)
+  };
+}
+
+/*
+ * transcoordS2P는 현재 컴포넌트(Self) 기준의 논리좌표를 부모(Parent) 컨테이너 기준의 논리좌표로 변환한다.
+ */
+function transcoordS2P(x, y, rotatePoint) {
+  // 1. 최상위 루트 컴포넌트이면, 변환하지 않는다.
+  if (!this.parent) return {
+    x,
+    y
+  };
+  let {
+    rotation = 0,
+    scale = {
+      x: 1,
+      y: 1
+    }
+  } = this.state;
+
+  // 2. Canvas를 가진 레이어 모델이면
+  if (this.isLayer()) {
+    const translate = this.state.translate;
+    let point = transcoordRR(x, y, undefined, rotation + this._delta.theta, scale);
+    if (translate) {
+      point.x += translate.x;
+      point.y += translate.y;
+    }
+    return point;
+  }
+
+  // 3. 그 외..
+  rotatePoint = rotatePoint || this.rotatePoint;
+  const {
+    theta = 0,
+    tx = 0,
+    ty = 0,
+    sx = 1,
+    sy = 1
+  } = this._delta || {};
+  rotatePoint = {
+    x: rotatePoint.x + tx,
+    y: rotatePoint.y + ty
+  };
+  scale = {
+    x: scale.x * sx,
+    y: scale.y * sy
+  };
+  const point = transcoordRR(x + tx, y + ty, rotatePoint, rotation + theta, scale);
+
+  // 4. 컴포넌트별 스케일에 대한 처리
+  // TODO 컴포넌트별 스케일 처리가 미진함. 정리할 것.(또는, 지원하지 말것.)
+  return {
+    x: point.x - (rotatePoint.x * scale.x - rotatePoint.x),
+    y: point.y - (rotatePoint.y * scale.y - rotatePoint.y)
+  };
+}
+
+/*
+ * transcoordS2TR는 현재 컴포넌트(Self) 기준의 논리좌표를 TOP 모델 컨테이너 기준의 논리좌표로 변환한 후에,
+ * 루트의 회전까지만 감안한다.
+ * 현재 컴포넌트 기준의 논리좌표에 해당하는 포인트가 화면상의 특정 영역에 포함되는지 비교할 때 사용할 수 있다.
+ */
+function transcoordS2TR(x, y, top) {
+  top = top || this.rootModel;
+  const point = this.transcoordS2T(x, y, top);
+  return transcoordRR(point.x, point.y, undefined, (top.get('rotation') || 0) + top._delta.theta);
+}
+
+/*
+ * transcoordS2T는 현재 컴포넌트(Self) 기준의 논리좌표를 TOP 모델 컨테이너 기준의 논리좌표로 변환한다.
+ */
+function transcoordS2T(x, y, top) {
+  // 1. 자신으로부터 TOP 모델 컨테이너까지의 조상 계보를 구한다.
+  // 2. 주어진 좌표에 대해서 자신 컴포넌트의 회전과 스케일을 감안한 리버스를 수행하여 부모 컨테이너의 TOP-LEFT를 원점으로 하는 좌표로 변환한다.
+  // 3. 부모 컨테이너 기준의 좌표로 변환하기 위해서 부모의 바운드의 TOP-LEFT만큼의 시프트를 해준다.
+  // 4. 시프트된 포인트에 대해서 부모 컨테이너의 리버스를 수행한 결과를 TOP 바로 하위까지 반복한다.
+
+  top = top || this.rootModel;
+  const ancestors = [];
+  for (let parent = this.parent; parent && parent !== top; parent = parent.parent) ancestors.push(parent);
+  let point = this.transcoordS2P(x, y);
+  ancestors.forEach(parent => {
+    const {
+      scale
+    } = parent.model;
+    const bounds = parent.bounds;
+    if (scale) {
+      /* TODO 스케일이 있는 경우에 대해서 구현하시오. 아래 로직은 맞지 않음 */
+      const rotatePoint = parent.rotatePoint;
+      point.x += (rotatePoint.x - bounds.left) * scale.x;
+      point.y += (rotatePoint.y - bounds.top) * scale.y;
+    } else {
+      point.x += bounds.left;
+      point.y += bounds.top;
+    }
+    point = parent.transcoordS2P(point.x, point.y);
+  });
+  return point;
+}
+
+/*
+ * transcoordT2P는 TOP 모델 컨테이너 기준의 논리좌표를 부모 컴포넌트(Parent) 기준의 논리좌표로 변환한다.
+ */
+function transcoordT2P(x, y, top) {
+  // 1. 자신으로부터 TOP 모델 컨테이너까지의 조상 계보를 구한다.
+  // 2. TOP 모델 컨테이너의 차상위 조상에 대한 트랜스코드를 수행한다.
+  // 3. 변환된 좌표에 차상위 조상의 TOP-LEFT 좌표 시프트를 수행한다.
+  top = top || this.rootModel;
+  const ancestors = [];
+  for (let parent = this.parent; parent && parent !== top; parent = parent.parent) ancestors.splice(0, 0, parent);
+  let point = {
+    x,
+    y
+  };
+  ancestors.forEach(parent => {
+    const {
+      scale
+    } = parent.model;
+    point = parent.transcoordP2S(point.x, point.y);
+    const bounds = parent.bounds;
+    if (scale) {
+      /* TODO 스케일이 있는 경우에 대해서 구현하시오. 아래 로직은 맞지 않음 */
+      const rotatePoint = parent.rotatePoint;
+      point.x -= (rotatePoint.x - bounds.left) / scale.x;
+      point.y -= (rotatePoint.y - bounds.top) / scale.y;
+    } else {
+      point.x -= bounds.left;
+      point.y -= bounds.top;
+    }
+  });
+  return point;
+}
+
+/*
+ * transcoordT2S는 TOP 모델 컨테이너 기준의 논리좌표를 현재 컴포넌트(Self) 기준의 논리좌표로 변환한다.
+ */
+function transcoordT2S(x, y, top) {
+  // 1. 자신으로부터 TOP 모델 컨테이너까지의 조상 계보를 구한다.
+  // 2. TOP 모델 컨테이너의 차상위 조상에 대한 트랜스코드를 수행한다.
+  // 3. 변환된 좌표에 차상위 조상의 TOP-LEFT 좌표 시프트를 수행한다.
+  // 4. 이 과정을 컴포넌트 자신까지 트랜스코드를 반복한다.
+  const point = this.transcoordT2P(x, y, top);
+  return this.transcoordP2S(point.x, point.y);
+}
+
+/*
+ * transcoordL2L은 현재 컴포넌트(Self) 기준의 논리좌표를 대상 컴포넌트(Other)의 논리좌표로 변환한다.
+ */
+function transcoordS2O(x, y, to) {
+  // 1. 현재컴포넌트의 좌표를 탑모델의 좌표로 변환한다.
+  // 2. 변환된 좌표를 to 컴포넌트의 논리좌표로 변환한다.
+  // TODO 만일 두 컴포넌트가 직계 관계인 경우에는 좀 더 빠른 변환 로직을 찾을 수 있을 것 같다.
+  const top = this.rootModel;
+  const point = this.transcoordS2T(x, y, top);
+  return to.transcoordT2S(point.x, point.y, top);
+}
+
+/*
+ * transcoordC2S은 캔바스의 좌표를 컴포넌트(Self)의 논리좌표로 변환한다.
+ */
+function transcoordC2S(x, y, top) {
+  // 1. 컴포넌트로부터 ROOT 컨테이너까지의 조상 계보를 구한다. (ROOT 컨테이너까지 구하면, TOP 모델(캔바스를 가진)까지 포함된다.)
+  // 2. 루트 컨테이너의 차상위 조상(캔바스를 포함한 TOP 모델)에 대한 트랜스코드를 수행한다.
+  // 3. 변환된 좌표에 transcoordT2S을 수행한다.
+
+  if (!top) {
+    top = this;
+    while (top && !top.isLayer()) top = top.parent;
+  }
+
+  /* 캔바스와 디스플레이의 물리적인 상태를 고려한다. */
+
+  const {
+    translate = {
+      x: 0,
+      y: 0
+    },
+    scale = {
+      x: 1,
+      y: 1
+    },
+    rotation = 0
+  } = top.model;
+  let point = transcoordR(x, y, translate, rotation, scale);
+  if (translate) {
+    point.x -= translate.x / scale.x;
+    point.y -= translate.y / scale.y;
+  }
+
+  /* 논리적인 좌표 변환을 진행한다. */
+
+  if (top === this) return point;
+  return this.transcoordT2S(point.x, point.y, top);
+}
+
+/*
+ * transcoordS2C는 컴포넌트(Self)의 논리좌표를 캔바스의 좌표로 변환한다.
+ */
+function transcoordS2C(x, y, top) {
+  // 1. 자신으로부터 TOP 모델 컨테이너까지의 조상 계보를 구한다.
+  // 2. 변환된 좌표에 transcoordS2T를 수행한다.
+  // 3. 결과 좌표에 대해서 TOP 모델의 transcoordRR 수행한다.
+
+  if (!top) {
+    top = this;
+    while (top && !top.isLayer()) top = top.parent;
+  }
+  let point;
+  if (top !== this) point = this.transcoordS2T(x, y, top);else point = {
+    x,
+    y
+  };
+
+  /* 캔바스와 디스플레이의 물리적인 상태를 고려한다. */
+
+  const {
+    translate = {
+      x: 0,
+      y: 0
+    },
+    rotation = 0,
+    scale = {
+      x: 1,
+      y: 1
+    }
+  } = top.model;
+  point = transcoordRR(point.x, point.y, undefined, rotation + top._delta.theta, scale);
+  if (translate) {
+    point.x += translate.x;
+    point.y += translate.y;
+  }
+  return point;
+}
+//# sourceMappingURL=transcoord.js.map

package/dist/components/geometry/transcoord.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transcoord.js","names":["transcoordR","x","y","rotatePoint","rotation","scale","cos","Math","sin","transcoordRR","transcoordP2S","parent","state","isLayer","translate","point","transcoordS2P","undefined","_delta","theta","tx","ty","sx","sy","transcoordS2TR","top","rootModel","transcoordS2T","get","ancestors","push","forEach","model","bounds","left","transcoordT2P","splice","transcoordT2S","transcoordS2O","to","transcoordC2S","transcoordS2C"],"sources":["../../../src/components/geometry/transcoord.js"],"sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\n/*\n * 좌표 변환 API.\n */\n\n/*\n * transcoordR은 부모 기준의 좌표를, 자신의 회전각을 감안하여 부모의 원점을 이동시킨 후의 좌표값으로 변환하는 기능.\n * (기존의 transcoord와 동일함 - R은 Rotation을 의미함.)\n */\nexport function transcoordR(x, y, rotatePoint = { x: 0, y: 0 }, rotation = 0, scale = { x: 1, y: 1 }) {\n  const cos = Math.cos(-rotation)\n  const sin = Math.sin(-rotation)\n  x -= rotatePoint.x\n  y -= rotatePoint.y\n\n  return {\n    x: (x * cos - y * sin + rotatePoint.x) / scale.x,\n    y: (x * sin + y * cos + rotatePoint.y) / scale.y\n  }\n}\n\n/*\n * transcoordRR은 자신의 회전각을 감안하여 부모의 원점을 이동시킨 상태의 좌표값을 (반대로 회전시켜서)\n * 부모 원점 기준의 좌표로 변환하는 기능.\n * (기존의 reverseTranscoord와 동일함 - RR은 Reverse Rotation을 의미함.)\n */\nexport function transcoordRR(x, y, rotatePoint = { x: 0, y: 0 }, rotation = 0, scale = { x: 1, y: 1 }) {\n  const cos = Math.cos(rotation)\n  const sin = Math.sin(rotation)\n  x -= rotatePoint.x\n  y -= rotatePoint.y\n\n  return {\n    x: (x * cos - y * sin + rotatePoint.x) * scale.x,\n    y: (x * sin + y * cos + rotatePoint.y) * scale.y\n  }\n}\n\n/*\n * transcoordP2S는 부모(Parent) 컨테이너 기준의 논리좌표를 현재 컴포넌트(Self) 기준의 논리좌표로 변환한다.\n */\nexport function transcoordP2S(x, y, rotatePoint) {\n  // 1. 최상위 루트 컴포넌트이면, 변환하지 않는다.\n  if (!this.parent) return { x, y }\n\n  const { rotation = 0, scale = { x: 1, y: 1 } } = this.state\n\n  // 2. Canvas를 가진 레이어 모델이면\n  if (this.isLayer()) {\n    const translate = this.state.translate\n\n    let point = transcoordR(x, y, translate, rotation, scale)\n\n    if (translate) {\n      point.x -= translate.x / scale.x\n      point.y -= translate.y / scale.y\n    }\n\n    return point\n  }\n\n  // 3. 그 외..\n  rotatePoint = rotatePoint || this.rotatePoint\n\n  const point = transcoordR(x, y, rotatePoint, rotation, scale)\n\n  // 4. 컴포넌트별 스케일에 대한 처리\n  // TODO 컴포넌트별 스케이 처리가 미진함. 정리할 것.(또는, 지원하지 말것.)\n  return {\n    x: point.x + (rotatePoint.x - rotatePoint.x / scale.x),\n    y: point.y + (rotatePoint.y - rotatePoint.y / scale.y)\n  }\n}\n\n/*\n * transcoordS2P는 현재 컴포넌트(Self) 기준의 논리좌표를 부모(Parent) 컨테이너 기준의 논리좌표로 변환한다.\n */\nexport function transcoordS2P(x, y, rotatePoint) {\n  // 1. 최상위 루트 컴포넌트이면, 변환하지 않는다.\n  if (!this.parent) return { x, y }\n\n  let { rotation = 0, scale = { x: 1, y: 1 } } = this.state\n\n  // 2. Canvas를 가진 레이어 모델이면\n  if (this.isLayer()) {\n    const translate = this.state.translate\n\n    let point = transcoordRR(x, y, undefined, rotation + this._delta.theta, scale)\n\n    if (translate) {\n      point.x += translate.x\n      point.y += translate.y\n    }\n\n    return point\n  }\n\n  // 3. 그 외..\n  rotatePoint = rotatePoint || this.rotatePoint\n\n  const { theta = 0, tx = 0, ty = 0, sx = 1, sy = 1 } = this._delta || {}\n\n  rotatePoint = {\n    x: rotatePoint.x + tx,\n    y: rotatePoint.y + ty\n  }\n\n  scale = {\n    x: scale.x * sx,\n    y: scale.y * sy\n  }\n\n  const point = transcoordRR(x + tx, y + ty, rotatePoint, rotation + theta, scale)\n\n  // 4. 컴포넌트별 스케일에 대한 처리\n  // TODO 컴포넌트별 스케일 처리가 미진함. 정리할 것.(또는, 지원하지 말것.)\n  return {\n    x: point.x - (rotatePoint.x * scale.x - rotatePoint.x),\n    y: point.y - (rotatePoint.y * scale.y - rotatePoint.y)\n  }\n}\n\n/*\n * transcoordS2TR는 현재 컴포넌트(Self) 기준의 논리좌표를 TOP 모델 컨테이너 기준의 논리좌표로 변환한 후에,\n * 루트의 회전까지만 감안한다.\n * 현재 컴포넌트 기준의 논리좌표에 해당하는 포인트가 화면상의 특정 영역에 포함되는지 비교할 때 사용할 수 있다.\n */\nexport function transcoordS2TR(x, y, top) {\n  top = top || this.rootModel\n  const point = this.transcoordS2T(x, y, top)\n  return transcoordRR(point.x, point.y, undefined, (top.get('rotation') || 0) + top._delta.theta)\n}\n\n/*\n * transcoordS2T는 현재 컴포넌트(Self) 기준의 논리좌표를 TOP 모델 컨테이너 기준의 논리좌표로 변환한다.\n */\nexport function transcoordS2T(x, y, top) {\n  // 1. 자신으로부터 TOP 모델 컨테이너까지의 조상 계보를 구한다.\n  // 2. 주어진 좌표에 대해서 자신 컴포넌트의 회전과 스케일을 감안한 리버스를 수행하여 부모 컨테이너의 TOP-LEFT를 원점으로 하는 좌표로 변환한다.\n  // 3. 부모 컨테이너 기준의 좌표로 변환하기 위해서 부모의 바운드의 TOP-LEFT만큼의 시프트를 해준다.\n  // 4. 시프트된 포인트에 대해서 부모 컨테이너의 리버스를 수행한 결과를 TOP 바로 하위까지 반복한다.\n\n  top = top || this.rootModel\n\n  const ancestors = []\n\n  for (let parent = this.parent; parent && parent !== top; parent = parent.parent) ancestors.push(parent)\n\n  let point = this.transcoordS2P(x, y)\n\n  ancestors.forEach(parent => {\n    const { scale } = parent.model\n\n    const bounds = parent.bounds\n\n    if (scale) {\n      /* TODO 스케일이 있는 경우에 대해서 구현하시오. 아래 로직은 맞지 않음 */\n      const rotatePoint = parent.rotatePoint\n\n      point.x += (rotatePoint.x - bounds.left) * scale.x\n      point.y += (rotatePoint.y - bounds.top) * scale.y\n    } else {\n      point.x += bounds.left\n      point.y += bounds.top\n    }\n\n    point = parent.transcoordS2P(point.x, point.y)\n  })\n\n  return point\n}\n\n/*\n * transcoordT2P는 TOP 모델 컨테이너 기준의 논리좌표를 부모 컴포넌트(Parent) 기준의 논리좌표로 변환한다.\n */\nexport function transcoordT2P(x, y, top) {\n  // 1. 자신으로부터 TOP 모델 컨테이너까지의 조상 계보를 구한다.\n  // 2. TOP 모델 컨테이너의 차상위 조상에 대한 트랜스코드를 수행한다.\n  // 3. 변환된 좌표에 차상위 조상의 TOP-LEFT 좌표 시프트를 수행한다.\n  top = top || this.rootModel\n\n  const ancestors = []\n\n  for (let parent = this.parent; parent && parent !== top; parent = parent.parent) ancestors.splice(0, 0, parent)\n\n  let point = { x, y }\n\n  ancestors.forEach(parent => {\n    const { scale } = parent.model\n\n    point = parent.transcoordP2S(point.x, point.y)\n\n    const bounds = parent.bounds\n\n    if (scale) {\n      /* TODO 스케일이 있는 경우에 대해서 구현하시오. 아래 로직은 맞지 않음 */\n      const rotatePoint = parent.rotatePoint\n\n      point.x -= (rotatePoint.x - bounds.left) / scale.x\n      point.y -= (rotatePoint.y - bounds.top) / scale.y\n    } else {\n      point.x -= bounds.left\n      point.y -= bounds.top\n    }\n  })\n\n  return point\n}\n\n/*\n * transcoordT2S는 TOP 모델 컨테이너 기준의 논리좌표를 현재 컴포넌트(Self) 기준의 논리좌표로 변환한다.\n */\nexport function transcoordT2S(x, y, top) {\n  // 1. 자신으로부터 TOP 모델 컨테이너까지의 조상 계보를 구한다.\n  // 2. TOP 모델 컨테이너의 차상위 조상에 대한 트랜스코드를 수행한다.\n  // 3. 변환된 좌표에 차상위 조상의 TOP-LEFT 좌표 시프트를 수행한다.\n  // 4. 이 과정을 컴포넌트 자신까지 트랜스코드를 반복한다.\n  const point = this.transcoordT2P(x, y, top)\n\n  return this.transcoordP2S(point.x, point.y)\n}\n\n/*\n * transcoordL2L은 현재 컴포넌트(Self) 기준의 논리좌표를 대상 컴포넌트(Other)의 논리좌표로 변환한다.\n */\nexport function transcoordS2O(x, y, to) {\n  // 1. 현재컴포넌트의 좌표를 탑모델의 좌표로 변환한다.\n  // 2. 변환된 좌표를 to 컴포넌트의 논리좌표로 변환한다.\n  // TODO 만일 두 컴포넌트가 직계 관계인 경우에는 좀 더 빠른 변환 로직을 찾을 수 있을 것 같다.\n  const top = this.rootModel\n\n  const point = this.transcoordS2T(x, y, top)\n  return to.transcoordT2S(point.x, point.y, top)\n}\n\n/*\n * transcoordC2S은 캔바스의 좌표를 컴포넌트(Self)의 논리좌표로 변환한다.\n */\nexport function transcoordC2S(x, y, top) {\n  // 1. 컴포넌트로부터 ROOT 컨테이너까지의 조상 계보를 구한다. (ROOT 컨테이너까지 구하면, TOP 모델(캔바스를 가진)까지 포함된다.)\n  // 2. 루트 컨테이너의 차상위 조상(캔바스를 포함한 TOP 모델)에 대한 트랜스코드를 수행한다.\n  // 3. 변환된 좌표에 transcoordT2S을 수행한다.\n\n  if (!top) {\n    top = this\n    while (top && !top.isLayer()) top = top.parent\n  }\n\n  /* 캔바스와 디스플레이의 물리적인 상태를 고려한다. */\n\n  const { translate = { x: 0, y: 0 }, scale = { x: 1, y: 1 }, rotation = 0 } = top.model\n\n  let point = transcoordR(x, y, translate, rotation, scale)\n\n  if (translate) {\n    point.x -= translate.x / scale.x\n    point.y -= translate.y / scale.y\n  }\n\n  /* 논리적인 좌표 변환을 진행한다. */\n\n  if (top === this) return point\n\n  return this.transcoordT2S(point.x, point.y, top)\n}\n\n/*\n * transcoordS2C는 컴포넌트(Self)의 논리좌표를 캔바스의 좌표로 변환한다.\n */\nexport function transcoordS2C(x, y, top) {\n  // 1. 자신으로부터 TOP 모델 컨테이너까지의 조상 계보를 구한다.\n  // 2. 변환된 좌표에 transcoordS2T를 수행한다.\n  // 3. 결과 좌표에 대해서 TOP 모델의 transcoordRR 수행한다.\n\n  if (!top) {\n    top = this\n    while (top && !top.isLayer()) top = top.parent\n  }\n\n  let point\n  if (top !== this) point = this.transcoordS2T(x, y, top)\n  else point = { x, y }\n\n  /* 캔바스와 디스플레이의 물리적인 상태를 고려한다. */\n\n  const { translate = { x: 0, y: 0 }, rotation = 0, scale = { x: 1, y: 1 } } = top.model\n\n  point = transcoordRR(point.x, point.y, undefined, rotation + top._delta.theta, scale)\n\n  if (translate) {\n    point.x += translate.x\n    point.y += translate.y\n  }\n\n  return point\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/geometry/union.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = union;
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+/* bounds 들의 총 합을 구하는 함수 */
+
+function union(boundsList) {
+  var left, top, right, bottom;
+  boundsList.forEach(bounds => {
+    if (left === undefined) {
+      left = bounds.left;
+      top = bounds.top;
+      right = bounds.left + bounds.width;
+      bottom = bounds.top + bounds.height;
+    } else {
+      left = Math.min(bounds.left, left);
+      top = Math.min(bounds.top, top);
+      right = Math.max(bounds.left + bounds.width, right);
+      bottom = Math.max(bounds.top + bounds.height, bottom);
+    }
+  });
+  return {
+    left,
+    top,
+    width: right - left,
+    height: bottom - top
+  };
+}
+//# sourceMappingURL=union.js.map

package/dist/components/geometry/union.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"union.js","names":["union","boundsList","left","top","right","bottom","forEach","bounds","undefined","width","height","Math","min","max"],"sources":["../../../src/components/geometry/union.js"],"sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\n/* bounds 들의 총 합을 구하는 함수 */\n\nexport default function union(boundsList) {\n  var left, top, right, bottom\n\n  boundsList.forEach(bounds => {\n    if (left === undefined) {\n      left = bounds.left\n      top = bounds.top\n      right = bounds.left + bounds.width\n      bottom = bounds.top + bounds.height\n    } else {\n      left = Math.min(bounds.left, left)\n      top = Math.min(bounds.top, top)\n      right = Math.max(bounds.left + bounds.width, right)\n      bottom = Math.max(bounds.top + bounds.height, bottom)\n    }\n  })\n\n  return {\n    left,\n    top,\n    width: right - left,\n    height: bottom - top\n  }\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;;AAEA;;AAEe,SAASA,KAAKA,CAACC,UAAU,EAAE;EACxC,IAAIC,IAAI,EAAEC,GAAG,EAAEC,KAAK,EAAEC,MAAM;EAE5BJ,UAAU,CAACK,OAAO,CAACC,MAAM,IAAI;IAC3B,IAAIL,IAAI,KAAKM,SAAS,EAAE;MACtBN,IAAI,GAAGK,MAAM,CAACL,IAAI;MAClBC,GAAG,GAAGI,MAAM,CAACJ,GAAG;MAChBC,KAAK,GAAGG,MAAM,CAACL,IAAI,GAAGK,MAAM,CAACE,KAAK;MAClCJ,MAAM,GAAGE,MAAM,CAACJ,GAAG,GAAGI,MAAM,CAACG,MAAM;IACrC,CAAC,MAAM;MACLR,IAAI,GAAGS,IAAI,CAACC,GAAG,CAACL,MAAM,CAACL,IAAI,EAAEA,IAAI,CAAC;MAClCC,GAAG,GAAGQ,IAAI,CAACC,GAAG,CAACL,MAAM,CAACJ,GAAG,EAAEA,GAAG,CAAC;MAC/BC,KAAK,GAAGO,IAAI,CAACE,GAAG,CAACN,MAAM,CAACL,IAAI,GAAGK,MAAM,CAACE,KAAK,EAAEL,KAAK,CAAC;MACnDC,MAAM,GAAGM,IAAI,CAACE,GAAG,CAACN,MAAM,CAACJ,GAAG,GAAGI,MAAM,CAACG,MAAM,EAAEL,MAAM,CAAC;IACvD;EACF,CAAC,CAAC;EAEF,OAAO;IACLH,IAAI;IACJC,GAAG;IACHM,KAAK,EAAEL,KAAK,GAAGF,IAAI;IACnBQ,MAAM,EAAEL,MAAM,GAAGF;EACnB,CAAC;AACH","ignoreList":[]}

package/dist/components/gif-view.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _component = _interopRequireDefault(require("./component.js"));
+var _htmlOverlayElement = _interopRequireDefault(require("./html-overlay-element.js"));
+var _superGif = require("@wizpanda/super-gif");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [{
+    type: 'image-selector',
+    label: 'src',
+    name: 'src'
+  }, {
+    type: 'checkbox',
+    label: 'play',
+    name: 'play'
+  }],
+  'value-property': 'src',
+  help: 'scene/component/gif-view'
+};
+const NOIMAGE_DATA_URI = 'data:image/gif;base64,R0lGODlhYABIAPcAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKio+Pj5iYmKCgoKampqurq66urrCwsLGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrOzs7S0tLa2tre3t7m5ubu7u7+/v8DAwMHBwcPDw8XFxcfHx8vLy8/Pz9LS0tXV1dfX193d3eTk5Onp6fj4+Pz8/P7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v///////////////////////////////////////////////////////////////////////////////yH5BAkAAPUAIf47R2VuZXJhdGVkIGJ5IGpzZ2lmIChodHRwczovL2dpdGh1Yi5jb20vYW50aW1hdHRlcjE1L2pzZ2lmLykALAAAAABgAEgAAAj+AGcJHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmR9VKqXMmypcuXMGPKnJkSIs2bOHPqZGlzp8+fQOv1DEq0KMyhRpMmRaq0KVCmTqPmhCq1qkyqLrFRSyYwGTVsVo1iZXmNa8Fk18ISHasSm1mDycCq/ck2JTWF1ObSfTjz7cFken3WFbow8M7BDA3rHOwXruKpfGXeTZg3qDVrUge7RRg3KLZjx+Q2HVyvLNy0QaMJjBaVdD2tZr2K/mmNIObRkR+n9AsYt0Pddg1WXppb8bWDx1CLLW74GcJnSl3TtDY8Zu2Et4tKl7n52eyWnxXvhl7+26jqrspbnlfIWjtz2gWPZV95neH8veU9NxZYfbfD3kFt99J6Bnmn0mQO9XfYezrVxxlmx0GUXIAM4hSeffsxBN1TFd5E4Ef3QZbfTg6CNJ5gHXJ3TEntLThiTh+KFCJNAqZU4kgAitjQTheepOBMNcZI0oQ6JpbTjSZtiNN2PZ400IxHpdiSc07G911M0iFZZYtAStnWilUeBGVLrlEZpmM0elmPlmfO8iOZXl4DZpsGEYmll2bSWWCXLwJXVY1+urhjoGEBSuiSah6K36CKtpZoo4s9CimielZq6aWYZqrpppx26umnoIZ6UkAAOw==';
+class GifView extends _htmlOverlayElement.default {
+  async oncreate_element(div) {
+    var {
+      src,
+      play
+    } = this.state;
+    this.onchangesrc(src);
+    this.onchangeplay(play);
+  }
+  buildImg() {
+    /* clear first */
+    var div = this.element;
+    div.innerHTML = '';
+    var gif = document.createElement('img');
+    gif.style.width = '100%';
+    gif.style.height = '100%';
+    div.appendChild(gif);
+    return gif;
+  }
+  onchange(after, before) {
+    super.onchange(after, before);
+    'src' in after && this.onchangesrc(after.src);
+    'play' in after && this.onchangeplay(after.play);
+  }
+  setElementProperties(div) {}
+  onchangeplay(play) {
+    var superGif = this._superGif;
+    if (!superGif || !superGif.isReady()) {
+      return;
+    }
+    if (play) {
+      superGif.play();
+    } else {
+      superGif.pause();
+    }
+  }
+  onchangesrc(src) {
+    var gif = this.buildImg();
+    if (!src) {
+      src = NOIMAGE_DATA_URI;
+    }
+    gif.src = src;
+    gif.setAttribute('rel:animated_src', src);
+    gif.setAttribute('rel:auto_play', 0);
+    this._superGif = new _superGif.SuperGif(gif, {
+      autoPlay: false /* Without this setting, the first play's framerate is too fast. */
+    });
+    this._superGif.init();
+    for (const child of this.element.children) {
+      child.style.width = '100%';
+      child.style.height = '100%';
+    }
+    var canvas = this._superGif.getCanvas();
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    this._superGif.load(() => {
+      setTimeout(() => {
+        this._superGif.moveTo(0);
+
+        /*
+         * FIXME. this.play 는 컴포넌트의 getState()를 통해서 가져오게 되는데, 체크박스의 경우 문제가 있는 것 같다.
+         * 문제 해결 후 this.get("play") => this.play로 수정할 것.
+         */
+        this.play && this._superGif.play();
+      }, 100);
+    });
+  }
+  ondropfile(transfered, files) {
+    for (let i = 0; i < transfered.length; i++) {
+      if (/\.gif$/.test(transfered[i].name)) {
+        this.src = files[i];
+        return;
+      }
+    }
+  }
+  get src() {
+    return this.getState('src');
+  }
+  set src(src) {
+    this.set('src', src);
+  }
+  get play() {
+    return this.getState('play');
+  }
+  set play(play) {
+    this.setState('play', play);
+  }
+  get nature() {
+    return NATURE;
+  }
+  get tagName() {
+    return 'div';
+  }
+}
+exports.default = GifView;
+_component.default.register('gif-view', GifView);
+//# sourceMappingURL=gif-view.js.map

package/dist/components/gif-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gif-view.js","names":["_component","_interopRequireDefault","require","_htmlOverlayElement","_superGif","e","__esModule","default","NATURE","mutable","resizable","rotatable","properties","type","label","name","help","NOIMAGE_DATA_URI","GifView","HTMLOverlayElement","oncreate_element","div","src","play","state","onchangesrc","onchangeplay","buildImg","element","innerHTML","gif","document","createElement","style","width","height","appendChild","onchange","after","before","setElementProperties","superGif","isReady","pause","setAttribute","SuperGif","autoPlay","init","child","children","canvas","getCanvas","load","setTimeout","moveTo","ondropfile","transfered","files","i","length","test","getState","set","setState","nature","tagName","exports","Component","register"],"sources":["../../src/components/gif-view.js"],"sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'image-selector',\n      label: 'src',\n      name: 'src'\n    },\n    {\n      type: 'checkbox',\n      label: 'play',\n      name: 'play'\n    }\n  ],\n  'value-property': 'src',\n  help: 'scene/component/gif-view'\n}\n\nconst NOIMAGE_DATA_URI =\n  'data:image/gif;base64,R0lGODlhYABIAPcAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKio+Pj5iYmKCgoKampqurq66urrCwsLGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrOzs7S0tLa2tre3t7m5ubu7u7+/v8DAwMHBwcPDw8XFxcfHx8vLy8/Pz9LS0tXV1dfX193d3eTk5Onp6fj4+Pz8/P7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v///////////////////////////////////////////////////////////////////////////////yH5BAkAAPUAIf47R2VuZXJhdGVkIGJ5IGpzZ2lmIChodHRwczovL2dpdGh1Yi5jb20vYW50aW1hdHRlcjE1L2pzZ2lmLykALAAAAABgAEgAAAj+AGcJHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmR9VKqXMmypcuXMGPKnJkSIs2bOHPqZGlzp8+fQOv1DEq0KMyhRpMmRaq0KVCmTqPmhCq1qkyqLrFRSyYwGTVsVo1iZXmNa8Fk18ISHasSm1mDycCq/ck2JTWF1ObSfTjz7cFken3WFbow8M7BDA3rHOwXruKpfGXeTZg3qDVrUge7RRg3KLZjx+Q2HVyvLNy0QaMJjBaVdD2tZr2K/mmNIObRkR+n9AsYt0Pddg1WXppb8bWDx1CLLW74GcJnSl3TtDY8Zu2Et4tKl7n52eyWnxXvhl7+26jqrspbnlfIWjtz2gWPZV95neH8veU9NxZYfbfD3kFt99J6Bnmn0mQO9XfYezrVxxlmx0GUXIAM4hSeffsxBN1TFd5E4Ef3QZbfTg6CNJ5gHXJ3TEntLThiTh+KFCJNAqZU4kgAitjQTheepOBMNcZI0oQ6JpbTjSZtiNN2PZ400IxHpdiSc07G911M0iFZZYtAStnWilUeBGVLrlEZpmM0elmPlmfO8iOZXl4DZpsGEYmll2bSWWCXLwJXVY1+urhjoGEBSuiSah6K36CKtpZoo4s9CimielZq6aWYZqrpppx26umnoIZ6UkAAOw=='\n\nimport Component from './component.js'\nimport HTMLOverlayElement from './html-overlay-element.js'\n\nimport { SuperGif } from '@wizpanda/super-gif'\n\nexport default class GifView extends HTMLOverlayElement {\n  async oncreate_element(div) {\n    var { src, play } = this.state\n\n    this.onchangesrc(src)\n    this.onchangeplay(play)\n  }\n\n  buildImg() {\n    /* clear first */\n    var div = this.element\n    div.innerHTML = ''\n\n    var gif = document.createElement('img')\n    gif.style.width = '100%'\n    gif.style.height = '100%'\n\n    div.appendChild(gif)\n\n    return gif\n  }\n\n  onchange(after, before) {\n    super.onchange(after, before)\n\n    'src' in after && this.onchangesrc(after.src)\n    'play' in after && this.onchangeplay(after.play)\n  }\n\n  setElementProperties(div) {}\n\n  onchangeplay(play) {\n    var superGif = this._superGif\n\n    if (!superGif || !superGif.isReady()) {\n      return\n    }\n\n    if (play) {\n      superGif.play()\n    } else {\n      superGif.pause()\n    }\n  }\n\n  onchangesrc(src) {\n    var gif = this.buildImg()\n\n    if (!src) {\n      src = NOIMAGE_DATA_URI\n    }\n\n    gif.src = src\n    gif.setAttribute('rel:animated_src', src)\n    gif.setAttribute('rel:auto_play', 0)\n\n    this._superGif = new SuperGif(gif, {\n      autoPlay: false /* Without this setting, the first play's framerate is too fast. */\n    })\n\n    this._superGif.init()\n\n    for (const child of this.element.children) {\n      child.style.width = '100%'\n      child.style.height = '100%'\n    }\n\n    var canvas = this._superGif.getCanvas()\n    canvas.style.width = '100%'\n    canvas.style.height = '100%'\n\n    this._superGif.load(() => {\n      setTimeout(() => {\n        this._superGif.moveTo(0)\n\n        /*\n         * FIXME. this.play 는 컴포넌트의 getState()를 통해서 가져오게 되는데, 체크박스의 경우 문제가 있는 것 같다.\n         * 문제 해결 후 this.get(\"play\") => this.play로 수정할 것.\n         */\n        this.play && this._superGif.play()\n      }, 100)\n    })\n  }\n\n  ondropfile(transfered, files) {\n    for (let i = 0; i < transfered.length; i++) {\n      if (/\\.gif$/.test(transfered[i].name)) {\n        this.src = files[i]\n        return\n      }\n    }\n  }\n\n  get src() {\n    return this.getState('src')\n  }\n\n  set src(src) {\n    this.set('src', src)\n  }\n\n  get play() {\n    return this.getState('play')\n  }\n\n  set play(play) {\n    this.setState('play', play)\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  get tagName() {\n    return 'div'\n  }\n}\n\nComponent.register('gif-view', GifView)\n"],"mappings":"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","ignoreList":[]}