hookehuyr

处理渲染定位显示可能的问题,自动位移中心点位置

...@@ -952,7 +952,38 @@ export default { ...@@ -952,7 +952,38 @@ export default {
952 flowData.value = { nodes, edges }; // 获取已存在的数据 952 flowData.value = { nodes, edges }; // 获取已存在的数据
953 // 内部刷新graph数据 953 // 内部刷新graph数据
954 nextTick(() => { 954 nextTick(() => {
955 - editor.editorState.graph.read(flowData.value) 955 + editor.editorState.graph.read(flowData.value);
956 + // TAG: 自动位移中心点位置
957 + const point = {
958 + x: 600,
959 + y: 400
960 + };
961 + const width = editor.editorState.graph.get('width');
962 + const height = editor.editorState.graph.get('height');
963 + // 找到视口中心
964 + const viewCenter = {
965 + x: width / 2,
966 + y: height / 2
967 + };
968 + const modelCenter = editor.editorState.graph.getPointByCanvas(viewCenter.x, viewCenter.y);
969 + const viewportMatrix = editor.editorState.graph.get('group').getMatrix();
970 + // 画布平移的目标位置,最终目标是graph.translate(dx, dy);
971 + const dx = (modelCenter.x - point.x) * viewportMatrix[0];
972 + const dy = (modelCenter.y - point.y) * viewportMatrix[4];
973 + let lastX = 0;
974 + let lastY = 0;
975 + let newX = void 0;
976 + let newY = void 0;
977 + // 动画每次平移一点,直到目标位置
978 + editor.editorState.graph.get('canvas').animate({
979 + onFrame: function onFrame(ratio) {
980 + newX = dx * ratio;
981 + newY = dy * ratio;
982 + editor.editorState.graph.translate(newX - lastX, newY - lastY);
983 + lastX = newX;
984 + lastY = newY;
985 + }
986 + }, 100, 'easeCubic');
956 }); 987 });
957 } 988 }
958 989
...@@ -1622,7 +1653,10 @@ export default { ...@@ -1622,7 +1653,10 @@ export default {
1622 addItem: any 1653 addItem: any
1623 removeItem: any 1654 removeItem: any
1624 save: () => { nodes: any; edges: any } 1655 save: () => { nodes: any; edges: any }
1625 - read: any 1656 + read: any,
1657 + get: any,
1658 + getPointByCanvas: any,
1659 + translate: any,
1626 } 1660 }
1627 } 1661 }
1628 } 1662 }
......