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

package/dist/components/container.js

@@ -0,0 +1,331 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _lit = require("lit");
+var _index = require("../layout/index.js");
+var _component = _interopRequireDefault(require("./component.js"));
+var _containerAbstract = _interopRequireDefault(require("./container-abstract.js"));
+var _htmlElement = _interopRequireDefault(require("./mixins/html-element.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+const SCALE_DEFAULT = {
+  x: 1,
+  y: 1
+};
+const DEFAULT_STYLE = {
+  boxSizing: 'border-box',
+  margin: '0px',
+  position: 'absolute',
+  outline: 'none'
+};
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [{
+    type: 'layout',
+    label: 'layout',
+    name: 'layoutOption'
+  }, {
+    type: 'checkbox',
+    label: 'closable',
+    name: 'closable'
+  }, {
+    type: 'checkbox',
+    label: 'draggable',
+    name: 'draggable'
+  }, {
+    type: 'checkbox',
+    label: 'minimizable',
+    name: 'minimizable'
+  }, {
+    type: 'checkbox',
+    label: 'minimized',
+    name: 'minimized'
+  }],
+  help: 'scene/component/container'
+};
+class Container extends (0, _htmlElement.default)(_containerAbstract.default) {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "startDragging", e => {
+      if (!this.state.draggable) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      let startX = e.clientX;
+      let startY = e.clientY;
+      const {
+        left,
+        top
+      } = this.bounds;
+      const transform = this.rootModel.overlay.style.transform;
+      const scaleMatch = transform.match(/scale\(([^,]+),\s*([^)]+)\)/);
+      const sx = scaleMatch ? parseFloat(scaleMatch[1]) : 1;
+      const sy = scaleMatch ? parseFloat(scaleMatch[2]) : sx;
+      const onMouseMove = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        const dx = (e.clientX - startX) / sx;
+        const dy = (e.clientY - startY) / sy;
+        this.setState({
+          left: left + dx,
+          top: top + dy
+        });
+      };
+      const onMouseUp = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        document.removeEventListener('mousemove', onMouseMove, true);
+        document.removeEventListener('mouseup', onMouseUp, true);
+      };
+      document.addEventListener('mousemove', onMouseMove, true);
+      document.addEventListener('mouseup', onMouseUp, true);
+    });
+    _defineProperty(this, "toggleMinimizable", () => {
+      const {
+        minimized
+      } = this.state;
+      this.setState('minimized', !minimized);
+    });
+    _defineProperty(this, "closeContainer", () => {
+      this.setState('hidden', true);
+    });
+  }
+  get tagName() {
+    return 'div';
+  }
+  get nature() {
+    return NATURE;
+  }
+  setElementProperties(element) {}
+  get layout() {
+    return _index.Layout.get(this.get('layout')) || _index.HTMLAbsoluteLayout;
+  }
+  reposition() {
+    if (!this.element) return;
+    var component = this;
+    var {
+      id,
+      class: className,
+      scale = SCALE_DEFAULT
+    } = component.state;
+    var {
+      rotation = 0,
+      hidden
+    } = component;
+    var {
+      left,
+      top,
+      width,
+      height
+    } = component.bounds;
+    var cx = width / 2;
+    var cy = height / 2;
+
+    // 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, {
+      left: left + 'px',
+      top: top + 'px',
+      width: '0px',
+      height: '0px',
+      backgroundColor: 'transparent'
+    });
+    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 = `translate(${tx + cx}px, ${ty + cy}px) rotate(${theta}rad) translate(${-cx}px, ${-cy}px) scale(${sx}, ${sy}) perspective(1px)`;
+  }
+  set path(path) {
+    const {
+      minimized
+    } = this.state;
+    var left_top = path[0];
+    var right_bottom = path[2];
+    if (minimized) {
+      this.set({
+        left: left_top.x,
+        top: left_top.y,
+        width: right_bottom.x - left_top.x
+      });
+    } else {
+      this.set({
+        left: left_top.x,
+        top: left_top.y,
+        width: right_bottom.x - left_top.x,
+        height: right_bottom.y - left_top.y
+      });
+    }
+  }
+  get path() {
+    var {
+      left = 0,
+      top = 0,
+      width = 0,
+      height = 0
+    } = this.state;
+    return [{
+      x: left,
+      y: top
+    }, {
+      x: left + width,
+      y: top
+    }, {
+      x: left + width,
+      y: top + height
+    }, {
+      x: left,
+      y: top + height
+    }];
+  }
+  get bounds() {
+    const {
+      left = 0,
+      top = 0,
+      width = 0,
+      height = 0
+    } = this.state;
+    return {
+      left,
+      top,
+      width,
+      height
+    };
+  }
+  set bounds(bounds) {
+    const {
+      minimized
+    } = this.state;
+    const {
+      left = 0,
+      top = 0,
+      width = 0,
+      height = 0
+    } = bounds;
+    if (minimized) {
+      this.set({
+        left,
+        top,
+        width
+      });
+    } else {
+      this.set({
+        left,
+        top,
+        width,
+        height
+      });
+    }
+  }
+  onchange(after, before) {
+    super.onchange(after, before);
+    if ('draggable' in after || 'minimizable' in after || 'closable' in after || 'minimized' in after || 'width' in after || 'height' in after) {
+      this.onchangeButtons();
+    }
+    if ('minimized' in after) {
+      this.onchangeMinimized();
+    }
+  }
+  createElement() {
+    super.createElement();
+    this.onchangeButtons();
+    this.onchangeMinimized();
+  }
+  onchangeButtons() {
+    if (!this.element) {
+      return;
+    }
+    console.log('element', this.getState('id'));
+    const {
+      draggable,
+      minimizable,
+      closable,
+      minimized
+    } = this.state;
+    const {
+      width
+    } = this.bounds;
+    this.element.style.setProperty('--container-width', `${width}px`);
+    (0, _lit.render)((0, _lit.html)`
+        <style>
+          .buttons {
+            position: absolute;
+            display: flex;
+            flex-direction: row;
+            top: 0;
+            left: 0;
+            width: var(--container-width);
+            padding: 2px;
+            margin: 0;
+            gap: 2px;
+            box-sizing: border-box;
+            background-color: transparent;
+          }
+
+          span {
+            flex: 1;
+          }
+
+          .buttons button {
+            background: transparent;
+            border: none;
+            cursor: pointer;
+            font-family: Material Symbols Outlined;
+            font-size: 16px;
+            border-radius: 4px;
+            color: white;
+            background-color: black;
+            opacity: 0.3;
+            width: 20px;
+            height: 20px;
+            z-index: 1;
+            padding: 0;
+            margin: 0;
+            border: 0px;
+            text-align: center;
+          }
+        </style>
+
+        <div class="buttons" @mousedown=${this.startDragging}>
+          <span></span>
+          ${draggable ? (0, _lit.html)`<button class="draggable">drag_pan</button>` : _lit.nothing}
+          ${minimizable ? (0, _lit.html)`<button class="minimizable" @click=${this.toggleMinimizable}>
+                ${minimized ? 'crop_square' : 'minimize'}
+              </button>` : _lit.nothing}
+          ${closable ? (0, _lit.html)`<button class="closable" @click=${this.closeContainer}>close</button>` : _lit.nothing}
+        </div>
+      `, this.element);
+  }
+  onchangeMinimized() {
+    const {
+      minimized
+    } = this.state;
+    if (minimized) {
+      this.setState('height', 24);
+    } else {
+      this.setState('height', this.get('height'));
+    }
+  }
+}
+exports.default = Container;
+_component.default.register('container', Container);
+//# sourceMappingURL=container.js.map

