Change size of custom control

[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