chart popup menu

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} />

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>

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}

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(),
     });

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}

packages/web/src/tabs/QueryDesignTab.svelte

@@ -87,7 +87,7 @@
   $: {
     busy;
     sessionId;
-    $editorState;
+    $modelState;
     invalidateCommands();
   }