diff --git a/dist/meta-diagram.cjs.development.js b/dist/meta-diagram.cjs.development.js
index 884c3fb..f57ad4b 100644
--- a/dist/meta-diagram.cjs.development.js
+++ b/dist/meta-diagram.cjs.development.js
@@ -176,6 +176,26 @@ class MetaLinkFactory extends createEngine.DefaultLinkFactory {
 function getNode(id, nodes) {
   return nodes.find(n => n.getOptions().id === id);
 }
+function processNodes(metaNodes) {
+  const metaNodeModels = [];
+
+  for (const mn of metaNodes) {
+    // TODO: serialize children (bottom up or memoization)
+    const metaNodeModel = new MetaNodeModel(Object.fromEntries(mn.options.options)); // @ts-ignore
+
+    metaNodeModel.registerListener({
+      positionChanged: event => handlePositionChanged(event)
+    });
+    metaNodeModels.push(metaNodeModel);
+  }
+
+  return metaNodeModels;
+}
+
+function handlePositionChanged(e) {
+  // todo: calculate e.entity.position offset apply the same to e.entity.children
+  console.log(e);
+}
 
 function getLinkModel(metaLink, nodes) {
   const link = new MetaLinkModel(Object.fromEntries(metaLink.options.options));
@@ -337,7 +357,7 @@ const MetaDiagram = ({
   .registerFactory(new MetaLinkFactory(componentsMap.links)); // set up the diagram model
 
   const model = new createEngine.DiagramModel();
-  const nodes = metaNodes.map(mn => new MetaNodeModel(Object.fromEntries(mn.options.options)));
+  const nodes = processNodes(metaNodes);
   const links = metaLinks.map(ml => getLinkModel(ml, nodes)).filter(mlm => mlm !== undefined); // @ts-ignore
 
   model.addAll(...nodes, ...links); // load model into engine
diff --git a/dist/meta-diagram.cjs.development.js.map b/dist/meta-diagram.cjs.development.js.map
index e607181..6b50050 100644
--- a/dist/meta-diagram.cjs.development.js.map
+++ b/dist/meta-diagram.cjs.development.js.map
@@ -1 +1 @@
-{"version":3,"file":"meta-diagram.cjs.development.js","sources":["../src/models/MetaOptions.ts","../src/models/MetaNode.ts","../src/models/MetaLink.ts","../src/models/ComponentsMap.ts","../src/constants.ts","../src/react-diagrams/MetaNodeModel.ts","../src/components/UnknownTypeWidget.tsx","../src/react-diagrams/MetaNodeFactory.tsx","../src/react-diagrams/MetaLinkModel.ts","../src/react-diagrams/MetaLinkFactory.tsx","../src/helpers/nodesHelper.ts","../src/helpers/linksHelper.ts","../src/components/assets/styles/variables.ts","../src/components/Sidebar.tsx","../src/models/Position.ts","../src/index.tsx"],"sourcesContent":["import { IShape } from './IShape';\nimport { IId } from './IId';\n\nexport class MetaOptions implements IShape, IId {\n  options: Map<string, any>;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    options: Map<string, any>\n  ) {\n    this.options = options;\n    this.options.set('id', id);\n    this.options.set('name', name);\n    this.options.set('shape', shape);\n  }\n\n  getId(): string {\n    return this.options.get('id');\n  }\n\n  getShape(): string {\n    return this.options.get('shape');\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { Position } from './Position';\n\nexport class MetaNode {\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    position: Position,\n    children: MetaNode[] = [],\n    options: Map<string, any>\n  ) {\n    options.set('children', children);\n    options.set('position', position);\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { ILink } from './ILink';\n\nexport class MetaLink implements ILink {\n  sourceId: string;\n  sourcePortId: string;\n  targetId: string;\n  targetPortId: string;\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    sourceId: string,\n    sourcePortId: string,\n    targetId: string,\n    targetPortId: string,\n    options: Map<string, any>\n  ) {\n    this.sourceId = sourceId;\n    this.sourcePortId = sourcePortId;\n    this.targetId = targetId;\n    this.targetPortId = targetPortId;\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n\n  getSourceId(): string {\n    return this.sourceId;\n  }\n\n  getSourcePortId(): string {\n    return this.sourcePortId;\n  }\n\n  getTargetId(): string {\n    return this.targetId;\n  }\n\n  getTargetPortId(): string {\n    return this.targetPortId;\n  }\n}\n","import React from 'react';\n\nexport class ComponentsMap {\n  nodes: Map<string, React.ComponentType>;\n  links: Map<string, React.ComponentType>;\n\n  constructor(\n    nodesMap: Map<string, React.ComponentType>,\n    linksMap: Map<string, React.ComponentType>\n  ) {\n    this.nodes = nodesMap;\n    this.links = linksMap;\n  }\n}\n","export enum ReactDiagramMetaTypes {\n  META_NODE = 'meta-node-type',\n  META_LINK = 'meta-link-type',\n}\n","import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeModel extends NodeModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_NODE,\n    });\n\n    // set up an in and out port\n\n    this.addPort(\n      new DefaultPortModel({\n        in: true,\n        name: 'in',\n      })\n    );\n    this.addPort(\n      new DefaultPortModel({\n        in: false,\n        name: 'out',\n      })\n    );\n  }\n}\n","import React from 'react';\n\nexport const UnknownTypeWidget = () => {\n  return <div>Unknown Type</div>;\n};\n","import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './MetaNodeModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport React from 'react';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeFactory extends AbstractReactFactory {\n  componentsMap: Map<string, React.ComponentType>;\n\n  constructor(componentsMap: Map<string, React.ComponentType>) {\n    super(ReactDiagramMetaTypes.META_NODE);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaNodeModel();\n  }\n\n  generateReactWidget(event: any): JSX.Element {\n    if (this.componentsMap.has(event.model.options.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        event.model.options.shape\n      );\n      // @ts-ignore\n      return <ReactComponentType engine={this.engine} model={event.model} />;\n    }\n    // TODO: Generate default node instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { DefaultLinkModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaLinkModel extends DefaultLinkModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_LINK,\n    });\n  }\n}\n","import { MetaLinkModel } from './MetaLinkModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport { ReactDiagramMetaTypes } from '../constants';\nimport React from 'react';\nimport { DefaultLinkFactory } from '@projectstorm/react-diagrams';\n\nexport class MetaLinkFactory extends DefaultLinkFactory {\n  componentsMap: Map<string, JSX.Element>;\n\n  constructor(componentsMap: Map<string, JSX.Element>) {\n    super(ReactDiagramMetaTypes.META_LINK);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaLinkModel();\n  }\n\n  generateLinkSegment(\n    model: MetaLinkModel,\n    selected: boolean,\n    path: string\n  ): JSX.Element {\n    // @ts-ignore\n    if (this.componentsMap.has(model.getOptions()?.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        // @ts-ignore\n        model.getOptions().shape\n      );\n\n      return (\n        // @ts-ignore\n        <ReactComponentType engine={this.engine} model={model} path={path} selected={selected} />\n      );\n    }\n    // TODO: Generate default link instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport {MetaNode} from \"../models/MetaNode\";\n\nexport function getNode(\n  id: string,\n  nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n  return nodes.find(n => n.getOptions().id === id);\n}\n\nexport function processNodes(metaNodes: MetaNode[]) : MetaNodeModel[] {\n  const metaNodeModels = []\n  for(const mn of metaNodes){\n    const metaNodeModel = new MetaNodeModel(Object.fromEntries(mn.options.options))\n    metaNodeModel.registerListener({positionChanged: () => { console.log(\"positionChanged\") }})\n    metaNodeModels.push(metaNodeModel)\n  }\n  return metaNodeModels\n}","import { MetaLink } from '../models/MetaLink';\nimport { MetaLinkModel } from '../react-diagrams/MetaLinkModel';\nimport { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport { getNode } from './nodesHelper';\n\nexport function getLinkModel(\n  metaLink: MetaLink,\n  nodes: MetaNodeModel[]\n): MetaLinkModel | undefined {\n  const link = new MetaLinkModel(Object.fromEntries(metaLink.options.options));\n  const source = getNode(metaLink.getSourceId(), nodes);\n  const target = getNode(metaLink.getTargetId(), nodes);\n  if (source && target) {\n    link.setSourcePort(source.getPort(metaLink.getSourcePortId()));\n    link.setTargetPort(target.getPort(metaLink.getTargetPortId()));\n    return link;\n  }\n  return undefined;\n}\n","const vars = {\n  fontFamily: 'Inter, sans-serif',\n  primaryBg: '#f1f1f1',\n  textWhite: '#FFFFFF',\n  chipTextColor: '#F2F2F7',\n  chipBgColor: 'rgba(60, 60, 67, 0.4)',\n\n  chipPrimaryTextColor: 'rgba(255, 255, 255, 0.8)',\n  chipPrimaryBgColor: 'rgba(0, 122, 255, 0.6)',\n\n  breadcrumbLinkColor: '#A2A2A2',\n  breadcrumbTextColor: '#292929',\n\n  buttonPrimaryBgColor: '4353FF',\n  buttonPrimaryBgHoverColor: '#3443E1',\n  buttonPrimaryDisabledBgColor: 'rgba(0, 122, 255, 0.4)',\n\n  listItemActiveBg: '#007AFF',\n  listSelectedTextColor: '#3C3C43',\n  listBoxShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)',\n  listBorderColor: 'rgba(0, 0, 0, 0.04)',\n\n  dividerColor: 'rgba(118, 120, 125, 0.12)',\n\n  dropdownBg: 'rgba(246, 246, 248, 0.8)',\n  dropdownTextColor: 'rgba(60, 60, 67, 0.6)',\n\n  overlayColor: 'rgba(0, 0, 0, 0.4)',\n\n  progressBg: '#E5E5E5',\n  progressBar: '#017AFF',\n  progressShadow: 'inset 0 0 0.0625rem #E3E3E3',\n\n  switchShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',\n};\n\nexport default vars;\n","import React from 'react';\nimport { Box } from '@mui/system';\nimport { makeStyles } from '@mui/styles';\nimport vars from './assets/styles/variables';\nimport { Divider, List, ListItemButton, ListItemIcon } from '@mui/material';\nimport Move from './assets/svg/move.svg';\nimport Icon from './assets/svg/icon.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\n\nconst { textWhite, dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    zIndex: '5',\n    width: '4rem',\n    background: textWhite,\n    boxShadow:\n      '0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)',\n    borderRadius: '2rem',\n    position: 'fixed',\n    left: '1rem',\n    top: '50%',\n    transform: 'translateY(-50%)',\n\n    '&.right': {\n      left: 'auto',\n      right: '1rem',\n    },\n\n    '& .MuiList-root': {\n      padding: '0.75rem',\n    },\n  },\n\n  node: {\n    margin: '0.25rem 0',\n    '& .MuiDivider-root': {\n      borderColor: dividerColor,\n      width: 'calc(100% - 1.5rem)',\n      margin: '0 auto',\n      border: 'none',\n      borderTop: '0.0625rem solid',\n    },\n\n    '& img': {\n      display: 'block',\n      margin: '1rem 0',\n    },\n  },\n}));\n\nconst Sidebar = () => {\n  const classes = useStyles();\n  return (\n    <Box className={`${classes.root} left`}>\n      <List disablePadding component=\"nav\">\n        <ListItemButton selected>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Cursor).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Move).toString(\n                'base64'\n              )}`}\n              alt=\"move\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n\n      <Box className={classes.node}>\n        <Divider />\n        <img\n          src={`data:image/svg+xml;base64,${new Buffer(Node).toString(\n            'base64'\n          )}`}\n          alt=\"node\"\n        />\n        <Divider />\n      </Box>\n\n      <List disablePadding component=\"nav\">\n        <ListItemButton disabled>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Icon).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Fullscreen).toString(\n                'base64'\n              )}`}\n              alt=\"fullscreen\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n    </Box>\n  );\n};\n\nexport default Sidebar;\n","export class Position {\n  x: number;\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n}\n","import * as React from 'react';\nimport { MetaNode } from './models/MetaNode';\nimport { MetaLink } from './models/MetaLink';\nimport { ComponentsMap } from './models/ComponentsMap';\nimport createEngine, { DiagramModel } from '@projectstorm/react-diagrams';\nimport { MetaNodeFactory } from './react-diagrams/MetaNodeFactory';\nimport { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';\nimport { CanvasWidget } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './react-diagrams/MetaNodeModel';\nimport { getLinkModel } from './helpers/linksHelper';\nimport { makeStyles } from '@material-ui/core';\nimport Sidebar from './components/Sidebar';\nimport {processNodes} from \"./helpers/nodesHelper\";\n\nconst useStyles = makeStyles(_ => ({\n  container: {\n    height: '100%',\n    width: '100%',\n  },\n  canvasContainer: {\n    height: '100%',\n    width: '100%',\n    background: '#333333',\n  },\n}));\n\ninterface MetaDiagramProps {\n  metaNodes: MetaNode[];\n  metaLinks: MetaLink[];\n  componentsMap: ComponentsMap;\n  wrapperClassName?: string;\n  canvasClassName?: string;\n}\n\nconst MetaDiagram = ({\n  metaNodes,\n  metaLinks,\n  componentsMap,\n  wrapperClassName,\n  canvasClassName,\n}: MetaDiagramProps) => {\n  const classes = useStyles();\n\n  // set up the diagram engine\n  const engine = createEngine();\n\n  engine\n    .getNodeFactories()\n    // @ts-ignore\n    .registerFactory(new MetaNodeFactory(componentsMap.nodes));\n\n  engine\n    .getLinkFactories()\n    // @ts-ignore\n    .registerFactory(new MetaLinkFactory(componentsMap.links));\n\n  // set up the diagram model\n\n  const model = new DiagramModel();\n  const nodes = processNodes(metaNodes)\n  const links = metaLinks\n    .map(ml => getLinkModel(ml, nodes))\n    .filter(mlm => mlm !== undefined);\n  // @ts-ignore\n  model.addAll(...nodes, ...links);\n\n  // load model into engine\n  engine.setModel(model);\n\n  const containerClassName = wrapperClassName\n    ? wrapperClassName\n    : classes.container;\n  const diagramClassName = canvasClassName\n    ? canvasClassName\n    : classes.canvasContainer;\n  return (\n    <div className={containerClassName}>\n      <Sidebar />\n      <CanvasWidget className={diagramClassName} engine={engine} />\n    </div>\n  );\n};\n\nexport default MetaDiagram;\nexport { MetaNode, MetaLink, MetaNodeModel, ComponentsMap };\nexport { MetaLinkModel } from './react-diagrams/MetaLinkModel';\nexport { Position } from './models/Position';\n"],"names":["MetaOptions","constructor","id","name","shape","options","set","getId","get","getShape","MetaNode","position","children","MetaLink","sourceId","sourcePortId","targetId","targetPortId","getSourceId","getSourcePortId","getTargetId","getTargetPortId","ComponentsMap","nodesMap","linksMap","nodes","links","ReactDiagramMetaTypes","MetaNodeModel","NodeModel","type","META_NODE","addPort","DefaultPortModel","in","UnknownTypeWidget","React","MetaNodeFactory","AbstractReactFactory","componentsMap","generateModel","generateReactWidget","event","has","model","ReactComponentType","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getOptions","getNode","find","n","processNodes","metaNodes","metaNodeModels","mn","metaNodeModel","Object","fromEntries","registerListener","positionChanged","console","log","push","getLinkModel","metaLink","link","source","target","setSourcePort","getPort","setTargetPort","undefined","vars","fontFamily","primaryBg","textWhite","chipTextColor","chipBgColor","chipPrimaryTextColor","chipPrimaryBgColor","breadcrumbLinkColor","breadcrumbTextColor","buttonPrimaryBgColor","buttonPrimaryBgHoverColor","buttonPrimaryDisabledBgColor","listItemActiveBg","listSelectedTextColor","listBoxShadow","listBorderColor","dividerColor","dropdownBg","dropdownTextColor","overlayColor","progressBg","progressBar","progressShadow","switchShadow","useStyles","makeStyles","root","zIndex","width","background","boxShadow","borderRadius","left","top","transform","right","padding","node","margin","borderColor","border","borderTop","display","Sidebar","classes","Box","className","List","disablePadding","component","ListItemButton","ListItemIcon","src","Buffer","Cursor","toString","alt","Move","Divider","Node","disabled","Icon","Fullscreen","Position","x","y","_","container","height","canvasContainer","MetaDiagram","metaLinks","wrapperClassName","canvasClassName","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","ml","filter","mlm","addAll","setModel","containerClassName","diagramClassName","CanvasWidget"],"mappings":";;;;;;;;;;;;;;;;MAGaA;EAGXC,YACEC,IACAC,MACAC,OACAC;IAEA,KAAKA,OAAL,GAAeA,OAAf;IACA,KAAKA,OAAL,CAAaC,GAAb,CAAiB,IAAjB,EAAuBJ,EAAvB;IACA,KAAKG,OAAL,CAAaC,GAAb,CAAiB,MAAjB,EAAyBH,IAAzB;IACA,KAAKE,OAAL,CAAaC,GAAb,CAAiB,OAAjB,EAA0BF,KAA1B;;;EAGFG,KAAK;IACH,OAAO,KAAKF,OAAL,CAAaG,GAAb,CAAiB,IAAjB,CAAP;;;EAGFC,QAAQ;IACN,OAAO,KAAKJ,OAAL,CAAaG,GAAb,CAAiB,OAAjB,CAAP;;;;;MCpBSE;EAGXT,YACEC,IACAC,MACAC,OACAO,UACAC,WAAuB,IACvBP;IAEAA,OAAO,CAACC,GAAR,CAAY,UAAZ,EAAwBM,QAAxB;IACAP,OAAO,CAACC,GAAR,CAAY,UAAZ,EAAwBK,QAAxB;IACA,KAAKN,OAAL,GAAe,IAAIL,WAAJ,CAAgBE,EAAhB,EAAoBC,IAApB,EAA0BC,KAA1B,EAAiCC,OAAjC,CAAf;;;;;MCbSQ;EAOXZ,YACEC,IACAC,MACAC,OACAU,UACAC,cACAC,UACAC,cACAZ;IAEA,KAAKS,QAAL,GAAgBA,QAAhB;IACA,KAAKC,YAAL,GAAoBA,YAApB;IACA,KAAKC,QAAL,GAAgBA,QAAhB;IACA,KAAKC,YAAL,GAAoBA,YAApB;IACA,KAAKZ,OAAL,GAAe,IAAIL,WAAJ,CAAgBE,EAAhB,EAAoBC,IAApB,EAA0BC,KAA1B,EAAiCC,OAAjC,CAAf;;;EAGFa,WAAW;IACT,OAAO,KAAKJ,QAAZ;;;EAGFK,eAAe;IACb,OAAO,KAAKJ,YAAZ;;;EAGFK,WAAW;IACT,OAAO,KAAKJ,QAAZ;;;EAGFK,eAAe;IACb,OAAO,KAAKJ,YAAZ;;;;;MCtCSK;EAIXrB,YACEsB,UACAC;IAEA,KAAKC,KAAL,GAAaF,QAAb;IACA,KAAKG,KAAL,GAAaF,QAAb;;;;;ACXJ,IAAYG,qBAAZ;;AAAA,WAAYA;EACVA,kCAAA,mBAAA;EACAA,kCAAA,mBAAA;AACD,CAHD,EAAYA,qBAAqB,KAArBA,qBAAqB,KAAA,CAAjC;;MCGaC,sBAAsBC;EACjC5B,YAAYI,OAAO,GAAG;IACpB,MAAM,EACJ,GAAGA,OADC;MAEJyB,IAAI,EAAEH,qBAAqB,CAACI;KAF9B;;IAOA,KAAKC,OAAL,CACE,IAAIC,6BAAJ,CAAqB;MACnBC,EAAE,EAAE,IADe;MAEnB/B,IAAI,EAAE;KAFR,CADF;IAMA,KAAK6B,OAAL,CACE,IAAIC,6BAAJ,CAAqB;MACnBC,EAAE,EAAE,KADe;MAEnB/B,IAAI,EAAE;KAFR,CADF;;;;;AChBG,MAAMgC,iBAAiB,GAAG;EAC/B,OAAOC,4BAAA,MAAA,MAAA,gBAAA,CAAP;AACD,CAFM;;MCIMC,wBAAwBC;EAGnCrC,YAAYsC;IACV,MAAMZ,qBAAqB,CAACI,SAA5B;IACA,KAAKQ,aAAL,GAAqBA,aAArB;;;EAGFC,aAAa;IACX,OAAO,IAAIZ,aAAJ,EAAP;;;EAGFa,mBAAmB,CAACC,KAAD;IACjB,IAAI,KAAKH,aAAL,CAAmBI,GAAnB,CAAuBD,KAAK,CAACE,KAAN,CAAYvC,OAAZ,CAAoBD,KAA3C,CAAJ,EAAuD;MACrD,MAAMyC,kBAAkB,GAAG,KAAKN,aAAL,CAAmB/B,GAAnB,CACzBkC,KAAK,CAACE,KAAN,CAAYvC,OAAZ,CAAoBD,KADK,CAA3B,CADqD;;MAKrD,OAAOgC,4BAAA,CAACS,kBAAD;QAAoBC,MAAM,EAAE,KAAKA;QAAQF,KAAK,EAAEF,KAAK,CAACE;OAAtD,CAAP;;;;IAGF,OAAOR,4BAAA,CAACD,iBAAD,MAAA,CAAP;;;;;MCxBSY,sBAAsBC;EACjC/C,YAAYI,OAAO,GAAG;IACpB,MAAM,EACJ,GAAGA,OADC;MAEJyB,IAAI,EAAEH,qBAAqB,CAACsB;KAF9B;;;;;MCCSC,wBAAwBC;EAGnClD,YAAYsC;IACV,MAAMZ,qBAAqB,CAACsB,SAA5B;IACA,KAAKV,aAAL,GAAqBA,aAArB;;;EAGFC,aAAa;IACX,OAAO,IAAIO,aAAJ,EAAP;;;EAGFK,mBAAmB,CACjBR,KADiB,EAEjBS,QAFiB,EAGjBC,IAHiB;;;;IAMjB,IAAI,KAAKf,aAAL,CAAmBI,GAAnB,sBAAuBC,KAAK,CAACW,UAAN,EAAvB,qBAAuB,kBAAoBnD,KAA3C,CAAJ,EAAuD;MACrD,MAAMyC,kBAAkB,GAAG,KAAKN,aAAL,CAAmB/B,GAAnB;MAEzBoC,KAAK,CAACW,UAAN,GAAmBnD,KAFM,CAA3B;MAKA;QAEEgC,4BAAA,CAACS,kBAAD;UAAoBC,MAAM,EAAE,KAAKA;UAAQF,KAAK,EAAEA;UAAOU,IAAI,EAAEA;UAAMD,QAAQ,EAAEA;SAA7E;;;;;IAIJ,OAAOjB,4BAAA,CAACD,iBAAD,MAAA,CAAP;;;;;SCjCYqB,QACdtD,IACAuB;EAEA,OAAOA,KAAK,CAACgC,IAAN,CAAWC,CAAC,IAAIA,CAAC,CAACH,UAAF,GAAerD,EAAf,KAAsBA,EAAtC,CAAP;AACD;AAED,SAAgByD,aAAaC;EAC3B,MAAMC,cAAc,GAAG,EAAvB;;EACA,KAAI,MAAMC,EAAV,IAAgBF,SAAhB,EAA0B;IACxB,MAAMG,aAAa,GAAG,IAAInC,aAAJ,CAAkBoC,MAAM,CAACC,WAAP,CAAmBH,EAAE,CAACzD,OAAH,CAAWA,OAA9B,CAAlB,CAAtB;IACA0D,aAAa,CAACG,gBAAd,CAA+B;MAACC,eAAe,EAAE;QAAQC,OAAO,CAACC,GAAR,CAAY,iBAAZ;;KAAzD;IACAR,cAAc,CAACS,IAAf,CAAoBP,aAApB;;;EAEF,OAAOF,cAAP;AACD;;SCbeU,aACdC,UACA/C;EAEA,MAAMgD,IAAI,GAAG,IAAI1B,aAAJ,CAAkBiB,MAAM,CAACC,WAAP,CAAmBO,QAAQ,CAACnE,OAAT,CAAiBA,OAApC,CAAlB,CAAb;EACA,MAAMqE,MAAM,GAAGlB,OAAO,CAACgB,QAAQ,CAACtD,WAAT,EAAD,EAAyBO,KAAzB,CAAtB;EACA,MAAMkD,MAAM,GAAGnB,OAAO,CAACgB,QAAQ,CAACpD,WAAT,EAAD,EAAyBK,KAAzB,CAAtB;;EACA,IAAIiD,MAAM,IAAIC,MAAd,EAAsB;IACpBF,IAAI,CAACG,aAAL,CAAmBF,MAAM,CAACG,OAAP,CAAeL,QAAQ,CAACrD,eAAT,EAAf,CAAnB;IACAsD,IAAI,CAACK,aAAL,CAAmBH,MAAM,CAACE,OAAP,CAAeL,QAAQ,CAACnD,eAAT,EAAf,CAAnB;IACA,OAAOoD,IAAP;;;EAEF,OAAOM,SAAP;AACD;;AClBD,MAAMC,IAAI,GAAG;EACXC,UAAU,EAAE,mBADD;EAEXC,SAAS,EAAE,SAFA;EAGXC,SAAS,EAAE,SAHA;EAIXC,aAAa,EAAE,SAJJ;EAKXC,WAAW,EAAE,uBALF;EAOXC,oBAAoB,EAAE,0BAPX;EAQXC,kBAAkB,EAAE,wBART;EAUXC,mBAAmB,EAAE,SAVV;EAWXC,mBAAmB,EAAE,SAXV;EAaXC,oBAAoB,EAAE,QAbX;EAcXC,yBAAyB,EAAE,SAdhB;EAeXC,4BAA4B,EAAE,wBAfnB;EAiBXC,gBAAgB,EAAE,SAjBP;EAkBXC,qBAAqB,EAAE,SAlBZ;EAmBXC,aAAa,EACX,mFApBS;EAqBXC,eAAe,EAAE,qBArBN;EAuBXC,YAAY,EAAE,2BAvBH;EAyBXC,UAAU,EAAE,0BAzBD;EA0BXC,iBAAiB,EAAE,uBA1BR;EA4BXC,YAAY,EAAE,oBA5BH;EA8BXC,UAAU,EAAE,SA9BD;EA+BXC,WAAW,EAAE,SA/BF;EAgCXC,cAAc,EAAE,6BAhCL;EAkCXC,YAAY,EACV;AAnCS,CAAb;;;;;;;;;;;;ACWA,MAAM;EAAErB,SAAF;EAAac;AAAb,IAA8BjB,IAApC;AAEA,MAAMyB,SAAS,gBAAGC,iBAAU,CAAC,OAAO;EAClCC,IAAI,EAAE;IACJC,MAAM,EAAE,GADJ;IAEJC,KAAK,EAAE,MAFH;IAGJC,UAAU,EAAE3B,SAHR;IAIJ4B,SAAS,EACP,8EALE;IAMJC,YAAY,EAAE,MANV;IAOJrG,QAAQ,EAAE,OAPN;IAQJsG,IAAI,EAAE,MARF;IASJC,GAAG,EAAE,KATD;IAUJC,SAAS,EAAE,kBAVP;IAYJ,WAAW;MACTF,IAAI,EAAE,MADG;MAETG,KAAK,EAAE;KAdL;IAiBJ,mBAAmB;MACjBC,OAAO,EAAE;;GAnBqB;EAuBlCC,IAAI,EAAE;IACJC,MAAM,EAAE,WADJ;IAEJ,sBAAsB;MACpBC,WAAW,EAAEvB,YADO;MAEpBY,KAAK,EAAE,qBAFa;MAGpBU,MAAM,EAAE,QAHY;MAIpBE,MAAM,EAAE,MAJY;MAKpBC,SAAS,EAAE;KAPT;IAUJ,SAAS;MACPC,OAAO,EAAE,OADF;MAEPJ,MAAM,EAAE;;;AAnCsB,CAAP,CAAD,CAA5B;;AAwCA,MAAMK,OAAO,GAAG;EACd,MAAMC,OAAO,GAAGpB,SAAS,EAAzB;EACA,OACErE,4BAAA,CAAC0F,UAAD;IAAKC,SAAS,KAAKF,OAAO,CAAClB;GAA3B,EACEvE,4BAAA,CAAC4F,aAAD;IAAMC,cAAc;IAACC,SAAS,EAAC;GAA/B,EACE9F,4BAAA,CAAC+F,uBAAD;IAAgB9E,QAAQ;GAAxB,EACEjB,4BAAA,CAACgG,qBAAD,MAAA,EACEhG,4BAAA,MAAA;IACEiG,GAAG,+BAA+B,IAAIC,MAAJ,CAAWC,MAAX,EAAmBC,QAAnB,CAChC,QADgC;IAGlCC,GAAG,EAAC;GAJN,CADF,CADF,CADF,EAYErG,4BAAA,CAAC+F,uBAAD,MAAA,EACE/F,4BAAA,CAACgG,qBAAD,MAAA,EACEhG,4BAAA,MAAA;IACEiG,GAAG,+BAA+B,IAAIC,MAAJ,CAAWI,IAAX,EAAiBF,QAAjB,CAChC,QADgC;IAGlCC,GAAG,EAAC;GAJN,CADF,CADF,CAZF,CADF,EAyBErG,4BAAA,CAAC0F,UAAD;IAAKC,SAAS,EAAEF,OAAO,CAACP;GAAxB,EACElF,4BAAA,CAACuG,gBAAD,MAAA,CADF,EAEEvG,4BAAA,MAAA;IACEiG,GAAG,+BAA+B,IAAIC,MAAJ,CAAWM,IAAX,EAAiBJ,QAAjB,CAChC,QADgC;IAGlCC,GAAG,EAAC;GAJN,CAFF,EAQErG,4BAAA,CAACuG,gBAAD,MAAA,CARF,CAzBF,EAoCEvG,4BAAA,CAAC4F,aAAD;IAAMC,cAAc;IAACC,SAAS,EAAC;GAA/B,EACE9F,4BAAA,CAAC+F,uBAAD;IAAgBU,QAAQ;GAAxB,EACEzG,4BAAA,CAACgG,qBAAD,MAAA,EACEhG,4BAAA,MAAA;IACEiG,GAAG,+BAA+B,IAAIC,MAAJ,CAAWQ,IAAX,EAAiBN,QAAjB,CAChC,QADgC;IAGlCC,GAAG,EAAC;GAJN,CADF,CADF,CADF,EAYErG,4BAAA,CAAC+F,uBAAD,MAAA,EACE/F,4BAAA,CAACgG,qBAAD,MAAA,EACEhG,4BAAA,MAAA;IACEiG,GAAG,+BAA+B,IAAIC,MAAJ,CAAWS,UAAX,EAAuBP,QAAvB,CAChC,QADgC;IAGlCC,GAAG,EAAC;GAJN,CADF,CADF,CAZF,CApCF,CADF;AA8DD,CAhED;;MCrDaO;EAIX/I,YAAYgJ,GAAWC;IACrB,KAAKD,CAAL,GAASA,CAAT;IACA,KAAKC,CAAL,GAASA,CAAT;;;;;ACQJ,MAAMzC,WAAS,gBAAGC,eAAU,CAACyC,CAAC,KAAK;EACjCC,SAAS,EAAE;IACTC,MAAM,EAAE,MADC;IAETxC,KAAK,EAAE;GAHwB;EAKjCyC,eAAe,EAAE;IACfD,MAAM,EAAE,MADO;IAEfxC,KAAK,EAAE,MAFQ;IAGfC,UAAU,EAAE;;AARmB,CAAL,CAAF,CAA5B;;AAoBA,MAAMyC,WAAW,GAAG,CAAC;EACnB3F,SADmB;EAEnB4F,SAFmB;EAGnBjH,aAHmB;EAInBkH,gBAJmB;EAKnBC;AALmB,CAAD;EAOlB,MAAM7B,OAAO,GAAGpB,WAAS,EAAzB;;EAGA,MAAM3D,MAAM,GAAG6G,qBAAY,EAA3B;EAEA7G,MAAM,CACH8G,gBADH;GAGGC,eAHH,CAGmB,IAAIxH,eAAJ,CAAoBE,aAAa,CAACd,KAAlC,CAHnB;EAKAqB,MAAM,CACHgH,gBADH;GAGGD,eAHH,CAGmB,IAAI3G,eAAJ,CAAoBX,aAAa,CAACb,KAAlC,CAHnB;;EAOA,MAAMkB,KAAK,GAAG,IAAImH,yBAAJ,EAAd;EACA,MAAMtI,KAAK,GAAGkC,YAAY,CAACC,SAAD,CAA1B;EACA,MAAMlC,KAAK,GAAG8H,SAAS,CACpBQ,GADW,CACPC,EAAE,IAAI1F,YAAY,CAAC0F,EAAD,EAAKxI,KAAL,CADX,EAEXyI,MAFW,CAEJC,GAAG,IAAIA,GAAG,KAAKpF,SAFX,CAAd;;EAIAnC,KAAK,CAACwH,MAAN,CAAa,GAAG3I,KAAhB,EAAuB,GAAGC,KAA1B;;EAGAoB,MAAM,CAACuH,QAAP,CAAgBzH,KAAhB;EAEA,MAAM0H,kBAAkB,GAAGb,gBAAgB,GACvCA,gBADuC,GAEvC5B,OAAO,CAACuB,SAFZ;EAGA,MAAMmB,gBAAgB,GAAGb,eAAe,GACpCA,eADoC,GAEpC7B,OAAO,CAACyB,eAFZ;EAGA,OACElH,mBAAA,MAAA;IAAK2F,SAAS,EAAEuC;GAAhB,EACElI,mBAAA,CAACwF,OAAD,MAAA,CADF,EAEExF,mBAAA,CAACoI,4BAAD;IAAczC,SAAS,EAAEwC;IAAkBzH,MAAM,EAAEA;GAAnD,CAFF,CADF;AAMD,CA/CD;;;;;;;;;;"}
\ No newline at end of file
+{"version":3,"file":"meta-diagram.cjs.development.js","sources":["../src/models/MetaOptions.ts","../src/models/MetaNode.ts","../src/models/MetaLink.ts","../src/models/ComponentsMap.ts","../src/constants.ts","../src/react-diagrams/MetaNodeModel.ts","../src/components/UnknownTypeWidget.tsx","../src/react-diagrams/MetaNodeFactory.tsx","../src/react-diagrams/MetaLinkModel.ts","../src/react-diagrams/MetaLinkFactory.tsx","../src/helpers/nodesHelper.ts","../src/helpers/linksHelper.ts","../src/components/assets/styles/variables.ts","../src/components/Sidebar.tsx","../src/models/Position.ts","../src/index.tsx"],"sourcesContent":["import { IShape } from './IShape';\nimport { IId } from './IId';\n\nexport class MetaOptions implements IShape, IId {\n  options: Map<string, any>;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    options: Map<string, any>\n  ) {\n    this.options = options;\n    this.options.set('id', id);\n    this.options.set('name', name);\n    this.options.set('shape', shape);\n  }\n\n  getId(): string {\n    return this.options.get('id');\n  }\n\n  getShape(): string {\n    return this.options.get('shape');\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { Position } from './Position';\n\nexport class MetaNode {\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    position: Position,\n    children: MetaNode[] = [],\n    options: Map<string, any>\n  ) {\n    options.set('children', children);\n    options.set('position', position);\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { ILink } from './ILink';\n\nexport class MetaLink implements ILink {\n  sourceId: string;\n  sourcePortId: string;\n  targetId: string;\n  targetPortId: string;\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    sourceId: string,\n    sourcePortId: string,\n    targetId: string,\n    targetPortId: string,\n    options: Map<string, any>\n  ) {\n    this.sourceId = sourceId;\n    this.sourcePortId = sourcePortId;\n    this.targetId = targetId;\n    this.targetPortId = targetPortId;\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n\n  getSourceId(): string {\n    return this.sourceId;\n  }\n\n  getSourcePortId(): string {\n    return this.sourcePortId;\n  }\n\n  getTargetId(): string {\n    return this.targetId;\n  }\n\n  getTargetPortId(): string {\n    return this.targetPortId;\n  }\n}\n","import React from 'react';\n\nexport class ComponentsMap {\n  nodes: Map<string, React.ComponentType>;\n  links: Map<string, React.ComponentType>;\n\n  constructor(\n    nodesMap: Map<string, React.ComponentType>,\n    linksMap: Map<string, React.ComponentType>\n  ) {\n    this.nodes = nodesMap;\n    this.links = linksMap;\n  }\n}\n","export enum ReactDiagramMetaTypes {\n  META_NODE = 'meta-node-type',\n  META_LINK = 'meta-link-type',\n}\n","import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeModel extends NodeModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_NODE,\n    });\n\n    // set up an in and out port\n\n    this.addPort(\n      new DefaultPortModel({\n        in: true,\n        name: 'in',\n      })\n    );\n    this.addPort(\n      new DefaultPortModel({\n        in: false,\n        name: 'out',\n      })\n    );\n  }\n}\n","import React from 'react';\n\nexport const UnknownTypeWidget = () => {\n  return <div>Unknown Type</div>;\n};\n","import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './MetaNodeModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport React from 'react';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeFactory extends AbstractReactFactory {\n  componentsMap: Map<string, React.ComponentType>;\n\n  constructor(componentsMap: Map<string, React.ComponentType>) {\n    super(ReactDiagramMetaTypes.META_NODE);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaNodeModel();\n  }\n\n  generateReactWidget(event: any): JSX.Element {\n    if (this.componentsMap.has(event.model.options.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        event.model.options.shape\n      );\n      // @ts-ignore\n      return <ReactComponentType engine={this.engine} model={event.model} />;\n    }\n    // TODO: Generate default node instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { DefaultLinkModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaLinkModel extends DefaultLinkModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_LINK,\n    });\n  }\n}\n","import { MetaLinkModel } from './MetaLinkModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport { ReactDiagramMetaTypes } from '../constants';\nimport React from 'react';\nimport { DefaultLinkFactory } from '@projectstorm/react-diagrams';\n\nexport class MetaLinkFactory extends DefaultLinkFactory {\n  componentsMap: Map<string, JSX.Element>;\n\n  constructor(componentsMap: Map<string, JSX.Element>) {\n    super(ReactDiagramMetaTypes.META_LINK);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaLinkModel();\n  }\n\n  generateLinkSegment(\n    model: MetaLinkModel,\n    selected: boolean,\n    path: string\n  ): JSX.Element {\n    // @ts-ignore\n    if (this.componentsMap.has(model.getOptions()?.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        // @ts-ignore\n        model.getOptions().shape\n      );\n\n      return (\n        // @ts-ignore\n        <ReactComponentType engine={this.engine} model={model} path={path} selected={selected} />\n      );\n    }\n    // TODO: Generate default link instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport {MetaNode} from \"../models/MetaNode\";\n\nexport function getNode(\n  id: string,\n  nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n  return nodes.find(n => n.getOptions().id === id);\n}\n\nexport function processNodes(metaNodes: MetaNode[]) : MetaNodeModel[] {\n  const metaNodeModels = []\n  for(const mn of metaNodes){\n    // TODO: serialize children (bottom up or memoization)\n    const metaNodeModel = new MetaNodeModel(Object.fromEntries(mn.options.options))\n    // @ts-ignore\n    metaNodeModel.registerListener({positionChanged: (event => handlePositionChanged(event))})\n    metaNodeModels.push(metaNodeModel)\n  }\n  return metaNodeModels\n}\n\nfunction handlePositionChanged(e: any){\n  // todo: calculate e.entity.position offset apply the same to e.entity.children\n  console.log(e)\n}","import { MetaLink } from '../models/MetaLink';\nimport { MetaLinkModel } from '../react-diagrams/MetaLinkModel';\nimport { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport { getNode } from './nodesHelper';\n\nexport function getLinkModel(\n  metaLink: MetaLink,\n  nodes: MetaNodeModel[]\n): MetaLinkModel | undefined {\n  const link = new MetaLinkModel(Object.fromEntries(metaLink.options.options));\n  const source = getNode(metaLink.getSourceId(), nodes);\n  const target = getNode(metaLink.getTargetId(), nodes);\n  if (source && target) {\n    link.setSourcePort(source.getPort(metaLink.getSourcePortId()));\n    link.setTargetPort(target.getPort(metaLink.getTargetPortId()));\n    return link;\n  }\n  return undefined;\n}\n","const vars = {\n  fontFamily: 'Inter, sans-serif',\n  primaryBg: '#f1f1f1',\n  textWhite: '#FFFFFF',\n  chipTextColor: '#F2F2F7',\n  chipBgColor: 'rgba(60, 60, 67, 0.4)',\n\n  chipPrimaryTextColor: 'rgba(255, 255, 255, 0.8)',\n  chipPrimaryBgColor: 'rgba(0, 122, 255, 0.6)',\n\n  breadcrumbLinkColor: '#A2A2A2',\n  breadcrumbTextColor: '#292929',\n\n  buttonPrimaryBgColor: '4353FF',\n  buttonPrimaryBgHoverColor: '#3443E1',\n  buttonPrimaryDisabledBgColor: 'rgba(0, 122, 255, 0.4)',\n\n  listItemActiveBg: '#007AFF',\n  listSelectedTextColor: '#3C3C43',\n  listBoxShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)',\n  listBorderColor: 'rgba(0, 0, 0, 0.04)',\n\n  dividerColor: 'rgba(118, 120, 125, 0.12)',\n\n  dropdownBg: 'rgba(246, 246, 248, 0.8)',\n  dropdownTextColor: 'rgba(60, 60, 67, 0.6)',\n\n  overlayColor: 'rgba(0, 0, 0, 0.4)',\n\n  progressBg: '#E5E5E5',\n  progressBar: '#017AFF',\n  progressShadow: 'inset 0 0 0.0625rem #E3E3E3',\n\n  switchShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',\n};\n\nexport default vars;\n","import React from 'react';\nimport { Box } from '@mui/system';\nimport { makeStyles } from '@mui/styles';\nimport vars from './assets/styles/variables';\nimport { Divider, List, ListItemButton, ListItemIcon } from '@mui/material';\nimport Move from './assets/svg/move.svg';\nimport Icon from './assets/svg/icon.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\n\nconst { textWhite, dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    zIndex: '5',\n    width: '4rem',\n    background: textWhite,\n    boxShadow:\n      '0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)',\n    borderRadius: '2rem',\n    position: 'fixed',\n    left: '1rem',\n    top: '50%',\n    transform: 'translateY(-50%)',\n\n    '&.right': {\n      left: 'auto',\n      right: '1rem',\n    },\n\n    '& .MuiList-root': {\n      padding: '0.75rem',\n    },\n  },\n\n  node: {\n    margin: '0.25rem 0',\n    '& .MuiDivider-root': {\n      borderColor: dividerColor,\n      width: 'calc(100% - 1.5rem)',\n      margin: '0 auto',\n      border: 'none',\n      borderTop: '0.0625rem solid',\n    },\n\n    '& img': {\n      display: 'block',\n      margin: '1rem 0',\n    },\n  },\n}));\n\nconst Sidebar = () => {\n  const classes = useStyles();\n  return (\n    <Box className={`${classes.root} left`}>\n      <List disablePadding component=\"nav\">\n        <ListItemButton selected>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Cursor).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Move).toString(\n                'base64'\n              )}`}\n              alt=\"move\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n\n      <Box className={classes.node}>\n        <Divider />\n        <img\n          src={`data:image/svg+xml;base64,${new Buffer(Node).toString(\n            'base64'\n          )}`}\n          alt=\"node\"\n        />\n        <Divider />\n      </Box>\n\n      <List disablePadding component=\"nav\">\n        <ListItemButton disabled>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Icon).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Fullscreen).toString(\n                'base64'\n              )}`}\n              alt=\"fullscreen\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n    </Box>\n  );\n};\n\nexport default Sidebar;\n","export class Position {\n  x: number;\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n}\n","import * as React from 'react';\nimport { MetaNode } from './models/MetaNode';\nimport { MetaLink } from './models/MetaLink';\nimport { ComponentsMap } from './models/ComponentsMap';\nimport createEngine, { DiagramModel } from '@projectstorm/react-diagrams';\nimport { MetaNodeFactory } from './react-diagrams/MetaNodeFactory';\nimport { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';\nimport { CanvasWidget } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './react-diagrams/MetaNodeModel';\nimport { getLinkModel } from './helpers/linksHelper';\nimport { makeStyles } from '@material-ui/core';\nimport Sidebar from './components/Sidebar';\nimport {processNodes} from \"./helpers/nodesHelper\";\n\nconst useStyles = makeStyles(_ => ({\n  container: {\n    height: '100%',\n    width: '100%',\n  },\n  canvasContainer: {\n    height: '100%',\n    width: '100%',\n    background: '#333333',\n  },\n}));\n\ninterface MetaDiagramProps {\n  metaNodes: MetaNode[];\n  metaLinks: MetaLink[];\n  componentsMap: ComponentsMap;\n  wrapperClassName?: string;\n  canvasClassName?: string;\n}\n\nconst MetaDiagram = ({\n  metaNodes,\n  metaLinks,\n  componentsMap,\n  wrapperClassName,\n  canvasClassName,\n}: MetaDiagramProps) => {\n  const classes = useStyles();\n\n  // set up the diagram engine\n  const engine = createEngine();\n\n  engine\n    .getNodeFactories()\n    // @ts-ignore\n    .registerFactory(new MetaNodeFactory(componentsMap.nodes));\n\n  engine\n    .getLinkFactories()\n    // @ts-ignore\n    .registerFactory(new MetaLinkFactory(componentsMap.links));\n\n  // set up the diagram model\n\n  const model = new DiagramModel();\n  const nodes = processNodes(metaNodes)\n  const links = metaLinks\n    .map(ml => getLinkModel(ml, nodes))\n    .filter(mlm => mlm !== undefined);\n  // @ts-ignore\n  model.addAll(...nodes, ...links);\n\n  // load model into engine\n  engine.setModel(model);\n\n  const containerClassName = wrapperClassName\n    ? wrapperClassName\n    : classes.container;\n  const diagramClassName = canvasClassName\n    ? canvasClassName\n    : classes.canvasContainer;\n  return (\n    <div className={containerClassName}>\n      <Sidebar />\n      <CanvasWidget className={diagramClassName} engine={engine} />\n    </div>\n  );\n};\n\nexport default MetaDiagram;\nexport { MetaNode, MetaLink, MetaNodeModel, ComponentsMap };\nexport { MetaLinkModel } from './react-diagrams/MetaLinkModel';\nexport { Position } from './models/Position';\n"],"names":["MetaOptions","constructor","id","name","shape","options","set","getId","get","getShape","MetaNode","position","children","MetaLink","sourceId","sourcePortId","targetId","targetPortId","getSourceId","getSourcePortId","getTargetId","getTargetPortId","ComponentsMap","nodesMap","linksMap","nodes","links","ReactDiagramMetaTypes","MetaNodeModel","NodeModel","type","META_NODE","addPort","DefaultPortModel","in","UnknownTypeWidget","React","MetaNodeFactory","AbstractReactFactory","componentsMap","generateModel","generateReactWidget","event","has","model","ReactComponentType","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getOptions","getNode","find","n","processNodes","metaNodes","metaNodeModels","mn","metaNodeModel","Object","fromEntries","registerListener","positionChanged","handlePositionChanged","push","e","console","log","getLinkModel","metaLink","link","source","target","setSourcePort","getPort","setTargetPort","undefined","vars","fontFamily","primaryBg","textWhite","chipTextColor","chipBgColor","chipPrimaryTextColor","chipPrimaryBgColor","breadcrumbLinkColor","breadcrumbTextColor","buttonPrimaryBgColor","buttonPrimaryBgHoverColor","buttonPrimaryDisabledBgColor","listItemActiveBg","listSelectedTextColor","listBoxShadow","listBorderColor","dividerColor","dropdownBg","dropdownTextColor","overlayColor","progressBg","progressBar","progressShadow","switchShadow","useStyles","makeStyles","root","zIndex","width","background","boxShadow","borderRadius","left","top","transform","right","padding","node","margin","borderColor","border","borderTop","display","Sidebar","classes","Box","className","List","disablePadding","component","ListItemButton","ListItemIcon","src","Buffer","Cursor","toString","alt","Move","Divider","Node","disabled","Icon","Fullscreen","Position","x","y","_","container","height","canvasContainer","MetaDiagram","metaLinks","wrapperClassName","canvasClassName","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","ml","filter","mlm","addAll","setModel","containerClassName","diagramClassName","CanvasWidget"],"mappings":"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"}
\ No newline at end of file
diff --git a/dist/meta-diagram.cjs.production.min.js b/dist/meta-diagram.cjs.production.min.js
index a402529..ac725cd 100644
--- a/dist/meta-diagram.cjs.production.min.js
+++ b/dist/meta-diagram.cjs.production.min.js
@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=require("react"),o=e(r),n=require("@projectstorm/react-diagrams"),i=e(n),s=require("@projectstorm/react-canvas-core"),a=require("@material-ui/core"),l=require("@mui/system"),c=require("@mui/styles"),d=require("@mui/material");class m{constructor(e,t,r,o){this.options=o,this.options.set("id",e),this.options.set("name",t),this.options.set("shape",r)}getId(){return this.options.get("id")}getShape(){return this.options.get("shape")}}!function(e){e.META_NODE="meta-node-type",e.META_LINK="meta-link-type"}(t||(t={}));class C extends n.NodeModel{constructor(e={}){super({...e,type:t.META_NODE}),this.addPort(new n.DefaultPortModel({in:!0,name:"in"})),this.addPort(new n.DefaultPortModel({in:!1,name:"out"}))}}const g=()=>o.createElement("div",null,"Unknown Type");class u extends s.AbstractReactFactory{constructor(e){super(t.META_NODE),this.componentsMap=e}generateModel(){return new C}generateReactWidget(e){if(this.componentsMap.has(e.model.options.shape)){const t=this.componentsMap.get(e.model.options.shape);return o.createElement(t,{engine:this.engine,model:e.model})}return o.createElement(g,null)}}class p extends n.DefaultLinkModel{constructor(e={}){super({...e,type:t.META_LINK})}}class h extends n.DefaultLinkFactory{constructor(e){super(t.META_LINK),this.componentsMap=e}generateModel(){return new p}generateLinkSegment(e,t,r){var n;if(this.componentsMap.has(null==(n=e.getOptions())?void 0:n.shape)){const n=this.componentsMap.get(e.getOptions().shape);return o.createElement(n,{engine:this.engine,model:e,path:r,selected:t})}return o.createElement(g,null)}}function f(e,t){return t.find(t=>t.getOptions().id===e)}const{textWhite:w,dividerColor:v}={fontFamily:"Inter, sans-serif",primaryBg:"#f1f1f1",textWhite:"#FFFFFF",chipTextColor:"#F2F2F7",chipBgColor:"rgba(60, 60, 67, 0.4)",chipPrimaryTextColor:"rgba(255, 255, 255, 0.8)",chipPrimaryBgColor:"rgba(0, 122, 255, 0.6)",breadcrumbLinkColor:"#A2A2A2",breadcrumbTextColor:"#292929",buttonPrimaryBgColor:"4353FF",buttonPrimaryBgHoverColor:"#3443E1",buttonPrimaryDisabledBgColor:"rgba(0, 122, 255, 0.4)",listItemActiveBg:"#007AFF",listSelectedTextColor:"#3C3C43",listBoxShadow:"0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)",listBorderColor:"rgba(0, 0, 0, 0.04)",dividerColor:"rgba(118, 120, 125, 0.12)",dropdownBg:"rgba(246, 246, 248, 0.8)",dropdownTextColor:"rgba(60, 60, 67, 0.6)",overlayColor:"rgba(0, 0, 0, 0.4)",progressBg:"#E5E5E5",progressBar:"#017AFF",progressShadow:"inset 0 0 0.0625rem #E3E3E3",switchShadow:"0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)"},x=c.makeStyles(()=>({root:{zIndex:"5",width:"4rem",background:w,boxShadow:"0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)",borderRadius:"2rem",position:"fixed",left:"1rem",top:"50%",transform:"translateY(-50%)","&.right":{left:"auto",right:"1rem"},"& .MuiList-root":{padding:"0.75rem"}},node:{margin:"0.25rem 0","& .MuiDivider-root":{borderColor:v,width:"calc(100% - 1.5rem)",margin:"0 auto",border:"none",borderTop:"0.0625rem solid"},"& img":{display:"block",margin:"1rem 0"}}})),M=()=>{const e=x();return o.createElement(l.Box,{className:e.root+" left"},o.createElement(d.List,{disablePadding:!0,component:"nav"},o.createElement(d.ListItemButton,{selected:!0},o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8.3125 15.1328L5.40625 8.36719L4.89062 9.33594L8.95312 9.57031C9.15104 9.58594 9.3099 9.53646 9.42969 9.42188C9.55469 9.30208 9.61979 9.15625 9.625 8.98438C9.63021 8.8125 9.5625 8.65365 9.42188 8.50781L1.57812 0.523438C1.44792 0.388021 1.30208 0.320312 1.14062 0.320312C0.979167 0.315104 0.841146 0.367188 0.726562 0.476562C0.611979 0.585938 0.552083 0.734375 0.546875 0.921875L0.40625 12.0469C0.401042 12.2604 0.460938 12.4271 0.585938 12.5469C0.716146 12.6615 0.869792 12.7188 1.04688 12.7188C1.22396 12.7135 1.3776 12.6302 1.50781 12.4688L4.11719 9.5625L3.05469 9.21875L5.85938 16.1562C5.92708 16.3281 6.03385 16.4427 6.17969 16.5C6.33073 16.5625 6.48177 16.5625 6.63281 16.5L8.02344 15.9375C8.1849 15.875 8.29167 15.7656 8.34375 15.6094C8.39583 15.4583 8.38542 15.2995 8.3125 15.1328Z" fill="white"/>\n</svg>').toString("base64"),alt:"icon"}))),o.createElement(d.ListItemButton,null,o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M1.25 9.91406L3.75 12.2812C3.92708 12.4479 4.10938 12.5234 4.29688 12.5078C4.48438 12.4922 4.64323 12.4115 4.77344 12.2656C4.90365 12.1198 4.96875 11.9349 4.96875 11.7109V10.0547H9.30469V14.4062H7.64062C7.41667 14.4062 7.23177 14.4714 7.08594 14.6016C6.9401 14.7266 6.85938 14.8828 6.84375 15.0703C6.82812 15.263 6.90365 15.4453 7.07031 15.6172L9.4375 18.1172C9.60417 18.2943 9.79427 18.3802 10.0078 18.375C10.2214 18.3698 10.4089 18.2812 10.5703 18.1094L12.9297 15.6172C13.0964 15.4453 13.1719 15.263 13.1562 15.0703C13.1458 14.8828 13.0651 14.7266 12.9141 14.6016C12.7682 14.4714 12.5833 14.4062 12.3594 14.4062H10.7031V10.0547H15.0312V11.7109C15.0312 11.9349 15.0964 12.1198 15.2266 12.2656C15.3568 12.4115 15.5156 12.4922 15.7031 12.5078C15.8906 12.5234 16.0729 12.4479 16.25 12.2812L18.7422 9.92188C18.9089 9.76042 18.9948 9.57292 19 9.35938C19.0052 9.14583 18.9219 8.95573 18.75 8.78906L16.25 6.42188C16.0729 6.25521 15.8906 6.17969 15.7031 6.19531C15.5156 6.21094 15.3568 6.29167 15.2266 6.4375C15.0964 6.58333 15.0312 6.76823 15.0312 6.99219V8.65625H10.7031V4.29688H12.3594C12.5833 4.29688 12.7682 4.23177 12.9141 4.10156C13.0651 3.97135 13.1458 3.8125 13.1562 3.625C13.1719 3.4375 13.0964 3.25781 12.9297 3.08594L10.5625 0.585938C10.3958 0.408854 10.2057 0.322917 9.99219 0.328125C9.78385 0.333333 9.59635 0.421875 9.42969 0.59375L7.07031 3.08594C6.90365 3.25781 6.82812 3.4375 6.84375 3.625C6.85938 3.8125 6.9401 3.97135 7.08594 4.10156C7.23177 4.23177 7.41667 4.29688 7.64062 4.29688H9.30469V8.65625H4.96875V6.99219C4.96875 6.76823 4.90365 6.58333 4.77344 6.4375C4.64323 6.29167 4.48438 6.21094 4.29688 6.19531C4.10938 6.17969 3.92708 6.25521 3.75 6.42188L1.25781 8.78125C1.09115 8.94271 1.00521 9.13021 1 9.34375C0.994792 9.55729 1.07812 9.7474 1.25 9.91406Z" fill="#3C3C43" fill-opacity="0.6"/>\n</svg>').toString("base64"),alt:"move"})))),o.createElement(l.Box,{className:e.node},o.createElement(d.Divider,null),o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="58" height="102" viewBox="0 0 58 102" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g opacity="0.5" filter="url(#filter0_d_307_751)">\n<rect x="-38" y="2" width="90" height="90" rx="45" fill="#F2F2F7"/>\n</g>\n<path d="M52 91V86.4142C52 85.5233 50.9229 85.0771 50.2929 85.7071L45.7071 90.2929C45.0771 90.9229 45.5233 92 46.4142 92H51C51.5523 92 52 91.5523 52 91Z" fill="#3C3C43" fill-opacity="0.2"/>\n<defs>\n<filter id="filter0_d_307_751" x="-44" y="0" width="102" height="102" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">\n<feFlood flood-opacity="0" result="BackgroundImageFix"/>\n<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>\n<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_dropShadow_307_751"/>\n<feOffset dy="4"/>\n<feGaussianBlur stdDeviation="5"/>\n<feComposite in2="hardAlpha" operator="out"/>\n<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.235294 0 0 0 0 0.262745 0 0 0 0.3 0"/>\n<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_307_751"/>\n<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_307_751" result="shape"/>\n</filter>\n</defs>\n</svg>').toString("base64"),alt:"node"}),o.createElement(d.Divider,null)),o.createElement(d.List,{disablePadding:!0,component:"nav"},o.createElement(d.ListItemButton,{disabled:!0},o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.3906 12.7188C11.901 12.7188 11.4531 12.8385 11.0469 13.0781C10.6458 13.3177 10.3255 13.6406 10.0859 14.0469C9.84635 14.4479 9.72656 14.8932 9.72656 15.3828C9.72656 15.8672 9.84635 16.3099 10.0859 16.7109C10.3255 17.1172 10.6458 17.4375 11.0469 17.6719C11.4531 17.9062 11.901 18.0234 12.3906 18.0234C12.8802 18.0234 13.3255 17.9062 13.7266 17.6719C14.1276 17.4375 14.4479 17.1172 14.6875 16.7109C14.9271 16.3099 15.0469 15.8672 15.0469 15.3828C15.0469 14.8932 14.9271 14.4479 14.6875 14.0469C14.4479 13.6406 14.1276 13.3177 13.7266 13.0781C13.3255 12.8385 12.8802 12.7188 12.3906 12.7188ZM12.3906 14.1562C12.7292 14.1562 13.0156 14.276 13.25 14.5156C13.4896 14.75 13.6094 15.0391 13.6094 15.3828C13.6094 15.7214 13.4896 16.0078 13.25 16.2422C13.0156 16.4766 12.7292 16.5938 12.3906 16.5938C12.0469 16.5938 11.7552 16.4766 11.5156 16.2422C11.2812 16.0078 11.1641 15.7214 11.1641 15.3828C11.1641 15.0339 11.2812 14.7422 11.5156 14.5078C11.7552 14.2734 12.0469 14.1562 12.3906 14.1562ZM3.60938 6.03906C4.09896 6.03906 4.54427 5.91927 4.94531 5.67969C5.34635 5.4401 5.66667 5.11979 5.90625 4.71875C6.14583 4.3125 6.26562 3.86458 6.26562 3.375C6.26562 2.88542 6.14583 2.4401 5.90625 2.03906C5.66667 1.63802 5.34635 1.31771 4.94531 1.07812C4.54427 0.838542 4.09896 0.71875 3.60938 0.71875C3.11979 0.71875 2.67448 0.838542 2.27344 1.07812C1.8724 1.31771 1.55208 1.63802 1.3125 2.03906C1.07292 2.4401 0.953125 2.88542 0.953125 3.375C0.953125 3.86458 1.07292 4.3125 1.3125 4.71875C1.55208 5.11979 1.8724 5.4401 2.27344 5.67969C2.67448 5.91927 3.11979 6.03906 3.60938 6.03906ZM3.60938 4.60156C3.26562 4.60156 2.97656 4.48438 2.74219 4.25C2.50781 4.01042 2.39062 3.71875 2.39062 3.375C2.39062 3.03125 2.50781 2.74219 2.74219 2.50781C2.97656 2.27344 3.26562 2.15625 3.60938 2.15625C3.95312 2.15625 4.24219 2.27344 4.47656 2.50781C4.71094 2.74219 4.82812 3.03125 4.82812 3.375C4.82812 3.71875 4.71094 4.01042 4.47656 4.25C4.24219 4.48438 3.95312 4.60156 3.60938 4.60156ZM2.85156 6.22656C2.85156 7.0599 3.10156 7.76042 3.60156 8.32812C4.10156 8.89583 4.83594 9.30729 5.80469 9.5625L9.75 10.6328C11.0052 10.9766 11.6328 11.6068 11.6328 12.5234V13.1641H13.1406V12.5234C13.1406 11.6901 12.8906 10.9922 12.3906 10.4297C11.8958 9.86198 11.1641 9.45052 10.1953 9.19531L6.25 8.125C4.98958 7.78125 4.35938 7.14844 4.35938 6.22656V5.58594H2.85156V6.22656Z" fill="#3C3C43" fill-opacity="0.2"/>\n</svg>').toString("base64"),alt:"icon"}))),o.createElement(d.ListItemButton,null,o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M0.703125 4.22656H2.24219V2.74219C2.24219 2.36719 2.33594 2.08594 2.52344 1.89844C2.71615 1.71094 2.99479 1.61719 3.35938 1.61719H4.82812V0.078125H3.26562C2.42188 0.078125 1.78385 0.291667 1.35156 0.71875C0.919271 1.14583 0.703125 1.77865 0.703125 2.61719V4.22656ZM5.96875 1.61719H10.0234V0.078125H5.96875V1.61719ZM13.75 4.22656H15.2891V2.61719C15.2891 1.77865 15.0729 1.14583 14.6406 0.71875C14.2083 0.291667 13.5703 0.078125 12.7266 0.078125H11.1641V1.61719H12.6328C12.9922 1.61719 13.2682 1.71094 13.4609 1.89844C13.6536 2.08594 13.75 2.36719 13.75 2.74219V4.22656ZM13.75 9.36719H15.2891V5.36719H13.75V9.36719ZM11.1641 14.6641H12.7266C13.5703 14.6641 14.2083 14.4479 14.6406 14.0156C15.0729 13.5885 15.2891 12.9583 15.2891 12.125V10.5156H13.75V11.9922C13.75 12.3724 13.6536 12.6562 13.4609 12.8438C13.2682 13.0312 12.9922 13.125 12.6328 13.125H11.1641V14.6641ZM5.96875 14.6641H10.0234V13.125H5.96875V14.6641ZM3.26562 14.6641H4.82812V13.125H3.35938C2.99479 13.125 2.71615 13.0312 2.52344 12.8438C2.33594 12.6562 2.24219 12.3724 2.24219 11.9922V10.5156H0.703125V12.125C0.703125 12.9583 0.919271 13.5885 1.35156 14.0156C1.78385 14.4479 2.42188 14.6641 3.26562 14.6641ZM0.703125 9.36719H2.24219V5.36719H0.703125V9.36719Z" fill="#3C3C43" fill-opacity="0.2"/>\n</svg>').toString("base64"),alt:"fullscreen"})))))},b=a.makeStyles(e=>({container:{height:"100%",width:"100%"},canvasContainer:{height:"100%",width:"100%",background:"#333333"}}));exports.ComponentsMap=class{constructor(e,t){this.nodes=e,this.links=t}},exports.MetaLink=class{constructor(e,t,r,o,n,i,s,a){this.sourceId=o,this.sourcePortId=n,this.targetId=i,this.targetPortId=s,this.options=new m(e,t,r,a)}getSourceId(){return this.sourceId}getSourcePortId(){return this.sourcePortId}getTargetId(){return this.targetId}getTargetPortId(){return this.targetPortId}},exports.MetaLinkModel=p,exports.MetaNode=class{constructor(e,t,r,o,n=[],i){i.set("children",n),i.set("position",o),this.options=new m(e,t,r,i)}},exports.MetaNodeModel=C,exports.Position=class{constructor(e,t){this.x=e,this.y=t}},exports.default=({metaNodes:e,metaLinks:t,componentsMap:o,wrapperClassName:a,canvasClassName:l})=>{const c=b(),d=i();d.getNodeFactories().registerFactory(new u(o.nodes)),d.getLinkFactories().registerFactory(new h(o.links));const m=new n.DiagramModel,g=e.map(e=>new C(Object.fromEntries(e.options.options))),w=t.map(e=>function(e,t){const r=new p(Object.fromEntries(e.options.options)),o=f(e.getSourceId(),t),n=f(e.getTargetId(),t);if(o&&n)return r.setSourcePort(o.getPort(e.getSourcePortId())),r.setTargetPort(n.getPort(e.getTargetPortId())),r}(e,g)).filter(e=>void 0!==e);m.addAll(...g,...w),d.setModel(m);const v=l||c.canvasContainer;return r.createElement("div",{className:a||c.container},r.createElement(M,null),r.createElement(s.CanvasWidget,{className:v,engine:d}))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=require("react"),o=e(r),n=require("@projectstorm/react-diagrams"),s=e(n),i=require("@projectstorm/react-canvas-core"),a=require("@material-ui/core"),l=require("@mui/system"),c=require("@mui/styles"),d=require("@mui/material");class m{constructor(e,t,r,o){this.options=o,this.options.set("id",e),this.options.set("name",t),this.options.set("shape",r)}getId(){return this.options.get("id")}getShape(){return this.options.get("shape")}}!function(e){e.META_NODE="meta-node-type",e.META_LINK="meta-link-type"}(t||(t={}));class C extends n.NodeModel{constructor(e={}){super({...e,type:t.META_NODE}),this.addPort(new n.DefaultPortModel({in:!0,name:"in"})),this.addPort(new n.DefaultPortModel({in:!1,name:"out"}))}}const g=()=>o.createElement("div",null,"Unknown Type");class u extends i.AbstractReactFactory{constructor(e){super(t.META_NODE),this.componentsMap=e}generateModel(){return new C}generateReactWidget(e){if(this.componentsMap.has(e.model.options.shape)){const t=this.componentsMap.get(e.model.options.shape);return o.createElement(t,{engine:this.engine,model:e.model})}return o.createElement(g,null)}}class p extends n.DefaultLinkModel{constructor(e={}){super({...e,type:t.META_LINK})}}class h extends n.DefaultLinkFactory{constructor(e){super(t.META_LINK),this.componentsMap=e}generateModel(){return new p}generateLinkSegment(e,t,r){var n;if(this.componentsMap.has(null==(n=e.getOptions())?void 0:n.shape)){const n=this.componentsMap.get(e.getOptions().shape);return o.createElement(n,{engine:this.engine,model:e,path:r,selected:t})}return o.createElement(g,null)}}function f(e,t){return t.find(t=>t.getOptions().id===e)}const{textWhite:w,dividerColor:v}={fontFamily:"Inter, sans-serif",primaryBg:"#f1f1f1",textWhite:"#FFFFFF",chipTextColor:"#F2F2F7",chipBgColor:"rgba(60, 60, 67, 0.4)",chipPrimaryTextColor:"rgba(255, 255, 255, 0.8)",chipPrimaryBgColor:"rgba(0, 122, 255, 0.6)",breadcrumbLinkColor:"#A2A2A2",breadcrumbTextColor:"#292929",buttonPrimaryBgColor:"4353FF",buttonPrimaryBgHoverColor:"#3443E1",buttonPrimaryDisabledBgColor:"rgba(0, 122, 255, 0.4)",listItemActiveBg:"#007AFF",listSelectedTextColor:"#3C3C43",listBoxShadow:"0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)",listBorderColor:"rgba(0, 0, 0, 0.04)",dividerColor:"rgba(118, 120, 125, 0.12)",dropdownBg:"rgba(246, 246, 248, 0.8)",dropdownTextColor:"rgba(60, 60, 67, 0.6)",overlayColor:"rgba(0, 0, 0, 0.4)",progressBg:"#E5E5E5",progressBar:"#017AFF",progressShadow:"inset 0 0 0.0625rem #E3E3E3",switchShadow:"0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)"},x=c.makeStyles(()=>({root:{zIndex:"5",width:"4rem",background:w,boxShadow:"0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)",borderRadius:"2rem",position:"fixed",left:"1rem",top:"50%",transform:"translateY(-50%)","&.right":{left:"auto",right:"1rem"},"& .MuiList-root":{padding:"0.75rem"}},node:{margin:"0.25rem 0","& .MuiDivider-root":{borderColor:v,width:"calc(100% - 1.5rem)",margin:"0 auto",border:"none",borderTop:"0.0625rem solid"},"& img":{display:"block",margin:"1rem 0"}}})),M=()=>{const e=x();return o.createElement(l.Box,{className:e.root+" left"},o.createElement(d.List,{disablePadding:!0,component:"nav"},o.createElement(d.ListItemButton,{selected:!0},o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8.3125 15.1328L5.40625 8.36719L4.89062 9.33594L8.95312 9.57031C9.15104 9.58594 9.3099 9.53646 9.42969 9.42188C9.55469 9.30208 9.61979 9.15625 9.625 8.98438C9.63021 8.8125 9.5625 8.65365 9.42188 8.50781L1.57812 0.523438C1.44792 0.388021 1.30208 0.320312 1.14062 0.320312C0.979167 0.315104 0.841146 0.367188 0.726562 0.476562C0.611979 0.585938 0.552083 0.734375 0.546875 0.921875L0.40625 12.0469C0.401042 12.2604 0.460938 12.4271 0.585938 12.5469C0.716146 12.6615 0.869792 12.7188 1.04688 12.7188C1.22396 12.7135 1.3776 12.6302 1.50781 12.4688L4.11719 9.5625L3.05469 9.21875L5.85938 16.1562C5.92708 16.3281 6.03385 16.4427 6.17969 16.5C6.33073 16.5625 6.48177 16.5625 6.63281 16.5L8.02344 15.9375C8.1849 15.875 8.29167 15.7656 8.34375 15.6094C8.39583 15.4583 8.38542 15.2995 8.3125 15.1328Z" fill="white"/>\n</svg>').toString("base64"),alt:"icon"}))),o.createElement(d.ListItemButton,null,o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M1.25 9.91406L3.75 12.2812C3.92708 12.4479 4.10938 12.5234 4.29688 12.5078C4.48438 12.4922 4.64323 12.4115 4.77344 12.2656C4.90365 12.1198 4.96875 11.9349 4.96875 11.7109V10.0547H9.30469V14.4062H7.64062C7.41667 14.4062 7.23177 14.4714 7.08594 14.6016C6.9401 14.7266 6.85938 14.8828 6.84375 15.0703C6.82812 15.263 6.90365 15.4453 7.07031 15.6172L9.4375 18.1172C9.60417 18.2943 9.79427 18.3802 10.0078 18.375C10.2214 18.3698 10.4089 18.2812 10.5703 18.1094L12.9297 15.6172C13.0964 15.4453 13.1719 15.263 13.1562 15.0703C13.1458 14.8828 13.0651 14.7266 12.9141 14.6016C12.7682 14.4714 12.5833 14.4062 12.3594 14.4062H10.7031V10.0547H15.0312V11.7109C15.0312 11.9349 15.0964 12.1198 15.2266 12.2656C15.3568 12.4115 15.5156 12.4922 15.7031 12.5078C15.8906 12.5234 16.0729 12.4479 16.25 12.2812L18.7422 9.92188C18.9089 9.76042 18.9948 9.57292 19 9.35938C19.0052 9.14583 18.9219 8.95573 18.75 8.78906L16.25 6.42188C16.0729 6.25521 15.8906 6.17969 15.7031 6.19531C15.5156 6.21094 15.3568 6.29167 15.2266 6.4375C15.0964 6.58333 15.0312 6.76823 15.0312 6.99219V8.65625H10.7031V4.29688H12.3594C12.5833 4.29688 12.7682 4.23177 12.9141 4.10156C13.0651 3.97135 13.1458 3.8125 13.1562 3.625C13.1719 3.4375 13.0964 3.25781 12.9297 3.08594L10.5625 0.585938C10.3958 0.408854 10.2057 0.322917 9.99219 0.328125C9.78385 0.333333 9.59635 0.421875 9.42969 0.59375L7.07031 3.08594C6.90365 3.25781 6.82812 3.4375 6.84375 3.625C6.85938 3.8125 6.9401 3.97135 7.08594 4.10156C7.23177 4.23177 7.41667 4.29688 7.64062 4.29688H9.30469V8.65625H4.96875V6.99219C4.96875 6.76823 4.90365 6.58333 4.77344 6.4375C4.64323 6.29167 4.48438 6.21094 4.29688 6.19531C4.10938 6.17969 3.92708 6.25521 3.75 6.42188L1.25781 8.78125C1.09115 8.94271 1.00521 9.13021 1 9.34375C0.994792 9.55729 1.07812 9.7474 1.25 9.91406Z" fill="#3C3C43" fill-opacity="0.6"/>\n</svg>').toString("base64"),alt:"move"})))),o.createElement(l.Box,{className:e.node},o.createElement(d.Divider,null),o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="58" height="102" viewBox="0 0 58 102" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g opacity="0.5" filter="url(#filter0_d_307_751)">\n<rect x="-38" y="2" width="90" height="90" rx="45" fill="#F2F2F7"/>\n</g>\n<path d="M52 91V86.4142C52 85.5233 50.9229 85.0771 50.2929 85.7071L45.7071 90.2929C45.0771 90.9229 45.5233 92 46.4142 92H51C51.5523 92 52 91.5523 52 91Z" fill="#3C3C43" fill-opacity="0.2"/>\n<defs>\n<filter id="filter0_d_307_751" x="-44" y="0" width="102" height="102" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">\n<feFlood flood-opacity="0" result="BackgroundImageFix"/>\n<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>\n<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_dropShadow_307_751"/>\n<feOffset dy="4"/>\n<feGaussianBlur stdDeviation="5"/>\n<feComposite in2="hardAlpha" operator="out"/>\n<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.235294 0 0 0 0 0.262745 0 0 0 0.3 0"/>\n<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_307_751"/>\n<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_307_751" result="shape"/>\n</filter>\n</defs>\n</svg>').toString("base64"),alt:"node"}),o.createElement(d.Divider,null)),o.createElement(d.List,{disablePadding:!0,component:"nav"},o.createElement(d.ListItemButton,{disabled:!0},o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.3906 12.7188C11.901 12.7188 11.4531 12.8385 11.0469 13.0781C10.6458 13.3177 10.3255 13.6406 10.0859 14.0469C9.84635 14.4479 9.72656 14.8932 9.72656 15.3828C9.72656 15.8672 9.84635 16.3099 10.0859 16.7109C10.3255 17.1172 10.6458 17.4375 11.0469 17.6719C11.4531 17.9062 11.901 18.0234 12.3906 18.0234C12.8802 18.0234 13.3255 17.9062 13.7266 17.6719C14.1276 17.4375 14.4479 17.1172 14.6875 16.7109C14.9271 16.3099 15.0469 15.8672 15.0469 15.3828C15.0469 14.8932 14.9271 14.4479 14.6875 14.0469C14.4479 13.6406 14.1276 13.3177 13.7266 13.0781C13.3255 12.8385 12.8802 12.7188 12.3906 12.7188ZM12.3906 14.1562C12.7292 14.1562 13.0156 14.276 13.25 14.5156C13.4896 14.75 13.6094 15.0391 13.6094 15.3828C13.6094 15.7214 13.4896 16.0078 13.25 16.2422C13.0156 16.4766 12.7292 16.5938 12.3906 16.5938C12.0469 16.5938 11.7552 16.4766 11.5156 16.2422C11.2812 16.0078 11.1641 15.7214 11.1641 15.3828C11.1641 15.0339 11.2812 14.7422 11.5156 14.5078C11.7552 14.2734 12.0469 14.1562 12.3906 14.1562ZM3.60938 6.03906C4.09896 6.03906 4.54427 5.91927 4.94531 5.67969C5.34635 5.4401 5.66667 5.11979 5.90625 4.71875C6.14583 4.3125 6.26562 3.86458 6.26562 3.375C6.26562 2.88542 6.14583 2.4401 5.90625 2.03906C5.66667 1.63802 5.34635 1.31771 4.94531 1.07812C4.54427 0.838542 4.09896 0.71875 3.60938 0.71875C3.11979 0.71875 2.67448 0.838542 2.27344 1.07812C1.8724 1.31771 1.55208 1.63802 1.3125 2.03906C1.07292 2.4401 0.953125 2.88542 0.953125 3.375C0.953125 3.86458 1.07292 4.3125 1.3125 4.71875C1.55208 5.11979 1.8724 5.4401 2.27344 5.67969C2.67448 5.91927 3.11979 6.03906 3.60938 6.03906ZM3.60938 4.60156C3.26562 4.60156 2.97656 4.48438 2.74219 4.25C2.50781 4.01042 2.39062 3.71875 2.39062 3.375C2.39062 3.03125 2.50781 2.74219 2.74219 2.50781C2.97656 2.27344 3.26562 2.15625 3.60938 2.15625C3.95312 2.15625 4.24219 2.27344 4.47656 2.50781C4.71094 2.74219 4.82812 3.03125 4.82812 3.375C4.82812 3.71875 4.71094 4.01042 4.47656 4.25C4.24219 4.48438 3.95312 4.60156 3.60938 4.60156ZM2.85156 6.22656C2.85156 7.0599 3.10156 7.76042 3.60156 8.32812C4.10156 8.89583 4.83594 9.30729 5.80469 9.5625L9.75 10.6328C11.0052 10.9766 11.6328 11.6068 11.6328 12.5234V13.1641H13.1406V12.5234C13.1406 11.6901 12.8906 10.9922 12.3906 10.4297C11.8958 9.86198 11.1641 9.45052 10.1953 9.19531L6.25 8.125C4.98958 7.78125 4.35938 7.14844 4.35938 6.22656V5.58594H2.85156V6.22656Z" fill="#3C3C43" fill-opacity="0.2"/>\n</svg>').toString("base64"),alt:"icon"}))),o.createElement(d.ListItemButton,null,o.createElement(d.ListItemIcon,null,o.createElement("img",{src:"data:image/svg+xml;base64,"+new Buffer('<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M0.703125 4.22656H2.24219V2.74219C2.24219 2.36719 2.33594 2.08594 2.52344 1.89844C2.71615 1.71094 2.99479 1.61719 3.35938 1.61719H4.82812V0.078125H3.26562C2.42188 0.078125 1.78385 0.291667 1.35156 0.71875C0.919271 1.14583 0.703125 1.77865 0.703125 2.61719V4.22656ZM5.96875 1.61719H10.0234V0.078125H5.96875V1.61719ZM13.75 4.22656H15.2891V2.61719C15.2891 1.77865 15.0729 1.14583 14.6406 0.71875C14.2083 0.291667 13.5703 0.078125 12.7266 0.078125H11.1641V1.61719H12.6328C12.9922 1.61719 13.2682 1.71094 13.4609 1.89844C13.6536 2.08594 13.75 2.36719 13.75 2.74219V4.22656ZM13.75 9.36719H15.2891V5.36719H13.75V9.36719ZM11.1641 14.6641H12.7266C13.5703 14.6641 14.2083 14.4479 14.6406 14.0156C15.0729 13.5885 15.2891 12.9583 15.2891 12.125V10.5156H13.75V11.9922C13.75 12.3724 13.6536 12.6562 13.4609 12.8438C13.2682 13.0312 12.9922 13.125 12.6328 13.125H11.1641V14.6641ZM5.96875 14.6641H10.0234V13.125H5.96875V14.6641ZM3.26562 14.6641H4.82812V13.125H3.35938C2.99479 13.125 2.71615 13.0312 2.52344 12.8438C2.33594 12.6562 2.24219 12.3724 2.24219 11.9922V10.5156H0.703125V12.125C0.703125 12.9583 0.919271 13.5885 1.35156 14.0156C1.78385 14.4479 2.42188 14.6641 3.26562 14.6641ZM0.703125 9.36719H2.24219V5.36719H0.703125V9.36719Z" fill="#3C3C43" fill-opacity="0.2"/>\n</svg>').toString("base64"),alt:"fullscreen"})))))},b=a.makeStyles(e=>({container:{height:"100%",width:"100%"},canvasContainer:{height:"100%",width:"100%",background:"#333333"}}));exports.ComponentsMap=class{constructor(e,t){this.nodes=e,this.links=t}},exports.MetaLink=class{constructor(e,t,r,o,n,s,i,a){this.sourceId=o,this.sourcePortId=n,this.targetId=s,this.targetPortId=i,this.options=new m(e,t,r,a)}getSourceId(){return this.sourceId}getSourcePortId(){return this.sourcePortId}getTargetId(){return this.targetId}getTargetPortId(){return this.targetPortId}},exports.MetaLinkModel=p,exports.MetaNode=class{constructor(e,t,r,o,n=[],s){s.set("children",n),s.set("position",o),this.options=new m(e,t,r,s)}},exports.MetaNodeModel=C,exports.Position=class{constructor(e,t){this.x=e,this.y=t}},exports.default=({metaNodes:e,metaLinks:t,componentsMap:o,wrapperClassName:a,canvasClassName:l})=>{const c=b(),d=s();d.getNodeFactories().registerFactory(new u(o.nodes)),d.getLinkFactories().registerFactory(new h(o.links));const m=new n.DiagramModel,g=function(e){const t=[];for(const r of e){const e=new C(Object.fromEntries(r.options.options));e.registerListener({positionChanged:e=>{console.log(e)}}),t.push(e)}return t}(e),w=t.map(e=>function(e,t){const r=new p(Object.fromEntries(e.options.options)),o=f(e.getSourceId(),t),n=f(e.getTargetId(),t);if(o&&n)return r.setSourcePort(o.getPort(e.getSourcePortId())),r.setTargetPort(n.getPort(e.getTargetPortId())),r}(e,g)).filter(e=>void 0!==e);m.addAll(...g,...w),d.setModel(m);const v=l||c.canvasContainer;return r.createElement("div",{className:a||c.container},r.createElement(M,null),r.createElement(i.CanvasWidget,{className:v,engine:d}))};
 //# sourceMappingURL=meta-diagram.cjs.production.min.js.map
diff --git a/dist/meta-diagram.cjs.production.min.js.map b/dist/meta-diagram.cjs.production.min.js.map
index 1f3d495..4d6bcee 100644
--- a/dist/meta-diagram.cjs.production.min.js.map
+++ b/dist/meta-diagram.cjs.production.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"meta-diagram.cjs.production.min.js","sources":["../src/constants.ts","../src/models/MetaOptions.ts","../src/react-diagrams/MetaNodeModel.ts","../src/components/UnknownTypeWidget.tsx","../src/react-diagrams/MetaNodeFactory.tsx","../src/react-diagrams/MetaLinkModel.ts","../src/react-diagrams/MetaLinkFactory.tsx","../src/helpers/nodesHelper.ts","../src/components/Sidebar.tsx","../src/components/assets/styles/variables.ts","../src/index.tsx","../src/models/ComponentsMap.ts","../src/models/MetaLink.ts","../src/models/MetaNode.ts","../src/models/Position.ts","../src/helpers/linksHelper.ts"],"sourcesContent":["export enum ReactDiagramMetaTypes {\n  META_NODE = 'meta-node-type',\n  META_LINK = 'meta-link-type',\n}\n","import { IShape } from './IShape';\nimport { IId } from './IId';\n\nexport class MetaOptions implements IShape, IId {\n  options: Map<string, any>;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    options: Map<string, any>\n  ) {\n    this.options = options;\n    this.options.set('id', id);\n    this.options.set('name', name);\n    this.options.set('shape', shape);\n  }\n\n  getId(): string {\n    return this.options.get('id');\n  }\n\n  getShape(): string {\n    return this.options.get('shape');\n  }\n}\n","import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeModel extends NodeModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_NODE,\n    });\n\n    // set up an in and out port\n\n    this.addPort(\n      new DefaultPortModel({\n        in: true,\n        name: 'in',\n      })\n    );\n    this.addPort(\n      new DefaultPortModel({\n        in: false,\n        name: 'out',\n      })\n    );\n  }\n}\n","import React from 'react';\n\nexport const UnknownTypeWidget = () => {\n  return <div>Unknown Type</div>;\n};\n","import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './MetaNodeModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport React from 'react';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeFactory extends AbstractReactFactory {\n  componentsMap: Map<string, React.ComponentType>;\n\n  constructor(componentsMap: Map<string, React.ComponentType>) {\n    super(ReactDiagramMetaTypes.META_NODE);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaNodeModel();\n  }\n\n  generateReactWidget(event: any): JSX.Element {\n    if (this.componentsMap.has(event.model.options.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        event.model.options.shape\n      );\n      // @ts-ignore\n      return <ReactComponentType engine={this.engine} model={event.model} />;\n    }\n    // TODO: Generate default node instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { DefaultLinkModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaLinkModel extends DefaultLinkModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_LINK,\n    });\n  }\n}\n","import { MetaLinkModel } from './MetaLinkModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport { ReactDiagramMetaTypes } from '../constants';\nimport React from 'react';\nimport { DefaultLinkFactory } from '@projectstorm/react-diagrams';\n\nexport class MetaLinkFactory extends DefaultLinkFactory {\n  componentsMap: Map<string, JSX.Element>;\n\n  constructor(componentsMap: Map<string, JSX.Element>) {\n    super(ReactDiagramMetaTypes.META_LINK);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaLinkModel();\n  }\n\n  generateLinkSegment(\n    model: MetaLinkModel,\n    selected: boolean,\n    path: string\n  ): JSX.Element {\n    // @ts-ignore\n    if (this.componentsMap.has(model.getOptions()?.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        // @ts-ignore\n        model.getOptions().shape\n      );\n\n      return (\n        // @ts-ignore\n        <ReactComponentType engine={this.engine} model={model} path={path} selected={selected} />\n      );\n    }\n    // TODO: Generate default link instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport {MetaNode} from \"../models/MetaNode\";\n\nexport function getNode(\n  id: string,\n  nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n  return nodes.find(n => n.getOptions().id === id);\n}\n\nexport function processNodes(metaNodes: MetaNode[]) : MetaNodeModel[] {\n  const metaNodeModels = []\n  for(const mn of metaNodes){\n    const metaNodeModel = new MetaNodeModel(Object.fromEntries(mn.options.options))\n    metaNodeModel.registerListener({positionChanged: () => { console.log(\"positionChanged\") }})\n    metaNodeModels.push(metaNodeModel)\n  }\n  return metaNodeModels\n}","import React from 'react';\nimport { Box } from '@mui/system';\nimport { makeStyles } from '@mui/styles';\nimport vars from './assets/styles/variables';\nimport { Divider, List, ListItemButton, ListItemIcon } from '@mui/material';\nimport Move from './assets/svg/move.svg';\nimport Icon from './assets/svg/icon.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\n\nconst { textWhite, dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    zIndex: '5',\n    width: '4rem',\n    background: textWhite,\n    boxShadow:\n      '0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)',\n    borderRadius: '2rem',\n    position: 'fixed',\n    left: '1rem',\n    top: '50%',\n    transform: 'translateY(-50%)',\n\n    '&.right': {\n      left: 'auto',\n      right: '1rem',\n    },\n\n    '& .MuiList-root': {\n      padding: '0.75rem',\n    },\n  },\n\n  node: {\n    margin: '0.25rem 0',\n    '& .MuiDivider-root': {\n      borderColor: dividerColor,\n      width: 'calc(100% - 1.5rem)',\n      margin: '0 auto',\n      border: 'none',\n      borderTop: '0.0625rem solid',\n    },\n\n    '& img': {\n      display: 'block',\n      margin: '1rem 0',\n    },\n  },\n}));\n\nconst Sidebar = () => {\n  const classes = useStyles();\n  return (\n    <Box className={`${classes.root} left`}>\n      <List disablePadding component=\"nav\">\n        <ListItemButton selected>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Cursor).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Move).toString(\n                'base64'\n              )}`}\n              alt=\"move\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n\n      <Box className={classes.node}>\n        <Divider />\n        <img\n          src={`data:image/svg+xml;base64,${new Buffer(Node).toString(\n            'base64'\n          )}`}\n          alt=\"node\"\n        />\n        <Divider />\n      </Box>\n\n      <List disablePadding component=\"nav\">\n        <ListItemButton disabled>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Icon).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Fullscreen).toString(\n                'base64'\n              )}`}\n              alt=\"fullscreen\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n    </Box>\n  );\n};\n\nexport default Sidebar;\n","const vars = {\n  fontFamily: 'Inter, sans-serif',\n  primaryBg: '#f1f1f1',\n  textWhite: '#FFFFFF',\n  chipTextColor: '#F2F2F7',\n  chipBgColor: 'rgba(60, 60, 67, 0.4)',\n\n  chipPrimaryTextColor: 'rgba(255, 255, 255, 0.8)',\n  chipPrimaryBgColor: 'rgba(0, 122, 255, 0.6)',\n\n  breadcrumbLinkColor: '#A2A2A2',\n  breadcrumbTextColor: '#292929',\n\n  buttonPrimaryBgColor: '4353FF',\n  buttonPrimaryBgHoverColor: '#3443E1',\n  buttonPrimaryDisabledBgColor: 'rgba(0, 122, 255, 0.4)',\n\n  listItemActiveBg: '#007AFF',\n  listSelectedTextColor: '#3C3C43',\n  listBoxShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)',\n  listBorderColor: 'rgba(0, 0, 0, 0.04)',\n\n  dividerColor: 'rgba(118, 120, 125, 0.12)',\n\n  dropdownBg: 'rgba(246, 246, 248, 0.8)',\n  dropdownTextColor: 'rgba(60, 60, 67, 0.6)',\n\n  overlayColor: 'rgba(0, 0, 0, 0.4)',\n\n  progressBg: '#E5E5E5',\n  progressBar: '#017AFF',\n  progressShadow: 'inset 0 0 0.0625rem #E3E3E3',\n\n  switchShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',\n};\n\nexport default vars;\n","import * as React from 'react';\nimport { MetaNode } from './models/MetaNode';\nimport { MetaLink } from './models/MetaLink';\nimport { ComponentsMap } from './models/ComponentsMap';\nimport createEngine, { DiagramModel } from '@projectstorm/react-diagrams';\nimport { MetaNodeFactory } from './react-diagrams/MetaNodeFactory';\nimport { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';\nimport { CanvasWidget } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './react-diagrams/MetaNodeModel';\nimport { getLinkModel } from './helpers/linksHelper';\nimport { makeStyles } from '@material-ui/core';\nimport Sidebar from './components/Sidebar';\nimport {processNodes} from \"./helpers/nodesHelper\";\n\nconst useStyles = makeStyles(_ => ({\n  container: {\n    height: '100%',\n    width: '100%',\n  },\n  canvasContainer: {\n    height: '100%',\n    width: '100%',\n    background: '#333333',\n  },\n}));\n\ninterface MetaDiagramProps {\n  metaNodes: MetaNode[];\n  metaLinks: MetaLink[];\n  componentsMap: ComponentsMap;\n  wrapperClassName?: string;\n  canvasClassName?: string;\n}\n\nconst MetaDiagram = ({\n  metaNodes,\n  metaLinks,\n  componentsMap,\n  wrapperClassName,\n  canvasClassName,\n}: MetaDiagramProps) => {\n  const classes = useStyles();\n\n  // set up the diagram engine\n  const engine = createEngine();\n\n  engine\n    .getNodeFactories()\n    // @ts-ignore\n    .registerFactory(new MetaNodeFactory(componentsMap.nodes));\n\n  engine\n    .getLinkFactories()\n    // @ts-ignore\n    .registerFactory(new MetaLinkFactory(componentsMap.links));\n\n  // set up the diagram model\n\n  const model = new DiagramModel();\n  const nodes = processNodes(metaNodes)\n  const links = metaLinks\n    .map(ml => getLinkModel(ml, nodes))\n    .filter(mlm => mlm !== undefined);\n  // @ts-ignore\n  model.addAll(...nodes, ...links);\n\n  // load model into engine\n  engine.setModel(model);\n\n  const containerClassName = wrapperClassName\n    ? wrapperClassName\n    : classes.container;\n  const diagramClassName = canvasClassName\n    ? canvasClassName\n    : classes.canvasContainer;\n  return (\n    <div className={containerClassName}>\n      <Sidebar />\n      <CanvasWidget className={diagramClassName} engine={engine} />\n    </div>\n  );\n};\n\nexport default MetaDiagram;\nexport { MetaNode, MetaLink, MetaNodeModel, ComponentsMap };\nexport { MetaLinkModel } from './react-diagrams/MetaLinkModel';\nexport { Position } from './models/Position';\n","import React from 'react';\n\nexport class ComponentsMap {\n  nodes: Map<string, React.ComponentType>;\n  links: Map<string, React.ComponentType>;\n\n  constructor(\n    nodesMap: Map<string, React.ComponentType>,\n    linksMap: Map<string, React.ComponentType>\n  ) {\n    this.nodes = nodesMap;\n    this.links = linksMap;\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { ILink } from './ILink';\n\nexport class MetaLink implements ILink {\n  sourceId: string;\n  sourcePortId: string;\n  targetId: string;\n  targetPortId: string;\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    sourceId: string,\n    sourcePortId: string,\n    targetId: string,\n    targetPortId: string,\n    options: Map<string, any>\n  ) {\n    this.sourceId = sourceId;\n    this.sourcePortId = sourcePortId;\n    this.targetId = targetId;\n    this.targetPortId = targetPortId;\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n\n  getSourceId(): string {\n    return this.sourceId;\n  }\n\n  getSourcePortId(): string {\n    return this.sourcePortId;\n  }\n\n  getTargetId(): string {\n    return this.targetId;\n  }\n\n  getTargetPortId(): string {\n    return this.targetPortId;\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { Position } from './Position';\n\nexport class MetaNode {\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    position: Position,\n    children: MetaNode[] = [],\n    options: Map<string, any>\n  ) {\n    options.set('children', children);\n    options.set('position', position);\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n}\n","export class Position {\n  x: number;\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n}\n","import { MetaLink } from '../models/MetaLink';\nimport { MetaLinkModel } from '../react-diagrams/MetaLinkModel';\nimport { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport { getNode } from './nodesHelper';\n\nexport function getLinkModel(\n  metaLink: MetaLink,\n  nodes: MetaNodeModel[]\n): MetaLinkModel | undefined {\n  const link = new MetaLinkModel(Object.fromEntries(metaLink.options.options));\n  const source = getNode(metaLink.getSourceId(), nodes);\n  const target = getNode(metaLink.getTargetId(), nodes);\n  if (source && target) {\n    link.setSourcePort(source.getPort(metaLink.getSourcePortId()));\n    link.setTargetPort(target.getPort(metaLink.getTargetPortId()));\n    return link;\n  }\n  return undefined;\n}\n"],"names":["ReactDiagramMetaTypes","MetaOptions","constructor","id","name","shape","options","this","set","getId","get","getShape","MetaNodeModel","NodeModel","super","type","META_NODE","addPort","DefaultPortModel","in","UnknownTypeWidget","React","MetaNodeFactory","AbstractReactFactory","componentsMap","generateModel","generateReactWidget","event","has","model","ReactComponentType","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getOptions","_model$getOptions","getNode","nodes","find","n","textWhite","dividerColor","fontFamily","primaryBg","chipTextColor","chipBgColor","chipPrimaryTextColor","chipPrimaryBgColor","breadcrumbLinkColor","breadcrumbTextColor","buttonPrimaryBgColor","buttonPrimaryBgHoverColor","buttonPrimaryDisabledBgColor","listItemActiveBg","listSelectedTextColor","listBoxShadow","listBorderColor","dropdownBg","dropdownTextColor","overlayColor","progressBg","progressBar","progressShadow","switchShadow","useStyles","makeStyles","root","zIndex","width","background","boxShadow","borderRadius","position","left","top","transform","&.right","right","& .MuiList-root","padding","node","margin","& .MuiDivider-root","borderColor","border","borderTop","& img","display","Sidebar","classes","Box","className","List","disablePadding","component","ListItemButton","ListItemIcon","src","Buffer","toString","alt","Divider","disabled","_","container","height","canvasContainer","nodesMap","linksMap","links","sourceId","sourcePortId","targetId","targetPortId","getSourceId","getSourcePortId","getTargetId","getTargetPortId","children","x","y","metaNodes","metaLinks","wrapperClassName","canvasClassName","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","metaNodeModels","mn","metaNodeModel","Object","fromEntries","registerListener","positionChanged","console","log","push","processNodes","map","ml","metaLink","link","source","target","setSourcePort","getPort","setTargetPort","getLinkModel","filter","mlm","undefined","addAll","setModel","diagramClassName","CanvasWidget"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"meta-diagram.cjs.production.min.js","sources":["../src/constants.ts","../src/models/MetaOptions.ts","../src/react-diagrams/MetaNodeModel.ts","../src/components/UnknownTypeWidget.tsx","../src/react-diagrams/MetaNodeFactory.tsx","../src/react-diagrams/MetaLinkModel.ts","../src/react-diagrams/MetaLinkFactory.tsx","../src/helpers/nodesHelper.ts","../src/components/Sidebar.tsx","../src/components/assets/styles/variables.ts","../src/index.tsx","../src/models/ComponentsMap.ts","../src/models/MetaLink.ts","../src/models/MetaNode.ts","../src/models/Position.ts","../src/helpers/linksHelper.ts"],"sourcesContent":["export enum ReactDiagramMetaTypes {\n  META_NODE = 'meta-node-type',\n  META_LINK = 'meta-link-type',\n}\n","import { IShape } from './IShape';\nimport { IId } from './IId';\n\nexport class MetaOptions implements IShape, IId {\n  options: Map<string, any>;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    options: Map<string, any>\n  ) {\n    this.options = options;\n    this.options.set('id', id);\n    this.options.set('name', name);\n    this.options.set('shape', shape);\n  }\n\n  getId(): string {\n    return this.options.get('id');\n  }\n\n  getShape(): string {\n    return this.options.get('shape');\n  }\n}\n","import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeModel extends NodeModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_NODE,\n    });\n\n    // set up an in and out port\n\n    this.addPort(\n      new DefaultPortModel({\n        in: true,\n        name: 'in',\n      })\n    );\n    this.addPort(\n      new DefaultPortModel({\n        in: false,\n        name: 'out',\n      })\n    );\n  }\n}\n","import React from 'react';\n\nexport const UnknownTypeWidget = () => {\n  return <div>Unknown Type</div>;\n};\n","import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './MetaNodeModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport React from 'react';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeFactory extends AbstractReactFactory {\n  componentsMap: Map<string, React.ComponentType>;\n\n  constructor(componentsMap: Map<string, React.ComponentType>) {\n    super(ReactDiagramMetaTypes.META_NODE);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaNodeModel();\n  }\n\n  generateReactWidget(event: any): JSX.Element {\n    if (this.componentsMap.has(event.model.options.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        event.model.options.shape\n      );\n      // @ts-ignore\n      return <ReactComponentType engine={this.engine} model={event.model} />;\n    }\n    // TODO: Generate default node instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { DefaultLinkModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaLinkModel extends DefaultLinkModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_LINK,\n    });\n  }\n}\n","import { MetaLinkModel } from './MetaLinkModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport { ReactDiagramMetaTypes } from '../constants';\nimport React from 'react';\nimport { DefaultLinkFactory } from '@projectstorm/react-diagrams';\n\nexport class MetaLinkFactory extends DefaultLinkFactory {\n  componentsMap: Map<string, JSX.Element>;\n\n  constructor(componentsMap: Map<string, JSX.Element>) {\n    super(ReactDiagramMetaTypes.META_LINK);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaLinkModel();\n  }\n\n  generateLinkSegment(\n    model: MetaLinkModel,\n    selected: boolean,\n    path: string\n  ): JSX.Element {\n    // @ts-ignore\n    if (this.componentsMap.has(model.getOptions()?.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        // @ts-ignore\n        model.getOptions().shape\n      );\n\n      return (\n        // @ts-ignore\n        <ReactComponentType engine={this.engine} model={model} path={path} selected={selected} />\n      );\n    }\n    // TODO: Generate default link instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport {MetaNode} from \"../models/MetaNode\";\n\nexport function getNode(\n  id: string,\n  nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n  return nodes.find(n => n.getOptions().id === id);\n}\n\nexport function processNodes(metaNodes: MetaNode[]) : MetaNodeModel[] {\n  const metaNodeModels = []\n  for(const mn of metaNodes){\n    // TODO: serialize children (bottom up or memoization)\n    const metaNodeModel = new MetaNodeModel(Object.fromEntries(mn.options.options))\n    // @ts-ignore\n    metaNodeModel.registerListener({positionChanged: (event => handlePositionChanged(event))})\n    metaNodeModels.push(metaNodeModel)\n  }\n  return metaNodeModels\n}\n\nfunction handlePositionChanged(e: any){\n  // todo: calculate e.entity.position offset apply the same to e.entity.children\n  console.log(e)\n}","import React from 'react';\nimport { Box } from '@mui/system';\nimport { makeStyles } from '@mui/styles';\nimport vars from './assets/styles/variables';\nimport { Divider, List, ListItemButton, ListItemIcon } from '@mui/material';\nimport Move from './assets/svg/move.svg';\nimport Icon from './assets/svg/icon.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\n\nconst { textWhite, dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    zIndex: '5',\n    width: '4rem',\n    background: textWhite,\n    boxShadow:\n      '0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)',\n    borderRadius: '2rem',\n    position: 'fixed',\n    left: '1rem',\n    top: '50%',\n    transform: 'translateY(-50%)',\n\n    '&.right': {\n      left: 'auto',\n      right: '1rem',\n    },\n\n    '& .MuiList-root': {\n      padding: '0.75rem',\n    },\n  },\n\n  node: {\n    margin: '0.25rem 0',\n    '& .MuiDivider-root': {\n      borderColor: dividerColor,\n      width: 'calc(100% - 1.5rem)',\n      margin: '0 auto',\n      border: 'none',\n      borderTop: '0.0625rem solid',\n    },\n\n    '& img': {\n      display: 'block',\n      margin: '1rem 0',\n    },\n  },\n}));\n\nconst Sidebar = () => {\n  const classes = useStyles();\n  return (\n    <Box className={`${classes.root} left`}>\n      <List disablePadding component=\"nav\">\n        <ListItemButton selected>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Cursor).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Move).toString(\n                'base64'\n              )}`}\n              alt=\"move\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n\n      <Box className={classes.node}>\n        <Divider />\n        <img\n          src={`data:image/svg+xml;base64,${new Buffer(Node).toString(\n            'base64'\n          )}`}\n          alt=\"node\"\n        />\n        <Divider />\n      </Box>\n\n      <List disablePadding component=\"nav\">\n        <ListItemButton disabled>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Icon).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Fullscreen).toString(\n                'base64'\n              )}`}\n              alt=\"fullscreen\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n    </Box>\n  );\n};\n\nexport default Sidebar;\n","const vars = {\n  fontFamily: 'Inter, sans-serif',\n  primaryBg: '#f1f1f1',\n  textWhite: '#FFFFFF',\n  chipTextColor: '#F2F2F7',\n  chipBgColor: 'rgba(60, 60, 67, 0.4)',\n\n  chipPrimaryTextColor: 'rgba(255, 255, 255, 0.8)',\n  chipPrimaryBgColor: 'rgba(0, 122, 255, 0.6)',\n\n  breadcrumbLinkColor: '#A2A2A2',\n  breadcrumbTextColor: '#292929',\n\n  buttonPrimaryBgColor: '4353FF',\n  buttonPrimaryBgHoverColor: '#3443E1',\n  buttonPrimaryDisabledBgColor: 'rgba(0, 122, 255, 0.4)',\n\n  listItemActiveBg: '#007AFF',\n  listSelectedTextColor: '#3C3C43',\n  listBoxShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)',\n  listBorderColor: 'rgba(0, 0, 0, 0.04)',\n\n  dividerColor: 'rgba(118, 120, 125, 0.12)',\n\n  dropdownBg: 'rgba(246, 246, 248, 0.8)',\n  dropdownTextColor: 'rgba(60, 60, 67, 0.6)',\n\n  overlayColor: 'rgba(0, 0, 0, 0.4)',\n\n  progressBg: '#E5E5E5',\n  progressBar: '#017AFF',\n  progressShadow: 'inset 0 0 0.0625rem #E3E3E3',\n\n  switchShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',\n};\n\nexport default vars;\n","import * as React from 'react';\nimport { MetaNode } from './models/MetaNode';\nimport { MetaLink } from './models/MetaLink';\nimport { ComponentsMap } from './models/ComponentsMap';\nimport createEngine, { DiagramModel } from '@projectstorm/react-diagrams';\nimport { MetaNodeFactory } from './react-diagrams/MetaNodeFactory';\nimport { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';\nimport { CanvasWidget } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './react-diagrams/MetaNodeModel';\nimport { getLinkModel } from './helpers/linksHelper';\nimport { makeStyles } from '@material-ui/core';\nimport Sidebar from './components/Sidebar';\nimport {processNodes} from \"./helpers/nodesHelper\";\n\nconst useStyles = makeStyles(_ => ({\n  container: {\n    height: '100%',\n    width: '100%',\n  },\n  canvasContainer: {\n    height: '100%',\n    width: '100%',\n    background: '#333333',\n  },\n}));\n\ninterface MetaDiagramProps {\n  metaNodes: MetaNode[];\n  metaLinks: MetaLink[];\n  componentsMap: ComponentsMap;\n  wrapperClassName?: string;\n  canvasClassName?: string;\n}\n\nconst MetaDiagram = ({\n  metaNodes,\n  metaLinks,\n  componentsMap,\n  wrapperClassName,\n  canvasClassName,\n}: MetaDiagramProps) => {\n  const classes = useStyles();\n\n  // set up the diagram engine\n  const engine = createEngine();\n\n  engine\n    .getNodeFactories()\n    // @ts-ignore\n    .registerFactory(new MetaNodeFactory(componentsMap.nodes));\n\n  engine\n    .getLinkFactories()\n    // @ts-ignore\n    .registerFactory(new MetaLinkFactory(componentsMap.links));\n\n  // set up the diagram model\n\n  const model = new DiagramModel();\n  const nodes = processNodes(metaNodes)\n  const links = metaLinks\n    .map(ml => getLinkModel(ml, nodes))\n    .filter(mlm => mlm !== undefined);\n  // @ts-ignore\n  model.addAll(...nodes, ...links);\n\n  // load model into engine\n  engine.setModel(model);\n\n  const containerClassName = wrapperClassName\n    ? wrapperClassName\n    : classes.container;\n  const diagramClassName = canvasClassName\n    ? canvasClassName\n    : classes.canvasContainer;\n  return (\n    <div className={containerClassName}>\n      <Sidebar />\n      <CanvasWidget className={diagramClassName} engine={engine} />\n    </div>\n  );\n};\n\nexport default MetaDiagram;\nexport { MetaNode, MetaLink, MetaNodeModel, ComponentsMap };\nexport { MetaLinkModel } from './react-diagrams/MetaLinkModel';\nexport { Position } from './models/Position';\n","import React from 'react';\n\nexport class ComponentsMap {\n  nodes: Map<string, React.ComponentType>;\n  links: Map<string, React.ComponentType>;\n\n  constructor(\n    nodesMap: Map<string, React.ComponentType>,\n    linksMap: Map<string, React.ComponentType>\n  ) {\n    this.nodes = nodesMap;\n    this.links = linksMap;\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { ILink } from './ILink';\n\nexport class MetaLink implements ILink {\n  sourceId: string;\n  sourcePortId: string;\n  targetId: string;\n  targetPortId: string;\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    sourceId: string,\n    sourcePortId: string,\n    targetId: string,\n    targetPortId: string,\n    options: Map<string, any>\n  ) {\n    this.sourceId = sourceId;\n    this.sourcePortId = sourcePortId;\n    this.targetId = targetId;\n    this.targetPortId = targetPortId;\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n\n  getSourceId(): string {\n    return this.sourceId;\n  }\n\n  getSourcePortId(): string {\n    return this.sourcePortId;\n  }\n\n  getTargetId(): string {\n    return this.targetId;\n  }\n\n  getTargetPortId(): string {\n    return this.targetPortId;\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { Position } from './Position';\n\nexport class MetaNode {\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    position: Position,\n    children: MetaNode[] = [],\n    options: Map<string, any>\n  ) {\n    options.set('children', children);\n    options.set('position', position);\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n}\n","export class Position {\n  x: number;\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n}\n","import { MetaLink } from '../models/MetaLink';\nimport { MetaLinkModel } from '../react-diagrams/MetaLinkModel';\nimport { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport { getNode } from './nodesHelper';\n\nexport function getLinkModel(\n  metaLink: MetaLink,\n  nodes: MetaNodeModel[]\n): MetaLinkModel | undefined {\n  const link = new MetaLinkModel(Object.fromEntries(metaLink.options.options));\n  const source = getNode(metaLink.getSourceId(), nodes);\n  const target = getNode(metaLink.getTargetId(), nodes);\n  if (source && target) {\n    link.setSourcePort(source.getPort(metaLink.getSourcePortId()));\n    link.setTargetPort(target.getPort(metaLink.getTargetPortId()));\n    return link;\n  }\n  return undefined;\n}\n"],"names":["ReactDiagramMetaTypes","MetaOptions","constructor","id","name","shape","options","this","set","getId","get","getShape","MetaNodeModel","NodeModel","super","type","META_NODE","addPort","DefaultPortModel","in","UnknownTypeWidget","React","MetaNodeFactory","AbstractReactFactory","componentsMap","generateModel","generateReactWidget","event","has","model","ReactComponentType","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getOptions","_model$getOptions","getNode","nodes","find","n","textWhite","dividerColor","fontFamily","primaryBg","chipTextColor","chipBgColor","chipPrimaryTextColor","chipPrimaryBgColor","breadcrumbLinkColor","breadcrumbTextColor","buttonPrimaryBgColor","buttonPrimaryBgHoverColor","buttonPrimaryDisabledBgColor","listItemActiveBg","listSelectedTextColor","listBoxShadow","listBorderColor","dropdownBg","dropdownTextColor","overlayColor","progressBg","progressBar","progressShadow","switchShadow","useStyles","makeStyles","root","zIndex","width","background","boxShadow","borderRadius","position","left","top","transform","&.right","right","& .MuiList-root","padding","node","margin","& .MuiDivider-root","borderColor","border","borderTop","& img","display","Sidebar","classes","Box","className","List","disablePadding","component","ListItemButton","ListItemIcon","src","Buffer","toString","alt","Divider","disabled","_","container","height","canvasContainer","nodesMap","linksMap","links","sourceId","sourcePortId","targetId","targetPortId","getSourceId","getSourcePortId","getTargetId","getTargetPortId","children","x","y","metaNodes","metaLinks","wrapperClassName","canvasClassName","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","metaNodeModels","mn","metaNodeModel","Object","fromEntries","registerListener","positionChanged","console","log","push","processNodes","map","ml","metaLink","link","source","target","setSourcePort","getPort","setTargetPort","getLinkModel","filter","mlm","undefined","addAll","setModel","diagramClassName","CanvasWidget"],"mappings":"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"}
\ No newline at end of file
diff --git a/dist/meta-diagram.esm.js b/dist/meta-diagram.esm.js
index e49686c..f96df98 100644
--- a/dist/meta-diagram.esm.js
+++ b/dist/meta-diagram.esm.js
@@ -168,6 +168,26 @@ class MetaLinkFactory extends DefaultLinkFactory {
 function getNode(id, nodes) {
   return nodes.find(n => n.getOptions().id === id);
 }
+function processNodes(metaNodes) {
+  const metaNodeModels = [];
+
+  for (const mn of metaNodes) {
+    // TODO: serialize children (bottom up or memoization)
+    const metaNodeModel = new MetaNodeModel(Object.fromEntries(mn.options.options)); // @ts-ignore
+
+    metaNodeModel.registerListener({
+      positionChanged: event => handlePositionChanged(event)
+    });
+    metaNodeModels.push(metaNodeModel);
+  }
+
+  return metaNodeModels;
+}
+
+function handlePositionChanged(e) {
+  // todo: calculate e.entity.position offset apply the same to e.entity.children
+  console.log(e);
+}
 
 function getLinkModel(metaLink, nodes) {
   const link = new MetaLinkModel(Object.fromEntries(metaLink.options.options));
@@ -329,7 +349,7 @@ const MetaDiagram = ({
   .registerFactory(new MetaLinkFactory(componentsMap.links)); // set up the diagram model
 
   const model = new DiagramModel();
-  const nodes = metaNodes.map(mn => new MetaNodeModel(Object.fromEntries(mn.options.options)));
+  const nodes = processNodes(metaNodes);
   const links = metaLinks.map(ml => getLinkModel(ml, nodes)).filter(mlm => mlm !== undefined); // @ts-ignore
 
   model.addAll(...nodes, ...links); // load model into engine
diff --git a/dist/meta-diagram.esm.js.map b/dist/meta-diagram.esm.js.map
index 34587bb..1b6621e 100644
--- a/dist/meta-diagram.esm.js.map
+++ b/dist/meta-diagram.esm.js.map
@@ -1 +1 @@
-{"version":3,"file":"meta-diagram.esm.js","sources":["../src/models/MetaOptions.ts","../src/models/MetaNode.ts","../src/models/MetaLink.ts","../src/models/ComponentsMap.ts","../src/constants.ts","../src/react-diagrams/MetaNodeModel.ts","../src/components/UnknownTypeWidget.tsx","../src/react-diagrams/MetaNodeFactory.tsx","../src/react-diagrams/MetaLinkModel.ts","../src/react-diagrams/MetaLinkFactory.tsx","../src/helpers/nodesHelper.ts","../src/helpers/linksHelper.ts","../src/components/assets/styles/variables.ts","../src/components/Sidebar.tsx","../src/models/Position.ts","../src/index.tsx"],"sourcesContent":["import { IShape } from './IShape';\nimport { IId } from './IId';\n\nexport class MetaOptions implements IShape, IId {\n  options: Map<string, any>;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    options: Map<string, any>\n  ) {\n    this.options = options;\n    this.options.set('id', id);\n    this.options.set('name', name);\n    this.options.set('shape', shape);\n  }\n\n  getId(): string {\n    return this.options.get('id');\n  }\n\n  getShape(): string {\n    return this.options.get('shape');\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { Position } from './Position';\n\nexport class MetaNode {\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    position: Position,\n    children: MetaNode[] = [],\n    options: Map<string, any>\n  ) {\n    options.set('children', children);\n    options.set('position', position);\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { ILink } from './ILink';\n\nexport class MetaLink implements ILink {\n  sourceId: string;\n  sourcePortId: string;\n  targetId: string;\n  targetPortId: string;\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    sourceId: string,\n    sourcePortId: string,\n    targetId: string,\n    targetPortId: string,\n    options: Map<string, any>\n  ) {\n    this.sourceId = sourceId;\n    this.sourcePortId = sourcePortId;\n    this.targetId = targetId;\n    this.targetPortId = targetPortId;\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n\n  getSourceId(): string {\n    return this.sourceId;\n  }\n\n  getSourcePortId(): string {\n    return this.sourcePortId;\n  }\n\n  getTargetId(): string {\n    return this.targetId;\n  }\n\n  getTargetPortId(): string {\n    return this.targetPortId;\n  }\n}\n","import React from 'react';\n\nexport class ComponentsMap {\n  nodes: Map<string, React.ComponentType>;\n  links: Map<string, React.ComponentType>;\n\n  constructor(\n    nodesMap: Map<string, React.ComponentType>,\n    linksMap: Map<string, React.ComponentType>\n  ) {\n    this.nodes = nodesMap;\n    this.links = linksMap;\n  }\n}\n","export enum ReactDiagramMetaTypes {\n  META_NODE = 'meta-node-type',\n  META_LINK = 'meta-link-type',\n}\n","import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeModel extends NodeModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_NODE,\n    });\n\n    // set up an in and out port\n\n    this.addPort(\n      new DefaultPortModel({\n        in: true,\n        name: 'in',\n      })\n    );\n    this.addPort(\n      new DefaultPortModel({\n        in: false,\n        name: 'out',\n      })\n    );\n  }\n}\n","import React from 'react';\n\nexport const UnknownTypeWidget = () => {\n  return <div>Unknown Type</div>;\n};\n","import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './MetaNodeModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport React from 'react';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeFactory extends AbstractReactFactory {\n  componentsMap: Map<string, React.ComponentType>;\n\n  constructor(componentsMap: Map<string, React.ComponentType>) {\n    super(ReactDiagramMetaTypes.META_NODE);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaNodeModel();\n  }\n\n  generateReactWidget(event: any): JSX.Element {\n    if (this.componentsMap.has(event.model.options.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        event.model.options.shape\n      );\n      // @ts-ignore\n      return <ReactComponentType engine={this.engine} model={event.model} />;\n    }\n    // TODO: Generate default node instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { DefaultLinkModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaLinkModel extends DefaultLinkModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_LINK,\n    });\n  }\n}\n","import { MetaLinkModel } from './MetaLinkModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport { ReactDiagramMetaTypes } from '../constants';\nimport React from 'react';\nimport { DefaultLinkFactory } from '@projectstorm/react-diagrams';\n\nexport class MetaLinkFactory extends DefaultLinkFactory {\n  componentsMap: Map<string, JSX.Element>;\n\n  constructor(componentsMap: Map<string, JSX.Element>) {\n    super(ReactDiagramMetaTypes.META_LINK);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaLinkModel();\n  }\n\n  generateLinkSegment(\n    model: MetaLinkModel,\n    selected: boolean,\n    path: string\n  ): JSX.Element {\n    // @ts-ignore\n    if (this.componentsMap.has(model.getOptions()?.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        // @ts-ignore\n        model.getOptions().shape\n      );\n\n      return (\n        // @ts-ignore\n        <ReactComponentType engine={this.engine} model={model} path={path} selected={selected} />\n      );\n    }\n    // TODO: Generate default link instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport {MetaNode} from \"../models/MetaNode\";\n\nexport function getNode(\n  id: string,\n  nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n  return nodes.find(n => n.getOptions().id === id);\n}\n\nexport function processNodes(metaNodes: MetaNode[]) : MetaNodeModel[] {\n  const metaNodeModels = []\n  for(const mn of metaNodes){\n    const metaNodeModel = new MetaNodeModel(Object.fromEntries(mn.options.options))\n    metaNodeModel.registerListener({positionChanged: () => { console.log(\"positionChanged\") }})\n    metaNodeModels.push(metaNodeModel)\n  }\n  return metaNodeModels\n}","import { MetaLink } from '../models/MetaLink';\nimport { MetaLinkModel } from '../react-diagrams/MetaLinkModel';\nimport { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport { getNode } from './nodesHelper';\n\nexport function getLinkModel(\n  metaLink: MetaLink,\n  nodes: MetaNodeModel[]\n): MetaLinkModel | undefined {\n  const link = new MetaLinkModel(Object.fromEntries(metaLink.options.options));\n  const source = getNode(metaLink.getSourceId(), nodes);\n  const target = getNode(metaLink.getTargetId(), nodes);\n  if (source && target) {\n    link.setSourcePort(source.getPort(metaLink.getSourcePortId()));\n    link.setTargetPort(target.getPort(metaLink.getTargetPortId()));\n    return link;\n  }\n  return undefined;\n}\n","const vars = {\n  fontFamily: 'Inter, sans-serif',\n  primaryBg: '#f1f1f1',\n  textWhite: '#FFFFFF',\n  chipTextColor: '#F2F2F7',\n  chipBgColor: 'rgba(60, 60, 67, 0.4)',\n\n  chipPrimaryTextColor: 'rgba(255, 255, 255, 0.8)',\n  chipPrimaryBgColor: 'rgba(0, 122, 255, 0.6)',\n\n  breadcrumbLinkColor: '#A2A2A2',\n  breadcrumbTextColor: '#292929',\n\n  buttonPrimaryBgColor: '4353FF',\n  buttonPrimaryBgHoverColor: '#3443E1',\n  buttonPrimaryDisabledBgColor: 'rgba(0, 122, 255, 0.4)',\n\n  listItemActiveBg: '#007AFF',\n  listSelectedTextColor: '#3C3C43',\n  listBoxShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)',\n  listBorderColor: 'rgba(0, 0, 0, 0.04)',\n\n  dividerColor: 'rgba(118, 120, 125, 0.12)',\n\n  dropdownBg: 'rgba(246, 246, 248, 0.8)',\n  dropdownTextColor: 'rgba(60, 60, 67, 0.6)',\n\n  overlayColor: 'rgba(0, 0, 0, 0.4)',\n\n  progressBg: '#E5E5E5',\n  progressBar: '#017AFF',\n  progressShadow: 'inset 0 0 0.0625rem #E3E3E3',\n\n  switchShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',\n};\n\nexport default vars;\n","import React from 'react';\nimport { Box } from '@mui/system';\nimport { makeStyles } from '@mui/styles';\nimport vars from './assets/styles/variables';\nimport { Divider, List, ListItemButton, ListItemIcon } from '@mui/material';\nimport Move from './assets/svg/move.svg';\nimport Icon from './assets/svg/icon.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\n\nconst { textWhite, dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    zIndex: '5',\n    width: '4rem',\n    background: textWhite,\n    boxShadow:\n      '0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)',\n    borderRadius: '2rem',\n    position: 'fixed',\n    left: '1rem',\n    top: '50%',\n    transform: 'translateY(-50%)',\n\n    '&.right': {\n      left: 'auto',\n      right: '1rem',\n    },\n\n    '& .MuiList-root': {\n      padding: '0.75rem',\n    },\n  },\n\n  node: {\n    margin: '0.25rem 0',\n    '& .MuiDivider-root': {\n      borderColor: dividerColor,\n      width: 'calc(100% - 1.5rem)',\n      margin: '0 auto',\n      border: 'none',\n      borderTop: '0.0625rem solid',\n    },\n\n    '& img': {\n      display: 'block',\n      margin: '1rem 0',\n    },\n  },\n}));\n\nconst Sidebar = () => {\n  const classes = useStyles();\n  return (\n    <Box className={`${classes.root} left`}>\n      <List disablePadding component=\"nav\">\n        <ListItemButton selected>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Cursor).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Move).toString(\n                'base64'\n              )}`}\n              alt=\"move\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n\n      <Box className={classes.node}>\n        <Divider />\n        <img\n          src={`data:image/svg+xml;base64,${new Buffer(Node).toString(\n            'base64'\n          )}`}\n          alt=\"node\"\n        />\n        <Divider />\n      </Box>\n\n      <List disablePadding component=\"nav\">\n        <ListItemButton disabled>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Icon).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Fullscreen).toString(\n                'base64'\n              )}`}\n              alt=\"fullscreen\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n    </Box>\n  );\n};\n\nexport default Sidebar;\n","export class Position {\n  x: number;\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n}\n","import * as React from 'react';\nimport { MetaNode } from './models/MetaNode';\nimport { MetaLink } from './models/MetaLink';\nimport { ComponentsMap } from './models/ComponentsMap';\nimport createEngine, { DiagramModel } from '@projectstorm/react-diagrams';\nimport { MetaNodeFactory } from './react-diagrams/MetaNodeFactory';\nimport { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';\nimport { CanvasWidget } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './react-diagrams/MetaNodeModel';\nimport { getLinkModel } from './helpers/linksHelper';\nimport { makeStyles } from '@material-ui/core';\nimport Sidebar from './components/Sidebar';\nimport {processNodes} from \"./helpers/nodesHelper\";\n\nconst useStyles = makeStyles(_ => ({\n  container: {\n    height: '100%',\n    width: '100%',\n  },\n  canvasContainer: {\n    height: '100%',\n    width: '100%',\n    background: '#333333',\n  },\n}));\n\ninterface MetaDiagramProps {\n  metaNodes: MetaNode[];\n  metaLinks: MetaLink[];\n  componentsMap: ComponentsMap;\n  wrapperClassName?: string;\n  canvasClassName?: string;\n}\n\nconst MetaDiagram = ({\n  metaNodes,\n  metaLinks,\n  componentsMap,\n  wrapperClassName,\n  canvasClassName,\n}: MetaDiagramProps) => {\n  const classes = useStyles();\n\n  // set up the diagram engine\n  const engine = createEngine();\n\n  engine\n    .getNodeFactories()\n    // @ts-ignore\n    .registerFactory(new MetaNodeFactory(componentsMap.nodes));\n\n  engine\n    .getLinkFactories()\n    // @ts-ignore\n    .registerFactory(new MetaLinkFactory(componentsMap.links));\n\n  // set up the diagram model\n\n  const model = new DiagramModel();\n  const nodes = processNodes(metaNodes)\n  const links = metaLinks\n    .map(ml => getLinkModel(ml, nodes))\n    .filter(mlm => mlm !== undefined);\n  // @ts-ignore\n  model.addAll(...nodes, ...links);\n\n  // load model into engine\n  engine.setModel(model);\n\n  const containerClassName = wrapperClassName\n    ? wrapperClassName\n    : classes.container;\n  const diagramClassName = canvasClassName\n    ? canvasClassName\n    : classes.canvasContainer;\n  return (\n    <div className={containerClassName}>\n      <Sidebar />\n      <CanvasWidget className={diagramClassName} engine={engine} />\n    </div>\n  );\n};\n\nexport default MetaDiagram;\nexport { MetaNode, MetaLink, MetaNodeModel, ComponentsMap };\nexport { MetaLinkModel } from './react-diagrams/MetaLinkModel';\nexport { Position } from './models/Position';\n"],"names":["MetaOptions","constructor","id","name","shape","options","set","getId","get","getShape","MetaNode","position","children","MetaLink","sourceId","sourcePortId","targetId","targetPortId","getSourceId","getSourcePortId","getTargetId","getTargetPortId","ComponentsMap","nodesMap","linksMap","nodes","links","ReactDiagramMetaTypes","MetaNodeModel","NodeModel","type","META_NODE","addPort","DefaultPortModel","in","UnknownTypeWidget","React","MetaNodeFactory","AbstractReactFactory","componentsMap","generateModel","generateReactWidget","event","has","model","ReactComponentType","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getOptions","getNode","find","n","processNodes","metaNodes","metaNodeModels","mn","metaNodeModel","Object","fromEntries","registerListener","positionChanged","console","log","push","getLinkModel","metaLink","link","source","target","setSourcePort","getPort","setTargetPort","undefined","vars","fontFamily","primaryBg","textWhite","chipTextColor","chipBgColor","chipPrimaryTextColor","chipPrimaryBgColor","breadcrumbLinkColor","breadcrumbTextColor","buttonPrimaryBgColor","buttonPrimaryBgHoverColor","buttonPrimaryDisabledBgColor","listItemActiveBg","listSelectedTextColor","listBoxShadow","listBorderColor","dividerColor","dropdownBg","dropdownTextColor","overlayColor","progressBg","progressBar","progressShadow","switchShadow","useStyles","makeStyles","root","zIndex","width","background","boxShadow","borderRadius","left","top","transform","right","padding","node","margin","borderColor","border","borderTop","display","Sidebar","classes","Box","className","List","disablePadding","component","ListItemButton","ListItemIcon","src","Buffer","Cursor","toString","alt","Move","Divider","Node","disabled","Icon","Fullscreen","Position","x","y","_","container","height","canvasContainer","MetaDiagram","metaLinks","wrapperClassName","canvasClassName","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","ml","filter","mlm","addAll","setModel","containerClassName","diagramClassName","CanvasWidget"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"meta-diagram.esm.js","sources":["../src/models/MetaOptions.ts","../src/models/MetaNode.ts","../src/models/MetaLink.ts","../src/models/ComponentsMap.ts","../src/constants.ts","../src/react-diagrams/MetaNodeModel.ts","../src/components/UnknownTypeWidget.tsx","../src/react-diagrams/MetaNodeFactory.tsx","../src/react-diagrams/MetaLinkModel.ts","../src/react-diagrams/MetaLinkFactory.tsx","../src/helpers/nodesHelper.ts","../src/helpers/linksHelper.ts","../src/components/assets/styles/variables.ts","../src/components/Sidebar.tsx","../src/models/Position.ts","../src/index.tsx"],"sourcesContent":["import { IShape } from './IShape';\nimport { IId } from './IId';\n\nexport class MetaOptions implements IShape, IId {\n  options: Map<string, any>;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    options: Map<string, any>\n  ) {\n    this.options = options;\n    this.options.set('id', id);\n    this.options.set('name', name);\n    this.options.set('shape', shape);\n  }\n\n  getId(): string {\n    return this.options.get('id');\n  }\n\n  getShape(): string {\n    return this.options.get('shape');\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { Position } from './Position';\n\nexport class MetaNode {\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    position: Position,\n    children: MetaNode[] = [],\n    options: Map<string, any>\n  ) {\n    options.set('children', children);\n    options.set('position', position);\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n}\n","import { MetaOptions } from './MetaOptions';\nimport { ILink } from './ILink';\n\nexport class MetaLink implements ILink {\n  sourceId: string;\n  sourcePortId: string;\n  targetId: string;\n  targetPortId: string;\n  options: MetaOptions;\n\n  constructor(\n    id: string,\n    name: string,\n    shape: string,\n    sourceId: string,\n    sourcePortId: string,\n    targetId: string,\n    targetPortId: string,\n    options: Map<string, any>\n  ) {\n    this.sourceId = sourceId;\n    this.sourcePortId = sourcePortId;\n    this.targetId = targetId;\n    this.targetPortId = targetPortId;\n    this.options = new MetaOptions(id, name, shape, options);\n  }\n\n  getSourceId(): string {\n    return this.sourceId;\n  }\n\n  getSourcePortId(): string {\n    return this.sourcePortId;\n  }\n\n  getTargetId(): string {\n    return this.targetId;\n  }\n\n  getTargetPortId(): string {\n    return this.targetPortId;\n  }\n}\n","import React from 'react';\n\nexport class ComponentsMap {\n  nodes: Map<string, React.ComponentType>;\n  links: Map<string, React.ComponentType>;\n\n  constructor(\n    nodesMap: Map<string, React.ComponentType>,\n    linksMap: Map<string, React.ComponentType>\n  ) {\n    this.nodes = nodesMap;\n    this.links = linksMap;\n  }\n}\n","export enum ReactDiagramMetaTypes {\n  META_NODE = 'meta-node-type',\n  META_LINK = 'meta-link-type',\n}\n","import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeModel extends NodeModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_NODE,\n    });\n\n    // set up an in and out port\n\n    this.addPort(\n      new DefaultPortModel({\n        in: true,\n        name: 'in',\n      })\n    );\n    this.addPort(\n      new DefaultPortModel({\n        in: false,\n        name: 'out',\n      })\n    );\n  }\n}\n","import React from 'react';\n\nexport const UnknownTypeWidget = () => {\n  return <div>Unknown Type</div>;\n};\n","import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './MetaNodeModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport React from 'react';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaNodeFactory extends AbstractReactFactory {\n  componentsMap: Map<string, React.ComponentType>;\n\n  constructor(componentsMap: Map<string, React.ComponentType>) {\n    super(ReactDiagramMetaTypes.META_NODE);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaNodeModel();\n  }\n\n  generateReactWidget(event: any): JSX.Element {\n    if (this.componentsMap.has(event.model.options.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        event.model.options.shape\n      );\n      // @ts-ignore\n      return <ReactComponentType engine={this.engine} model={event.model} />;\n    }\n    // TODO: Generate default node instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { DefaultLinkModel } from '@projectstorm/react-diagrams';\nimport { ReactDiagramMetaTypes } from '../constants';\n\nexport class MetaLinkModel extends DefaultLinkModel {\n  constructor(options = {}) {\n    super({\n      ...options,\n      type: ReactDiagramMetaTypes.META_LINK,\n    });\n  }\n}\n","import { MetaLinkModel } from './MetaLinkModel';\nimport { UnknownTypeWidget } from '../components/UnknownTypeWidget';\nimport { ReactDiagramMetaTypes } from '../constants';\nimport React from 'react';\nimport { DefaultLinkFactory } from '@projectstorm/react-diagrams';\n\nexport class MetaLinkFactory extends DefaultLinkFactory {\n  componentsMap: Map<string, JSX.Element>;\n\n  constructor(componentsMap: Map<string, JSX.Element>) {\n    super(ReactDiagramMetaTypes.META_LINK);\n    this.componentsMap = componentsMap;\n  }\n\n  generateModel() {\n    return new MetaLinkModel();\n  }\n\n  generateLinkSegment(\n    model: MetaLinkModel,\n    selected: boolean,\n    path: string\n  ): JSX.Element {\n    // @ts-ignore\n    if (this.componentsMap.has(model.getOptions()?.shape)) {\n      const ReactComponentType = this.componentsMap.get(\n        // @ts-ignore\n        model.getOptions().shape\n      );\n\n      return (\n        // @ts-ignore\n        <ReactComponentType engine={this.engine} model={model} path={path} selected={selected} />\n      );\n    }\n    // TODO: Generate default link instead\n    return <UnknownTypeWidget />;\n  }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport {MetaNode} from \"../models/MetaNode\";\n\nexport function getNode(\n  id: string,\n  nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n  return nodes.find(n => n.getOptions().id === id);\n}\n\nexport function processNodes(metaNodes: MetaNode[]) : MetaNodeModel[] {\n  const metaNodeModels = []\n  for(const mn of metaNodes){\n    // TODO: serialize children (bottom up or memoization)\n    const metaNodeModel = new MetaNodeModel(Object.fromEntries(mn.options.options))\n    // @ts-ignore\n    metaNodeModel.registerListener({positionChanged: (event => handlePositionChanged(event))})\n    metaNodeModels.push(metaNodeModel)\n  }\n  return metaNodeModels\n}\n\nfunction handlePositionChanged(e: any){\n  // todo: calculate e.entity.position offset apply the same to e.entity.children\n  console.log(e)\n}","import { MetaLink } from '../models/MetaLink';\nimport { MetaLinkModel } from '../react-diagrams/MetaLinkModel';\nimport { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\nimport { getNode } from './nodesHelper';\n\nexport function getLinkModel(\n  metaLink: MetaLink,\n  nodes: MetaNodeModel[]\n): MetaLinkModel | undefined {\n  const link = new MetaLinkModel(Object.fromEntries(metaLink.options.options));\n  const source = getNode(metaLink.getSourceId(), nodes);\n  const target = getNode(metaLink.getTargetId(), nodes);\n  if (source && target) {\n    link.setSourcePort(source.getPort(metaLink.getSourcePortId()));\n    link.setTargetPort(target.getPort(metaLink.getTargetPortId()));\n    return link;\n  }\n  return undefined;\n}\n","const vars = {\n  fontFamily: 'Inter, sans-serif',\n  primaryBg: '#f1f1f1',\n  textWhite: '#FFFFFF',\n  chipTextColor: '#F2F2F7',\n  chipBgColor: 'rgba(60, 60, 67, 0.4)',\n\n  chipPrimaryTextColor: 'rgba(255, 255, 255, 0.8)',\n  chipPrimaryBgColor: 'rgba(0, 122, 255, 0.6)',\n\n  breadcrumbLinkColor: '#A2A2A2',\n  breadcrumbTextColor: '#292929',\n\n  buttonPrimaryBgColor: '4353FF',\n  buttonPrimaryBgHoverColor: '#3443E1',\n  buttonPrimaryDisabledBgColor: 'rgba(0, 122, 255, 0.4)',\n\n  listItemActiveBg: '#007AFF',\n  listSelectedTextColor: '#3C3C43',\n  listBoxShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)',\n  listBorderColor: 'rgba(0, 0, 0, 0.04)',\n\n  dividerColor: 'rgba(118, 120, 125, 0.12)',\n\n  dropdownBg: 'rgba(246, 246, 248, 0.8)',\n  dropdownTextColor: 'rgba(60, 60, 67, 0.6)',\n\n  overlayColor: 'rgba(0, 0, 0, 0.4)',\n\n  progressBg: '#E5E5E5',\n  progressBar: '#017AFF',\n  progressShadow: 'inset 0 0 0.0625rem #E3E3E3',\n\n  switchShadow:\n    '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',\n};\n\nexport default vars;\n","import React from 'react';\nimport { Box } from '@mui/system';\nimport { makeStyles } from '@mui/styles';\nimport vars from './assets/styles/variables';\nimport { Divider, List, ListItemButton, ListItemIcon } from '@mui/material';\nimport Move from './assets/svg/move.svg';\nimport Icon from './assets/svg/icon.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\n\nconst { textWhite, dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    zIndex: '5',\n    width: '4rem',\n    background: textWhite,\n    boxShadow:\n      '0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)',\n    borderRadius: '2rem',\n    position: 'fixed',\n    left: '1rem',\n    top: '50%',\n    transform: 'translateY(-50%)',\n\n    '&.right': {\n      left: 'auto',\n      right: '1rem',\n    },\n\n    '& .MuiList-root': {\n      padding: '0.75rem',\n    },\n  },\n\n  node: {\n    margin: '0.25rem 0',\n    '& .MuiDivider-root': {\n      borderColor: dividerColor,\n      width: 'calc(100% - 1.5rem)',\n      margin: '0 auto',\n      border: 'none',\n      borderTop: '0.0625rem solid',\n    },\n\n    '& img': {\n      display: 'block',\n      margin: '1rem 0',\n    },\n  },\n}));\n\nconst Sidebar = () => {\n  const classes = useStyles();\n  return (\n    <Box className={`${classes.root} left`}>\n      <List disablePadding component=\"nav\">\n        <ListItemButton selected>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Cursor).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Move).toString(\n                'base64'\n              )}`}\n              alt=\"move\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n\n      <Box className={classes.node}>\n        <Divider />\n        <img\n          src={`data:image/svg+xml;base64,${new Buffer(Node).toString(\n            'base64'\n          )}`}\n          alt=\"node\"\n        />\n        <Divider />\n      </Box>\n\n      <List disablePadding component=\"nav\">\n        <ListItemButton disabled>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Icon).toString(\n                'base64'\n              )}`}\n              alt=\"icon\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n\n        <ListItemButton>\n          <ListItemIcon>\n            <img\n              src={`data:image/svg+xml;base64,${new Buffer(Fullscreen).toString(\n                'base64'\n              )}`}\n              alt=\"fullscreen\"\n            />\n          </ListItemIcon>\n        </ListItemButton>\n      </List>\n    </Box>\n  );\n};\n\nexport default Sidebar;\n","export class Position {\n  x: number;\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n}\n","import * as React from 'react';\nimport { MetaNode } from './models/MetaNode';\nimport { MetaLink } from './models/MetaLink';\nimport { ComponentsMap } from './models/ComponentsMap';\nimport createEngine, { DiagramModel } from '@projectstorm/react-diagrams';\nimport { MetaNodeFactory } from './react-diagrams/MetaNodeFactory';\nimport { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';\nimport { CanvasWidget } from '@projectstorm/react-canvas-core';\nimport { MetaNodeModel } from './react-diagrams/MetaNodeModel';\nimport { getLinkModel } from './helpers/linksHelper';\nimport { makeStyles } from '@material-ui/core';\nimport Sidebar from './components/Sidebar';\nimport {processNodes} from \"./helpers/nodesHelper\";\n\nconst useStyles = makeStyles(_ => ({\n  container: {\n    height: '100%',\n    width: '100%',\n  },\n  canvasContainer: {\n    height: '100%',\n    width: '100%',\n    background: '#333333',\n  },\n}));\n\ninterface MetaDiagramProps {\n  metaNodes: MetaNode[];\n  metaLinks: MetaLink[];\n  componentsMap: ComponentsMap;\n  wrapperClassName?: string;\n  canvasClassName?: string;\n}\n\nconst MetaDiagram = ({\n  metaNodes,\n  metaLinks,\n  componentsMap,\n  wrapperClassName,\n  canvasClassName,\n}: MetaDiagramProps) => {\n  const classes = useStyles();\n\n  // set up the diagram engine\n  const engine = createEngine();\n\n  engine\n    .getNodeFactories()\n    // @ts-ignore\n    .registerFactory(new MetaNodeFactory(componentsMap.nodes));\n\n  engine\n    .getLinkFactories()\n    // @ts-ignore\n    .registerFactory(new MetaLinkFactory(componentsMap.links));\n\n  // set up the diagram model\n\n  const model = new DiagramModel();\n  const nodes = processNodes(metaNodes)\n  const links = metaLinks\n    .map(ml => getLinkModel(ml, nodes))\n    .filter(mlm => mlm !== undefined);\n  // @ts-ignore\n  model.addAll(...nodes, ...links);\n\n  // load model into engine\n  engine.setModel(model);\n\n  const containerClassName = wrapperClassName\n    ? wrapperClassName\n    : classes.container;\n  const diagramClassName = canvasClassName\n    ? canvasClassName\n    : classes.canvasContainer;\n  return (\n    <div className={containerClassName}>\n      <Sidebar />\n      <CanvasWidget className={diagramClassName} engine={engine} />\n    </div>\n  );\n};\n\nexport default MetaDiagram;\nexport { MetaNode, MetaLink, MetaNodeModel, ComponentsMap };\nexport { MetaLinkModel } from './react-diagrams/MetaLinkModel';\nexport { Position } from './models/Position';\n"],"names":["MetaOptions","constructor","id","name","shape","options","set","getId","get","getShape","MetaNode","position","children","MetaLink","sourceId","sourcePortId","targetId","targetPortId","getSourceId","getSourcePortId","getTargetId","getTargetPortId","ComponentsMap","nodesMap","linksMap","nodes","links","ReactDiagramMetaTypes","MetaNodeModel","NodeModel","type","META_NODE","addPort","DefaultPortModel","in","UnknownTypeWidget","React","MetaNodeFactory","AbstractReactFactory","componentsMap","generateModel","generateReactWidget","event","has","model","ReactComponentType","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getOptions","getNode","find","n","processNodes","metaNodes","metaNodeModels","mn","metaNodeModel","Object","fromEntries","registerListener","positionChanged","handlePositionChanged","push","e","console","log","getLinkModel","metaLink","link","source","target","setSourcePort","getPort","setTargetPort","undefined","vars","fontFamily","primaryBg","textWhite","chipTextColor","chipBgColor","chipPrimaryTextColor","chipPrimaryBgColor","breadcrumbLinkColor","breadcrumbTextColor","buttonPrimaryBgColor","buttonPrimaryBgHoverColor","buttonPrimaryDisabledBgColor","listItemActiveBg","listSelectedTextColor","listBoxShadow","listBorderColor","dividerColor","dropdownBg","dropdownTextColor","overlayColor","progressBg","progressBar","progressShadow","switchShadow","useStyles","makeStyles","root","zIndex","width","background","boxShadow","borderRadius","left","top","transform","right","padding","node","margin","borderColor","border","borderTop","display","Sidebar","classes","Box","className","List","disablePadding","component","ListItemButton","ListItemIcon","src","Buffer","Cursor","toString","alt","Move","Divider","Node","disabled","Icon","Fullscreen","Position","x","y","_","container","height","canvasContainer","MetaDiagram","metaLinks","wrapperClassName","canvasClassName","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","ml","filter","mlm","addAll","setModel","containerClassName","diagramClassName","CanvasWidget"],"mappings":"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"}
\ No newline at end of file
diff --git a/src/helpers/nodesHelper.ts b/src/helpers/nodesHelper.ts
index 1b8a056..b07434f 100644
--- a/src/helpers/nodesHelper.ts
+++ b/src/helpers/nodesHelper.ts
@@ -11,9 +11,16 @@ export function getNode(
 export function processNodes(metaNodes: MetaNode[]) : MetaNodeModel[] {
   const metaNodeModels = []
   for(const mn of metaNodes){
+    // TODO: serialize children (bottom up or memoization)
     const metaNodeModel = new MetaNodeModel(Object.fromEntries(mn.options.options))
-    metaNodeModel.registerListener({positionChanged: () => { console.log("positionChanged") }})
+    // @ts-ignore
+    metaNodeModel.registerListener({positionChanged: (event => handlePositionChanged(event))})
     metaNodeModels.push(metaNodeModel)
   }
   return metaNodeModels
+}
+
+function handlePositionChanged(e: any){
+  // todo: calculate e.entity.position offset apply the same to e.entity.children
+  console.log(e)
 }
\ No newline at end of file