@api-client/ui 0.0.9 → 0.0.11

package/src/elements/layout/SplitItem.ts

@@ -179,30 +179,38 @@ export class SplitItem implements ISplitItem {
     return result;
   }
 
-  /**
-   * @returns The parent of the item. Returns undefined when the item was removed from layout.
-   */
-  getParent(): SplitPanel | undefined {
-    return this.manager.getParent(this.key);
-  }
+  // /**
+  //  * @returns The parent of the item. Returns undefined when the item was removed from layout.
+  //  * @deprecated Use `getParents()` instead.
+  //  */
+  // getParent(): SplitPanel | undefined {
+  //   return this.manager.getParent(this.key);
+  // }
 
   /**
-   * Removes self from the layout
+   * @returns The parent of the item. Returns undefined when the item was removed from layout.
    */
-  remove(): void {
-    this.manager.removeItem(this.key);
+  getParents(): SplitPanel[] {
+    return this.manager.getParents(this.key);
   }
 
-  /**
-   * Sets the item active in the parent layout.
-   */
-  setSelected(): void {
-    const parent = this.getParent();
-    if (parent) {
-      parent.selected = this.key;
-      this.notifyChange();
-    }
-  }
+  // /**
+  //  * Removes self from the layout. This removes the item from all panels.
+  //  */
+  // remove(): void {
+  //   this.manager.removeItem(this.key);
+  // }
+
+  // /**
+  //  * Sets the item active in the parent layout.
+  //  */
+  // setSelected(): void {
+  //   const parent = this.getParent();
+  //   if (parent) {
+  //     parent.selected = this.key;
+  //     this.notifyChange();
+  //   }
+  // }
 
   /**
    * Updates the label and triggers side effects like layout and view update.
@@ -222,8 +230,8 @@ export class SplitItem implements ISplitItem {
   }
 
   updateView(): void {
-    const panel = this.getParent();
-    panel?.updateView();
+    const panels = this.getParents();
+    panels.forEach(panel => panel.updateView());
   }
 
   notifyChange(): void {

package/src/elements/layout/SplitLayout.ts

@@ -3,7 +3,7 @@ import { TemplateResult } from "lit";
 import { ISplitItem, SplitItem } from "./SplitItem.js";
 import { ISplitPanel, SplitPanel } from "./SplitPanel.js";
 import SplitView from "./SplitView.js";
-import { IPanelObject, LayoutType, SplitCloseDirection, SplitDirection, SplitItemRenderCallback, SplitLayoutInit, SplitPanelAddOptions } from "./type.js";
+import { IPanelObject, LayoutType, SplitDirection, SplitItemRenderCallback, SplitLayoutAddOptions, SplitLayoutInit, SplitPanelAddOptions } from "./type.js";
 
 interface LayoutObject {
   type: LayoutType;
@@ -33,6 +33,11 @@ export interface ISplitLayout {
   active?: string;
 }
 
+export interface ITabCloseDetail {
+  tab: string;
+  panel: string;
+}
+
 /**
  * Split layout manager creates a view where the application can put "items" into
  * and render them inside "panels". The application can create as many panels as needed.
@@ -109,7 +114,7 @@ export class SplitLayout extends EventTarget {
       return value as SplitPanel;
     }
     const item = value as SplitItem;
-    return this.getParent(item.key);
+    return this.getParents(item.key)[0];
   }
 
   /**
@@ -316,22 +321,25 @@ export class SplitLayout extends EventTarget {
   }
 
   /**
-   * Finds a parent for an item.
-   * @param panelKey The key of the item (panel or panel's item) to find a parent for.
-   * @returns The parent panel or `undefined` when the item was removed or the panel has no parents.
+   * Finds parents an item or another panel is anchored to.
+   * An item can have multiple parents. A panel can only have a single parent.
+   * 
+   * @param itemOrPanelKey The key of the panel or an item.
+   * @returns THe list of panels the item is added. It can only return up to 1 result when looking for a panel's parent.
    */
-  getParent(panelKey: string): SplitPanel | undefined {
+  getParents(itemOrPanelKey: string): SplitPanel[] {
+    const result: SplitPanel[] = [];
     for (const { type, value } of this.definitions.values()) {
       if (type !== LayoutType.panel) {
         continue;
       }
       const panel = value as SplitPanel;
-      const result = panel.items.some(i => i.key === panelKey);
-      if (result) {
-        return panel;
+      const has = panel.items.some(i => i.key === itemOrPanelKey);
+      if (has) {
+        result.push(panel);
       }
     }
-    return undefined;
+    return result;
   }
 
   /**
@@ -396,12 +404,15 @@ export class SplitLayout extends EventTarget {
    * Do not call this method from the outside of the layout manager logic.
    * It is a way to communicate a tab was closed.
    */
-  notifyTabClose(itemKey: string): void {
-    this.dispatchEvent(new CustomEvent('closetab', {
+  notifyTabClose(itemKey: string, panel: string): void {
+    this.dispatchEvent(new CustomEvent<ITabCloseDetail>('closetab', {
       bubbles: true,
       cancelable: true,
       composed: true,
-      detail: itemKey,
+      detail: {
+        tab: itemKey,
+        panel,
+      },
     }));
   }
 
@@ -431,10 +442,8 @@ export class SplitLayout extends EventTarget {
     const before = item.label;
     this.dispatchNameItem(item);
     if (before !== item.label) {
-      const panel = item.getParent();
-      if (panel) {
-        this.updateView(panel.key);
-      }
+      const panels = this.getParents(item.key);
+      panels.forEach(panel => this.updateView(panel.key));
     }
   }
 
@@ -450,8 +459,8 @@ export class SplitLayout extends EventTarget {
       const before = item.label;
       this.dispatchNameItem(item);
       if (before !== item.label) {
-        const panel = item.getParent() as SplitPanel;
-        updatePanels.add(panel);
+        const panels = this.getParents(item.key);
+        panels.forEach(panel => updatePanels.add(panel));
       }
     }
 
@@ -532,7 +541,9 @@ export class SplitLayout extends EventTarget {
   }
 
   /**
-   * Removes an item from layout.
+   * Removes an item from the layout. This means removing an item from all panels.
+   * If you want to remove an item from a specific panel then find the panel first and then call `removeItem()`.
+   * 
    * @param key The key of the item to remove.
    */
   removeItem(key: string): void {
@@ -540,27 +551,26 @@ export class SplitLayout extends EventTarget {
     if (!item) {
       return;
     }
-    const panel = item.getParent();
-    if (panel) {
-      panel.removeItem(key);
-    }
+    const parents = this.getParents(key);
+    parents.forEach(parent => parent.removeChildItem(item));
   }
 
-  /**
-   * Removes other items relative to the `key` item.
-   * @param key The key of the item to perform a relative operation from.
-   * @param dir The direction to which close other items. Default to both directions leaving only the `key` item
-   */
-  removeRelative(key: string, dir?: SplitCloseDirection): void {
-    const item = this.findItem(key);
-    if (!item) {
-      return;
-    }
-    const panel = item.getParent();
-    if (panel) {
-      panel.removeRelative(key, dir);
-    }
-  }
+  // /**
+  //  * Removes other items relative to the `key` item.
+  //  * @param key The key of the item to perform a relative operation from.
+  //  * @param dir The direction to which close other items. Default to both directions leaving only the `key` item
+  //  * @deprecated this function does not work as intended. Find the parent panel first and then call the `removeRelative()`.
+  //  */
+  // removeRelative(key: string, dir?: SplitCloseDirection): void {
+  //   const item = this.findItem(key);
+  //   if (!item) {
+  //     return;
+  //   }
+  //   const panel = item.getParent();
+  //   if (panel) {
+  //     panel.removeRelative(key, dir);
+  //   }
+  // }
 
   /**
    * Moves a tab between panels or inside a panel
@@ -570,14 +580,14 @@ export class SplitLayout extends EventTarget {
    * @param itemKey The key of the item
    * @param toIndex The index to which add the item. Default as the last.
    */
-  moveItem(fromPanelKey: string, toPanelKey: string, itemKey: string, toIndex?: number): void {
+  moveItem(fromPanelKey: string, toPanelKey: string, itemKey: string, opts?: SplitLayoutAddOptions): void {
     const singlePanel = fromPanelKey === toPanelKey;
     const from = this.findPanel(fromPanelKey);
     if (!from) {
       throw new Error(`Source layout panel not found.`);
     }
     if (singlePanel) {
-      from.moveItem(itemKey, toIndex);
+      from.moveItem(itemKey, opts);
     } else {
       const to = this.findPanel(toPanelKey);
       if (!to) {
@@ -587,7 +597,7 @@ export class SplitLayout extends EventTarget {
       if (!removed) {
         throw new Error(`Item not found.`);
       }
-      to.addItem(removed, { index: toIndex });
+      to.addItem(removed, opts);
     }
     this.notifyChange();
   }
@@ -686,7 +696,7 @@ export class SplitLayout extends EventTarget {
       panel = activePanel;
     } else {
       // any panel that has the item
-      panel = this.getParent(itemKey);
+      [panel] = this.getParents(itemKey);
     }
     if (!panel) {
       return;

package/src/elements/layout/SplitPanel.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 /* eslint-disable import/no-cycle */
 import { html, TemplateResult } from "lit";
 import { uuidV4 } from "@api-client/core/build/browser.js";
@@ -108,7 +109,7 @@ export class SplitPanel {
   }
 
   getParent(): SplitPanel | undefined {
-    return this.manager.getParent(this.key);
+    return this.manager.getParents(this.key)[0];
   }
 
   /**
@@ -226,6 +227,14 @@ export class SplitPanel {
       return instance;
     }
 
+    const panel = this.splitByRegion(region);
+    // we don't call request update here because
+    // the app has to redo the view rendering first as
+    // the panel purpose has changed.
+    return panel.addItem(item, { index });
+  }
+
+  protected splitByRegion(region: SplitRegion): SplitPanel {
     let panel: SplitPanel;
     if (region === 'east') {
       [, panel] = this.split({
@@ -252,10 +261,7 @@ export class SplitPanel {
         noSideEffects: true,
       });
     }
-    // we don't call request update here because
-    // the app has to redo the view rendering first as
-    // the panel purpose has changed.
-    return panel.addItem(item, { index });
+    return panel;
   }
 
   /**
@@ -273,11 +279,8 @@ export class SplitPanel {
     this.items = [];
     this.selected = undefined;
 
-    const p1 = this.addPanel()
-    const p2 = this.addPanel()
-
-
-
+    const p1 = this.addPanel();
+    const p2 = this.addPanel();
 
     // const p1 = new SplitPanel(this.manager);
     // const p2 = new SplitPanel(this.manager);
@@ -368,24 +371,19 @@ export class SplitPanel {
     }
   }
 
-  /**
-   * Removes an item from the layout
-   * @param key The `key` of the item.
-   * @returns The removed item, if any.
-   */
-  removeItem(key: string, opts: SplitPanelRemoveItemOptions = {}): SplitItem | undefined {
-    const removed = this.manager.findItem(key);
-    if (!removed) {
-      return undefined;
-    }
-    const index = this.items.findIndex(i => i.key === key);
+  removeChildItem(item: SplitItem, opts: SplitPanelRemoveItemOptions = {}): SplitItem | undefined {
+    const index = this.items.findIndex(i => i.key === item.key);
     if (index < 0) {
       return undefined;
     }
     const itemInfo = this.items[index];
     this.items.splice(index, 1);
-    this.manager.definitions.delete(itemInfo.key);
-    this.decreaseIndex(removed.index || 0);
+    this.decreaseIndex(item.index || 0);
+    const parents = this.manager.getParents(item.key);
+    if (!parents.length) {
+      // remove the definition since no other panel have this item.
+      this.manager.definitions.delete(itemInfo.key);
+    }
 
     if (this.items.length === 0) {
       // remove panel (self)
@@ -393,29 +391,82 @@ export class SplitPanel {
       if (parent) {
         parent.removePanel(this.key);
         // Note, ignore `opts.noSideEffects` for tab close. It won't get dispatched elsewhere.
-        this.manager.notifyTabClose(key);
+        this.manager.notifyTabClose(item.key, this.key);
         // no point doing the stuff below as the whole panel is removed.
-        return removed;
+        return item;
       }
     }
-    if (this.selected === key) {
+
+    if (this.selected === item.key) {
       let nextKey: string | undefined;
       if (this.items[index]) {
         nextKey = this.items[index].key;
       } else if (this.items[index - 1]) {
         nextKey = this.items[index - 1].key;
       } else if (this.items.length) {
-        const [item] = this.items;
-        nextKey = item.key;
+        const [other] = this.items;
+        nextKey = other.key;
       }
       this.selected = nextKey;
     }
+
     if (!opts.noSideEffects) {
-      this.manager.notifyTabClose(key);
+      this.manager.notifyTabClose(item.key, this.key);
       this.manager.notifyChange();
       this.manager.updateView(this.key);
     }
-    return removed;
+    return item;
+  }
+
+  /**
+   * Removes an item from the layout
+   * @param key The `key` of the item.
+   * @returns The removed item, if any.
+   */
+  removeItem(key: string, opts?: SplitPanelRemoveItemOptions): SplitItem | undefined {
+    const removed = this.manager.findItem(key);
+    if (!removed) {
+      return undefined;
+    }
+    return this.removeChildItem(removed, opts);
+    // const index = this.items.findIndex(i => i.key === key);
+    // if (index < 0) {
+    //   return undefined;
+    // }
+    // const itemInfo = this.items[index];
+    // this.items.splice(index, 1);
+    // this.manager.definitions.delete(itemInfo.key);
+    // this.decreaseIndex(removed.index || 0);
+
+    // if (this.items.length === 0) {
+    //   // remove panel (self)
+    //   const parent = this.getParent();
+    //   if (parent) {
+    //     parent.removePanel(this.key);
+    //     // Note, ignore `opts.noSideEffects` for tab close. It won't get dispatched elsewhere.
+    //     this.manager.notifyTabClose(key);
+    //     // no point doing the stuff below as the whole panel is removed.
+    //     return removed;
+    //   }
+    // }
+    // if (this.selected === key) {
+    //   let nextKey: string | undefined;
+    //   if (this.items[index]) {
+    //     nextKey = this.items[index].key;
+    //   } else if (this.items[index - 1]) {
+    //     nextKey = this.items[index - 1].key;
+    //   } else if (this.items.length) {
+    //     const [item] = this.items;
+    //     nextKey = item.key;
+    //   }
+    //   this.selected = nextKey;
+    // }
+    // if (!opts.noSideEffects) {
+    //   this.manager.notifyTabClose(key);
+    //   this.manager.notifyChange();
+    //   this.manager.updateView(this.key);
+    // }
+    // return removed;
   }
 
   /**
@@ -423,30 +474,30 @@ export class SplitPanel {
    * @param dir The direction to which close other items. Default to both directions leaving only the `key` item
    */
   removeRelative(key: string, dir: SplitCloseDirection = SplitCloseDirection.both): void {
-    const index = this.items.findIndex(i => i.key === key);
+    const items = this.sortedItems();
+    const index = items.findIndex(i => i.key === key);
     if (index < 0) {
       return;
     }
-    // note, even though we keep indexes in the item, the logic actually
-    // keeps track of them and orders the `items` accordingly.
-    const item = this.items[index];
-    let removed: IPanelObject[];
+    
+    const item = items[index];
+    let removed: string[] = [];
     if (dir === SplitCloseDirection.both) {
-      removed = this.items.filter(i => i !== item);
-      this.items = [item];
-      this.selected = item.key;
+      removed = items.filter(i => i !== item).map(i => i.key);
     } else if (dir === SplitCloseDirection.left) {
-      removed = this.items.slice(0, index);
-      this.items = this.items.splice(index);
-      this.selected = item.key;
+      removed = items.slice(0, index).map(i => i.key);
     } else {
-      removed = this.items.slice(index + 1);
-      this.items = this.items.splice(0, index + 1);
-      this.selected = item.key;
+      removed = this.items.slice(index + 1).map(i => i.key);
     }
+    this.items = this.items.filter(i => !removed.includes(i.key));
+    this.selected = item.key;
+
     removed.forEach(i => {
-      this.manager.definitions.delete(i.key);
-      this.manager.notifyTabClose(i.key);
+      const parents = this.manager.getParents(i);
+      if (!parents.length) {
+        this.manager.definitions.delete(i);
+      }
+      this.manager.notifyTabClose(i, this.key);
     });
     this.manager.notifyChange();
     this.manager.updateView(this.key);
@@ -490,7 +541,7 @@ export class SplitPanel {
    * @param key The item key
    * @param toIndex The new index. When not set it moves the item to the end.
    */
-  moveItem(key: string, toIndex?: number): void {
+  moveItem(key: string, opts: SplitLayoutAddOptions = {}): void {
     const info = this.items.find(i => i.key === key);
     if (!info) {
       return;
@@ -499,22 +550,54 @@ export class SplitPanel {
     if (!item) {
       return;
     }
-    const hasIndex = typeof toIndex === 'number';
-    if (hasIndex && item.index === toIndex) {
+    const { index, region } = opts;
+    if (region) {
+      this.moveToRegion(item, region);
+    } else if (typeof index === 'number') {
+      this.moveToIndex(item, index);
+    } else {
+      this.moveToEnd(item);
+    }
+  }
+
+  moveToRegion(item: SplitItem, region: SplitRegion): void {
+    if (this.items.length < 2) {
+      // nothing to split.
       return;
     }
-    let hasTargetAtTarget = false;
-    if (hasIndex) {
-      hasTargetAtTarget = !!this.items[toIndex];
+    if (region === SplitRegion.center) {
+      // the item is already there.
+      return;
     }
-    if (item.index !== undefined) {
-      this.decreaseIndex(item.index);
+    const itemsIndex = this.items.findIndex(i => i.key === item.key);
+    if (itemsIndex < 0) {
+      return;
+    }
+    this.items.splice(itemsIndex, 1);
+    const index = typeof item.index === 'number' ? item.index : this.nextIndex();
+    const panel = this.splitByRegion(region);
+    panel.addItem(item, { index });
+  }
+
+  moveToIndex(item: SplitItem, index: number): void {
+    if (item.index === index) {
+      return;
     }
-    const finalIndex = hasIndex ? toIndex as number : this.nextIndex();
+    const hasTargetAtTarget = !!this.items[index as number];
+    this.decreaseIndex(item.index);
     if (hasTargetAtTarget) {
-      this.increaseIndex(finalIndex);
+      this.increaseIndex(index);
+    }
+    item.index = index;
+    this.manager.notifyChange();
+    this.manager.updateView(this.key);
+  }
+
+  moveToEnd(item: SplitItem): void {
+    if (item.index !== undefined) {
+      this.decreaseIndex(item.index);
     }
-    item.index = finalIndex;
+    item.index = this.nextIndex();
     this.manager.notifyChange();
     this.manager.updateView(this.key);
   }

package/src/elements/layout/SplitView.ts

@@ -70,7 +70,7 @@ export default class SplitView extends LitElement {
     e.stopPropagation();
     dataTransfer.dropEffect = 'copy';
   }
-
+  
   protected handleDragOver(e: DragEvent): void {
     const { dataTransfer } = e;
     if (!dataTransfer || !this.panelCanDrop(e)) {
@@ -90,7 +90,8 @@ export default class SplitView extends LitElement {
 
   protected handleDrop(e: DragEvent): void {
     const { dataTransfer } = e;
-    if (!dataTransfer || !this.panelCanDrop(e)) {
+    const { panel } = this;
+    if (!dataTransfer || !panel || !this.panelCanDrop(e)) {
       return;
     }
     e.preventDefault();
@@ -100,22 +101,23 @@ export default class SplitView extends LitElement {
     if (!kind || !key) {
       return;
     }
+    const layoutKey = dataTransfer.getData('layout/key');
     this.inDrag = false;
-    const { panel } = this;
-    let dispatch = true;
-    if (panel) {
+    // TODO: When the drag originated in another panel then we 
+    // move the panel between them. Otherwise we add the item to the panel.
+    if (layoutKey) {
+      // move operation not add.
+      panel.manager.moveItem(layoutKey, panel.key, key, { region: this.dragRegion });
+    } else {
       panel.addItem({ key, kind, label: 'New tab' }, { region: this.dragRegion });
       panel.manager.requestNameUpdate(key);
-      dispatch = true;
-    }
-    if (dispatch) {
-      this.dispatchEvent(new CustomEvent('datadrop', {
-        detail: { kind, key, region: this.dragRegion },
-        composed: true,
-        bubbles: true,
-        cancelable: true,
-      }));
     }
+    this.dispatchEvent(new CustomEvent('datadrop', {
+      detail: { kind, key, region: this.dragRegion },
+      composed: true,
+      bubbles: true,
+      cancelable: true,
+    }));
     this.requestUpdate();
   }
 
@@ -282,7 +284,7 @@ export default class SplitView extends LitElement {
   protected moveTab(fromLayout: string, toLayout: string, key: string, toIndex?: number): void {
     const { panel } = this;
     if (panel) {
-      panel.manager.moveItem(fromLayout, toLayout, key, toIndex);
+      panel.manager.moveItem(fromLayout, toLayout, key, { index: toIndex });
     }
   }
 
@@ -452,6 +454,7 @@ export default class SplitView extends LitElement {
       data-index="${index}"
       data-parent="${ifDefined(parent)}"
       data-dirty="${isDirty}"
+      data-panel="${ifDefined(panel?.key)}"
       role="tab"
       class="${classMap(classes)}" 
       draggable="true"

package/src/elements/layout/type.ts

@@ -1,7 +1,6 @@
-/* eslint-disable import/no-cycle */
-import { TemplateResult } from "lit";
-import { SplitItem } from "./SplitItem.js";
-import { ISplitLayout } from "./SplitLayout.js";
+import type { TemplateResult } from "lit";
+import type { SplitItem } from "./SplitItem.js";
+import type { ISplitLayout } from "./SplitLayout.js";
 
 export enum SplitDirection {
   horizontal = 'horizontal',