@operato/data-mapper 9.0.0-beta.50 → 9.0.0-beta.52

package/dist/src/ox-mapping-area.js

@@ -0,0 +1,382 @@
+import { __decorate } from "tslib";
+import { LitElement, html, svg, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { consume } from '@lit/context';
+import { OxPopup } from '@operato/popup';
+import { dataMapperContext } from './context/data-mapper-context.js';
+import './components/function-box-popup.js';
+let OxMappingArea = class OxMappingArea extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.mappings = [];
+        this.popupVisible = false;
+        this.popupPosition = { x: 0, y: 0 };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Delete' || e.key === 'Backspace') {
+                if (this.selectedLine) {
+                    this.deleteSelectedLine();
+                }
+                else if (this.selectedMapping) {
+                    this.deleteSelectedMapping();
+                }
+            }
+        };
+        this.handleResize = () => {
+            this.requestUpdate();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('resize', this.handleResize);
+        window.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('resize', this.handleResize);
+        window.removeEventListener('keydown', this.handleKeyDown);
+    }
+    render() {
+        const mappings = this.mappings || [];
+        return html `
+      <div class="mapping-area" @dragover=${this.handleDragOver} @drop=${this.handleDrop}>
+        <svg>${mappings.map(m => this.renderMapping(m))}</svg>
+      </div>
+    `;
+    }
+    renderMapping(mapping) {
+        var _a;
+        const mappingAreaWidth = this.clientWidth;
+        const x = mappingAreaWidth / 2 - 50;
+        let y = mapping.position.y;
+        if (y === undefined) {
+            const positions = [...mapping.inputs, ...mapping.outputs]
+                .map(nodeId => this.dataMapperContext.getNodePosition(nodeId, mapping.inputs.includes(nodeId)))
+                .filter(Boolean);
+            y =
+                positions.length > 0
+                    ? positions.reduce((sum, pos) => sum + pos.y, 0) / positions.length - 10
+                    : this.clientHeight / 2 - 10;
+        }
+        return svg `
+      <defs>
+        <!-- 기본 화살표 (검은색) -->
+        <marker id="arrowhead" markerWidth="6" markerHeight="4" refX="5.4" refY="2" orient="auto" markerUnits="strokeWidth">
+          <polygon points="0 0, 6 2, 0 4" />
+        </marker>
+
+        <!-- 선택된 화살표 (붉은색) -->
+        <marker id="arrowhead-selected" markerWidth="6" markerHeight="4" refX="5.4" refY="2" orient="auto" markerUnits="strokeWidth">
+          <polygon points="0 0, 6 2, 0 4" />
+        </marker>
+      </defs>
+      
+      <g>
+        ${mapping.inputs.map(input => {
+            const sourcePos = this.dataMapperContext.getNodePosition(input, true);
+            const isSelected = this.isLineSelected(mapping, input, true);
+            return sourcePos
+                ? svg `
+              <!-- 베지어 커브 경로 -->
+              <path 
+                d="M ${sourcePos.x},${sourcePos.y} 
+                   C ${sourcePos.x + 100},${sourcePos.y} 
+                     ${x - 100},${y + 10} 
+                     ${x},${y + 10}"
+                class="mapping-line"
+                marker-end="url(#${isSelected ? 'arrowhead-selected' : 'arrowhead'})"
+                ?selected=${isSelected}>
+              </path>
+  
+              <!-- 클릭 이벤트를 위한 히트박스 -->
+              <path d="M ${sourcePos.x},${sourcePos.y} 
+                       C ${sourcePos.x + 100},${sourcePos.y} 
+                         ${x - 100},${y + 10} 
+                         ${x},${y + 10}"
+                class="mapping-line-for-select"
+                @click=${() => this.selectMappingLine(mapping, input, true)}>
+              </path>
+            `
+                : nothing;
+        })}
+  
+        <rect class="mapping-box"
+          width="100" height="20"
+          x=${x} y=${y}
+          ?selected=${((_a = this.selectedMapping) === null || _a === void 0 ? void 0 : _a.id) === mapping.id}
+          @pointerdown=${(e) => this.startDragForMappingBox(e, mapping)}
+          @click=${() => this.selectMappingBox(mapping)}
+          @dblclick=${(e) => this.openPopup(e, mapping)}>
+        </rect>
+  
+        <text x=${x + 50} y=${y + 15} fill="black" font-size="12" text-anchor="middle" pointer-events="none">
+          ${mapping.mappingFunction || 'passthrough'}
+        </text>
+  
+        ${mapping.outputs.map(output => {
+            const targetPos = this.dataMapperContext.getNodePosition(output, false);
+            const isSelected = this.isLineSelected(mapping, output, false);
+            return targetPos
+                ? svg `
+              <!-- 베지어 커브 경로 -->
+              <path 
+                d="M ${x + 100},${y + 10} 
+                   C ${x + 200},${y + 10} 
+                     ${targetPos.x - 100},${targetPos.y} 
+                     ${targetPos.x},${targetPos.y}"
+                class="mapping-line"
+                marker-end="url(#${isSelected ? 'arrowhead-selected' : 'arrowhead'})"
+                ?selected=${isSelected}>
+              </path>
+  
+              <!-- 클릭 이벤트를 위한 히트박스 -->
+              <path d="M ${x + 100},${y + 10} 
+                       C ${x + 200},${y + 10} 
+                         ${targetPos.x - 100},${targetPos.y} 
+                         ${targetPos.x},${targetPos.y}"
+                class="mapping-line-for-select"
+                @click=${() => this.selectMappingLine(mapping, output, false)}>
+              </path>
+            `
+                : nothing;
+        })}
+      </g>
+    `;
+    }
+    startDragForMappingBox(e, mapping) {
+        e.stopPropagation();
+        let dragStartY = mapping.position.y;
+        let dragOffsetY = e.clientY;
+        let draggingBox = mapping;
+        const onDrag = (e) => {
+            e.preventDefault();
+            if (!draggingBox)
+                return;
+            const newY = dragStartY + e.clientY - dragOffsetY;
+            const minY = 0;
+            const maxY = this.clientHeight - 20;
+            draggingBox.position = {
+                x: this.clientWidth / 2 - 50,
+                y: Math.max(minY, Math.min(maxY, newY))
+            };
+            this.requestUpdate();
+        };
+        const stopDrag = (e) => {
+            e.stopPropagation();
+            window.removeEventListener('pointermove', onDrag);
+            window.removeEventListener('pointerup', stopDrag);
+            this.dataMapperContext.updateMappings([...this.mappings]);
+        };
+        window.addEventListener('pointermove', onDrag);
+        window.addEventListener('pointerup', stopDrag);
+    }
+    handleDragOver(e) {
+        e.preventDefault();
+    }
+    handleDrop(e) {
+        e.preventDefault();
+        const nodeId = e.dataTransfer.getData('application/node-id');
+        if (!nodeId) {
+            return;
+        }
+        const from = e.dataTransfer.getData('application/from');
+        const { top, left } = this.getBoundingClientRect();
+        const dropX = e.clientX - left;
+        const dropY = e.clientY - top;
+        let droppedOnExistingBox = false;
+        let selectedMapping = null;
+        const mappings = this.mappings.map(mapping => {
+            const boxY = mapping.position.y;
+            const boxX = this.clientWidth / 2 - 50;
+            if (dropY >= boxY && dropY <= boxY + 20 && dropX >= boxX && dropX < boxX + 100) {
+                droppedOnExistingBox = true;
+                const updatedMapping = {
+                    ...mapping,
+                    inputs: from === 'source' ? [...new Set([...mapping.inputs, nodeId])] : mapping.inputs,
+                    outputs: from === 'source' ? mapping.outputs : [...new Set([...mapping.outputs, nodeId])]
+                };
+                selectedMapping = updatedMapping;
+                return updatedMapping;
+            }
+            return mapping;
+        });
+        if (!droppedOnExistingBox) {
+            const createdMapping = {
+                id: this.dataMapperContext.getUniqueId(),
+                function: 'Transform',
+                inputs: from == 'source' ? [nodeId] : [],
+                outputs: from == 'source' ? [] : [nodeId],
+                position: { x: this.clientWidth / 2 - 50, y: dropY - 10 }
+            };
+            mappings.push(createdMapping);
+            selectedMapping = createdMapping;
+        }
+        this.dataMapperContext.updateMappings(mappings);
+        selectedMapping && this.selectMappingBox(selectedMapping);
+    }
+    selectMappingBox(mapping) {
+        this.selectedMapping = mapping;
+        this.selectedLine = undefined;
+        this.requestUpdate();
+    }
+    selectMappingLine(mapping, nodeId, isInput) {
+        this.selectedMapping = undefined;
+        this.selectedLine = { mapping, nodeId, isInput };
+        this.requestUpdate();
+    }
+    isLineSelected(mapping, nodeId, isInput) {
+        var _a;
+        return (((_a = this.selectedLine) === null || _a === void 0 ? void 0 : _a.mapping) === mapping &&
+            this.selectedLine.nodeId === nodeId &&
+            this.selectedLine.isInput === isInput);
+    }
+    openPopup(e, mapping) {
+        const popup = OxPopup.open({
+            template: html `
+        <function-box-popup
+          .mapping=${mapping}
+          @change=${(e) => {
+                const changed = e.detail;
+                this.dataMapperContext.updateMappings(this.mappings.map(mapping => {
+                    if (mapping.id !== changed.id) {
+                        return mapping;
+                    }
+                    return changed;
+                }));
+                popup.close();
+            }}
+        ></function-box-popup>
+      `,
+            style: 'width: 80vw; height: 80vh;',
+            preventCloseOnBlur: true,
+            backdrop: true
+        });
+    }
+    getSelectedTransformLogic() {
+        const mapping = this.mappings.find(m => m === this.selectedMapping);
+        return (mapping === null || mapping === void 0 ? void 0 : mapping.mappingFunction) || 'passthrough';
+    }
+    updateTransformLogic(e) {
+        const input = e.target;
+        const mappings = this.mappings.map(m => m.mappingFunction === this.selectedMapping ? { ...m, mappingFunction: input.value } : m);
+        this.dataMapperContext.updateMappings(mappings);
+    }
+    deleteSelectedLine() {
+        if (!this.selectedLine)
+            return;
+        const { mapping, nodeId, isInput } = this.selectedLine;
+        const updatedMappings = this.mappings
+            .map(m => m === mapping
+            ? {
+                ...m,
+                inputs: isInput ? m.inputs.filter(id => id !== nodeId) : m.inputs,
+                outputs: !isInput ? m.outputs.filter(id => id !== nodeId) : m.outputs
+            }
+            : m)
+            .filter(m => m.inputs.length > 0 || m.outputs.length > 0); // 입력/출력이 모두 삭제되면 제거
+        this.dataMapperContext.updateMappings(updatedMappings);
+        this.selectedLine = undefined;
+        this.requestUpdate();
+    }
+    deleteSelectedMapping() {
+        this.dataMapperContext.updateMappings(this.mappings.filter(m => m !== this.selectedMapping));
+        this.selectedMapping = undefined;
+        this.requestUpdate();
+    }
+};
+OxMappingArea.styles = css `
+    :host {
+      display: flex;
+
+      --line-color: #5b5858;
+      --selected-line-color: red;
+    }
+
+    .mapping-area {
+      flex: 1;
+      padding: 0;
+      margin: 0;
+      text-align: center;
+      position: relative;
+    }
+
+    svg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    .mapping-box {
+      fill: rgba(0, 255, 0, 0.3);
+      stroke: green;
+      stroke-width: 1;
+      cursor: grab;
+      pointer-events: all;
+      user-select: none;
+    }
+
+    .mapping-box:hover {
+      fill: rgba(0, 255, 0, 0.5);
+    }
+
+    .mapping-box[selected] {
+      stroke: var(--selected-line-color);
+      stroke-width: 2;
+    }
+
+    .mapping-line {
+      stroke: var(--line-color);
+      stroke-width: 1;
+      fill: none;
+      cursor: pointer;
+      pointer-events: all;
+    }
+
+    .mapping-line[selected] {
+      stroke: var(--selected-line-color);
+      stroke-width: 1.5;
+    }
+
+    .mapping-line-for-select {
+      stroke: transparent;
+      stroke-width: 10;
+      fill: none;
+      cursor: pointer;
+      pointer-events: all;
+    }
+
+    marker * {
+      stroke: var(--line-color);
+      fill: var(--line-color);
+    }
+
+    marker#arrowhead-selected * {
+      stroke: var(--selected-line-color);
+      fill: var(--selected-line-color);
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], OxMappingArea.prototype, "mappings", void 0);
+__decorate([
+    state()
+], OxMappingArea.prototype, "selectedMapping", void 0);
+__decorate([
+    state()
+], OxMappingArea.prototype, "selectedLine", void 0);
+__decorate([
+    state()
+], OxMappingArea.prototype, "popupVisible", void 0);
+__decorate([
+    state()
+], OxMappingArea.prototype, "popupPosition", void 0);
+__decorate([
+    consume({ context: dataMapperContext, subscribe: true })
+], OxMappingArea.prototype, "dataMapperContext", void 0);
+OxMappingArea = __decorate([
+    customElement('ox-mapping-area')
+], OxMappingArea);
+export { OxMappingArea };
+//# sourceMappingURL=ox-mapping-area.js.map

package/dist/src/ox-mapping-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-mapping-area.js","sourceRoot":"","sources":["../../src/ox-mapping-area.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, svg, css, nothing, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { consume } from '@lit/context'\nimport { OxPopup } from '@operato/popup'\n\nimport { Mapping } from './types.js'\nimport { dataMapperContext, DataMapperContextType } from './context/data-mapper-context.js'\nimport './components/function-box-popup.js'\n\n@customElement('ox-mapping-area')\nexport class OxMappingArea extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n\n      --line-color: #5b5858;\n      --selected-line-color: red;\n    }\n\n    .mapping-area {\n      flex: 1;\n      padding: 0;\n      margin: 0;\n      text-align: center;\n      position: relative;\n    }\n\n    svg {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n    }\n\n    .mapping-box {\n      fill: rgba(0, 255, 0, 0.3);\n      stroke: green;\n      stroke-width: 1;\n      cursor: grab;\n      pointer-events: all;\n      user-select: none;\n    }\n\n    .mapping-box:hover {\n      fill: rgba(0, 255, 0, 0.5);\n    }\n\n    .mapping-box[selected] {\n      stroke: var(--selected-line-color);\n      stroke-width: 2;\n    }\n\n    .mapping-line {\n      stroke: var(--line-color);\n      stroke-width: 1;\n      fill: none;\n      cursor: pointer;\n      pointer-events: all;\n    }\n\n    .mapping-line[selected] {\n      stroke: var(--selected-line-color);\n      stroke-width: 1.5;\n    }\n\n    .mapping-line-for-select {\n      stroke: transparent;\n      stroke-width: 10;\n      fill: none;\n      cursor: pointer;\n      pointer-events: all;\n    }\n\n    marker * {\n      stroke: var(--line-color);\n      fill: var(--line-color);\n    }\n\n    marker#arrowhead-selected * {\n      stroke: var(--selected-line-color);\n      fill: var(--selected-line-color);\n    }\n  `\n\n  @property({ type: Array }) mappings: Mapping[] = []\n\n  @state() selectedMapping?: Mapping\n  @state() selectedLine?: { mapping: Mapping; nodeId: string; isInput: boolean }\n  @state() popupVisible: boolean = false\n  @state() popupPosition = { x: 0, y: 0 }\n\n  @consume({ context: dataMapperContext, subscribe: true })\n  private dataMapperContext!: DataMapperContextType\n\n  connectedCallback() {\n    super.connectedCallback()\n    window.addEventListener('resize', this.handleResize)\n    window.addEventListener('keydown', this.handleKeyDown)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    window.removeEventListener('resize', this.handleResize)\n    window.removeEventListener('keydown', this.handleKeyDown)\n  }\n\n  render() {\n    const mappings = this.mappings || []\n\n    return html`\n      <div class=\"mapping-area\" @dragover=${this.handleDragOver} @drop=${this.handleDrop}>\n        <svg>${mappings.map(m => this.renderMapping(m))}</svg>\n      </div>\n    `\n  }\n\n  renderMapping(mapping: Mapping) {\n    const mappingAreaWidth = this.clientWidth\n    const x = mappingAreaWidth / 2 - 50\n    let y = mapping.position.y\n\n    if (y === undefined) {\n      const positions = [...mapping.inputs, ...mapping.outputs]\n        .map(nodeId => this.dataMapperContext.getNodePosition(nodeId, mapping.inputs.includes(nodeId)))\n        .filter(Boolean) as { x: number; y: number }[]\n\n      y =\n        positions.length > 0\n          ? positions.reduce((sum, pos) => sum + pos.y, 0) / positions.length - 10\n          : this.clientHeight / 2 - 10\n    }\n\n    return svg`\n      <defs>\n        <!-- 기본 화살표 (검은색) -->\n        <marker id=\"arrowhead\" markerWidth=\"6\" markerHeight=\"4\" refX=\"5.4\" refY=\"2\" orient=\"auto\" markerUnits=\"strokeWidth\">\n          <polygon points=\"0 0, 6 2, 0 4\" />\n        </marker>\n\n        <!-- 선택된 화살표 (붉은색) -->\n        <marker id=\"arrowhead-selected\" markerWidth=\"6\" markerHeight=\"4\" refX=\"5.4\" refY=\"2\" orient=\"auto\" markerUnits=\"strokeWidth\">\n          <polygon points=\"0 0, 6 2, 0 4\" />\n        </marker>\n      </defs>\n      \n      <g>\n        ${mapping.inputs.map(input => {\n          const sourcePos = this.dataMapperContext.getNodePosition(input, true)\n          const isSelected = this.isLineSelected(mapping, input, true)\n          return sourcePos\n            ? svg`\n              <!-- 베지어 커브 경로 -->\n              <path \n                d=\"M ${sourcePos.x},${sourcePos.y} \n                   C ${sourcePos.x + 100},${sourcePos.y} \n                     ${x - 100},${y + 10} \n                     ${x},${y + 10}\"\n                class=\"mapping-line\"\n                marker-end=\"url(#${isSelected ? 'arrowhead-selected' : 'arrowhead'})\"\n                ?selected=${isSelected}>\n              </path>\n  \n              <!-- 클릭 이벤트를 위한 히트박스 -->\n              <path d=\"M ${sourcePos.x},${sourcePos.y} \n                       C ${sourcePos.x + 100},${sourcePos.y} \n                         ${x - 100},${y + 10} \n                         ${x},${y + 10}\"\n                class=\"mapping-line-for-select\"\n                @click=${() => this.selectMappingLine(mapping, input, true)}>\n              </path>\n            `\n            : nothing\n        })}\n  \n        <rect class=\"mapping-box\"\n          width=\"100\" height=\"20\"\n          x=${x} y=${y}\n          ?selected=${this.selectedMapping?.id === mapping.id}\n          @pointerdown=${(e: PointerEvent) => this.startDragForMappingBox(e, mapping)}\n          @click=${() => this.selectMappingBox(mapping)}\n          @dblclick=${(e: PointerEvent) => this.openPopup(e, mapping)}>\n        </rect>\n  \n        <text x=${x + 50} y=${y + 15} fill=\"black\" font-size=\"12\" text-anchor=\"middle\" pointer-events=\"none\">\n          ${mapping.mappingFunction || 'passthrough'}\n        </text>\n  \n        ${mapping.outputs.map(output => {\n          const targetPos = this.dataMapperContext.getNodePosition(output, false)\n          const isSelected = this.isLineSelected(mapping, output, false)\n          return targetPos\n            ? svg`\n              <!-- 베지어 커브 경로 -->\n              <path \n                d=\"M ${x + 100},${y + 10} \n                   C ${x + 200},${y + 10} \n                     ${targetPos.x - 100},${targetPos.y} \n                     ${targetPos.x},${targetPos.y}\"\n                class=\"mapping-line\"\n                marker-end=\"url(#${isSelected ? 'arrowhead-selected' : 'arrowhead'})\"\n                ?selected=${isSelected}>\n              </path>\n  \n              <!-- 클릭 이벤트를 위한 히트박스 -->\n              <path d=\"M ${x + 100},${y + 10} \n                       C ${x + 200},${y + 10} \n                         ${targetPos.x - 100},${targetPos.y} \n                         ${targetPos.x},${targetPos.y}\"\n                class=\"mapping-line-for-select\"\n                @click=${() => this.selectMappingLine(mapping, output, false)}>\n              </path>\n            `\n            : nothing\n        })}\n      </g>\n    `\n  }\n\n  startDragForMappingBox(e: PointerEvent, mapping: Mapping) {\n    e.stopPropagation()\n\n    let dragStartY = mapping.position.y\n    let dragOffsetY = e.clientY\n    let draggingBox = mapping\n\n    const onDrag = (e: PointerEvent) => {\n      e.preventDefault()\n      if (!draggingBox) return\n\n      const newY = dragStartY + e.clientY - dragOffsetY\n\n      const minY = 0\n      const maxY = this.clientHeight - 20\n\n      draggingBox.position = {\n        x: this.clientWidth / 2 - 50,\n        y: Math.max(minY, Math.min(maxY, newY))\n      }\n\n      this.requestUpdate()\n    }\n\n    const stopDrag = (e: PointerEvent) => {\n      e.stopPropagation()\n      window.removeEventListener('pointermove', onDrag)\n      window.removeEventListener('pointerup', stopDrag)\n\n      this.dataMapperContext.updateMappings([...this.mappings])\n    }\n\n    window.addEventListener('pointermove', onDrag)\n    window.addEventListener('pointerup', stopDrag)\n  }\n\n  handleDragOver(e: DragEvent) {\n    e.preventDefault()\n  }\n\n  handleDrop(e: DragEvent) {\n    e.preventDefault()\n    const nodeId = e.dataTransfer!.getData('application/node-id')\n    if (!nodeId) {\n      return\n    }\n\n    const from = e.dataTransfer!.getData('application/from')\n    const { top, left } = this.getBoundingClientRect()\n    const dropX = e.clientX - left\n    const dropY = e.clientY - top\n\n    let droppedOnExistingBox = false\n    let selectedMapping = null\n\n    const mappings = this.mappings.map(mapping => {\n      const boxY = mapping.position.y\n      const boxX = this.clientWidth / 2 - 50\n\n      if (dropY >= boxY && dropY <= boxY + 20 && dropX >= boxX && dropX < boxX + 100) {\n        droppedOnExistingBox = true\n\n        const updatedMapping = {\n          ...mapping,\n          inputs: from === 'source' ? [...new Set([...mapping.inputs, nodeId])] : mapping.inputs,\n          outputs: from === 'source' ? mapping.outputs : [...new Set([...mapping.outputs, nodeId])]\n        }\n\n        selectedMapping = updatedMapping\n\n        return updatedMapping\n      }\n\n      return mapping\n    })\n\n    if (!droppedOnExistingBox) {\n      const createdMapping = {\n        id: this.dataMapperContext.getUniqueId(),\n        function: 'Transform',\n        inputs: from == 'source' ? [nodeId] : [],\n        outputs: from == 'source' ? [] : [nodeId],\n        position: { x: this.clientWidth / 2 - 50, y: dropY - 10 }\n      }\n\n      mappings.push(createdMapping)\n\n      selectedMapping = createdMapping\n    }\n\n    this.dataMapperContext.updateMappings(mappings)\n\n    selectedMapping && this.selectMappingBox(selectedMapping)\n  }\n\n  selectMappingBox(mapping: Mapping) {\n    this.selectedMapping = mapping\n    this.selectedLine = undefined\n    this.requestUpdate()\n  }\n\n  selectMappingLine(mapping: Mapping, nodeId: string, isInput: boolean) {\n    this.selectedMapping = undefined\n    this.selectedLine = { mapping, nodeId, isInput }\n    this.requestUpdate()\n  }\n\n  isLineSelected(mapping: Mapping, nodeId: string, isInput: boolean) {\n    return (\n      this.selectedLine?.mapping === mapping &&\n      this.selectedLine.nodeId === nodeId &&\n      this.selectedLine.isInput === isInput\n    )\n  }\n\n  openPopup(e: PointerEvent, mapping: Mapping) {\n    const popup = OxPopup.open({\n      template: html`\n        <function-box-popup\n          .mapping=${mapping}\n          @change=${(e: CustomEvent) => {\n            const changed = e.detail\n\n            this.dataMapperContext.updateMappings(\n              this.mappings.map(mapping => {\n                if (mapping.id !== changed.id) {\n                  return mapping\n                }\n\n                return changed\n              })\n            )\n            popup.close()\n          }}\n        ></function-box-popup>\n      `,\n      style: 'width: 80vw; height: 80vh;',\n      preventCloseOnBlur: true,\n      backdrop: true\n    })\n  }\n\n  getSelectedTransformLogic(): string {\n    const mapping = this.mappings.find(m => m === this.selectedMapping)\n    return mapping?.mappingFunction || 'passthrough'\n  }\n\n  updateTransformLogic(e: Event) {\n    const input = e.target as HTMLInputElement\n    const mappings = this.mappings.map(m =>\n      m.mappingFunction === this.selectedMapping ? { ...m, mappingFunction: input.value } : m\n    )\n\n    this.dataMapperContext.updateMappings(mappings)\n  }\n\n  handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Delete' || e.key === 'Backspace') {\n      if (this.selectedLine) {\n        this.deleteSelectedLine()\n      } else if (this.selectedMapping) {\n        this.deleteSelectedMapping()\n      }\n    }\n  }\n\n  deleteSelectedLine() {\n    if (!this.selectedLine) return\n\n    const { mapping, nodeId, isInput } = this.selectedLine\n    const updatedMappings = this.mappings\n      .map(m =>\n        m === mapping\n          ? {\n              ...m,\n              inputs: isInput ? m.inputs.filter(id => id !== nodeId) : m.inputs,\n              outputs: !isInput ? m.outputs.filter(id => id !== nodeId) : m.outputs\n            }\n          : m\n      )\n      .filter(m => m.inputs.length > 0 || m.outputs.length > 0) // 입력/출력이 모두 삭제되면 제거\n\n    this.dataMapperContext.updateMappings(updatedMappings)\n    this.selectedLine = undefined\n    this.requestUpdate()\n  }\n\n  deleteSelectedMapping() {\n    this.dataMapperContext.updateMappings(this.mappings.filter(m => m !== this.selectedMapping))\n    this.selectedMapping = undefined\n    this.requestUpdate()\n  }\n\n  private handleResize = () => {\n    this.requestUpdate()\n  }\n}\n"]}

