@operato/data-mapper 9.0.1 → 9.0.5

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [9.0.5](https://github.com/hatiolab/operato/compare/v9.0.4...v9.0.5) (2025-07-04)
+
+**Note:** Version bump only for package @operato/data-mapper
+
+
+
+
+
+### [9.0.2](https://github.com/hatiolab/operato/compare/v9.0.1...v9.0.2) (2025-07-01)
+
+
+### :bug: Bug Fix
+
+* invalid package configuration ([ccde20b](https://github.com/hatiolab/operato/commit/ccde20b75e6cbd1f881e5bac631e361aebfd21c3))
+
+
+
 ### [9.0.1](https://github.com/hatiolab/operato/compare/v9.0.0...v9.0.1) (2025-07-01)
 
 **Note:** Version bump only for package @operato/data-mapper

package/dist/src/components/function-box-options-builder.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import './property-editor.js';
+import { LitElement, PropertyValues } from 'lit';
+import { PropertySpec } from '@operato/property-editor';
+export declare class FunctionBoxOptionsBuilder extends LitElement {
+    value: {
+        [name: string]: any;
+    };
+    props?: PropertySpec[];
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    private onPropsChanged;
+    private setValues;
+    private onValueChanged;
+}

package/dist/src/components/function-box-options-builder.js

@@ -0,0 +1,145 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import './property-editor.js'; /* for registering property editors */
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+/**
+모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.
+
+Example:
+
+    <options-builder value="{{value}}">
+      <label>Center X</label>
+      <input type="number" .value="${value.cx}">
+      <label>Width</label>
+      <input type="number" .value="${value.width}">
+    </options-builder>
+*/
+const DEFAULT_VALUE = {
+    legend: '',
+    // number: 0, // should be undefined
+    angle: 0,
+    string: '',
+    password: '',
+    textarea: '',
+    checkbox: false,
+    select: '',
+    color: '#000000',
+    'solidcolor-stops': null,
+    'gradientcolor-stops': null,
+    'gltf-selector': '',
+    'image-selector': '',
+    multiplecolor: null,
+    editortable: null,
+    imageselector: '',
+    options: null,
+    date: null
+};
+function convertValue(type, value) {
+    var converted = String(value).trim() == '' ? undefined : value;
+    switch (type) {
+        case 'number':
+        case 'angle':
+            converted = parseFloat(value);
+            converted = isNaN(converted) ? undefined : converted;
+            break;
+    }
+    return converted;
+}
+let FunctionBoxOptionsBuilder = class FunctionBoxOptionsBuilder extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    firstUpdated() {
+        this.addEventListener('change', this.onValueChanged.bind(this));
+    }
+    updated(changes) {
+        changes.has('props') && this.onPropsChanged(this.props || []);
+        changes.has('value') && this.setValues();
+    }
+    onPropsChanged(props) {
+        const specs = this.props || [];
+        this.textContent = '';
+        specs.forEach((spec) => {
+            const { label, type, placeholder, name, observe, property, editor, quantifier, defaultValue, disabled, styles } = spec;
+            const elementType = OxPropertyEditor.getEditor(type);
+            if (!elementType) {
+                console.warn('Property Editor not defined', type);
+                return;
+            }
+            const element = document.createElement(elementType);
+            element.label = label;
+            element.type = type;
+            element.placeholder = placeholder;
+            element.name = name;
+            element.setAttribute('name', name);
+            if (observe) {
+                element.observeHandler = observe;
+            }
+            element.property = property;
+            element.editor = editor;
+            element.quantifier = quantifier;
+            element.defaultValue = defaultValue;
+            element.setAttribute('property-editor', 'true');
+            element.disabled = disabled;
+            if (styles) {
+                Object.keys(styles).forEach((key) => {
+                    element.style[key] = styles[key];
+                });
+            }
+            this.appendChild(element);
+        });
+    }
+    setValues() {
+        this.value &&
+            Array.from(this.querySelectorAll('[name]')).forEach((prop) => {
+                let name = prop.getAttribute('name');
+                if (!name) {
+                    return;
+                }
+                var convertedValue = convertValue(prop.type, this.value[name]);
+                if (convertedValue === undefined) {
+                    convertedValue = DEFAULT_VALUE[prop.type];
+                }
+                prop.value = convertedValue;
+                prop.observe.call(prop, prop.value);
+            });
+    }
+    onValueChanged(e) {
+        e.stopPropagation();
+        var target = e.target;
+        const prop = target.closest('[property-editor]');
+        var name = prop.getAttribute('name');
+        if (!name) {
+            return;
+        }
+        this.value[name] = prop.value;
+        prop.observe(prop.value);
+        this.setValues();
+        this.dispatchEvent(new CustomEvent('property-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                [name]: prop.value
+            }
+        }));
+    }
+};
+__decorate([
+    property({ type: Object })
+], FunctionBoxOptionsBuilder.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], FunctionBoxOptionsBuilder.prototype, "props", void 0);
+FunctionBoxOptionsBuilder = __decorate([
+    customElement('function-box-options-builder')
+], FunctionBoxOptionsBuilder);
+export { FunctionBoxOptionsBuilder };
+//# sourceMappingURL=function-box-options-builder.js.map

