feat: add context menu item, clear selection

hpcreery · Aug 20, 2024 · 43b2835 · 43b2835
1 parent 9250fc5
commit 43b2835
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/src/renderer/src/components/feature-sidebar/FeatureSidebar.tsx b/src/renderer/src/components/feature-sidebar/FeatureSidebar.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Affix, Badge, Code, Divider, ScrollArea, ThemeIcon, Transition } from "@mantine/core"
+import { ActionIcon, Affix, Badge, Code, Divider, ScrollArea, ThemeIcon, Transition, useMantineTheme } from "@mantine/core"
 import { Card, Text } from "@mantine/core"
 import { RenderEngine } from "@src/renderer"
 import { useEffect, useState, useContext } from "react"
@@ -23,6 +23,7 @@ import { getUnitsConversion } from "@src/renderer/utils"
 import chroma from "chroma-js"
 import { STANDARD_SYMBOLS, StandardSymbol } from "@src/renderer/symbols"
 import { AttributeCollection, FeatureTypeIdentifier, Units } from "@src/renderer/types"
+import { menuItems } from "@src/contexts/EngineContext"
 
 interface ToolbarProps {
   renderEngine: RenderEngine
@@ -49,6 +50,7 @@ export function FeatureSidebar({ renderEngine }: ToolbarProps): JSX.Element {
   const [mounted, setMounted] = useState<boolean>(false)
   const { units } = useContext(ConfigEditorProvider)
   const [layers, setLayers] = useState<LayerInfo[]>([])
+  const theme = useMantineTheme()
 
   function getSymbolInfo(symbol: StandardSymbol, shapeUnits: Units): (JSX.Element | null)[] {
     return Object.entries(symbol).map(([key, value], index) => {
@@ -97,6 +99,21 @@ export function FeatureSidebar({ renderEngine }: ToolbarProps): JSX.Element {
     })
   }
 
+  menuItems.push({
+    key: "clear selection",
+    icon: <IconX stroke={1.5} size={18} color={theme.colors.red[7]} />,
+    title: "Clear Selection",
+    onClick: clearSelection,
+  })
+
+  function clearSelection(): void {
+    setMounted(false)
+    renderEngine.backend.then(async (engine) => {
+      await engine.clearSelection()
+      await engine.render({ force: true })
+    })
+  }
+
   useEffect(() => {
     const handler = (e): void => {
       console.log("feature clicked", (e as CustomEvent<QueryFeature[]>).detail)
@@ -481,17 +498,7 @@ export function FeatureSidebar({ renderEngine }: ToolbarProps): JSX.Element {
             ))}
           </ScrollArea>
           <Affix withinPortal={false} position={{ bottom: 5, right: 10 }}>
-            <ActionIcon
-              radius="sm"
-              variant="subtle"
-              onClick={() => {
-                setMounted(false)
-                renderEngine.backend.then(async (engine) => {
-                  await engine.clearSelection()
-                  await engine.render({ force: true })
-                })
-              }}
-            >
+            <ActionIcon radius="sm" variant="subtle" onClick={() => {}}>
               <IconX />
             </ActionIcon>
           </Affix>

diff --git a/src/renderer/src/components/layer-sidebar/LayersSidebar.tsx b/src/renderer/src/components/layer-sidebar/LayersSidebar.tsx
@@ -138,7 +138,7 @@ export default function LayerSidebar({ renderEngine }: SidebarProps): JSX.Elemen
     {
       title: "Delete All Layers",
       key: "3",
-      icon: <IconClearAll stroke={1.5} size={18} style={{ color: theme.colors.red[7] }} />,
+      icon: <IconClearAll stroke={1.5} size={18} color={theme.colors.red[7]} />,
       onClick: actions.deleteAll,
     },
   ]

diff --git a/src/renderer/src/components/toolbar/Toolbar.tsx b/src/renderer/src/components/toolbar/Toolbar.tsx
@@ -48,6 +48,7 @@ export default function Toolbar({ renderEngine }: ToolbarProps): JSX.Element | n
     menuItems.push({
       key: "clear measurements",
       title: "Clear Measurements",
+      icon: <IconTrashX  stroke={1.5} size={18} color={theme.colors.red[7]}/>,
       onClick: async (): Promise<void> => {
         const backend = await renderEngine.backend
         backend.clearMeasurements()