Vue3使用LogicFlow更新節(jié)點(diǎn)名稱的方法

更新時(shí)間：2026年01月13日 08:54:26 作者：持續(xù)前行

本文介紹了在Vue3中更新LogicFlow節(jié)點(diǎn)名稱的多種方法,包括使用updateText和setProperties方法,以及事件監(jiān)聽與交互方式,還討論了自定義節(jié)點(diǎn)名稱編輯、批量更新與高級(jí)功能,并強(qiáng)調(diào)了注意事項(xiàng)與最佳實(shí)踐,需要的朋友可以參考下

核心更新方法

1. 使用updateText方法（推薦）

這是最直接的方式，通過節(jié)點(diǎn) ID 更新文本內(nèi)容：

<template>
  <div>
    <div ref="container" style="width: 100%; height: 500px;"></div>
    <button @click="updateNodeName">更新節(jié)點(diǎn)名稱</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';

const container = ref(null);
const lf = ref(null);
const selectedNodeId = ref('');

onMounted(() => {
  lf.value = new LogicFlow({
    container: container.value,
    grid: true,
  });

  // 示例數(shù)據(jù)
  lf.value.render({
    nodes: [
      {
        id: 'node_1',
        type: 'rect',
        x: 100,
        y: 100,
        text: '原始名稱'
      }
    ]
  });

  // 監(jiān)聽節(jié)點(diǎn)點(diǎn)擊，獲取選中節(jié)點(diǎn)ID
  lf.value.on('node:click', ({ data }) => {
    selectedNodeId.value = data.id;
  });
});

// 更新節(jié)點(diǎn)名稱
const updateNodeName = () => {
  if (!selectedNodeId.value) {
    alert('請(qǐng)先點(diǎn)擊選擇一個(gè)節(jié)點(diǎn)');
    return;
  }

  const newName = prompt('請(qǐng)輸入新的節(jié)點(diǎn)名稱', '新名稱');
  if (newName) {
    // 使用 updateText 方法更新節(jié)點(diǎn)文本
    lf.value.updateText(selectedNodeId.value, newName);
  }
};
</script>

2. 通過setProperties方法更新

這種方法可以同時(shí)更新文本和其他屬性：

// 更新節(jié)點(diǎn)屬性，包括名稱
const updateNodeWithProperties = () => {
  if (!selectedNodeId.value) return;

  const newNodeName = '更新后的節(jié)點(diǎn)名稱';
  
  // 獲取節(jié)點(diǎn)當(dāng)前屬性
  const nodeModel = lf.value.getNodeModelById(selectedNodeId.value);
  const currentProperties = nodeModel.properties || {};
  
  // 更新屬性
  lf.value.setProperties(selectedNodeId.value, {
    ...currentProperties,
    nodeName: newNodeName,
    updatedAt: new Date().toISOString()
  });
  
  // 同時(shí)更新顯示文本
  lf.value.updateText(selectedNodeId.value, newNodeName);
};

事件監(jiān)聽與交互方式

1. 雙擊編輯模式

實(shí)現(xiàn)雙擊節(jié)點(diǎn)直接進(jìn)入編輯模式：

// 監(jiān)聽雙擊事件
lf.value.on('node:dblclick', ({ data }) => {
  const currentNode = lf.value.getNodeModelById(data.id);
  const currentText = currentNode.text?.value || '';
  
  const newText = prompt('編輯節(jié)點(diǎn)名稱:', currentText);
  if (newText !== null) {
    lf.value.updateText(data.id, newText);
  }
});

2. 右鍵菜單編輯

結(jié)合 Menu 插件實(shí)現(xiàn)右鍵菜單編輯：

import { Menu } from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css';

// 初始化時(shí)注冊(cè)菜單插件
lf.value = new LogicFlow({
  container: container.value,
  plugins: [Menu],
});

// 配置右鍵菜單
lf.value.extension.menu.setMenuConfig({
  nodeMenu: [
    {
      text: '編輯名稱',
      callback: (node) => {
        const currentText = node.text || '';
        const newText = prompt('編輯節(jié)點(diǎn)名稱:', currentText);
        if (newText) {
          lf.value.updateText(node.id, newText);
        }
      }
    },
    {
      text: '刪除',
      callback: (node) => {
        lf.value.deleteNode(node.id);
      }
    }
  ]
});

