Scrolling issue in toolbox #92
Description
Hello,
While using the toolbox, I've noticed that scrolling also affects the main web view.
I believe it would be more user-friendly if these two elements operated independently. Specifically, when scrolling within the toolbox, it shouldn't impact the scrolling behavior of the main web view.
This would ensure a smoother and more intuitive user experience, especially when the toolbox contains numerous items.
Picture:
toolbox
main web view
Video:
NoCodeJS_Scroll.mp4
app.component.html
<sqd-designer
theme="light"
[undoStackSize]="10"
[definition]="definition"
[toolboxConfiguration]="toolboxConfiguration"
[stepsConfiguration]="stepsConfiguration"
[validatorConfiguration]="validatorConfiguration"
[controlBar]="true"
[areEditorsHidden]="false"
[globalEditor]="globalEditor"
[stepEditor]="stepEditor"
(onReady)="onDesignerReady($event)"
(onDefinitionChanged)="onDefinitionChanged($event)"
>
</sqd-designer>
<ng-template #globalEditor let-editor>
<h2>Global Editor</h2>
<h3>Velocity</h3>
<mat-form-field class="full-width">
<input
matInput
type="number"
[value]="editor.definition.properties.velocity"
(input)="updateProperty(editor.definition.properties, 'velocity', $event, editor.context)"
/>
</mat-form-field>
</ng-template>
<ng-template #stepEditor let-editor>
<h2>Step Editor</h2>
<mat-tab-group>
<mat-tab label="Basic">
<h3>Name</h3>
<mat-form-field class="full-width">
<input matInput type="text" [value]="editor.step.name" (input)="updateName(editor.step, $event, editor.context)" />
</mat-form-field>
</mat-tab>
<mat-tab label="Details">
<h3>Velocity</h3>
<mat-form-field class="full-width">
<input
matInput
type="number"
[value]="editor.step.properties.velocity"
(input)="updateProperty(editor.step.properties, 'velocity', $event, editor.context)"
/>
</mat-form-field>
</mat-tab>
</mat-tab-group>
</ng-template>
<div class="block">
<button mat-raised-button color="primary" (click)="reloadDefinitionClicked()">Reload definition</button>
Is valid: <strong>{{ isValid }}</strong>
</div>
<div class="block">
<mat-form-field class="full-width flex-1s">
<textarea matInput cols="120" rows="16" readonly>{{ definitionJSON }}</textarea>
</mat-form-field>
</div>
<div class="block">
<mat-form-field class="full-width flex-1s">
<textarea matInput cols="120" rows="16" >{{ definitionJSON }}</textarea>
</mat-form-field>
</div>
<div class="block">
This demo uses Angular, Material UI and
<a href="https://github.com/nocode-js/sequential-workflow-designer/tree/main/angular/designer" target="_blank"
>Sequential Workflow Designer for Angular</a
>.
</div>In this file, I duplicated the class="block" to extend the length of the main web view, enabling scrolling.
app.component.ts
import { Component, OnInit } from '@angular/core';
import {
Definition,
Designer,
GlobalEditorContext,
Properties,
Uid,
Step,
StepEditorContext,
StepsConfiguration,
ToolboxConfiguration,
ValidatorConfiguration
} from 'sequential-workflow-designer';
function createStep(): Step {
return {
id: Uid.next(),
componentType: 'task',
name: 'Step',
properties: { velocity: 0 },
type: 'task'
};
}
function testToolbox(): Step[]{
let length = 10;
let examples :Step[]=[];
for (let nums=0;nums<length;nums++){
examples.push({
id: Uid.next(),
componentType: 'task',
name: 'Step'+nums,
properties: { velocity: 0 },
type: 'task'
})
}
return examples
}
function createDefinition(): Definition {
return {
properties: {
velocity: 0
},
sequence: [createStep()]
};
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
private designer?: Designer;
public definition: Definition = createDefinition();
public definitionJSON?: string;
public isValid?: boolean;
public readonly toolboxConfiguration: ToolboxConfiguration = {
groups: [
{
name: 'Step',
steps: [createStep()]
},
{
name: 'test',
steps:testToolbox()
},
]
};
public readonly stepsConfiguration: StepsConfiguration = {
iconUrlProvider: () => './assets/angular-icon.svg'
};
public readonly validatorConfiguration: ValidatorConfiguration = {
step: (step: Step) => !!step.name && Number(step.properties['velocity']) >= 0,
root: (definition: Definition) => Number(definition.properties['velocity']) >= 0
};
public ngOnInit() {
this.updateDefinitionJSON();
}
public onDesignerReady(designer: Designer) {
this.designer = designer;
this.updateIsValid();
console.log('designer ready', this.designer);
}
public onDefinitionChanged(definition: Definition) {
this.definition = definition;
this.updateIsValid();
this.updateDefinitionJSON();
console.log('definition has changed');
}
public updateName(step: Step, event: Event, context: StepEditorContext) {
step.name = (event.target as HTMLInputElement).value;
context.notifyNameChanged();
}
public updateProperty(properties: Properties, name: string, event: Event, context: GlobalEditorContext | StepEditorContext) {
properties[name] = (event.target as HTMLInputElement).value;
context.notifyPropertiesChanged();
}
public reloadDefinitionClicked() {
this.definition = createDefinition();
this.updateDefinitionJSON();
}
private updateDefinitionJSON() {
this.definitionJSON = JSON.stringify(this.definition, null, 2);
}
private updateIsValid() {
this.isValid = this.designer?.isValid();
}
}In this file, I've created a function testToolbox():Step[] to generate multiple step items in the toolbox.
Both of these files are based on the angular-app folder within the demos directory of the repository.