to amend

projects/scion/workbench/src/lib/common/uuid.util.ts → projects/scion/workbench/src/lib/common/uid.util.ts

@@ -11,13 +11,15 @@
 import {UUID} from '@scion/toolkit/uuid';
 
 /**
- * Format of a UUID (universally unique identifier) compliant with the RFC 4122 version 4.
+ * Generates a UID (unique identifier).
  */
-export type UUID = `${string}-${string}-${string}-${string}-${string}`;
-
-/**
- * Generates a UUID (universally unique identifier) compliant with the RFC 4122 version 4.
- */
-export function randomUUID(): UUID {
- return UUID.randomUUID() as UUID;
+export const UID = {
+ /**
+ * Generates a UID (unique identifier) with length 8.
+  */
+  randomUID: (): string => {
+ return UUID.randomUUID().substring(0, 8);
+ },
 }
+
+

projects/scion/workbench/src/lib/dialog/ɵworkbench-dialog.ts

@@ -33,7 +33,7 @@ import {WorkbenchDialogHeaderDirective} from './dialog-header/workbench-dialog-h
 import {Disposable} from '../common/disposable';
 import {Blockable} from '../glass-pane/blockable';
 import {Blocking} from '../glass-pane/blocking';
-import {randomUUID} from '../common/uuid.util';
+import {UUID} from '@scion/toolkit/uuid';
 
 /** @inheritDoc */
 export class ɵWorkbenchDialog<R = unknown> implements WorkbenchDialog<R>, Blockable, Blocking {
@@ -57,7 +57,7 @@ export class ɵWorkbenchDialog<R = unknown> implements WorkbenchDialog<R>, Block
  /**
  * Unique identity of this dialog.
  */
- public readonly id = randomUUID();
+ public readonly id = UUID.randomUUID();
  /**
  * Indicates whether this dialog is blocked by other dialog(s) that overlay this dialog.
  */

projects/scion/workbench/src/lib/filter-field/filter-field.component.ts

@@ -14,7 +14,7 @@ import {noop} from 'rxjs';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import {randomUUID} from '../common/uuid.util';
+import {UUID} from '@scion/toolkit/uuid';
 
 /**
  * Provides a filter control.
@@ -35,7 +35,7 @@ export class FilterFieldComponent implements ControlValueAccessor, OnDestroy {
  private _cvaChangeFn: (value: any) => void = noop;
  private _cvaTouchedFn: () => void = noop;
 
- public readonly id = randomUUID();
+ public readonly id = UUID.randomUUID();
 
  /**
  * Sets focus order in sequential keyboard navigation.

projects/scion/workbench/src/lib/layout/grid-element/grid-element.component.html

@@ -1,19 +1,25 @@
 <!-- MPart (leaf) -->
-<ng-container *ngIf="element | wbInstanceof:MPart as part" [cdkPortalOutlet]="part.id | wbPartPortal"></ng-container>
+@if (element | wbInstanceof:MPart; as part) {
+ <ng-container [cdkPortalOutlet]="part.id | wbPartPortal"/>
+}
 
 <!-- MTreeNode -->
-<ng-container *ngIf="element | wbInstanceof:MTreeNode as treeNode">
- <!-- Node with a single visible child. -->
- <wb-grid-element *ngIf="children.length === 1" [element]="children[0].element"></wb-grid-element>
-
- <!-- Node with multiple visible children. -->
- <sci-sashbox *ngIf="children.length > 1"
- [direction]="treeNode.direction"
- [attr.data-nodeid]="treeNode.nodeId"
- (sashStart)="onSashStart()"
- (sashEnd)="onSashEnd(treeNode, $event)">
- <ng-template *ngFor="let child of children; index as i; trackBy: indexTrackByFn" sciSash [size]="child.size">
- <wb-grid-element [element]="child.element" [class]="'sash-' + (i + 1)"></wb-grid-element>
- </ng-template>
- </sci-sashbox>
-</ng-container>
+@if (element | wbInstanceof:MTreeNode; as treeNode) {
+ @if (children.length === 1) {
+ <!-- Node with a single visible child. -->
+ <wb-grid-element [element]="children[0].element"/>
+ }
+ @if (children.length > 1) {
+ <!-- Node with multiple visible children. -->
+ <sci-sashbox [direction]="treeNode.direction"
+ [attr.data-nodeid]="treeNode.id"
+ (sashStart)="onSashStart()"
+ (sashEnd)="onSashEnd(treeNode, $event)">
+ @for (child of children; track child.element.id) {
+ <ng-template sciSash [size]="child.size">
+ <wb-grid-element [element]="child.element" [class]="'sash-' + ($index + 1)"/>
+ </ng-template>
+ }
+ </sci-sashbox>
+ }
+}

projects/scion/workbench/src/lib/layout/grid-element/grid-element.component.ts

@@ -8,14 +8,13 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import {Component, HostBinding, Input, OnChanges, SimpleChanges, TrackByFunction} from '@angular/core';
+import {Component, HostBinding, Input, OnChanges, SimpleChanges} from '@angular/core';
 import {MPart, MTreeNode} from '../workbench-layout.model';
 import {ɵWorkbenchRouter} from '../../routing/ɵworkbench-router.service';
 import {WorkbenchLayoutService} from '../workbench-layout.service';
 import {InstanceofPipe} from '../../common/instanceof.pipe';
 import {PortalModule} from '@angular/cdk/portal';
 import {PartPortalPipe} from '../../part/part-portal.pipe';
-import {NgFor, NgIf} from '@angular/common';
 import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox';
 import {WorkbenchLayouts} from '../workbench-layouts.util';
 
@@ -37,8 +36,6 @@ import {WorkbenchLayouts} from '../workbench-layouts.util';
  styleUrls: ['./grid-element.component.scss'],
  standalone: true,
  imports: [
- NgIf,
- NgFor,
  InstanceofPipe,
  PortalModule,
  PartPortalPipe,
@@ -70,8 +67,8 @@ export class GridElementComponent implements OnChanges {
 
  public ngOnChanges(changes: SimpleChanges): void {
  this.children = this.element instanceof MTreeNode ? this.computeChildren(this.element) : [];
- this.parentNodeId = this.element.parent?.nodeId;
- this.nodeId = this.element instanceof MTreeNode ? this.element.nodeId : undefined;
+ this.parentNodeId = this.element.parent?.id;
+ this.nodeId = this.element instanceof MTreeNode ? this.element.id : undefined;
  this.partId = this.element instanceof MPart ? this.element.id : undefined;
  }
 
@@ -82,7 +79,7 @@ export class GridElementComponent implements OnChanges {
  public onSashEnd(treeNode: MTreeNode, [sashSize1, sashSize2]: number[]): void {
  const ratio = sashSize1 / (sashSize1 + sashSize2);
  this._workbenchLayoutService.notifyDragEnding();
- this._workbenchRouter.navigate(layout => layout.setSplitRatio(treeNode.nodeId, ratio)).then();
+ this._workbenchRouter.navigate(layout => layout.setSplitRatio(treeNode.id, ratio)).then();
  }
 
  private computeChildren(treeNode: MTreeNode): ChildElement[] {
@@ -104,14 +101,6 @@ export class GridElementComponent implements OnChanges {
  }
  return [];
  }
-
- /**
- * Each layout change creates new model object instances since the layout is deserialized from the URL.
- * Therefore, the "correct" track-by function is critical to help Angular identify DOM elements for reuse, which significantly can
- * improve performance. Note that we use the index instead of the object identity because a different identity may be computed for
- * nodes when re-arranging parts. Using the index is like not using *ngFor at all.
- */
- public indexTrackByFn: TrackByFunction<ChildElement> = (index: number): number => index;
 }
 
 /**

projects/scion/workbench/src/lib/layout/migration/model/workbench-layout-migration-v5.model.ts

@@ -18,7 +18,7 @@ export interface MPartV5 {
 
 export interface MTreeNodeV5 {
  type: 'MTreeNode';
- nodeId: string;
+ id: string;
  child1: MTreeNodeV5 | MPartV5;
  child2: MTreeNodeV5 | MPartV5;
  ratio: number;
@@ -44,4 +44,3 @@ export interface MViewV5 {
 }
 
 export type ViewIdV5 = `view.${number}`;
-

projects/scion/workbench/src/lib/layout/migration/workbench-layout-migration-v5.service.ts

@@ -12,7 +12,7 @@ import {Injectable} from '@angular/core';
 import {MPartGridV4, MPartV4, MTreeNodeV4, MViewV4} from './model/workbench-layout-migration-v4.model';
 import {WorkbenchMigration} from '../../migration/workbench-migration';
 import {MPartGridV5, MPartV5, MTreeNodeV5, MViewV5} from './model/workbench-layout-migration-v5.model';
-import {randomUUID} from '../../common/uuid.util';
+import {UID} from '../../common/uid.util';
 
 /**
  * Migrates the workbench layout from version 4 to version 5.
@@ -46,6 +46,7 @@ export class WorkbenchLayoutMigrationV5 implements WorkbenchMigration {
  function migrateNode(nodeV4: MTreeNodeV4): MTreeNodeV5 {
  return {
  ...nodeV4,
+ id: UID.randomUID(),
  child1: migrateGridElement(nodeV4.child1),
  child2: migrateGridElement(nodeV4.child2),
  };
@@ -58,7 +59,8 @@ export class WorkbenchLayoutMigrationV5 implements WorkbenchMigration {
  function migrateView(viewV4: MViewV4): MViewV5 {
  const viewV5: MViewV5 = {
  ...viewV4,
- navigation: viewV4.navigation ? {...viewV4.navigation, id: randomUUID()} : undefined,
+ uid: UID.randomUID(),
+ navigation: viewV4.navigation ? {...viewV4.navigation, id: UID.randomUID()} : undefined,
  };
  if (!viewV5.navigation) {
  delete viewV5.navigation;