From a1ab47a6f9d9092d9b431e1b5f4d9849fb0dbd8a Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sat, 20 Mar 2021 08:35:18 +0100
Subject: [PATCH] chart popup menu

---
 packages/web/src/charts/ChartCore.svelte    |  4 +-
 packages/web/src/charts/ChartEditor.svelte  |  3 +-
 packages/web/src/charts/DataChart.svelte    |  2 +
 packages/web/src/commands/stdCommands.ts    |  2 +-
 packages/web/src/tabs/ChartTab.svelte       | 63 +++++++++++++++++++++
 packages/web/src/tabs/QueryDesignTab.svelte |  2 +-
 6 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/charts/ChartCore.svelte b/packages/web/src/charts/ChartCore.svelte
index 49247f7dd..2f904625a 100644
--- a/packages/web/src/charts/ChartCore.svelte
+++ b/packages/web/src/charts/ChartCore.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
   import { onMount, afterUpdate, onDestroy } from 'svelte';
   import Chart from 'chart.js';
+  import contextMenu from '../utility/contextMenu';
 
   export let data;
   export let type = 'line';
   export let options = {};
   export let plugins = {};
+  export let menu;
 
   let chart = null;
   let domChart;
@@ -31,4 +33,4 @@
   });
 </script>
 
-<canvas bind:this={domChart} {...$$restProps} />
+<canvas bind:this={domChart} {...$$restProps} use:contextMenu={menu} />
diff --git a/packages/web/src/charts/ChartEditor.svelte b/packages/web/src/charts/ChartEditor.svelte
index 8705a5c13..5a04c3851 100644
--- a/packages/web/src/charts/ChartEditor.svelte
+++ b/packages/web/src/charts/ChartEditor.svelte
@@ -25,6 +25,7 @@
   export let conid;
   export let database;
   export let sql;
+  export let menu;
 
   let availableColumnNames = [];
   let error = null;
@@ -145,7 +146,7 @@
     </div>
 
     <svelte:fragment slot="2">
-      <DataChart data={data || loadedData} />
+      <DataChart data={data || loadedData} {menu} />
     </svelte:fragment>
   </HorizontalSplitter>
 </FormProviderCore>
diff --git a/packages/web/src/charts/DataChart.svelte b/packages/web/src/charts/DataChart.svelte
index 6d7c371da..4032c2856 100644
--- a/packages/web/src/charts/DataChart.svelte
+++ b/packages/web/src/charts/DataChart.svelte
@@ -100,6 +100,7 @@
   import { extractDataColumnColors, extractDataColumns } from './chartDataLoader';
 
   export let data;
+  export let menu;
 
   const { values } = getFormContext();
 
@@ -128,6 +129,7 @@
         data={chartData[0]}
         type={$values.chartType}
         options={chartData[1]}
+        {menu}
       />
     {/key}
   {/if}
diff --git a/packages/web/src/commands/stdCommands.ts b/packages/web/src/commands/stdCommands.ts
index 4504f774e..889e29a4f 100644
--- a/packages/web/src/commands/stdCommands.ts
+++ b/packages/web/src/commands/stdCommands.ts
@@ -280,7 +280,7 @@ export function registerFileCommands({
       id: idPrefix + '.redo',
       category,
       group: 'redo',
-      name: 'Replace',
+      name: 'Redo',
       testEnabled: () => getCurrentEditor()?.canRedo(),
       onClick: () => getCurrentEditor().redo(),
     });
diff --git a/packages/web/src/tabs/ChartTab.svelte b/packages/web/src/tabs/ChartTab.svelte
index 7ff0fae04..3d92bd8b0 100644
--- a/packages/web/src/tabs/ChartTab.svelte
+++ b/packages/web/src/tabs/ChartTab.svelte
@@ -1,19 +1,44 @@
+<script lang="ts" context="module">
+  let lastFocusedEditor = null;
+  const getCurrentEditor = () =>
+    lastFocusedEditor?.getTabId && lastFocusedEditor?.getTabId() == getActiveTabId() ? lastFocusedEditor : null;
+
+  registerFileCommands({
+    idPrefix: 'chart',
+    category: 'Chart',
+    getCurrentEditor,
+    folder: 'charts',
+    format: 'json',
+    fileExtension: 'chart',
+
+    undoRedo: true,
+  });
+</script>
+
 <script lang="ts">
   import _ from 'lodash';
+  import { getContext } from 'svelte';
+  import { get_current_component } from 'svelte/internal';
   import { derived } from 'svelte/store';
   import ChartEditor from '../charts/ChartEditor.svelte';
+  import invalidateCommands from '../commands/invalidateCommands';
+  import { registerFileCommands } from '../commands/stdCommands';
 
   import ErrorInfo from '../elements/ErrorInfo.svelte';
 
   import LoadingInfo from '../elements/LoadingInfo.svelte';
 
   import useEditorData from '../query/useEditorData';
+  import { getActiveTabId } from '../stores';
   import createUndoReducer from '../utility/createUndoReducer';
 
   export let tabid;
   export let conid;
   export let database;
 
+  const instance = get_current_component();
+  const tabVisible: any = getContext('tabVisible');
+
   export function getData() {
     return $editorState.value || '';
   }
@@ -33,6 +58,13 @@
 
   $: setEditorData($modelState.value);
 
+  $: if ($tabVisible) lastFocusedEditor = instance;
+
+  $: {
+    $modelState;
+    invalidateCommands();
+  }
+
   const setConfig = config =>
     // @ts-ignore
     dispatchModel({
@@ -48,6 +80,36 @@
     update: setConfig,
     set: setConfig,
   };
+
+  export function canUndo() {
+    return $modelState.canUndo;
+  }
+
+  export function undo() {
+    dispatchModel({ type: 'undo' });
+  }
+
+  export function canRedo() {
+    return $modelState.canRedo;
+  }
+
+  export function redo() {
+    dispatchModel({ type: 'redo' });
+  }
+
+  export function getTabId() {
+    return tabid;
+  }
+
+  function createMenu() {
+    return [
+      { command: 'chart.save' },
+      { command: 'chart.saveAs' },
+      { divider: true },
+      { command: 'chart.undo' },
+      { command: 'chart.redo' },
+    ];
+  }
 </script>
 
 {#if $editorState.isLoading}
@@ -61,5 +123,6 @@
     sql={$modelState.value && $modelState.value.sql}
     {conid}
     {database}
+    menu={createMenu}
   />
 {/if}
diff --git a/packages/web/src/tabs/QueryDesignTab.svelte b/packages/web/src/tabs/QueryDesignTab.svelte
index 2b32b5702..29bc6940a 100644
--- a/packages/web/src/tabs/QueryDesignTab.svelte
+++ b/packages/web/src/tabs/QueryDesignTab.svelte
@@ -87,7 +87,7 @@
   $: {
     busy;
     sessionId;
-    $editorState;
+    $modelState;
     invalidateCommands();
   }