feat(javascript) add a read only mode

[tbo47]

add a read only mode

I don't know how to use svg-shape-texteditor-decorator.js as I am not using it

you can close this PR if it doesn't make sense

[AlexeyBoiko]

Hello.
If you don't need text editor and delete button -> don't use SvgShapeTextEditorDecorator.
Create diagram without shape decorators:

const diagram = svgDiagramCreate(document.getElementById('diagram'));

If you do not need text editor but need delete button: create your own DeleteButtonDecorator, and use it like this:

const diagram = svgDiagramCreate(
	svg,
	// ShapeDecoratorFuctory
	function(shape, param) {
		// the way to add custom logic inside shapes - decorators
		return new DeleteButtonDecorator(shape, param.createParams.props)
			.on('del', del);
	});

You can add different functionality fo different shapes:

const diagram = svgDiagramCreate(
	svg,
	function(shape, param) {

		switch(param.createParams.templateKey) {
			case 'circle':
				return new CircleDecorator(...);
			case 'oval':
				return new OvalDecorator(...);
		}
		...
	});

You can mix functionality:

const diagram = svgDiagramCreate(
	svg,
	function(shape, param) {
		return new Decorator2(
			new Decorator1(shape)
		);
	});

CLose PR if the solution suits you.

[tbo47]

Thanks for your answer. Yes, I don't use SvgShapeTextEditorDecorator. I just need a mode where I can drag and drop shapes and a mode where I can not.

[AlexeyBoiko]

I just need a mode where I can drag and drop shapes and a mode where I can not.

If you want to disable shape:

shape.update({ state: shape.stateGet().add('disabled') });

You can use CSS, to disable all shapes:

[data-templ] {
	pointer-events: none;
}