context menu

packages/web/src/commands/invalidateCommands.ts

@@ -30,11 +30,38 @@ export default async function invalidateCommands() {
         if (!command.isGroupCommand) continue;
         const groupSources = values.filter(x => x.group == command.group && !x.isGroupCommand && x.enabled);
         command.enabled = groupSources.length > 0;
-        for(const source of groupSources) {
+        // for (const source of groupSources) {
-          source.keyTextFromGroup = command.keyText;
+        //   source.keyTextFromGroup = command.keyText;
-        }
+        // }
       }
     }
     return res || dct;
   });
 }
+
+let isInvalidatedDefinitions = false;
+
+export async function invalidateCommandDefinitions() {
+  if (isInvalidatedDefinitions) return;
+  isInvalidatedDefinitions = true;
+  await tick();
+
+  isInvalidatedDefinitions = false;
+
+  commands.update(dct => {
+    let res = { ...dct };
+    const values = Object.values(res) as GlobalCommand[];
+    // test enabled for group commands
+    for (const command of values) {
+      if (!command.isGroupCommand) continue;
+      const groupSources = values.filter(x => x.group == command.group && !x.isGroupCommand);
+
+      for (const source of groupSources) {
+        source.keyTextFromGroup = command.keyText;
+      }
+    }
+    return res;
+  });
+
+  invalidateCommands();
+}

packages/web/src/commands/registerCommand.ts

@@ -1,5 +1,5 @@
 import { commands } from '../stores';
-import invalidateCommands from './invalidateCommands';
+import { invalidateCommandDefinitions } from './invalidateCommands';
 
 export interface SubCommand {
   text: string;
@@ -39,16 +39,5 @@ export default function registerCommand(command: GlobalCommand) {
       enabled: !testEnabled,
     },
   }));
-  invalidateCommands();
+  invalidateCommandDefinitions();
-  // if (enabledStore) {
-  //   enabledStore.subscribe(value => {
-  //     commands.update(x => ({
-  //       ...x,
-  //       [command.id]: {
-  //         ...x[command.id],
-  //         enabled: value,
-  //       },
-  //     }));
-  //   });
-  // }
 }

packages/web/src/commands/stdCommands.ts

@@ -142,6 +142,24 @@ registerCommand({
   group: 'saveAs',
 });
 
+registerCommand({
+  id: 'group.undo',
+  category: null,
+  isGroupCommand: true,
+  name: 'Undo',
+  keyText: 'Ctrl+Z',
+  group: 'undo',
+});
+
+registerCommand({
+  id: 'group.redo',
+  category: null,
+  isGroupCommand: true,
+  name: 'Redo',
+  keyText: 'Ctrl+Y',
+  group: 'redo',
+});
+
 if (electron) {
   registerCommand({
     id: 'file.open',
@@ -175,6 +193,7 @@ export function registerFileCommands({
   execute = false,
   toggleComment = false,
   findReplace = false,
+  undoRedo = false,
 }) {
   registerCommand({
     id: idPrefix + '.save',
@@ -248,4 +267,22 @@ export function registerFileCommands({
       onClick: () => getCurrentEditor().replace(),
     });
   }
+  if (undoRedo) {
+    registerCommand({
+      id: idPrefix + '.undo',
+      category,
+      name: 'Undo',
+      group: 'undo',
+      testEnabled: () => getCurrentEditor()?.canUndo(),
+      onClick: () => getCurrentEditor().undo(),
+    });
+    registerCommand({
+      id: idPrefix + '.redo',
+      category,
+      group: 'redo',
+      name: 'Replace',
+      testEnabled: () => getCurrentEditor()?.canRedo(),
+      onClick: () => getCurrentEditor().redo(),
+    });
+  }
 }

packages/web/src/datagrid/DataGridCore.svelte

@@ -74,7 +74,7 @@
     id: 'dataGrid.undo',
     category: 'Data grid',
     name: 'Undo',
-    keyText: 'Ctrl+Z',
+    group: 'undo',
     icon: 'icon undo',
     toolbar: true,
     testEnabled: () => getCurrentDataGrid()?.getGrider()?.canUndo,
@@ -85,7 +85,7 @@
     id: 'dataGrid.redo',
     category: 'Data grid',
     name: 'Redo',
-    keyText: 'Ctrl+Y',
+    group: 'redo',
     icon: 'icon redo',
     toolbar: true,
     testEnabled: () => getCurrentDataGrid()?.getGrider()?.canRedo,

packages/web/src/designer/Designer.svelte

@@ -18,7 +18,7 @@
   export let onChange;
   export let conid;
   export let database;
-  // export let menu;
+   export let menu;
 
   let domCanvas;
 
@@ -286,7 +286,7 @@
   }
 </script>
 
-<div class="wrapper">
+<div class="wrapper" use:contextMenu={menu}>
   {#if !(tables?.length > 0)}
     <div class="empty">Drag &amp; drop tables or views from left panel here</div>
   {/if}

packages/web/src/modals/DropDownMenu.svelte

@@ -58,6 +58,7 @@
   const dispatch = createEventDispatcher();
 
   function handleClick(item) {
+    if (item.disabled) return;
     dispatch('close');
     if (item.onClick) item.onClick();
   }

packages/web/src/tabs/QueryDesignTab.svelte

@@ -12,6 +12,7 @@
     fileExtension: 'qdesign',
 
     execute: true,
+    undoRedo: true,
   });
 </script>
 
@@ -86,6 +87,7 @@
   $: {
     busy;
     sessionId;
+    $editorState;
     invalidateCommands();
   }
 
@@ -142,6 +144,22 @@
     return $editorState.value || '';
   }
 
+  export function canUndo() {
+    return $modelState.canUndo;
+  }
+
+  export function undo() {
+    dispatchModel({ type: 'undo' });
+  }
+
+  export function canRedo() {
+    return $modelState.canRedo;
+  }
+
+  export function redo() {
+    dispatchModel({ type: 'redo' });
+  }
+
   const generatePreview = (value, engine) => {
     if (!engine || !value) return;
     const sql = generateDesignedQuery(value, engine);
@@ -181,6 +199,18 @@
   //       />
   //     </TabPage>
   //   )}
+  function createMenu() {
+    return [
+      { command: 'designer.execute' },
+      { command: 'designer.kill' },
+      { divider: true },
+      { command: 'designer.save' },
+      { command: 'designer.saveAs' },
+      { divider: true },
+      { command: 'designer.undo' },
+      { command: 'designer.redo' },
+    ];
+  }
 </script>
 
 <VerticalSplitter initialValue="70%">
@@ -191,6 +221,7 @@
       {database}
       engine={$connection && $connection.engine}
       onChange={handleChange}
+      menu={createMenu}
     />
   </svelte:fragment>
 

packages/web/src/utility/contextMenu.ts

@@ -4,6 +4,7 @@ import { currentDropDownMenu } from '../stores';
 export default function contextMenu(node, items) {
   const handleContextMenu = e => {
     e.preventDefault();
+    e.stopPropagation();
     const left = e.pageX;
     const top = e.pageY;
     currentDropDownMenu.set({ left, top, items: _.isFunction(items) ? items() : items });