81 lines
2.9 KiB
Markdown
81 lines
2.9 KiB
Markdown
|
# 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`](http://mszema24:8080/m.karkowski/ZeMA-SGT/blob/master/types/IBaseNode.ts).
|
||
|
|
+ [`ISingleNode`](http://mszema24:8080/m.karkowski/ZeMA-SGT/blob/master/types/ISingleNode.ts) extend the IBaseNode, by adding the Possibility to add [`IConnectors`](http://mszema24:8080/m.karkowski/ZeMA-SGT/blob/master/types/IConnector.ts) to the Node.
|
||
|
|
+ [`IContainerNode`](http://mszema24:8080/m.karkowski/ZeMA-SGT/blob/master/types/IContainerNode.ts)'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).
|
||
|
|
|
||
|
|
|
||
|
|
|