feat: export feature cutouts

client/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "koji",
-  "version": "1.3.14",
+  "version": "1.4.0",
   "description": "Tool to make RDM routes",
   "main": "server/dist/index.js",
   "author": "TurtIeSocks <58572875+TurtIeSocks@users.noreply.github.com>",

client/src/components/drawer/Drawing.tsx

@@ -17,6 +17,7 @@ export default function DrawingTab() {
       <ListSubheader disableGutters>Drawing</ListSubheader>
       <Toggle field="snappable" />
       <Toggle field="continueDrawing" />
+      <Toggle field="keepCutoutsOnMerge" />
       <UserTextInput field="radius" disabled={calculationMode === 'S2'} />
       <MultiOptionList
         field="setActiveMode"

client/src/hooks/usePersist.ts

@@ -17,6 +17,7 @@ export interface UsePersist {
   snappable: boolean
   continueDrawing: boolean
   setActiveMode: 'hover' | 'click'
+  keepCutoutsOnMerge: boolean
 
   // Client Settings
   darkMode: boolean
@@ -95,6 +96,7 @@ export const usePersist = create(
       darkMode: true,
       tab: 0,
       drawer: false,
+      keepCutoutsOnMerge: false,
       location: [0, 0],
       zoom: 18,
       category: 'pokestop',

client/src/hooks/useShapes.ts

@@ -19,6 +19,7 @@ import type {
   KojiKey,
 } from '@assets/types'
 import { useDbCache } from './useDbCache'
+import { usePersist } from './usePersist'
 
 const { setRecord } = useDbCache.getState()
 
@@ -280,6 +281,8 @@ export const useShapes = create<UseShapes>((set, get) => ({
         MultiPolygon,
         setters: { remove, add },
       } = get()
+      const { keepCutoutsOnMerge } = usePersist.getState()
+
       let newPoly: Feature<Polygon | MultiPolygon> = {
         geometry: { type: 'MultiPolygon', coordinates: [] },
         type: 'Feature',
@@ -329,8 +332,14 @@ export const useShapes = create<UseShapes>((set, get) => ({
           }
         }
       })
-      if (newPoly.geometry.type === 'Polygon') {
-        newPoly.geometry.coordinates = [newPoly.geometry.coordinates[0]]
+      if (!keepCutoutsOnMerge) {
+        if (newPoly.geometry.type === 'Polygon') {
+          newPoly.geometry.coordinates = [newPoly.geometry.coordinates[0]]
+        } else if (newPoly.geometry.type === 'MultiPolygon') {
+          newPoly.geometry.coordinates = newPoly.geometry.coordinates.map(
+            (p) => [p[0]],
+          )
+        }
       }
       Object.entries(
         all

client/src/pages/map/popups/Polygon.tsx

@@ -41,7 +41,11 @@ import {
   splitMultiPolygons,
 } from '@services/utils'
 import { useImportExport } from '@hooks/useImportExport'
-import { filterPoints, filterPolys } from '@services/geoUtils'
+import {
+  filterPoints,
+  filterPolys,
+  getFeatureCutouts,
+} from '@services/geoUtils'
 import { usePersist } from '@hooks/usePersist'
 
 const { add, remove, updateProperty } = useShapes.getState().setters
@@ -312,6 +316,20 @@ export function PolygonPopup({
         >
           Export
         </MenuItem>
+        <MenuItem
+          dense
+          disabled={
+            feature.geometry.type === 'MultiPolygon'
+              ? feature.geometry.coordinates.every((c) => c.length < 2)
+              : feature.geometry.coordinates.length < 2
+          }
+          onClick={() => {
+            add(getFeatureCutouts(feature))
+            handleClose()
+          }}
+        >
+          Create Shape from Cutouts
+        </MenuItem>
         <MenuItem
           dense
           onClick={() => {

client/src/services/geoUtils.ts

@@ -105,3 +105,38 @@ export function filterPolys(
       remove(value.geometry.type, key)
   })
 }
+
+export function getFeatureCutouts(
+  feature: Feature<Polygon | MultiPolygon>,
+): Feature {
+  const polygons: Polygon[] = []
+
+  const push = (positions: Position[], index: number) =>
+    index > 0 &&
+    polygons.push({
+      type: 'Polygon',
+      coordinates: [positions],
+    })
+
+  if (feature.geometry.type === 'Polygon') {
+    feature.geometry.coordinates.forEach(push)
+  } else if (feature.geometry.type === 'MultiPolygon') {
+    feature.geometry.coordinates.forEach((multi) => multi.forEach(push))
+  }
+
+  return {
+    type: 'Feature',
+    id: `${feature.id}-cutouts`,
+    properties: feature.properties,
+    geometry:
+      polygons.length > 1
+        ? {
+            type: 'MultiPolygon',
+            coordinates: polygons.map((p) => p.coordinates),
+          }
+        : polygons[0] || {
+            type: '',
+            coordinates: [],
+          },
+  }
+}