Python内核代码移除，建模界面缩放bug修复

frontend/src/App.tsx

@@ -74,7 +74,6 @@ import {
   useEdgesState,
   useNodesState,
   useReactFlow,
-  useStore,
   useStoreApi,
   useUpdateNodeInternals,
 } from "@xyflow/react";
@@ -90,6 +89,7 @@ import {
   type SimulationResultsSnapshot,
 } from "./SimulationResultsView";
 import { AutoFitView } from "./AutoFitView";
+import { useScrollbarViewport } from "./useScrollbarViewport";
 import { DockedSimulationConsole } from "./DockedSimulationConsole";
 import {
   ComponentSymbol,
@@ -1760,7 +1760,6 @@ function SimulationComponentNodeImpl({
   selected,
 }: SimulationComponentNodeProps) {
   const updateNodeInternals = useUpdateNodeInternals();
-  const viewportZoom = useStore((flowState) => flowState.transform[2]);
   const symbolContainerRef = useRef<HTMLDivElement>(null);
   const rotation = normalizeNodeRotation(data.rotation);
   const mirrored = Boolean(data.mirrored);
@@ -1817,7 +1816,6 @@ function SimulationComponentNodeImpl({
         rotation,
       )
     : [];
-  const inverseViewportScale = viewportZoom > 0 ? 1 / viewportZoom : 1;
   const nodeLayoutStyle = {
     width: renderedSize.width,
     height: renderedSize.height,
@@ -1905,8 +1903,7 @@ function SimulationComponentNodeImpl({
             style={{
               left: x,
               top: y,
-              transform: `scale(${inverseViewportScale}) translate(-50%, -50%)`,
-              transformOrigin: "0 0",
+              transform: "translate(-50%, -50%)",
             }}
             title={`${port.name} (${port.domain})`}
             type={portHandleType(port)}
@@ -1916,10 +1913,6 @@ function SimulationComponentNodeImpl({
               className="port-handle-glyph"
               preserveAspectRatio="xMidYMid meet"
               shapeRendering="geometricPrecision"
-              style={{
-                transform: `scale(${viewportZoom})`,
-                transformOrigin: "center",
-              }}
               viewBox="0 0 6 6"
             >
               {port.kind === "physical" ? (
@@ -3752,11 +3745,14 @@ function FlowViewportScrollbars({
   nodes: SimulationNode[];
 }) {
   const reactFlow = useReactFlow<SimulationNode, SimulationEdge>();
-  const transform = useStore((flowState) => flowState.transform);
-  const canvasWidth = useStore((flowState) => flowState.width);
-  const canvasHeight = useStore((flowState) => flowState.height);
+  const {
+    transform,
+    width: canvasWidth,
+    height: canvasHeight,
+  } = useScrollbarViewport();
   const horizontalRef = useRef<HTMLDivElement>(null);
   const verticalRef = useRef<HTMLDivElement>(null);
+  const synchronizedScrollRef = useRef({ left: 0, top: 0 });
   const [scrollbarViewport, setScrollbarViewport] = useState({
     horizontalWidth: 0,
     verticalHeight: 0,
@@ -3903,6 +3899,12 @@ function FlowViewportScrollbars({
     if (vertical && Math.abs(vertical.scrollTop - expectedScrollTop) > 0.5) {
       vertical.scrollTop = expectedScrollTop;
     }
+    // 浏览器可能对滚动位置取整或裁切；记录真正写入的位置，避免稍后
+    // 到达的原生 scroll 事件被当作用户拖动，反向覆盖刚恢复/缩放的视口。
+    synchronizedScrollRef.current = {
+      left: horizontal?.scrollLeft ?? 0,
+      top: vertical?.scrollTop ?? 0,
+    };
   }, [expectedScrollLeft, expectedScrollTop, horizontalContentWidth, verticalContentHeight]);
 
   const setHorizontalViewportFromScroll = (nextScrollLeft: number) => {
@@ -3911,10 +3913,10 @@ function FlowViewportScrollbars({
       (horizontalScrollRange > 0
         ? (nextScrollLeft / horizontalScrollRange) * horizontalWorldRange
         : 0);
+    const currentViewport = reactFlow.getViewport();
     void reactFlow.setViewport({
-      x: -nextVisibleLeft * zoom,
-      y: transform[1],
-      zoom,
+      ...currentViewport,
+      x: -nextVisibleLeft * currentViewport.zoom,
     });
   };
   const setVerticalViewportFromScroll = (nextScrollTop: number) => {
@@ -3923,10 +3925,10 @@ function FlowViewportScrollbars({
       (verticalScrollRange > 0
         ? (nextScrollTop / verticalScrollRange) * verticalWorldRange
         : 0);
+    const currentViewport = reactFlow.getViewport();
     void reactFlow.setViewport({
-      x: transform[0],
-      y: -nextVisibleTop * zoom,
-      zoom,
+      ...currentViewport,
+      y: -nextVisibleTop * currentViewport.zoom,
     });
   };
 
@@ -3941,7 +3943,7 @@ function FlowViewportScrollbars({
         className="flow-viewport-scrollbar flow-viewport-scrollbar-horizontal nowheel nopan"
         onScroll={(event) => {
           const nextScrollLeft = event.currentTarget.scrollLeft;
-          if (Math.abs(nextScrollLeft - expectedScrollLeft) <= 0.5) {
+          if (Math.abs(nextScrollLeft - synchronizedScrollRef.current.left) <= 0.5) {
             return;
           }
           setHorizontalViewportFromScroll(nextScrollLeft);
@@ -3992,7 +3994,7 @@ function FlowViewportScrollbars({
         className="flow-viewport-scrollbar flow-viewport-scrollbar-vertical nowheel nopan"
         onScroll={(event) => {
           const nextScrollTop = event.currentTarget.scrollTop;
-          if (Math.abs(nextScrollTop - expectedScrollTop) <= 0.5) {
+          if (Math.abs(nextScrollTop - synchronizedScrollRef.current.top) <= 0.5) {
             return;
           }
           setVerticalViewportFromScroll(nextScrollTop);
@@ -4117,12 +4119,11 @@ function PortGeometryRefresh({
   nodeIds: string[];
   requestKey: number;
 }) {
-  const zoom = useStore((state) => state.transform[2]);
   const updateNodeInternals = useUpdateNodeInternals();
   const lastRefreshKeyRef = useRef("");
 
   useLayoutEffect(() => {
-    const refreshKey = `${requestKey}:${zoom}:${nodeIds.join("\u001f")}`;
+    const refreshKey = `${requestKey}:${nodeIds.join("\u001f")}`;
     if (lastRefreshKeyRef.current === refreshKey || nodeIds.length === 0) {
       return;
     }
@@ -4131,7 +4132,7 @@ function PortGeometryRefresh({
       updateNodeInternals(nodeIds);
     });
     return () => window.cancelAnimationFrame(frame);
-  }, [nodeIds, requestKey, updateNodeInternals, zoom]);
+  }, [nodeIds, requestKey, updateNodeInternals]);
 
   return null;
 }
@@ -4257,6 +4258,7 @@ function FlowWorkbench() {
   const pendingPasteRef = useRef<PendingPaste | null>(null);
   const portConnectionDraftRef = useRef<PortConnectionDraft | null>(null);
   const modelingViewportRef = useRef<Viewport>({ x: 0, y: 0, zoom: 1 });
+  const modelingCanvasRef = useRef<HTMLElement>(null);
   const lastFlowPointerRef = useRef<{ x: number; y: number } | null>(null);
   const pendingPasteMiddlePointerRef = useRef<PendingPasteMiddlePointer | null>(
     null,
@@ -4983,6 +4985,9 @@ function FlowWorkbench() {
         return;
       }
       if (view !== "modeling") {
+        if (modelingCanvasRef.current) {
+          modelingViewportRef.current = reactFlow.getViewport();
+        }
         cancelPortConnection();
       }
       setActiveView(view);
@@ -4994,7 +4999,7 @@ function FlowWorkbench() {
         window.history.pushState({ workspaceView: view }, "", nextHash);
       }
     },
-    [appendConsoleEntry, cancelPortConnection],
+    [appendConsoleEntry, cancelPortConnection, reactFlow],
   );
 
   const loadSimulationResultsSnapshot = useCallback(
@@ -8862,27 +8867,34 @@ function FlowWorkbench() {
               "flow-canvas",
               activePortConnection?.mode === "click" ? "connection-planning" : "",
             ].filter(Boolean).join(" ")}
-          onClickCapture={handleFlowClickCapture}
-          onDragOver={(event) => {
-            if (pendingPasteRef.current) {
-              event.dataTransfer.dropEffect = "none";
-              return;
+            ref={modelingCanvasRef}
+            style={
+              {
+                "--port-handle-hit-scale":
+                  1 / Math.max(modelingViewportRef.current.zoom, 0.01),
+              } as CSSProperties
             }
-            event.preventDefault();
-            event.dataTransfer.dropEffect = "move";
-          }}
-          onDrop={onDrop}
-          onPointerCancelCapture={() => {
-            pendingPasteMiddlePointerRef.current = null;
-            setNodeDragActive(false);
-            contactDragSessionRef.current = null;
-            clearContactSnapCandidate();
-            handleTightSelectionPointerCancel();
-          }}
-          onPointerDownCapture={handleFlowPointerDownCapture}
-          onPointerMoveCapture={handleFlowPointerMoveCapture}
-          onPointerUpCapture={handleFlowPointerUpCapture}
-        >
+            onClickCapture={handleFlowClickCapture}
+            onDragOver={(event) => {
+              if (pendingPasteRef.current) {
+                event.dataTransfer.dropEffect = "none";
+                return;
+              }
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "move";
+            }}
+            onDrop={onDrop}
+            onPointerCancelCapture={() => {
+              pendingPasteMiddlePointerRef.current = null;
+              setNodeDragActive(false);
+              contactDragSessionRef.current = null;
+              clearContactSnapCandidate();
+              handleTightSelectionPointerCancel();
+            }}
+            onPointerDownCapture={handleFlowPointerDownCapture}
+            onPointerMoveCapture={handleFlowPointerMoveCapture}
+            onPointerUpCapture={handleFlowPointerUpCapture}
+          >
           <ReactFlow
             colorMode="light"
             connectionMode={ConnectionMode.Loose}
@@ -8919,6 +8931,18 @@ function FlowWorkbench() {
               modelingViewportRef.current = { ...viewport };
               syncPendingPasteToPointer();
             }}
+            onMoveEnd={() => {
+              const canvas = modelingCanvasRef.current;
+              if (!canvas) return;
+              // 较早的平移结束事件可能晚于下一次缩放到达，读取当前视口，
+              // 避免旧事件覆盖最新缩放或页面切换时保存的位置。
+              const viewport = reactFlow.getViewport();
+              modelingViewportRef.current = viewport;
+              canvas.style.setProperty(
+                "--port-handle-hit-scale",
+                String(1 / Math.max(viewport.zoom, 0.01)),
+              );
+            }}
             onPaneClick={handleModelingPaneClick}
             onSelectionChange={handleModelingSelectionChange}
             onSelectionEnd={finishTightSelection}

frontend/src/AutoFitView.tsx

@@ -18,7 +18,14 @@ export function AutoFitView({
   padding = 0.18,
   requestKey,
 }: AutoFitViewProps) {
+  const lastHandledRequestKey = useRef<number | string | null>(
+    fitOnMount ? null : requestKey,
+  );
   const expectedNodesAreMeasured = useStore((state) => {
+    // 完成适应窗口后，后续每帧的视口通知无需再遍历整个节点表。
+    if (Object.is(lastHandledRequestKey.current, requestKey) || !enabled) {
+      return false;
+    }
     if (expectedNodeCount <= 0 || state.nodeLookup.size !== expectedNodeCount) {
       return false;
     }
@@ -35,9 +42,6 @@ export function AutoFitView({
     return true;
   });
   const { fitView } = useReactFlow();
-  const lastHandledRequestKey = useRef<number | string | null>(
-    fitOnMount ? null : requestKey,
-  );
 
   useLayoutEffect(() => {
     if (Object.is(lastHandledRequestKey.current, requestKey)) {

frontend/src/styles.css

@@ -1330,6 +1330,14 @@ textarea {
   background: #f8fafc;
 }
 
+/* 每个元件独立参与布局与合成，缩放时避免反复重绘整张复杂系统图。
+ * 不使用 paint/size containment：端口、序号和透明命中区仍可超出节点边界。
+ */
+.flow-canvas .react-flow__node {
+  contain: layout style;
+  will-change: transform;
+}
+
 .modeling-canvas-stack {
   display: grid;
   grid-template-rows: minmax(0, 1fr) auto;
@@ -1698,6 +1706,8 @@ textarea {
   background: transparent;
   content: "";
   pointer-events: inherit;
+  transform: scale(var(--port-handle-hit-scale, 1));
+  transform-origin: center;
 }
 
 .port-handle-physical {

frontend/src/useScrollbarViewport.ts

@@ -0,0 +1,63 @@
+import { useLayoutEffect, useState } from "react";
+import { useStoreApi, type Transform } from "@xyflow/react";
+
+type ScrollbarViewport = {
+  transform: Transform;
+  width: number;
+  height: number;
+};
+
+const ZOOM_SCROLLBAR_SETTLE_MS = 120;
+
+// 原生滚动条修改内容尺寸后读取 scrollLeft/Top 会强制布局。
+// 缩放期间保持其几何稳定，停稳后同步；平移仍逐帧跟随画布。
+export function useScrollbarViewport(): ScrollbarViewport {
+  const store = useStoreApi();
+  const [viewport, setViewport] = useState<ScrollbarViewport>(() => {
+    const { transform, width, height } = store.getState();
+    return { transform, width, height };
+  });
+
+  useLayoutEffect(() => {
+    let frame = 0;
+    let settleTimer = 0;
+    const publish = () => {
+      frame = 0;
+      const { transform, width, height } = store.getState();
+      setViewport((previous) =>
+        previous.width === width && previous.height === height &&
+        previous.transform.every((value, index) => value === transform[index])
+          ? previous
+          : { transform, width, height },
+      );
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(publish);
+    };
+    const unsubscribe = store.subscribe((current, previous) => {
+      if (current.width !== previous.width || current.height !== previous.height) {
+        schedule();
+      } else if (current.transform !== previous.transform) {
+        if (current.transform[2] !== previous.transform[2] || settleTimer) {
+          cancelAnimationFrame(frame);
+          frame = 0;
+          clearTimeout(settleTimer);
+          settleTimer = window.setTimeout(() => {
+            settleTimer = 0;
+            schedule();
+          }, ZOOM_SCROLLBAR_SETTLE_MS);
+        } else {
+          schedule();
+        }
+      }
+    });
+    schedule();
+    return () => {
+      unsubscribe();
+      cancelAnimationFrame(frame);
+      clearTimeout(settleTimer);
+    };
+  }, [store]);
+
+  return viewport;
+}