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

package/dist/components/global-ref.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _component = _interopRequireDefault(require("./component.js"));
+var _htmlOverlayContainer = _interopRequireDefault(require("./html-overlay-container.js"));
+var _logger = require("../core/logger.js");
+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: 'board-selector',
+    label: 'scene-number',
+    name: 'ref',
+    placeholder: 'SCENE-1'
+  }, {
+    type: 'number',
+    label: 'round',
+    name: 'round',
+    property: {
+      min: 0
+    }
+  }, {
+    type: 'select',
+    label: 'fit',
+    name: 'fit',
+    property: {
+      options: ['', 'both', 'ratio', 'width', 'height', 'none']
+    }
+  }, {
+    type: 'select',
+    label: 'mode',
+    name: 'mode',
+    property: {
+      options: ['view', 'interaction']
+    }
+  }],
+  'value-property': 'ref',
+  help: 'scene/component/global-ref'
+};
+class GlobalRef extends _htmlOverlayContainer.default {
+  dispose() {
+    this._releaseRef();
+    super.dispose();
+  }
+  get nature() {
+    return NATURE;
+  }
+  get hasTextProperty() {
+    return false;
+  }
+  get tagName() {
+    return 'div';
+  }
+  setElementProperties(element) {
+    var {
+      mode = 'view',
+      round = 0
+    } = this.state;
+    if (mode == 'view') {
+      element.style.pointerEvents = 'none';
+    } else {
+      element.style.pointerEvents = 'inherit';
+    }
+    element.style.borderRadius = round + 'px';
+  }
+  ready() {
+    super.ready();
+    this.fetchRef();
+  }
+  reposition() {
+    if (!this.element) return;
+    super.reposition();
+
+    /* 컴포넌트 자신의 bound가 변화했다면, reference 를 다시 맞춘다. */
+    let oldBounds = this._element_bounds;
+    let {
+      offsetWidth,
+      offsetHeight
+    } = this.element;
+    this._element_bounds = {
+      offsetWidth,
+      offsetHeight
+    };
+    if (oldBounds && oldBounds.offsetWidth == offsetWidth && oldBounds.offsetHeight == offsetHeight) {
+      return;
+    }
+    if (this.ref && this.root.target_element) {
+      let {
+        fit = 'ratio'
+      } = this.state;
+      this.ref.fit(fit);
+    }
+  }
+  async fetchRef() {
+    this._releaseRef();
+    var {
+      ref,
+      fit = 'ratio'
+    } = this.state;
+    if (!ref) return;
+    var provider = this.app.refProvider;
+    if (provider && ref) {
+      try {
+        this.__ref = await provider.get(ref, true);
+        this.__ref.target = this.element;
+        this.__ref.fit(fit);
+        this.__ref.data = this.data;
+      } catch (e) {
+        (0, _logger.error)(e);
+      }
+    }
+  }
+  get ref() {
+    return this.__ref;
+  }
+  set ref(ref) {
+    this.setState('ref', ref);
+  }
+  _releaseRef() {
+    if (this.__ref && this.__ref.release) {
+      this.__ref.release();
+    }
+    delete this.__ref;
+  }
+  onchange(after, before, hint) {
+    super.onchange(after, before, hint);
+    'ref' in after && this.fetchRef();
+    if ('fit' in after && this.ref) {
+      requestAnimationFrame(() => {
+        let {
+          fit
+        } = this.state;
+        this.ref.fit(fit);
+      });
+    }
+    if ('data' in after && this.ref) {
+      requestAnimationFrame(() => {
+        this.ref.data = after.data;
+      });
+    }
+  }
+}
+exports.default = GlobalRef;
+_component.default.register('global-ref', GlobalRef);
+//# sourceMappingURL=global-ref.js.map