package/dist/src/components/function-box-options-builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"function-box-options-builder.js","sourceRoot":"","sources":["../../../src/components/function-box-options-builder.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './property-editor.js' /* for registering property editors */\n\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { CSSStyles, OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n/**\n모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.\n\nExample:\n\n    <options-builder value=\"{{value}}\">\n      <label>Center X</label>\n      <input type=\"number\" .value=\"${value.cx}\">\n      <label>Width</label>\n      <input type=\"number\" .value=\"${value.width}\">\n    </options-builder>\n*/\n\nconst DEFAULT_VALUE = {\n  legend: '',\n  // number: 0, // should be undefined\n  angle: 0,\n  string: '',\n  password: '',\n  textarea: '',\n  checkbox: false,\n  select: '',\n  color: '#000000',\n  'solidcolor-stops': null,\n  'gradientcolor-stops': null,\n  'gltf-selector': '',\n  'image-selector': '',\n  multiplecolor: null,\n  editortable: null,\n  imageselector: '',\n  options: null,\n  date: null\n}\n\nfunction convertValue(type: string, value: any) {\n  var converted = String(value).trim() == '' ? undefined : value\n  switch (type) {\n    case 'number':\n    case 'angle':\n      converted = parseFloat(value)\n      converted = isNaN(converted) ? undefined : converted\n      break\n  }\n\n  return converted\n}\n\n@customElement('function-box-options-builder')\nexport class FunctionBoxOptionsBuilder extends LitElement {\n  @property({ type: Object }) value: { [name: string]: any } = {}\n  @property({ type: Array }) props?: PropertySpec[]\n\n  render() {\n    return html`<slot></slot>`\n  }\n\n  firstUpdated() {\n    this.addEventListener('change', this.onValueChanged.bind(this))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('props') && this.onPropsChanged(this.props || [])\n    changes.has('value') && this.setValues()\n  }\n\n  private onPropsChanged(props: PropertySpec[]) {\n    const specs = this.props || []\n\n    this.textContent = ''\n    specs.forEach((spec: PropertySpec) => {\n      const { label, type, placeholder, name, observe, property, editor, quantifier, defaultValue, disabled, styles } =\n        spec\n\n      const elementType = OxPropertyEditor.getEditor(type)\n      if (!elementType) {\n        console.warn('Property Editor not defined', type)\n        return\n      }\n      const element = document.createElement(elementType) as OxPropertyEditor\n\n      element.label = label\n      element.type = type\n      element.placeholder = placeholder\n      element.name = name\n      element.setAttribute('name', name)\n\n      if (observe) {\n        element.observeHandler = observe\n      }\n      element.property = property\n      element.editor = editor\n      element.quantifier = quantifier\n      element.defaultValue = defaultValue\n      element.setAttribute('property-editor', 'true')\n      element.disabled = disabled\n\n      if (styles) {\n        Object.keys(styles).forEach((key: string) => {\n          element.style[key as keyof CSSStyles] = styles[key as keyof CSSStyles]\n        })\n      }\n\n      this.appendChild(element)\n    })\n  }\n\n  private setValues() {\n    this.value &&\n      Array.from(this.querySelectorAll('[name]')).forEach((prop: { [name: string]: any }) => {\n        let name = prop.getAttribute('name')\n        if (!name) {\n          return\n        }\n        var convertedValue = convertValue(prop.type, this.value[name])\n        if (convertedValue === undefined) {\n          convertedValue = (DEFAULT_VALUE as any)[prop.type]\n        }\n        prop.value = convertedValue\n        prop.observe.call(prop, prop.value)\n      })\n  }\n\n  private onValueChanged(e: Event) {\n    e.stopPropagation()\n    var target = e.target as Element\n\n    const prop = target.closest('[property-editor]') as OxPropertyEditor\n\n    var name = prop.getAttribute('name')\n    if (!name) {\n      return\n    }\n\n    this.value[name] = prop.value\n\n    prop.observe(prop.value)\n    this.setValues()\n\n    this.dispatchEvent(\n      new CustomEvent('property-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          [name]: prop.value\n        }\n      })\n    )\n  }\n}\n"]}

package/dist/src/components/function-box-popup.d.ts

@@ -0,0 +1,15 @@
+import '@operato/input/ox-select.js';
+import '@operato/input/ox-input-code.js';
+import '@operato/markdown/ox-markdown.js';
+import './function-box-options-builder.js';
+import { LitElement } from 'lit';
+import { Mapping } from '../types.js';
+export declare class FunctionBoxPopup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    mapping: Mapping;
+    mappingFunction: HTMLSelectElement;
+    render(): import("lit-html").TemplateResult<1>;
+    private swapVariablePosition;
+    private updateOptions;
+    private updateMapping;
+}

package/dist/src/components/function-box-popup.js

