Fix: zoom and pan control responsiveness

Author: Akalanka47000

src/components/workspace/index.tsx

@@ -43,6 +43,8 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
     [selectedElementIds]
   );
 
+  const showZoomControls = props.options?.showZoomControls ?? true;
+
   return (
     <div
       id={ids.workspaceContainer}
@@ -119,7 +121,7 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
           <Grid />
         </>
       )}
-      <Zoom {...props} />
+      {showZoomControls && <Zoom {...props} />}
     </div>
   );
 };

src/components/workspace/zoom.tsx

@@ -101,7 +101,11 @@ const Zoom = (props: ISTKProps) => {
   return (
     <div
       id={ids.zoomControls}
-      className={twMerge("fixed bottom-14 left-20 flex flex-col items-center gap-4", zoomStyles?.root?.className)}
+      className={twMerge(
+        "fixed bottom-14 left-20 flex flex-col items-center gap-4",
+        props.mode === "user" && "bottom-5 left-6  sm:bottom-6 sm:left-8 md:bottom-8 md:left-10",
+        zoomStyles?.root?.className
+      )}
       style={zoomStyles?.root?.properties}
     >
       <div

src/hooks/events/workspace-load.ts

@@ -23,7 +23,7 @@ const useWorkspaceLoad = (props: ISTKProps) => {
         const scaleFactor = 1.05;
         panAndZoom({
           k: scaleFactor,
-          y: (workspaceheight - (wgOffsetTop * scaleFactor * 2 + workspaceGroupHeight * scaleFactor)) / 2 - 5,
+          y: (workspaceheight - (wgOffsetTop * scaleFactor * 2 + workspaceGroupHeight * scaleFactor)) / 2 - 7,
           x: (workspaceWidth - (wgOffsetLeft * scaleFactor * 2 + workspaceGroupWidth * scaleFactor)) / 2
         });
       }, 0);

src/types/index.ts

@@ -43,6 +43,7 @@ export interface ISTKProps {
     showGridSwitch?: boolean;
     showSeatLabels?: boolean;
     showFooter?: boolean;
+    showZoomControls?: boolean;
     exportButtonText?: string;
     operationTriggerIcon?: React.FC;
   };