Fix exit full screen issue (#5)

* Fix disordered positioning after exiting fullscreen #1 * Fix minor typo * VisualizationComponent | Use one canvasSize variable instead of two canvasWidth and canvasHeight #1 * Change variable names to enhance readability * Reorder code Co-authored-by: Nees Jan van Eck <[email protected]>
neesjanvaneck · Oct 1, 2021 · 3ddb95c · 3ddb95c
1 parent c45f316
commit 3ddb95c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 26 deletions.
diff --git a/src/components/visualization/InteractionCanvas/index.js b/src/components/visualization/InteractionCanvas/index.js
@@ -23,6 +23,7 @@ const InteractionCanvas = observer(({ canvasWidth, canvasHeight, withoutLinks })
     visualizationStore.setZoomOut(zoomOut);
     visualizationStore.setZoomFit(zoomFit);
     visualizationStore.setZoomTo(zoomTo);
+    visualizationStore.setTranslateTo(translateTo);
     select(canvasEl.current).call(zoomEl);
     select(canvasEl.current)
       .on('mousemove', (event) => {
@@ -88,6 +89,13 @@ const InteractionCanvas = observer(({ canvasWidth, canvasHeight, withoutLinks })
       .call(zoomEl.transform, zoomIdentity.translate(x, y).scale(s));
   };
 
+  const translateTo = (cx, cy) => {
+    const x = cx / visualizationStore.pixelRatio;
+    const y = cy / visualizationStore.pixelRatio;
+    select(canvasEl.current)
+      .call(zoomEl.translateTo, x, y);
+  };
+
   useEffect(() => {
     visualizationStore.setGetScreenshotImage(getScreenshotImage);
     if (ctx) {

diff --git a/src/components/visualization/VisualizationComponent/index.js b/src/components/visualization/VisualizationComponent/index.js
@@ -18,35 +18,32 @@ const VisualizationComponent = observer(({ withoutUrlPreviewPanel, withoutLinks,
   const visualizationStore = useContext(VisualizationStoreContext);
   const webworkerStore = useContext(WebworkerStoreContext);
   const visEl = useRef(null);
-  const [canvasWidth, setCanvasWidth] = useState(window.innerWidth);
-  const [canvasHeight, setCanvasHeight] = useState(window.innerHeight);
+  const [canvasSize, setCanvasSize] = useState([window.innerWidth, window.innerHeight]);
 
   const updateCanvasSize = () => {
-    setCanvasWidth(window.innerWidth - ((configStore.urlPreviewPanel && !withoutUrlPreviewPanel) ? configStore.urlPreviewPanelWidth : 0));
-    setCanvasHeight(window.innerHeight);
+    setCanvasSize([
+      window.innerWidth - ((configStore.urlPreviewPanel && !withoutUrlPreviewPanel) ? configStore.urlPreviewPanelWidth : 0),
+      window.innerHeight
+    ]);
     uiStore.setWindowInnerWidth(window.innerWidth);
   };
 
   useEffect(() => {
-    visualizationStore.setCanvasSize(canvasWidth, canvasHeight);
+    visualizationStore.setCanvasSize(canvasSize[0], canvasSize[1]);
     visualizationStore.updateItemPixelPositionAndScaling();
     visualizationStore.updateLabelScalingFactors();
     visualizationStore.updateItems();
     visualizationStore.updateLinks();
-  }, [canvasWidth, canvasHeight]);
+  }, [canvasSize]);
 
   useEffect(() => {
     if (!withoutUrlPreviewPanel) updateCanvasSize();
   }, [configStore.urlPreviewPanel]);
 
   useEffect(() => {
-    window.addEventListener('resize', () => {
-      updateCanvasSize();
-    });
+    window.addEventListener('resize', updateCanvasSize);
     return () => {
-      window.removeEventListener('resize', () => {
-        updateCanvasSize();
-      });
+      window.removeEventListener('resize', updateCanvasSize);
     };
   }, []);
 
@@ -92,29 +89,29 @@ const VisualizationComponent = observer(({ withoutUrlPreviewPanel, withoutLinks,
       ref={visEl}
     >
       <InteractionCanvas
-        canvasWidth={canvasWidth}
-        canvasHeight={canvasHeight}
+        canvasWidth={canvasSize[0]}
+        canvasHeight={canvasSize[1]}
         withoutLinks={withoutLinks}
       />
       {!withoutLinks ? (
         <DefaultLinkCanvas
-          canvasWidth={canvasWidth}
-          canvasHeight={canvasHeight}
+          canvasWidth={canvasSize[0]}
+          canvasHeight={canvasSize[1]}
         />
       ) : null}
       <DefaultItemCircleCanvas
-        canvasWidth={canvasWidth}
-        canvasHeight={canvasHeight}
+        canvasWidth={canvasSize[0]}
+        canvasHeight={canvasSize[1]}
       />
       <HighlightedItemCircleLinkCanvas
-        canvasWidth={canvasWidth}
-        canvasHeight={canvasHeight}
+        canvasWidth={canvasSize[0]}
+        canvasHeight={canvasSize[1]}
         withoutLinks={withoutLinks}
       />
       {!withoutItemLabels ? (
         <ItemLabelCanvas
-          canvasWidth={canvasWidth}
-          canvasHeight={canvasHeight}
+          canvasWidth={canvasSize[0]}
+          canvasHeight={canvasSize[1]}
           customFont={customFont}
         />
         ) : null}

diff --git a/src/store/visualization/index.js b/src/store/visualization/index.js
@@ -60,13 +60,16 @@ export default class State {
     this.initialZoomLevel = defaultParameterValues[parameterKeys.ZOOM_LEVEL];
     this.canvasMargin = { left: canvasMargin, right: canvasMargin, top: canvasMargin, bottom: canvasMargin };
     this.pixelRatio = window.devicePixelRatio || 1;
+    this.cxScale = undefined;
+    this.cyScale = undefined;
     this.zoomSquare = undefined;
     this.updateZoomLevel = undefined;
     this.resetZoom = undefined;
     this.zoomIn = undefined;
     this.zoomOut = undefined;
     this.zoomFit = undefined;
     this.zoomTo = undefined;
+    this.translateTo = undefined;
     this.visualizationStatus = VisualizationStatus.DEFAULT;
     this.highlightedItems = [];
     this.highlightedLinks = [];
@@ -514,20 +517,31 @@ export default class State {
     const [minY, maxY] = extent(this.items.map(item => +item.y));
 
     const logicalWidth = maxX - minX;
-    const logicalHeigth = maxY - minY;
+    const logicalHeight = maxY - minY;
     const pixelWidth = this.canvasPixelWidth - marginPixelLeft - marginPixelRight;
     const pixelHeight = this.canvasPixelHeight - marginPixelTop - marginPixelBottom;
-    const minScalingFactor = Math.min(pixelWidth / logicalWidth, pixelHeight / logicalHeigth);
+    const minScalingFactor = Math.min(pixelWidth / logicalWidth, pixelHeight / logicalHeight);
     const deltaPixelX = (pixelWidth - minScalingFactor * logicalWidth) / 2;
-    const deltaPixelY = (pixelHeight - minScalingFactor * logicalHeigth) / 2;
+    const deltaPixelY = (pixelHeight - minScalingFactor * logicalHeight) / 2;
 
     const cxScale = scaleLinear().domain([minX, maxX]).range([deltaPixelX + marginPixelLeft, minScalingFactor * logicalWidth + deltaPixelX + marginPixelLeft]);
-    const cyScale = scaleLinear().domain([minY, maxY]).range([minScalingFactor * logicalHeigth + deltaPixelY + marginPixelTop, deltaPixelY + marginPixelTop]);
+    const cyScale = scaleLinear().domain([minY, maxY]).range([minScalingFactor * logicalHeight + deltaPixelY + marginPixelTop, deltaPixelY + marginPixelTop]);
     [this.clickedItem, ...this.items].forEach(item => {
       if (!item) return;
       item._cx = cxScale(+item.x);
       item._cy = cyScale(+item.y);
     });
+    if (this.cxScale && this.cyScale && this.zTransform.invert && this.translateTo) {
+      const oldPixelXRange = this.cxScale.range();
+      const oldPixelYRange = this.cyScale.range();
+      const centerPixelX = ((oldPixelXRange[0] + (oldPixelXRange[1] - oldPixelXRange[0]) / 2) - this.zTransform.x * this.pixelRatio) / this.zTransform.k;
+      const centerPixelY = ((oldPixelYRange[0] + (oldPixelYRange[1] - oldPixelYRange[0]) / 2) - this.zTransform.y * this.pixelRatio) / this.zTransform.k;
+      const centerX = this.cxScale.invert(centerPixelX);
+      const centerY = this.cyScale.invert(centerPixelY);
+      this.translateTo(cxScale(centerX), cyScale(centerY));
+    }
+    this.cxScale = cxScale;
+    this.cyScale = cyScale;
 
     this.zoomSquare = [[0, 0], [this.canvasPixelWidth, this.canvasPixelHeight]];
   }
@@ -864,6 +878,10 @@ export default class State {
     this.zoomTo = f;
   }
 
+  setTranslateTo(f) {
+    this.translateTo = f;
+  }
+
   setGetScreenshotImage(f) {
     this.getScreenshotImage = f;
   }