From ab7a58cb205095f66940d646f4e2940b89bf3c66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Koc?= <lukasz.koc@rawlplug.com>
Date: Sat, 18 Feb 2023 09:52:13 +0100
Subject: [PATCH 1/2] Fixed render label for svg.

Labels were rendered as invisible.
---
 src/GraphicsSvg.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/GraphicsSvg.ts b/src/GraphicsSvg.ts
index 7c6c3ac..657b783 100644
--- a/src/GraphicsSvg.ts
+++ b/src/GraphicsSvg.ts
@@ -232,6 +232,7 @@ export function GraphicsSvg(document?: HTMLDocument): ISvgGraphics {
         {
           x,
           y,
+          fill: current.attr.fill,
           stroke: 'none',
           font: undefined as undefined | string,
           style: undefined as undefined | string,

From 84c1da7b157b03ab62a58aa6ce3659d405c71500 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Koc?= <lukasz.koc@rawlplug.com>
Date: Sat, 18 Feb 2023 09:54:38 +0100
Subject: [PATCH 2/2] Add the ability to register new types.

---
 README.md    | 14 ++++++++++++++
 src/index.ts | 23 ++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 196e28a..8243335 100644
--- a/README.md
+++ b/README.md
@@ -121,6 +121,20 @@ This is how the Decorator pattern can look in nomnoml syntax:
     [<hidden> name]
     [<table> name| a | 5 || b | 7]
 
+### Add new types
+```javascript
+const component = {
+    name: 'newTypeComponentName',
+    layout: function (config, clas) {
+    },
+    visualizer: function (node, x, y, config, g) {
+    }
+}
+nomnoml.registerComponent(component);
+```
+#### Example how to use new type
+    [<actor>Actor] --> [<newTypeComponentName>Component]
+
 ### Directives
 
     #import: my-common-styles.nomnoml
diff --git a/src/index.ts b/src/index.ts
index 38ab04a..289fbcb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,5 @@
+import { styles, visualizers, layouters, buildStyle } from './visuals'
+import { NodeLayouter, Visual, Visualizer } from "./domain";
 export {
   draw,
   renderSvg,
@@ -11,4 +13,23 @@ export var version = '1.5.3'
 export * as skanaar from './util'
 export { parse } from './parser'
 export { layout } from './layouter'
-export { styles, visualizers } from './visuals'
+export { styles, visualizers }
+export type Component = {
+    name: Visual,
+    layout: NodeLayouter,
+    visualizer: Visualizer
+}
+export function registerComponent(component: Component) {
+    const name = String(component.name);
+    Object.assign(layouters, { [name]: component.layout } );
+    Object.assign(visualizers, { [name]: component.visualizer } );
+    Object.assign(
+        styles,
+        {
+            [name]: buildStyle({ visual: component.name },
+                { center:true },
+                { center: true }
+            )
+        }
+    );
+}