SmartBench/CMVR-IOT-UI
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 节点缩小和定位

Browse Source
This commit is contained in:
zhanghao 2025-11-17 15:24:45 +08:00
parent 9a7afa8f6e
commit f00aefb586
5 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/utils/flow.js
View File

@ -172,6 +172,22 @@ export const newEdge = (nodeId) => {
})
}
export const initNodeZoom = (modelId, nodeZoom, className, init=false) => {
const nodes = document.getElementsByClassName(modelId)
if (nodes.length > 0) {
const node = nodes[0]
const parent = node.closest(className);
if (nodeZoom) {
parent.style.width = '680px'
} else {
parent.style.width = '300px'
}
if (!init) {
addNewEdge(modelId)
}
}
}
export const getInputNumber = (nodeId) => {
const data = lf.getGraphData();
let flag = false

1
src/views/flow/index.vue
View File

@ -572,6 +572,7 @@ const handleTreeNodeClick = (node) => {
lf.focusOn({
id: node.id
})
lf.selectElementById(node.id)
}
const fitView = () => {

23
src/views/flow/nodes/common/serviceNode.vue
View File

@ -210,8 +210,8 @@
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { getInput, addNewEdge } from "@/utils/flow";
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
import { getInput, initNodeZoom } from "@/utils/flow";
import { useFlowStore } from "@/store/modules/flow";
import { Plus } from "@element-plus/icons-vue";
import NodeTitle from "../../components/NodeTitle.vue";
@ -283,6 +283,7 @@ const setNodeProperties = async () => {
lf.setProperties(props.model.id, {
...properties,
...data,
zoom: nodeZoom.value
});
emits("contentChange");
}
@ -363,20 +364,10 @@ const deleteTopLevelItem = (fullPath) => {
emits("contentChange");
};
const nodeZoom = ref(true)
const nodeZoom = ref(props?.properties?.zoom ?? true)
const zoom = (flag) => {
nodeZoom.value = flag
const nodes = document.getElementsByClassName(props.model.id)
if (nodes.length > 0) {
const node = nodes[0]
const parent = node.closest('.node__box');
if (nodeZoom.value) {
parent.style.width = '680px'
} else {
parent.style.width = '300px'
}
addNewEdge(props.model.id)
}
initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
}
watch(
@ -388,6 +379,10 @@ watch(
if (option) {
quoteOptions.value = option;
}
nextTick(() => {
initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
})
}
if (
props.properties.outputParams &&

22
src/views/flow/nodes/common/startNode.vue
View File

@ -77,10 +77,10 @@
</template>
<script setup>
import { watch, reactive, toRaw, ref, onMounted, onUnmounted } from "vue";
import { watch, reactive, toRaw, ref, onMounted, onUnmounted, nextTick } from "vue";
import { Plus, ZoomOut, ZoomIn } from "@element-plus/icons-vue";
import { useFlowStore } from "@/store/modules/flow";
import { addNewEdge } from "@/utils/flow";
import { initNodeZoom } from "@/utils/flow";
import NodeState from "../../components/NodeState.vue";
import "vue3-json-viewer/dist/index.css";
import { emitter } from "@/utils/eventBus";
@ -130,6 +130,7 @@ const setNodeProperties = async () => {
lf.setProperties(props.model.id, {
...props.properties,
...data,
zoom: nodeZoom.value
});
emits("contentChange");
}
@ -147,6 +148,9 @@ watch(
() => {
if (props.properties.inputParams && props.properties.inputParams.length > 0) {
formData.inputParams = props.properties.inputParams;
nextTick(() => {
initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
})
}
},
{
@ -218,20 +222,10 @@ const validateForm = async () => {
}
};
const nodeZoom = ref(true)
const nodeZoom = ref(props?.properties?.zoom ?? true)
const zoom = () => {
nodeZoom.value = !nodeZoom.value
const nodes = document.getElementsByClassName(props.model.id)
if (nodes.length > 0) {
const node = nodes[0]
const parent = node.closest('.node__box');
if (nodeZoom.value) {
parent.style.width = '680px'
} else {
parent.style.width = '300px'
}
addNewEdge(props.model.id)
}
initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
}
onUnmounted(() => {

22
src/views/flow/nodes/function/sleep.vue
View File

@ -136,8 +136,8 @@
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { getInput, addNewEdge } from "@/utils/flow";
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
import { getInput, initNodeZoom } from "@/utils/flow";
import { useFlowStore } from "@/store/modules/flow";
import { Plus } from "@element-plus/icons-vue";
import NodeTitle from "../../components/NodeTitle.vue";
@ -185,6 +185,7 @@ const setNodeProperties = async () => {
lf.setProperties(props.model.id, {
...properties,
...data,
zoom: nodeZoom.value
});
emits("contentChange");
}
@ -230,20 +231,10 @@ const addFormItem = () => {
emits("contentChange");
};
const nodeZoom = ref(true)
const nodeZoom = ref(props?.properties?.zoom ?? true)
const zoom = (flag) => {
nodeZoom.value = flag
const nodes = document.getElementsByClassName(props.model.id)
if (nodes.length > 0) {
const node = nodes[0]
const parent = node.closest('.node__box');
if (nodeZoom.value) {
parent.style.width = '680px'
} else {
parent.style.width = '300px'
}
addNewEdge(props.model.id)
}
initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
}
watch(
@ -255,6 +246,9 @@ watch(
if (option) {
quoteOptions.value = option;
}
nextTick(() => {
initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
})
}
},
{