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;
}