Ports Detaching from Diagram Elements After Resizing Width or Height

[AvanArgs]

Introduction

I'm encountering issue when adding image element with ports. Ports are working well but if you check gap between image and resize handler or border after resizing element.

Problem is when we resize element then ports need to stick with image only

Needs like here

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[MartinKanera]

When a port group uses the default positioning algorithms, JointJS places the ports relative to the element’s bounding box - i.e., the rectangle defined by the element’s size attribute.

How exactly does your shape definition look like? Are you certain you need to be using an image? This shape could be declared as an SVG path using JointJS, which could potentially save you some work.

If you are setting the width and height like this:

attrs: {
        // ...
        image: {
            width: 'calc(w)', // this takes up all the available width
            height: 'calc(h)', // this take up all the available height
        },
       // ...
}

The problem arises when you resize the element and the width changes; the image will be preserving the aspect ratio in order not to distort the image. One way to handle this would be to add preserveAspectRatio='none', which will do exactly as the name suggests, ignoring the original image ratio and stretching it.

attrs: {
        // ...
        image: {
            width: 'calc(w)', // this takes up all the available width
            height: 'calc(h)', // this take up all the available height
            preserveAspectRatio: 'none',
        },
       // ...
}

For a simpler shape such as this one, I would instead recommend converting it to an SVG path which will behave more predictably, like so:

const TrapezoidShape = joint.dia.Element.define('app.Trapezoid', {
    attrs: {
        body: {
            d: 'M 0 0 L calc(w) calc(h/3) L calc(w) calc(2 * h/3) L 0 calc(h) Z',
            stroke: '#333333',
            fill: '#FFFFFF'
        },
    }
}, {
    markup: [{
        tagName: 'path',
        selector: 'body'
    }]
});

[AvanArgs]

As checked with given solution with preserveAspectRatio: 'none', its working as expected