sequential-workflow-designer-angular
Version:
Angular wrapper for Sequential Workflow Designer component.
287 lines (282 loc) • 14.1 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewChild, Input, Output, NgModule } from '@angular/core';
import { Designer } from 'sequential-workflow-designer';
import { CommonModule } from '@angular/common';
class DesignerComponent {
constructor(ngZone, applicationRef) {
this.ngZone = ngZone;
this.applicationRef = applicationRef;
this.onReady = new EventEmitter();
this.onDefinitionChanged = new EventEmitter();
this.onSelectedStepIdChanged = new EventEmitter();
this.onIsToolboxCollapsedChanged = new EventEmitter();
this.onIsEditorCollapsedChanged = new EventEmitter();
this.rootEditorProvider = (definition, context, isReadonly) => {
if (!this.rootEditor) {
throw new Error('Input "rootEditor" is not set');
}
if (typeof this.rootEditor === 'function') {
return this.rootEditor(definition, context, isReadonly);
}
return this.editorProvider(this.rootEditor, {
definition,
context,
isReadonly
});
};
this.stepEditorProvider = (step, context, definition, isReadonly) => {
if (!this.stepEditor) {
throw new Error('Input "stepEditor" is not set');
}
if (typeof this.stepEditor === 'function') {
return this.stepEditor(step, context, definition, isReadonly);
}
return this.editorProvider(this.stepEditor, {
step,
context,
definition,
isReadonly
});
};
}
ngAfterViewInit() {
this.attach();
}
ngOnChanges(changes) {
const isFirstChange = Object.keys(changes).every(key => changes[key].firstChange);
if (isFirstChange) {
return;
}
if (this.designer) {
const isSameDefinition = !changes['definition'] || changes['definition'].currentValue === this.designer.getDefinition();
if (isSameDefinition) {
const isReadonlyChange = changes['isReadonly'];
if (isReadonlyChange && isReadonlyChange.currentValue !== this.designer.isReadonly()) {
this.designer.setIsReadonly(isReadonlyChange.currentValue);
}
const selectedStepIdChange = changes['selectedStepId'];
if (selectedStepIdChange && selectedStepIdChange.currentValue !== this.designer.getSelectedStepId()) {
if (selectedStepIdChange.currentValue) {
this.designer.selectStepById(selectedStepIdChange.currentValue);
}
else {
this.designer.clearSelectedStep();
}
}
const isToolboxCollapsedChange = changes['isToolboxCollapsed'];
if (isToolboxCollapsedChange && isToolboxCollapsedChange.currentValue !== this.designer.isToolboxCollapsed()) {
this.designer.setIsToolboxCollapsed(isToolboxCollapsedChange.currentValue);
}
const isEditorCollapsedChange = changes['isEditorCollapsed'];
if (isEditorCollapsedChange && isEditorCollapsedChange.currentValue !== this.designer.isEditorCollapsed()) {
this.designer.setIsEditorCollapsed(isEditorCollapsedChange.currentValue);
}
// The same reference of the definition = no change.
return;
}
}
this.attach();
}
ngOnDestroy() {
if (this.lastEmbeddedView) {
this.applicationRef.detachView(this.lastEmbeddedView);
this.lastEmbeddedView.destroy();
}
}
attach() {
this.ngZone.runOutsideAngular(() => {
if (!this.placeholder) {
return;
}
if (!this.definition) {
throw new Error('Input "definition" is not set');
}
if (!this.stepsConfiguration) {
throw new Error('Input "stepsConfiguration" is not set');
}
if (this.toolboxConfiguration === undefined) {
throw new Error('Input "toolboxConfiguration" is not set');
}
if (this.controlBar === undefined) {
throw new Error('Input "controlBar" is not set');
}
if (this.designer) {
this.designer.destroy();
this.designer = undefined;
}
let customActionHandler = this.customActionHandler;
if (customActionHandler) {
const cah = customActionHandler;
customActionHandler = (action, step, sequence, context) => {
this.ngZone.run(() => cah(action, step, sequence, context));
};
}
const designer = Designer.create(this.placeholder.nativeElement, this.definition, {
theme: this.theme,
undoStackSize: this.undoStackSize,
editors: this.areEditorsHidden
? false
: {
isCollapsed: this.isEditorCollapsed,
rootEditorProvider: this.rootEditorProvider,
stepEditorProvider: this.stepEditorProvider
},
steps: this.stepsConfiguration,
validator: this.validatorConfiguration,
placeholder: this.placeholderConfiguration,
toolbox: this.toolboxConfiguration
? Object.assign({ isCollapsed: this.isToolboxCollapsed }, this.toolboxConfiguration) : false,
controlBar: this.controlBar,
contextMenu: this.contextMenu,
keyboard: this.keyboard,
preferenceStorage: this.preferenceStorage,
extensions: this.extensions,
isReadonly: this.isReadonly,
i18n: this.i18n,
uidGenerator: this.uidGenerator,
customActionHandler
});
designer.onReady.subscribe(() => {
this.ngZone.run(() => this.onReady.emit(designer));
});
designer.onDefinitionChanged.subscribe(definition => {
this.ngZone.run(() => this.onDefinitionChanged.emit(definition));
});
designer.onSelectedStepIdChanged.subscribe(stepId => {
this.ngZone.run(() => this.onSelectedStepIdChanged.emit(stepId));
});
designer.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
this.ngZone.run(() => this.onIsToolboxCollapsedChanged.emit(isCollapsed));
});
designer.onIsEditorCollapsedChanged.subscribe(isCollapsed => {
this.ngZone.run(() => this.onIsEditorCollapsedChanged.emit(isCollapsed));
});
this.designer = designer;
if (this.selectedStepId) {
this.designer.selectStepById(this.selectedStepId);
}
});
}
editorProvider(templateRef, editor) {
return this.ngZone.run(() => {
if (this.lastEmbeddedView) {
this.applicationRef.detachView(this.lastEmbeddedView);
this.lastEmbeddedView.destroy();
this.lastEmbeddedView = undefined;
}
this.lastEmbeddedView = templateRef.createEmbeddedView({
$implicit: editor
});
this.applicationRef.attachView(this.lastEmbeddedView);
const container = document.createElement('div');
container.className = 'sqd-editor-angular';
for (const node of this.lastEmbeddedView.rootNodes) {
container.appendChild(node);
}
return container;
});
}
}
DesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DesignerComponent, deps: [{ token: i0.NgZone }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component });
DesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DesignerComponent, selector: "sqd-designer", inputs: { theme: "theme", undoStackSize: "undoStackSize", definition: "definition", stepsConfiguration: "stepsConfiguration", validatorConfiguration: "validatorConfiguration", placeholderConfiguration: "placeholderConfiguration", toolboxConfiguration: "toolboxConfiguration", controlBar: "controlBar", contextMenu: "contextMenu", keyboard: "keyboard", preferenceStorage: "preferenceStorage", extensions: "extensions", i18n: "i18n", customActionHandler: "customActionHandler", isReadonly: "isReadonly", selectedStepId: "selectedStepId", uidGenerator: "uidGenerator", isToolboxCollapsed: "isToolboxCollapsed", isEditorCollapsed: "isEditorCollapsed", areEditorsHidden: "areEditorsHidden", rootEditor: "rootEditor", stepEditor: "stepEditor" }, outputs: { onReady: "onReady", onDefinitionChanged: "onDefinitionChanged", onSelectedStepIdChanged: "onSelectedStepIdChanged", onIsToolboxCollapsedChanged: "onIsToolboxCollapsedChanged", onIsEditorCollapsedChanged: "onIsEditorCollapsedChanged" }, viewQueries: [{ propertyName: "placeholder", first: true, predicate: ["placeholder"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #placeholder class=\"sqd-designer-angular\"></div>\n" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DesignerComponent, decorators: [{
type: Component,
args: [{ selector: 'sqd-designer', template: "<div #placeholder class=\"sqd-designer-angular\"></div>\n" }]
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ApplicationRef }]; }, propDecorators: { placeholder: [{
type: ViewChild,
args: ['placeholder', { static: true }]
}], theme: [{
type: Input,
args: ['theme']
}], undoStackSize: [{
type: Input,
args: ['undoStackSize']
}], definition: [{
type: Input,
args: ['definition']
}], stepsConfiguration: [{
type: Input,
args: ['stepsConfiguration']
}], validatorConfiguration: [{
type: Input,
args: ['validatorConfiguration']
}], placeholderConfiguration: [{
type: Input,
args: ['placeholderConfiguration']
}], toolboxConfiguration: [{
type: Input,
args: ['toolboxConfiguration']
}], controlBar: [{
type: Input,
args: ['controlBar']
}], contextMenu: [{
type: Input,
args: ['contextMenu']
}], keyboard: [{
type: Input,
args: ['keyboard']
}], preferenceStorage: [{
type: Input,
args: ['preferenceStorage']
}], extensions: [{
type: Input,
args: ['extensions']
}], i18n: [{
type: Input,
args: ['i18n']
}], customActionHandler: [{
type: Input,
args: ['customActionHandler']
}], isReadonly: [{
type: Input,
args: ['isReadonly']
}], selectedStepId: [{
type: Input,
args: ['selectedStepId']
}], uidGenerator: [{
type: Input,
args: ['uidGenerator']
}], isToolboxCollapsed: [{
type: Input,
args: ['isToolboxCollapsed']
}], isEditorCollapsed: [{
type: Input,
args: ['isEditorCollapsed']
}], areEditorsHidden: [{
type: Input,
args: ['areEditorsHidden']
}], rootEditor: [{
type: Input,
args: ['rootEditor']
}], stepEditor: [{
type: Input,
args: ['stepEditor']
}], onReady: [{
type: Output
}], onDefinitionChanged: [{
type: Output
}], onSelectedStepIdChanged: [{
type: Output
}], onIsToolboxCollapsedChanged: [{
type: Output
}], onIsEditorCollapsedChanged: [{
type: Output
}] } });
class SequentialWorkflowDesignerModule {
}
SequentialWorkflowDesignerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SequentialWorkflowDesignerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
SequentialWorkflowDesignerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SequentialWorkflowDesignerModule, declarations: [DesignerComponent], imports: [CommonModule], exports: [DesignerComponent] });
SequentialWorkflowDesignerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SequentialWorkflowDesignerModule, imports: [[CommonModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SequentialWorkflowDesignerModule, decorators: [{
type: NgModule,
args: [{
declarations: [DesignerComponent],
imports: [CommonModule],
exports: [DesignerComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DesignerComponent, SequentialWorkflowDesignerModule };
//# sourceMappingURL=sequential-workflow-designer-angular.mjs.map