Merge pull request #20 from mezh-hq/feature/airplane-mode

Feat: added airplane mode to boost performance

Author: Akalanka47000

src/components/workspace/dock/airplane-mode.tsx

@@ -0,0 +1,38 @@
+import { Plane } from "lucide-react";
+import { useSelector } from "react-redux";
+import { twMerge } from "tailwind-merge";
+import { store } from "@/store";
+import { toggleAirplaneMode } from "@/store/reducers/editor";
+import type { ISTKProps } from "@/types";
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "../../core";
+
+const toggleAirPlaneMode = () => store.dispatch(toggleAirplaneMode());
+
+export const AirplaneMode = (props: Pick<ISTKProps, "styles" | "options">) => {
+  const airplaneMode = useSelector((state: any) => state.editor.airplaneMode);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        className={props.styles?.core?.tooltip?.trigger?.className}
+        style={props.styles?.core?.tooltip?.trigger?.properties}
+      >
+        <Button
+          variant={airplaneMode ? "primary" : "secondary"}
+          className={twMerge("w-8 h-8 p-2", props.styles?.airplaneControl?.button?.className)}
+          onClick={toggleAirPlaneMode}
+          style={props.styles?.airplaneControl?.button?.properties}
+        >
+          <Plane size={16} />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent
+        sideOffset={15}
+        className={props.styles?.core?.tooltip?.content?.className}
+        style={props.styles?.core?.tooltip?.content?.properties}
+      >
+        {airplaneMode ? "Disable" : "Enable"} Airplane Mode
+      </TooltipContent>
+    </Tooltip>
+  );
+};

src/components/workspace/dock/index.tsx

@@ -10,6 +10,7 @@ import { Button } from "../../core";
 import { Tool } from "../../toolbar/data";
 import { showPostOffsetElements, showPreOffsetElements } from "../elements";
 import { default as Reload } from "../reload";
+import { AirplaneMode } from "./airplane-mode";
 import { default as DockHandler } from "./handler";
 import { VisibilityFreezeScale, VisibilityOffset } from "./visibility";
 
@@ -104,6 +105,7 @@ const Dock = (props: Pick<ISTKProps, "mode" | "styles" | "options" | "events">)
   const isDesigner = props.mode === "designer";
   const showZoomControls = props.options?.showZoomControls ?? true;
   const showVisibilityControls = isDesigner && (props.options?.showVisibilityControls ?? true);
+  const showAirplaneControl = isDesigner && props.options?.showAirplaneControl;
   const showReloadButton = props.options?.showReloadButton ?? false;
   const isUser = props.mode === "user";
 
@@ -187,6 +189,7 @@ const Dock = (props: Pick<ISTKProps, "mode" | "styles" | "options" | "events">)
               </>
             )}
             {showVisibilityControls && <VisibilityOffset {...props} />}
+            {showAirplaneControl && <AirplaneMode />}
           </div>
         </div>
       )}

src/components/workspace/dock/visibility.tsx