@@ -0,0 +1,236 @@
+import { __decorate } from "tslib";
+import '@operato/input/ox-select.js';
+import '@operato/input/ox-input-code.js';
+import '@operato/markdown/ox-markdown.js';
+import './function-box-options-builder.js';
+import { LitElement, html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { CommonHeaderStyles } from '@operato/styles';
+import { i18next } from '@operato/i18n';
+import { FunctionList } from '../functions/index.js';
+let FunctionBoxPopup = class FunctionBoxPopup extends LitElement {
+    render() {
+        var { mappingFunction = 'passthrough', inputs, outputs, parameters = {} } = this.mapping;
+        const { help = '', specifications = [] } = FunctionList.find(func => func.name == mappingFunction) || {};
+        const helpDataUrl = `data:text/markdown;base64,${window.btoa(unescape(encodeURIComponent(help)))}`;
+        return html `
+      <div class="header">
+        <div class="title">Function Box</div>
+      </div>
+
+      <div id="body">
+        <div id="function">
+          <label for="select-function">select function</label>
+          <ox-select
+            id="select-function"
+            .value=${mappingFunction || 'passthrough'}
+            @change=${(e) => {
+            e.stopPropagation();
+            let val = e.target.value;
+            this.mapping = {
+                ...this.mapping,
+                mappingFunction: (val === null || val === void 0 ? void 0 : val.length) > 0 ? val : 'passthrough'
+            };
+        }}
+          >
+            <ox-popup-list with-search align-left>
+              ${FunctionList.map(func => html `
+                  <div option value=${func.name} ?selected=${func.name == mappingFunction}>${func.label}</div>
+                `)}
+            </ox-popup-list>
+          </ox-select>
+        </div>
+
+        <div id="detail">
+          <div id="variables">
+            <div id="inputs">
+              <label>inputs</label>
+              ${inputs.map((input, index) => html `
+                  <div class="variable-list">
+                    ${input}
+                    <div class="padding"></div>
+                    <md-icon @click=${() => this.swapVariablePosition('in', index, 'up')}>arrow_upward</md-icon
+                    ><md-icon @click=${() => this.swapVariablePosition('in', index, 'down')}>arrow_downward</md-icon>
+                  </div>
+                `)}
+            </div>
+            <div id="returns">
+              <label>returns</label>
+              ${outputs.map((output, index) => html `
+                  <div class="variable-list">
+                    ${output}
+                    <div class="padding"></div>
+                    <md-icon @click=${() => this.swapVariablePosition('out', index, 'up')}>arrow_upward</md-icon
+                    ><md-icon @click=${() => this.swapVariablePosition('out', index, 'down')}>arrow_downward</md-icon>
+                  </div>
+                `)}
+            </div>
+          </div>
+          <div id="editor">
+            <function-box-options-builder
+              .value=${parameters}
+              .props=${specifications}
+              @property-change=${this.updateOptions}
+            ></function-box-options-builder>
+            <ox-markdown src=${helpDataUrl} .toc=${false}></ox-markdown>
+          </div>
+        </div>
+      </div>
+
+      <div class="footer">
+        <div filler></div>
+        <button @click=${this.updateMapping.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</button>
+      </div>
+    `;
+    }
+    swapVariablePosition(inout, index, direction) {
+        const list = inout === 'in' ? this.mapping.inputs : this.mapping.outputs;
+        if ((direction === 'up' && index === 0) || (direction === 'down' && index === list.length - 1)) {
+            return; // 첫 번째 요소를 위로 올리거나, 마지막 요소를 아래로 내릴 수 없음
+        }
+        const newIndex = direction === 'up' ? index - 1 : index + 1;
+        const movingElement = this.shadowRoot.querySelectorAll(`.variable-list`)[index];
+        const targetElement = this.shadowRoot.querySelectorAll(`.variable-list`)[newIndex];
+        if (!movingElement || !targetElement)
+            return;
+        // 현재 위치 저장
+        const movingRect = movingElement.getBoundingClientRect();
+        const targetRect = targetElement.getBoundingClientRect();
+        const deltaY = targetRect.top - movingRect.top;
+        // 애니메이션을 위해 transform 적용
+        movingElement.style.transition = 'transform 0.3s ease-in-out';
+        movingElement.style.transform = `translateY(${deltaY}px)`;
+        // 애니메이션이 끝나면 실제로 데이터 순서 변경 및 리렌더링
+        setTimeout(() => {
+            const temp = list[index];
+            list[index] = list[newIndex];
+            list[newIndex] = temp;
+            // 스타일 초기화
+            movingElement.style.transition = '';
+            movingElement.style.transform = '';
+            this.requestUpdate();
+        }, 300); // 300ms는 transition 속도와 동일
+    }
+    updateOptions(e) {
+        e.stopPropagation();
+        const parameters = this.mapping.parameters || {};
+        this.mapping.parameters = {
+            ...parameters,
+            ...e.detail
+        };
+    }
+    updateMapping() {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.mapping
+        }));
+    }
+};
+FunctionBoxPopup.styles = [
+    CommonHeaderStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        border: 1px solid #ccc;
+        background: #f9f9f9;
+        overflow: hidden;
+      }
+
+      div#body {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        border: 1px solid #ccc;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-primary);
+        overflow: hidden;
+      }
+
+      div#function {
+        display: flex;
+        flex-direction: row;
+        gap: var(--spacing-small, 4px);
+        padding: 10px;
+      }
+
+      div#detail {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        gap: var(--spacing-small, 4px);
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-primary);
+        overflow: hidden;
+      }
+
+      div#variables {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small, 4px);
+      }
+
+      div#variables label {
+        background-color: var(--md-sys-color-on-primary-container);
+        color: var(--md-sys-color-primary-container);
+      }
+
+      .variable-list {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        transition: transform 0.3s ease-in-out;
+      }
+
+      .variable-list .padding {
+        flex: 1;
+      }
+
+      div#inputs {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+      }
+
+      div#returns {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+      }
+
+      div#editor {
+        flex: 4;
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small, 4px);
+        overflow: hidden;
+      }
+
+      function-box-options-builder {
+        min-height: 200px;
+      }
+
+      ox-markdown {
+        flex: 1;
+        padding: var(--spacing-medium, 8px);
+        background-color: var(--md-sys-color-surface-variant);
+        overflow: auto;
+      }
+
+      ox-select {
+        flex: 1;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], FunctionBoxPopup.prototype, "mapping", void 0);
+__decorate([
+    query('#select-function')
+], FunctionBoxPopup.prototype, "mappingFunction", void 0);
+FunctionBoxPopup = __decorate([
+    customElement('function-box-popup')
+], FunctionBoxPopup);
+export { FunctionBoxPopup };
+//# sourceMappingURL=function-box-popup.js.map

