@optimajet/workflow-designer-angular
Version:
Angular Designer for Workflow Engine
297 lines (290 loc) • 11.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, HostListener, Input, Component, NgModule } from '@angular/core';
import jQuery from 'jquery';
import moment from 'moment';
import WorkflowDesigner from '@optimajet/workflow-designer/no-css-esm';
class WorkflowDesignerService {
constructor() { }
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WorkflowDesignerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WorkflowDesignerService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WorkflowDesignerService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
// @ts-ignore
window.$ = window.jQuery = jQuery;
// @ts-ignore
window.moment = moment;
class WorkflowDesignerComponent {
_ngZone;
window;
differs;
// Class members which could be assigned from outside
schemeCode = '';
processId = '';
designerFolder = '';
designerConfig = {
renderTo: 'workflow-designer', //default id value
uploadFormId: 'workflow-uploadform', //default id value
uploadFileId: 'workflow-uploadfile' //default id value
};
// Public class members
data = undefined;
innerDesigner = null;
// Private class members
uploadCallback = null;
uploadType = "scheme";
resizeTimer = undefined;
configDiffer;
constructor(_ngZone, window, differs) {
this._ngZone = _ngZone;
this.window = window;
this.differs = differs;
this.configDiffer = this.differs.find(this.designerConfig).create();
}
ngDoCheck() {
if (this.configDiffer.diff(this.designerConfig)) {
this.redrawDesigner();
}
}
// ------------- Methods for using from other components ------------- //
/**
* Clears the designer, equivalent of creating empty scheme design
*/
clearScheme() {
this.innerDesigner.create();
}
/**
* Get Workflow Designer Errors
*
* @returns Errors in Workflow Designer
*/
getDesignerErrors() {
return this.innerDesigner.validate();
}
/**
* Save Workflow scheme
*
* @param {function} successCallback Function which will be executed if save was successful
* @param {function} errorCallback Function which will be executed if save operation failed
*/
save(successCallback, errorCallback) {
this.innerDesigner.schemecode = this.schemeCode;
const error = this.getDesignerErrors();
if (error != undefined && error.length > 0) {
errorCallback(error);
}
else {
this.innerDesigner.save(successCallback);
}
}
/**
* Download XML file which contain Workflow Scheme description
*/
downloadScheme() {
this.innerDesigner.downloadscheme({
name: this.schemeCode
});
}
/**
* Upload BPMN or XML file
*
* @param uploadType {string} Upload type, can be 'scheme' or 'bpmn'
* @param {function} callback Function that will be executed after uploading file
*/
upload(uploadType, callback) {
this.uploadCallback = callback;
this.uploadType = uploadType;
this.triggerUploadEvent();
}
/**
* Check for scheme existence by the scheme code from props
*
* @returns {boolean} If scheme exists true, otherwise, false
*/
isSchemeExist() {
const data = {
schemecode: this.schemeCode,
processid: undefined
};
return this.innerDesigner.exists(data);
}
/**
* Check for process existence by scheme code
* and process id given in props
*
* @returns {boolean} If process exists true, otherwise, false
*/
isProcessExist() {
const data = {
schemecode: this.schemeCode,
processid: this.processId,
};
return this.innerDesigner.exists(data);
}
/**
* Refresh data in WorkflowDesigner
*/
refresh() {
this.innerDesigner.refresh();
}
// ------------- End of methods for using from other components ------------- //
ngAfterViewInit() {
this.redrawDesigner();
}
uploadChange() {
const form = document.getElementById(this.designerConfig.uploadFormId);
if (this.uploadType === "bpmn") {
this.innerDesigner.uploadbpmn(form, this.uploadCallback);
}
else {
this.innerDesigner.uploadscheme(form, this.uploadCallback);
}
}
triggerUploadEvent() {
const file = document.getElementById(this.designerConfig.uploadFileId);
if (file) {
file.click();
}
}
graphSize() {
const { widthDiff, heightDiff } = this.designerConfig;
return {
width: window.innerWidth - (widthDiff ?? 0),
height: window.innerHeight - (heightDiff ?? 0)
};
}
resizeDesigner() {
if (this.resizeTimer) {
clearTimeout(this.resizeTimer);
this.resizeTimer = undefined;
}
this.resizeTimer = setTimeout(() => {
const { width, height } = this.graphSize();
this.innerDesigner.resize(width, height);
}, 150);
}
redrawDesigner() {
const designerDiv = document.getElementById(this.designerConfig.renderTo);
if (this.schemeCode === '' && this.processId === '') {
return;
}
if (!designerDiv) {
return;
}
const designerConfig = {
...this.designerConfig,
renderTo: this.designerConfig.renderTo,
graphwidth: this.graphSize().width,
graphheight: this.graphSize().height
};
this._ngZone.runOutsideAngular(() => {
if (this.innerDesigner) {
this.processExistingDesigner(designerConfig);
}
else {
this.createNewDesigner(designerConfig);
}
});
}
processExistingDesigner(config) {
const data = this.innerDesigner?.data;
const schemecode = this.innerDesigner?.schemecode;
this.innerDesigner?.destroy();
this.innerDesigner = this.getWorkflowDesigner(config);
this.innerDesigner.schemecode = schemecode;
if (!data) {
this.loadScheme();
}
else {
this.innerDesigner.data = data;
this.innerDesigner.render();
}
}
createNewDesigner(config) {
this.innerDesigner = this.getWorkflowDesigner(config);
this.loadScheme();
}
getWorkflowDesigner(config) {
return new WorkflowDesigner(config);
}
loadScheme() {
let data = {
schemecode: this.schemeCode,
processid: this.processId,
readonly: this.processId != undefined && this.processId != ""
};
const callback = () => {
this.data = this.innerDesigner.data;
};
const loadData = new Promise((resolve, reject) => {
if (this.innerDesigner.exists(data)) {
this.innerDesigner.load(data, resolve);
}
else {
this.innerDesigner.create(this.schemeCode);
}
});
loadData.then(callback);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WorkflowDesignerComponent, deps: [{ token: i0.NgZone }, { token: Window }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: WorkflowDesignerComponent, isStandalone: false, selector: "workflow-designer", inputs: { schemeCode: "schemeCode", processId: "processId", designerFolder: "designerFolder", designerConfig: "designerConfig" }, host: { listeners: { "window:resize": "resizeDesigner()" } }, ngImport: i0, template: `
<div id="{{this.designerConfig.renderTo}}"></div>
<form action="" id="{{this.designerConfig.uploadFormId}}" method="post" style="display: none;" encType="multipart/form-data">
<input type="file" name="{{this.designerConfig.uploadFileId}}" id="{{this.designerConfig.uploadFileId}}" (change)="uploadChange()"/>
</form>
`, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WorkflowDesignerComponent, decorators: [{
type: Component,
args: [{ selector: 'workflow-designer', template: `
<div id="{{this.designerConfig.renderTo}}"></div>
<form action="" id="{{this.designerConfig.uploadFormId}}" method="post" style="display: none;" encType="multipart/form-data">
<input type="file" name="{{this.designerConfig.uploadFileId}}" id="{{this.designerConfig.uploadFileId}}" (change)="uploadChange()"/>
</form>
`, standalone: false }]
}], ctorParameters: () => [{ type: i0.NgZone }, { type: Window }, { type: i0.KeyValueDiffers }], propDecorators: { schemeCode: [{
type: Input
}], processId: [{
type: Input
}], designerFolder: [{
type: Input
}], designerConfig: [{
type: Input
}], resizeDesigner: [{
type: HostListener,
args: ['window:resize']
}] } });
class WorkflowDesignerModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WorkflowDesignerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: WorkflowDesignerModule, declarations: [WorkflowDesignerComponent], exports: [WorkflowDesignerComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WorkflowDesignerModule, providers: [
{ provide: Window, useValue: window }
] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WorkflowDesignerModule, decorators: [{
type: NgModule,
args: [{
providers: [
{ provide: Window, useValue: window }
],
declarations: [
WorkflowDesignerComponent
],
imports: [],
exports: [
WorkflowDesignerComponent
]
}]
}] });
/*
* Public API Surface of workflow-designer-angular
*/
/**
* Generated bundle index. Do not edit.
*/
export { WorkflowDesignerComponent, WorkflowDesignerModule, WorkflowDesignerService };
//# sourceMappingURL=optimajet-workflow-designer-angular.mjs.map