`linkView.model.getMarkerWidth is not a function` while using link in jointjs KitchenSink example

This issue has been tracked since 2022-06-09.

Dear developers, thanks for the great tool. I applied for testing enterprise license and I face an issue of connecting 2 rectangles with the link. I opened apps/KitchenSink/Js/index.html and tried to replicate code from tutorial.
nothing special just creating 2 nodes and connecting them. Nevertheless, I got this error linkView.model.getMarkerWidth is not a function

 joint.setTheme('modern');
    app = new App.MainView({el: '#app'});
    themePicker = new App.ThemePicker({mainView: app});
    themePicker.render().$el.appendTo(document.body);
    window.addEventListener('load', function () {
        var rect = new joint.shapes.standard.Rectangle();
        rect.position(100, 30);
        rect.resize(100, 40);
        rect.attr({
            body: {
                fill: 'blue'
            },
            label: {
                text: 'Hello',
                fill: 'white'
            }
        });
        rect.addTo(app.graph);

        var rect2 = rect.clone();
        rect2.translate(300, 0);
        rect2.attr('label/text', 'World!');
        rect2.addTo(app.graph);

        var link = new joint.shapes.standard.Link();
        link.source(rect);
        link.target(rect2);
        link.addTo(app.graph);

    });

thanks!

kumilingus wrote this answer on 2022-07-04

The Kitchen Sink application assumes that every link is a app.Link (defined in joint.shapes.app.js). You added the standard.Link which is missing KitchenSink specific methods and that threw an exception.

  1. You can override the static method connectionPoint of app.Link so it calls getMarkerWidth only when available.
connectionPoint: function(line, view, magnet, _, type, linkView) {
    var opt = { stroke: true }
    if (linkView.model.get('type') === 'app.Link') {
        var markerWidth = linkView.model.getMarkerWidth(type);
        opt.offset = markerWidth / 2;
    }
    // connection point for UML shapes lies on the root group containing all the shapes components
    var modelType = view.model.get('type');
    if (modelType.indexOf('uml') === 0) opt.selector = 'root';
    // taking the border stroke-width into account
    if (modelType === 'standard.InscribedImage') opt.selector = 'border';
    return joint.connectionPoints.boundary.call(this, line, view, magnet, opt, type, linkView);
}
  1. Use built-in boundary for the connection point paper option in main.js.
// Remove this
// defaultConnectionPoint: joint.shapes.app.Link.connectionPoint,

// Replace with this
defaultConnectionPoint: { name: 'boundary' }  
OlegZharkov wrote this answer on 2022-07-04

Thanks a lot for a quick response @kumilingus! Overriding function seems to fix the issue

More Details About Repo
Owner Name clientIO
Repo Name joint
Full Name clientIO/joint
Language JavaScript
Created Date 2009-09-11
Updated Date 2022-12-03
Star Count 3715
Watcher Count 155
Fork Count 817
Issue Count 51

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date