Skip to content

SED-4373 Refactor split view in plan's editor #1289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dvladir wants to merge 10 commits into
base: master
Choose a base branch
from
Open

SED-4373 Refactor split view in plan's editor #1289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
64b2f28
SED-4373 Move plan editor controls to separate component
dvladir Nov 19, 2025
2b14029
SED-4373 Plain split view for plan editor
dvladir Nov 19, 2025
eecd783
SED-4373 Change split area to signals
dvladir Nov 19, 2025
692d14f
SED-4373: Fix build
dvladir Nov 20, 2025
24ab0ee
SED-4373 Move size peristence to split area
dvladir Nov 20, 2025
2fbfe86
SED-4373 Define split content with sections
dvladir Nov 20, 2025
ef2d1b9
SED-4373 Rename split-area to split-resizable-area
dvladir Nov 20, 2025
94a7315
SED-4373 Mobile support
dvladir Nov 20, 2025
a63b12b
Merge branch 'master' into SED-4373-poc-mobile-support-for-plan-editor
dvladir Nov 20, 2025
4e7c08e
SED-4373 Fixes after merge
dvladir Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions ...port-height-minus-offset-top.directive.ts → ...port-height-minus-offset-top.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { AfterViewInit, DestroyRef, Directive, ElementRef, inject, OnDestroy, Renderer2 } from '@angular/core';
import { debounceTime, map, startWith, Subject, takeUntil } from 'rxjs';
import { resizeObservable } from '../modules/basics/step-basics.module';
import { AfterViewInit, DestroyRef, Directive, ElementRef, inject, Renderer2 } from '@angular/core';
import { debounceTime, map, startWith } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { resizeObservable } from '../types/resize-observable';

