active components - automatic detection of mutual exclusive based of parentship

packages/web/src/datagrid/DataGridCore.svelte

@@ -276,7 +276,7 @@
   export let selectedCellsPublished = () => [];
   // export let generalAllowSave = false;
 
-  export const activator = createActivator('DataGridCore', false, 'FormView');
+  export const activator = createActivator('DataGridCore', false);
 
   const wheelRowCount = 5;
   const tabVisible: any = getContext('tabVisible');

packages/web/src/formview/FormView.svelte

@@ -263,7 +263,7 @@
     formDisplay.addFilterColumn(getCellColumn(currentCell));
   }
 
-  export const activator = createActivator('FormView', false, 'DataGridCore');
+  export const activator = createActivator('FormView', false);
 
   const handleTableMouseDown = event => {
     if (event.target.closest('.buttonLike')) return;
@@ -436,91 +436,91 @@
   }
 </script>
 
-{#if isLoading}
-  <LoadingInfo wrapper message="Loading data" />
-{:else}
-  <div class="outer">
-    <div class="wrapper" use:contextMenu={createMenu} bind:clientHeight={wrapperHeight}>
-      {#each columnChunks as chunk, chunkIndex}
-        <table on:mousedown={handleTableMouseDown}>
-          {#each chunk as col, rowIndex}
-            <tr>
-              <td
-                class="header-cell"
-                data-row={rowIndex}
-                data-col={chunkIndex * 2}
-                style={rowHeight > 1 ? `height: ${rowHeight}px` : undefined}
-                class:isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
-                bind:this={domCells[`${rowIndex},${chunkIndex * 2}`]}
-              >
-                <div class="header-cell-inner">
-                  {#if col.foreignKey}
-                    <FontIcon
-                      icon={plusExpandIcon(formDisplay.isExpandedColumn(col.uniqueName))}
-                      on:click={e => {
-                        e.stopPropagation();
-                        formDisplay.toggleExpandedColumn(col.uniqueName);
-                      }}
-                    />
-                  {:else}
-                    <FontIcon icon="icon invisible-box" />
-                  {/if}
-                  <span style={`margin-left: ${(col.uniquePath.length - 1) * 20}px`} />
-                  <ColumnLabel
-                    {...col}
-                    headerText={col.columnName}
-                    extInfo={col.foreignKey ? ` -> ${col.foreignKey.refTableName}` : null}
-                  />
-                </div>
-              </td>
-              <DataGridCell
-                {rowIndex}
-                {col}
-                {rowData}
-                colIndex={chunkIndex * 2 + 1}
-                isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1}
-                isModifiedCell={rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)}
-                bind:domCell={domCells[`${rowIndex},${chunkIndex * 2 + 1}`]}
-                onSetFormView={handleSetFormView}
-                hideContent={!rowData ||
-                  ($inplaceEditorState.cell &&
-                    rowIndex == $inplaceEditorState.cell[0] &&
-                    chunkIndex * 2 + 1 == $inplaceEditorState.cell[1])}
-              >
-                {#if $inplaceEditorState.cell && rowIndex == $inplaceEditorState.cell[0] && chunkIndex * 2 + 1 == $inplaceEditorState.cell[1]}
-                  <InplaceEditor
-                    width={getCellWidth(rowIndex, chunkIndex * 2 + 1)}
-                    inplaceEditorState={$inplaceEditorState}
-                    {dispatchInsplaceEditor}
-                    cellValue={rowData[col.uniqueName]}
-                    onSetValue={value => {
-                      former.setCellValue(col.uniqueName, value);
+<div class="outer">
+  <div class="wrapper" use:contextMenu={createMenu} bind:clientHeight={wrapperHeight}>
+    {#each columnChunks as chunk, chunkIndex}
+      <table on:mousedown={handleTableMouseDown}>
+        {#each chunk as col, rowIndex}
+          <tr>
+            <td
+              class="header-cell"
+              data-row={rowIndex}
+              data-col={chunkIndex * 2}
+              style={rowHeight > 1 ? `height: ${rowHeight}px` : undefined}
+              class:isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
+              bind:this={domCells[`${rowIndex},${chunkIndex * 2}`]}
+            >
+              <div class="header-cell-inner">
+                {#if col.foreignKey}
+                  <FontIcon
+                    icon={plusExpandIcon(formDisplay.isExpandedColumn(col.uniqueName))}
+                    on:click={e => {
+                      e.stopPropagation();
+                      formDisplay.toggleExpandedColumn(col.uniqueName);
                     }}
                   />
+                {:else}
+                  <FontIcon icon="icon invisible-box" />
                 {/if}
-              </DataGridCell>
-            </tr>
-          {/each}
-        </table>
-      {/each}
-      <input
-        type="text"
-        class="focus-field"
-        bind:this={domFocusField}
-        on:focus={() => {
-          activator.activate();
-          invalidateCommands();
-        }}
-        on:keydown={handleKeyDown}
-        on:copy={copyToClipboard}
-      />
-    </div>
-    {#if rowCountInfo}
-      <div class="row-count-label">
-        {rowCountInfo}
-      </div>
-    {/if}
+                <span style={`margin-left: ${(col.uniquePath.length - 1) * 20}px`} />
+                <ColumnLabel
+                  {...col}
+                  headerText={col.columnName}
+                  extInfo={col.foreignKey ? ` -> ${col.foreignKey.refTableName}` : null}
+                />
+              </div>
+            </td>
+            <DataGridCell
+              {rowIndex}
+              {col}
+              {rowData}
+              colIndex={chunkIndex * 2 + 1}
+              isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1}
+              isModifiedCell={rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)}
+              bind:domCell={domCells[`${rowIndex},${chunkIndex * 2 + 1}`]}
+              onSetFormView={handleSetFormView}
+              hideContent={!rowData ||
+                ($inplaceEditorState.cell &&
+                  rowIndex == $inplaceEditorState.cell[0] &&
+                  chunkIndex * 2 + 1 == $inplaceEditorState.cell[1])}
+            >
+              {#if $inplaceEditorState.cell && rowIndex == $inplaceEditorState.cell[0] && chunkIndex * 2 + 1 == $inplaceEditorState.cell[1]}
+                <InplaceEditor
+                  width={getCellWidth(rowIndex, chunkIndex * 2 + 1)}
+                  inplaceEditorState={$inplaceEditorState}
+                  {dispatchInsplaceEditor}
+                  cellValue={rowData[col.uniqueName]}
+                  onSetValue={value => {
+                    former.setCellValue(col.uniqueName, value);
+                  }}
+                />
+              {/if}
+            </DataGridCell>
+          </tr>
+        {/each}
+      </table>
+    {/each}
+    <input
+      type="text"
+      class="focus-field"
+      bind:this={domFocusField}
+      on:focus={() => {
+        activator.activate();
+        invalidateCommands();
+      }}
+      on:keydown={handleKeyDown}
+      on:copy={copyToClipboard}
+    />
   </div>
+  {#if rowCountInfo}
+    <div class="row-count-label">
+      {rowCountInfo}
+    </div>
+  {/if}
+</div>
+
+{#if isLoading}
+  <LoadingInfo wrapper message="Loading data" />
 {/if}
 
 <style>

packages/web/src/utility/createActivator.ts

@@ -1,15 +1,18 @@
 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: string,
-  activateOnTabVisible: boolean,
-  mutualExclusive: string | string[] = []
-) {
+function isParent(parent, child) {
+  while (child && child.activator) {
+    if (parent == child) return true;
+    child = child.activator.parentActivatorInstance;
+  }
+  return false;
+}
+
+export default function createActivator(name: string, activateOnTabVisible: boolean) {
   const instance = get_current_component();
   const tabVisible: any = getContext('tabVisible');
   const tabid = getContext('tabid');
@@ -32,13 +35,20 @@ export default function createActivator(
   });
 
   const activate = () => {
-    lastActiveDictionary[name] = instance;
-    for (const comp of getAsArray(mutualExclusive)) {
-      delete lastActiveDictionary[comp];
+    const toDelete = [];
+    for (const key in lastActiveDictionary) {
+      if (isParent(lastActiveDictionary[key], instance)) continue;
+      if (isParent(instance, lastActiveDictionary[key])) continue;
+      toDelete.push(key);
     }
+    for (const del of toDelete) {
+      delete lastActiveDictionary[del];
+    }
+    lastActiveDictionary[name] = instance;
     if (parentActivatorInstance) {
       parentActivatorInstance.activator.activate();
     }
+    // console.log('Active components', lastActiveDictionary);
   };
 
   const getTabVisible = () => tabVisibleValue;
@@ -47,6 +57,7 @@ export default function createActivator(
     activate,
     tabid,
     getTabVisible,
+    parentActivatorInstance,
   };
 }