package/dist/src/components/function-box-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"function-box-popup.js","sourceRoot":"","sources":["../../../src/components/function-box-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-select.js'\nimport '@operato/input/ox-input-code.js'\nimport '@operato/markdown/ox-markdown.js'\nimport './function-box-options-builder.js'\n\nimport { LitElement, html, css } from 'lit'\nimport { customElement, property, state, query } from 'lit/decorators.js'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\nimport { Mapping } from '../types.js'\nimport { FunctionList } from '../functions/index.js'\n\n@customElement('function-box-popup')\nexport class FunctionBoxPopup extends LitElement {\n  static styles = [\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        border: 1px solid #ccc;\n        background: #f9f9f9;\n        overflow: hidden;\n      }\n\n      div#body {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        border: 1px solid #ccc;\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-primary);\n        overflow: hidden;\n      }\n\n      div#function {\n        display: flex;\n        flex-direction: row;\n        gap: var(--spacing-small, 4px);\n        padding: 10px;\n      }\n\n      div#detail {\n        flex: 1;\n        display: flex;\n        flex-direction: row;\n        gap: var(--spacing-small, 4px);\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-primary);\n        overflow: hidden;\n      }\n\n      div#variables {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-small, 4px);\n      }\n\n      div#variables label {\n        background-color: var(--md-sys-color-on-primary-container);\n        color: var(--md-sys-color-primary-container);\n      }\n\n      .variable-list {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        transition: transform 0.3s ease-in-out;\n      }\n\n      .variable-list .padding {\n        flex: 1;\n      }\n\n      div#inputs {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n      }\n\n      div#returns {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n      }\n\n      div#editor {\n        flex: 4;\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-small, 4px);\n        overflow: hidden;\n      }\n\n      function-box-options-builder {\n        min-height: 200px;\n      }\n\n      ox-markdown {\n        flex: 1;\n        padding: var(--spacing-medium, 8px);\n        background-color: var(--md-sys-color-surface-variant);\n        overflow: auto;\n      }\n\n      ox-select {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) mapping!: Mapping\n\n  @query('#select-function') mappingFunction!: HTMLSelectElement\n\n  render() {\n    var { mappingFunction = 'passthrough', inputs, outputs, parameters = {} } = this.mapping\n    const { help = '', specifications = [] } = FunctionList.find(func => func.name == mappingFunction) || {}\n\n    const helpDataUrl = `data:text/markdown;base64,${window.btoa(unescape(encodeURIComponent(help)))}`\n\n    return html`\n      <div class=\"header\">\n        <div class=\"title\">Function Box</div>\n      </div>\n\n      <div id=\"body\">\n        <div id=\"function\">\n          <label for=\"select-function\">select function</label>\n          <ox-select\n            id=\"select-function\"\n            .value=${mappingFunction || 'passthrough'}\n            @change=${(e: Event) => {\n              e.stopPropagation()\n\n              let val = (e.target as HTMLInputElement).value\n\n              this.mapping = {\n                ...this.mapping,\n                mappingFunction: val?.length > 0 ? val : 'passthrough'\n              }\n            }}\n          >\n            <ox-popup-list with-search align-left>\n              ${FunctionList.map(\n                func => html`\n                  <div option value=${func.name} ?selected=${func.name == mappingFunction}>${func.label}</div>\n                `\n              )}\n            </ox-popup-list>\n          </ox-select>\n        </div>\n\n        <div id=\"detail\">\n          <div id=\"variables\">\n            <div id=\"inputs\">\n              <label>inputs</label>\n              ${inputs.map(\n                (input, index) => html`\n                  <div class=\"variable-list\">\n                    ${input}\n                    <div class=\"padding\"></div>\n                    <md-icon @click=${() => this.swapVariablePosition('in', index, 'up')}>arrow_upward</md-icon\n                    ><md-icon @click=${() => this.swapVariablePosition('in', index, 'down')}>arrow_downward</md-icon>\n                  </div>\n                `\n              )}\n            </div>\n            <div id=\"returns\">\n              <label>returns</label>\n              ${outputs.map(\n                (output, index) => html`\n                  <div class=\"variable-list\">\n                    ${output}\n                    <div class=\"padding\"></div>\n                    <md-icon @click=${() => this.swapVariablePosition('out', index, 'up')}>arrow_upward</md-icon\n                    ><md-icon @click=${() => this.swapVariablePosition('out', index, 'down')}>arrow_downward</md-icon>\n                  </div>\n                `\n              )}\n            </div>\n          </div>\n          <div id=\"editor\">\n            <function-box-options-builder\n              .value=${parameters}\n              .props=${specifications}\n              @property-change=${this.updateOptions}\n            ></function-box-options-builder>\n            <ox-markdown src=${helpDataUrl} .toc=${false}></ox-markdown>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${this.updateMapping.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</button>\n      </div>\n    `\n  }\n\n  private swapVariablePosition(inout: 'in' | 'out', index: number, direction: 'up' | 'down') {\n    const list = inout === 'in' ? this.mapping.inputs : this.mapping.outputs\n\n    if ((direction === 'up' && index === 0) || (direction === 'down' && index === list.length - 1)) {\n      return // 첫 번째 요소를 위로 올리거나, 마지막 요소를 아래로 내릴 수 없음\n    }\n\n    const newIndex = direction === 'up' ? index - 1 : index + 1\n    const movingElement = this.shadowRoot!.querySelectorAll(`.variable-list`)[index] as HTMLElement\n    const targetElement = this.shadowRoot!.querySelectorAll(`.variable-list`)[newIndex] as HTMLElement\n\n    if (!movingElement || !targetElement) return\n\n    // 현재 위치 저장\n    const movingRect = movingElement.getBoundingClientRect()\n    const targetRect = targetElement.getBoundingClientRect()\n\n    const deltaY = targetRect.top - movingRect.top\n\n    // 애니메이션을 위해 transform 적용\n    movingElement.style.transition = 'transform 0.3s ease-in-out'\n    movingElement.style.transform = `translateY(${deltaY}px)`\n\n    // 애니메이션이 끝나면 실제로 데이터 순서 변경 및 리렌더링\n    setTimeout(() => {\n      const temp = list[index]\n      list[index] = list[newIndex]\n      list[newIndex] = temp\n\n      // 스타일 초기화\n      movingElement.style.transition = ''\n      movingElement.style.transform = ''\n\n      this.requestUpdate()\n    }, 300) // 300ms는 transition 속도와 동일\n  }\n\n  private updateOptions(e: Event) {\n    e.stopPropagation()\n\n    const parameters = this.mapping.parameters || {}\n\n    this.mapping.parameters = {\n      ...parameters,\n      ...(e as CustomEvent).detail\n    }\n  }\n\n  private updateMapping() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.mapping\n      })\n    )\n  }\n}\n"]}

