{% raw %}

  
    
    
      
        {{ node.label }}
      
    

    
    
  



import { ref, onMounted, onBeforeUnmount } from 'vue'
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/index.css'

const lfContainer = ref(null)
let lf = null
const draggedNode = ref(null) // 拖拽中节点数据

// 定义可拖拽节点列表
const nodeList = [
  { type: 'rect', label: '矩形节点' },
  { type: 'circle', label: '圆形节点' },
  // 可以继续扩展节点类型
]

onMounted(() => {
  lf = new LogicFlow({
    container: lfContainer.value,
    width: 800,
    height: 600,
  })
  lf.render()
})

onBeforeUnmount(() => {
  lf && lf.destroy()
  lf = null
})

function onDragStart(node) {
  draggedNode.value = node
}

function onDrop(event) {
  event.preventDefault()
  if (!draggedNode.value) return

  // 计算画布内放置点坐标
  // LogicFlow 容器左上角相对页面的偏移
  const rect = lfContainer.value.getBoundingClientRect()

  // 画布坐标 = 鼠标坐标 - 容器左上角坐标
  const x = event.clientX - rect.left
  const y = event.clientY - rect.top

  lf.addNode({
    id: `node_${Date.now()}`, // 唯一ID
    type: draggedNode.value.type,
    x,
    y,
    text: draggedNode.value.label,
  })

  draggedNode.value = null
}



.flow-editor {
  display: flex;
  gap: 16px;
  padding: 12px;
}

/* 左侧节点面板 */
.node-panel {
  width: 160px;
  border: 1px solid #ccc;
  padding: 8px;
  background: #f9f9f9;
  user-select: none;
}

.node-item {
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: grab;
  background: white;
  text-align: center;
}

.node-item:active {
  cursor: grabbing;
}

/* 画布 */
.flow-canvas {
  flex: 1;
  border: 1px solid #ddd;
  height: 600px;
  background: #fff;
}

{% endraw %}