package/dist/components/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","names":["_lit","require","_index","_component","_interopRequireDefault","_containerAbstract","_htmlElement","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","SCALE_DEFAULT","x","y","DEFAULT_STYLE","boxSizing","margin","position","outline","NATURE","mutable","resizable","rotatable","properties","type","label","name","help","Container","MixinHTMLElement","ContainerAbstract","constructor","args","state","draggable","preventDefault","stopPropagation","startX","clientX","startY","clientY","left","top","bounds","transform","rootModel","overlay","style","scaleMatch","match","sx","parseFloat","sy","onMouseMove","dx","dy","setState","onMouseUp","document","removeEventListener","addEventListener","minimized","tagName","nature","setElementProperties","element","layout","Layout","get","HTMLAbsoluteLayout","reposition","component","id","class","className","scale","rotation","hidden","width","height","cx","cy","assign","backgroundColor","delta","theta","tx","ty","path","left_top","right_bottom","set","onchange","after","before","onchangeButtons","onchangeMinimized","createElement","console","log","getState","minimizable","closable","setProperty","render","html","startDragging","nothing","toggleMinimizable","closeContainer","exports","Component","register"],"sources":["../../src/components/container.js"],"sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { html, nothing, render } from 'lit'\n\nimport { HTMLAbsoluteLayout, Layout } from '../layout/index.js'\n\nimport Component from './component.js'\nimport ContainerAbstract from './container-abstract.js'\nimport MixinHTMLElement from './mixins/html-element.js'\n\nconst SCALE_DEFAULT = { x: 1, y: 1 }\nconst DEFAULT_STYLE = {\n  boxSizing: 'border-box',\n  margin: '0px',\n  position: 'absolute',\n  outline: 'none'\n}\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'layout',\n      label: 'layout',\n      name: 'layoutOption'\n    },\n    {\n      type: 'checkbox',\n      label: 'closable',\n      name: 'closable'\n    },\n    {\n      type: 'checkbox',\n      label: 'draggable',\n      name: 'draggable'\n    },\n    {\n      type: 'checkbox',\n      label: 'minimizable',\n      name: 'minimizable'\n    },\n    {\n      type: 'checkbox',\n      label: 'minimized',\n      name: 'minimized'\n    }\n  ],\n  help: 'scene/component/container'\n}\n\nexport default class Container extends MixinHTMLElement(ContainerAbstract) {\n  get tagName() {\n    return 'div'\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  setElementProperties(element) {}\n\n  get layout() {\n    return Layout.get(this.get('layout')) || HTMLAbsoluteLayout\n  }\n\n  reposition() {\n    if (!this.element) return\n\n    var component = this\n\n    var { id, class: className, scale = SCALE_DEFAULT } = component.state\n\n    var { rotation = 0, hidden } = component\n\n    var { left, top, width, height } = component.bounds\n    var cx = width / 2\n    var cy = height / 2\n\n    // element의 기본 속성을 설정한다.\n    var element = component.element\n\n    element.hidden = hidden\n    if (id) element.id = id\n    if (className) element.className = className\n\n    // element의 기본 style을 설정한다.\n    Object.assign(element.style, DEFAULT_STYLE, {\n      left: left + 'px',\n      top: top + 'px',\n      width: '0px',\n      height: '0px',\n      backgroundColor: 'transparent'\n    })\n\n    var delta = component.delta()\n    var sx = ((scale && scale.x) || 1) * delta.sx\n    var sy = ((scale && scale.y) || 1) * delta.sy\n    var theta = (rotation || 0) + delta.theta\n    var tx = delta.tx || 0\n    var ty = delta.ty || 0\n\n    /* CONFIRM-ME `transform: perspective(1px)` 스타일 설정은 scaling된 dom element를 좀 더 선명하게 보이도록 해준다. (Chrome 브라우저에서) */\n    element.style.transform = `translate(${tx + cx}px, ${\n      ty + cy\n    }px) rotate(${theta}rad) translate(${-cx}px, ${-cy}px) scale(${sx}, ${sy}) perspective(1px)`\n  }\n\n  set path(path) {\n    const { minimized } = this.state\n\n    var left_top = path[0]\n    var right_bottom = path[2]\n\n    if (minimized) {\n      this.set({\n        left: left_top.x,\n        top: left_top.y,\n        width: right_bottom.x - left_top.x\n      })\n    } else {\n      this.set({\n        left: left_top.x,\n        top: left_top.y,\n        width: right_bottom.x - left_top.x,\n        height: right_bottom.y - left_top.y\n      })\n    }\n  }\n\n  get path() {\n    var { left = 0, top = 0, width = 0, height = 0 } = this.state\n\n    return [\n      {\n        x: left,\n        y: top\n      },\n      {\n        x: left + width,\n        y: top\n      },\n      {\n        x: left + width,\n        y: top + height\n      },\n      {\n        x: left,\n        y: top + height\n      }\n    ]\n  }\n\n  get bounds() {\n    const { left = 0, top = 0, width = 0, height = 0 } = this.state\n\n    return {\n      left,\n      top,\n      width,\n      height\n    }\n  }\n\n  set bounds(bounds) {\n    const { minimized } = this.state\n    const { left = 0, top = 0, width = 0, height = 0 } = bounds\n\n    if (minimized) {\n      this.set({\n        left,\n        top,\n        width\n      })\n    } else {\n      this.set({\n        left,\n        top,\n        width,\n        height\n      })\n    }\n  }\n\n  onchange(after, before) {\n    super.onchange(after, before)\n\n    if (\n      'draggable' in after ||\n      'minimizable' in after ||\n      'closable' in after ||\n      'minimized' in after ||\n      'width' in after ||\n      'height' in after\n    ) {\n      this.onchangeButtons()\n    }\n\n    if ('minimized' in after) {\n      this.onchangeMinimized()\n    }\n  }\n\n  createElement() {\n    super.createElement()\n\n    this.onchangeButtons()\n    this.onchangeMinimized()\n  }\n\n  onchangeButtons() {\n    if (!this.element) {\n      return\n    }\n\n    console.log('element', this.getState('id'))\n\n    const { draggable, minimizable, closable, minimized } = this.state\n    const { width } = this.bounds\n\n    this.element.style.setProperty('--container-width', `${width}px`)\n\n    render(\n      html`\n        <style>\n          .buttons {\n            position: absolute;\n            display: flex;\n            flex-direction: row;\n            top: 0;\n            left: 0;\n            width: var(--container-width);\n            padding: 2px;\n            margin: 0;\n            gap: 2px;\n            box-sizing: border-box;\n            background-color: transparent;\n          }\n\n          span {\n            flex: 1;\n          }\n\n          .buttons button {\n            background: transparent;\n            border: none;\n            cursor: pointer;\n            font-family: Material Symbols Outlined;\n            font-size: 16px;\n            border-radius: 4px;\n            color: white;\n            background-color: black;\n            opacity: 0.3;\n            width: 20px;\n            height: 20px;\n            z-index: 1;\n            padding: 0;\n            margin: 0;\n            border: 0px;\n            text-align: center;\n          }\n        </style>\n\n        <div class=\"buttons\" @mousedown=${this.startDragging}>\n          <span></span>\n          ${draggable ? html`<button class=\"draggable\">drag_pan</button>` : nothing}\n          ${minimizable\n            ? html`<button class=\"minimizable\" @click=${this.toggleMinimizable}>\n                ${minimized ? 'crop_square' : 'minimize'}\n              </button>`\n            : nothing}\n          ${closable ? html`<button class=\"closable\" @click=${this.closeContainer}>close</button>` : nothing}\n        </div>\n      `,\n      this.element\n    )\n  }\n\n  startDragging = e => {\n    if (!this.state.draggable) {\n      return\n    }\n\n    e.preventDefault()\n    e.stopPropagation()\n\n    let startX = e.clientX\n    let startY = e.clientY\n\n    const { left, top } = this.bounds\n\n    const transform = this.rootModel.overlay.style.transform\n    const scaleMatch = transform.match(/scale\\(([^,]+),\\s*([^)]+)\\)/)\n\n    const sx = scaleMatch ? parseFloat(scaleMatch[1]) : 1\n    const sy = scaleMatch ? parseFloat(scaleMatch[2]) : sx\n\n    const onMouseMove = e => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      const dx = (e.clientX - startX) / sx\n      const dy = (e.clientY - startY) / sy\n\n      this.setState({\n        left: left + dx,\n        top: top + dy\n      })\n    }\n\n    const onMouseUp = e => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      document.removeEventListener('mousemove', onMouseMove, true)\n      document.removeEventListener('mouseup', onMouseUp, true)\n    }\n\n    document.addEventListener('mousemove', onMouseMove, true)\n    document.addEventListener('mouseup', onMouseUp, true)\n  }\n\n  toggleMinimizable = () => {\n    const { minimized } = this.state\n    this.setState('minimized', !minimized)\n  }\n\n  onchangeMinimized() {\n    const { minimized } = this.state\n\n    if (minimized) {\n      this.setState('height', 24)\n    } else {\n      this.setState('height', this.get('height'))\n    }\n  }\n\n  closeContainer = () => {\n    this.setState('hidden', true)\n  }\n}\n\nComponent.register('container', Container)\n"],"mappings":"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","ignoreList":[]}

package/dist/components/data/data-mapping.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objAccessor = _interopRequireDefault(require("../../core/obj-accessor.js"));
+var _evaluator = _interopRequireDefault(require("./evaluator.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+function propType(property) {
+  switch (property) {
+    // case 'text':
+    // case 'fontColor':
+    case 'ref':
+    case 'fillStyle':
+    case 'strokeStyle':
+      return 'string';
+    // case 'value':
+    // case 'rotation':
+    // return 'number';
+    default:
+      return;
+  }
+}
+class DataMapping {
+  constructor(model, owner) {
+    this.owner = owner;
+    this.model = model;
+  }
+  dispose() {
+    delete this._model;
+    delete this.owner;
+    delete this.evaluator;
+    delete this.accessor;
+    delete this.source;
+  }
+  get model() {
+    return this._model;
+  }
+  set model(model) {
+    var {
+      target,
+      property,
+      rule,
+      param,
+      accessor
+    } = model;
+    this._model = model;
+    this.evaluator = (0, _evaluator.default)(this, this.owner, rule, param, propType(property));
+    this.accessor = (0, _objAccessor.default)(accessor);
+    const matches = target.match(/\[(.*?)\]/);
+    if (matches) {
+      var [propAccessor, partAccessor] = matches[1].split(':');
+      this.propAccessor = (0, _objAccessor.default)(propAccessor);
+      this.partAccessor = (0, _objAccessor.default)(partAccessor);
+    }
+  }
+  get target() {
+    return this.model.target;
+  }
+  get property() {
+    return this.model.property;
+  }
+  get source() {
+    return this.model.source;
+  }
+  get param() {
+    return this.model.param;
+  }
+  get ndnsp() {
+    return !!this.model.ndnsp; /* no data no spreading */
+  }
+  get partial() {
+    return !!this.model.partial; /* partial spreading */
+  }
+}
+exports.default = DataMapping;
+//# sourceMappingURL=data-mapping.js.map

package/dist/components/data/data-mapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-mapping.js","names":["_objAccessor","_interopRequireDefault","require","_evaluator","e","__esModule","default","propType","property","DataMapping","constructor","model","owner","dispose","_model","evaluator","accessor","source","target","rule","param","buildEvaluator","buildAccessor","matches","match","propAccessor","partAccessor","split","ndnsp","partial","exports"],"sources":["../../../src/components/data/data-mapping.js"],"sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport buildAccessor from '../../core/obj-accessor.js'\nimport buildEvaluator from './evaluator.js'\n\nfunction propType(property) {\n  switch (property) {\n    // case 'text':\n    // case 'fontColor':\n    case 'ref':\n    case 'fillStyle':\n    case 'strokeStyle':\n      return 'string'\n    // case 'value':\n    // case 'rotation':\n    // return 'number';\n    default:\n      return\n  }\n}\n\nexport default class DataMapping {\n  constructor(model, owner) {\n    this.owner = owner\n    this.model = model\n  }\n\n  dispose() {\n    delete this._model\n    delete this.owner\n    delete this.evaluator\n    delete this.accessor\n    delete this.source\n  }\n\n  get model() {\n    return this._model\n  }\n\n  set model(model) {\n    var { target, property, rule, param, accessor } = model\n\n    this._model = model\n\n    this.evaluator = buildEvaluator(this, this.owner, rule, param, propType(property))\n    this.accessor = buildAccessor(accessor)\n\n    const matches = target.match(/\\[(.*?)\\]/)\n    if (matches) {\n      var [propAccessor, partAccessor] = matches[1].split(':')\n\n      this.propAccessor = buildAccessor(propAccessor)\n      this.partAccessor = buildAccessor(partAccessor)\n    }\n  }\n\n  get target() {\n    return this.model.target\n  }\n\n  get property() {\n    return this.model.property\n  }\n\n  get source() {\n    return this.model.source\n  }\n\n  get param() {\n    return this.model.param\n  }\n\n  get ndnsp() {\n    return !!this.model.ndnsp /* no data no spreading */\n  }\n\n  get partial() {\n    return !!this.model.partial /* partial spreading */\n  }\n}\n"],"mappings":";;;;;;AAIA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AAA2C,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAL3C;AACA;AACA;;AAKA,SAASG,QAAQA,CAACC,QAAQ,EAAE;EAC1B,QAAQA,QAAQ;IACd;IACA;IACA,KAAK,KAAK;IACV,KAAK,WAAW;IAChB,KAAK,aAAa;MAChB,OAAO,QAAQ;IACjB;IACA;IACA;IACA;MACE;EACJ;AACF;AAEe,MAAMC,WAAW,CAAC;EAC/BC,WAAWA,CAACC,KAAK,EAAEC,KAAK,EAAE;IACxB,IAAI,CAACA,KAAK,GAAGA,KAAK;IAClB,IAAI,CAACD,KAAK,GAAGA,KAAK;EACpB;EAEAE,OAAOA,CAAA,EAAG;IACR,OAAO,IAAI,CAACC,MAAM;IAClB,OAAO,IAAI,CAACF,KAAK;IACjB,OAAO,IAAI,CAACG,SAAS;IACrB,OAAO,IAAI,CAACC,QAAQ;IACpB,OAAO,IAAI,CAACC,MAAM;EACpB;EAEA,IAAIN,KAAKA,CAAA,EAAG;IACV,OAAO,IAAI,CAACG,MAAM;EACpB;EAEA,IAAIH,KAAKA,CAACA,KAAK,EAAE;IACf,IAAI;MAAEO,MAAM;MAAEV,QAAQ;MAAEW,IAAI;MAAEC,KAAK;MAAEJ;IAAS,CAAC,GAAGL,KAAK;IAEvD,IAAI,CAACG,MAAM,GAAGH,KAAK;IAEnB,IAAI,CAACI,SAAS,GAAG,IAAAM,kBAAc,EAAC,IAAI,EAAE,IAAI,CAACT,KAAK,EAAEO,IAAI,EAAEC,KAAK,EAAEb,QAAQ,CAACC,QAAQ,CAAC,CAAC;IAClF,IAAI,CAACQ,QAAQ,GAAG,IAAAM,oBAAa,EAACN,QAAQ,CAAC;IAEvC,MAAMO,OAAO,GAAGL,MAAM,CAACM,KAAK,CAAC,WAAW,CAAC;IACzC,IAAID,OAAO,EAAE;MACX,IAAI,CAACE,YAAY,EAAEC,YAAY,CAAC,GAAGH,OAAO,CAAC,CAAC,CAAC,CAACI,KAAK,CAAC,GAAG,CAAC;MAExD,IAAI,CAACF,YAAY,GAAG,IAAAH,oBAAa,EAACG,YAAY,CAAC;MAC/C,IAAI,CAACC,YAAY,GAAG,IAAAJ,oBAAa,EAACI,YAAY,CAAC;IACjD;EACF;EAEA,IAAIR,MAAMA,CAAA,EAAG;IACX,OAAO,IAAI,CAACP,KAAK,CAACO,MAAM;EAC1B;EAEA,IAAIV,QAAQA,CAAA,EAAG;IACb,OAAO,IAAI,CAACG,KAAK,CAACH,QAAQ;EAC5B;EAEA,IAAIS,MAAMA,CAAA,EAAG;IACX,OAAO,IAAI,CAACN,KAAK,CAACM,MAAM;EAC1B;EAEA,IAAIG,KAAKA,CAAA,EAAG;IACV,OAAO,IAAI,CAACT,KAAK,CAACS,KAAK;EACzB;EAEA,IAAIQ,KAAKA,CAAA,EAAG;IACV,OAAO,CAAC,CAAC,IAAI,CAACjB,KAAK,CAACiB,KAAK,EAAC;EAC5B;EAEA,IAAIC,OAAOA,CAAA,EAAG;IACZ,OAAO,CAAC,CAAC,IAAI,CAAClB,KAAK,CAACkB,OAAO,EAAC;EAC9B;AACF;AAACC,OAAA,CAAAxB,OAAA,GAAAG,WAAA","ignoreList":[]}

package/dist/components/data/data.js

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildMappings = buildMappings;
+exports.disposeMappings = disposeMappings;
+exports.executeMappings = executeMappings;
+exports.onchangeData = onchangeData;
+exports.onchangeMappings = onchangeMappings;
+var _logger = require("../../core/logger.js");
+var _dataMapping = _interopRequireDefault(require("./data-mapping.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+function setTargetsProperty(targets, property, value, partial) {
+  if (partial) {
+    targets.forEach(component => component[property] = {
+      ...component[property],
+      ...value
+    });
+  } else {
+    targets.forEach(component => component[property] = value);
+  }
+}
+function executeMappings(force = false) {
+  if (!force && this.data === undefined) {
+    return;
+  }
+  this.mappings && this.mappings.forEach(mapping => {
+    try {
+      var {
+        source,
+        target,
+        property,
+        accessor,
+        propAccessor,
+        partAccessor,
+        ndnsp = false,
+        partial = false
+      } = mapping;
+      var data;
+      if (source && source != '(self)') {
+        if (source.startsWith('#')) {
+          source = source.substring(1);
+        }
+        data = this.root.findById(source)?.data || {};
+      } else {
+        data = this.data;
+      }
+      var accessive = accessor(data);
+      /*
+        accessive : accessor에 의해서 한정된 대상 데이터
+        accessive가 undefined 라면,
+        target 설정이 '()', '(key)', '[prop]' 형태인 경우에는 데이타 전달 타겟을 설정할 수 없으므로 더 이상 진행할 필요가 없다.
+        target 설정이 '#id', '.class' 인 경우에는 undefined 값도 스프레드(전파) 되어야 한다.
+      */
+
+      target = target.trim();
+      if (target == '(root)' || target == '(key)') {
+        if (accessive == undefined) {
+          return;
+        }
+        // TODO (root) 제거.
+        let targets = Object.keys(accessive || {}).map(key => this.root.findOrCreate(key)).filter(Boolean).flat();
+        if (targets.length > 0) {
+          targets.forEach(component => {
+            let value = mapping.evaluator(accessive[component.get('id')], [component]);
+            if (property && property !== '(action)' && (!ndnsp || value || value === 0 || value === false)) {
+              if (partial) {
+                component[property] = {
+                  ...component[property],
+                  ...value
+                };
+              } else {
+                component[property] = value;
+              }
+            }
+          });
+        }
+      } else if (target.startsWith('[')) {
+        if (accessive == undefined) {
+          return;
+        }
+        // const matches = target.match(/\[(.*?)\]/)
+
+        // if (!matches) {
+        //   throw String("mapping target should end with ']' to designate property-id.(" + target + ')')
+        // }
+
+        // var id_prop = matches[1].split(':')[0]
+
+        if (accessive instanceof Array) {
+          accessive.forEach(data => {
+            let id = propAccessor(data);
+            if (id) {
+              let components = this.root.findOrCreate(id);
+              if (components) {
+                let value = mapping.evaluator(partAccessor(data), components);
+                if (property && property !== '(action)' && (!ndnsp || value || value === 0 || value === false)) {
+                  setTargetsProperty(components, property, value, partial);
+                }
+              }
+            }
+          });
+        } else if (accessive instanceof Object) {
+          let id = propAccessor(accessive);
+          if (id) {
+            let components = this.root.findOrCreate(id);
+            if (components) {
+              let value = mapping.evaluator(partAccessor(accessive), components);
+              if (property && property !== '(action)' && (!ndnsp || value || value === 0 || value === false)) {
+                setTargetsProperty(components, property, value, partial);
+              }
+            }
+          }
+        } else {
+          throw String('mapping data should be an object to target property-id.(' + accessive + ')');
+        }
+      } else {
+        let targets = this.root.findAll(target, this);
+        if (targets.length > 0) {
+          let value = mapping.evaluator(accessive, targets);
+          if (property && property !== '(action)' && (!ndnsp || value || value === 0 || value === false)) {
+            setTargetsProperty(targets, property, value, partial);
+          }
+        }
+      }
+    } catch (e) {
+      (0, _logger.error)(e, this, mapping);
+    }
+  });
+}
+function onchangeData(after, before) {
+  if (this.state.persistent) {
+    this.app?.isViewMode && this.app?.dataStorage.save(this, after.data);
+  }
+
+  /* excuteMappings forcely */
+  executeMappings.call(this, [true]);
+}
+function buildMappings() {
+  if (!this._model.mappings) {
+    this._mappings = [];
+    return;
+  }
+  if (!this._model.mappings instanceof Array) {
+    (0, _logger.error)('Mappings model is invalid (should be a Array) ..', this._model.mappings);
+    this._mappings = [];
+    return;
+  }
+  this._mappings = (this._model.mappings || []).filter(mapping => mapping.rule && mapping.target).map(mapping => {
+    return new _dataMapping.default(mapping, this);
+  });
+}
+function disposeMappings() {
+  this._mappings && this._mappings.forEach(mapping => mapping.dispose());
+  delete this._mappings;
+}
+function onchangeMappings(after, before) {
+  this.disposeMappings();
+  executeMappings.call(this);
+}
+//# sourceMappingURL=data.js.map

package/dist/components/data/data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.js","names":["_logger","require","_dataMapping","_interopRequireDefault","e","__esModule","default","setTargetsProperty","targets","property","value","partial","forEach","component","executeMappings","force","data","undefined","mappings","mapping","source","target","accessor","propAccessor","partAccessor","ndnsp","startsWith","substring","root","findById","accessive","trim","Object","keys","map","key","findOrCreate","filter","Boolean","flat","length","evaluator","get","Array","id","components","String","findAll","error","onchangeData","after","before","state","persistent","app","isViewMode","dataStorage","save","call","buildMappings","_model","_mappings","rule","DataMapping","disposeMappings","dispose","onchangeMappings"],"sources":["../../../src/components/data/data.js"],"sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { error } from '../../core/logger.js'\nimport DataMapping from './data-mapping.js'\n\nfunction setTargetsProperty(targets, property, value, partial) {\n  if (partial) {\n    targets.forEach(component => (component[property] = { ...component[property], ...value }))\n  } else {\n    targets.forEach(component => (component[property] = value))\n  }\n}\n\nexport function executeMappings(force = false) {\n  if (!force && this.data === undefined) {\n    return\n  }\n\n  this.mappings &&\n    this.mappings.forEach(mapping => {\n      try {\n        var { source, target, property, accessor, propAccessor, partAccessor, ndnsp = false, partial = false } = mapping\n\n        var data\n\n        if (source && source != '(self)') {\n          if (source.startsWith('#')) {\n            source = source.substring(1)\n          }\n          data = this.root.findById(source)?.data || {}\n        } else {\n          data = this.data\n        }\n\n        var accessive = accessor(data)\n        /*\n          accessive : accessor에 의해서 한정된 대상 데이터\n          accessive가 undefined 라면,\n          target 설정이 '()', '(key)', '[prop]' 형태인 경우에는 데이타 전달 타겟을 설정할 수 없으므로 더 이상 진행할 필요가 없다.\n          target 설정이 '#id', '.class' 인 경우에는 undefined 값도 스프레드(전파) 되어야 한다.\n        */\n\n        target = target.trim()\n\n        if (target == '(root)' || target == '(key)') {\n          if (accessive == undefined) {\n            return\n          }\n          // TODO (root) 제거.\n          let targets = Object.keys(accessive || {})\n            .map(key => this.root.findOrCreate(key))\n            .filter(Boolean)\n            .flat()\n\n          if (targets.length > 0) {\n            targets.forEach(component => {\n              let value = mapping.evaluator(accessive[component.get('id')], [component])\n              if (property && property !== '(action)' && (!ndnsp || value || value === 0 || value === false)) {\n                if (partial) {\n                  component[property] = { ...component[property], ...value }\n                } else {\n                  component[property] = value\n                }\n              }\n            })\n          }\n        } else if (target.startsWith('[')) {\n          if (accessive == undefined) {\n            return\n          }\n          // const matches = target.match(/\\[(.*?)\\]/)\n\n          // if (!matches) {\n          //   throw String(\"mapping target should end with ']' to designate property-id.(\" + target + ')')\n          // }\n\n          // var id_prop = matches[1].split(':')[0]\n\n          if (accessive instanceof Array) {\n            accessive.forEach(data => {\n              let id = propAccessor(data)\n              if (id) {\n                let components = this.root.findOrCreate(id)\n\n                if (components) {\n                  let value = mapping.evaluator(partAccessor(data), components)\n                  if (property && property !== '(action)' && (!ndnsp || value || value === 0 || value === false)) {\n                    setTargetsProperty(components, property, value, partial)\n                  }\n                }\n              }\n            })\n          } else if (accessive instanceof Object) {\n            let id = propAccessor(accessive)\n            if (id) {\n              let components = this.root.findOrCreate(id)\n\n              if (components) {\n                let value = mapping.evaluator(partAccessor(accessive), components)\n                if (property && property !== '(action)' && (!ndnsp || value || value === 0 || value === false)) {\n                  setTargetsProperty(components, property, value, partial)\n                }\n              }\n            }\n          } else {\n            throw String('mapping data should be an object to target property-id.(' + accessive + ')')\n          }\n        } else {\n          let targets = this.root.findAll(target, this)\n\n          if (targets.length > 0) {\n            let value = mapping.evaluator(accessive, targets)\n            if (property && property !== '(action)' && (!ndnsp || value || value === 0 || value === false)) {\n              setTargetsProperty(targets, property, value, partial)\n            }\n          }\n        }\n      } catch (e) {\n        error(e, this, mapping)\n      }\n    })\n}\n\nexport function onchangeData(after, before) {\n  if (this.state.persistent) {\n    this.app?.isViewMode && this.app?.dataStorage.save(this, after.data)\n  }\n\n  /* excuteMappings forcely */\n  executeMappings.call(this, [true])\n}\n\nexport function buildMappings() {\n  if (!this._model.mappings) {\n    this._mappings = []\n    return\n  }\n\n  if (!this._model.mappings instanceof Array) {\n    error('Mappings model is invalid (should be a Array) ..', this._model.mappings)\n    this._mappings = []\n    return\n  }\n\n  this._mappings = (this._model.mappings || [])\n    .filter(mapping => mapping.rule && mapping.target)\n    .map(mapping => {\n      return new DataMapping(mapping, this)\n    })\n}\n\nexport function disposeMappings() {\n  this._mappings && this._mappings.forEach(mapping => mapping.dispose())\n  delete this._mappings\n}\n\nexport function onchangeMappings(after, before) {\n  this.disposeMappings()\n\n  executeMappings.call(this)\n}\n"],"mappings":"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","ignoreList":[]}