Can the diagram properties be changed on runtime

Diagram
#1

I hope the same diagram work in several mode, say, edit mode vs. readonly mode.
In edit mode, controls in the editbar are writable, while in readonly mode, controls are disabled.
These configures could be set in the editor=new dhx.DiagramEditor(…,{view:…}) stage.
How can the view property be changed on runtime. Like:

const view1 = {...};
const view2 = {...};
if(some cond)editor.config.view = view1;
else editor.config.view = view2;

Thx

#2

Hello @jyginger,

Just as clarification, as I understand, you want to dynamically make editbar of diagram_editor read-only or editable, am I right?

The most expected approach for similar cases is to use diagram + diagramEditor so you will be able to switch between readonly(diagram) and editable(diagram editor) modes:
https://snippet.dhtmlx.com/9ahg7ct4

Currently, it’s possible to make controls of editbar dynamic(based on user conditions), as described by the following link:

Here is an example(CTO contols will be editable, chairman’s - readonly):
https://snippet.dhtmlx.com/xikrwlit

If your requirement is to make editbar readonly on the fly (based on some control click), you may use such workaround, by manual disabling editbar on each shape select(you also can extend it with condition):

editor.diagram.events.on("afterSelect", ({ id }) => {
// may be used with some condition if(true)...
    editor.view._editbar._form.disable();
});

Here is an example :
https://snippet.dhtmlx.com/ozactezo

I also sent request to the dev team, and they will consider adding specific method to make editbar readonly/editable.

Kind regards,

#3

Thanks for your quick reply.
Not exactly the writable and readonly.
Actually in my scenario I hope the editorbar vary depending upon different selected item instead of selected shape.
For example, one rectangle could have stroke and font properties, while another rectangle requires an extra radiogroup, no stroke and disabled font.

#4

Hello @jyginger,

Thanks for your quick reply.
Not exactly the writable and readonly.
Actually in my scenario I hope the editorbar vary depending upon different selected item instead of selected shape.
For example, one rectangle could have stroke and font properties, while another rectangle requires an extra radiogroup, no stroke and disabled font.

Thank you for the clarification. It seems that the best approach for your case, will be to conditional set up controls from properties, as described by the following link:

So you can define different controls(or same controls with different configs) based on your conditions, like in the demo below:
https://snippet.dhtmlx.com/fz1tul8r

(only Chairman & CEO shape will have editable input)

Kind regards,

#5

Thanks Siarhei, the solution works perfectly.

I didn’t realize the item could be accessed here.

$shape: ({ item, editor }) => {...},

It is better if this and kind of things could be added to the docs. Thanks