Releases: clientIO/joint
Release v3.3.1
CHANGELOG
- uglified files encode Unicode characters as ASCII
- use polyfills from core-js
- dia.Cell - remove() passes options to unembed() internally to maintain consistency
Release v3.3.0
CHANGELOG
- Prevent prototype pollution - lodash v4.17.20, fix util.setByPath()
- Prevent DoS - fix util.unsetByPath()
- add Element Tools tutorial
- highlighters - new API, add mask highlighter
- demo.ELK - add Eclipse Layout Kernel demo
- demo.Container - add collapse/expand container demo
- demo.Typescript - show class style shape definition
code
import { shapes, dia } from './vendor/joint';
export class MyShape extends dia.Element {
defaults() {
return {
...super.defaults,
type: 'myNamespace.MyShape',
size: { width: 100, height: 80 },
attrs: {
body: {
refCx: '50%',
refCy: '50%',
refRx: '50%',
refRy: '50%',
strokeWidth: 2,
stroke: '#333333',
fill: '#FFFFFF'
},
label: {
textVerticalAnchor: 'middle',
textAnchor: 'middle',
refX: '50%',
refY: '50%',
fontSize: 14,
fill: '#333333'
}
}
}
}
markup = [{
tagName: 'ellipse',
selector: 'body'
}, {
tagName: 'text',
selector: 'label'
}]
test(): void {
console.log(`A prototype method test for ${this.get('type')}`);
}
static staticTest(i: number): void {
console.log(`A static method test with an argument: ${i}`);
}
}
Object.assign(shapes, {
myNamespace: {
MyShape
}
});
- demo.HTML - implement z-index sorting
- dia.Paper - add snapLabels option
- dia.Paper - restrictTranslate option defined as function returning a function
- dia.Graph - fix hasActiveBatch()
- dia.Element - prevent unnecessary rounding errors in resize()
- dia.Element - add insertPort() to support inserting port at a given position
- dia.Link - fix order of points in getPolyline()
- dia.LinkView - prevent connection validation on magnets previously validated
- dia.CellView - fix update order of nodes when ref in use
- dia.ToolsView - enable adding tool to a view, which has not been rendered
- util.breakText - fix height for a text with empty lines
- highlighters.stroke - add useFirstSubpath option
- routers.manhattan - fix scan directions order
- connectors.jumpover - request updates after batch:stop
- dia.attributes - add magnetSelector & containerSelector
- dia.attributes - textWrap takes letter-spacing into account
- Vectorizer - add createSVGStyle() and createCDATASection() static methods
- Geometry - add getSubpaths() to Path
- Geometry - add round() methods
Release v3.2.0
CHANGELOG
- add Sequence Diagram demo
- add HTML Elements demo
- upgrade jQuery dependency (
~3.5.0
) - dia.Paper - add
beforeRender
andafterRender
options, addhasScheduledUpdates()
, triggerrender:done
in sync mode - dia.Paper - fix missing initial
render:done
event - dia.Paper - prevent the prototype options modification, persist functions passed as options
details
new joint.dia.Paper({
// e.g. fixes `defaultConnector` option defined as a function
defaultConnector: (sourcePoint, targetPoint, route) => {
const polyline = new g.Polyline([sourcePoint, ...route, targetPoint]);
return `M ${polyline.serialize()}`;
}
});
- dia.Paper -
scaleContentToFit()
optionpadding
accepts an object
details
paper.scaleContentToFit({ padding: { top: 50, bottom: 10, horizontal: 10 }});
- dia.Paper - fix
isMounted
argument ofviewport()
option
details
new joint.dia.Paper({
viewport: function(view, isMounted) {
if (isMounted) {
// the view was already mounted
// it's visible in the paper
} else {
// the view was just created or was detached by this function in the previous run
// it's not visible in the paper (it's not in the DOM)
}
// return `true` to mount the view
// return `false` to detach the view
}
});
- dia.Paper - dynamic link update priorities (fix for "link connected to other two links" update bug)
- dia.Element - port removal runs in batch
- dia.Element - add
getGroupPorts()
- dia.Element - prevent exception in
getPointFromConnectedLink()
when port does not exist - dia.LinkView - fix never ending batch for legacy link tools
- dia.LinkView - add
requestConnectionUpdate()
- dia.LinkView - trigger
link:snap:connect
andlink:snap:disconnect
events
- dia.LinkView - prevent exception when labels and connection require update
- dia.LinkView - measure snap distance for links from magnet's boundary
- dia.LinkView - add
getEndConnectionPoint()
- mvc.View - add
DETACHABLE
property to ignore viewport matching,FLAG_INSERT
&FLAG_REMOVE
defined on per view basis - linkTools.Anchor: add
resetAnchor
option - linkTools.Segments: add
stopPropagation
option - connectionPoints.anchor - add
align
andalignOffset
options - attributes.textWrap: add
maxLineCount
option - util.breakText - retain new line characters, add
maxLineCount
option - util.sanitizeHTML: sanitize attribute values with "data:" and "vbscript:"
- Geometry - add
parallel()
to Line, addserialize()
to Point and Line
Release v3.1.1
CHANGELOG
- dia.CellView - prevent DOM exceptions when invalid attrs provided
- dia.ToolView - prevent
contextmenu
event (uses paper.options.guard now)
Release v3.1.0
CHANGELOG
- add RoughJS demo
- add dia.elementTools: Button, Remove, Boundary
- improve low-level performance for large graphs
- fix ES5 dependencies
- dia.Paper - validateMagnet() callback has
evt
argument - dia.Paper - ignore viewport when removing views, register unmounted views on render
- dia.Graph - fix bfs() stop condition
- dia.Element - make sure only elements are taken into account in fitEmbeds()
- dia.LinkView - fix label rendering after multiple changes made to model
- dia.LinkView - fix missing
pointerup
event for non-interactive labels - linkTools.Boundary - padding can be defined separately for each side
- dia.ToolView - support reusable tools
- connectors.jumpover - add
radius
option to make corners rounded - layout.DirectedGraph - remove unnecessary vertices
- dia.attributes - add
stubs
option toconnection
attribute
- dia.attributes - add
displayEmpty
for text elements - Vectorizer - fix e2c() overflowing the stack in normalizePathData()
- Geometry - add simplify() to Polyline (remove redundant points)
Release v3.0.4
CHANGELOG
package.json
- add a browser key to point to dist (fix Webpack build in IE11)- dia.Paper - pass Backbone model options to view update (cell removal &
z
change) - dia.CellView - fix
mouseleave
event in async mode - linkTools.Vertices - fix
vertexAdding
option
Release v3.0.3
CHANGELOG
- allow for automatic patch upgrades for dependencies
- changes to config options are respected
- dia.Paper - ensure SVG document has id
- dia.Paper - fix viewport matching for links
- dia.Graph - make
hasActiveBatches()
use the same logic for various signatures - dia.CellView - properly separate elements and ports CSS selectors
Release v3.0.2
CHANGELOG
- layout.DirectedGraph - allow injecting
dagre
andgraphlib
as an option property - routers.Manhattan - use fallback when source and target are exactly the same
- fix markup TypeScript definition
Release v3.0.1
CHANGELOG
- remove all global variables
- dia.LinkView - fix
cell:pointerup
event
Release v3.0.0
CHANGELOG
Compatibilty warnings
- dia.CellView - support for asynchronous updates and freezing
details
A major breaking change of the release.
When a view needs an update, it requests the update from the paper first. The paper confirms the update immediately (sync
mode) or in the next animation frame (async
mode). The updates may be also held by the paper as long as the paper is frozen
and released when the paper changes its state to unfrozen
.
A CellView
is no longer listening for a specific attribute change (e.g change:size
). It listens to the change
event, which is fired after all attributes have changed.
model.set({ a: 1, b: 2 }); // will trigger `change:a`, `change:b` and `change`.
// PREVIOUSLY
joint.dia.ElementView.extend({
initialize(...args) {
joint.dia.ElementView.prototype.initialize.apply(this, ..args);
this.listenTo(this.model, 'change:faded', this.toggleFade);
},
toggleFade() {
this.el.style.opacity = this.model.get('faded') ? 0.5 : 1;
}
});
// NOW 1. a quick backwards compatible fix which works in `sync` mode
joint.dia.ElementView.extend({
initialize(...args) {
joint.dia.ElementView.prototype.initialize.call(this, ...args);
this.listenTo(this.model, 'change', this.onModelChange);
},
onModelChange() {
if (this.model.hasChanged('faded')) this.toggleFade();
},
toggleFade() {
this.el.style.opacity = this.model.get('faded') ? 0.5 : 1;
}
});
In order to support async
mode the following changes are necessary. The update requests are sent to the paper via flags
(a flag is an arbitrary string or array of strings) and later received back all at once. The paper accumulates flags received and confirms the updates when the right time has come.
// NOW 2. a fix which supports both `sync` and `async` mode and freezing/unfreezing feature
joint.dia.ElementView.extend({
// `addPresentationAttribute()` makes sure that all super class presentation attributes are preserved
presentationAttributes: joint.dia.ElementView.addPresentationAttributes({
// mapping the model attributes to flags
faded: 'flag:opacity'
}),
// this method receives all scheduled flags and based on them updates the view
confirmUpdate(flags, ...args) {
joint.dia.ElementView.prototype.confirmUpdate.call(this, flags, ...args);
if (this.hasFlag(flags, 'flag:opacity')) this.toggleFade();
},
toggleFade() {
this.el.style.opacity = this.model.get('faded') ? 0.5 : 1;
}
});
- dia.CellView - remove deprecated
getStrokeBBox()
details
The implementation of the method above was naive and didn't work in the majority of cases.
// read the actual stroke-width
const strokeWidth = elementView.model.attr('body/strokeWidth');
// add the half of the stroke width to all the sides of the bounding box
const strokeBBox = elementView.getBBox().inflate(strokeWidth / 2);
- dia.Paper - async mode revamped (viewport matching, rendering progress)
details
render:done
event is triggered anytime scheduled updates are done (rendered/updated).
// PREVIOUSLY
paper.on('render:done', () => { /* all rendered */ });
graph.resetCells([el1, el2, l1]);
// NOW 1.
paper.once('render:done', () => { /* all rendered and this callback is removed */ })
graph.resetCells([el1, el2, l1]);
// NOW 2.
paper.freeze();
graph.resetCells(arrayOfCells);
paper.unfreeze({
batchSize: 100,
progress: (done, current, total) => {
if (done) {
paper.unfreeze(); // remove the progress callback
// hide a progress bar
} else {
// update a progress bar (current / total * 100)%
}
}
}) ;
batchSize
in the paper async option is ignored.
// PREVIOUSLY
const paper = new joint.dia.Paper({ async: { batchSize: 200 }});
// NOW
const paper = new joint.dia.Paper({ frozen: true, async: true });
paper.unfreeze({ batchSize: 200 });
- dia.Paper - cells are rendered into the
paper.cells
(previously calledpaper.viewport
), transformations are applied topaper.layers
(parent ofpaper.cells
)
details
A minor change which will allow us to implement other features in the future without breaking changes (layers for cells, labels on top of all other cells)
paper.viewport
is now deprecated and refers to the same node as paper.cells
// PREVIOUSLY
// 1. transforming the paper
V(paper.viewport).scale(2,2);
// 2. reading transformation matrix of the paper
const transformationString = paper.viewport.getAttribute('transformation');
// 3. adding custom nodes to the viewport
const rect = V('rect', { x: 10, y: 10, width: 100, height: 100 });
V(paper.viewport).append(rect);
// NOW
// 1.
paper.scale(2,2);
// 2.
const transformationString = V.matrixToTransformString(paper.matrix());
// 3.
const myLayer = V('g');
V(paper.layers).prepend(myLayer);
/*
All my nodes will be under the elements and links
Alternatively call `V(paper.layers).append(myLayer)` so the nodes will be above the cells
*/
const rect = V('rect', { x: 10, y: 10, width: 100, height: 100 });
myLayer.append(rect);
myLayer.empty() // remove all custom nodes
- dia.Graph -
getBBox()
accepts no parameters and returns the bounding box of the entire graph
details
To retrieve the bounding box of multiple cells use getCellsBBox()
instead
// PREVIOUSLY
const cellsBBox = graph.getBBox([el1, el2, el3]);
// NOW
const cellsBBox = graph.getCellsBBox([el1, el2, el2]);
- dia.Graph -
getCellsBBox(cells)
does not ignore links passed viacells
parameter
details
// PREVIOUSLY
const cellsBBox = graph.getCellsBBox([el1, el2, l1, l2]);
// NOW
// Passing links could lead into a different result (vertices position can affect the resulting bounding box)
const cellsBBox = graph.getCellsBBox([el1, el2]);
- Vectorizer - fix
attr()
for attributes inxmlns
namespace
details
Will not affect you unless you use the namespace below directly.
// `xmlns:link` is now defined with the correct namespace
V(el).attr('xmlns:link', 'http://www.w3.org/1999/xlink');
// PREVIOUSLY
V.namespace.xmlns = 'http://www.w3.org/2000/svg';
// NOW
V.namespace.xmlns = 'http://www.w3.org/2000/xmlns/';
V.namespace.svg = 'http://www.w3.org/2000/svg';
- remove deprecated
PortsModelInterface
andPortsViewInterface
fromjoint.shapes.basic
Notable changes
- upgrade dependencies (Backbone
v1.4.0
, Dagrev0.8.4
, Graphlibv2.1.6
, jQueryv3.4.1
) - full support for ES Modules
- support for Link to Link connections
- add Mix Bus demo
- dia.Paper - implement viewport matching (remove views from the DOM when not in the viewport) via
viewport
option andcheckViewport()
- dia.Paper - add
freeze()
,unfreeze()
,isFrozen()
and optionfrozen
to stop/start views updates - dia.Paper - add
requireView()
,dumpViews()
,updateViews()
to force views to update - dia.Paper - add sorting options (none, approximate, exact)
- dia.Paper - add
anchorNamespace
,linkAnchorNamespace
,connectionPointNamespace
,defaultLinkAnchor
options - dia.Paper - add
useModelGeometry
forscaleContentToFit()
,fitToContent()
,getContentBBox()
,getContentArea()
- dia.Paper - add
contentArea
forscaleContentToFit()
,fitToContent()
- dia.Paper -
fitToContent()
returns area (g.Rect
) of the content - dia.Graph - add
indirect
option forgetNeighbors()
,getConnectedLinks()
,isNeighbor()
for link-link connections - dia.Link - add
priority
attribute for anchors - dia.Link - add
getSourceCell()
,getTargetCell()
,getPolyline()
,getSourcePoint()
,getTargetPoint()
,getBBox()
- dia.Link -
getSourceElement()
andgetTargetElement()
finds also indirect elements - dia.Link - add
angle
,keepGradient
andensureLegibility
options for labels - dia.ElementView - add
findPortNode()
- dia.LinkView - properly revert
pointer-events
attribute after a link interaction - dia.LinkView - add root node selector for string markup
- dia.CellView - keep a dragged view always under the pointer (esp. when
restrictTranslate
in use) - dia.CellView - make sure
cell:mouseleave
andcell:mouseenter
events are always called when the mouse leaves/enters a cell - dia.CellView - fix referenced bounding box for nodes outside the rotatable group
- dia.Cell - add
generateId()
,generatePortId()
- anchors -
modelCenter
anchor acceptsdx
,dy
options - linkAnchors - add anchors for link-link connection (ratio, length, perpendicular...