package/dist/src/components/property-editor.d.ts

@@ -0,0 +1,35 @@
+import '@operato/property-editor/ox-property-editor-3axis.js';
+import '@operato/property-editor/ox-property-editor-3dish.js';
+import '@operato/property-editor/ox-property-editor-legend.js';
+import '@operato/property-editor/ox-property-editor-description.js';
+import '@operato/property-editor/ox-property-editor-number.js';
+import '@operato/property-editor/ox-property-editor-unit-number.js';
+import '@operato/property-editor/ox-property-editor-password.js';
+import '@operato/property-editor/ox-property-editor-action.js';
+import '@operato/property-editor/ox-property-editor-angle.js';
+import '@operato/property-editor/ox-property-editor-string.js';
+import '@operato/property-editor/ox-property-editor-data.js';
+import '@operato/property-editor/ox-property-editor-date.js';
+import '@operato/property-editor/ox-property-editor-month.js';
+import '@operato/property-editor/ox-property-editor-time.js';
+import '@operato/property-editor/ox-property-editor-datetime.js';
+import '@operato/property-editor/ox-property-editor-checkbox.js';
+import '@operato/property-editor/ox-property-editor-options.js';
+import '@operato/property-editor/ox-property-editor-select.js';
+import '@operato/property-editor/ox-property-editor-scene-component-id.js';
+import '@operato/property-editor/ox-property-editor-color.js';
+import '@operato/property-editor/ox-property-editor-multiple-colors.js';
+import '@operato/property-editor/ox-property-editor-solid-colorstops.js';
+import '@operato/property-editor/ox-property-editor-gradient-colorstops.js';
+import '@operato/property-editor/ox-property-editor-textarea.js';
+import '@operato/property-editor/ox-property-editor-table.js';
+import '@operato/property-editor/ox-property-editor-key-values.js';
+import '@operato/property-editor/ox-property-editor-partition-keys.js';
+import '@operato/property-editor/ox-property-editor-value-map.js';
+import '@operato/property-editor/ox-property-editor-value-ranges.js';
+import '@operato/property-editor/ox-property-editor-hashtags.js';
+import '@operato/property-editor/ox-property-editor-image.js';
+import '@operato/property-editor/ox-property-editor-file.js';
+import '@operato/attachment/ox-property-editor-attachment-selector.js';
+import '@operato/attachment/ox-property-editor-image-selector.js';
+import '@operato/font/ox-property-editor-font-selector.js';

