Refactor: workspace load

Author: Akalanka47000

src/components/index.tsx

@@ -1,5 +1,5 @@
 import { twMerge } from "tailwind-merge";
-import { useEvents, useInteractions } from "@/hooks";
+import { useDesignerEvents, useInteractions, useUserEvents } from "@/hooks";
 import { type ISTKProps } from "@/types";
 import { default as Controls } from "./controls";
 import { default as Footer } from "./footer";
@@ -10,7 +10,7 @@ import { Cursor, default as Workspace } from "./workspace";
 export * from "./core";
 
 const Designer: React.FC<ISTKProps> = (props) => {
-  useEvents();
+  useDesignerEvents(props);
   useInteractions();
   return (
     <>
@@ -35,6 +35,7 @@ const Designer: React.FC<ISTKProps> = (props) => {
 };
 
 const User: React.FC<ISTKProps> = (props) => {
+  useUserEvents(props);
   return (
     <div
       className={twMerge("h-full min-h-[85vh] flex flex-col relative", props.styles?.root?.className)}

src/components/workspace/index.tsx

@@ -1,16 +1,13 @@
-import { useCallback, useLayoutEffect } from "react";
+import { useCallback } from "react";
 import { useSelector } from "react-redux";
 import { twMerge } from "tailwind-merge";
-import { ids, selectors } from "@/constants";
-import { store } from "@/store";
-import { initializeElements, sync } from "@/store/reducers/editor";
+import { ids } from "@/constants";
 import { type ISTKProps } from "@/types";
-import { d3Extended } from "@/utils";
 import { Tool, tools } from "../toolbar/data";
 import { default as Crosshairs } from "./crosshairs";
 import { default as Element, ElementType } from "./elements";
 import { default as Grid } from "./grid";
-import { default as Zoom, zoomAndPan } from "./zoom";
+import { default as Zoom } from "./zoom";
 
 export { default as Cursor } from "./cursor";
 
@@ -27,31 +24,6 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
   const selectedPolylineId = useSelector((state: any) => state.editor.selectedPolylineId);
   const selectedTool = useSelector((state: any) => state.toolbar.selectedTool);
 
-  useLayoutEffect(() => {
-    if (props.data) {
-      store.dispatch(sync(props.data));
-      setTimeout(() => {
-        const { height: workspaceheight, width: workspaceWidth } = d3Extended.selectionBounds(
-          d3Extended.selectById(ids.workspace)
-        );
-        const {
-          left: wgOffsetLeft,
-          top: wgOffsetTop,
-          height: workspaceGroupHeight,
-          width: workspaceGroupWidth
-        } = d3Extended.selectionBounds(d3Extended.select(selectors.workspaceGroup));
-        const scaleFactor = 1.05;
-        zoomAndPan({
-          k: scaleFactor,
-          y: (workspaceheight - (wgOffsetTop * scaleFactor * 2 + workspaceGroupHeight * scaleFactor)) / 2 - 5,
-          x: (workspaceWidth - (wgOffsetLeft * scaleFactor * 2 + workspaceGroupWidth * scaleFactor)) / 2
-        });
-      }, 0);
-    } else {
-      store.dispatch(initializeElements());
-    }
-  }, [props.data]);
-
   const elementProps = useCallback(
     (elem) => ({
       id: elem.id,

src/hooks/events/index.ts

@@ -1,13 +1,18 @@
-import useDeselection from "./deselection";
-import useDuplicate from "./duplication";
-import usePolyline from "./polyline";
-import useWorkspaceClick from "./workspace-click";
+import { ISTKProps } from "@/types";
+import { default as useDeselection } from "./deselection";
+import { default as useDuplicate } from "./duplication";
+import { default as usePolyline } from "./polyline";
+import { default as useWorkspaceClick } from "./workspace-click";
+import { default as useWorkspaceLoad } from "./workspace-load";
 
-const useEvents = () => {
+export const useDesignerEvents = (props: ISTKProps) => {
   useDeselection();
+  useDuplicate();
   usePolyline();
   useWorkspaceClick();
-  useDuplicate();
+  useWorkspaceLoad(props);
 };
 
-export default useEvents;
+export const useUserEvents = (props: ISTKProps) => {
+  useWorkspaceLoad(props);
+};

src/hooks/events/workspace-load.ts

@@ -0,0 +1,37 @@
+import { useLayoutEffect } from "react";
+import { zoomAndPan } from "@/components/workspace/zoom";
+import { ids, selectors } from "@/constants";
+import { store } from "@/store";
+import { initializeElements, sync } from "@/store/reducers/editor";
+import { ISTKProps } from "@/types";
+import { d3Extended } from "@/utils";
+
+const useWorkspaceLoad = (props: ISTKProps) => {
+  useLayoutEffect(() => {
+    if (props.data) {
+      store.dispatch(sync(props.data));
+      setTimeout(() => {
+        const { height: workspaceheight, width: workspaceWidth } = d3Extended.selectionBounds(
+          d3Extended.selectById(ids.workspace)
+        );
+        const {
+          left: wgOffsetLeft,
+          top: wgOffsetTop,
+          height: workspaceGroupHeight,
+          width: workspaceGroupWidth
+        } = d3Extended.selectionBounds(d3Extended.select(selectors.workspaceGroup));
+        const scaleFactor = 1.05;
+        zoomAndPan({
+          k: scaleFactor,
+          y: (workspaceheight - (wgOffsetTop * scaleFactor * 2 + workspaceGroupHeight * scaleFactor)) / 2 - 5,
+          x: (workspaceWidth - (wgOffsetLeft * scaleFactor * 2 + workspaceGroupWidth * scaleFactor)) / 2
+        });
+      }, 0);
+    } else {
+      store.dispatch(initializeElements());
+    }
+    props.events?.onWorkspaceLoad?.();
+  }, [props.data]);
+};
+
+export default useWorkspaceLoad;

src/hooks/index.ts

@@ -1,5 +1,6 @@
 export { default as useBreakpoint } from "./breakpoint";
-export { default as useEvents } from "./events";
 export { default as useInteractions } from "./interactions";
 export { default as useResize } from "./resize";
 export { default as useSkipFirstRender } from "./skip-first-render";
+
+export * from "./events";

src/types/index.ts

@@ -19,6 +19,7 @@ export interface IEvents {
   onSeatClick?: (seat: IPopulatedSeat) => void;
   onSectionClick?: (section: ISection) => void;
   onExport?: (data: ISTKData) => void;
+  onWorkspaceLoad?: () => void;
 }
 
 export interface ISTKData {