Extending the canvas background

Developers General
1

Hello,

I want to add a pattern or lines grid to the SVG canvas background, how can I achieve that.
I’ve already seen the examples. but i didn’t find something similar.
I think it has to be done in a custom rendered module ?

any help please !!

Regards.

2

This is easily possible and not related to our toolkit. A simple Google search leads to https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns.

3

Sorry i’m new to BPMN-js, i want to extend the modeler behavior.
I know about the SVG patterns :sweat_smile:.
I want to know how to implement it, because the SVG get generated automatically. I didn’t find a way to make it directly to svg tag. I read in the examples about customized rendering, so i think this is the way to make customization to rendering behavior including the main SVG canvas. But i don’t know how.

Can you provide some hints or steps, please.

4

You can add new layers to the SVG easily:

const canvas = modeler.get('canvas');

const myZIndex = -1;

// create a <g> element in the SVG
const myLayer = canvas.getLayer('my-layer', myZIndex);
5

Thank you so much,

Is there other methods to manipulate SVG, getLayer create a <g> element, What about <defs> and <pattern> elements ?

1 Like
6

We don’t have specific functionality for that. Here’s an example of how we work with the <defs> element in BpmnRenderer: https://github.com/bpmn-io/bpmn-js/blob/master/lib/draw/BpmnRenderer.js#L113

You can do it the same way.

7

Thank you, I’ve used tiny-svg and min-dom to create and manipulate some SVG dom elements.
This is my code

modeler.importXML(diagram, function(err) {
    if (err) {
        console.error('could not import BPMN 2.0 diagram', err);
    }

    const canvas = modeler.get('canvas');
    console.log(canvas._svg);

    // Path tag
    let path = svgCreate('path');

    // Path attributes
    svgAttr(path, {
        d: 'M 100 0 L 0 0 0 100',
        fill: 'none',
        stroke: 'gray',
        strokeWidth: '1'
    })

    // Pattern tag
    let pattern = svgCreate('pattern');

    // Pattern attributes
    svgAttr(pattern, {
        id: 'grid',
        width: '100',
        height: '100',
        patternUnits: 'userSpaceOnUse'
    });

    // Append path to pattern
    svgAppend(pattern, path);

    // Get defs tag from SVG container
    let defs = domQuery('defs', canvas._svg);

    // Append pattern to defs
    svgAppend(defs, pattern);
    
    // Rect tag
    var rect = svgCreate('rect');

    // Rect attributes
    svgAttr(rect, {
        width: '100%',
        height: '100%',
        fill: 'url(#grid)'
    })
    
    // Get g tag from SVG container
    let g = domQuery('g', canvas._svg);
    svgPrepend(g, rect);

});
1 Like