diff --git a/ui/src/workflow/common/CustomLine.vue b/ui/src/workflow/common/CustomLine.vue index 68f9f019e..6277e7608 100644 --- a/ui/src/workflow/common/CustomLine.vue +++ b/ui/src/workflow/common/CustomLine.vue @@ -1,6 +1,7 @@ + diff --git a/ui/src/workflow/common/edge.ts b/ui/src/workflow/common/edge.ts index 856bf0149..69a73d18a 100644 --- a/ui/src/workflow/common/edge.ts +++ b/ui/src/workflow/common/edge.ts @@ -3,10 +3,11 @@ import { createApp, h as vh } from 'vue' import CustomLine from './CustomLine.vue' -const DEFAULT_WIDTH = 48 +const DEFAULT_WIDTH = 32 const DEFAULT_HEIGHT = 32 class CustomEdge2 extends BezierEdge { isMounted + constructor() { super() this.isMounted = false @@ -38,8 +39,9 @@ class CustomEdge2 extends BezierEdge { width: customWidth, height: customHeight } + console.log(this) const app = createApp({ - render: () => vh(CustomLine, {}) + render: () => vh(CustomLine, { model: this.props.model }) }) setTimeout(() => { const s = document.getElementById(id) @@ -50,45 +52,50 @@ class CustomEdge2 extends BezierEdge { }, 0) delete style.stroke - return h('g', {}, [ - h('style', { type: 'text/css' }, '.lf-edge{stroke:#afafaf}.lf-edge:hover{stroke: #3370FF;}'), - h('path', { - d: path, - ...style, - ...arrowConfig, - ...(isAnimation - ? { - strokeDasharray, - stroke, - style: { - strokeDashoffset, - animationName, - animationDuration, - animationIterationCount, - animationTimingFunction, - animationDirection + return [ + h('g', {}, [ + h( + 'style', + { type: 'text/css' }, + '.lf-edge{stroke:#afafaf}.lf-edge:hover{stroke: #3370FF;}' + ), + h('path', { + d: path, + ...style, + ...arrowConfig, + ...(isAnimation + ? { + strokeDasharray, + stroke, + style: { + strokeDashoffset, + animationName, + animationDuration, + animationIterationCount, + animationTimingFunction, + animationDirection + } } - } - : {}) - }), + : {}) + }) + ]), h( 'foreignObject', { ...positionData, y: positionData.y + 5, - x: positionData.x + 11, - style: { overflow: 'visible' } + x: positionData.x + 5, + style: {} }, [ h('div', { id, - style: wrapperStyle, - + style: { ...wrapperStyle }, className: 'lf-custom-edge-wrapper' }) ] ) - ]) + ] } } @@ -151,6 +158,11 @@ class CustomEdgeModel2 extends BezierEdgeModel { this.pointsList = [] this.initPoints() } + setAttributes(): void { + super.setAttributes() + this.isHitable = true + this.zIndex = 0 + } } export default { diff --git a/ui/src/workflow/common/shortcut.ts b/ui/src/workflow/common/shortcut.ts index ddbb7b6f9..1d3abe15d 100644 --- a/ui/src/workflow/common/shortcut.ts +++ b/ui/src/workflow/common/shortcut.ts @@ -1,119 +1,122 @@ -import type LogicFlow from '@logicflow/core'; -import {type GraphModel} from '@logicflow/core'; +import type LogicFlow from '@logicflow/core' +import { type GraphModel } from '@logicflow/core' import { ElMessageBox, ElMessage } from 'element-plus' -let selected:any|null = null; +let selected: any | null = null -function translationNodeData(nodeData:any, distance:any) { - nodeData.x += distance; - nodeData.y += distance; +function translationNodeData(nodeData: any, distance: any) { + nodeData.x += distance + nodeData.y += distance if (nodeData.text) { - nodeData.text.x += distance; - nodeData.text.y += distance; + nodeData.text.x += distance + nodeData.text.y += distance } - return nodeData; + return nodeData } -function translationEdgeData(edgeData:any, distance:any) { +function translationEdgeData(edgeData: any, distance: any) { if (edgeData.startPoint) { - edgeData.startPoint.x += distance; - edgeData.startPoint.y += distance; + edgeData.startPoint.x += distance + edgeData.startPoint.y += distance } if (edgeData.endPoint) { - edgeData.endPoint.x += distance; - edgeData.endPoint.y += distance; + edgeData.endPoint.x += distance + edgeData.endPoint.y += distance } if (edgeData.pointsList && edgeData.pointsList.length > 0) { - edgeData.pointsList.forEach((point:any) => { - point.x += distance; - point.y += distance; - }); + edgeData.pointsList.forEach((point: any) => { + point.x += distance + point.y += distance + }) } if (edgeData.text) { - edgeData.text.x += distance; - edgeData.text.y += distance; + edgeData.text.x += distance + edgeData.text.y += distance } - return edgeData; + return edgeData } -const TRANSLATION_DISTANCE = 40; -let CHILDREN_TRANSLATION_DISTANCE = 40; +const TRANSLATION_DISTANCE = 40 +let CHILDREN_TRANSLATION_DISTANCE = 40 export function initDefaultShortcut(lf: LogicFlow, graph: GraphModel) { - const { keyboard } = lf; - const { options: { keyboard: keyboardOptions } } = keyboard; - const copy_node=() => { - CHILDREN_TRANSLATION_DISTANCE = TRANSLATION_DISTANCE; - if (!keyboardOptions?.enabled) return true; - if (graph.textEditElement) return true; - const { guards } = lf.options; - const elements = graph.getSelectElements(false); - const enabledClone = guards && guards.beforeClone ? guards.beforeClone(elements) : true; + const { keyboard } = lf + const { + options: { keyboard: keyboardOptions } + } = keyboard + const copy_node = () => { + CHILDREN_TRANSLATION_DISTANCE = TRANSLATION_DISTANCE + if (!keyboardOptions?.enabled) return true + if (graph.textEditElement) return true + const { guards } = lf.options + const elements = graph.getSelectElements(false) + const enabledClone = guards && guards.beforeClone ? guards.beforeClone(elements) : true if (!enabledClone || (elements.nodes.length === 0 && elements.edges.length === 0)) { - selected = null; - return true; + selected = null + return true } - selected = elements; - selected.nodes.forEach((node:any) => translationNodeData(node, TRANSLATION_DISTANCE)); - selected.edges.forEach((edge:any) => translationEdgeData(edge, TRANSLATION_DISTANCE)); + selected = elements + selected.nodes.forEach((node: any) => translationNodeData(node, TRANSLATION_DISTANCE)) + selected.edges.forEach((edge: any) => translationEdgeData(edge, TRANSLATION_DISTANCE)) ElMessage.success({ - message: '已复制节点', - type: 'success', - showClose: true, - duration: 1500 - }) - return false; + message: '已复制节点', + type: 'success', + showClose: true, + duration: 1500 + }) + return false } - const paste_node=() => { - if (!keyboardOptions?.enabled) return true; - if (graph.textEditElement) return true; + const paste_node = () => { + if (!keyboardOptions?.enabled) return true + if (graph.textEditElement) return true if (selected && (selected.nodes || selected.edges)) { - lf.clearSelectElements(); - const addElements = lf.addElements(selected, CHILDREN_TRANSLATION_DISTANCE); - if (!addElements) return true; - addElements.nodes.forEach(node => lf.selectElementById(node.id, true)); - addElements.edges.forEach(edge => lf.selectElementById(edge.id, true)); - selected.nodes.forEach((node:any) => translationNodeData(node, TRANSLATION_DISTANCE)); - selected.edges.forEach((edge:any) => translationEdgeData(edge, TRANSLATION_DISTANCE)); - CHILDREN_TRANSLATION_DISTANCE = CHILDREN_TRANSLATION_DISTANCE + TRANSLATION_DISTANCE; + lf.clearSelectElements() + const addElements = lf.addElements(selected, CHILDREN_TRANSLATION_DISTANCE) + if (!addElements) return true + addElements.nodes.forEach((node) => lf.selectElementById(node.id, true)) + addElements.edges.forEach((edge) => lf.selectElementById(edge.id, true)) + selected.nodes.forEach((node: any) => translationNodeData(node, TRANSLATION_DISTANCE)) + selected.edges.forEach((edge: any) => translationEdgeData(edge, TRANSLATION_DISTANCE)) + CHILDREN_TRANSLATION_DISTANCE = CHILDREN_TRANSLATION_DISTANCE + TRANSLATION_DISTANCE } - return false; + return false } - const delete_node=()=>{ + const delete_node = () => { const defaultOptions: Object = { - showCancelButton: true, - confirmButtonText: '确定', - cancelButtonText: '取消' - } - ElMessageBox.confirm('确定删除该节点？', defaultOptions).then(() => { - if (!keyboardOptions?.enabled) return true; - if (graph.textEditElement) return true; - const elements = graph.getSelectElements(true); - lf.clearSelectElements(); - elements.edges.forEach((edge:any) => lf.deleteEdge(edge.id)); - elements.nodes.forEach((node:any) => lf.deleteNode(node.id)); - }) - return false + showCancelButton: true, + confirmButtonText: '确定', + cancelButtonText: '取消' + } + ElMessageBox.confirm('确定删除该节点？', defaultOptions).then(() => { + if (!keyboardOptions?.enabled) return true + if (graph.textEditElement) return true + const elements = graph.getSelectElements(true) + lf.clearSelectElements() + elements.edges.forEach((edge: any) => lf.deleteEdge(edge.id)) + elements.nodes.forEach((node: any) => lf.deleteNode(node.id)) + }) + return false } graph.eventCenter.on('copy_node', copy_node) graph.eventCenter.on('paste_node', copy_node) + graph.eventCenter.on('delete_node', delete_node) // 复制 - keyboard.on(['cmd + c', 'ctrl + c'], copy_node); + keyboard.on(['cmd + c', 'ctrl + c'], copy_node) // 粘贴 - keyboard.on(['cmd + v', 'ctrl + v'],paste_node ); + keyboard.on(['cmd + v', 'ctrl + v'], paste_node) // undo keyboard.on(['cmd + z', 'ctrl + z'], () => { - if (!keyboardOptions?.enabled) return true; - if (graph.textEditElement) return true; - lf.undo(); - return false; - }); + if (!keyboardOptions?.enabled) return true + if (graph.textEditElement) return true + lf.undo() + return false + }) // redo keyboard.on(['cmd + y', 'ctrl + y'], () => { - if (!keyboardOptions?.enabled) return true; - if (graph.textEditElement) return true; - lf.redo(); - return false; - }); + if (!keyboardOptions?.enabled) return true + if (graph.textEditElement) return true + lf.redo() + return false + }) // delete - keyboard.on(['backspace'], delete_node); -} \ No newline at end of file + keyboard.on(['backspace'], delete_node) +}