Showing diagram in AlfDialog


#1

Hi all,

I have tried to show XML in an Aikau AlfDialog. The problem when I try to open a dialog 2 times in a row.
First it shows the diagram, but on the second try I log a error: Cannot assign to read only property ‘remove’ of [object Object],[object Object],[object Object],[object Object]

Error occurs on dialog.show().

var dialogConfig = {
    id: "show-workflow-diagram",
    title: payload.workflowDescription,
    // handleOverflow: false,
    // fixedWidth: false,
    // noMinWidth: true,
    // contentWidth: width,
    // contentHeight: height,
    fullScreenMode: true
};

var dialog = new AlfDialog(dialogConfig);

var BpmnViewer = bpmn;
var viewer = new BpmnViewer({container: dialog.bodyNode});

viewer.importXML(xml, function (error) {
    if(error) {
    }else {
       var canvas = viewer.get("canvas");
       canvas.zoom("fit-viewport");

       dialog.show();
    }
});

dialog.connect(dialog, "hide", function () {
    viewer.detach();
    dijit.byId(dialog.id).destroyRecursive(false);
});

#2

From your code snippet, it does not look like this is related to the usage of bpmn-js.

Try to use the break on error functionality in your browser’s developer tools (open via F12) to get a deeper understanding of what causes the issue and to fix it.


#3

I have managed to fix this. Issue was that something was not clean or properly initialized so when I bind to import.done it worked. Here is the code fo future reference.

var dialogConfig = {
	id: "show-workflow-diagram",
	title: config.data.workflowDescription,
	fullScreenMode: true
};

var dialog = new AlfDialog(dialogConfig);

dialog.connect(dialog, "hide", function () {
	viewer.detach();
	dialog.destroy(false);
});

var viewer = new bpmn({container: dialog.bodyNode});

var eventBus = viewer.get("eventBus");

eventBus.on("import.done", function (event) {
	dialog.show();
});

viewer.importXML(xml, function (error) {
	if (error) {
		console.log(error);
	}
});