grapheditor

Added

• Added more fine grained options for controlling how the user can interact with the grapheditor
• "select" attribute to control the default selection behaviour (default: multiple; other: none, single)
• "node-click" attribute to control the default node click behaviour (default: select; other: none, link)
• "node-drag" attribute to control the default node drag behaviour (default: move; other: none, link)
• "edge-drag" attribute to control the default edge drag behaviour (default: link; other: none)
• "background-drag" attribute to control the default node drag behaviour (default: move; other: none, select, zoom, custom)
• "brushdrag" and "brush" events. Used when "background-drag" is set to select, zoom or custom
• Added flag in text components to mark them as draggable (defaults to true)
• Added padding parameter to zoomToBox to allow changing or removing the added padding
• All relevant interfaces and functions are now (re)exported at top level

Deprecated

• Deprecated "mode" attribute on the network-graph html node. See the list of added attributes that allow more fine grained control
• Passing JSON via HTML attributes with nonstandard ' as quote is deprecated.
  Deprecated: nodes="[{'id': 1, 'x': 0, 'y': 0}]" (also edges and classes)
  Replace with: nodes='[{"id": 1, "x": 0, "y": 0}]'

Incompatible changes

• Updated to TypeScript 4.6 compiler
• Updated D3 dependecies to version 7. Please carfeully read about the changes in version 6 and 7 (changelog) if your code uses D3 functions.
• Removed the style slot in the default template as it did not work to isolate style anyway
• Removed deprecated rotation property of edge markers
• Partially removed support for deprecated "mode" attribute on the network-graph html node
• Removed event, getter and setter associated with the "mode" attribute
• Removed deprecated style slot
• Wrapping text now generates less data-* attributes in the dom and is faster when the text does not need to be wrapped again
• Wrapping text now re-wraps text when (some) style attributes change
• Node and edge IDs now use a data-id attribute without any prefixes. CSS selectors relying on matching nodes by ID need to be changed (use getSingleNodeSelection or getSingleEdgeSelection if possible)

Added

• Option to scale text by specifying a scale in the data-line-wraps attribute
• GroupingManager.getAllRegisteredGroups helper function

Incompatible changes

• All wrapped text elements will now have a transform origin set that allows scaling them to be more intuitive. This may break some css layouts. See "Api > Text Wrapping > resetTextTransform" for more information on how this is calculated.
• Specified text height is now always interpreted as maximum allowed text height in all wrapping modes

Added

• Added svg-template attribute to specify a css selector of a html template containing the svg to load
• Added isolation of grapheditor styles when loading the svg from an html template
• Added ability to vertically center wrapped text (with data-text-center-y attribute)
• Added data-wrap-lines attribute for wrapping text in lines with different max widths
• Added ability to wrap text into more complex shapes (e.g. circles) with the data-wrap-lines attribute

Refactored

• Refactored text wrapping code to cause less dom updates

Fixed

• Text wrapping only worked if the text tag also had a text css class. Now all text tags will be wrapped automatically.

Added

• Added ResizeManager that allows node resizing via api and drag and drop
• Added 'noderesize' event fired when resizing a node with the resize manager
• Added 'svginitialized' event when the grapheditor initializes a new svg
• Added methods getSVG, getGraphGroup, getNodesGroup, getEdgesGroup, getEdgeSelection and getDraggedEdgeSelection to grapheditor
• Added utility methods removeAllChildNodes and copyTemplateSelectionIntoNode n util to help working with static templates
• Added public updateEdgeGroupClasses to only update the classes of edges

Fixed

• Fixed removeEdge not working with string ids
• Fixed cancelling 'edgeremove' event leaving the original edge with the ghost class until completeRender was called
• Potentially fixed removing edge throwing an error when the edge is removed from the object cache

Fixed

• Fixed build errors when using the package in a typescript project

Known Issue: this version was compiled using typescript 3.8!
The resulting .d.ts are only compatible with typescript versions >= 3.6. See typescript 3.7 release notes for more information.

This will be the last release to include this warning in the changelog!

Added