package/dist/src/components/property-editor.js

@@ -0,0 +1,78 @@
+import '@operato/property-editor/ox-property-editor-3axis.js';
+import '@operato/property-editor/ox-property-editor-3dish.js';
+import '@operato/property-editor/ox-property-editor-legend.js';
+import '@operato/property-editor/ox-property-editor-description.js';
+import '@operato/property-editor/ox-property-editor-number.js';
+import '@operato/property-editor/ox-property-editor-unit-number.js';
+import '@operato/property-editor/ox-property-editor-password.js';
+import '@operato/property-editor/ox-property-editor-action.js';
+import '@operato/property-editor/ox-property-editor-angle.js';
+import '@operato/property-editor/ox-property-editor-string.js';
+import '@operato/property-editor/ox-property-editor-data.js';
+import '@operato/property-editor/ox-property-editor-date.js';
+import '@operato/property-editor/ox-property-editor-month.js';
+import '@operato/property-editor/ox-property-editor-time.js';
+import '@operato/property-editor/ox-property-editor-datetime.js';
+import '@operato/property-editor/ox-property-editor-checkbox.js';
+import '@operato/property-editor/ox-property-editor-options.js';
+import '@operato/property-editor/ox-property-editor-select.js';
+import '@operato/property-editor/ox-property-editor-scene-component-id.js';
+import '@operato/property-editor/ox-property-editor-color.js';
+import '@operato/property-editor/ox-property-editor-multiple-colors.js';
+import '@operato/property-editor/ox-property-editor-solid-colorstops.js';
+import '@operato/property-editor/ox-property-editor-gradient-colorstops.js';
+import '@operato/property-editor/ox-property-editor-textarea.js';
+import '@operato/property-editor/ox-property-editor-table.js';
+import '@operato/property-editor/ox-property-editor-key-values.js';
+import '@operato/property-editor/ox-property-editor-partition-keys.js';
+import '@operato/property-editor/ox-property-editor-value-map.js';
+import '@operato/property-editor/ox-property-editor-value-ranges.js';
+import '@operato/property-editor/ox-property-editor-hashtags.js';
+import '@operato/property-editor/ox-property-editor-image.js';
+import '@operato/property-editor/ox-property-editor-file.js';
+import '@operato/attachment/ox-property-editor-attachment-selector.js';
+import '@operato/attachment/ox-property-editor-image-selector.js';
+import '@operato/font/ox-property-editor-font-selector.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+OxPropertyEditor.register({
+    legend: 'ox-property-editor-legend',
+    description: 'ox-property-editor-description',
+    number: 'ox-property-editor-number',
+    'unit-number': 'ox-property-editor-unit-number',
+    slider: 'ox-property-editor-range',
+    password: 'ox-property-editor-password',
+    action: 'ox-property-editor-action',
+    angle: 'ox-property-editor-angle',
+    string: 'ox-property-editor-string',
+    textarea: 'ox-property-editor-textarea',
+    javascript: 'ox-property-editor-textarea',
+    script: 'ox-property-editor-textarea',
+    checkbox: 'ox-property-editor-checkbox',
+    boolean: 'ox-property-editor-checkbox',
+    select: 'ox-property-editor-select',
+    date: 'ox-property-editor-date',
+    month: 'ox-property-editor-month',
+    datetime: 'ox-property-editor-datetime',
+    time: 'ox-property-editor-time',
+    options: 'ox-property-editor-options',
+    data: 'ox-property-editor-data',
+    file: 'ox-property-editor-file',
+    image: 'ox-property-editor-image',
+    'range-input': 'ox-property-editor-range',
+    'attachment-selector': 'ox-property-editor-attachment-selector',
+    'gltf-selector': 'ox-property-editor-attachment-selector',
+    'image-selector': 'ox-property-editor-image-selector',
+    color: 'ox-property-editor-color',
+    'solid-color-stops': 'ox-property-editor-solid-colorstops',
+    'gradient-color-stops': 'ox-property-editor-gradient-colorstops',
+    'multiple-color': 'ox-property-editor-multiple-colors',
+    map: 'ox-property-editor-value-map',
+    range: 'ox-property-editor-value-ranges',
+    'editor-table': 'ox-property-editor-table',
+    'id-input': 'ox-property-editor-scene-component-id',
+    'font-selector': 'ox-property-editor-font-selector',
+    'partition-keys': 'ox-property-editor-partion-keys',
+    'key-values': 'ox-property-editor-key-values',
+    hashtags: 'ox-property-editor-hashtags'
+});
+//# sourceMappingURL=property-editor.js.map

