.. | ||
src | ||
types | ||
180731_KlassenDiagramm_KAR.vsdx | ||
README.md |
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 addIConnectors
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
Observables 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 (itswidth
andheight
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).