package/dist/components/global-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-ref.js","names":["_component","_interopRequireDefault","require","_htmlOverlayContainer","_logger","e","__esModule","default","NATURE","mutable","resizable","rotatable","properties","type","label","name","placeholder","property","min","options","help","GlobalRef","HTMLOverlayContainer","dispose","_releaseRef","nature","hasTextProperty","tagName","setElementProperties","element","mode","round","state","style","pointerEvents","borderRadius","ready","fetchRef","reposition","oldBounds","_element_bounds","offsetWidth","offsetHeight","ref","root","target_element","fit","provider","app","refProvider","__ref","get","target","data","error","setState","release","onchange","after","before","hint","requestAnimationFrame","exports","Component","register"],"sources":["../../src/components/global-ref.js"],"sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport Component from './component.js'\nimport HTMLOverlayContainer from './html-overlay-container.js'\nimport { error } from '../core/logger.js'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'board-selector',\n      label: 'scene-number',\n      name: 'ref',\n      placeholder: 'SCENE-1'\n    },\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0\n      }\n    },\n    {\n      type: 'select',\n      label: 'fit',\n      name: 'fit',\n      property: {\n        options: ['', 'both', 'ratio', 'width', 'height', 'none']\n      }\n    },\n    {\n      type: 'select',\n      label: 'mode',\n      name: 'mode',\n      property: {\n        options: ['view', 'interaction']\n      }\n    }\n  ],\n  'value-property': 'ref',\n  help: 'scene/component/global-ref'\n}\n\nexport default class GlobalRef extends HTMLOverlayContainer {\n  dispose() {\n    this._releaseRef()\n    super.dispose()\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  get hasTextProperty() {\n    return false\n  }\n\n  get tagName() {\n    return 'div'\n  }\n\n  setElementProperties(element) {\n    var { mode = 'view', round = 0 } = this.state\n\n    if (mode == 'view') {\n      element.style.pointerEvents = 'none'\n    } else {\n      element.style.pointerEvents = 'inherit'\n    }\n\n    element.style.borderRadius = round + 'px'\n  }\n\n  ready() {\n    super.ready()\n    this.fetchRef()\n  }\n\n  reposition() {\n    if (!this.element) return\n\n    super.reposition()\n\n    /* 컴포넌트 자신의 bound가 변화했다면, reference 를 다시 맞춘다. */\n    let oldBounds = this._element_bounds\n    let { offsetWidth, offsetHeight } = this.element\n    this._element_bounds = { offsetWidth, offsetHeight }\n\n    if (oldBounds && oldBounds.offsetWidth == offsetWidth && oldBounds.offsetHeight == offsetHeight) {\n      return\n    }\n\n    if (this.ref && this.root.target_element) {\n      let { fit = 'ratio' } = this.state\n\n      this.ref.fit(fit)\n    }\n  }\n\n  async fetchRef() {\n    this._releaseRef()\n\n    var { ref, fit = 'ratio' } = this.state\n\n    if (!ref) return\n\n    var provider = this.app.refProvider\n\n    if (provider && ref) {\n      try {\n        this.__ref = await provider.get(ref, true)\n        this.__ref.target = this.element\n        this.__ref.fit(fit)\n        this.__ref.data = this.data\n      } catch (e) {\n        error(e)\n      }\n    }\n  }\n\n  get ref() {\n    return this.__ref\n  }\n\n  set ref(ref) {\n    this.setState('ref', ref)\n  }\n\n  _releaseRef() {\n    if (this.__ref && this.__ref.release) {\n      this.__ref.release()\n    }\n    delete this.__ref\n  }\n\n  onchange(after, before, hint) {\n    super.onchange(after, before, hint)\n\n    'ref' in after && this.fetchRef()\n    if ('fit' in after && this.ref) {\n      requestAnimationFrame(() => {\n        let { fit } = this.state\n        this.ref.fit(fit)\n      })\n    }\n\n    if ('data' in after && this.ref) {\n      requestAnimationFrame(() => {\n        this.ref.data = after.data\n      })\n    }\n  }\n}\n\nComponent.register('global-ref', GlobalRef)\n"],"mappings":"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","ignoreList":[]}

package/dist/components/group.js

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _container = _interopRequireDefault(require("./container.js"));
+var _component = _interopRequireDefault(require("./component.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+const GROUP_PROPS = ['refid', 'left', 'top', 'width', 'height', 'rotation', 'animation'];
+class Group extends _container.default {
+  isGroup() {
+    return true;
+  }
+
+  /*
+   * 컴포넌트의 모델 속성값을 가져오는 메쏘드.
+   */
+  get(property) {
+    return this._model[property];
+  }
+
+  /*
+   * 컴포넌트의 모델 속성값을 바꾸는 메쏘드. 그룹은 5개의 속성만을 가진다.
+   *
+   * - 하나의 속성을 변경하는 경우.
+   *  component.set('top', 10)
+   * - 여러개의 속성을 변경하는 경우.
+   *  component.set({top:10, left:50})
+   */
+
+  set(props, propval) {
+    if (typeof props === 'string') return this.set({
+      [props]: propval
+    });
+    var filtered = GROUP_PROPS.reduce((filtered, prop) => {
+      if (props.hasOwnProperty(prop)) filtered[prop] = props[prop];
+      return filtered;
+    }, {});
+    return super.set(filtered);
+  }
+  capture(x, y, except) {
+    var captured = super.capture(x, y, except);
+
+    // 그룹 자신은 capture를 받을 수 없다.
+    if (captured === this) return;
+    return captured;
+  }
+  set bounds(bounds) {
+    if (this.__MUTATING__) {
+      super.bounds = bounds;
+      return;
+    }
+
+    // 1. left, top의 변화만큼 translate 한다.
+
+    var old_bounds = this.bounds;
+
+    // 2. width, height의 변화비율을 scale-x, scale-y 에 보관한다.
+
+    var scale = {
+      x: bounds.width / old_bounds.width,
+      y: bounds.height / old_bounds.height
+    };
+
+    // 3. 기존 포인트들을 기존 거리에 scale-x, scale-y 만큼 조정된 위치로 새로운 bounds의 left-top으로부터 설정한다.
+
+    this.path = this.path.map(point => {
+      return {
+        x: bounds.left + (point.x - old_bounds.left) * scale.x,
+        y: bounds.top + (point.y - old_bounds.top) * scale.y
+      };
+    });
+
+    // 4. PATH스타일(mutable)의 도형은 mutatePath를 사용하고,
+    //    Bounds 스타일 도형은 기존 포인트들을 기존 거리에 scale-x, scale-y 만큼 조정된 center 위치로부터
+    //      새로운 bounds를 설정한다.
+
+    this.components && this.components.forEach(comp => {
+      if (comp.mutable) {
+        comp.mutatePath(null, function (path_in_parent) {
+          return path_in_parent.map(function (point) {
+            return {
+              x: point.x * scale.x,
+              y: point.y * scale.y
+            };
+          });
+        });
+      } else {
+        let bounds = comp.bounds;
+        let center = comp.center;
+        let delta_center = {
+          x: center.x * (1 - scale.x),
+          y: center.y * (1 - scale.y)
+        };
+        let delta_width = bounds.width * (1 - scale.x);
+        let delta_height = bounds.height * (1 - scale.y);
+        let delta_left = -(delta_center.x - delta_width / 2);
+        let delta_top = -(delta_center.y - delta_height / 2);
+        comp.bounds = {
+          left: bounds.left + delta_left,
+          top: bounds.top + delta_top,
+          width: bounds.width * scale.x,
+          height: bounds.height * scale.y
+        };
+      }
+    });
+  }
+  get focusible() {
+    return false;
+  }
+  get bounds() {
+    return super.bounds;
+  }
+  get hasTextProperty() {
+    return false;
+  }
+  isIdentifiable() {
+    return false;
+  }
+  calculateBounds() {
+    this.clearCache();
+    this.__MUTATING__ = true;
+    this.mutateBounds(function (bounds) {
+      var union = _component.default.union(this.components.map(component => {
+        return component.bounds;
+      }));
+      this.components.forEach(component => {
+        let cbounds = component.bounds;
+        component.bounds = {
+          left: cbounds.left - union.left,
+          top: cbounds.top - union.top,
+          width: cbounds.width,
+          height: cbounds.height
+        };
+      });
+      return {
+        left: bounds.left + union.left,
+        top: bounds.top + union.top,
+        width: union.width,
+        height: union.height
+      };
+    }, this);
+    this.__MUTATING__ = false;
+    if (this.parent.isGroup()) this.parent.calculateBounds();
+  }
+
+  /* 그룹은 자체적으로는 아무것도 그리지 않는다. */
+
+  render(context) {}
+  postrender(context) {
+    /* 자식 컴포넌트들 그리기 */
+    var {
+      top,
+      left,
+      scale
+    } = this.state;
+    context.translate(left, top);
+    this.layout.drawables(this).forEach(m => {
+      m.draw(context);
+    });
+    context.translate(-left, -top);
+  }
+}
+exports.default = Group;
+_component.default.register('group', Group);
+//# sourceMappingURL=group.js.map

package/dist/components/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":["_container","_interopRequireDefault","require","_component","e","__esModule","default","GROUP_PROPS","Group","Container","isGroup","get","property","_model","set","props","propval","filtered","reduce","prop","hasOwnProperty","capture","x","y","except","captured","bounds","__MUTATING__","old_bounds","scale","width","height","path","map","point","left","top","components","forEach","comp","mutable","mutatePath","path_in_parent","center","delta_center","delta_width","delta_height","delta_left","delta_top","focusible","hasTextProperty","isIdentifiable","calculateBounds","clearCache","mutateBounds","union","Component","component","cbounds","parent","render","context","postrender","state","translate","layout","drawables","m","draw","exports","register"],"sources":["../../src/components/group.js"],"sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport Container from './container.js'\nimport Component from './component.js'\n\nconst GROUP_PROPS = ['refid', 'left', 'top', 'width', 'height', 'rotation', 'animation']\n\nexport default class Group extends Container {\n  isGroup() {\n    return true\n  }\n\n  /*\n   * 컴포넌트의 모델 속성값을 가져오는 메쏘드.\n   */\n  get(property) {\n    return this._model[property]\n  }\n\n  /*\n   * 컴포넌트의 모델 속성값을 바꾸는 메쏘드. 그룹은 5개의 속성만을 가진다.\n   *\n   * - 하나의 속성을 변경하는 경우.\n   *  component.set('top', 10)\n   * - 여러개의 속성을 변경하는 경우.\n   *  component.set({top:10, left:50})\n   */\n\n  set(props, propval) {\n    if (typeof props === 'string') return this.set({ [props]: propval })\n\n    var filtered = GROUP_PROPS.reduce((filtered, prop) => {\n      if (props.hasOwnProperty(prop)) filtered[prop] = props[prop]\n      return filtered\n    }, {})\n\n    return super.set(filtered)\n  }\n\n  capture(x, y, except) {\n    var captured = super.capture(x, y, except)\n\n    // 그룹 자신은 capture를 받을 수 없다.\n    if (captured === this) return\n\n    return captured\n  }\n\n  set bounds(bounds) {\n    if (this.__MUTATING__) {\n      super.bounds = bounds\n      return\n    }\n\n    // 1. left, top의 변화만큼 translate 한다.\n\n    var old_bounds = this.bounds\n\n    // 2. width, height의 변화비율을 scale-x, scale-y 에 보관한다.\n\n    var scale = {\n      x: bounds.width / old_bounds.width,\n      y: bounds.height / old_bounds.height\n    }\n\n    // 3. 기존 포인트들을 기존 거리에 scale-x, scale-y 만큼 조정된 위치로 새로운 bounds의 left-top으로부터 설정한다.\n\n    this.path = this.path.map(point => {\n      return {\n        x: bounds.left + (point.x - old_bounds.left) * scale.x,\n        y: bounds.top + (point.y - old_bounds.top) * scale.y\n      }\n    })\n\n    // 4. PATH스타일(mutable)의 도형은 mutatePath를 사용하고,\n    //    Bounds 스타일 도형은 기존 포인트들을 기존 거리에 scale-x, scale-y 만큼 조정된 center 위치로부터\n    //      새로운 bounds를 설정한다.\n\n    this.components &&\n      this.components.forEach(comp => {\n        if (comp.mutable) {\n          comp.mutatePath(null, function (path_in_parent) {\n            return path_in_parent.map(function (point) {\n              return {\n                x: point.x * scale.x,\n                y: point.y * scale.y\n              }\n            })\n          })\n        } else {\n          let bounds = comp.bounds\n          let center = comp.center\n\n          let delta_center = {\n            x: center.x * (1 - scale.x),\n            y: center.y * (1 - scale.y)\n          }\n\n          let delta_width = bounds.width * (1 - scale.x)\n          let delta_height = bounds.height * (1 - scale.y)\n\n          let delta_left = -(delta_center.x - delta_width / 2)\n          let delta_top = -(delta_center.y - delta_height / 2)\n\n          comp.bounds = {\n            left: bounds.left + delta_left,\n            top: bounds.top + delta_top,\n            width: bounds.width * scale.x,\n            height: bounds.height * scale.y\n          }\n        }\n      })\n  }\n\n  get focusible() {\n    return false\n  }\n\n  get bounds() {\n    return super.bounds\n  }\n\n  get hasTextProperty() {\n    return false\n  }\n\n  isIdentifiable() {\n    return false\n  }\n\n  calculateBounds() {\n    this.clearCache()\n\n    this.__MUTATING__ = true\n\n    this.mutateBounds(function (bounds) {\n      var union = Component.union(\n        this.components.map(component => {\n          return component.bounds\n        })\n      )\n\n      this.components.forEach(component => {\n        let cbounds = component.bounds\n\n        component.bounds = {\n          left: cbounds.left - union.left,\n          top: cbounds.top - union.top,\n          width: cbounds.width,\n          height: cbounds.height\n        }\n      })\n\n      return {\n        left: bounds.left + union.left,\n        top: bounds.top + union.top,\n        width: union.width,\n        height: union.height\n      }\n    }, this)\n\n    this.__MUTATING__ = false\n\n    if (this.parent.isGroup()) this.parent.calculateBounds()\n  }\n\n  /* 그룹은 자체적으로는 아무것도 그리지 않는다. */\n\n  render(context) {}\n\n  postrender(context) {\n    /* 자식 컴포넌트들 그리기 */\n    var { top, left, scale } = this.state\n    context.translate(left, top)\n\n    this.layout.drawables(this).forEach(m => {\n      m.draw(context)\n    })\n\n    context.translate(-left, -top)\n  }\n}\n\nComponent.register('group', Group)\n"],"mappings":";;;;;;AAIA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AAAsC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AALtC;AACA;AACA;;AAKA,MAAMG,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,CAAC;AAEzE,MAAMC,KAAK,SAASC,kBAAS,CAAC;EAC3CC,OAAOA,CAAA,EAAG;IACR,OAAO,IAAI;EACb;;EAEA;AACF;AACA;EACEC,GAAGA,CAACC,QAAQ,EAAE;IACZ,OAAO,IAAI,CAACC,MAAM,CAACD,QAAQ,CAAC;EAC9B;;EAEA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;;EAEEE,GAAGA,CAACC,KAAK,EAAEC,OAAO,EAAE;IAClB,IAAI,OAAOD,KAAK,KAAK,QAAQ,EAAE,OAAO,IAAI,CAACD,GAAG,CAAC;MAAE,CAACC,KAAK,GAAGC;IAAQ,CAAC,CAAC;IAEpE,IAAIC,QAAQ,GAAGV,WAAW,CAACW,MAAM,CAAC,CAACD,QAAQ,EAAEE,IAAI,KAAK;MACpD,IAAIJ,KAAK,CAACK,cAAc,CAACD,IAAI,CAAC,EAAEF,QAAQ,CAACE,IAAI,CAAC,GAAGJ,KAAK,CAACI,IAAI,CAAC;MAC5D,OAAOF,QAAQ;IACjB,CAAC,EAAE,CAAC,CAAC,CAAC;IAEN,OAAO,KAAK,CAACH,GAAG,CAACG,QAAQ,CAAC;EAC5B;EAEAI,OAAOA,CAACC,CAAC,EAAEC,CAAC,EAAEC,MAAM,EAAE;IACpB,IAAIC,QAAQ,GAAG,KAAK,CAACJ,OAAO,CAACC,CAAC,EAAEC,CAAC,EAAEC,MAAM,CAAC;;IAE1C;IACA,IAAIC,QAAQ,KAAK,IAAI,EAAE;IAEvB,OAAOA,QAAQ;EACjB;EAEA,IAAIC,MAAMA,CAACA,MAAM,EAAE;IACjB,IAAI,IAAI,CAACC,YAAY,EAAE;MACrB,KAAK,CAACD,MAAM,GAAGA,MAAM;MACrB;IACF;;IAEA;;IAEA,IAAIE,UAAU,GAAG,IAAI,CAACF,MAAM;;IAE5B;;IAEA,IAAIG,KAAK,GAAG;MACVP,CAAC,EAAEI,MAAM,CAACI,KAAK,GAAGF,UAAU,CAACE,KAAK;MAClCP,CAAC,EAAEG,MAAM,CAACK,MAAM,GAAGH,UAAU,CAACG;IAChC,CAAC;;IAED;;IAEA,IAAI,CAACC,IAAI,GAAG,IAAI,CAACA,IAAI,CAACC,GAAG,CAACC,KAAK,IAAI;MACjC,OAAO;QACLZ,CAAC,EAAEI,MAAM,CAACS,IAAI,GAAG,CAACD,KAAK,CAACZ,CAAC,GAAGM,UAAU,CAACO,IAAI,IAAIN,KAAK,CAACP,CAAC;QACtDC,CAAC,EAAEG,MAAM,CAACU,GAAG,GAAG,CAACF,KAAK,CAACX,CAAC,GAAGK,UAAU,CAACQ,GAAG,IAAIP,KAAK,CAACN;MACrD,CAAC;IACH,CAAC,CAAC;;IAEF;IACA;IACA;;IAEA,IAAI,CAACc,UAAU,IACb,IAAI,CAACA,UAAU,CAACC,OAAO,CAACC,IAAI,IAAI;MAC9B,IAAIA,IAAI,CAACC,OAAO,EAAE;QAChBD,IAAI,CAACE,UAAU,CAAC,IAAI,EAAE,UAAUC,cAAc,EAAE;UAC9C,OAAOA,cAAc,CAACT,GAAG,CAAC,UAAUC,KAAK,EAAE;YACzC,OAAO;cACLZ,CAAC,EAAEY,KAAK,CAACZ,CAAC,GAAGO,KAAK,CAACP,CAAC;cACpBC,CAAC,EAAEW,KAAK,CAACX,CAAC,GAAGM,KAAK,CAACN;YACrB,CAAC;UACH,CAAC,CAAC;QACJ,CAAC,CAAC;MACJ,CAAC,MAAM;QACL,IAAIG,MAAM,GAAGa,IAAI,CAACb,MAAM;QACxB,IAAIiB,MAAM,GAAGJ,IAAI,CAACI,MAAM;QAExB,IAAIC,YAAY,GAAG;UACjBtB,CAAC,EAAEqB,MAAM,CAACrB,CAAC,IAAI,CAAC,GAAGO,KAAK,CAACP,CAAC,CAAC;UAC3BC,CAAC,EAAEoB,MAAM,CAACpB,CAAC,IAAI,CAAC,GAAGM,KAAK,CAACN,CAAC;QAC5B,CAAC;QAED,IAAIsB,WAAW,GAAGnB,MAAM,CAACI,KAAK,IAAI,CAAC,GAAGD,KAAK,CAACP,CAAC,CAAC;QAC9C,IAAIwB,YAAY,GAAGpB,MAAM,CAACK,MAAM,IAAI,CAAC,GAAGF,KAAK,CAACN,CAAC,CAAC;QAEhD,IAAIwB,UAAU,GAAG,EAAEH,YAAY,CAACtB,CAAC,GAAGuB,WAAW,GAAG,CAAC,CAAC;QACpD,IAAIG,SAAS,GAAG,EAAEJ,YAAY,CAACrB,CAAC,GAAGuB,YAAY,GAAG,CAAC,CAAC;QAEpDP,IAAI,CAACb,MAAM,GAAG;UACZS,IAAI,EAAET,MAAM,CAACS,IAAI,GAAGY,UAAU;UAC9BX,GAAG,EAAEV,MAAM,CAACU,GAAG,GAAGY,SAAS;UAC3BlB,KAAK,EAAEJ,MAAM,CAACI,KAAK,GAAGD,KAAK,CAACP,CAAC;UAC7BS,MAAM,EAAEL,MAAM,CAACK,MAAM,GAAGF,KAAK,CAACN;QAChC,CAAC;MACH;IACF,CAAC,CAAC;EACN;EAEA,IAAI0B,SAASA,CAAA,EAAG;IACd,OAAO,KAAK;EACd;EAEA,IAAIvB,MAAMA,CAAA,EAAG;IACX,OAAO,KAAK,CAACA,MAAM;EACrB;EAEA,IAAIwB,eAAeA,CAAA,EAAG;IACpB,OAAO,KAAK;EACd;EAEAC,cAAcA,CAAA,EAAG;IACf,OAAO,KAAK;EACd;EAEAC,eAAeA,CAAA,EAAG;IAChB,IAAI,CAACC,UAAU,CAAC,CAAC;IAEjB,IAAI,CAAC1B,YAAY,GAAG,IAAI;IAExB,IAAI,CAAC2B,YAAY,CAAC,UAAU5B,MAAM,EAAE;MAClC,IAAI6B,KAAK,GAAGC,kBAAS,CAACD,KAAK,CACzB,IAAI,CAAClB,UAAU,CAACJ,GAAG,CAACwB,SAAS,IAAI;QAC/B,OAAOA,SAAS,CAAC/B,MAAM;MACzB,CAAC,CACH,CAAC;MAED,IAAI,CAACW,UAAU,CAACC,OAAO,CAACmB,SAAS,IAAI;QACnC,IAAIC,OAAO,GAAGD,SAAS,CAAC/B,MAAM;QAE9B+B,SAAS,CAAC/B,MAAM,GAAG;UACjBS,IAAI,EAAEuB,OAAO,CAACvB,IAAI,GAAGoB,KAAK,CAACpB,IAAI;UAC/BC,GAAG,EAAEsB,OAAO,CAACtB,GAAG,GAAGmB,KAAK,CAACnB,GAAG;UAC5BN,KAAK,EAAE4B,OAAO,CAAC5B,KAAK;UACpBC,MAAM,EAAE2B,OAAO,CAAC3B;QAClB,CAAC;MACH,CAAC,CAAC;MAEF,OAAO;QACLI,IAAI,EAAET,MAAM,CAACS,IAAI,GAAGoB,KAAK,CAACpB,IAAI;QAC9BC,GAAG,EAAEV,MAAM,CAACU,GAAG,GAAGmB,KAAK,CAACnB,GAAG;QAC3BN,KAAK,EAAEyB,KAAK,CAACzB,KAAK;QAClBC,MAAM,EAAEwB,KAAK,CAACxB;MAChB,CAAC;IACH,CAAC,EAAE,IAAI,CAAC;IAER,IAAI,CAACJ,YAAY,GAAG,KAAK;IAEzB,IAAI,IAAI,CAACgC,MAAM,CAACjD,OAAO,CAAC,CAAC,EAAE,IAAI,CAACiD,MAAM,CAACP,eAAe,CAAC,CAAC;EAC1D;;EAEA;;EAEAQ,MAAMA,CAACC,OAAO,EAAE,CAAC;EAEjBC,UAAUA,CAACD,OAAO,EAAE;IAClB;IACA,IAAI;MAAEzB,GAAG;MAAED,IAAI;MAAEN;IAAM,CAAC,GAAG,IAAI,CAACkC,KAAK;IACrCF,OAAO,CAACG,SAAS,CAAC7B,IAAI,EAAEC,GAAG,CAAC;IAE5B,IAAI,CAAC6B,MAAM,CAACC,SAAS,CAAC,IAAI,CAAC,CAAC5B,OAAO,CAAC6B,CAAC,IAAI;MACvCA,CAAC,CAACC,IAAI,CAACP,OAAO,CAAC;IACjB,CAAC,CAAC;IAEFA,OAAO,CAACG,SAAS,CAAC,CAAC7B,IAAI,EAAE,CAACC,GAAG,CAAC;EAChC;AACF;AAACiC,OAAA,CAAA/D,OAAA,GAAAE,KAAA;AAEDgD,kBAAS,CAACc,QAAQ,CAAC,OAAO,EAAE9D,KAAK,CAAC","ignoreList":[]}

package/dist/components/html/elements.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createElement = exports.createCanvas = void 0;
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+var createCanvas, createElement;
+if (typeof document === 'undefined') {
+  exports.createCanvas = createCanvas = function (width, height) {
+    return new Canvas(width, height);
+  };
+} else {
+  exports.createCanvas = createCanvas = function (width, height) {
+    var canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
+  };
+}
+//# sourceMappingURL=elements.js.map

package/dist/components/html/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","names":["createCanvas","createElement","document","exports","width","height","Canvas","canvas"],"sources":["../../../src/components/html/elements.js"],"sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport var createCanvas, createElement\n\nif (typeof document === 'undefined') {\n  createCanvas = function(width, height) {\n    return new Canvas(width, height)\n  }\n} else {\n  createCanvas = function(width, height) {\n    var canvas = document.createElement('canvas')\n    canvas.width = width\n    canvas.height = height\n    return canvas\n  }\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;;AAEO,IAAIA,YAAY,EAAEC,aAAa;AAEtC,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;EACnCC,OAAA,CAAAH,YAAA,GAAAA,YAAY,GAAG,SAAAA,CAASI,KAAK,EAAEC,MAAM,EAAE;IACrC,OAAO,IAAIC,MAAM,CAACF,KAAK,EAAEC,MAAM,CAAC;EAClC,CAAC;AACH,CAAC,MAAM;EACLF,OAAA,CAAAH,YAAA,GAAAA,YAAY,GAAG,SAAAA,CAASI,KAAK,EAAEC,MAAM,EAAE;IACrC,IAAIE,MAAM,GAAGL,QAAQ,CAACD,aAAa,CAAC,QAAQ,CAAC;IAC7CM,MAAM,CAACH,KAAK,GAAGA,KAAK;IACpBG,MAAM,CAACF,MAAM,GAAGA,MAAM;IACtB,OAAOE,MAAM;EACf,CAAC;AACH","ignoreList":[]}

package/dist/components/html/fill.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = fill;
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+function fill(component) {
+  var element = component.element;
+  var fillStyle = component.fillStyle;
+  var style = element.style;
+  if (!fillStyle) {
+    style.background = 'transparent';
+    return;
+  }
+  if (typeof fillStyle == 'string') {
+    style.backgroundColor = fillStyle;
+  } else {
+    switch (fillStyle.type) {
+      case 'pattern':
+        style.backgroundImage = 'url(' + fillStyle.image + ')';
+        style.backgroundColor = 'transparent';
+        if (fillStyle.fitPattern) {
+          style.backgroundSize = '100% 100%';
+        } else if (!fillStyle.width && !fillStyle.height) {
+          style.backgroundSize = 'contain';
+        } else {
+          style.backgroundSize = `${fillStyle.width ? fillStyle.width + 'px' : 'auto'} ${fillStyle.height ? fillStyle.height + 'px' : 'auto'}`;
+        }
+        if (fillStyle.fitPattern) {
+          style.backgroundRepeat = 'no-repeat';
+        } else {
+          const {
+            offsetX,
+            offsetY,
+            noRepeat,
+            align,
+            color
+          } = fillStyle;
+          if (noRepeat) {
+            style.backgroundRepeat = 'no-repeat';
+          }
+          if (color) {
+            style.backgroundColor = color;
+          }
+          if (align) {
+            switch (align) {
+              case 'center':
+                style.backgroundPosition = 'center center';
+                break;
+              case 'left-top':
+                style.backgroundPosition = 'left top';
+                break;
+              case 'left-bottom':
+                style.backgroundPosition = 'left bottom';
+                break;
+              case 'right-top':
+                style.backgroundPosition = 'right top';
+                break;
+              case 'right-bottom':
+                style.backgroundPosition = 'right bottom';
+                break;
+              case 'left':
+                style.backgroundPosition = 'left center';
+                break;
+              case 'right':
+                style.backgroundPosition = 'right center';
+                break;
+              case 'top':
+                style.backgroundPosition = 'center top';
+                break;
+              case 'bottom':
+                style.backgroundPosition = 'center bottom';
+                break;
+            }
+          } else if (offsetX || offsetY) {
+            style.backgroundPosition = `${Number(offsetX) || 0}px ${Number(offsetY) || 0}px`;
+          } else {
+            delete style.backgroundPosition;
+          }
+        }
+        break;
+      case 'gradient':
+        style.background = gradation(component, fillStyle);
+        break;
+      default:
+    }
+  }
+}
+function gradation(component, fillStyle) {
+  var colorStops = fillStyle.colorStops;
+  var type = fillStyle.gradientType;
+  if (colorStops instanceof Array && colorStops.length > 0) {
+    switch (type) {
+      case 'radial':
+        let center = fillStyle.center || 'center';
+        return 'radial-gradient(farthest-corner at ' + position(component, center).map(p => p + 'px').join(' ') + ',' + colorStops.map(stop => `${stop.color} ${stop.position * 100}%`).join(',') + ')';
+      case 'linear':
+        let angle = (fillStyle.rotation || 0) * 180 / 3.141592653589793 + 90 + 'deg';
+        return 'linear-gradient(' + angle + ', ' + colorStops.map(stop => `${stop.color} ${stop.position * 100}%`).join(',') + ')';
+    }
+  }
+  return '';
+}
+function position(component, center) {
+  var {
+    width,
+    height
+  } = component.bounds;
+  switch (center) {
+    case 'center':
+      return [width / 2, height / 2];
+    case 'left-top':
+      return [0, 0];
+    case 'right-top':
+      return [width, 0];
+    case 'left-bottom':
+      return [0, height];
+    default:
+      return [width, height];
+  }
+}
+//# sourceMappingURL=fill.js.map

package/dist/components/html/fill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill.js","names":["fill","component","element","fillStyle","style","background","backgroundColor","type","backgroundImage","image","fitPattern","backgroundSize","width","height","backgroundRepeat","offsetX","offsetY","noRepeat","align","color","backgroundPosition","Number","gradation","colorStops","gradientType","Array","length","center","position","map","p","join","stop","angle","rotation","bounds"],"sources":["../../../src/components/html/fill.js"],"sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport default function fill(component) {\n  var element = component.element\n  var fillStyle = component.fillStyle\n  var style = element.style\n\n  if (!fillStyle) {\n    style.background = 'transparent'\n    return\n  }\n\n  if (typeof fillStyle == 'string') {\n    style.backgroundColor = fillStyle\n  } else {\n    switch (fillStyle.type) {\n      case 'pattern':\n        style.backgroundImage = 'url(' + fillStyle.image + ')'\n        style.backgroundColor = 'transparent'\n\n        if (fillStyle.fitPattern) {\n          style.backgroundSize = '100% 100%'\n        } else if (!fillStyle.width && !fillStyle.height) {\n          style.backgroundSize = 'contain'\n        } else {\n          style.backgroundSize = `${fillStyle.width ? fillStyle.width + 'px' : 'auto'} ${\n            fillStyle.height ? fillStyle.height + 'px' : 'auto'\n          }`\n        }\n\n        if (fillStyle.fitPattern) {\n          style.backgroundRepeat = 'no-repeat'\n        } else {\n          const { offsetX, offsetY, noRepeat, align, color } = fillStyle\n          if (noRepeat) {\n            style.backgroundRepeat = 'no-repeat'\n          }\n          if (color) {\n            style.backgroundColor = color\n          }\n          if (align) {\n            switch (align) {\n              case 'center':\n                style.backgroundPosition = 'center center'\n                break\n              case 'left-top':\n                style.backgroundPosition = 'left top'\n                break\n              case 'left-bottom':\n                style.backgroundPosition = 'left bottom'\n                break\n              case 'right-top':\n                style.backgroundPosition = 'right top'\n                break\n              case 'right-bottom':\n                style.backgroundPosition = 'right bottom'\n                break\n              case 'left':\n                style.backgroundPosition = 'left center'\n                break\n              case 'right':\n                style.backgroundPosition = 'right center'\n                break\n              case 'top':\n                style.backgroundPosition = 'center top'\n                break\n              case 'bottom':\n                style.backgroundPosition = 'center bottom'\n                break\n            }\n          } else if (offsetX || offsetY) {\n            style.backgroundPosition = `${Number(offsetX) || 0}px ${Number(offsetY) || 0}px`\n          } else {\n            delete style.backgroundPosition\n          }\n        }\n        break\n\n      case 'gradient':\n        style.background = gradation(component, fillStyle)\n        break\n\n      default:\n    }\n  }\n}\n\nfunction gradation(component, fillStyle) {\n  var colorStops = fillStyle.colorStops\n  var type = fillStyle.gradientType\n\n  if (colorStops instanceof Array && colorStops.length > 0) {\n    switch (type) {\n      case 'radial':\n        let center = fillStyle.center || 'center'\n        return (\n          'radial-gradient(farthest-corner at ' +\n          position(component, center)\n            .map(p => p + 'px')\n            .join(' ') +\n          ',' +\n          colorStops.map(stop => `${stop.color} ${stop.position * 100}%`).join(',') +\n          ')'\n        )\n\n      case 'linear':\n        let angle = ((fillStyle.rotation || 0) * 180) / 3.141592653589793 + 90 + 'deg'\n        return (\n          'linear-gradient(' +\n          angle +\n          ', ' +\n          colorStops.map(stop => `${stop.color} ${stop.position * 100}%`).join(',') +\n          ')'\n        )\n    }\n  }\n\n  return ''\n}\n\nfunction position(component, center) {\n  var { width, height } = component.bounds\n\n  switch (center) {\n    case 'center':\n      return [width / 2, height / 2]\n    case 'left-top':\n      return [0, 0]\n    case 'right-top':\n      return [width, 0]\n    case 'left-bottom':\n      return [0, height]\n    default:\n      return [width, height]\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/html/reposition.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = reposition;
+var _const = require("../../const.js");
+var _fill = _interopRequireDefault(require("./fill.js"));
+var _shadow = _interopRequireDefault(require("./shadow.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+const SCALE_DEFAULT = {
+  x: 1,
+  y: 1
+};
+const TRANSLATE_DEFAULT = {
+  x: 0,
+  y: 0
+};
+const DEFAULT_STYLE = {
+  boxSizing: 'border-box',
+  margin: '0px',
+  position: 'absolute',
+  outline: 'none'
+};
+function reposition(component) {
+  var {
+    id,
+    scale = SCALE_DEFAULT,
+    translate = TRANSLATE_DEFAULT,
+    bold,
+    italic,
+    fontFamily = '',
+    textAlign,
+    textBaseline,
+    textOverflow,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    fontSize = _const.DEFAULT.FONT_SIZE,
+    lineWidth = 0,
+    lineHeight,
+    lineDash
+  } = component.state;
+  paddingBottom ||= 0;
+  paddingTop ||= 0;
+  paddingLeft ||= 0;
+  paddingRight ||= 0;
+  var className = component.state['class'];
+  var text = component.text;
+  var {
+    strokeStyle,
+    fillStyle,
+    rotation = 0,
+    fontColor,
+    hidden
+  } = component;
+  var {
+    left,
+    top,
+    width,
+    height
+  } = component.bounds;
+
+  // element의 기본 속성을 설정한다.
+  var element = component.element;
+  element.hidden = hidden;
+  if (id) element.id = id;
+  if (className) element.className = className;
+
+  // element의 기본 style을 설정한다.
+
+  Object.assign(element.style, DEFAULT_STYLE, {
+    fontFamily: fontFamily,
+    fontSize: fontSize + 'px',
+    width: width + 'px',
+    height: height + 'px',
+    paddingTop: paddingTop + 'px',
+    paddingRight: paddingRight + 'px',
+    paddingBottom: paddingBottom + 'px',
+    paddingLeft: paddingLeft + 'px',
+    border: lineWidth + 'px',
+    borderColor: strokeStyle,
+    borderStyle: lineWidth > 0 ? lineDash || _const.DEFAULT.LINE_DASH : '',
+    color: fontColor,
+    fontWeight: bold ? 'bold' : '',
+    fontStyle: italic ? 'italic' : '',
+    textAlign: textAlign == 'end' ? 'right' : textAlign == 'start' ? 'left' : textAlign,
+    verticalAlign: textBaseline,
+    lineHeight: lineHeight === undefined ? '' : lineHeight + 'px',
+    whiteSpace: textOverflow ? 'nowrap' : '',
+    overflow: textOverflow ? 'hidden' : '',
+    textOverflow: textOverflow || ''
+  }, /* 3D 공간에서는 자체적으로 위치를 조정하므로, left, top을 설정하지 않는다. */
+  !component.isIn3DSpace() ? {
+    left: left + 'px',
+    top: top + 'px'
+  } : {});
+  (0, _fill.default)(component);
+  (0, _shadow.default)(component);
+  if (component.isIn3DSpace()) {
+    /* 3D 공간에서는 자체적으로 transform을 사용하므로 종료한다. */
+    return;
+  }
+  var delta = component.delta();
+  var sx = (scale && scale.x || 1) * delta.sx;
+  var sy = (scale && scale.y || 1) * delta.sy;
+  var theta = (rotation || 0) + delta.theta;
+  var tx = delta.tx || 0;
+  var ty = delta.ty || 0;
+
+  /* CONFIRM-ME `transform: perspective(1px)` 스타일 설정은 scaling된 dom element를 좀 더 선명하게 보이도록 해준다. (Chrome 브라우저에서) */
+  element.style.transform = `rotate(${theta}rad) translate(${tx}px, ${ty}px) scale(${sx}, ${sy}) perspective(1px)`;
+}
+//# sourceMappingURL=reposition.js.map