jointjs

问题 So I'm trying to update the value of a the text attribute (name) in a cell model without using the inspector, I need this to update both the inspector field and linked cell model value. No idea how to do this. Is it possible? 回答1: It is a little hard to tell exactly what you mean from your question, plus I don't have a Rappid license so I can't test the UI Inspector part :o( However assuming I understand you properly... ...if you extend the prototype of a shape with a property you can then

问题 I'm coming back to JointJS after a year away and I see that it now claims some kind of Node.js support or compatibility. I'm using Node.js and am wondering whether I can leverage this feature. Is there a tutorial which walks me through this or can someone please explain what Node.js model integration offers me for JointJS? http://www.jointjs.com/ claims "NodeJS support". The Git commit log contains comments like "create tests for NodeJS environment". 回答1: Yes, JointJS supports NodeJS

问题 When I drag my "table" cells around, most of the time connections are flat / leveled (like the vertical portion of the link or the small bit that comes out of ORDERLINE table), but sometimes they end up being under a slight angle (the left bit of the link). Is there a way to prevent this? If I inspect the element in devtools it then shows that the rotate has some small-ish offset instead of the values I would expect to see instead (i.e. 0, 90, 180, -90, -180).. An example of what currently

问题 I'm new to javascript and SVG and I have no graphical programming background and this is my first project using all of those. So I started to make a custom element just like Mike Goodwin answer proposed and I ended with this code after editing it: joint.shapes.tools.tooledElement = joint.shapes.basic.Generic.extend({ toolMarkup: [ '<g class="element-tools">', '<g class="element-tool-remove"><circle fill="red" r="11" stroke="black" stroke-width="1"/>', '<path transform="scale(.7) translate(-16

问题 I am able to add ports to a rectangle using joint.shapes.devs.Model but the same is not working for a circle. Here's what I have tried to add ports to circle: var circle1 = new joint.shapes.basic.Circle({ position: {x: 100, y: 225}, size: {width: 51, height: 51}, outPorts: [''], attrs: { '.': {magnet: true}, '.label': {text: '', 'ref-x': .4, 'ref-y': .2}, '.inPorts circle': {type: 'input'}, '.outPorts circle': {type: 'output'}, '.port-body': {r: 4} } }); graph.addCell(circle1); I can see that

问题 Once a link is created, hovering over it presents the red (X) to delete it. Clicking this will fire a sequence of events (collected by subscribing to the 'all' event): cell:pointerdown link:pointerdown cell:pointermove (x5, seems dubious) cell:pointerup after trolling through the documentation & spending too long digging into the param objects of these events, I see nothing that could be used to effectively know if the link is about to be deleted or not. Surely I'm missing something obvious?

问题 I am working on JointJS. I have various elements with text in it. However the element's width increases with increase in text. I want to dynamically set the size of element such that there is a maximum height and width that the box can attain and expands accordingly by text wrapping. If the text os unable to fit in the maximum height and width element, then the fontsize may be reduced dynamically. I hav tried using style="word-wrap: break-word;" in my div id. However there is no effect. <div

问题 Here is a JSFiddle showing the issue: https://jsfiddle.net/Bronzdragon/xpvt214o/399003/ graph = new joint.dia.Graph; var paper = new joint.dia.Paper({ el: document.getElementById('myholder'), model: graph, width: 800, height: 600, }); var rect = new joint.shapes.basic.Rect({ attrs: {rect: {fill: 'lightblue'}}, size: { width: 200, height: 100 }, ports: { groups: { 'inputs': { position: { name: 'left' }, attrs: {circle: {fill: 'lightgreen'}}, magnet: 'passive' }, 'outputs': { position: { name:

问题 I am trying to create a sort of a Tool menu for every object - when you click or hover over an element, it shows several actions that could be done: delete, rotate, enlarge, link, etc. I have used this question as the guideline - and was able to add and extend the ToolElement itself, with the help of the JFiddle. However, after that I got stuck on the functionality of linking. What I want to do is the green arrow. And when I click and drag the green arrow, I want the link to start dragging

问题 I am working on a JointJS graph, using DirectedGraph to take care of the layout and I am trying to achieve something similar to the image below. I need the nodes (A, B, C, D, E, F, G, H, I, J) to be "outlined" or enclosed in a separate node (Foo, Bar, Hmm). When I add all of the elements to the graph, everything is on top of each other. However, if I do not add the vertices between the regions, all the elements are laid out correctly, but without the vertices connecting the regions. Based on