@@ -29,8 +29,6 @@ const unsetVisibility = () => {
 export const VisibilityFreezeScale = (props: Pick<ISTKProps, "mode" | "styles" | "options">) => {
   const initialViewBoxScale = useSelector((state: any) => state.editor.initialViewBoxScale);
 
-  const styles = props.styles?.visibilityControls;
-
   return (
     <Tooltip>
       <TooltipTrigger
@@ -39,9 +37,9 @@ export const VisibilityFreezeScale = (props: Pick<ISTKProps, "mode" | "styles" |
       >
         <Button
           variant={initialViewBoxScale ? "primary" : "secondary"}
-          className={twMerge("w-8 h-8 p-2", styles?.buttons?.className)}
+          className={twMerge("w-8 h-8 p-2", props.styles?.visibilityControls?.buttons?.className)}
           onClick={initialViewBoxScale ? unfreeze : freeze}
-          style={styles?.buttons?.properties}
+          style={props.styles?.visibilityControls?.buttons?.properties}
         >
           {initialViewBoxScale ? <Lock size={16} /> : <Unlock size={16} />}
         </Button>
@@ -60,8 +58,6 @@ export const VisibilityFreezeScale = (props: Pick<ISTKProps, "mode" | "styles" |
 export const VisibilityOffset = (props: Pick<ISTKProps, "mode" | "styles" | "options">) => {
   const visibilityOffset = useSelector((state: any) => state.editor.visibilityOffset);
 
-  const styles = props.styles?.visibilityControls;
-
   return (
     <Tooltip>
       <TooltipTrigger
@@ -70,9 +66,9 @@ export const VisibilityOffset = (props: Pick<ISTKProps, "mode" | "styles" | "opt
       >
         <Button
           variant={visibilityOffset === 0 ? "secondary" : "primary"}
-          className={twMerge("w-8 h-8 p-2", styles?.buttons?.className)}
+          className={twMerge("w-8 h-8 p-2", props.styles?.visibilityControls?.buttons?.className)}
           onClick={visibilityOffset === 0 ? setVisibility : unsetVisibility}
-          style={styles?.buttons?.properties}
+          style={props.styles?.visibilityControls?.buttons?.properties}
         >
           {visibilityOffset === 0 ? <Scan size={16} /> : <Focus size={16} />}
         </Button>

src/components/workspace/elements/seat.tsx

@@ -26,6 +26,7 @@ export interface ISeatProps extends ISeat {
   sections: ISection[];
   onClick: (e: any) => void;
   isSelected?: boolean;
+  airplaneMode?: boolean;
 }
 
 const Seat: React.FC<ISeatProps> = forwardRef(
@@ -44,6 +45,7 @@ const Seat: React.FC<ISeatProps> = forwardRef(
       rotation,
       element,
       isSelected,
+      airplaneMode,
       ...props
     },
     ref: any
@@ -54,7 +56,7 @@ const Seat: React.FC<ISeatProps> = forwardRef(
       [sections, categoryObject]
     );
 
-    const showLabel = consumer.options?.showSeatLabels ?? true;
+    const showLabel = !airplaneMode && (consumer.options?.showSeatLabels ?? true);
 
     const consumerSeatStatusColors = consumer.styles?.elements?.seat?.statusColors;
 

src/components/workspace/index.tsx

@@ -23,21 +23,23 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
   const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
   const selectedPolylineId = useSelector((state: any) => state.editor.selectedPolylineId);
   const selectedTool = useSelector((state: any) => state.toolbar.selectedTool);
+  const airplaneMode = useSelector((state: any) => state.editor.airplaneMode);
 
   const elementProps = useCallback(
     (elem) => ({
       id: elem.id,
       x: elem.x,
       y: elem.y,
       isSelected: selectedElementIds.includes(elem.id),
+      airplaneMode,
       label: elem.label,
       color: elem.color,
       stroke: elem.stroke,
       rotation: elem.rotation,
       consumer: props,
       element: elem
     }),
-    [selectedElementIds]
+    [selectedElementIds, airplaneMode]
   );
 
   const onWorkspaceHover = useCallback(

src/store/reducers/editor/index.ts

@@ -84,7 +84,8 @@ const initialState = {
   images: [],
   initialViewBoxScale: null,
   initialViewBoxScaleForWidth: null,
-  visibilityOffset: 0
+  visibilityOffset: 0,
+  airplaneMode: false
 };
 
 export const slice = createSlice({
@@ -252,6 +253,7 @@ export const slice = createSlice({
       state.initialViewBoxScale = data.workspace?.initialViewBoxScale;
       state.initialViewBoxScaleForWidth = data.workspace?.initialViewBoxScaleForWidth;
       state.visibilityOffset = data.workspace?.visibilityOffset ?? state.visibilityOffset;
+      state.airplaneMode = data.workspace?.airplaneMode ?? state.airplaneMode;
       Object.keys(data).forEach((key) => {
         state[key] = data[key] ?? state[key];
       });
@@ -274,6 +276,9 @@ export const slice = createSlice({
       state.selectedElementIds = state.selectedElementIds.filter((id) => !ids.includes(id));
       state.selectedPolylineId =
         state.selectedPolylineId && !ids.includes(state.selectedPolylineId) ? null : state.selectedPolylineId;
+    },
+    toggleAirplaneMode: (state) => {
+      state.airplaneMode = !state.airplaneMode;
     }
   }
 });
@@ -320,7 +325,8 @@ export const {
   sync,
   setInitialViewBoxScale,
   setVisibilityOffset,
-  deleteElements
+  deleteElements,
+  toggleAirplaneMode
 } = slice.actions;
 
 export const selectPolylineById = (id: string) =>

src/stories/designer/categorized.stories.tsx

@@ -12,6 +12,9 @@ export const Story = {
   render: (props) => (
     <SeatToolkit
       mode={STKMode.DESIGNER}
+      options={{
+        showAirplaneControl: true
+      }}
       data={{
         name: "Categorized Example",
         categories: [

src/stories/designer/persisted.stories.tsx

@@ -19,7 +19,8 @@ export const Story = {
         mode={STKMode.DESIGNER}
         data={data}
         options={{
-          exportButtonText: "Save to Session Storage"
+          exportButtonText: "Save to Session Storage",
+          showAirplaneControl: true
         }}
         events={{
           onExport: (data) => {

src/types/index.ts

@@ -59,6 +59,7 @@ export interface ISTKData {
     initialViewBoxScale?: number;
     initialViewBoxScaleForWidth?: number;
     visibilityOffset?: number;
+    airplaneMode?: boolean;
   };
 }
 
@@ -74,6 +75,7 @@ export interface ISTKProps {
     showSeatLabels?: boolean;
     showZoomControls?: boolean;
     showVisibilityControls?: boolean;
+    showAirplaneControl?: boolean;
     showReloadButton?: boolean;
     exportButtonText?: string;
     operationTriggerIcon?: React.FC;

src/types/styles.ts

@@ -38,6 +38,9 @@ export interface IStyles {
   visibilityControls?: {
     buttons?: IStyle;
   };
+  airplaneControl?: {
+    button?: IStyle;
+  };
   reloadButton?: IStyle;
   elements?: {
     seat?: {

src/utils/transformer.ts

@@ -110,7 +110,8 @@ export const stateToJSON = (): ISTKData => {
     workspace: {
       initialViewBoxScale: state.initialViewBoxScale,
       initialViewBoxScaleForWidth: state.initialViewBoxScaleForWidth,
-      visibilityOffset: state.visibilityOffset
+      visibilityOffset: state.visibilityOffset,
+      airplaneMode: state.airplaneMode
     }
   };
 };