@optimajet/workflow-designer-react
Version:
React Designer for Workflow Engine
199 lines (198 loc) • 6.68 kB
JavaScript
import { jsxs as d, Fragment as h, jsx as n } from "react/jsx-runtime";
import a from "react";
import g from "fast-deep-equal";
import r from "@optimajet/workflow-designer";
class D extends a.Component {
designerDivId;
uploadFormId;
uploadFileId;
innerDesigner;
uploadCallback;
uploadType;
data;
resizeTimer;
constructor(e) {
super(e), this.designerDivId = e.designerConfig.renderTo ?? "workflow-designer", this.uploadFormId = e.designerConfig.uploadFormId ?? "workflow-uploadform", this.uploadFileId = e.designerConfig.uploadFileId ?? "workflow-uploadfile", this.innerDesigner = void 0, this.uploadCallback = null, this.uploadType = null, this.data = null, this.resizeTimer = void 0;
}
// ------------------------------- Methods to use from external classes ---------------------------------------
/**
* 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(e, i) {
if (!this.innerDesigner) return;
this.innerDesigner.schemecode = this.props.schemeCode;
const s = this.getDesignerErrors();
s != null && s.length > 0 ? i(s) : this.innerDesigner?.save(e);
}
/**
* Download XML file which contain Workflow Scheme description
*/
downloadScheme() {
this.innerDesigner?.downloadscheme({
name: this.props.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(e, i) {
this.uploadCallback = i, this.uploadType = e, this.triggerUploadEvent();
}
/**
* Check for scheme existence by the scheme code from props
*
* @returns {boolean} If scheme exists true, otherwise, false
*/
isSchemeExist() {
const e = {
schemecode: this.props.schemeCode,
processid: void 0,
tenantId: this.getTenantId()
};
return this.innerDesigner?.exists(e);
}
/**
* Check for process existence by scheme code
* and process id given in props
*
* @returns {boolean} If process exists true, otherwise, false
*/
isProcessExist() {
const e = {
schemecode: this.props.schemeCode,
processid: this.props.processId,
tenantId: this.getTenantId()
};
return this.innerDesigner?.exists(e);
}
/**
* Refresh data in WorkflowDesigner
*/
refresh() {
this.innerDesigner?.refresh();
}
// ------------------------------- End of methods to use from external classes -----------------------------------
getTenantId() {
return this.props.designerConfig.tenantId;
}
normalizeTenantId(e) {
return e ?? void 0;
}
getLoadedTenantId(e) {
return this.normalizeTenantId(e?.__loadParams?.tenantId);
}
shouldReloadScheme(e) {
return this.getLoadedTenantId(e) !== this.normalizeTenantId(this.getTenantId());
}
isSchemeOrProcessExist(e) {
return this.innerDesigner?.exists(e);
}
uploadChange() {
const e = document.getElementById(this.uploadFormId);
e && (this.uploadType === "bpmn" ? this.innerDesigner?.uploadbpmn(e, this.uploadCallback) : this.innerDesigner?.uploadscheme(e, this.uploadCallback));
}
triggerUploadEvent() {
document.getElementById(this.uploadFileId)?.click();
}
loadScheme() {
let e = {
schemecode: this.props.schemeCode,
processid: this.props.processId,
readonly: !!this.props.readOnly,
tenantId: this.getTenantId()
};
const i = () => {
this.data = this.innerDesigner?.data, this.props.onLoadDesigner && this.props.onLoadDesigner();
};
new Promise((t, o) => {
this.isSchemeOrProcessExist(e) ? this.innerDesigner?.load(e, t, o) : this.innerDesigner?.create(this.props.schemeCode);
}).then(i).catch(this.props.loadError);
}
graphSize() {
const { widthDiff: e, heightDiff: i } = this.props.designerConfig;
return {
width: window.innerWidth - (e ?? 0),
height: window.innerHeight - (i ?? 0)
};
}
redrawDesigner() {
if (this.props.schemeCode === void 0 && this.props.processId === void 0 || !document.getElementById(this.designerDivId))
return;
const e = {
...this.props.designerConfig,
renderTo: this.designerDivId,
graphwidth: this.graphSize().width,
graphheight: this.graphSize().height
};
this.innerDesigner ? this.processExistingDesigner(e) : this.createNewDesigner(e);
}
processExistingDesigner(e) {
const i = this.innerDesigner?.data, s = this.innerDesigner?.schemecode;
this.innerDesigner?.destroy(), this.innerDesigner = new r(e), this.innerDesigner && (this.innerDesigner.schemecode = s, i ? this.shouldReloadScheme(i) ? this.loadScheme() : (this.innerDesigner.data = i, this.innerDesigner.render()) : this.innerDesigner.render());
}
createNewDesigner(e) {
this.innerDesigner = new r(e), this.loadScheme();
}
resizeDesigner() {
this.resizeTimer && (clearTimeout(this.resizeTimer), this.resizeTimer = void 0), this.resizeTimer = setTimeout(() => {
const { width: e, height: i } = this.graphSize();
this.innerDesigner?.resize(e, i);
}, 150);
}
render() {
return /* @__PURE__ */ d(h, { children: [
/* @__PURE__ */ n("div", { id: this.designerDivId }),
/* @__PURE__ */ n(
"form",
{
action: "",
id: this.uploadFormId,
method: "post",
style: { display: "none" },
encType: "multipart/form-data",
children: /* @__PURE__ */ n(
"input",
{
type: "file",
name: this.uploadFileId,
id: this.uploadFileId,
onChange: this.uploadChange.bind(this)
}
)
}
)
] });
}
componentDidMount() {
window.addEventListener("resize", this.resizeDesigner.bind(this)), this.redrawDesigner(), this.resizeDesigner();
}
componentDidUpdate(e) {
g(e.designerConfig, this.props.designerConfig) || this.redrawDesigner();
}
componentWillUnmount() {
this.innerDesigner !== void 0 && (this.innerDesigner.destroy(), this.innerDesigner = void 0), window.removeEventListener("resize", this.resizeDesigner.bind(this));
}
}
export {
D as default
};