activator for formview and datagridcore

packages/web/src/datagrid/DataGridCore.svelte

@@ -1,10 +1,5 @@
 <script lang="ts" context="module">
-  let lastFocusedDataGrid = null;
-  const getCurrentDataGrid = () =>
-    lastFocusedDataGrid?.getTabId && lastFocusedDataGrid?.getTabId() == getActiveTabId() ? lastFocusedDataGrid : null;
-  export function clearLastFocusedDataGrid() {
-    lastFocusedDataGrid = null;
-  }
+  const getCurrentDataGrid = () => getActiveComponent('DataGridCore');
 
   registerCommand({
     id: 'dataGrid.refresh',
@@ -224,11 +219,10 @@
 </script>
 
 <script lang="ts">
-  import { changeSetContainsChanges, GridDisplay } from 'dbgate-datalib';
+  import { GridDisplay } from 'dbgate-datalib';
   import { get_current_component } from 'svelte/internal';
   import { getContext } from 'svelte';
   import _ from 'lodash';
-  import { writable, get, derived } from 'svelte/store';
   import registerCommand from '../commands/registerCommand';
   import ColumnHeaderControl from './ColumnHeaderControl.svelte';
   import DataGridRow from './DataGridRow.svelte';
@@ -252,19 +246,18 @@
   import DataFilterControl from './DataFilterControl.svelte';
   import createReducer from '../utility/createReducer';
   import keycodes from '../utility/keycodes';
-  import { activeTabId, getActiveTabId, nullStore, selectedCellsCallback } from '../stores';
-  import memberStore from '../utility/memberStore';
+  import { selectedCellsCallback } from '../stores';
   import axiosInstance from '../utility/axiosInstance';
   import { copyTextToClipboard } from '../utility/clipboard';
   import invalidateCommands from '../commands/invalidateCommands';
   import createRef from '../utility/createRef';
-  import { clearLastFocusedFormView } from '../formview/FormView.svelte';
   import openReferenceForm, { openPrimaryKeyForm } from '../formview/openReferenceForm';
   import openNewTab from '../utility/openNewTab';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
   import { dataGridRowHeight } from './DataGridRowHeightMeter.svelte';
   import FormStyledButton from '../elements/FormStyledButton.svelte';
   import { editJsonRowDocument } from '../jsonview/CollectionJsonRow.svelte';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
 
   export let onLoadNextData = undefined;
   export let grider = undefined;
@@ -293,9 +286,9 @@
   export let selectedCellsPublished = () => [];
   // export let generalAllowSave = false;
 
+  export const activator = createActivator('DataGridCore', false, 'FormView');
+
   const wheelRowCount = 5;
-  const instance = get_current_component();
-  const tabid = getContext('tabid');
   const tabVisible: any = getContext('tabVisible');
 
   let containerHeight = 0;
@@ -1099,8 +1092,7 @@
       bind:this={domFocusField}
       on:keydown={handleGridKeyDown}
       on:focus={() => {
-        lastFocusedDataGrid = instance;
-        clearLastFocusedFormView();
+        activator.activate();
         invalidateCommands();
       }}
       on:paste={handlePaste}

packages/web/src/formview/FormView.svelte

@@ -1,10 +1,5 @@
 <script lang="ts" context="module">
-  let lastFocusedFormView = null;
-  const getCurrentDataForm = () =>
-    lastFocusedFormView?.getTabId && lastFocusedFormView?.getTabId() == getActiveTabId() ? lastFocusedFormView : null;
-  export function clearLastFocusedFormView() {
-    lastFocusedFormView = null;
-  }
+  const getCurrentDataForm = () => getActiveComponent('FormView');
 
   registerCommand({
     id: 'dataForm.switchToTable',
@@ -160,7 +155,6 @@
 
   import registerCommand from '../commands/registerCommand';
   import DataGridCell from '../datagrid/DataGridCell.svelte';
-  import { clearLastFocusedDataGrid } from '../datagrid/DataGridCore.svelte';
   import { dataGridRowHeight } from '../datagrid/DataGridRowHeightMeter.svelte';
   import InplaceEditor from '../datagrid/InplaceEditor.svelte';
   import { cellFromEvent } from '../datagrid/selection';
@@ -169,10 +163,10 @@
   import { plusExpandIcon } from '../icons/expandIcons';
   import FontIcon from '../icons/FontIcon.svelte';
 
-  import { getActiveTabId } from '../stores';
   import axiosInstance from '../utility/axiosInstance';
   import { copyTextToClipboard } from '../utility/clipboard';
   import contextMenu from '../utility/contextMenu';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
   import createReducer from '../utility/createReducer';
   import keycodes from '../utility/keycodes';
   import resizeObserver from '../utility/resizeObserver';
@@ -196,7 +190,6 @@
   let currentCell = [0, 0];
 
   const instance = get_current_component();
-  const tabid = getContext('tabid');
   const tabVisible: any = getContext('tabVisible');
   const domCells = {};
 
@@ -221,10 +214,6 @@
     return `Row: ${(rowCountBefore + 1).toLocaleString()} / ${allRowCount.toLocaleString()}`;
   }
 
-  export function getTabId() {
-    return tabid;
-  }
-
   export function getFormer() {
     return former;
   }
@@ -276,6 +265,8 @@
     formDisplay.addFilterColumn(getCellColumn(currentCell));
   }
 
+  export const activator = createActivator('FormView', false, 'DataGridCore');
+
   const handleTableMouseDown = event => {
     if (event.target.closest('.buttonLike')) return;
     if (event.target.closest('.resizeHandleControl')) return;
@@ -519,8 +510,7 @@
         class="focus-field"
         bind:this={domFocusField}
         on:focus={() => {
-          lastFocusedFormView = instance;
-          clearLastFocusedDataGrid();
+          activator.activate();
           invalidateCommands();
         }}
         on:keydown={handleKeyDown}

packages/web/src/utility/createActivator.ts

@@ -1,10 +1,15 @@
 import { getContext } from 'svelte';
 import { get_current_component, onMount, setContext } from 'svelte/internal';
 import invalidateCommands from '../commands/invalidateCommands';
+import getAsArray from './getAsArray';
 
 const lastActiveDictionary = {};
 
-export default function createActivator(name, activateOnTabVisible) {
+export default function createActivator(
+  name: string,
+  activateOnTabVisible: boolean,
+  mutualExclusive: string | string[] = []
+) {
   const instance = get_current_component();
   const tabVisible: any = getContext('tabVisible');
   const tabid = getContext('tabid');
@@ -28,6 +33,9 @@ export default function createActivator(name, activateOnTabVisible) {
 
   const activate = () => {
     lastActiveDictionary[name] = instance;
+    for (const comp of getAsArray(mutualExclusive)) {
+      delete lastActiveDictionary[comp];
+    }
     if (parentActivatorInstance) {
       parentActivatorInstance.activator.activate();
     }