Change size of custom control

[symas]

I have created some custom controls.
Now, I want to adjust the size of the controls in the palette and in the diagram.
I the palette I want to add some margin around the control like the standard ones and in the diagram I want to draw it with smaller height and width - with the same proportion like the standard ones (for example the gateway)

Here is an illustration:

Thanks for your help.

Best Regards, Thomas

[Martin]

Hi @symas ,

how does you implementation look like? Without it, it’s hard to determine what changes are required. I can share the default sizes with you, maybe this already helps:

Default gateways have a size of 50x50px, which you can use in your custom renderer to draw the shapes in the correct size.

Entries in the Palette are 30x30, which can be achieved with css.

Hope this helps

[symas]

Hi @Martin

Thanks for your reply. I will try to describe my implementation:

I have created a PaletteProvider like this:

    export default class PaletteProvider {
        constructor(palette, create, elementFactory,
                    translate) {
            this.palette = palette;
            this.create = create;
            this.elementFactory = elementFactory;

            this.translate = translate;

            palette.registerProvider(this);
        }

        getPaletteEntries(element) {
            const {
                create, elementFactory, translate
            } = this;

            function createRegularBPMNAction(type, group, title, classname) {

                function createListener(event) {
                    var shape = elementFactory.createShape( { type: type });

                    create.start(event, shape);
                }

                return {
                    group: group,
                    className: classname,
                    title: title,
                    action: {
                        dragstart: createListener,
                        click: createListener
                    }
                };
            }

            return {
                'create-resource': createRegularBPMNAction(
                    'regularBPMN:Resource', 'regularBPMN', translate('Create Resource'), 'regularBPMN-resource-icon'
                ),
                'create-entity': createRegularBPMNAction(
                    'regularBPMN:Entity', 'regularBPMN', translate('Create Entity'), 'regularBPMN-entity-icon'
                )
            }
        }
    }

    PaletteProvider.$inject = [
        'palette',
        'create',
        'elementFactory',
        'translate'
    ];

and a ContextPadProvider:

export default class RegularBPMNContextPadProvider {
    constructor(config, contextPad, create, elementFactory, injector, translate) {
        this.create = create;
        this.elementFactory = elementFactory;
        this.translate = translate;

        if (config.autoPlace !== false) {
            this.autoPlace = injector.get('autoPlace', false);
        }

        contextPad.registerProvider(this);
    }

    getContextPadEntries(element) {
        const {
            autoPlace,
            create,
            elementFactory,
            translate
        } = this;


        function createRegularBPMNAction(type, group, title, classname) {

            function createDragListener(event) {
                var shape = elementFactory.createShape( { type: type });

                create.start(event, shape);
            }

            function createListener(event, element) {
                if(autoPlace) {
                    const shape = elementFactory.createShape({type: type});

                    autoPlace.append(element, shape);
                } else {
                    createDragListener(event);
                }
            }

            return {
                group: group,
                className: classname,
                title: title,
                action: {
                    dragstart: createListener,
                    click: createListener
                }
            };
        }


        return {
            'append.regularBPMN-Resource': createRegularBPMNAction('regularBPMN:Resource', 'regularBPMN', translate('Append Resource'), 'regularBPMN-resource-icon'),
            'append.regularBPMN-Entity': createRegularBPMNAction('regularBPMN:Entity', 'regularBPMN', translate('Append Entity'), 'regularBPMN-entity-icon')
        };
    }
}

RegularBPMNContextPadProvider.$inject = [
    'config',
    'contextPad',
    'create',
    'elementFactory',
    'injector',
    'translate'
];

Here are my css:

.regularBPMN-entity-icon {
    background-image: url("data:image/svg+xml;base64,...");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 30px;
    height: 30px; 
}

.regularBPMN-resource-icon {
    background-image: url("data:image/svg+xml;base64,...");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 30px;
    height: 30px; 
}

and this is my renderer:

export default function RegularBPMNRenderer(eventBus) {
    BaseRenderer.call(this, eventBus, 1500);

    this.canRender = function(element) {
        return is(element, 'regularBPMN:Entity') || is(element, 'regularBPMN:Resource');
    };
    this.drawShape = function(parent, shape) {
        let url = '';
        if(is(shape, "regularBPMN:Resource")){
            url = Resource.dataURL;
        } else if(is(shape, "regularBPMN:Entity")){
            url = Entity.dataURL;
        }
        var entityGfx = svgCreate('image', {
            x: 0,
                y: 0,
                width: 50, //shape.width,
                height: 50, //shape.height,
                href: url
        });
        svgAppend(parent, entityGfx);
        return entityGfx;
    };
}
inherits(RegularBPMNRenderer, BaseRenderer);
RegularBPMNRenderer.$inject = [ 'eventBus' ];

I have set the size in the renderer to 50x50. The element will now be rendered in the correct size, but when I select the Element the selection-border with the blue dots is still big. How can I change this?

For the palette, I have added the size to the css - but it does not change.
Then I have seen, that the element will only be a greyed squre in the contextpad at mouse over. Did you have an idea, how I can solve this?

Thanks for your help.

Best Regards
THomas