Problem rendering a custom marker-source link

[Riitta Hietaranta]

Hello,

I have created a couple of custom links with specialized marker-source or marker-target definitions. Here is an example of my links:

joint.shapes.gems.Input = joint.dia.Link.extend({

        defaults: _.defaultsDeep({

            type: 'app.InputLink',

            router: {

                name: 'manhattan'

            },

            connector: {

                name: 'jumpover'

            },

            attrs: {

                '.tool-options': {

                    'data-tooltip-class-name': 'small',

                    'data-tooltip': 'Click to open Inspector for this link',

                    'data-tooltip-position': 'left'

                },

                '.marker-source': {

                    d: "M 16 0 L 8 8 L 16 16 L 24 8 Z",

                    stroke: '#222138',

                    fill: '#222138',

                    transform: 'scale(1)'

                },

                '.marker-target': {

                    d: 'M 10 0 L 0 5 L 10 10 z',

                    stroke: 'transparent',

                    fill: '#222138',

                    transform: 'scale(1)'

                },

                '.connection': {

                    stroke: '#222138',

                    'stroke-dasharray': '0',

                    'stroke-width': 1

                },

                labels: [

                    {

                        position: 0.5,

                        attrs: {

                            text: {

                                text: '',

                                fill: '#f6f6f6',

                                'font-family': 'Maven Pro'

                            },

                            rect: {

                                stroke: '#7c68fc',

                                'stroke-width': 20,

                                rx: 2,

                                ry: 2

                            }

                        }

                    }

                ]

            },

            name: "",

            num: ""

        }, joint.dia.Link.prototype.defaults)

    });

This is drawn just fine, as I add it on the graph after right-click event, but when upon refresh, I try to redo the graph from JSON (JSON.stringify(app.graph) and app.graph.fromJSON(JSON.parse(json)):

Uncaught Error: properties.markup is missing while the default render() implementation is used.

    at child.renderMarkup (rappid.js:7835)

    at child.render (rappid.js:7843)

    at child.protoProps.render (rappid.js:4705)

    at child.renderView (rappid.js:10781)

    at index.js:2874

    at index.js:3049

    at Function.<anonymous> (index.js:3346)

    at child.resetViews (rappid.js:10827)

    at triggerEvents (backbone.js:369)

    at triggerApi (backbone.js:355)

I can also add links with default target and source markup in the same method, and they render just fine on refresh as well, so there is something going wrong on my special shapes. What am I missing?

Thanks,

Riitta Hietaranta

[Riitta Hietaranta]

I have traced the problem down to this: graph.toJSON() results to the link's attrs array being empty (which it is not). I don't know why this happens.

console.log(JSON.stringify(this.graph.toJSON())):

{"cells":[{"type":"app.OutputLink","router":{"name":"manhattan"},"connector":{"name":"jumpover"},"name":"S1","num":"1","source":{"x":620,"y":350},"target":{"x":720,"y":350},"id":"bb6e677c-f751-472d-a094-b1457daaf94d","topology":"512","structure":1,"clickCreated":true,"z":1,"labels":[{"position":0.5,"attrs":{"text":{"text":"1","font-size":"11px","color":"#e3e3e3"},"rect":{"stroke":"#00aecb","stroke-width":10,"rx":2,"ry":2}}}],"attrs":{}}]}

console.log(graph);

1. attributes:
1. attrs:

1. .connection:{stroke: "#222138", stroke-dasharray: "0", stroke-width: 1}

1. .marker-source:{d: "M 10 10 m -7.5 0 a 7.5 7.5 0 1 0 15 0 a 7.5 7.5 0 1 0 -15 0", stroke: "#222138", fill: "#222138", transform: "scale(0.03)"}
2. .marker-target:{d: "M 16 0 L 8 8 L 16 16 L 24 8 Z", stroke: "transparent", fill: "#222138", transform: "scale(1)"}

1. .tool-options:{data-tooltip-class-name: "small", data-tooltip: "Click to open Inspector for this link", data-tooltip-position: "left"}

1. labels:[{…}]
2. __proto__:Object
1. clickCreated:true
2. connector:{name: "jumpover"}
3. id:"bb6e677c-f751-472d-a094-b1457daaf94d"
4. labels:[{…}]
5. name:"S1"
6. num:"1"
7. router:{name: "manhattan"}
8. source:{x: 620, y: 350}
9. structure:1
10. target:{x: 720, y: 350}
11. topology:"512"
12. type:"app.OutputLink"
13. z:1

[Roman Bruckner]

Hi Ritta,

the `type` attribute must mimic the namespace. So the correct type would be `gems.Input` (In your case the JointJS is not able to find the correct Model for type `app.OuputtLink`). Please note there is a method `define()` on cell class (https://resources.jointjs.com/docs/jointjs/v2.0/joint.html#dia.Cell.define) that should make custom shape definition easier.

Regards,

Roman

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Roman Bruckner, CTO

client IO

http://client.io

http://jointjs.com

+420 776 504 406

[Riitta Hietaranta]

Thank you!

Worked like magic! For now, my custom shapes are defined, but I will keep that method in mind in case of refactoring or for new requirements. Your help is much appreciated!

-Riitta Hietaranta