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}
+<div class="outer">
-  <LoadingInfo wrapper message="Loading data" />
+  <div class="wrapper" use:contextMenu={createMenu} bind:clientHeight={wrapperHeight}>
-{:else}
+    {#each columnChunks as chunk, chunkIndex}
-  <div class="outer">
+      <table on:mousedown={handleTableMouseDown}>
-    <div class="wrapper" use:contextMenu={createMenu} bind:clientHeight={wrapperHeight}>
+        {#each chunk as col, rowIndex}
-      {#each columnChunks as chunk, chunkIndex}
+          <tr>
-        <table on:mousedown={handleTableMouseDown}>
+            <td
-          {#each chunk as col, rowIndex}
+              class="header-cell"
-            <tr>
+              data-row={rowIndex}
-              <td
+              data-col={chunkIndex * 2}
-                class="header-cell"
+              style={rowHeight > 1 ? `height: ${rowHeight}px` : undefined}
-                data-row={rowIndex}
+              class:isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
-                data-col={chunkIndex * 2}
+              bind:this={domCells[`${rowIndex},${chunkIndex * 2}`]}
-                style={rowHeight > 1 ? `height: ${rowHeight}px` : undefined}
+            >
-                class:isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
+              <div class="header-cell-inner">
-                bind:this={domCells[`${rowIndex},${chunkIndex * 2}`]}
+                {#if col.foreignKey}
-              >
+                  <FontIcon
-                <div class="header-cell-inner">
+                    icon={plusExpandIcon(formDisplay.isExpandedColumn(col.uniqueName))}
-                  {#if col.foreignKey}
+                    on:click={e => {
-                    <FontIcon
+                      e.stopPropagation();
-                      icon={plusExpandIcon(formDisplay.isExpandedColumn(col.uniqueName))}
+                      formDisplay.toggleExpandedColumn(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);
                     }}
                   />
+                {:else}
+                  <FontIcon icon="icon invisible-box" />
                 {/if}
-              </DataGridCell>
+                <span style={`margin-left: ${(col.uniquePath.length - 1) * 20}px`} />
-            </tr>
+                <ColumnLabel
-          {/each}
+                  {...col}
-        </table>
+                  headerText={col.columnName}
-      {/each}
+                  extInfo={col.foreignKey ? ` -> ${col.foreignKey.refTableName}` : null}
-      <input
+                />
-        type="text"
+              </div>
-        class="focus-field"
+            </td>
-        bind:this={domFocusField}
+            <DataGridCell
-        on:focus={() => {
+              {rowIndex}
-          activator.activate();
+              {col}
-          invalidateCommands();
+              {rowData}
-        }}
+              colIndex={chunkIndex * 2 + 1}
-        on:keydown={handleKeyDown}
+              isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1}
-        on:copy={copyToClipboard}
+              isModifiedCell={rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)}
-      />
+              bind:domCell={domCells[`${rowIndex},${chunkIndex * 2 + 1}`]}
-    </div>
+              onSetFormView={handleSetFormView}
-    {#if rowCountInfo}
+              hideContent={!rowData ||
-      <div class="row-count-label">
+                ($inplaceEditorState.cell &&
-        {rowCountInfo}
+                  rowIndex == $inplaceEditorState.cell[0] &&
-      </div>
+                  chunkIndex * 2 + 1 == $inplaceEditorState.cell[1])}
-    {/if}
+            >
+              {#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(
+function isParent(parent, child) {
-  name: string,
+  while (child && child.activator) {
-  activateOnTabVisible: boolean,
+    if (parent == child) return true;
-  mutualExclusive: string | string[] = []
+    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;
+    const toDelete = [];
-    for (const comp of getAsArray(mutualExclusive)) {
+    for (const key in lastActiveDictionary) {
-      delete lastActiveDictionary[comp];
+      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,
   };
 }