package/dist/src/components/property-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor.js","sourceRoot":"","sources":["../../../src/components/property-editor.ts"],"names":[],"mappings":"AAAA,OAAO,sDAAsD,CAAA;AAC7D,OAAO,sDAAsD,CAAA;AAC7D,OAAO,uDAAuD,CAAA;AAC9D,OAAO,4DAA4D,CAAA;AACnE,OAAO,uDAAuD,CAAA;AAC9D,OAAO,4DAA4D,CAAA;AACnE,OAAO,yDAAyD,CAAA;AAChE,OAAO,uDAAuD,CAAA;AAC9D,OAAO,sDAAsD,CAAA;AAC7D,OAAO,uDAAuD,CAAA;AAC9D,OAAO,qDAAqD,CAAA;AAC5D,OAAO,qDAAqD,CAAA;AAC5D,OAAO,sDAAsD,CAAA;AAC7D,OAAO,qDAAqD,CAAA;AAC5D,OAAO,yDAAyD,CAAA;AAChE,OAAO,yDAAyD,CAAA;AAChE,OAAO,wDAAwD,CAAA;AAC/D,OAAO,uDAAuD,CAAA;AAC9D,OAAO,mEAAmE,CAAA;AAC1E,OAAO,sDAAsD,CAAA;AAC7D,OAAO,gEAAgE,CAAA;AACvE,OAAO,iEAAiE,CAAA;AACxE,OAAO,oEAAoE,CAAA;AAC3E,OAAO,yDAAyD,CAAA;AAChE,OAAO,sDAAsD,CAAA;AAC7D,OAAO,2DAA2D,CAAA;AAClE,OAAO,+DAA+D,CAAA;AACtE,OAAO,0DAA0D,CAAA;AACjE,OAAO,6DAA6D,CAAA;AACpE,OAAO,yDAAyD,CAAA;AAChE,OAAO,sDAAsD,CAAA;AAC7D,OAAO,qDAAqD,CAAA;AAC5D,OAAO,+DAA+D,CAAA;AACtE,OAAO,0DAA0D,CAAA;AACjE,OAAO,mDAAmD,CAAA;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAE3D,gBAAgB,CAAC,QAAQ,CAAC;IACxB,MAAM,EAAE,2BAA2B;IACnC,WAAW,EAAE,gCAAgC;IAC7C,MAAM,EAAE,2BAA2B;IACnC,aAAa,EAAE,gCAAgC;IAC/C,MAAM,EAAE,0BAA0B;IAClC,QAAQ,EAAE,6BAA6B;IACvC,MAAM,EAAE,2BAA2B;IACnC,KAAK,EAAE,0BAA0B;IACjC,MAAM,EAAE,2BAA2B;IACnC,QAAQ,EAAE,6BAA6B;IACvC,UAAU,EAAE,6BAA6B;IACzC,MAAM,EAAE,6BAA6B;IACrC,QAAQ,EAAE,6BAA6B;IACvC,OAAO,EAAE,6BAA6B;IACtC,MAAM,EAAE,2BAA2B;IACnC,IAAI,EAAE,yBAAyB;IAC/B,KAAK,EAAE,0BAA0B;IACjC,QAAQ,EAAE,6BAA6B;IACvC,IAAI,EAAE,yBAAyB;IAC/B,OAAO,EAAE,4BAA4B;IACrC,IAAI,EAAE,yBAAyB;IAC/B,IAAI,EAAE,yBAAyB;IAC/B,KAAK,EAAE,0BAA0B;IACjC,aAAa,EAAE,0BAA0B;IACzC,qBAAqB,EAAE,wCAAwC;IAC/D,eAAe,EAAE,wCAAwC;IACzD,gBAAgB,EAAE,mCAAmC;IACrD,KAAK,EAAE,0BAA0B;IACjC,mBAAmB,EAAE,qCAAqC;IAC1D,sBAAsB,EAAE,wCAAwC;IAChE,gBAAgB,EAAE,oCAAoC;IACtD,GAAG,EAAE,8BAA8B;IACnC,KAAK,EAAE,iCAAiC;IACxC,cAAc,EAAE,0BAA0B;IAC1C,UAAU,EAAE,uCAAuC;IACnD,eAAe,EAAE,kCAAkC;IACnD,gBAAgB,EAAE,iCAAiC;IACnD,YAAY,EAAE,+BAA+B;IAC7C,QAAQ,EAAE,6BAA6B;CACxC,CAAC,CAAA","sourcesContent":["import '@operato/property-editor/ox-property-editor-3axis.js'\nimport '@operato/property-editor/ox-property-editor-3dish.js'\nimport '@operato/property-editor/ox-property-editor-legend.js'\nimport '@operato/property-editor/ox-property-editor-description.js'\nimport '@operato/property-editor/ox-property-editor-number.js'\nimport '@operato/property-editor/ox-property-editor-unit-number.js'\nimport '@operato/property-editor/ox-property-editor-password.js'\nimport '@operato/property-editor/ox-property-editor-action.js'\nimport '@operato/property-editor/ox-property-editor-angle.js'\nimport '@operato/property-editor/ox-property-editor-string.js'\nimport '@operato/property-editor/ox-property-editor-data.js'\nimport '@operato/property-editor/ox-property-editor-date.js'\nimport '@operato/property-editor/ox-property-editor-month.js'\nimport '@operato/property-editor/ox-property-editor-time.js'\nimport '@operato/property-editor/ox-property-editor-datetime.js'\nimport '@operato/property-editor/ox-property-editor-checkbox.js'\nimport '@operato/property-editor/ox-property-editor-options.js'\nimport '@operato/property-editor/ox-property-editor-select.js'\nimport '@operato/property-editor/ox-property-editor-scene-component-id.js'\nimport '@operato/property-editor/ox-property-editor-color.js'\nimport '@operato/property-editor/ox-property-editor-multiple-colors.js'\nimport '@operato/property-editor/ox-property-editor-solid-colorstops.js'\nimport '@operato/property-editor/ox-property-editor-gradient-colorstops.js'\nimport '@operato/property-editor/ox-property-editor-textarea.js'\nimport '@operato/property-editor/ox-property-editor-table.js'\nimport '@operato/property-editor/ox-property-editor-key-values.js'\nimport '@operato/property-editor/ox-property-editor-partition-keys.js'\nimport '@operato/property-editor/ox-property-editor-value-map.js'\nimport '@operato/property-editor/ox-property-editor-value-ranges.js'\nimport '@operato/property-editor/ox-property-editor-hashtags.js'\nimport '@operato/property-editor/ox-property-editor-image.js'\nimport '@operato/property-editor/ox-property-editor-file.js'\nimport '@operato/attachment/ox-property-editor-attachment-selector.js'\nimport '@operato/attachment/ox-property-editor-image-selector.js'\nimport '@operato/font/ox-property-editor-font-selector.js'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\n\nOxPropertyEditor.register({\n  legend: 'ox-property-editor-legend',\n  description: 'ox-property-editor-description',\n  number: 'ox-property-editor-number',\n  'unit-number': 'ox-property-editor-unit-number',\n  slider: 'ox-property-editor-range',\n  password: 'ox-property-editor-password',\n  action: 'ox-property-editor-action',\n  angle: 'ox-property-editor-angle',\n  string: 'ox-property-editor-string',\n  textarea: 'ox-property-editor-textarea',\n  javascript: 'ox-property-editor-textarea',\n  script: 'ox-property-editor-textarea',\n  checkbox: 'ox-property-editor-checkbox',\n  boolean: 'ox-property-editor-checkbox',\n  select: 'ox-property-editor-select',\n  date: 'ox-property-editor-date',\n  month: 'ox-property-editor-month',\n  datetime: 'ox-property-editor-datetime',\n  time: 'ox-property-editor-time',\n  options: 'ox-property-editor-options',\n  data: 'ox-property-editor-data',\n  file: 'ox-property-editor-file',\n  image: 'ox-property-editor-image',\n  'range-input': 'ox-property-editor-range',\n  'attachment-selector': 'ox-property-editor-attachment-selector',\n  'gltf-selector': 'ox-property-editor-attachment-selector',\n  'image-selector': 'ox-property-editor-image-selector',\n  color: 'ox-property-editor-color',\n  'solid-color-stops': 'ox-property-editor-solid-colorstops',\n  'gradient-color-stops': 'ox-property-editor-gradient-colorstops',\n  'multiple-color': 'ox-property-editor-multiple-colors',\n  map: 'ox-property-editor-value-map',\n  range: 'ox-property-editor-value-ranges',\n  'editor-table': 'ox-property-editor-table',\n  'id-input': 'ox-property-editor-scene-component-id',\n  'font-selector': 'ox-property-editor-font-selector',\n  'partition-keys': 'ox-property-editor-partion-keys',\n  'key-values': 'ox-property-editor-key-values',\n  hashtags: 'ox-property-editor-hashtags'\n})\n"]}

