FIX: Hide rectangle, circle and freehand modes in mobile devices

rajtoshranjan · Jun 17, 2024 · 9352e2d · 9352e2d
1 parent 0cf025b
commit 9352e2d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/layer-panel/draw/constants.ts b/src/layer-panel/draw/constants.ts
@@ -1,8 +1,9 @@
 import { IconIdentifier } from '../../components';
 import { Styles } from '../../core/maplibre';
-import { ModeInfo, Modes } from './types';
+import { ModeInfo, OptionalModes, RequiredModes } from './types';
 
-export const MODES: Record<Modes, ModeInfo> = {
+export const MODES: Record<RequiredModes, ModeInfo> &
+  Partial<Record<OptionalModes, ModeInfo>> = {
   select: {
     iconIdentifier: IconIdentifier.Select,
   },
@@ -15,16 +16,20 @@ export const MODES: Record<Modes, ModeInfo> = {
   polygon: {
     iconIdentifier: IconIdentifier.Polygon,
   },
-  rectangle: {
+};
+
+// Enable rest of the modes in desktop view.
+if (window.innerWidth > 768) {
+  MODES.rectangle = {
     iconIdentifier: IconIdentifier.Rectangle,
-  },
-  circle: {
+  };
+  MODES.circle = {
     iconIdentifier: IconIdentifier.Circle,
-  },
-  freehand: {
+  };
+  MODES.freehand = {
     iconIdentifier: IconIdentifier.Freehand,
-  },
-};
+  };
+}
 
 export const DEFAULT_STYLES: Styles = {
   pointColor: '#60a5fa',

diff --git a/src/layer-panel/draw/types.ts b/src/layer-panel/draw/types.ts
@@ -9,6 +9,9 @@ export type Modes =
   | 'circle'
   | 'freehand';
 
+export type RequiredModes = Exclude<Modes, 'freehand' | 'circle' | 'rectangle'>;
+export type OptionalModes = Exclude<Modes, RequiredModes>;
+
 export type ModeInfo = {
   iconIdentifier: IconIdentifier;
 };