15308555518/ MaxKB
1
0
Fork 0
mirror of https://github.com/1Panel-dev/MaxKB.git synced 2025-12-30 09:42:48 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: 修改edge点位置

This commit is contained in:
shaohuzhang1 2024-06-25 16:20:52 +08:00
parent 3333349af4
commit ef919ba2b9
3 changed files with 135 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/src/workflow/common/CustomLine.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="custom-edge cursor">
<div class="custom-edge cursor" v-show="props.model.isHovered" @click.stop>
<svg
@click="deleteEdge"
width="100%"
height="100%"
viewBox="0 0 24 24"
@ -18,11 +19,19 @@
</svg>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{ model: any }>()
const deleteEdge = () => {
props.model.graphModel.eventCenter.emit('delete_node')
}
</script>
<style lang="scss">
.custom-edge {
color: var(--el-color-primary);
stroke: none;
width: 22px;
z-index: 100000;
position: absolute;
}
</style>

66
ui/src/workflow/common/edge.ts
View File

@ -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 {

169
ui/src/workflow/common/shortcut.ts
View File

@ -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);
}
keyboard.on(['backspace'], delete_node)
}