Merge branch 'dev' into 'main'

cs fixed zoom & fit graph to root node

See merge request frontend/squiz!103

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -95,6 +95,23 @@ function CsComponent({
     gearsContainer,
   });
 
+  function fitGraphToRootNode() {
+    const cy = cyRef.current;
+    if (!cy) return;
+
+    const rootNode = cy.nodes().filter((n) => n.data("root"))[0];
+    if (!rootNode) throw new Error("Root node not found");
+
+    const height = cy.height();
+    const position = rootNode.position();
+    const shift = rootNode.width() / 2;
+
+    cy.pan({
+      x: position.x + shift,
+      y: position.y + height / 2,
+    });
+  }
+
   useLayoutEffect(() => {
     const cy = cyRef?.current;
     if (desireToOpenABranchingModal) {
@@ -301,7 +318,7 @@ function CsComponent({
       // cy.data('changed', true)
       const elecs = eles?.layout(layoutOptions).run();
       cy?.on("add", () => cy.data("changed", true));
-      cy?.fit();
+      fitGraphToRootNode();
       //cy?.layout().run()
       firstRender.current = false;
     }
@@ -335,9 +352,7 @@ function CsComponent({
             fontSize: "16px",
           }}
           variant="text"
-          onClick={() => {
-            cyRef.current?.fit();
-          }}
+          onClick={fitGraphToRootNode}
         >
           Выровнять
         </Button>
@@ -358,6 +373,8 @@ function CsComponent({
           cyRef.current = cy;
         }}
         autoungrabify={true}
+        zoom={0.6}
+        zoomingEnabled={false}
       />
       <DeleteNodeModal removeNode={removeNode} />
     </>

src/pages/Questions/BranchingMap/hooks/usePopper.ts

@@ -104,17 +104,12 @@ export const usePopper = ({
       container.append(layoutsContainer.current);
     }
 
-    const ext = cy.extent();
-    const nodesInView = cy.nodes().filter((n) => {
-      const bb = n.boundingBox();
-      return (
-        bb.x2 > ext.x1 && bb.x1 < ext.x2 && bb.y2 > ext.y1 && bb.y1 < ext.y2
-      );
-    });
-
     cy?.removeAllListeners();
 
-    nodesInView.toArray()?.forEach((item) => {
+    cy
+      .nodes()
+      .toArray()
+      ?.forEach((item) => {
         const node = item as NodeSingularWithPopper;
 
         const layoutsPopper = node.popper({
@@ -203,7 +198,9 @@ export const usePopper = ({
         let gearsPopper: Popper | null = null;
         if (node.data().root !== true) {
           console.log(node.data("parentType"));
-        const parentQuestion = getQuestionByContentId(node.data("parentType"));
+          const parentQuestion = getQuestionByContentId(
+            node.data("parentType"),
+          );
 
           gearsPopper = node.popper({
             popper: {
@@ -253,8 +250,7 @@ export const usePopper = ({
           await layoutsPopper.update();
         };
 
-      const onZoom = (event: AbstractEventObject) => {
-        const zoom = event.cy.zoom();
+        const zoom = cy.zoom();
 
         //update();
 
@@ -319,7 +315,6 @@ export const usePopper = ({
             element.style.width = `${60 * zoom}px`;
             element.style.height = `${40 * zoom}px`;
           });
-      };
 
         //node?.on("position", update);
         let pressed = false;
@@ -356,7 +351,9 @@ export const usePopper = ({
           }
         });
 
-      cy?.on("zoom render", onZoom);
+        cy.on("render", () => {
+          update();
+        });
       });
   };