dia.link and dia.element

[CodeSippr]

Hello everyone, I'm facing an issue with JointJS. I have an element called UMLClass, which consists of three rectangles (Name, Methods, and Attributes). When I try to connect this element with a link, it always attaches in the middle of the element. However, all my other elements attach at the optimal position on the outside based on their position. Does anyone have any suggestions on how to fix this? Thank you in advance.

[kumilingus]

This is the default behavior of the Boundary connection point. The connection point function tries to find the geometry of the magnet first. If the magnet is a <g/>, it looks inside for any graphics element such as <rect/>, `. In case of UML Class, there are 3 rectangles and the connection point picks the first one.

You can use a custom connection point that defines different selector for different elements (as we do in the Kitchen Sink application).

defaultConnectionPoint: function(endPathSegmentLine, endView, endMagnet) {
  return joint.connectionPoints.boundary.call(this, endPathSegmentLine, endView, endMagnet, {
     selector: endView.model.get('type') === 'uml.Class' ? 'root' : 'body'
   });
}

See example.

---

There is an unofficial way to disable the smart geometry lookup.

defaultConnectionPoint: { name: 'boundary', args: { selector: [] }}

Using this along with magnetSelector attributes seem to be the most elegant way. See modified example

We'll add an official way to disable it soon. Since we introduced magnetSelector this feature become effectively deprecated.

[CodeSippr]

Thank you so much. Unfortunately, neither of the solutions work for me. I am quite at a loss. Currently, I am still using version 3.5.5, could that be the reason? Here is an excerpt of my UML Class, maybe it can help you better assist me :)

export class KEAUMLClass extends dia.Element {

    defaults() {
        return util.defaultsDeep(
            {
                type: 'uml.Class',
                size: {
                    width: 200,
                    height: 160,
                },
                attrs: {
                    uml_class_name_rect: {
                        width: 'calc(w)',
                        height: 40,
                        strokeWidth: 2,
                        stroke: '#000000',
                        fill: '#ededed',
                    },
                    uml_class_attrs_rect: {
                        width: 'calc(w)',
                        refY: 40,
                        height: 60,
                        strokeWidth: 2,
                        stroke: '#000000',
                        fill: '#ededed',
                    },
                    uml_class_operations_rect: {
                        width: 'calc(w)',
                        refY: 100,
                        height: 60,
                        strokeWidth: 2,
                        stroke: '#000000',
                        fill: '#ededed',
                    },
                },
            },
            super.defaults
        );
    }
}

[kumilingus]

No, v3.5.5 is ok.

Could you update the example with your class?

[CodeSippr]

I finally managed to do it myself. The error was in my inheritance hierarchy. Thank you.