Feature/support for extensibility

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

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,

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 }
+            )
+        }
+    );
+}