From 82b63c70edf08c180881b3a7be573c682ac6b91c Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Wed, 7 Apr 2021 17:57:05 +0200
Subject: [PATCH] context menu refactor

---
 .../web/src/elements/DropDownButton.svelte    |  2 +-
 .../web/src/modals/CurrentDropDownMenu.svelte |  2 +-
 packages/web/src/modals/DropDownMenu.svelte   |  5 +++-
 packages/web/src/utility/contextMenu.ts       | 26 ++++++++++++++++++-
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/elements/DropDownButton.svelte b/packages/web/src/elements/DropDownButton.svelte
index e60c92f69..ab35a63ae 100644
--- a/packages/web/src/elements/DropDownButton.svelte
+++ b/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>
 
diff --git a/packages/web/src/modals/CurrentDropDownMenu.svelte b/packages/web/src/modals/CurrentDropDownMenu.svelte
index f8411a805..8a81a4bc4 100644
--- a/packages/web/src/modals/CurrentDropDownMenu.svelte
+++ b/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}
diff --git a/packages/web/src/modals/DropDownMenu.svelte b/packages/web/src/modals/DropDownMenu.svelte
index 84729542b..fb3165a52 100644
--- a/packages/web/src/modals/DropDownMenu.svelte
+++ b/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}
diff --git a/packages/web/src/utility/contextMenu.ts b/packages/web/src/utility/contextMenu.ts
index 072698258..ffbb986fa 100644
--- a/packages/web/src/utility/contextMenu.ts
+++ b/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;
+}