nope/resources/svgjs

ZeMA-SGT

A SVG-Render-Engine based on SVG.JS

Used Libraries

Library Name	Link	Functionality
SVG.js	http://svgjs.com/	Simplify the SVG-Drawings
svg.select.js	https://svgjs.com/docs/2.7/plugins/svg-select-js/	Enabling selecting of Elements with a defined shape
svg.draggable.js	https://github.com/svgdotjs/svg.draggable.js	Enabling dragging of Nodes
svg.resize.js	https://github.com/svgdotjs/svg.resize.js	Enabling nice interface for resizing Nodes

Functionality

A Graph consits of Nodes and Edges. Action-Containers provide functionalities to interact with the Graph.

Nodes

• All nodes of a graph are based on a IBaseNode.
• ISingleNode extend the IBaseNode, by adding the Possibility to add IConnectors to the Node.
• IContainerNode's extend a Single-Nodes and allow adding Childs - IBaseNodes - to a Node.

The Type-Definitions are located in ./types.

Events of a Base-Node

A Node fires Event on the following actions:

• onMouseOver
• onMouseOut
• onMouseDown
• onMouseUp
• onClick
• onDoubleClick
• onHover
• onDragging
• onDragEnd
• onResizing
• onResizingEnd

Obersvables of a Base-Node

You can subscribe to the following Content of Elements:

• the Events mentioned above
• localPosition - The position of the Node in relation to its Parent given as Left-Corner
• localCenterPosition - The position of the Node's Center in relation to its Parent given as Left-Corner
• globalPosition - The position of the Node in the Drawing
• globalCenterPosition - The position of the Node's Center in the Drawing
• width
• height
• style

Available-Shapes

At the Current release the following shapes are available by default:

• Circular-Images
• Ellipse
• Hexagons
• Rectangles
• Triangles
• Text

They are located in ./src/nodes/basic/

Adding custom Base-Shapes:

To add custom shapes create a the corresponding class in ./src/nodes/basic/. Then link the class in the assembly (./src/assembly/manual-assembly.ts) Therefore a Template is provided in ./src/nodes/basic/Template.dat To define your custom shape, the following methods must be provided by your class:

• updateElement, which will be called on changes of the shape (its width and height etc).
• drawElement, which will be called during the creation of the Shape

Customize the Default-Look

To Customize the Default Look edit the src\DefaultStyle.ts File. The allowed Structure of a Style is defined in types\IStyle. The Default Theme uses the Color-Shapes of the coperate Theme (see ngx-admin).