在上一篇博客中，我們介紹了如何啟動React Flow Renderer并創(chuàng)建一個基本的工作流界面。本文將進一步深入，著重討論如何構(gòu)建一個可拖動的操作欄，它是用戶與工作流交互的入口之一。

引言

操作欄是工作流界面的一部分，通常位于界面的一側(cè)或頂部。它包含了用戶可以從中拖拽節(jié)點到畫布上的組件列表。在我們的示例中，操作欄將位于界面的左側(cè)。

創(chuàng)建操作欄組件

首先，讓我們看一下如何創(chuàng)建操作欄組件。在我們的示例中，我們使用了React組件，名為Slider。這個組件接收一個名為components的屬性，該屬性包含了可用的組件列表。

// Slider/index.jsximport React from 'react';
//項目中自定義的手風(fēng)琴組件，請你使用自己項目中的組件
import { CustomAccordion } from '@/components/CustomeAccordion';// 模擬節(jié)點
const mockComponent = [{'name': 'clear alarm','type': 'ACTION','clazz': 'action.TbClearAlarmNode'},{'name': 'create alarm','type': 'ACTION','clazz': 'action.TbCreateAlarmNode'},{'name': 'device profile','type': 'ACTION','clazz': 'profile.TbDeviceProfileNode'},{'name': 'log','type': 'ACTION','clazz': 'action.TbLogNode'},{'name': 'message type switch','type': 'FILTER','clazz': 'filter.TbMsgTypeSwitchNode'},{'name': 'rpc call request','type': 'ACTION','clazz': 'rpc.TbSendRPCRequestNode'},{'name': 'rule chain','type': 'FLOW','clazz': 'flow.TbRuleChainInputNode'},{'name': 'save attributes','type': 'ACTION','clazz': 'telemetry.TbMsgAttributesNode'},{'name': 'save timeseries','type': 'ACTION','clazz': 'telemetry.TbMsgTimeseriesNode'},{'name': 'script','type': 'TRANSFORMATION','clazz': 'transform.TbTransformMsgNode'}
];export enum RuleNodeType {FILTER = 'FILTER',ENRICHMENT = 'ENRICHMENT',TRANSFORMATION = 'TRANSFORMATION',ACTION = 'ACTION',EXTERNAL = 'EXTERNAL',FLOW = 'FLOW',UNKNOWN = 'UNKNOWN',INPUT = 'INPUT',
}export const ruleNodeTypeDescriptors = new Map<RuleNodeType, any>([[RuleNodeType.FILTER,{value: RuleNodeType.FILTER,name: 'rulenode.type-filter',details: 'rulenode.type-filter-details',nodeClass: 'tb-filter-type',icon: 'filter_list'}],[RuleNodeType.ENRICHMENT,{value: RuleNodeType.ENRICHMENT,name: 'rulenode.type-enrichment',details: 'rulenode.type-enrichment-details',nodeClass: 'tb-enrichment-type',icon: 'playlist_add'}],[RuleNodeType.TRANSFORMATION,{value: RuleNodeType.TRANSFORMATION,name: 'rulenode.type-transformation',details: 'rulenode.type-transformation-details',nodeClass: 'tb-transformation-type',icon: 'transform'}],[RuleNodeType.ACTION,{value: RuleNodeType.ACTION,name: 'rulenode.type-action',details: 'rulenode.type-action-details',nodeClass: 'tb-action-type',icon: 'flash_on'}],[RuleNodeType.EXTERNAL,{value: RuleNodeType.EXTERNAL,name: 'rulenode.type-external',details: 'rulenode.type-external-details',nodeClass: 'tb-external-type',icon: 'cloud_upload'}],[RuleNodeType.FLOW,{value: RuleNodeType.FLOW,name: 'rulenode.type-flow',details: 'rulenode.type-flow-details',nodeClass: 'tb-flow-type',icon: 'settings_ethernet'}],[RuleNodeType.INPUT,{value: RuleNodeType.INPUT,name: 'rulenode.type-input',details: 'rulenode.type-input-details',nodeClass: 'tb-input-type',icon: 'input',special: true}],[RuleNodeType.UNKNOWN,{value: RuleNodeType.UNKNOWN,name: 'rulenode.type-unknown',details: 'rulenode.type-unknown-details',nodeClass: 'tb-unknown-type',icon: 'help_outline'}]]
);const classMap = new Map([['ACTION', 'relation-node'],['input', 'input-node'],['FILTER', 'filter-node'],['ENRICHMENT', 'enrichment-node'],['TRANSFORMATION', 'transformation-node'],['EXTERNAL', 'external-node'],['FLOW', 'flow-node']
]);// const allowType = ruleNodeTypeComponentTypes;
const allowNodesClazz = ['telemetry.TbMsgAttributesNode','filter.TbMsgTypeSwitchNode','action.TbLogNode','rpc.TbSendRPCRequestNode','profile.TbDeviceProfileNode','telemetry.TbMsgTimeseriesNode','action.TbCreateAlarmNode','action.TbClearAlarmNode','flow.TbRuleChainInputNode','transform.TbTransformMsgNode'
];export default function Slider() {const [allowType, setAllowType] = React.useState<any>(['input']);const [allowedNodes, setAllowedNodes] = React.useState<any>([]);React.useEffect(() => {// 將組件按名稱進行排序const sortedComponents = mockComponent?.sort((a: any, b: any) =>a.name?.localeCompare(b.name));// 過濾出符合條件的組件并拼接到allowedNodes數(shù)組中const filteredComponents =sortedComponents?.filter((component: any) =>allowNodesClazz.includes(component.clazz)) || [];const updatedAllowedNodes = [...filteredComponents];// 獲取所有組件的類型，并和allowType數(shù)組進行合并const updatedTypes = updatedAllowedNodes.map((component) => component.type);// 去除重復(fù)的節(jié)點并更新allowedNodes狀態(tài)setAllowedNodes(Array.from(new Set(updatedAllowedNodes)));// 去除重復(fù)的類型并更新allowType狀態(tài)（如果為空數(shù)組，則設(shè)置為默認值）setAllowType(Array.from(new Set(updatedTypes)) || []);}, []);return (<div className="sider">{allowType.map((type: any) =>//自定義手風(fēng)琴，項目中使用的是mui，你可以使用其他組件庫,這里就不貼出手風(fēng)琴的代碼了，請你根據(jù)你的項目，使用對應(yīng)的組件。如果不需要手風(fēng)琴組件?？梢該?lt;div>來代替<CustomAccordiontitle={ruleNodeTypeDescriptors.get(type as any)?.name as string}key={type}><div className="nodes">{allowedNodes.filter((node: any) => node.type === type).map((x: any, i: number) =><divkey={`${x.type}-${i}`}className={`sider-node ${classMap.get(x.type) || 'default-node'}`}onDragStart={(e) => onDragStart(e, x)}draggable><div>{x.name}</div>{/* 黑色遮罩層 */}<div className="overlay"></div></div>)}</div></CustomAccordion>)}</div>);
}

在上述代碼中，我們定義了一個Slider組件，它將組件列表映射到可展開的自定義組件中，并為每個組件添加了拖拽支持。

拖拽事件處理

拖拽操作欄的核心功能在于如何處理拖拽事件。在我們的示例中，我們使用了onDragStart函數(shù)來處理節(jié)點拖拽開始事件。該函數(shù)會設(shè)置被拖拽的節(jié)點的類型和名稱，并記錄被拖拽節(jié)點的完整信息。

/*** 處理節(jié)點拖拽開始事件的回調(diào)函數(shù)* @param {Event} evt - 拖拽事件對象* @param {Object} node - 被拖拽的節(jié)點對象*/
const onDragStart = (evt: any, node: any) => {// 記錄被拖拽的節(jié)點類型和名稱evt.dataTransfer.setData('application/reactflow',node.type + ',' + node.name);// 記錄被拖拽的節(jié)點的完整信息evt.dataTransfer.setData('application/reactflownode', JSON.stringify(node));// 設(shè)置拖拽效果為移動evt.dataTransfer.effectAllowed = 'move';
};

這個函數(shù)會在用戶拖拽節(jié)點時被觸發(fā)，并且會設(shè)置相關(guān)的數(shù)據(jù)以便后續(xù)在畫布上放置節(jié)點時使用。

總結(jié)

通過創(chuàng)建一個可拖動的操作欄，用戶可以方便地將節(jié)點拖放到工作流畫布上。在本文中，我們了解了如何創(chuàng)建操作欄組件，處理拖拽事件，并將組件列表展示給用戶。下一篇博客中，我們將繼續(xù)深入研究工作流界面的其他方面，包括畫布的交互性和節(jié)點的定制。敬請期待！