• Added complete render flags to some GroupBehaviour callbacks and the node movement information
• Added typesVersions field to package.json to get a warning when using this package with an incompatible typescript version

Fixed

• Fixed loading templates sometimes crashing on firefox
• Fixed target detection for dragged edges sometimes not working correctly
• Fixed group drag and drop checking join conditions for the wrong node

Known Issue: this version was compiled using typescript 3.7!
The resulting .d.ts are only compatible with typescript versions >= 3.6. See typescript 3.7 release notes for more information.

Added

• Added getNodeBBox to get the bounding box of a node

Fixed

• Fixed adding or removing edges or nodes with the api not always triggering an event
• Fixed the result of calculateBoundingRect sometimes having negative width or height
• Fixed GroupBehaviour interface not allowing additional properties
• Fixed LinkHandles of a circle not taking the circle center into account

Known Issue: this version was compiled using typescript 3.7!
The resulting .d.ts are only compatible with typescript versions >= 3.6. See typescript 3.7 release notes for more information.

Fixed

• Fixed error when dragging a edge without createdFrom set
• Fixed updateGraphPositions not declared as public

Known Issue: this version was compiled using typescript 3.7!
The resulting .d.ts are only compatible with typescript versions >= 3.6. See typescript 3.7 release notes for more information.

Added

• Added currentViewWindow to get the currently visible area of the graph
• Added currentViewWindow to the 'zoomchange' event
• Added 'render' event and onBeforeCompleteRender callback
• Added 'edgetextdragstart' and 'edgetextdragend' events
• Added absolute positioning of elements on an edge path with absolutePositionOnLine
• Added bidirectional/non-directional edges
• Added explicit dragHandles for edges (interface EdgeDragHandle)

Fixed

• Fixed old node content staying when node type was changed
• Fixed dragend event listed as dragstart in the documentation
• Fixed null pointer when multiline textwrapping ends with a single character

Incompatible changes

• Interface PathPositionRotationAndScale has a new attribute absolutePositionOnLine (affecting edge markers, text components and LinkDragHandles)
• Interface Edge has two new attributes: dragHandles and isBidirectional

Known Issue: this version was compiled using typescript 3.7!
The resulting .d.ts are only compatible with typescript versions >= 3.6. See typescript 3.7 release notes for more information.

Added

• Added currentZoomTransform to get the current zoom transform of the graph
• Added zoomToBox to zoom to a specific area of the graph
• Added 'zoomchange' events to the grapheditor
• Added getGraphPointFromClientCoordinates as inverse of getClientPointFromGraphCoordinates
• Added 'nodedragstart' and 'nodedragend' events
• Added public updateNodeClasses to only update the classes of nodes

Fixed

• Fixed wrong imports depending on 'd3' instead of 'd3-selection'

Known Issue: this version was compiled using typescript 3.7!
The resulting .d.ts are only compatible with typescript versions >= 3.6. See typescript 3.7 release notes for more information.

Added

• Added more specific typing information
• The order of nodes and edges in the dom is now the same as the order in the node or edge list
• Added getNodesFromPoint and getClientPointFromGraphCoordinates to get a list of nodes that overlap a certain point
• Added moveNode to move a node with all special node movement logic
• Added Groups and a GroupingManager
• Added GroupBehaviour for changing how a group interacts with its own and other nodes
• Added onBeforeNodeMove NodeMovementInformation used when a node moves
• Added NodeDropZones for groups to specify where a dragged node should be placed
• Added util module to collect small interfaces and functions
• Added Rect interface to util
• Added calculateBoundingRect that calculates a bounding box of a bunch of rects

Incompatible changes

• Changed the type of Node.type from any to string

Known Issue: this version was compiled using typescript 3.7!
The resulting .d.ts are only compatible with typescript versions >= 3.6. See typescript 3.7 release notes for more information.

Added

• Added 'backgroundclick' event
• Added api for node selection (selectNode, deselectNode, changeSelected and selected)

Fixed

