@operato/data-mapper 9.0.0-beta.56 → 9.0.0-beta.61

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

@@ -1,241 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,36 +0,0 @@
-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

@@ -1,382 +0,0 @@
-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