jointjs

问题 I am trying to convert a legacy app from JointJS v2.2.1 to v3.0.2. I’m hitting an error others have found: Uncaught Error: dia.ElementView: markup required. (joint.min.js:8) A helpful person said: “Please note you need to be careful with the cellViewNamespace for the dia.Paper and cellNamespace option for the dia.Graph in this setup. Running this snippet is a quick check you've set up the namespaces correctly: const cells = JSON.stringify(graph.toJSON()); graph.clear(); graph.fromJSON(JSON

问题 How to set background image attribute for a rectangle in my JointJs application ? 回答1: Rectangle object doesn't have that attribute perse....what you can do it's create an image object itself: var image = new joint.shapes.basic.Image({ position : { x : 50, y : 40 }, size : { width : 16, height : 16 }, attrs : { image : { "xlink:href" : "images/background.png", width : 16, height : 16 } } }); graph.addCell(image); Then you can play as you need with the attrs of it, you can even create ports

问题 Merry Christmas, everyone! I want to do something when the source element or target element of a joint.dia.Link is changed. Firstly I tried to put the code in the callback function of 'change:source' and 'change:target' events. However, it turns out that those callback functions are called as soon as the link's position changes, instead of being called when the source element or target element changes. Then I tried to put the code in the LinkView.pointup() function, by adding a tag, which is

问题 Is there any way to have a link in crow's foot notation with JointJS? If yes, what would be the code look like? 回答1: Yes, you can make crow feet notation in jointjs. Need to edit in shapes, Code for one-to-many is case '1 optional-N optional': attrs = { '.marker-source': { d: 'M 10 0 L 10 20 L 10 10 L 0 10 L 14 10 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0', fill: '#FFFFFF' }, '.marker-target': { d: "M 0 0 L 10 10 L 0 10 L 10 10 L 0 20 L 10 10 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0", fill: '#FFFFFF' } };

问题 I would like to have svg shape scale based on text content of text area or text-input. As the text content increases, the size of the underlying svg element should increase as well This is what I have so far: var graph = new joint.dia.Graph; var paper = new joint.dia.Paper({ el: $('#myholder'), width: 1330, height: 660, model: graph, gridSize: 1, defaultLink: new joint.dia.Link({ attrs: {'.marker-target': {d: 'M 10 0 L 0 5 L 10 10 z'}} }), validateConnection: function (cellViewS, magnetS,

问题 I noticed that jointjs do support zoom in/out as of http://www.jointjs.com/ But could not find any examples. Please help me with the steps to zoom in/out the result graph created by jointjs within a <div>? 回答1: Joint Paper has a method called scale() . I have this implementation for scaling (zooming) my graph: var graphScale = 1; var paperScale = function(sx, sy) { paper.scale(sx, sy); }; var zoomOut = function() { graphScale -= 0.1; paperScale(graphScale, graphScale); }; var zoomIn =

问题 I need to define mouse click event for my each cell. I used cell:pointerup event; but this event is triggered when I change positions of cells too. How can I differentiate these 2 events? Thanks in advance. 回答1: What you can do is to create a custom element view and distinct click from dragging by checking whether a pointermove event was triggered between pointerdown and pointerup events. var ClickableView = joint.dia.ElementView.extend({ pointerdown: function () { this._click = true; joint

问题 I have a basic Rect shape like this: var rectShape = new joint.shapes.basic.Rect({ position: { x: 60, y: 10 }, size: { width: 160, height: 35 }, attrs: { rect: { fill: '#F5F5F5' }, text: { fill: '#FC8A26', 'font-size': 12, 'font-weight': 'bold', 'font-variant': 'small-caps' } } }); I use clone() to create more rectangles like that one: var rect1 = rectShape.clone().translate(520, 10).attr('text/text','rect1'); I want to have 2 different words inside the rect, one at the size 12 and the other

问题 I have an FSA in joint.js, and I need to make the states (circles) semi-filled to specific ratios, like 1/2 or 1/6, starting from the bottom of the circle. The tricky part is that it needs to be done twice - A larger semi-fill and a smaller semi-fill over it. This is what i am trying to do: I'm lost as to how to accomplish this. 回答1: The trick is to create three SVG circles and define clip paths for them. The following example creates a custom JointJS shape (inheriting from fsa.State) with

问题 I want to interactively add links to my JointJS based graph. My idea is to create a small temporary node on pointerdown with a link from the original node to this temporary node, drag it on top of another node and on pointerup create the real link removing the temporary link and node. Unfortunately I don't know how to convince the pointer to move the temporary element and not the node on which the pointerdown event happened. Any idea? Thanks! var tmp_obj; paper.on('cell:pointerdown', function