• Fixed all possible classes in the classes attribute of the network-graph beeing applied to nodes/edges if setNodeClass/setEdgeClass was null
• Fixed marker for MarkerStart not beeing rotated 180° like the line attachement point
• Fixed removeEdge not working correctly with edges with explicit id

Known Issue: this version was compiled using typescript 3.7!
The resulting .d.ts are only compatible with typescript versions >= 3.6. See typescript 3.7 release notes for more information.

Added

• Added Edge.markerStart
• Added data-line-attachement-point to marker templates to specify where an edge attaches to the marker if the marker is an end marker
• Added dynamic templates for Nodes, Markers,TextComponents and LinkHandles
• Added dynamic template registry
• Added static template registry
• Consolidated positioning for all objects placed along an edge (markers and text components)
• Added rotation to text components
• Added rotation to link handles
• Added EdgePathGenerator and EdgePathGeneratorRegistry

Deprecated

• Deprecated Marker.rotate. Use Marker.absoluteRotation and Marker.relativeRotation instead.

Incompatible changes

• Removed Marker.lineOffset. Use data-line-attachement-point in marker template instead.
• Removed TextComponent.class. Use custom dynamic templates instead.
• All text components are wrapped in a <g> element. This will break some css styles!

Added

• Use slots instead of html templates to load custom styles and templates into grapheditor
• Templating now uses standard svg groups in the defs section of the provided svg.
• Add ability to template link handles with marker templates
• Add default marker template (used as link handle template)

Fixed

• attributePath text components not working correctly

Incompatible changes

• Removed templating using html templates (old template content can be reused)
• All link handles are now rendered using marker templates
• Changed template-type attribute of templates to data-template-type
• The network-graph tag can no longer be empty it must at least contain a svg tag for the graph slot

Added

• originalEdge in detail of edgedrop for edges that have createdFrom set

Fixed

• Dragged edge not removed if edge remove event was cancelled
• Click event key not found in newest firefox
• zoom beahviour set every render
• getEdgesByTarget always returning empty set
• Fix documentation dependencies to specific versions and add Pipfile for use with pipenv
• Update dependencies

Added

• Changed single d3 dependency to dependencys on d3 modules

Fixed

• Fixed display bugs when running in Firefox

This release needs d3-selection ^1.4.0 to work correctly. Please ensure that your package lock got updated correctly.

Added

• Use regex to determine word boundarys when wrapping text (before only spaces were valid word boundarys for texwrapping)
• Use ResizeObserver to detect resizes if available (if unavailable calculate current size before zooming to bounding box)
• New edgedrop event to enable creating nodes where an edge was dropped in the void
• Add eventSource to all custom events to distinguish events by how they were triggered (possible values: INTERNAL, API, USER_INTERACTION)
• Add clickEventKey attribute to Marker class (used to set data-click attribute in html)
• Click events edgeclick and nodeclick now search the whole path (only inside the specific svg group) for a data-click attribute to use as key
• Add textcomponents to edge to display text in an edge with text wrapping and drag behaviour for manual positioning
• Add edgetextpositionchange events used when the user drags a text component
• Update d3 to >5.9 to use join
• Add calculateLinkHandlesForEdge callback to customise where edges attach to nodes
• Allow dynamic propertys with data-content, data-fill, data-stroke and data-href attributes

Fixed

• Grapheditor fails updating graph if an edge with a source or target pointing to a nonexisting node is present

First beta release.

Fixed

• Wrapping multiline text failing in firefox browser (stackoverflow "How to get the width of an SVG tspan element")
• Textwrapping sometimes producing infinite loops.

Added

• updateTextElements function to update and reflow text with force parameter
• getNode, getEdge, getEdgesBySource and getEdgesByTarget functions in grapheditor

Fixed

• First multiline textwrap not rendering the text
• scaleRelative not affecting lineOffset position of edge.markerEnd

Added

• LinkHandles for path and polygon elements
• scaleRelative attribute in Marker for scaling relative to stroke-width of edge path
• markerEnd attribute in Edge for better arrowheads
• lineOffset attribute in Marker for offsetting markerEnd from the end of the edge path