package/dist/src/types.d.ts

@@ -0,0 +1,19 @@
+export interface TreeNode {
+    id: string;
+    label: string;
+    children?: TreeNode[];
+    multiplicity?: '1' | '*' | '1..*' | '0..1';
+}
+export interface Mapping {
+    id: string;
+    inputs: string[];
+    outputs: string[];
+    position: {
+        x: number;
+        y: number;
+    };
+    mappingFunction?: string;
+    parameters?: {
+        [key: string]: any;
+    };
+}

package/dist/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface TreeNode {\n  id: string\n  label: string\n  children?: TreeNode[]\n  multiplicity?: '1' | '*' | '1..*' | '0..1'\n}\n\nexport interface Mapping {\n  id: string\n  inputs: string[]\n  outputs: string[]\n  position: { x: number; y: number }\n  mappingFunction?: string\n  parameters?: { [key: string]: any }\n}\n"]}

package/dist/stories/ox-data-mapper.stories.d.ts

@@ -5,10 +5,10 @@ declare const _default: {
     title: string;
     component: string;
     argTypes: {
-        sourceScheme: {
+        sourceSchema: {
             control: string;
         };
-        targetScheme: {
+        targetSchema: {
             control: string;
         };
         mappings: {
@@ -23,8 +23,8 @@ interface Story<T> {
     argTypes?: Record<string, unknown>;
 }
 interface ArgTypes {
-    sourceScheme: object;
-    targetScheme: object;
+    sourceSchema: object;
+    targetSchema: object;
     mappings: Object;
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-data-mapper.stories.js

@@ -2,15 +2,15 @@ import '../src/ox-data-mapper.js';
 import '@material/web/icon/icon.js';
 import { html } from 'lit';
 export default {
-    title: '3 modes in ox-data-mapper',
+    title: 'ox-data-mapper',
     component: 'ox-data-mapper',
     argTypes: {
-        sourceScheme: { control: 'object' },
-        targetScheme: { control: 'object' },
+        sourceSchema: { control: 'object' },
+        targetSchema: { control: 'object' },
         mappings: { control: 'object' }
     }
 };
-const Template = ({ sourceScheme, targetScheme, mappings }) => html `
+const Template = ({ sourceSchema, targetSchema, mappings }) => html `
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
@@ -32,21 +32,25 @@ const Template = ({ sourceScheme, targetScheme, mappings }) => html `
   <link href="/themes/form-theme.css" rel="stylesheet" />
 
   <style>
-    #root-inner {
-      min-height: 1000px;
-    }
-
     ox-data-mapper {
-      width: 100%;
-      height: 1000px;
+      height: 500px;
+      display: block;
+      margin: 100px;
+      padding: 0 10px;
+      background-color: cyan;
+      overflow-y: auto;
     }
   </style>
 
-  <ox-data-mapper .sourceScheme=${sourceScheme} .targetScheme=${targetScheme} .mappings=${mappings}></ox-data-mapper>
+  <ox-data-mapper
+    .sourceSchema=${sourceSchema}
+    .targetSchema=${targetSchema}
+    .mappings=${mappings}
+  ></ox-data-mapper>
 `;
 export const Regular = Template.bind({});
 Regular.args = {
-    sourceScheme: {
+    sourceSchema: {
         id: 's1',
         label: 'Order',
         multiplicity: '*',
@@ -57,12 +61,20 @@ Regular.args = {
                 multiplicity: '*',
                 children: [
                     { id: 's1-1-1', label: 'Name' },
-                    { id: 's1-1-2', label: 'Price' }
+                    { id: 's1-1-2', label: 'Price' },
+                    { id: 's1-1-3', label: 'Name' },
+                    { id: 's1-1-4', label: 'Price' },
+                    { id: 's1-1-5', label: 'Name' },
+                    { id: 's1-1-6', label: 'Price' },
+                    { id: 's1-1-7', label: 'Name' },
+                    { id: 's1-1-8', label: 'Price' },
+                    { id: 's1-1-9', label: 'Name' },
+                    { id: 's1-1-10', label: 'Price' }
                 ]
             }
         ]
     },
-    targetScheme: {
+    targetSchema: {
         id: 't1',
         label: 'Invoice',
         children: [
@@ -72,21 +84,31 @@ Regular.args = {
                 multiplicity: '*',
                 children: [
                     { id: 't1-1-1', label: 'Product Name' },
-                    { id: 't1-1-2', label: 'Cost' }
+                    { id: 't1-1-2', label: 'Cost' },
+                    { id: 't1-1-3', label: 'Product Name' },
+                    { id: 't1-1-4', label: 'Cost' },
+                    { id: 't1-1-5', label: 'Product Name' },
+                    { id: 't1-1-6', label: 'Cost' },
+                    { id: 't1-1-7', label: 'Product Name' },
+                    { id: 't1-1-8', label: 'Cost' }
                 ]
             }
         ]
     },
     mappings: [
         {
+            id: '1',
             inputs: ['s1'],
             outputs: ['t1-1-1'],
-            transformLogic: 'toUpperCase()'
+            mappingFunction: 'text-transform',
+            position: { x: 100, y: 50 }
         },
         {
+            id: '2',
             inputs: ['s1-1-1', 's1-1-2'],
             outputs: ['t1-1-2'],
-            transformLogic: 'convertCurrency()'
+            mappingFunction: 'value-mapping',
+            position: { x: 100, y: 100 }
         }
     ]
 };

package/dist/stories/ox-data-mapper.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-data-mapper.stories.js","sourceRoot":"","sources":["../../stories/ox-data-mapper.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACnC,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACnC,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAChC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAgC5D,YAAY,kBAAkB,YAAY,cAAc,QAAQ;CACjG,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,YAAY,EAAE;QACZ,EAAE,EAAE,IAAI;QACR,KAAK,EAAE,OAAO;QACd,YAAY,EAAE,GAAG;QACjB,QAAQ,EAAE;YACR;gBACE,EAAE,EAAE,MAAM;gBACV,KAAK,EAAE,MAAM;gBACb,YAAY,EAAE,GAAG;gBACjB,QAAQ,EAAE;oBACR,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;oBAC/B,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE;iBACjC;aACF;SACF;KACF;IAED,YAAY,EAAE;QACZ,EAAE,EAAE,IAAI;QACR,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE;YACR;gBACE,EAAE,EAAE,MAAM;gBACV,KAAK,EAAE,UAAU;gBACjB,YAAY,EAAE,GAAG;gBACjB,QAAQ,EAAE;oBACR,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE;oBACvC,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;iBAChC;aACF;SACF;KACF;IAED,QAAQ,EAAE;QACR;YACE,MAAM,EAAE,CAAC,IAAI,CAAC;YACd,OAAO,EAAE,CAAC,QAAQ,CAAC;YACnB,cAAc,EAAE,eAAe;SAChC;QACD;YACE,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;YAC5B,OAAO,EAAE,CAAC,QAAQ,CAAC;YACnB,cAAc,EAAE,mBAAmB;SACpC;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-data-mapper.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: '3 modes in ox-data-mapper',\n  component: 'ox-data-mapper',\n  argTypes: {\n    sourceScheme: { control: 'object' },\n    targetScheme: { control: 'object' },\n    mappings: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  sourceScheme: object\n  targetScheme: object\n  mappings: Object\n}\n\nconst Template: Story<ArgTypes> = ({ sourceScheme, targetScheme, mappings }: ArgTypes) => html`\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n  <style>\n    #root-inner {\n      min-height: 1000px;\n    }\n\n    ox-data-mapper {\n      width: 100%;\n      height: 1000px;\n    }\n  </style>\n\n  <ox-data-mapper .sourceScheme=${sourceScheme} .targetScheme=${targetScheme} .mappings=${mappings}></ox-data-mapper>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  sourceScheme: {\n    id: 's1',\n    label: 'Order',\n    multiplicity: '*',\n    children: [\n      {\n        id: 's1-1',\n        label: 'Item',\n        multiplicity: '*',\n        children: [\n          { id: 's1-1-1', label: 'Name' },\n          { id: 's1-1-2', label: 'Price' }\n        ]\n      }\n    ]\n  },\n\n  targetScheme: {\n    id: 't1',\n    label: 'Invoice',\n    children: [\n      {\n        id: 't1-1',\n        label: 'Products',\n        multiplicity: '*',\n        children: [\n          { id: 't1-1-1', label: 'Product Name' },\n          { id: 't1-1-2', label: 'Cost' }\n        ]\n      }\n    ]\n  },\n\n  mappings: [\n    {\n      inputs: ['s1'],\n      outputs: ['t1-1-1'],\n      transformLogic: 'toUpperCase()'\n    },\n    {\n      inputs: ['s1-1-1', 's1-1-2'],\n      outputs: ['t1-1-2'],\n      transformLogic: 'convertCurrency()'\n    }\n  ]\n}\n"]}
+{"version":3,"file":"ox-data-mapper.stories.js","sourceRoot":"","sources":["../../stories/ox-data-mapper.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/ox-data-mapper.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { Mapping, TreeNode } from '../src/types.js'\n\nexport default {\n  title: 'ox-data-mapper',\n  component: 'ox-data-mapper',\n  argTypes: {\n    sourceSchema: { control: 'object' },\n    targetSchema: { control: 'object' },\n    mappings: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  sourceSchema: object\n  targetSchema: object\n  mappings: Object\n}\n\nconst Template: Story<ArgTypes> = ({ sourceSchema, targetSchema, mappings }: ArgTypes) => html`\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n  <style>\n    ox-data-mapper {\n      height: 500px;\n      display: block;\n      margin: 100px;\n      padding: 0 10px;\n      background-color: cyan;\n      overflow-y: auto;\n    }\n  </style>\n\n  <ox-data-mapper\n    .sourceSchema=${sourceSchema as TreeNode}\n    .targetSchema=${targetSchema as TreeNode}\n    .mappings=${mappings as Mapping[]}\n  ></ox-data-mapper>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  sourceSchema: {\n    id: 's1',\n    label: 'Order',\n    multiplicity: '*',\n    children: [\n      {\n        id: 's1-1',\n        label: 'Item',\n        multiplicity: '*',\n        children: [\n          { id: 's1-1-1', label: 'Name' },\n          { id: 's1-1-2', label: 'Price' },\n          { id: 's1-1-3', label: 'Name' },\n          { id: 's1-1-4', label: 'Price' },\n          { id: 's1-1-5', label: 'Name' },\n          { id: 's1-1-6', label: 'Price' },\n          { id: 's1-1-7', label: 'Name' },\n          { id: 's1-1-8', label: 'Price' },\n          { id: 's1-1-9', label: 'Name' },\n          { id: 's1-1-10', label: 'Price' }\n        ]\n      }\n    ]\n  },\n\n  targetSchema: {\n    id: 't1',\n    label: 'Invoice',\n    children: [\n      {\n        id: 't1-1',\n        label: 'Products',\n        multiplicity: '*',\n        children: [\n          { id: 't1-1-1', label: 'Product Name' },\n          { id: 't1-1-2', label: 'Cost' },\n          { id: 't1-1-3', label: 'Product Name' },\n          { id: 't1-1-4', label: 'Cost' },\n          { id: 't1-1-5', label: 'Product Name' },\n          { id: 't1-1-6', label: 'Cost' },\n          { id: 't1-1-7', label: 'Product Name' },\n          { id: 't1-1-8', label: 'Cost' }\n        ]\n      }\n    ]\n  },\n\n  mappings: [\n    {\n      id: '1',\n      inputs: ['s1'],\n      outputs: ['t1-1-1'],\n      mappingFunction: 'text-transform',\n      position: { x: 100, y: 50 }\n    },\n    {\n      id: '2',\n      inputs: ['s1-1-1', 's1-1-2'],\n      outputs: ['t1-1-2'],\n      mappingFunction: 'value-mapping',\n      position: { x: 100, y: 100 }\n    }\n  ]\n}\n"]}