@operato/data-mapper 9.0.0 → 9.0.2

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

@@ -0,0 +1,241 @@
+import { __decorate } from "tslib";
+import '@operato/data-tree/ox-tree.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.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);
+            },
+            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">
+          <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">
+          <ox-tree
+            .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>
+
+        <ox-mapping-area .mappings=${this.mappings}></ox-mapping-area>
+      </div>
+    `;
+    }
+    getNodePosition(nodeId, source) {
+        const tree = source ? this.sourceTree : this.targetTree;
+        if (!tree) {
+            return;
+        }
+        const nodeRect = tree.findNodeSelfBounds(nodeId);
+        if (!nodeRect) {
+            return;
+        }
+        const mappingAreaRect = this.mappingsArea.getBoundingClientRect();
+        return {
+            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%;
+      min-height: 100%;
+      position: relative;
+      overflow-y: auto;
+      align-items: stretch;
+    }
+
+    .tree-container {
+      position: relative;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 0;
+      margin: 0;
+    }
+
+    .tree-container.source {
+      order: 0;
+      padding-right: 0px;
+    }
+
+    .tree-container.target {
+      order: 2;
+      padding-left: 0px;
+      text-align: right;
+    }
+
+    ox-mapping-area {
+      order: 1;
+      position: relative;
+      flex: 1;
+      padding: 0;
+      margin: 0;
+      text-align: center;
+      position: relative;
+    }
+
+    .tree-container.source::after,
+    ox-mapping-area::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 1px;
+      height: 100%;
+      background-color: black;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxDataMapper.prototype, "sourceSchema", void 0);
+__decorate([
+    property({ type: Object })
+], OxDataMapper.prototype, "targetSchema", void 0);
+__decorate([
+    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);
+__decorate([
+    query('.tree-container.target > ox-tree')
+], OxDataMapper.prototype, "targetTree", void 0);
+__decorate([
+    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);
+export { OxDataMapper };
+//# sourceMappingURL=ox-data-mapper.js.map

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

@@ -0,0 +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 './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;
+}

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