Feat: increased mobile responsiveness

Author: Akalanka47000

src/hooks/events/workspace-load.ts

@@ -34,7 +34,15 @@ const useWorkspaceLoad = (props: ISTKProps) => {
         height: workspaceGroupHeight,
         width: workspaceGroupWidth
       } = d3Extended.selectionBounds(workspaceGroup);
-      let scaleFactor = props.data?.workspace?.initialViewBoxScale ?? 1;
+      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;
+        }
+      }
       if (props.data?.workspace?.visibilityOffset) {
         workspaceGroup.attr(dataAttributes.visibilityOffset, props.data?.workspace.visibilityOffset);
       }

src/store/reducers/editor/index.ts

@@ -76,6 +76,7 @@ const initialState = {
   polylines: [],
   images: [],
   initialViewBoxScale: null,
+  initialViewBoxScaleForWidth: document.documentElement.clientWidth,
   visibilityOffset: 0
 };
 
@@ -247,6 +248,7 @@ export const slice = createSlice({
     },
     setInitialViewBoxScale: (state, action) => {
       state.initialViewBoxScale = action.payload;
+      state.initialViewBoxScaleForWidth = document.documentElement.clientWidth;
     },
     setVisibilityOffset: (state, action) => {
       state.visibilityOffset = action.payload;

src/types/index.ts

@@ -55,6 +55,7 @@ export interface ISTKData {
   images?: IImage[];
   workspace?: {
     initialViewBoxScale?: number;
+    initialViewBoxScaleForWidth?: number;
     visibilityOffset?: number;
   };
 }

src/utils/transformer.ts

@@ -106,6 +106,7 @@ export const stateToJSON = () => {
     images: domImagesToJSON(),
     workspace: {
       initialViewBoxScale: state.initialViewBoxScale,
+      initialViewBoxScaleForWidth: state.initialViewBoxScaleForWidth,
       visibilityOffset: state.visibilityOffset
     }
   };