@Directive({
selector: '[stepMaxHeightViewportHeightMinusOffsetTop]',
standalone: false,
})
export class MaxHeightViewportHeightMinusOffsetTopDirective implements AfterViewInit {
private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
Expand Down
4 changes: 4 additions & 0 deletions projects/step-core/src/lib/modules/basics/step-basics.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ import { FilterAddonDirective } from './directives/filter-addon.directive';
import { LongInlineTextComponent } from './components/long-inline-text/long-inline-text.component';
import { ResourceUrlPipe } from './pipes/resource-url.pipe';
import { NumberSeparateThousandsPipe } from './pipes/number-separate-thousands.pipe';
import { MaxHeightViewportHeightMinusOffsetTopDirective } from './directives/max-height-viewport-height-minus-offset-top.directive';

@NgModule({
imports: [
Expand All @@ -99,6 +100,7 @@ import { NumberSeparateThousandsPipe } from './pipes/number-separate-thousands.p
LongInlineTextComponent,
ResourceUrlPipe,
NumberSeparateThousandsPipe,
MaxHeightViewportHeightMinusOffsetTopDirective,
],
declarations: [
ResourceLabelComponent,
Expand Down Expand Up @@ -250,6 +252,7 @@ import { NumberSeparateThousandsPipe } from './pipes/number-separate-thousands.p
LongInlineTextComponent,
ResourceUrlPipe,
NumberSeparateThousandsPipe,
MaxHeightViewportHeightMinusOffsetTopDirective,
],
})
export class StepBasicsModule {}
Expand Down Expand Up @@ -399,3 +402,4 @@ export * from './pipes/resource-url.pipe';
export * from './utils/toggle-validators';
export * from './utils/resource-id';
export * from './pipes/number-separate-thousands.pipe';
export * from './directives/max-height-viewport-height-minus-offset-top.directive';
6 changes: 5 additions & 1 deletion ...-core/src/lib/modules/custom-registeries/components/item-component/plan-type.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import { BaseItemComponent } from './base-item.component';
import { CustomRegistryType } from '../../shared/custom-registry-type.enum';
import { Component, ViewEncapsulation } from '@angular/core';
import { Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
import { CustomRegistryItem } from '../../shared/custom-registry-item';

export interface PlanTypeContext {
templateControls: TemplateRef<unknown>;
}

@Component({
selector: 'step-plan-type',
templateUrl: './base-item.component.html',
Expand Down
30 changes: 17 additions & 13 deletions projects/step-core/src/lib/modules/plan-common/components/plan-tree/plan-tree.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
<step-split>
<step-split-area [size]="treeSize" (sizeChange)="handleTreeSizeChange($event)">
<step-split stepMaxHeightViewportHeightMinusOffsetTop persistencePrefix="planEditor">
@if (templateLeftPanel(); as left) {
<ng-container *stepSplitSection="headerLeftPanel()!; sizeType: sizeTypeLeftPanel()">
<ng-container *ngTemplateOutlet="left" />
</ng-container>
}

<ng-container *stepSplitSection="'Object Tree'">
<step-drag-drop-container stepDropAreaId="planTree">
<step-tree
#tree
Expand Down Expand Up @@ -51,16 +57,8 @@
<step-tree-drag-preview />
</step-drag-preview>
</step-drag-drop-container>
</step-split-area>

<step-split-gutter />

<step-split-area
sizeType="flex"
padding="24px"
[size]="artefactDetailsSize"
(sizeChange)="handleArtefactDetailsSizeChange($event)"
>
</ng-container>
<ng-container *stepSplitSection="'Artefact Details'; sizeType: 'flex'; padding: '24px'">
@if (activeNode(); as activeNode) {
@if (activeNode.originalArtefact; as selectedArtefact) {
<step-artefact-details [artefact]="selectedArtefact" [readonly]="isReadonly" (onSave)="handlePlanChange()" />
Expand All @@ -75,5 +73,11 @@
/>
}
}
</step-split-area>
</ng-container>

@if (templateRightPanel(); as right) {
<ng-container *stepSplitSection="headerRightPanel()!; sizeType: sizeTypeRightPanel()">
<ng-container *ngTemplateOutlet="right" />
</ng-container>
}
</step-split>
44 changes: 24 additions & 20 deletions projects/step-core/src/lib/modules/plan-common/components/plan-tree/plan-tree.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
AfterViewInit,
Component,
computed,
contentChild,
DestroyRef,
ElementRef,
forwardRef,
Expand All @@ -20,7 +21,6 @@ import { ArtefactChildContainerSettingsComponent } from '../artefact-child-conta
import { ArtefactDetailsComponent } from '../artefact-details/artefact-details.component';
import { ArtefactTreeNode } from '../../types/artefact-tree-node';
import { PlanArtefactResolverService } from '../../injectables/plan-artefact-resolver.service';
import { PlanEditorPersistenceStateService } from '../../injectables/plan-editor-persistence-state.service';
import { PlanEditorService } from '../../injectables/plan-editor.service';
import { PlanInteractiveSessionService } from '../../injectables/plan-interactive-session.service';
import { PlanTreeAction } from '../../types/plan-tree-action.enum';
Expand All @@ -30,9 +30,9 @@ import { SPLIT_EXPORTS } from '../../../split';
import { StepIconsModule } from '../../../step-icons/step-icons.module';
import { AsyncPipe } from '@angular/common';
import { StepMaterialModule } from '../../../step-material/step-material.module';

const TREE_SIZE = 'TREE_SIZE';
const ARTEFACT_DETAILS_SIZE = 'ARTEFACT_DETAILS_SIZE';
import { StepBasicsModule } from '../../../basics/step-basics.module';
import { PlanTreeLeftPanelDirective } from '../../directives/plan-tree-left-panel.directive';
import { PlanTreeRightPanelDirective } from '../../directives/plan-tree-right-panel.directive';

@Component({
selector: 'step-plan-tree',
Expand All @@ -43,6 +43,7 @@ const ARTEFACT_DETAILS_SIZE = 'ARTEFACT_DETAILS_SIZE';
SPLIT_EXPORTS,
DRAG_DROP_EXPORTS,
StepMaterialModule,
StepBasicsModule,
TREE_EXPORTS,
StepIconsModule,
ArtefactDetailsComponent,
Expand All @@ -61,27 +62,38 @@ export class PlanTreeComponent implements AfterViewInit, TreeActionsService {

private _treeState = inject<TreeStateService<AbstractArtefact, ArtefactTreeNode>>(TreeStateService);
private _planArtefactResolver? = inject(PlanArtefactResolverService, { optional: true });
private _planPersistenceState = inject(PlanEditorPersistenceStateService);
readonly _planEditorService = inject(PlanEditorService);
readonly _planInteractiveSession? = inject(PlanInteractiveSessionService, { optional: true });

readonly activeNode: Signal<ArtefactTreeNode | undefined> = this._treeState.selectedNode;

/** @Output() **/
private readonly leftPanel = contentChild(PlanTreeLeftPanelDirective);
private readonly rightPanel = contentChild(PlanTreeRightPanelDirective);

protected readonly templateLeftPanel = computed(() => this.leftPanel()?._templateRef);
protected readonly templateRightPanel = computed(() => this.rightPanel()?._templateRef);

protected readonly headerLeftPanel = computed(() => this.leftPanel()?.header());
protected readonly headerRightPanel = computed(() => this.rightPanel()?.header());

protected readonly sizeTypeLeftPanel = computed(() => {
const leftPanel = this.leftPanel();
return leftPanel?.sizeType?.() || 'pixel';
});

protected readonly sizeTypeRightPanel = computed(() => {
const rightPanel = this.rightPanel();
return rightPanel?.sizeType?.() || 'pixel';
});

readonly externalObjectDrop = output<DropInfo>();

@Input() isReadonly: boolean = false;

@ViewChild('area') splitAreaElementRef?: ElementRef<HTMLElement>;

@ViewChild(TreeComponent) tree?: TreeComponent<ArtefactTreeNode>;

/** @ViewChild **/
private dragData = viewChild(DragDataService);

protected treeSize = this._planPersistenceState.getPanelSize(TREE_SIZE);
protected artefactDetailsSize = this._planPersistenceState.getPanelSize(ARTEFACT_DETAILS_SIZE);

private actions: TreeAction[] = [
{ id: PlanTreeAction.OPEN, label: 'Open (Ctrl + O)' },
{ id: PlanTreeAction.RENAME, label: 'Rename (F2)' },
Expand Down Expand Up @@ -274,14 +286,6 @@ export class PlanTreeComponent implements AfterViewInit, TreeActionsService {
}, 200);
}

handleTreeSizeChange(size: number): void {
this._planPersistenceState.setPanelSize(TREE_SIZE, size);
}

handleArtefactDetailsSizeChange(size: number): void {
this._planPersistenceState.setPanelSize(ARTEFACT_DETAILS_SIZE, size);
}

private canOpenArtefact(artefact?: AbstractArtefact): boolean {
if (!artefact) {
return false;
Expand Down
29 changes: 13 additions & 16 deletions ...c/lib/modules/plan-common/components/source-plan-editor/source-plan-editor.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
<step-split>
<step-split-area sizeType="flex" [size]="editorSize" (sizeChange)="handleEditorSizeChange($event)">
<mat-card class="h-100">
<mat-card-title> Source </mat-card-title>
<mat-card-content>
<div #editor class="h-100"></div>
</mat-card-content>
</mat-card>
</step-split-area>

<step-split-gutter></step-split-gutter>

<step-split-area [size]="planSize" (sizeChange)="handlePlanSizeChange($event)">
<step-plan-tree [isReadonly]="true"></step-plan-tree>
</step-split-area>
</step-split>
<step-plan-tree [isReadonly]="true">
<mat-card class="h-100" *stepPlanTreeLeftPanel="'Source'; sizeType: 'flex'">
<mat-card-title> Source </mat-card-title>
<mat-card-content>
<div #editor class="h-100"></div>
</mat-card-content>
</mat-card>
@if (templateControls(); as controls) {
<div *stepPlanTreeRightPanel="'Libraries'">
<ng-container *ngTemplateOutlet="controls" />
</div>
}
</step-plan-tree>
1 change: 0 additions & 1 deletion ...c/lib/modules/plan-common/components/source-plan-editor/source-plan-editor.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
:host {
display: flex;
height: 100%;
}

Expand Down
Loading