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

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

@@ -1,105 +1,61 @@
 import { __decorate } from "tslib";
 import '@operato/data-tree/ox-tree.js';
-import { LitElement, html, svg, css, nothing } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
+import './ox-mapping-area.js';
+import { LitElement, html, css } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { provide } from '@lit/context';
+import { dataMapperContext } from './context/data-mapper-context.js';
 let OxDataMapper = class OxDataMapper extends LitElement {
     constructor() {
         super(...arguments);
-        this.sourceScheme = {
-            id: 's1',
-            label: 'Order',
-            multiplicity: '*',
-            children: [
-                {
-                    id: 's1-1',
-                    label: 'Item',
-                    multiplicity: '*',
-                    children: [
-                        { id: 's1-1-1', label: 'Name' },
-                        { id: 's1-1-2', label: 'Price' }
-                    ]
-                }
-            ]
-        };
-        this.targetScheme = {
-            id: 't1',
-            label: 'Invoice',
-            children: [
-                {
-                    id: 't1-1',
-                    label: 'Products',
-                    multiplicity: '*',
-                    children: [
-                        { id: 't1-1-1', label: 'Product Name' },
-                        { id: 't1-1-2', label: 'Cost' }
-                    ]
-                }
-            ]
-        };
-        this.mappings = [
-            {
-                inputs: ['s1-1-1'],
-                outputs: ['t1-1-1'],
-                transformLogic: 'toUpperCase()'
+        this.sourceSchema = { id: 'source', label: 'source' };
+        this.targetSchema = { id: 'target', label: 'target' };
+        this.mappings = [];
+        this.selected = null;
+        this.dataMapperContext = {
+            getUniqueId: () => {
+                return Math.random().toString(36).substring(2, 9);
             },
-            {
-                inputs: ['s1-1-2'],
-                outputs: ['t1-1-2'],
-                transformLogic: 'convertCurrency()'
-            }
-        ];
+            updateMappings: (mappings) => {
+                this.mappings = mappings;
+                this.dispatchEvent(new CustomEvent('change', {
+                    detail: this.mappings
+                }));
+            },
+            getNodePosition: this.getNodePosition.bind(this)
+        };
+        this.dragStartElement = null;
     }
     render() {
         return html `
       <div class="container">
         <div class="tree-container source">
-          <h3>Source Structure</h3>
-          <ox-tree .data=${this.sourceScheme} @select=${this.handleSourceSelect} label-extends></ox-tree>
-        </div>
-        <div class="mapping-area">
-          <h3>Mappings</h3>
-          <svg>${this.mappings.map(m => this.renderMapping(m))}</svg>
+          <ox-tree
+            .data=${this.sourceSchema}
+            @collapsed=${() => this.mappingsArea.requestUpdate()}
+            @expanded=${() => this.mappingsArea.requestUpdate()}
+            @dragstart=${this.onDragStart}
+            @dragover=${this.onDragOver}
+            @drop=${this.onDrop}
+            label-extends
+          ></ox-tree>
         </div>
+
         <div class="tree-container target">
-          <h3>Target Structure</h3>
           <ox-tree
-            .data=${this.targetScheme}
-            @select=${this.handleTargetSelect}
+            .data=${this.targetSchema}
+            @collapsed=${() => this.mappingsArea.requestUpdate()}
+            @expanded=${() => this.mappingsArea.requestUpdate()}
+            @dragstart=${this.onDragStart}
+            @dragover=${this.onDragOver}
+            @drop=${this.onDrop}
             direction="rtl"
             label-extends
           ></ox-tree>
         </div>
-      </div>
-    `;
-    }
-    handleSourceSelect() {
-        this.requestUpdate();
-    }
-    handleTargetSelect() { }
-    renderMapping(mapping) {
-        const sourcePoses = mapping.inputs.map(input => this.getNodePosition(input, true)).filter(Boolean);
-        const targetPoses = mapping.outputs.map(output => this.getNodePosition(output, false)).filter(Boolean);
-        const positions = [...sourcePoses, ...targetPoses];
-        if (positions.length == 0) {
-            return nothing;
-        }
-        const mappingsRect = this.mappingsArea.getBoundingClientRect();
-        const centerY = positions.reduce((sum, pos) => {
-            return sum + pos.y;
-        }, 0);
-        const boxX = mappingsRect.width / 2 - 50;
-        const boxY = centerY / positions.length - 10;
-        return svg `
-      <g>
-        ${sourcePoses.map(sourcePos => svg `<line class="mapping-line" x1=${sourcePos.x} y1=${sourcePos.y} x2=${boxX} y2=${boxY + 10}></line>`)}
 
-        <rect class="mapping-box" x=${boxX} y=${boxY} width="100" height="20"></rect>
-        <text x=${boxX + 50} y=${boxY + 15} fill="black" font-size="12" text-anchor="middle">
-          ${mapping.transformLogic || 'map'}
-        </text>
-
-        ${targetPoses.map(targetPos => svg `<line class="mapping-line" x1=${boxX + 100} y1=${boxY + 10} x2=${targetPos.x} y2=${targetPos.y}></line>`)}
-      </g>
+        <ox-mapping-area .mappings=${this.mappings}></ox-mapping-area>
+      </div>
     `;
     }
     getNodePosition(nodeId, source) {
@@ -107,83 +63,165 @@ let OxDataMapper = class OxDataMapper extends LitElement {
         if (!tree) {
             return;
         }
-        const node = tree.renderRoot.querySelector(`[data-id='${nodeId}']`);
-        if (!node) {
+        const nodeRect = tree.findNodeSelfBounds(nodeId);
+        if (!nodeRect) {
             return;
         }
-        const mappingsRect = this.mappingsArea.getBoundingClientRect();
-        const nodeRect = node.getBoundingClientRect();
+        const mappingAreaRect = this.mappingsArea.getBoundingClientRect();
         return {
-            x: source ? 0 : mappingsRect.width,
-            y: nodeRect.top
+            x: source ? 0 : mappingAreaRect.width,
+            y: nodeRect.top - mappingAreaRect.top + nodeRect.height / 2
         };
     }
+    onDragStart(e) {
+        var _a, _b;
+        const path = e.composedPath();
+        const target = path.find(el => { var _a; return (_a = el.dataset) === null || _a === void 0 ? void 0 : _a.id; });
+        const nodeId = (_a = target === null || target === void 0 ? void 0 : target.dataset) === null || _a === void 0 ? void 0 : _a.id;
+        if (!nodeId) {
+            return;
+        }
+        const from = e.target === this.sourceTree ? 'source' : 'target';
+        e.dataTransfer.setData('application/node-id', nodeId);
+        e.dataTransfer.setData('application/from', from);
+        e.dataTransfer.effectAllowed = 'move';
+        // ✅ 노드의 라벨을 찾아 미리보기로 사용
+        const nodeLabel = ((_b = target === null || target === void 0 ? void 0 : target.querySelector('span[label]')) === null || _b === void 0 ? void 0 : _b.textContent) || nodeId;
+        // ✅ 미리보기 요소 생성
+        const dragPreview = document.createElement('div');
+        dragPreview.textContent = nodeLabel;
+        dragPreview.style.fontSize = '14px';
+        dragPreview.style.padding = '4px 8px';
+        dragPreview.style.background = 'rgba(255, 255, 255, 0.3)';
+        dragPreview.style.borderRadius = '4px';
+        dragPreview.style.position = 'absolute';
+        dragPreview.style.top = '-100px'; // 화면 밖으로 배치 (임시)
+        dragPreview.style.left = '-100px';
+        dragPreview.style.pointerEvents = 'none';
+        dragPreview.style.zIndex = '1000';
+        document.body.appendChild(dragPreview);
+        // ✅ 커스텀 드래깅 이미지 적용
+        e.dataTransfer.setDragImage(dragPreview, 0, 0);
+        this.dragStartElement = e.target;
+        // ✅ 일정 시간 후 미리보기 요소 삭제
+        setTimeout(() => document.body.removeChild(dragPreview), 0);
+    }
+    onDragOver(e) {
+        var _a;
+        e.preventDefault();
+        const from = e.dataTransfer.getData('application/from');
+        if (this.dragStartElement === e.target) {
+            return;
+        }
+        const path = e.composedPath();
+        const target = path.find(el => { var _a; return (_a = el.dataset) === null || _a === void 0 ? void 0 : _a.id; });
+        const nodeId = (_a = target === null || target === void 0 ? void 0 : target.dataset) === null || _a === void 0 ? void 0 : _a.id;
+        if (!nodeId)
+            return;
+        e.target.selected = target.item;
+    }
+    onDrop(e) {
+        var _a;
+        e.preventDefault();
+        const nodeId = e.dataTransfer.getData('application/node-id');
+        const from = e.dataTransfer.getData('application/from');
+        if (!nodeId ||
+            (from == 'source' && e.target !== this.targetTree) ||
+            (from == 'target' && e.target !== this.sourceTree)) {
+            return;
+        }
+        // 드롭된 타겟 노드 찾기
+        const path = e.composedPath();
+        const targetNode = path.find(el => { var _a; return (_a = el.dataset) === null || _a === void 0 ? void 0 : _a.id; });
+        const targetNodeId = (_a = targetNode === null || targetNode === void 0 ? void 0 : targetNode.dataset) === null || _a === void 0 ? void 0 : _a.id;
+        if (!targetNodeId) {
+            return;
+        }
+        // 중복 매핑 확인
+        const existingMapping = (this.mappings || []).find(m => m.inputs.includes(from == 'source' ? nodeId : targetNodeId) &&
+            m.outputs.includes(from == 'source' ? targetNodeId : nodeId));
+        if (!existingMapping) {
+            const { width, height } = this.mappingsArea.getBoundingClientRect();
+            const { y: sourceY = 0 } = this.dataMapperContext.getNodePosition(from == 'source' ? nodeId : targetNodeId, true) || {};
+            const { y: targetY = height } = this.dataMapperContext.getNodePosition(from == 'target' ? nodeId : targetNodeId, false) || {};
+            const newMapping = {
+                id: this.dataMapperContext.getUniqueId(),
+                mappingFunction: 'passthrough',
+                inputs: [from == 'source' ? nodeId : targetNodeId],
+                outputs: [from == 'source' ? targetNodeId : nodeId],
+                position: {
+                    x: width / 2 - 50,
+                    y: (sourceY + targetY) / 2
+                }
+            };
+            this.dataMapperContext.updateMappings([...(this.mappings || []), newMapping]);
+            this.mappingsArea.selectMappingBox(newMapping);
+        }
+    }
 };
 OxDataMapper.styles = css `
     .container {
       display: flex;
       width: 100%;
-      height: 100%;
+      min-height: 100%;
       position: relative;
+      overflow-y: auto;
+      align-items: stretch;
     }
 
     .tree-container {
+      position: relative;
       flex: 1;
       display: flex;
       flex-direction: column;
-      padding: 10px;
-      border: 1px solid #ccc;
-      overflow-y: auto;
+      padding: 0;
+      margin: 0;
     }
 
     .tree-container.source {
+      order: 0;
       padding-right: 0px;
     }
 
     .tree-container.target {
+      order: 2;
       padding-left: 0px;
       text-align: right;
     }
 
-    .mapping-area {
+    ox-mapping-area {
+      order: 1;
+      position: relative;
       flex: 1;
-      padding: 10px 0;
+      padding: 0;
       margin: 0;
-      border: 1px solid #ccc;
       text-align: center;
       position: relative;
     }
 
-    svg {
+    .tree-container.source::after,
+    ox-mapping-area::after {
+      content: '';
       position: absolute;
+      right: 0;
       top: 0;
-      left: 0;
-      width: 100%;
+      width: 1px;
       height: 100%;
-      pointer-events: none;
-    }
-
-    .mapping-box {
-      fill: rgba(0, 0, 255, 0.2);
-      stroke: blue;
-      stroke-width: 0.5;
-    }
-
-    .mapping-line {
-      stroke: black;
-      stroke-width: 0.5;
-      fill: none;
+      background-color: black;
     }
   `;
 __decorate([
-    state()
-], OxDataMapper.prototype, "sourceScheme", void 0);
+    property({ type: Object })
+], OxDataMapper.prototype, "sourceSchema", void 0);
 __decorate([
-    state()
-], OxDataMapper.prototype, "targetScheme", void 0);
+    property({ type: Object })
+], OxDataMapper.prototype, "targetSchema", void 0);
 __decorate([
-    state()
+    property({ type: Array })
 ], OxDataMapper.prototype, "mappings", void 0);
