perspective cell highlight

packages/web/src/modals/DropDownMenu.svelte

@@ -59,6 +59,19 @@
   let submenuOffset;
 
   const dispatch = createEventDispatcher();
+  let closeHandlers = [];
+
+  function dispatchClose() {
+    dispatch('close');
+    for (const handler of closeHandlers) {
+      handler();
+    }
+    closeHandlers = [];
+  }
+
+  function registerCloseHandler(handler) {
+    closeHandlers.push(handler);
+  }
 
   function handleClick(e, item) {
     if (item.disabled) return;
@@ -70,7 +83,7 @@
       submenuOffset = hoverOffset;
       return;
     }
-    dispatch('close');
+    dispatchClose();
     if (onCloseParent) onCloseParent();
     if (item.onClick) item.onClick();
   }
@@ -84,13 +97,13 @@
     submenuOffset = hoverOffset;
   }, 500);
 
-  $: preparedItems = prepareMenuItems(items, { targetElement }, $commandsCustomized);
+  $: preparedItems = prepareMenuItems(items, { targetElement, registerCloseHandler }, $commandsCustomized);
 
   const handleClickOutside = event => {
     // if (element && !element.contains(event.target) && !event.defaultPrevented) {
     if (event.target.closest('ul.dropDownMenuMarker')) return;
 
-    dispatch('close');
+    dispatchClose();
   };
 
   onMount(() => {
@@ -134,7 +147,7 @@
     {...submenuOffset}
     onCloseParent={() => {
       if (onCloseParent) onCloseParent();
-      dispatch('close');
+      dispatchClose();
     }}
   />
 {/if}

packages/web/src/perspectives/PerspectiveCell.svelte

@@ -25,4 +25,8 @@
     border-bottom: 1px solid var(--theme-border);
     border-right: 1px solid var(--theme-border);
   }
+  td:global(.highlight) {
+    border: 3px solid var(--theme-icon-blue);
+    padding: 0px;
+  }
 </style>

packages/web/src/perspectives/PerspectiveHeaderControl.svelte

@@ -179,4 +179,9 @@
   th.columnHeader {
     position: relative;
   }
+
+  th:global(.highlight) {
+    border: 3px solid var(--theme-icon-blue);
+    padding: 0px;
+  }
 </style>

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -154,7 +154,7 @@
     checkLoadAdditionalData();
   }
 
-  function buildMenu({ targetElement }) {
+  function buildMenu({ targetElement, registerCloseHandler }) {
     const res = [];
     const td = targetElement.closest('td') || targetElement.closest('th');
 
@@ -172,6 +172,10 @@
             setConfig,
           })
         );
+      td.classList.add('highlight');
+      registerCloseHandler(() => {
+        td.classList.remove('highlight');
+      });
     }
 
     res.push([