--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/el.html:
--------------------------------------------------------------------------------
1 | el - CSS selector, jQuery object or a DOM element holding the container for the paper
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Link/prototype/remove.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/origin.html:
--------------------------------------------------------------------------------
1 | origin - position of zero coordinates of the paper in pixels (default is { x: 0, y: 0 } i.e. top-left corner)
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/setGridSize.html:
--------------------------------------------------------------------------------
1 |
2 |
2 |
3 | Check if an element has any ports defined. Returns `boolean`.
4 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/LinkView/prototype/getConnectionLength.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Check if an element contains a port with `id`. Returns `boolean`.
4 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Graph/prototype/removeLinks.html:
--------------------------------------------------------------------------------
1 |
Scales the link's points (vertices) relative to the given origin.
4 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/perpendicularLinks.html:
--------------------------------------------------------------------------------
1 | perpendicularLinks - if true, links will tend to get perpendicular to their associated objects. Default is false
--------------------------------------------------------------------------------
/docs/src/vectorizer/api/V/isVElement.html:
--------------------------------------------------------------------------------
1 |
2 |
2 |
3 | Remove a port from an element, where `port` is a port object, or `portId`.
4 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Link/prototype/getSourceElement.html:
--------------------------------------------------------------------------------
1 |
link.getSourceElement()
Return the source element of the link or null if there is none.
2 |
2 |
3 | Returns an array of all ports on the element. If there is no port an empty array is returned.
4 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Element/prototype/scale.html:
--------------------------------------------------------------------------------
1 |
2 |
element.scale(sx, sy, origin[, opt])
3 |
Scales the element's position and size relative to the given origin.
2 |
3 | Returns the port specified by an `id`. If such a port does not exist the method returns `undefined`.
4 |
5 |
--------------------------------------------------------------------------------
/docs/src/vectorizer/api/prototype/clone.html:
--------------------------------------------------------------------------------
1 |
2 |
vel.clone()
3 |
Clone the Vectorizer object creating a brand new copy of the element. This clone is not automatically added to the DOM.
--------------------------------------------------------------------------------
/plugins/routers/joint.routers.normal.js:
--------------------------------------------------------------------------------
1 | // Does not make any changes to vertices.
2 | // Returns the arguments that are passed to it, unchanged.
3 | joint.routers.normal = function(vertices, opt, linkView) {
4 |
5 | return vertices;
6 | };
7 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Element/prototype/addPort.md:
--------------------------------------------------------------------------------
1 |
element.addPort(port, [opt])
2 |
3 | Add a single port, where `port` could be defined as described in section [Port interface](#portinterface)
4 |
5 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Graph/prototype/getSinks.html:
--------------------------------------------------------------------------------
1 |
graph.getSinks()
Return an array of all the leafs of the graph.
2 | Time complexity: O(|V|).
3 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/multiLinks.html:
--------------------------------------------------------------------------------
1 | multiLinks - when set to false, an element may not have
2 | more than one link with the same source and target element.
3 |
--------------------------------------------------------------------------------
/docs/src/vectorizer/api/V/createSVGTransform.html:
--------------------------------------------------------------------------------
1 |
2 |
The stroke attribute becomes a special attribute only in case it's defined as an object. This has the exact same
3 | behaviour as the fill attribute.
4 |
Return the bearing (cardinal direction) of the line. The return value is a one of the following strings: 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW' and 'N'.
Remove all the cells from the graph. options object can optionally contain additional data that is passed overto the event listeners of the graph cells remove event.
2 |
3 | Sets the paper background defined by the `opt` object. Please see the background paper option for available configuration.
4 |
--------------------------------------------------------------------------------
/docs/src/geometry/api/g/rect/prototype/snapToGrid.html:
--------------------------------------------------------------------------------
1 |
2 |
rect.snapToGrid(gx, gy)
3 |
Adjust the position and dimensions of the rectangle such that its edges are on the nearest increment of gx on the x-axis and gy on the y-axis.
Adds the given element (or elements) els before the Vectorizer element vel as a child of the parent node. els can be Vectorizer object(s) or SVG DOM element(s).
Solves a tridiagonal system for one of coordinates (x or y) of first Bezier control points. rhs is a right hand side vector. Returns a solution vector.
Return the "top", "left", "right" or "bottom" string denoting the side of the rectangle which is nearest to the point p.
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/defaultRouter.html:
--------------------------------------------------------------------------------
1 | defaultRouter - a router that is used by links if no router property is defined on them. It can be either an object or a function. See the Presentation section of joint.dia.Link for more information about routers
--------------------------------------------------------------------------------
/docs/src/vectorizer/api/V/findAnnotationsBetweenIndexes.html:
--------------------------------------------------------------------------------
1 |
2 |
2 |
3 | Add array of `ports`. Ports are validated for `id` duplicities, if there is a id collision, no new ports are added, where `port` could be defined as describe in section [Port interface](#portinterface)
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Element/prototype/findView.html:
--------------------------------------------------------------------------------
1 |
element.findView(paper)
Find view (joint.dia.ElementView) for the element model in the paper.
2 | This is a shortcut to the equivalent call paper.findViewByModel(element)
3 |
--------------------------------------------------------------------------------
/tutorials/js/bind-adjust-vertices.js:
--------------------------------------------------------------------------------
1 | var myAdjustVertices = _.partial(adjustVertices, graph);
2 |
3 | // adjust vertices when a cell is removed or its source/target was changed
4 | graph.on('add remove change:source change:target', myAdjustVertices);
5 |
6 | // also when an user stops interacting with an element.
7 | paper.on('cell:pointerup', myAdjustVertices);
8 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/drawGrid.html:
--------------------------------------------------------------------------------
1 |
2 |
paper.drawGrid([opt])
3 |
Draw visual grid lines on the paper. Possible options:
4 |
5 |
color - the color of the grid line (hex, RGB, etc).
6 |
thickness - the thickness of the grid line (pixels).
7 |
8 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/defaultConnector.html:
--------------------------------------------------------------------------------
1 | defaultConnector - a connector that is used by links if no connector property is defined on them. It can be either an object or a function. See the Presentation section of joint.dia.Link for more information about connectors
--------------------------------------------------------------------------------
/docs/src/geometry/api/g/point/prototype/bearing.html:
--------------------------------------------------------------------------------
1 |
2 |
point.bearing(p)
3 |
Return the bearing (cardinal direction) of the line between the point and another point p.
4 | The return value is a one of the following strings: 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW' and 'N'.
Find a view (instance of joint.dia.ElementView or joint.dia.LinkView) associated with a model. model can either be an instance of joint.dia.Element or joint.dia.Link.
Return a point on the line at length specified by a floating point number t from the interaval [0,1]. For example, if t equals 0.5, the function returns the midpoint of the line.
Add new cells to the graph. This is just a convenience method that wraps the addCell method.
5 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/snapLinks.html:
--------------------------------------------------------------------------------
1 | snapLinks - when enabled, force a dragged link to snap to the closest element/port in the given radius. The option accepts true in which case default values are used or an object of the form
2 | { radius: <value> } where you can specify the radius (default is 50).
--------------------------------------------------------------------------------
/demo/clipping.svg:
--------------------------------------------------------------------------------
1 |
2 |
8 |
--------------------------------------------------------------------------------
/demo/routing/css/routing.css:
--------------------------------------------------------------------------------
1 | .router-switch {
2 | width: 100px;
3 | margin: 4px;
4 | background: #68ddd5;
5 | color: #484e68;
6 | outline: none;
7 | font-size: 12px;
8 | border: none;
9 | padding: 4px;
10 | border-radius: 5px;
11 | cursor: pointer;
12 | }
13 | .router-switch:hover {
14 | background: #fdc685;
15 | color: #fff;
16 | }
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Graph/prototype/getFirstCell.html:
--------------------------------------------------------------------------------
1 |
graph.getFirstCell()
Get the first cell (element or link) in the graph. The first cell is defined as the cell
2 | with the lowest z property (the cell most in the back, see the Presentation section of joint.dia.Element).
Get the last cell (element or link) in the graph. The last cell is defined as the cell
2 | with the highest z property (the cell most in the front, see the Presentation section of joint.dia.Element).
Return a bounding box of the element el. The advantage of this method is that it can handle
2 | both HTML and SVG elements. The resulting object is of the form { x: Number, y: Number, width: Number, height: Number }.
3 |
The basic model for diagram cells. It's a Backbone model with a few additional properties and methods. The first one to mention is a unique identifier for the cell. Each cell has a unique ID that is stored in the id property.
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/CellView/prototype/unhighlight.html:
--------------------------------------------------------------------------------
1 |
cellView.unhighlight([el[, options]])
2 |
3 |
Removes the highlighting being done to the cell.
4 |
5 |
It is important to note that if you highlighted a cell using custom options, you must provide those exact same options when using the unhighlight method.
Return true if the link is embedded in an element element. If opt.deep
2 | is false, only direct parentage will be checked. opt.deep is true by default.
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/validateMagnet.html:
--------------------------------------------------------------------------------
1 | validateMagnet(cellView, magnet) - decide whether to create a link if the user clicks a magnet. magnet is the DOM element representing the magnet. By default, this function returns true for magnets that are not explicitely set to "passive" (which is usually the case of input ports).
--------------------------------------------------------------------------------
/docs/src/geometry/api/g/rect/prototype/normalize.html:
--------------------------------------------------------------------------------
1 |
2 |
rect.normalize()
3 |
Normalize the rectangle, i.e. make it so that it has non-negative width and height. If width is less than 0, the function swaps left and right corners and if height is less than 0, the top and bottom corners are swapped.
Return the change in angle that is the result of moving the point from its previous position (-dx, -dy) to its new position.
4 | This move is relative to the ref point and x axis.
Return true if the element is embedded in another element element. If opt.deep
3 | is false, only direct parentage will be checked. opt.deep is true by default.
Return a copy of the element's attributes for JSON serialization. This can be used for persistance or serialization. Note that this method doesn't return a JSON string but rather an object that can be then serialized to JSON with JSON.stringify().
4 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/defaultLink.html:
--------------------------------------------------------------------------------
1 | defaultLink - link that should be created when the user clicks and drags and active magnet (when creating a link from a port via the UI). Defaults to new joint.dia.Link. It can also be a function with signature function(cellView, magnet) {} that must return an object of type joint.dia.Link.
--------------------------------------------------------------------------------
/docs/src/joint/api/util/getByPath.html:
--------------------------------------------------------------------------------
1 |
util.getByPath(object, path, delim)
2 |
3 |
Return a value at the path in a nested object. delim is the delimiter used in the path Example:
Return the intersection point of the line with another line l. A rectangle can also be passed in as the parameter, in which case, an array of intersection points with the line is returned. Return null if there is no such point.
Return an object representing the graph ready for JSON serialization. This can be used for persistance or serialization. Note that this method doesn't
2 | return a JSON string but rather an object that can be then serialized to JSON with JSON.stringify().
5 | Return a rectangle inflated in axis x by 2 * dx and in axis y by 2 * dy.
6 | When method is called with a single parameter, the resulting rectangle is inflated by 2 * dx in both x and y axis.
7 |
8 |
--------------------------------------------------------------------------------
/docs/src/geometry/intro.md:
--------------------------------------------------------------------------------
1 | Together with [Vectorizer](vectorizer.html), Geometry is another lightweight library built-in to JointJS. This library implements many useful **geometry operations**. The geometry library does not have any dependencies and can be used standalone. Please see the download page that contains both the [development and minified versions](http://jointjs.com/download#geometry) of this library.
--------------------------------------------------------------------------------
/docs/src/joint/api/specialAttributes/text.html:
--------------------------------------------------------------------------------
1 |
2 |
Valid only for <text> subelements.
3 | text attribute contains the text that will be set either directly to the <text> subelement
4 | or its <tspan> children depending on whether the text is multiline or not (contains '\n' character(s)).
5 | Return an ellipse inflated in axis x by 2 * dx and in axis y by 2 * dy.
6 | When method is called with a single parameter, the resulting ellipse is inflated by 2 * dx in both x and y axis.
7 |
Return the SVG path commands that define a cubic bezier curve going through the points.
4 | This method automatically computes the cubic bezier control points necessary to create a smooth curve crossing points.
Return the value from the domain interval linearly scaled to the range interval. Both domain and range intervals must be specified as arrays with two numbers specifying start and end of the interval.
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/linkView.html:
--------------------------------------------------------------------------------
1 | linkView - object that is responsible for rendering a link model into the paper. Defaults to joint.dia.LinkView. It can also be a function of the form function(link) that takes a link model and should return an object responsible for rendering that model onto the screen (in most cases a subtype of joint.dia.LinkView)
--------------------------------------------------------------------------------
/docs/templates/partials/navItems.html:
--------------------------------------------------------------------------------
1 |
Returns a new instance of the element with identical attributes. If options.deep === true, then
2 | all the embedded cells (elements, links) of the element are cloned as well. In this case, the return value is an array of
3 | instances rather then a single instance.
Return the SVG transformation matrix built from the transformString E.g. 'translate(10,10) scale(2,2)' will result in matrix { a: 2, b: 0, c: 0, d: 2, e: 10, f: 10}.
3 |
--------------------------------------------------------------------------------
/docs/src/geometry/api/g/bezier/getCurveControlPoints.html:
--------------------------------------------------------------------------------
1 |
2 |
g.bezier.getCurveControlPoints(knots)
3 |
Get open-ended Bezier Spline Control Points. knots should be Bezier spline points (at least two points!). Returns an array where the first item is an array of the first control points and the second item is an array of second control points.
3 | Returns a normalized distance from the ellipse center to a point p.
4 |
5 | Returns a number n ( n < 1 for points inside the ellipse, n = 1 for points laying at the ellipse boundary and n > 1 for points outside the ellipse).
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Graph/prototype/translate.html:
--------------------------------------------------------------------------------
1 |
Deprecated in favor of translate(). Lets you modify the origin (zero coordinates) of a paper. An origin can also be passed to the options object of the joint.dia.Paper constructor. If the method is called a "translate" event is triggered on the paper.
Return the SVG transformation matrix initialized with the matrix extension. extension is an object of the form: { a: [number], b: [number], c: [number], d: [number], e: [number], f: [number]}.
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/elementView.html:
--------------------------------------------------------------------------------
1 | elementView - object that is responsible for rendering an element model into the paper. Defaults to joint.dia.ElementView. It can also be a function of the form function(element) that takes an element model and should return an object responsible for rendering that model onto the screen (in most cases a subtype of joint.dia.ElementView)
--------------------------------------------------------------------------------
/test/geometry/requirejs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Geometry | Tests | require.js
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/plugins/connectors/joint.connectors.normal.js:
--------------------------------------------------------------------------------
1 | joint.connectors.normal = function(sourcePoint, targetPoint, vertices) {
2 |
3 | // Construct the `d` attribute of the `` element.
4 | var d = ['M', sourcePoint.x, sourcePoint.y];
5 |
6 | _.each(vertices, function(vertex) {
7 |
8 | d.push(vertex.x, vertex.y);
9 | });
10 |
11 | d.push(targetPoint.x, targetPoint.y);
12 |
13 | return d.join(' ');
14 | };
15 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Link/prototype/translate.html:
--------------------------------------------------------------------------------
1 |
link.translate(tx, ty, [options])
Translate the link vertices (and source and target if they are points) by tx pixels in x axis and
2 | ty pixels in y axis. If options object is passed, it can contain data
3 | that is passed over the the event listeners for the change event on the link or graph.
4 |
Solves an inversion problem -- Given the (x, y) coordinates of a point which lies on a parametric curve x = x(t)/w(t), y = y(t)/w(t), find the parameter value t which corresponds to that point. Returns a function that accepts a point and returns t.
An object containing at least an id property. This property uniquely identifies the port.
3 | If a link gets connected to a magnet that has also a port
4 | object defined, the id property of the port object will be copied to the port property
5 | of the source/target of the link.
Change dimensions of a paper. Dimensions should always be passed to the options object of the joint.dia.Paper constructor. Use setDimensions() to change dimensions of the paper later on if needed. If the method is called a "resize" event is triggered on the paper.
Resize the element so that it fits all the embedded elements inside it. If opt.deep is true,
2 | the resizing will be done recursively for any embedded elements that contain embedded elements themselves.
3 | Set opt.padding if you want certain padding on all the parent elements.
4 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/guard.html:
--------------------------------------------------------------------------------
1 | guard - guard paper from handling a browser UI event. This function is of the form
2 | function(evt, view) and should return true if you want to prevent the paper from handling the event evt,
3 | false otherwise. This is an advanced option that can be useful if you have your own logic for handling events.
4 |
--------------------------------------------------------------------------------
/docs/src/vectorizer/api/V/decomposeMatrix.html:
--------------------------------------------------------------------------------
1 |
2 |
V.decomposeMatrix(matrix)
3 |
Decompose the SVG transformation matrix into separate transformations. Return an object of the form: { translateX: [number], translateY: [number], scaleX: [number], scaleY: [number], skewX: [number], skewY: [number], rotation: [number] }.
Transform a point specified by p (an object with x and y coordinates) by an SVG transformation represented by matrix.
4 | This is a convenient shortcut to calling:
5 |
var p = mySVGDocument.createSVGPoint();
6 | p.x = x;
7 | p.y = y;
8 | p.matrixTransform(matrix)
Return the Vectorizer object for the first <defs> element of the root SVG element. Note that the <defs> element is a good place to put referenced SVG elements like gradients, clip paths, filters and others.
Find elements (instance of joint.dia.Element) in a certain area in the graph. rect is an object with x, y, width and height properties. Returns an
2 | array of elements whose bounding box top/left coordinate falls into the rect rectangle.
Find elements (instance of joint.dia.Element) under a certain point in the graph. point is an object with x and y properties. Returns an
2 | array of elements whose bounding box contains point. Note that there can be more then one element as elements might overlap.
Make x-coordinate of the subelement relative to the x-coordinate of the element referenced to by the selector in ref attribute.
3 | If ref-x is in the (0,1) interval (or expressed in percentages, e.g. '80%'), the offset is
4 | calculated from the fraction of the bounding box of the referenced element. Otherwise, it is an absolute value in pixels.
5 |
Make y-coordinate of the subelement relative to the y-coordinate of the element referenced to by the selector in ref attribute.
3 | If ref-y is in the (0,1) interval (or expressed in percentages, e.g. '80%'), the offset is
4 | calculated from the fraction of the bounding box of the referenced element. Otherwise, it is an absolute value in pixels.
5 |
--------------------------------------------------------------------------------
/test/jointjs/webpack.js:
--------------------------------------------------------------------------------
1 | module('Webpack');
2 |
3 | test('sanity checks for webpack bundle file', function(assert) {
4 |
5 | assert.ok(typeof joint !== 'undefined', 'Joint object should be defined');
6 | assert.ok(typeof joint.dia === 'object', 'Joint object should have "dia" object');
7 |
8 | var paper = new joint.dia.Paper();
9 |
10 | assert.ok(paper instanceof Backbone.View, 'A new dia.Paper object can be initialized');
11 |
12 | paper.remove();
13 | });
14 |
--------------------------------------------------------------------------------
/docs/src/vectorizer/api/prototype/bbox.html:
--------------------------------------------------------------------------------
1 |
2 |
vel.bbox([withoutTransformations, target])
3 |
Return the bounding box of the element after transformations are applied. If withoutTransformations is true, transformations of the element will not be considered when computing the bounding box. If target is specified, bounding box will be computed relatively to the target element.
Traverse the graph starting at element following links. This function is a wrapper around
2 | dfs() or bfs(). By default, it uses dfs(). If opt.breadthFirst is set to true, bfs() will be used instead.
When matrix is not provided, returns the current transformation matrix of the Vectorizer element.
4 |
When matrix is provided, applies the provided transformation matrix to the Vectorizer element.
5 |
You can clear previous transformations by passing opt with property absolute:true
6 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/linkPinning.html:
--------------------------------------------------------------------------------
1 | linkPinning - when set to true (the default), links can be pinned to the paper meaning a source or target of a link can be a point. If you do not want to let the user to drag a link and drop it somewhere in a blank paper area, set this to false. The effect is
2 | that the link will be returned to its original position whenever the user drops it somewhere in a blank paper area.
--------------------------------------------------------------------------------
/test/jointjs/browserify.js:
--------------------------------------------------------------------------------
1 | module('Browserify');
2 |
3 | test('sanity checks for browserify bundle file', function(assert) {
4 |
5 | assert.ok(typeof joint !== 'undefined', 'Joint object should be defined');
6 | assert.ok(typeof joint.dia === 'object', 'Joint object should have "dia" object');
7 | assert.ok(typeof joint.dia.Graph === 'function', 'joint.dia.Graph should be a function');
8 | assert.ok(typeof joint.dia.Paper === 'function', 'joint.dia.Paper should be a function');
9 | });
10 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/findView.html:
--------------------------------------------------------------------------------
1 |
paper.findView(element)
Find a view (instance of joint.dia.ElementView or joint.dia.LinkView) associated with a DOM element in the paper. element can either be a DOM element, jQuery object or a CSS selector.
2 | Sometimes, it is useful to find a view object for an element in the DOM. This method finds the closest view for any subelement of a view element.
Normalize the point vector and return the point itself. In other words,
4 | scale the line segment between (0, 0) and the point in order for it to have a length of len.
5 | If len is not specified, it is considered to be 1 in which case a unit vector is computed.
Return a new rectangle object with top left corner at point with coordinates x, y and dimensions width and height. If only x is specified, it is considered to be an object in the form { x: [number], y: [number], width: [number], height: [number] } in which case a copy of the rectangle is returned.
Return the point on the boundary of the ellipse that is the intersection of the ellipse with a line starting in the center of the ellipse ending in the point p. If angle is specified, the intersection will take into account the rotation of the ellipse by angle degrees around its center.
When called with no parameter, the method returns the current transformation matrix (instance of SVGMatrix) of the paper. It sets the new viewport transformation based on the SVGMatrix otherwise.
3 |
4 |
paper.matrix({ a: 2, b: 0, c: 0, d: 2, e: 0, f: 0 }); // scale the paper twice
Offset the point (change its x and y coordinates) by dx in x-axis and dy in y-axis. If only dx is specified and is a number,
4 | dy is considered to be zero. If only dx is specified and is a object, it is considered to be another point or an object in the form { x: [number], y: [number] }
Remove the element from the graph. All its embedded elements will get removed too and the element gets unembedded from its parent element. By default,
2 | all the associated links are removed too. To suppress this behaviour, set options.disconnectLinks === true. In this case, all the associated
3 | links get disconnected from this element rather then removed completely from the graph.
Convert an SVG element to the SVG path data (string of SVG path commands). It currently works for <path>, <line>, <polygon>, <polyline>, <ellipse>, <circle> and <rect>.
Return the common ancestor of all the cells passed as arguments. For example, if an element B is embedded in
2 | an element A and an element C is also embedded in the element A,
3 | graph.getCommonAncestor(B, C) returns the element A. This also works on an
4 | arbitrary deep hierarchy.
Get all the associated links to the element. If opt.inbound === true, only inbound links will be returned. Similarly,
2 | if opt.outbound === true, only outbound links will be returned. If opt.deep is true,
3 | all the links that are connected to any of the descendant elements (embedded and deeply embedded) are returned.
Reset cells in the graph. Update all the cells in the graph in one bulk. This is a more efficient method of adding cells to the graph if you ou want to replace all the cells in one go. options object can optionally contain additional data that is passed over to the event listeners of the graph reset event.
2 | Convert an image at url to the Data URI
3 | scheme.
4 | This function is able to handle PNG, JPG and SVG formats. The callback function has the following
5 | signature function(err, dataUri) {}. Useful if you want to embed images right into your diagrams
6 | instead of having them referenced externally.
7 |
Tell the browser to schedule the callback function to be called before the next repaint.
2 | This is a cross-browser version of the window.requestAnimationFrame function.
3 | Returns an ID of the frame request. For convenience, you can pass a context for your callback function.
4 |
Return a new line object with starting at point p1 ending at point p2. p1 and p2 are first passed through the point constructor so they can also be passed in the string forms. Examples:
4 |
5 |
var l = g.line(g.point(10, 20), g.point(50, 60));
6 | var l = new g.line('10 20', '50 60');
7 | var l = g.line('10@20', '50@60');
Return true if this link is a loop link. In a loop link
2 | source and target are equal. If opt.deep is true,
3 | the notion of a loop link is extended to a deep hierarchy. For example,
4 | if the link connects a parent element with one of its embedded elements, than the
5 | link is considered a loop link too.
6 |
Automatically find and set the best parent element for the link so that when the parent element is moved, the link and all
2 | its vertices are moved too. The best parent is determined as the common ancestor of the source and target
3 | elements of the link. Useful for hierarchical diagrams. See the DEVS demo on how this can be used.
Change the order of elements (a collection of HTML elements or a selector or jQuery object) in the DOM
2 | according to the comparator(elementA, elementB) function. The comparator function has
3 | the exact same meaning as in Array.prototype.sort(comparator).
4 |
Return a point that has coordinates computed as a difference between the point and another point with coordinates dx and dy. If only
4 | dx is specified and is a number, dy is considered to be zero. If only dx is specified and is an object,
5 | it is considered to be another point or an object in the form { x: [number], y: [number] }
Return the point on the boundary of the rectangle that is the intersection of the rectangle
4 | with a line starting in the center of the rectangle ending in the point p.
5 | If angle is specified, the intersection will take into account
6 | the rotation of the rectangle by angle degrees around its center.
var jsonString = JSON.stringify(graph)
6 | // ... send jsonString to the server,
7 | // store it to the localStorage or do whatever you want
8 | // ... later on
9 | graph.fromJSON(JSON.parse(jsonString))
10 |
11 |
options object can optionally contain additional data that is passed over to the event listeners of the graph changes.
Move the element so it is behind all other cells (elements/links).
2 | If opt.deep is true, all the embedded cells of this
3 | element will get higher z index than that of this element in a Breadth-first search (BFS) fashion. This
4 | is especially useful in hierarchical diagrams where if you want to send an element to the back, you don't want
5 | its children (embedded cells) to be hidden behind that element.
Rotate an element by deg degrees around its center. If the optional absolute parameter is true,
2 | the deg will be considered an absolute angle, not an addition to the previous angle.
3 | If origin is passed in the form of an object with x and y properties,
4 | then this point will be used as the origin for the rotation transformation.
5 |
Always returns false. The reason the method is here is that both joint.dia.Element and joint.dia.Link inherit from joint.dia.Cell. This method is useful if you don't know what the cell is. Calling el.isLink() is equivalent to el instanceof joint.dia.Link. Example:
4 |
5 |
var cell = graph.getCell(myId)
6 | if (cell.isLink()) {
7 | // Do something if the cell is a link.
8 | }
Valid only for <text> subelements. textPath can be either a string or an object. If it is a string, it specifies a path the text should go along. If it is an object, then it should contain a d property that specifies the path the text should go along and optinally other attributes that will be set on the automatically created <textPath> SVG element such as startOffset. See text() method of Vectorizer objects for more details.
9 |
--------------------------------------------------------------------------------
/wrappers/geometry.head.js:
--------------------------------------------------------------------------------
1 | (function(root, factory) {
2 |
3 | if (typeof define === 'function' && define.amd) {
4 |
5 | // AMD. Register as an anonymous module.
6 | define([], factory);
7 |
8 | } else if (typeof exports === 'object') {
9 |
10 | // Node. Does not work with strict CommonJS, but
11 | // only CommonJS-like environments that support module.exports,
12 | // like Node.
13 | module.exports = factory();
14 |
15 | } else {
16 |
17 | // Browser globals.
18 | root.g = factory();
19 | }
20 |
21 | }(this, function() {
22 |
--------------------------------------------------------------------------------
/docs/src/geometry/api/g/point/constructor.html:
--------------------------------------------------------------------------------
1 |
2 |
g.point(x [, y])
3 |
Return a new point object with x and y coordinates. If x is a string, it is considered to be in the form "[number] [number]" or "[number]@[number]" where the first number is x coordinate and the second is y coordinate. Examples:
4 |
5 |
var p = g.point(10, 20);
6 | var p = new g.point(10, 20);
7 | var p = g.point('10 20');
8 | var p = g.point('10@20');
9 | var p = g.point(g.point(10, 20));
Always returns false. The reason the method is here is that both joint.dia.Element and joint.dia.Link inherit from joint.dia.Cell. This method is useful if you don't know what the cell is. Calling el.Element() is equivalent to el instanceof joint.dia.Element. Example:
4 |
5 |
var cell = graph.getCell(myId)
6 | if (cell.isElement()) {
7 | // Do something if the cell is an element.
8 | }
Always returns true. The reason the method is here is that both joint.dia.Element and joint.dia.Link inherit from joint.dia.Cell. This method is useful if you don't know what the cell is. Calling el.Element() is equivalent to el instanceof joint.dia.Element. Example:
4 |
5 |
var cell = graph.getCell(myId)
6 | if (cell.isElement()) {
7 | // Do something if the cell is an element.
8 | }
Add a custom feature-detection test where name is a string which uniquely identifies your feature test and fn is a function that returns true if the browser supports the feature, and false if it does not.
4 |
5 |
joint.env.addTest('customTest', function() {
6 | // Just as an example, we will always return true here.
7 | return true;
8 | });
9 |
10 | if (joint.env.test('customTest')) {
11 | // Feature is supported.
12 | }
When a cell is highlighted with the opacity highlighter, its $el is given the .joint-highlight-opacity class. To customize the look of this highlighted state, you can add custom CSS rules that affect this class name.
4 |
5 |
This highlighter does not currently have any options.
Find all the elements (instances of joint.dia.Element) that are located below element.
2 | opt.searchBy parameter optionally determines what it means for an element to be below another element.
3 | Possible values are 'bbox' (default), 'center', 'origin', 'corner', 'topRight',
4 | and 'bottomLeft'.
5 |
Clone the whole subgraph, including all the connected links whose source/target is in the subgraph.
2 | This is equivalent to calling graph.cloneCells(graph.getSubgraph(cells)).
3 |
4 | If opt.deep is true, take into account embedded cells of the subgraph cells.
5 |
6 | Return an object of the form { [original cell ID]: [clone] }.
7 |
Transform client coordinates represented by point p to the paper local coordinates.
3 | This is especially useful when you have a mouse event object and want coordinates
4 | inside the paper that correspond to event clientX and clientY point.
5 |
var localPoint1 = paper.clientToLocalPoint({ x: evt.clientX, y: evt.clientY });
6 | // alternative method signature
7 | var localPoint2 = paper.clientToLocalPoint(evt.clientX, evt.clientY);
Convert a rectangle r to SVG path commands. r is an object of the form { x: [number], y: [number], width: [number], height: [number], top-ry: [number], top-ry: [number], bottom-rx: [number], bottom-ry: [number] } where x, y, width, height are the usual rectangle attributes and [top-/bottom-]rx/ry allows for specifying radius of the rectangle for all its sides (as opposed to the built-in SVG rectangle that has only rx and ry attributes).
2 |
3 | Set properties, possibly nested, on the element port. This is an equivalent of the attr() method but this time for custom data properties.
4 |
5 | ```javascript
6 | element.portProp('port-id', 'attrs/circle/fill', 'red');
7 | element.portProp('port-id', 'attrs/circle/fill'); // 'red'
8 |
9 | element.portProp('port-id', 'attrs/circle', { r: 10, stroke: 'green' });
10 | element.portProp('port-id', 'attrs/circle'); // { r: 10, stroke: 'green', fill: 'red' }
11 |
12 | ```
13 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Link/prototype/isLink.html:
--------------------------------------------------------------------------------
1 |
link.isLink()
2 |
3 |
Always returns true. The reason the method is here is that
4 | both joint.dia.Element and joint.dia.Link inherit from
5 | joint.dia.Cell. This method is useful if you don't know what the cell is.
6 | Calling el.isLink() is equivalent to el instanceof joint.dia.Link.
7 | Example:
8 |
9 |
var cell = graph.getCell(myId)
10 | if (cell.isLink()) {
11 | // Do something if the cell is a link.
12 | }
Remove a previously set attribute from the element. path can either be a string that specifies
2 | the path to the, possibly nested, attribute to be removed or an array of more paths.
3 | The associated element view makes sure the element gets re-rendered properly.
4 | If options is passed, it can contain data that is passed over to
5 | the event listeners for the change:attrs event triggered on the element
6 | itself and also on the graph the element is in.
7 |
Return a bounding box for an element view. If opt.useModelGeometry option is set to true, the resulting bounding box will be calculated
2 | based on the element model dimensions (so that SVG sub elements sticking out of the element will be excluded). The difference from
3 | dia.Element.prototype.getBBox is that in this case, the bounding box will be adjusted based on the
4 | joint.dia.Paper translate and scale.
5 |
Remove a previously set attribute from the link. path can either be a string that specifies
2 | the path to the, possibly nested, attribute to be removed or an array of more paths.
3 | The associated link view makes sure the link gets re-rendered properly.
4 | If options is passed, it can contain data that is passed over to
5 | the event listeners for the change:attrs event triggered on the link
6 | itself and also on the graph the link is in.
7 |
Transform the point p defined in the page coordinate system to the local coordinate system.
3 |
paper.on('blank:pointerup', function(evt) {
4 | var pagePoint = g.Point(evt.pageX, evt.pageY);
5 | var localPoint1 = this.pageToLocalPoint(pagePoint);
6 | // alternative method signature
7 | var localPoint2 = this.pageToLocalPoint(evt.pageX, evt.pageY);
8 | // Move the element to the point, where the user just clicks.
9 | element.position(localPoint1.x, localPoint1.y);
10 | });
The basic model for diagram links. It inherits from joint.dia.Cell with a few additional properties and methods specific to links.
2 |
3 |
For links there are two crucial attributes: source and target. It defines the starting point and the end point of the link. It can be defined as follows:
Lets you modify the origin (zero coordinates) of a paper. An origin can also be passed to the options object of the joint.dia.Paper constructor. If the method is called a "translate" event is triggered on the paper. If the method is called with no paramater the current paper translate transformation is returned.
2 |
3 |
paper.translate(100, 200) // set origin to `x=100` and `y=200`
4 | paper.translate(100) // same as calling `translate(100,0)`
5 | paper.translate() // returns e.g. { tx: 100, ty: 100 }
6 |
Animate the element along the path SVG element (or Vectorizer object). attrs contain Animation Timing attributes describing the animation. The following example shows how to send a token along a JointJS link element:
Embed a cell (element or link) into the element. The element then becomes a parent of the embedded cell. When a parent is moved (translated),
2 | all cells embedded into that parent will move as well. If links are embedded, their vertices move with the parent. This way both options are available:
3 | if a link is not embedded but its source/target elements are and their parent moves, the embedded elements
4 | move with the parent but the link vertices stay at the same position. If the link is embedded with its source/target elements, its vertices move as the parent moves.
--------------------------------------------------------------------------------
/plugins/polyfills/xhrResponse.js:
--------------------------------------------------------------------------------
1 | /**
2 | * make xhr.response = 'arraybuffer' available for the IE9
3 | */
4 | (function() {
5 |
6 | if (typeof XMLHttpRequest === 'undefined') {
7 | return;
8 | }
9 |
10 | if ('response' in XMLHttpRequest.prototype ||
11 | 'mozResponseArrayBuffer' in XMLHttpRequest.prototype ||
12 | 'mozResponse' in XMLHttpRequest.prototype ||
13 | 'responseArrayBuffer' in XMLHttpRequest.prototype) {
14 | return;
15 | }
16 |
17 | Object.defineProperty(XMLHttpRequest.prototype, 'response', {
18 | get: function() {
19 | return new Uint8Array(new VBArray(this.responseBody).toArray());
20 | }
21 | });
22 | })();
23 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/findViewsInArea.html:
--------------------------------------------------------------------------------
1 |
paper.findViewsInArea(rect [, opt])
Find views (instance of joint.dia.ElementView) in a certain area in the paper.
2 | rect is an object with x, y, width and height properties.
3 | Return an array of views whose bounding box intersects the rect rectangle.
4 |
5 | If opt.strict is true, return an array of views whose bounding box is contained within the rect rectangle (i.e. not only intersects it).
6 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/validateEmbedding.html:
--------------------------------------------------------------------------------
1 | validateEmbedding - a function that allows you to control what elements can be embedded to
2 | what other elements when the paper is put into the embeddingMode (see above).
3 | The function signature is: function(childView, parentView) and should return
4 | true if the childView element can be embedded into the parentView element.
5 | By default, all elements can be embedded into all other elements (the function returns true no matter what).
6 |
--------------------------------------------------------------------------------
/demo/petri nets/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Petri Nets
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/demo/vectorizer.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vectorizer demo
8 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/validateConnection.html:
--------------------------------------------------------------------------------
1 | validateConnection(cellViewS, magnetS, cellViewT, magnetT, end, linkView) -
2 | decide whether to allow or disallow a connection between the source view/magnet (cellViewS/magnetS)
3 | and target view/magnet (cellViewT/magnetT). end is either "source" or "target" and tells which end of
4 | the link is being dragged. This is useful for defining whether, for example, a link starting in a port POut of element A can lead to a port PIn of elmement B. By default, all linkings are allowed.
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Link/prototype/prop.html:
--------------------------------------------------------------------------------
1 |
link.prop(properties)
2 |
3 |
Set properties, possibly nested, on the element model. This is an equivalent of the attr() method but this time for custom data properties.
Return a Vectorizer object. If svg parameter is a string, construct SVG DOM elements from the string markup. If svg is an SVG DOM element, just wrap that element by the Vectorizer object and return it. You can think of this function as of the jQuery $ function except that the V function does not accept selectors. The Vectorizer object contains a reference to the original SVG DOM element in its node property.
4 |
5 |
var vel = V('<g><rect/><text/></g>');
6 | console.log(vel.node);
Transform the point p defined in the paper coordinate system to the local coordinate system.
3 |
var paperCenter = g.Point(paper.options.width / 2, paper.options.height / 2);
4 | var localPoint1 = paper.paperToLocalPoint(paperCenter);
5 | // alternative method signature
6 | var localPoint2 = paper.paperToLocalPoint(paper.options.width / 2, paper.options.height / 2);
7 | // Move the element to the center of the paper viewport.
8 | var elSize = element.size();
9 | element.position(localPoint1.x - elSize.width, localPoint1.y - elSize.height);
Return an array of all the successors of element. By default, Depth-first search algorithm is used (important for the order of returned elements).
2 |
3 | If opt.breadthFirst is set to true, use Breadth-first search algorithm instead.
4 |
5 | If opt.deep is set to true, take into account embedded elements too (see dfs() for details).
6 |
Return an array of all the predecessors of element. By default, Depth-first search algorithm is used (important for the order of returned elements).
2 |
3 | If opt.breadthFirst is set to true, use Breadth-first search algorithm instead.
4 |
5 | If opt.deep is set to true, take into account embedded elements too (see dfs() for details).
6 |
This function can be directly used in the dia.PaperlinkConnectionPoint parameter. When used, links will try to find the best connection point right on the perimeter of the connected shape rather than only on the bounding box. See the image below.
4 |
5 |
6 |
7 |
var paper = new joint.dia.Paper({
8 | // ...
9 | linkConnectionPoint: joint.util.shapePerimeterConnectionPoint
10 | // ...
11 | })
12 |
13 |
--------------------------------------------------------------------------------
/wrappers/vectorizer.head.js:
--------------------------------------------------------------------------------
1 | (function(root, factory) {
2 |
3 | if (typeof define === 'function' && define.amd) {
4 |
5 | // AMD. Register as an anonymous module.
6 | define(['g'], function(g) {
7 | return factory(g);
8 | });
9 |
10 | } else if (typeof exports === 'object') {
11 |
12 | // Node. Does not work with strict CommonJS, but
13 | // only CommonJS-like environments that support module.exports,
14 | // like Node.
15 | var g = require('./geometry');
16 |
17 | module.exports = factory(g);
18 |
19 | } else {
20 |
21 | // Browser globals.
22 | var g = root.g;
23 |
24 | root.Vectorizer = root.V = factory(g);
25 | }
26 |
27 | }(this, function(g) {
28 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Graph/prototype/isNeighbor.html:
--------------------------------------------------------------------------------
1 |
graph.isNeighbor(elementA, elementB [, opt])
Return true if elementB is a neighbor of elementA.
2 | If opt.deep is set to true, take into account embedded elements.
3 |
4 | If opt.outbound is set to true, return true only if elementB is a successing neighbor of elementA.
5 |
6 | Similarly, if opt.inbound is set to true, return true only if elementB is a preceeding neighbor of elementA.
7 |
Get all the neighbors of element in the graph. Neighbors are all the elements connected
2 | to element via either an inbound or an outbound link. If opt.inbound is true,
3 | only inbound neighbords (all neighbors connected with a link who's target is the element) will be returned. Similarly, if opt.outbound is true, only
4 | outbound neighbors will be returned. If opt.deep is true,
5 | return also all the neighbors of all the elements embedded inside element.
Send a token along the link. token is an SVG element that will be animated along the link path for duration milliseconds (default is 1000ms). callback will be called once the token reaches the end of the link path. Example:
3 |
// Send an SVG circle token along the link.
4 | paper.findViewByModel(link).sendToken(V('circle', { r: 7, fill: 'green' }).node)
5 |
Note that in the code above, we use the Vectorizer mini-library to create the SVG circle element.
Transform the rectangle rect defined in the client coordinate system to the local coordinate system.
3 |
var bcr = paper.svg.getBoundingClientRect();
4 | var localRect1 = paper.clientToLocalRect({ x: bcr.left, y: bcr.top, width: bcr.width, height: bcr.height });
5 | // alternative method signature
6 | var localRect2 = paper.clientToLocalRect(bcr.left, bcr.top, bcr.width, bcr.height);
7 | // Move the element to the center of the paper viewport.
8 | var localCenter = localRect1.center();
9 | var elSize = element.size();
10 | element.position(localCenter.x - elSize.width, localCenter.y - elSize.height);
Set height of the subelement relatively to the height of the element referenced to by the selector in ref attribute.
3 | If the value is in the [0, 1] interval (or expressed in percentages, e.g. '80%'), the height of the subelement will be set as a percentage
4 | of the height of the referenced element. If the value is <0 or >0, the height
5 | of the subelement will be smaller/bigger than the height of the referenced element by the amount specified.
6 | Note that this makes sense only for SVG elements that support width and height attributes, such
7 | as <rect>.
8 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/markAvailable.html:
--------------------------------------------------------------------------------
1 | markAvailable - marks all the available magnets or elements when a link is dragged (being reconnected). Default is false. This gives a hint to the user to what other elements/ports this link can be connected.
2 | What magnets/cells are available is determined by the validateConnection function.
3 | Internally, available magnets (SVG elements) are given the 'available-magnet' class name and all the available cells the 'available-cell' class name. This allows you to change the
4 | styling of the highlight effect.
5 |
--------------------------------------------------------------------------------
/docs/src/vectorizer/api/prototype/translateAndAutoOrient.html:
--------------------------------------------------------------------------------
1 |
2 |
Auto-orient the element. This basically implements the orient=auto attribute of markers. The easiest way of understanding on what this does is to imagine the element is an arrowhead. Calling this method on the arrowhead makes it point to the position point while being auto-oriented (properly rotated) towards the reference point. target is the element relative to which the transformations are applied. Usually the root SVG element which is also default if not target is passed.
Return an array of all the embedded cells of an element. If all you need is id's of all the embedded cells,
2 | use element.get('embeds'). If opt.deep is true, all the deeply embedded
3 | cells will be returned. The order in which the cells are returned depends on the search algorithm used. By
4 | default, Depth-first search (DFS) algorithm is used. If
5 | opt.breadthFirst is true, the Breadth-first search algorithm will be used instead.
Find the intersection of a line starting in the center of the SVG node ending in the point ref (an object of the form { x: Number, y: Number }). target is an SVG element to which this node's transformations are relative to. In JointJS, target is usually the paper.viewport SVG group element. Note that ref point must be in the coordinate system of the target for this function to work properly. This function returns a point in the target coordinte system (the same system as ref is in) if an intersection is found. Returns undefined otherwise.
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/interactive.html:
--------------------------------------------------------------------------------
1 | interactive - if set to false, interaction with elements and links is disabled. If it is a function, it will be called with the cell view in action and the name of the method it is evaluated in ('pointerdown', 'pointermove', ...). If the returned value of
2 | such a function is false interaction will be disabled for the action. For links, there are special properties of the interaction object that are useful to disable the default behaviour. These
3 | properties are: vertexAdd, vertexMove, vertexRemove and arrowheadMove. By setting any of these properties to false, you can disable the related default action on links.
--------------------------------------------------------------------------------
/docs/src/vectorizer/intro.html:
--------------------------------------------------------------------------------
1 |
JointJS exports three global variables, the joint namespace, the V variable and the g variable (that is described later in the Geometry section). The V variable is a function of a little SVG helper library that we call Vectorizer. The reason why this library sits in its own namespace and not inside the joint namespace is that it can be used completely standalone, even without JointJS. It is a very helpful library making life easier when dealing with SVG. You can think of it as of a very lightweight jQuery for SVG. If you want to use Vectorizer as a standalone library, see the download page that contains both the development and minified versions.
joint.dia.Paper is the view for the joint.dia.Graph model. It inherits from the Backbone View. When a paper is associated with a graph, the paper makes sure that all the cells added to the graph are automatically rendered.
2 |
3 |
var graph = new joint.dia.Graph
4 | var paper = new joint.dia.Paper({
5 | el: $('#paper'),
6 | width: 600,
7 | height: 400,
8 | gridSize: 10,
9 | model: graph
10 | });
11 |
12 | var rect = new joint.shapes.basic.Rect({
13 | position: { x: 50, y: 70 },
14 | size: { width: 100, height: 40 }
15 | });
16 |
17 | graph.addCell(rect);
18 |
19 |
Paper automatically handles this change and renders the rectangle to the SVG document that it internally holds.
Scale a paper by sx factor in x axis and sy factor in y axis.
2 | ox and oy are optional and determine the origin of the scale transformation. This method effectively implements a paper zoom in/out. If the method is called a "scale" event is triggered on the paper. When the method is called with no parameter the current paper scale transformation is returned.
3 |
4 |
paper.scale(2) // scale 2x (uniformly)
5 | paper.scale(2,3) // scale 2x in `x` axis 3x in `y` axis (non-uniformly)
6 | paper.scale(2,2,100,100) // scale with the origin of the transformation at point `x=100` and `y=100`
7 | paper.scale() // returns e.g. { sx: 2, sy: 2 }
8 |
The following list contains properties exposed by the paper object:
2 |
3 |
4 |
svg - a reference to the SVG document object the paper uses to render all the graphics.
5 |
viewport - a reference to the SVG group <g> element the paper wraps all the rendered elements and links into. Paper transformations
6 | such as scale is performed on this element.
7 |
defs - a reference to the SVG <defs> element used to define SVG elements for later reuse. This is also a good place to put SVG masks, patterns, filters and gradients.
8 |
9 |
10 |
Normally, you do not need to access these properties directly but in some (advanced) situations, it is handy to have access to them.
Transform a rectangle specified by r (an object with x, y, width and height properties) by an SVG transformation represented by matrix. This function is used internally in the V.prototype.bbox method to return a bounding box of an SVG element relative to another SVG parent element. However, this can be used elsewhere too, that's why it is publicly exposed. Whenever you need to transform a bounding box to a coordinate system of another element, use this function. To get the transformation matrix of the target element relative to which you want to tranform your rectangle, use e.g. the native SVG method: var matrix = svgSourceElement.getTransformToElement(svgTargetElement).
Transform the point p defined in the local coordinate system to the client coordinate system.
3 |
var rightMidPoint = element.getBBox().rightMiddle();
4 | var clientPoint1 = paper.localToClientPoint(rightMidPoint);
5 | // alternative method signature
6 | var clientPoint2 = paper.localToClientPoint(rightMidPoint.x, rightMidPoint.y);
7 | // Draw an HTML rectangle next to the element.
8 | var div = document.createElement('div');
9 | div.style.position = 'fixed';
10 | div.style.background = 'red';
11 | div.style.left = clientPoint1.x + 'px';
12 | div.style.top = clientPoint1.y + 'px';
13 | div.style.width = '40px';
14 | div.style.height = '40px';
15 | div.style.marginLeft = '10px';
16 | div.style.marginTop = '-20px';
17 | document.body.appendChild(div);
18 |
19 |
--------------------------------------------------------------------------------
/docs/src/joint/api/dia/Paper/prototype/options/restrictTranslate.html:
--------------------------------------------------------------------------------
1 | restrictTranslate - restrict the translation (movement) of elements by a given bouding box. If set to true, the user will not be able to move elements outside the boundary of the paper area. It's set to false by default. This option also accepts a function with signature function(elementView) in which case it must return a bounding box (an object of the form { x: Number, y: Number, width: Number, height: Number }) that defines the area in which the element represented by elementView can be moved. For example, to restrict translatoin of embedded elements by the bounding box defined by their parent element, you can do:
2 |
3 |
Set the element position to x and y coordinates. This is almost equivalent to
2 | element.set('position', { x: x, y: y }, opt). However, this method provides some additional functionality.
3 | If you set opt.parentRelative flag to true, the x and y
4 | coordinates will be treated relatively to the parent element of this element. If position() is called
5 | without arguments, it returns the current position. If position({ parentRealtive: true }) is called
6 | without x and y coordinates and with the parentRelativeflag set to true,
7 | the method returns the current position of the element relative to its parent.
8 |
Sample the underlying SVG element (it currently works only on paths - where it is most useful anyway). Return an array of objects of the form { x: Number, y: Number, distance: Number }. Each of these objects represent a point on the path. This basically creates a discrete representation of the path (which is possible a curve). The sampling interval defines the accuracy of the sampling. In other words, we travel from the beginning of the path to the end by interval distance (on the path, not between the resulting points) and collect the discrete points on the path. This is very useful in many situations. For example, SVG does not provide a built-in mechanism to find intersections between two paths. Using sampling, we can just generate bunch of points for each of the path and find the closest ones from each set.
--------------------------------------------------------------------------------
/plugins/connectors/joint.connectors.smooth.js:
--------------------------------------------------------------------------------
1 | joint.connectors.smooth = function(sourcePoint, targetPoint, vertices) {
2 |
3 | var d;
4 |
5 | if (vertices.length) {
6 |
7 | d = g.bezier.curveThroughPoints([sourcePoint].concat(vertices).concat([targetPoint]));
8 |
9 | } else {
10 | // if we have no vertices use a default cubic bezier curve, cubic bezier requires
11 | // two control points. The two control points are both defined with X as mid way
12 | // between the source and target points. SourceControlPoint Y is equal to sourcePoint Y
13 | // and targetControlPointY being equal to targetPointY.
14 | var controlPointX = (sourcePoint.x + targetPoint.x) / 2;
15 |
16 | d = [
17 | 'M', sourcePoint.x, sourcePoint.y,
18 | 'C', controlPointX, sourcePoint.y, controlPointX, targetPoint.y,
19 | targetPoint.x, targetPoint.y
20 | ];
21 | }
22 |
23 | return d.join(' ');
24 | };
25 |
--------------------------------------------------------------------------------
/docs/src/joint/api/util/flattenObject.html:
--------------------------------------------------------------------------------
1 |
util.flattenObject(object, delim, stop)
2 |
3 |
Flatten a nested object up until the stop function returns true. The stop function takes the value of the node currently traversed. delim is a delimiter for the combined keys in the resulting object. Example:
