Resize custom elements

Developers
1

Hello,
I want to put my custom Item on the top of the blue border. My code looks like this

function getCustomElement(shape, source) {
return {
x: 0,
y: 0,
width: shape.width,
height: shape.height,
href: source.dataURL
}
}

The element looks like this:
size

Should look like this:
size2

Thanks.

2

I feel like both of these don’t look right. Wouldn’t you want the outline to have the width and height of the element?

3

How can I add the custom width to the outline?

4

The issue is that the outline doesn’t correspond with the dimensions of the rendered shape. Why that is, I can’t tell you unless you share your implementation.

5

My Code:
drawElement.js

import {
	append as svgAppend,
	create as svgCreate
} from 'tiny-svg';

const svgHTMLTag = "image";
export function drawCustomElement(parentNode, shape, source) {
	const customElement = svgCreate(
		svgHTMLTag,
		getCustomElement(shape, source)
	);

	// append to parent
	svgAppend(parentNode, customElement);
	return customElement;
}

function getCustomElement(shape, source) {
	return {
		x: 0,
		y: 0,
		width: shape.width,
		height: shape.height,
		href: source.dataURL
	}
}

which is called in CustomRenderer.js

drawShape(parentNode, element) {

       ...

                const svg = drawCustomElement(parentNode, element, svgPath);
                prependTo(svg, parentNode);

                this.renderEmbeddedLabel(
                    parentNode,
                    element,
                    ALIGN_CENTER_MIDDLE,
                    getLabelColor(element, this.defaultLabelColor, this.defaultStrokeColor)
                );
                return svg;
  ...
        return this.bpmnRenderer.drawShape(parentNode, element);
    }
6

Hi @newUser

are you able to solve your problem? I have the same problem and do not find a solution.
see here: Change size of custom control - #3 by symas
perhaps @philippfromme can help me there?