+__decorate([
+    state()
+], OxDataMapper.prototype, "selected", void 0);
 __decorate([
     query('.tree-container.source > ox-tree')
 ], OxDataMapper.prototype, "sourceTree", void 0);
@@ -191,8 +229,11 @@ __decorate([
     query('.tree-container.target > ox-tree')
 ], OxDataMapper.prototype, "targetTree", void 0);
 __decorate([
-    query('.mapping-area')
+    query('ox-mapping-area')
 ], OxDataMapper.prototype, "mappingsArea", void 0);
+__decorate([
+    provide({ context: dataMapperContext })
+], OxDataMapper.prototype, "dataMapperContext", void 0);
 OxDataMapper = __decorate([
     customElement('ox-data-mapper')
 ], OxDataMapper);

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

@@ -1 +1 @@
-{"version":3,"file":"ox-data-mapper.js","sourceRoot":"","sources":["../../src/ox-data-mapper.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-tree/ox-tree.js'\nimport { OxTree } from '@operato/data-tree/ox-tree.js'\n\nimport { LitElement, html, svg, css, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\ninterface TreeNode {\n  id: string\n  label: string\n  children?: TreeNode[]\n  multiplicity?: '1' | '*' | '1..*' | '0..1'\n}\n\ninterface Mapping {\n  inputs: string[]\n  outputs: string[]\n  transformLogic?: string\n}\n\n@customElement('ox-data-mapper')\nexport class OxDataMapper extends LitElement {\n  static styles = css`\n    .container {\n      display: flex;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .tree-container {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      padding: 10px;\n      border: 1px solid #ccc;\n      overflow-y: auto;\n    }\n\n    .tree-container.source {\n      padding-right: 0px;\n    }\n\n    .tree-container.target {\n      padding-left: 0px;\n      text-align: right;\n    }\n\n    .mapping-area {\n      flex: 1;\n      padding: 10px 0;\n      margin: 0;\n      border: 1px solid #ccc;\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, 0, 255, 0.2);\n      stroke: blue;\n      stroke-width: 0.5;\n    }\n\n    .mapping-line {\n      stroke: black;\n      stroke-width: 0.5;\n      fill: none;\n    }\n  `\n\n  @state() private sourceScheme: TreeNode = {\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  @state() private targetScheme: TreeNode = {\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  @state() private mappings: Mapping[] = [\n    {\n      inputs: ['s1-1-1'],\n      outputs: ['t1-1-1'],\n      transformLogic: 'toUpperCase()'\n    },\n    {\n      inputs: ['s1-1-2'],\n      outputs: ['t1-1-2'],\n      transformLogic: 'convertCurrency()'\n    }\n  ]\n\n  @query('.tree-container.source > ox-tree') private sourceTree!: OxTree\n  @query('.tree-container.target > ox-tree') private targetTree!: OxTree\n  @query('.mapping-area') private mappingsArea!: HTMLDivElement\n\n  render() {\n    return html`\n      <div class=\"container\">\n        <div class=\"tree-container source\">\n          <h3>Source Structure</h3>\n          <ox-tree .data=${this.sourceScheme} @select=${this.handleSourceSelect} label-extends></ox-tree>\n        </div>\n        <div class=\"mapping-area\">\n          <h3>Mappings</h3>\n          <svg>${this.mappings.map(m => this.renderMapping(m))}</svg>\n        </div>\n        <div class=\"tree-container target\">\n          <h3>Target Structure</h3>\n          <ox-tree\n            .data=${this.targetScheme}\n            @select=${this.handleTargetSelect}\n            direction=\"rtl\"\n            label-extends\n          ></ox-tree>\n        </div>\n      </div>\n    `\n  }\n\n  handleSourceSelect() {\n    this.requestUpdate()\n  }\n  handleTargetSelect() {}\n\n  renderMapping(mapping: Mapping) {\n    const sourcePoses = mapping.inputs.map(input => this.getNodePosition(input, true)).filter(Boolean) as {\n      x: number\n      y: number\n    }[]\n    const targetPoses = mapping.outputs.map(output => this.getNodePosition(output, false)).filter(Boolean) as {\n      x: number\n      y: number\n    }[]\n\n    const positions = [...sourcePoses, ...targetPoses]\n    if (positions.length == 0) {\n      return nothing\n    }\n\n    const mappingsRect = this.mappingsArea.getBoundingClientRect()\n    const centerY = positions.reduce((sum, pos) => {\n      return sum + pos.y\n    }, 0)\n\n    const boxX = mappingsRect.width / 2 - 50\n    const boxY = centerY / positions.length - 10\n\n    return svg`\n      <g>\n        ${sourcePoses.map(sourcePos => svg`<line class=\"mapping-line\" x1=${sourcePos!.x} y1=${sourcePos!.y} x2=${boxX} y2=${boxY + 10}></line>`)}\n\n        <rect class=\"mapping-box\" x=${boxX} y=${boxY} width=\"100\" height=\"20\"></rect>\n        <text x=${boxX + 50} y=${boxY + 15} fill=\"black\" font-size=\"12\" text-anchor=\"middle\">\n          ${mapping.transformLogic || 'map'}\n        </text>\n\n        ${targetPoses.map(targetPos => svg`<line class=\"mapping-line\" x1=${boxX + 100} y1=${boxY + 10} x2=${targetPos!.x} y2=${targetPos!.y}></line>`)}\n      </g>\n    `\n  }\n\n  getNodePosition(nodeId: string, source: boolean) {\n    const tree = source ? this.sourceTree : this.targetTree\n    if (!tree) {\n      return\n    }\n\n    const node = tree!.renderRoot.querySelector(`[data-id='${nodeId}']`)\n    if (!node) {\n      return\n    }\n\n    const mappingsRect = this.mappingsArea.getBoundingClientRect()\n    const nodeRect = node.getBoundingClientRect()\n\n    return {\n      x: source ? 0 : mappingsRect.width,\n      y: nodeRect.top\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-data-mapper.js","sourceRoot":"","sources":["../../src/ox-data-mapper.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-tree/ox-tree.js'\nimport './ox-mapping-area.js'\n\nimport { LitElement, html, css, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { provide } from '@lit/context'\n\nimport { OxTree } from '@operato/data-tree/ox-tree.js'\n\nimport { TreeNode, Mapping } from './types.js'\nimport { dataMapperContext, DataMapperContextType } from './context/data-mapper-context.js'\nimport { OxMappingArea } from './ox-mapping-area.js'\n\n@customElement('ox-data-mapper')\nexport class OxDataMapper extends LitElement {\n  static styles = css`\n    .container {\n      display: flex;\n      width: 100%;\n      min-height: 100%;\n      position: relative;\n      overflow-y: auto;\n      align-items: stretch;\n    }\n\n    .tree-container {\n      position: relative;\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      padding: 0;\n      margin: 0;\n    }\n\n    .tree-container.source {\n      order: 0;\n      padding-right: 0px;\n    }\n\n    .tree-container.target {\n      order: 2;\n      padding-left: 0px;\n      text-align: right;\n    }\n\n    ox-mapping-area {\n      order: 1;\n      position: relative;\n      flex: 1;\n      padding: 0;\n      margin: 0;\n      text-align: center;\n      position: relative;\n    }\n\n    .tree-container.source::after,\n    ox-mapping-area::after {\n      content: '';\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: 1px;\n      height: 100%;\n      background-color: black;\n    }\n  `\n\n  @property({ type: Object }) sourceSchema: TreeNode = { id: 'source', label: 'source' }\n  @property({ type: Object }) targetSchema: TreeNode = { id: 'target', label: 'target' }\n  @property({ type: Array }) mappings: Mapping[] = []\n\n  @state() private selected: any = null\n\n  @query('.tree-container.source > ox-tree') private sourceTree!: OxTree\n  @query('.tree-container.target > ox-tree') private targetTree!: OxTree\n  @query('ox-mapping-area') private mappingsArea!: OxMappingArea\n\n  @provide({ context: dataMapperContext })\n  private dataMapperContext: DataMapperContextType = {\n    getUniqueId: () => {\n      return Math.random().toString(36).substring(2, 9)\n    },\n    updateMappings: (mappings: Mapping[]) => {\n      this.mappings = mappings\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          detail: this.mappings\n        })\n      )\n    },\n    getNodePosition: this.getNodePosition.bind(this)\n  }\n\n  private dragStartElement: EventTarget | null = null\n\n  render() {\n    return html`\n      <div class=\"container\">\n        <div class=\"tree-container source\">\n          <ox-tree\n            .data=${this.sourceSchema}\n            @collapsed=${() => this.mappingsArea.requestUpdate()}\n            @expanded=${() => this.mappingsArea.requestUpdate()}\n            @dragstart=${this.onDragStart}\n            @dragover=${this.onDragOver}\n            @drop=${this.onDrop}\n            label-extends\n          ></ox-tree>\n        </div>\n\n        <div class=\"tree-container target\">\n          <ox-tree\n            .data=${this.targetSchema}\n            @collapsed=${() => this.mappingsArea.requestUpdate()}\n            @expanded=${() => this.mappingsArea.requestUpdate()}\n            @dragstart=${this.onDragStart}\n            @dragover=${this.onDragOver}\n            @drop=${this.onDrop}\n            direction=\"rtl\"\n            label-extends\n          ></ox-tree>\n        </div>\n\n        <ox-mapping-area .mappings=${this.mappings}></ox-mapping-area>\n      </div>\n    `\n  }\n\n  getNodePosition(nodeId: string, source: boolean) {\n    const tree = source ? this.sourceTree : this.targetTree\n    if (!tree) {\n      return\n    }\n\n    const nodeRect = tree.findNodeSelfBounds(nodeId)\n    if (!nodeRect) {\n      return\n    }\n    const mappingAreaRect = this.mappingsArea.getBoundingClientRect()\n\n    return {\n      x: source ? 0 : mappingAreaRect.width,\n      y: nodeRect.top - mappingAreaRect.top + nodeRect!.height / 2\n    }\n  }\n\n  onDragStart(e: DragEvent) {\n    const path = e.composedPath()\n    const target = path.find(el => (el as HTMLElement).dataset?.id) as HTMLElement | undefined\n    const nodeId = target?.dataset?.id\n\n    if (!nodeId) {\n      return\n    }\n\n    const from = e.target === this.sourceTree ? 'source' : 'target'\n\n    e.dataTransfer!.setData('application/node-id', nodeId)\n    e.dataTransfer!.setData('application/from', from)\n    e.dataTransfer!.effectAllowed = 'move'\n\n    // ✅ 노드의 라벨을 찾아 미리보기로 사용\n    const nodeLabel = target?.querySelector('span[label]')?.textContent || nodeId\n\n    // ✅ 미리보기 요소 생성\n    const dragPreview = document.createElement('div')\n    dragPreview.textContent = nodeLabel\n    dragPreview.style.fontSize = '14px'\n    dragPreview.style.padding = '4px 8px'\n    dragPreview.style.background = 'rgba(255, 255, 255, 0.3)'\n    dragPreview.style.borderRadius = '4px'\n    dragPreview.style.position = 'absolute'\n    dragPreview.style.top = '-100px' // 화면 밖으로 배치 (임시)\n    dragPreview.style.left = '-100px'\n    dragPreview.style.pointerEvents = 'none'\n    dragPreview.style.zIndex = '1000'\n\n    document.body.appendChild(dragPreview)\n\n    // ✅ 커스텀 드래깅 이미지 적용\n    e.dataTransfer!.setDragImage(dragPreview, 0, 0)\n\n    this.dragStartElement = e.target\n\n    // ✅ 일정 시간 후 미리보기 요소 삭제\n    setTimeout(() => document.body.removeChild(dragPreview), 0)\n  }\n\n  onDragOver(e: DragEvent) {\n    e.preventDefault()\n\n    const from = e.dataTransfer!.getData('application/from')\n\n    if (this.dragStartElement === e.target) {\n      return\n    }\n\n    const path = e.composedPath()\n    const target = path.find(el => (el as HTMLElement).dataset?.id) as HTMLElement | undefined\n    const nodeId = target?.dataset?.id\n\n    if (!nodeId) return\n    ;(e.target as OxTree).selected = (target as any).item\n  }\n\n  onDrop(e: DragEvent) {\n    e.preventDefault()\n\n    const nodeId = e.dataTransfer!.getData('application/node-id')\n    const from = e.dataTransfer!.getData('application/from')\n\n    if (\n      !nodeId ||\n      (from == 'source' && e.target !== this.targetTree) ||\n      (from == 'target' && e.target !== this.sourceTree)\n    ) {\n      return\n    }\n\n    // 드롭된 타겟 노드 찾기\n    const path = e.composedPath()\n    const targetNode = path.find(el => (el as HTMLElement).dataset?.id) as HTMLElement | undefined\n    const targetNodeId = targetNode?.dataset?.id\n\n    if (!targetNodeId) {\n      return\n    }\n\n    // 중복 매핑 확인\n    const existingMapping = (this.mappings || []).find(\n      m =>\n        m.inputs.includes(from == 'source' ? nodeId : targetNodeId) &&\n        m.outputs.includes(from == 'source' ? targetNodeId : nodeId)\n    )\n\n    if (!existingMapping) {\n      const { width, height } = this.mappingsArea.getBoundingClientRect()\n      const { y: sourceY = 0 } =\n        this.dataMapperContext.getNodePosition(from == 'source' ? nodeId : targetNodeId, true) || {}\n      const { y: targetY = height } =\n        this.dataMapperContext.getNodePosition(from == 'target' ? nodeId : targetNodeId, false) || {}\n\n      const newMapping: Mapping = {\n        id: this.dataMapperContext.getUniqueId(),\n        mappingFunction: 'passthrough',\n        inputs: [from == 'source' ? nodeId : targetNodeId],\n        outputs: [from == 'source' ? targetNodeId : nodeId],\n        position: {\n          x: width / 2 - 50,\n          y: (sourceY + targetY) / 2\n        }\n      }\n\n      this.dataMapperContext.updateMappings([...(this.mappings || []), newMapping])\n\n      this.mappingsArea.selectMappingBox(newMapping)\n    }\n  }\n}\n"]}

package/dist/src/ox-mapping-area.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import { Mapping } from './types.js';
+import './components/function-box-popup.js';
+export declare class OxMappingArea extends LitElement {
+    static styles: import("lit").CSSResult;
+    mappings: Mapping[];
+    selectedMapping?: Mapping;
+    selectedLine?: {
+        mapping: Mapping;
+        nodeId: string;
+        isInput: boolean;
+    };
+    popupVisible: boolean;
+    popupPosition: {
+        x: number;
+        y: number;
+    };
+    private dataMapperContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    renderMapping(mapping: Mapping): import("lit-html").TemplateResult<2>;
+    startDragForMappingBox(e: PointerEvent, mapping: Mapping): void;
+    handleDragOver(e: DragEvent): void;
+    handleDrop(e: DragEvent): void;
+    selectMappingBox(mapping: Mapping): void;
+    selectMappingLine(mapping: Mapping, nodeId: string, isInput: boolean): void;
+    isLineSelected(mapping: Mapping, nodeId: string, isInput: boolean): boolean;
+    openPopup(e: PointerEvent, mapping: Mapping): void;
+    getSelectedTransformLogic(): string;
+    updateTransformLogic(e: Event): void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    deleteSelectedLine(): void;
+    deleteSelectedMapping(): void;
+    private handleResize;
+}