package/dist/src/context/data-mapper-context.d.ts

@@ -0,0 +1,12 @@
+import { Mapping } from '../types.js';
+export interface DataMapperContextType {
+    getUniqueId: () => string;
+    getNodePosition: (nodeId: string, source: boolean) => {
+        x: number;
+        y: number;
+    } | undefined;
+    updateMappings: (mappings: Mapping[]) => void;
+}
+export declare const dataMapperContext: {
+    __context__: DataMapperContextType;
+};

package/dist/src/context/data-mapper-context.js

@@ -0,0 +1,3 @@
+import { createContext } from '@lit/context';
+export const dataMapperContext = createContext('data-mapper-context');
+//# sourceMappingURL=data-mapper-context.js.map

package/dist/src/context/data-mapper-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-mapper-context.js","sourceRoot":"","sources":["../../../src/context/data-mapper-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAW5C,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAwB,qBAAqB,CAAC,CAAA","sourcesContent":["import { createContext } from '@lit/context'\n\nimport {} from '../types.js'\nimport { Mapping, TreeNode } from '../types.js'\n\nexport interface DataMapperContextType {\n  getUniqueId: () => string\n  getNodePosition: (nodeId: string, source: boolean) => { x: number; y: number } | undefined\n  updateMappings: (mappings: Mapping[]) => void\n}\n\nexport const dataMapperContext = createContext<DataMapperContextType>('data-mapper-context')\n"]}