# 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

#### 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 (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).