jointjs

1.JointJs Paper

由 倖福魔咒の 提交于 2020-04-07 10:16:38
关于JointJs的介绍，有一篇比较好 JointJS介绍 第一个类Paper joint.dia.Paper 属性 el css选择器，Paper将在该Css选择的Container下画SVG图.例如:el='#paper',则在 <div id='paper'></div> 下面添加SVG DOM节点 width paper的宽度 height paper的高度 origin paper原点的坐标，默认{x:0,y:0} gridSzie 默认为1 model joint.dia.Graph object，根据MVC，该属性对应model,paper对应view perpendicularLinks 连接线是否正交，默认为false elementView 负责渲染graph ,默认 joint.dia.ElementView linkView 负责渲染links,默认 joint.dia.LinkView defaultLink 用户动态创建的link（比如：从一个port drag 一条线）,默认为 joint.dia.Link ，也可以是一个返回值类型为 joint.dia.Link 函数 function(cellView, magnet) {} interactive 如果设置为false,则graph中的element和link将禁止操作

How to make a paper draggable

由 删除回忆录丶 提交于 2020-01-23 06:29:05
问题 If the paper is too big for the div it's shown in, I'd like to make the paper draggable. I tried the papers blank:pointerdown and pointerup events but was not able to just follow the mousemovement. I also tried to make the element of the paper draggable via jquery, but nothing seems to do the trick... Is there any way to do this? 回答1: I suggest the following: register a handler for the paper blank:pointerdown event that will initiate the paper dragging (store a flag which you'll use in your

How to make a paper draggable

由 南楼画角 提交于 2020-01-23 06:28:10
问题 If the paper is too big for the div it's shown in, I'd like to make the paper draggable. I tried the papers blank:pointerdown and pointerup events but was not able to just follow the mousemovement. I also tried to make the element of the paper draggable via jquery, but nothing seems to do the trick... Is there any way to do this? 回答1: I suggest the following: register a handler for the paper blank:pointerdown event that will initiate the paper dragging (store a flag which you'll use in your

How to get the links to the front when reparenting

由 假如想象 提交于 2020-01-17 04:39:04
问题 All the cells/elements are embedded on top of other cell but the links are hidden behind the element. How do I get the links on top of the element(parent) Here's the Preview I tried with link.toFront() which isn't working. Below is my code snippet: paper.on('cell:pointerdown', function (cellView, evt, x, y) { var cell = cellView.model; if (!cell.get('embeds') || cell.get('embeds').length === 0) { // Show the dragged element above all the other cells (except when the // element is a parent).

Hiding elements in a diagram

由 蹲街弑〆低调 提交于 2020-01-11 10:25:09
问题 I have a read-only diagram to visualize some data. My end users would like to "filter" the data such that only a subset of the data may be shown at one time. I realize that I can redraw the whole diagram each time I apply a filter omitting the elements that are not to be shown but I am wondering if there is a way that I can simply "hide" some existing elements dynamically and then subsequently re-show them. To try and make crystal clear, if this were a web page instead of a diagram, I would

CellView.highlight() breaking change?

由 风格不统一 提交于 2020-01-03 03:15:12
问题 My application uses Jointjs. I recently upgraded from Jointjs v0.9.7 to v0.9.10 and since I did that cell highlighting does not seem to work. I simplified everything down to a test app and I can see that the highlight() function is called but the highlighted class is not set. I put a simplified test page into a gist and a fiddle. It is also reproduced below in case it helps. Has there been a breaking change? How is highlighting supposed to work in v0.9.10? <html> <head> <link rel="stylesheet"

style specific port in jointjs

由 故事扮演 提交于 2020-01-02 00:25:26
问题 1) I'm using JointJS diagramming lib. I want to change the css of a particular inPort when using joint.shapes.devs . For linking sourcePort to the target I'm using source: { id: source.id, selector: source.getPortSelector(sourcePort)} It's giving me accurate source port, but how to apply css on this particular port after knowing it as my source connector? Is there a way? 2) Can we fit/wrap the label automatically inside the element if its width is longer than the element-width? I'm using

style specific port in jointjs

由 亡梦爱人 提交于 2020-01-02 00:25:23
问题 1) I'm using JointJS diagramming lib. I want to change the css of a particular inPort when using joint.shapes.devs . For linking sourcePort to the target I'm using source: { id: source.id, selector: source.getPortSelector(sourcePort)} It's giving me accurate source port, but how to apply css on this particular port after knowing it as my source connector? Is there a way? 2) Can we fit/wrap the label automatically inside the element if its width is longer than the element-width? I'm using

How to add an onclick event to a joint.js element?

由 两盒软妹~` 提交于 2020-01-01 04:34:14
问题 I have a joint.js element in a DAG, and would like to be able to trigger an event by clicking on it. I could use $(selector).click(...) to do it, but I was wondering if there was a joint.js specific way of handling it, since that would probobly be better. One event I decided was a candidate for onclick was 'batch:stop' My code: var variable = new joint.shapes.basic.Rect({ name : label, id: label, onclick : function () {alert("hello");}, size: { width: width, height: height }, attrs: { text: {

Joint.js Drag and Drop Element between two papers

由 ぐ巨炮叔叔 提交于 2019-12-31 18:17:14
问题 I am implementing drag and drop between two papers .But I am stuck with the syncing of offset of dragged element with cursor position as I have two papers in my html body.I have very minute experience with css which may be causing problem of positioning of elements. Use Case:- User clicks on element from paper 2 and starts dragging and go to paper 1. On Pointer up a clone of that element is added to paper 1 on the position of cursor in paper 1. My strategy to handle this is :- When the user
订阅 jointjs