Fix: section zoom accuracy

Author: Akalanka47000

src/components/workspace/elements/polyline.tsx

@@ -2,7 +2,7 @@ import { forwardRef, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 import { dataAttributes, selectors } from "@/constants";
 import { IPolyline, ISTKProps, ISeatCategory, ISection } from "@/types";
-import { d3Extended, getRelativeWorkspaceClickCoords } from "@/utils";
+import { d3Extended, getRelativeWorkspaceClickCoords, getScaleFactorAccountingForViewBoxWidth } from "@/utils";
 import { panAndZoomToArea } from "../zoom";
 
 export interface IPolylineProps extends IPolyline {
@@ -57,7 +57,11 @@ const Polyline: React.FC<IPolylineProps> = forwardRef(
           if (visibilityOffset > 0) {
             const coords = getRelativeWorkspaceClickCoords(e);
             panAndZoomToArea({
-              k: visibilityOffset,
+              k:
+                getScaleFactorAccountingForViewBoxWidth(
+                  visibilityOffset,
+                  consumer.data?.workspace?.initialViewBoxScaleForWidth
+                ) * 1.1,
               x: coords.x,
               y: coords.y
             });

src/components/workspace/zoom.tsx

@@ -6,13 +6,14 @@ import { twMerge } from "tailwind-merge";
 import { dataAttributes, ids, selectors } from "@/constants";
 import { useSkipFirstRender } from "@/hooks";
 import type { ISTKProps } from "@/types";
-import { d3Extended } from "@/utils";
+import { d3Extended, getScaleFactorAccountingForViewBoxWidth } from "@/utils";
 import { Tool } from "../toolbar/data";
 import { showPostOffsetElements, showPreOffsetElements } from "./elements";
 
 const handleElementVisibility = debounce((workspace, k) => {
   const visibilityOffset = +workspace.attr(dataAttributes.visibilityOffset) || 0;
-  if (k * 1.1 < visibilityOffset) {
+  const initialViewBoxScaleForWidth = +workspace.attr(dataAttributes.initialViewBoxScaleForWidth) || 1;
+  if (k * 1.1 < getScaleFactorAccountingForViewBoxWidth(visibilityOffset, initialViewBoxScaleForWidth)) {
     showPreOffsetElements();
   } else {
     showPostOffsetElements();
@@ -64,17 +65,7 @@ export const panAndZoom = ({ k, x, y }) => {
 };
 
 export const panAndZoomToArea = ({ k, x, y }) => {
-  const transform = d3Extended.zoomTransform(document.querySelector(selectors.workspaceGroup));
-  const { height: workspaceheight, width: workspaceWidth } = d3Extended.selectionBounds(
-    d3Extended.selectById(ids.workspace)
-  );
-  const newX = x * (x > workspaceWidth / 2 ? -1 : 1) * transform.k * 0.75;
-  const newY = (workspaceheight - y) * (y > workspaceheight / 2 ? -1 : 1);
-  d3Extended
-    .selectById(ids.workspace)
-    .transition()
-    .duration(1000)
-    .call(zoom.transform, d3Extended.zoomIdentity.translate(newX, newY).scale(k));
+  d3Extended.selectById(ids.workspace).transition().duration(1000).call(zoom.scaleTo, k, [x, y]);
 };
 
 const panHandleClasses =

src/constants/index.ts

@@ -31,6 +31,7 @@ export const dataAttributes = {
   section: "data-section",
   sectionFreeSeating: "data-section-free-seating",
   visibilityOffset: "data-seat-visibility-offset",
+  initialViewBoxScaleForWidth: "data-initial-view-box-scale-for-width",
   embraceOffset: "data-embrace-offset"
 };
 

src/hooks/events/workspace-load.ts

@@ -5,7 +5,7 @@ import { dataAttributes, ids, selectors } from "@/constants";
 import { store } from "@/store";
 import { initializeElements, initializeWorkspace, resetWorkspace, sync } from "@/store/reducers/editor";
 import { ISTKProps } from "@/types";
-import { d3Extended } from "@/utils";
+import { d3Extended, getScaleFactorAccountingForViewBoxWidth } from "@/utils";
 
 const useWorkspaceLoad = (props: ISTKProps) => {
   const dataSynced = useSelector((state: any) => state.editor.dataSynced);
@@ -36,12 +36,14 @@ const useWorkspaceLoad = (props: ISTKProps) => {
       } = d3Extended.selectionBounds(workspaceGroup);
       let scaleFactor = 1;
       if (props.data?.workspace?.initialViewBoxScale) {
-        scaleFactor = props.data?.workspace?.initialViewBoxScale;
-        if (props.data?.workspace?.initialViewBoxScaleForWidth) {
-          const currentWidth = document.documentElement.clientWidth;
-          const ratio = currentWidth / props.data?.workspace?.initialViewBoxScaleForWidth;
-          scaleFactor *= ratio >= 1 ? ratio : ratio * 1.25;
-        }
+        workspaceGroup.attr(
+          dataAttributes.initialViewBoxScaleForWidth,
+          props.data?.workspace.initialViewBoxScaleForWidth
+        );
+        scaleFactor = getScaleFactorAccountingForViewBoxWidth(
+          props.data?.workspace?.initialViewBoxScale,
+          props.data?.workspace?.initialViewBoxScaleForWidth
+        );
       }
       if (props.data?.workspace?.visibilityOffset) {
         workspaceGroup.attr(dataAttributes.visibilityOffset, props.data?.workspace.visibilityOffset);

src/utils/workspace.ts

@@ -21,3 +21,12 @@ export const getWorkspaceCenterY = () => {
   if (typeof window === "undefined") return 0;
   return window.innerHeight / 2 - (workspaceContainer?.offsetTop ?? 0);
 };
+
+export const getScaleFactorAccountingForViewBoxWidth = (scaleFactor: number, initialViewBoxScaleForWidth?: number) => {
+  if (initialViewBoxScaleForWidth) {
+    const currentWidth = document.documentElement.clientWidth;
+    const ratio = currentWidth / initialViewBoxScaleForWidth;
+    scaleFactor *= ratio >= 1 ? ratio : ratio * 1.25;
+  }
+  return scaleFactor;
+};