From 51f321a4231527b0d46e1409ecf69349106fc329 Mon Sep 17 00:00:00 2001 From: heiheihei <1395202740@qq.com> Date: Sat, 30 Aug 2025 14:14:21 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=8E=A7=E5=88=B6=E6=A0=8F=E7=BC=A9?= =?UTF-8?q?=E6=94=BE=E6=97=B6=EF=BC=8C=E4=B8=AD=E7=BA=BF=E7=82=B9=E4=B8=8D?= =?UTF-8?q?=E5=AF=B9=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ModelVis/app/src/stores/graph.ts | 31 +++++++++++++++++-- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/stores/graph.ts b/plugins/mindstudio-insight-plugins/ModelVis/app/src/stores/graph.ts index 8957ba3ab..1689b9981 100644 --- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/stores/graph.ts +++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/stores/graph.ts @@ -19,7 +19,7 @@ import { RingCache } from "libs" export const searchResultAtom = atom() export const translateAtom = atom({ x: 0, y: 0 }) -export const translateCacheAtom = atom<{[key:string]:Translate}>({}) +export const translateCacheAtom = atom<{ [key: string]: Translate }>({}) const ScaleInExpo = 0.96 const ScaleUpExpo = 1.02 @@ -29,7 +29,19 @@ const MinZoomRatio = 0.1 export const zoomAtom = atom(1) export const zoomInAtom = atom(null, (get, set) => { - if (get(zoomAtom) > MinZoomRatio) set(zoomAtom, c => Math.max(c * ScaleInExpo, MinZoomRatio)) + const translate = get(translateAtom); + + if (get(zoomAtom) > MinZoomRatio) { + const scaleChange = -0.04 + const offsetX = window.innerWidth / 2 - translate.x + const offsetY = window.innerHeight / 2 - translate.y + + set(translateAtom, { + x: translate.x - offsetX * scaleChange, + y: translate.y - offsetY * scaleChange + }) + set(zoomAtom, c => Math.max(c * ScaleInExpo, MinZoomRatio)) + } }) export const resetZoomAtom = atom(null, (get, set) => { @@ -37,7 +49,20 @@ export const resetZoomAtom = atom(null, (get, set) => { }) export const zoomOutAtom = atom(null, (get, set) => { - if (get(zoomAtom) < MaxZoomRatio) set(zoomAtom, c => Math.min(c * ScaleUpExpo, MaxZoomRatio)) + const translate = get(translateAtom); + + + if (get(zoomAtom) < MaxZoomRatio) { + const scaleChange = 0.02 + const offsetX = window.innerWidth / 2 - translate.x + const offsetY = window.innerHeight / 2 - translate.y + + set(translateAtom, { + x: translate.x - offsetX * scaleChange, + y: translate.y - offsetY * scaleChange + }) + set(zoomAtom, c => Math.min(c * ScaleUpExpo, MaxZoomRatio)) + } }) export const useZoom = () => { -- Gitee From e60b8f3fd7862f2e517e5da9fe5ba2014c10876e Mon Sep 17 00:00:00 2001 From: heiheihei <1395202740@qq.com> Date: Sat, 30 Aug 2025 14:32:26 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E7=BC=A9=E6=94=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Control/TransformControl.tsx | 18 +++++++++--------- .../ModelVis/app/src/ModelStructure/index.tsx | 10 +--------- .../ModelVis/app/src/stores/graph.ts | 17 ++++++++++------- 3 files changed, 20 insertions(+), 25 deletions(-) diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Control/TransformControl.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Control/TransformControl.tsx index b5089d98c..420b88395 100644 --- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Control/TransformControl.tsx +++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Control/TransformControl.tsx @@ -27,24 +27,24 @@ export const ZoomControl = () => { const t = useI18n() return <> - - @@ -64,8 +64,8 @@ export const TranslateControl = () => { return } diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/index.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/index.tsx index 59bf2d54a..42a852030 100644 --- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/index.tsx +++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/index.tsx @@ -114,18 +114,10 @@ const ModelStructureComp = ({ width, height }: WindowSize) => { const { clientX, clientY, deltaY, ctrlKey, metaKey } = ev if (ctrlKey || metaKey) { - const scaleChange = deltaY > 0 ? -0.04 : 0.02 const offsetX = clientX - translate.x const offsetY = clientY - translate.y - // When zooming, the mouse position is used as transformOrigin, - // so translate needs to be updated. - setTranslate({ - x: translate.x - offsetX * scaleChange, - y: translate.y - offsetY * scaleChange - }) - - deltaY > 0 ? zoomIn() : zoomOut() + deltaY > 0 ? zoomIn({ offsetX, offsetY }) : zoomOut({ offsetX, offsetY }) } else setTranslate({ x: translate.x, diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/stores/graph.ts b/plugins/mindstudio-insight-plugins/ModelVis/app/src/stores/graph.ts index 1689b9981..1f1af6fbb 100644 --- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/stores/graph.ts +++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/stores/graph.ts @@ -28,14 +28,16 @@ const MinZoomRatio = 0.1 export const zoomAtom = atom(1) -export const zoomInAtom = atom(null, (get, set) => { +export const zoomInAtom = atom(null, (get, set, param?: { offsetX: number, offsetY: number }) => { const translate = get(translateAtom); if (get(zoomAtom) > MinZoomRatio) { const scaleChange = -0.04 - const offsetX = window.innerWidth / 2 - translate.x - const offsetY = window.innerHeight / 2 - translate.y + const offsetX = param?.offsetX ?? window.innerWidth / 2 - translate.x + const offsetY = param?.offsetY ?? window.innerHeight / 2 - translate.y + // When zooming, the mouse position is used as transformOrigin, + // so translate needs to be updated. set(translateAtom, { x: translate.x - offsetX * scaleChange, y: translate.y - offsetY * scaleChange @@ -48,15 +50,16 @@ export const resetZoomAtom = atom(null, (get, set) => { if (get(zoomAtom) !== 1) set(zoomAtom, _ => 1) }) -export const zoomOutAtom = atom(null, (get, set) => { +export const zoomOutAtom = atom(null, (get, set, param?: { offsetX: number, offsetY: number }) => { const translate = get(translateAtom); - if (get(zoomAtom) < MaxZoomRatio) { const scaleChange = 0.02 - const offsetX = window.innerWidth / 2 - translate.x - const offsetY = window.innerHeight / 2 - translate.y + const offsetX = param?.offsetX ?? window.innerWidth / 2 - translate.x + const offsetY = param?.offsetY ?? window.innerHeight / 2 - translate.y + // When zooming, the mouse position is used as transformOrigin, + // so translate needs to be updated. set(translateAtom, { x: translate.x - offsetX * scaleChange, y: translate.y - offsetY * scaleChange -- Gitee