自定義節(jié)點(diǎn)名稱編輯

對(duì)于自定義節(jié)點(diǎn)，可以重寫文本相關(guān)方法：

import { RectNode, RectNodeModel } from '@logicflow/core';

class CustomNodeModel extends RectNodeModel {
  // 自定義文本樣式
  getTextStyle() {
    const style = super.getTextStyle();
    return {
      ...style,
      fontSize: 14,
      fontWeight: 'bold',
      fill: '#1e40af',
    };
  }
  
  // 初始化節(jié)點(diǎn)數(shù)據(jù)
  initNodeData(data) {
    super.initNodeData(data);
    // 確保文本格式正確
    this.text = {
      x: data.x,
      y: data.y + this.height / 2 + 10,
      value: data.text || '默認(rèn)節(jié)點(diǎn)'
    };
  }
}

// 注冊(cè)自定義節(jié)點(diǎn)
lf.value.register({
  type: 'custom-node',
  view: RectNode,
  model: CustomNodeModel
});

批量更新與高級(jí)功能

1. 批量更新多個(gè)節(jié)點(diǎn)

// 批量更新所有節(jié)點(diǎn)名稱
const batchUpdateNodeNames = () => {
  const graphData = lf.value.getGraphData();
  const updatedNodes = graphData.nodes.map(node => ({
    ...node,
    text: `${node.text}（已更新）`
  }));
  
  // 重新渲染
  lf.value.render({
    nodes: updatedNodes,
    edges: graphData.edges
  });
};

// 按條件更新節(jié)點(diǎn)
const updateNodesByCondition = () => {
  const graphData = lf.value.getGraphData();
  const updatedNodes = graphData.nodes.map(node => {
    if (node.type === 'rect') {
      return {
        ...node,
        text: `矩形節(jié)點(diǎn)-${node.id}`
      };
    }
    return node;
  });
  
  lf.value.render({
    nodes: updatedNodes,
    edges: graphData.edges
  });
};

2. 實(shí)時(shí)保存與撤銷重做

// 監(jiān)聽文本變化并自動(dòng)保存
lf.value.on('node:text-update', ({ data }) => {
  console.log('節(jié)點(diǎn)文本已更新:', data);
  saveToBackend(lf.value.getGraphData());
});

// 實(shí)現(xiàn)撤銷重做功能
const undo = () => {
  lf.value.undo();
};

const redo = () => {
  lf.value.redo();
};

// 啟用歷史記錄
lf.value = new LogicFlow({
  container: container.value,
  grid: true,
  history: true, // 啟用歷史記錄
  historySize: 100 // 設(shè)置歷史記錄大小
});

注意事項(xiàng)與最佳實(shí)踐

文本對(duì)象格式：LogicFlow 中文本可以是字符串或?qū)ο蟾袷?{value: '文本', x: 100, y: 100}
更新時(shí)機(jī)：確保在 lf.render()之后再進(jìn)行更新操作
錯(cuò)誤處理：更新前檢查節(jié)點(diǎn)是否存在
性能優(yōu)化：批量更新時(shí)考慮使用防抖

// 安全的更新函數(shù)
const safeUpdateNodeName = (nodeId, newName) => {
  if (!lf.value) {
    console.error('LogicFlow 實(shí)例未初始化');
    return false;
  }
  
  const nodeModel = lf.value.getNodeModelById(nodeId);
  if (!nodeModel) {
    console.error(`節(jié)點(diǎn) ${nodeId} 不存在`);
    return false;
  }
  
  try {
    lf.value.updateText(nodeId, newName);
    return true;
  } catch (error) {
    console.error('更新節(jié)點(diǎn)名稱失敗:', error);
    return false;
  }
};

這些方法涵蓋了 Vue3 中 LogicFlow 節(jié)點(diǎn)名稱更新的主要場(chǎng)景，你可以根據(jù)具體需求選擇合適的方式。

以上就是Vue3使用LogicFlow更新節(jié)點(diǎn)名稱的方法的詳細(xì)內(nèi)容，更多關(guān)于Vue3 LogicFlow更新節(jié)點(diǎn)名稱的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: