context menu refactor

packages/web/src/elements/DropDownButton.svelte

@@ -13,7 +13,7 @@
     const rect = domButton.getBoundingClientRect();
     const left = rect.left;
     const top = rect.bottom;
-    currentDropDownMenu.set({ left, top, items: _.isFunction(menu) ? menu() : menu });
+    currentDropDownMenu.set({ left, top, items: menu });
   }
 </script>
 

packages/web/src/modals/CurrentDropDownMenu.svelte

@@ -8,7 +8,7 @@
   <DropDownMenu
     left={$currentDropDownMenu.left}
     top={$currentDropDownMenu.top}
-    items={_.compact(_.flatten($currentDropDownMenu.items))}
+    items={$currentDropDownMenu.items}
     on:close={() => ($currentDropDownMenu = null)}
   />
 {/if}

packages/web/src/modals/DropDownMenu.svelte

@@ -48,6 +48,7 @@
   import { createEventDispatcher } from 'svelte';
   import { onMount } from 'svelte';
   import { commands } from '../stores';
+  import { extractMenuItems } from '../utility/contextMenu';
 
   export let items;
   export let top;
@@ -66,6 +67,8 @@
   onMount(() => {
     fixPopupPlacement(element);
   });
+
+  $: extracted = extractMenuItems(items);
 </script>
 
 <ul
@@ -74,7 +77,7 @@
   on:clickOutside={() => dispatch('close')}
   bind:this={element}
 >
-  {#each _.compact(items.map(x => mapItem(x, $commands))) as item}
+  {#each _.compact(extracted.map(x => mapItem(x, $commands))) as item}
     {#if item.divider}
       <li class="divider" />
     {:else}

packages/web/src/utility/contextMenu.ts

@@ -1,6 +1,12 @@
 import _ from 'lodash';
+import { getContext, setContext } from 'svelte';
 import { currentDropDownMenu } from '../stores';
 
+export function registerMenu(items) {
+  const parentMenu = getContext('componentContextMenu');
+  setContext('componentContextMenu', parentMenu ? [parentMenu, items] : items);
+}
+
 export default function contextMenu(node, items) {
   const handleContextMenu = e => {
     e.preventDefault();
@@ -8,7 +14,7 @@ export default function contextMenu(node, items) {
     if (items) {
       const left = e.pageX;
       const top = e.pageY;
-      currentDropDownMenu.set({ left, top, items: _.isFunction(items) ? items() : items });
+      currentDropDownMenu.set({ left, top, items });
     }
   };
 
@@ -23,3 +29,21 @@ export default function contextMenu(node, items) {
     },
   };
 }
+
+function doExtractMenuItems(menu, res) {
+  if (_.isFunction(menu)) {
+    doExtractMenuItems(menu(), res);
+  } else if (_.isArray(menu)) {
+    for (const item of menu) {
+      doExtractMenuItems(item, res);
+    }
+  } else if (_.isPlainObject(menu)) {
+    res.push(menu);
+  }
+}
+
+export function extractMenuItems(menu) {
+  const res = [];
+  doExtractMenuItems(menu, res);
+  return res;
+}