From 59c906807d1a45cc958ffd6f1081d7ac64464938 Mon Sep 17 00:00:00 2001 From: vidhya-metacell Date: Tue, 9 Aug 2022 12:20:10 +0200 Subject: [PATCH 1/4] #26 Theme styles for expanded node --- dist/components/assets/styles/variables.d.ts | 3 + dist/meta-diagram.cjs.development.js | 144 ++++++++++++++++++- dist/meta-diagram.cjs.development.js.map | 2 +- dist/meta-diagram.cjs.production.min.js | 2 +- dist/meta-diagram.cjs.production.min.js.map | 2 +- dist/meta-diagram.esm.js | 144 ++++++++++++++++++- dist/meta-diagram.esm.js.map | 2 +- src/components/assets/styles/variables.ts | 3 + src/theme.ts | 139 +++++++++++++++++- 9 files changed, 429 insertions(+), 12 deletions(-) diff --git a/dist/components/assets/styles/variables.d.ts b/dist/components/assets/styles/variables.d.ts index e97db95..d528e4b 100644 --- a/dist/components/assets/styles/variables.d.ts +++ b/dist/components/assets/styles/variables.d.ts @@ -36,5 +36,8 @@ declare const vars: { nodeButtonTextColor: string; nodeButtonLineColor: string; nodeTextColor: string; + nodeWrapperBg: string; + nodeLabelColor: string; + nodeBlockBg: string; }; export default vars; diff --git a/dist/meta-diagram.cjs.development.js b/dist/meta-diagram.cjs.development.js index 1e1b8c9..2ec1d0f 100644 --- a/dist/meta-diagram.cjs.development.js +++ b/dist/meta-diagram.cjs.development.js @@ -245,6 +245,9 @@ const vars = { nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)', nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)', nodeTextColor: '#3C3C43', + nodeWrapperBg: '#FFFFFF', + nodeLabelColor: '#76787D', + nodeBlockBg: 'rgba(255, 255, 255, 0.6)', ...nodeGreen }; @@ -372,7 +375,10 @@ const applicationTheme = params => { nodeGreenTextColor, nodeGreenBorderColor, nodeGreenBoxShadow, - nodeTextColor + nodeTextColor, + nodeWrapperBg, + nodeLabelColor, + nodeBlockBg } = params; return { components: { @@ -433,8 +439,8 @@ const applicationTheme = params => { } .primary-node .icon { - width: 20px; - height: 20px; + width: 1.25rem; + height: 1.25rem; margin: 0 auto 0.25rem; background: url(data:image/svg+xml;base64,${new Buffer(nodeGreen$1).toString('base64')}); } @@ -520,6 +526,138 @@ const applicationTheme = params => { position: absolute; } + .primary-node.rounded { + border-radius: 0.875rem; + padding: 0.5rem; + width: 18rem; + height: auto; + } + + .primary-node.rounded .nodes { + left: 0; + top: 0; + width: 100%; + height: 100%; + } + + .primary-node.rounded .primary-node_header { + height: 4.25rem; + margin-bottom: 0.25rem + } + + .primary-node .block { + padding: 0.625rem 0.5rem; + background-color: ${nodeBlockBg}; + display: flex; + align-items: center; + } + + .primary-node .block:first-of-type { + border-top-left-radius: 0.625rem; + border-top-right-radius: 0.625rem; + } + + .primary-node .block:last-child { + border-bottom-left-radius: 0.625rem; + border-bottom-right-radius: 0.625rem; + } + + .primary-node .block:not(:last-child) { + margin-bottom: 0.0625rem; + } + + .primary-node .block .disc { + width: 1rem; + height: 1rem; + border: solid 0.0625rem ${nodeGreenTextColor}; + background: ${nodeGreenBackgroundColor} + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-right: 0.5rem + } + + .primary-node .block .disc:after { + content: ''; + background: ${nodeGreenTextColor}; + width: 0.375rem; + height: 0.375rem; + border-radius: 50%; + } + + .primary-node .block.reverse { + justify-content: end; + } + + .primary-node .block.reverse .disc { + order: 2; + margin-left: 0.5rem; + margin-right: 0; + } + + .primary-node .block.reverse p { + order: 1 + } + + .primary-node .block-wrapper { + display: flex; + gap: 0 0.0625rem; + flex-wrap: wrap; + } + + .primary-node .block-wrapper .block { + flex-direction: column; + align-items: flex-start; + background: ${nodeWrapperBg}; + padding: 0.5rem; + width: calc((100% - 0.125rem) / 3); + } + + .primary-node .block-wrapper .block .function.MuiTypography-root { + margin-top: 0.25rem; + word-break: break-all; + font-weight: 600; + font-family: 'Roboto Mono', monospace; + } + + .primary-node .block-wrapper .block .function.MuiTypography-root strong { + font-family: 'Roboto Mono', monospace; + font-weight: 600; + } + + .primary-node .block-wrapper .block:first-of-type { + border-top-left-radius: 0.625rem; + border-top-right-radius: 0 + } + + .primary-node .block-wrapper .block:nth-of-type(3) { + border-top-right-radius: 0.625rem + } + + .primary-node .block-wrapper .block:last-child { + width: 100%; + border-bottom-left-radius: 0.625rem; + border-bottom-right-radius: 0.625rem; + } + + .primary-node .block-wrapper .block label { + display: block; + font-weight: 400; + font-size: 0.625rem; + line-height: 0.625rem; + letter-spacing: -0.005rem; + color: ${nodeLabelColor}; + text-transform: uppercase; + } + + .primary-node .seprator { + width: 0.125rem; + height: 1rem; + border-radius: 1.25rem; + margin: 0.25rem auto; + background: ${nodeGreenBorderColor}; + } ` }, MuiList: { diff --git a/dist/meta-diagram.cjs.development.js.map b/dist/meta-diagram.cjs.development.js.map index 99da92b..b5bbe39 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/theme.ts","../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;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n variant: string,\n options: Map\n ) {\n this.options = options;\n this.options.set('id', id);\n this.options.set('name', name);\n this.options.set('shape', shape);\n this.options.set('variant', variant);\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 children: MetaNode[];\n options: MetaOptions;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n position: Position,\n variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\n }\n this.children = [];\n options.set('position', position);\n this.options = new MetaOptions(id, name, shape, variant, 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 variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\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, variant, 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;\n links: Map;\n\n constructor(\n nodesMap: Map,\n linksMap: Map\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
Unknown Type
;\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;\n\n constructor(componentsMap: Map) {\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 return (\n // @ts-ignore\n \n );\n }\n // TODO: Generate default node instead\n return ;\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;\n\n constructor(componentsMap: Map) {\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 \n );\n }\n // TODO: Generate default link instead\n return ;\n }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n id: string,\n nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n return nodes.find(n => n.getOptions().id === id);\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","const nodeGreen = {\n nodeGreenBackgroundColor: '#D4F4D4',\n nodeGreenTextColor: '#669D66',\n nodeGreenBorderColor: 'rgba(102, 157, 102, 0.2)',\n nodeGreenBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)',\n};\n\nconst 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 sidebarBg: '#ffffff',\n sidebarShadow: `0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)`,\n canvasBg: '#fff',\n showPropertiesButtonBg: '#161A1E',\n nodeBorderColor: '#18A0FB',\n nodePointerBg: '#fff',\n nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)',\n nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)',\n nodeTextColor: '#3C3C43',\n ...nodeGreen,\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 MoveActive from './assets/svg/move-active.svg';\nimport Icon from './assets/svg/icon.svg';\nimport IconActive from './assets/svg/icon-active.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport CursorActive from './assets/svg/cursor-active.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\nimport FullscreenActive from './assets/svg/fullscreen-active.svg';\n\nconst { dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\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\ntype sidebarItemProps = {\n image: string;\n name: string;\n selectedImage: string;\n selection: string;\n};\n\nconst Sidebar = () => {\n const classes = useStyles();\n const [selected, setSelected] = React.useState('1');\n const svgImg = (img: string) =>\n `data:image/svg+xml;base64,${new Buffer(img).toString('base64')}`;\n const SidebarItem = (props: sidebarItemProps) => {\n const { image, name, selectedImage, selection } = props;\n return (\n setSelected(selection)}\n >\n \n {selected === selection ? (\n {name}\n ) : (\n {name}\n )}\n \n \n );\n };\n\n return (\n \n \n \n \n \n\n \n \n \"Node\"\n \n \n\n \n \n \n \n \n );\n};\n\nexport default Sidebar;\n","import vars from './components/assets/styles/variables';\nimport nodeGreen from './components/assets/svg/node/green.svg';\n\ntype ThemeVars = {\n [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n const {\n primaryBg,\n fontFamily,\n chipTextColor,\n chipBgColor,\n textWhite,\n listItemActiveBg,\n listSelectedTextColor,\n listBoxShadow,\n listBorderColor,\n sidebarBg,\n sidebarShadow,\n canvasBg,\n showPropertiesButtonBg,\n nodeBorderColor,\n nodePointerBg,\n nodeButtonTextColor,\n nodeButtonLineColor,\n nodeGreenBackgroundColor,\n nodeGreenTextColor,\n nodeGreenBorderColor,\n nodeGreenBoxShadow,\n nodeTextColor,\n } = params;\n return {\n components: {\n MuiCssBaseline: {\n styleOverrides: `\n html {\n background: ${primaryBg};\n font-family: ${fontFamily};\n }\n body {\n background-color:${primaryBg};\n font-family: ${fontFamily};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${sidebarBg};\n box-shadow: ${sidebarShadow};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${canvasBg};\n }\n\n .primary-node {\n border: solid 0.0625rem ${nodeGreenBorderColor};\n border-radius: 50%;\n box-shadow: ${nodeGreenBoxShadow};\n background: ${nodeGreenBackgroundColor};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 20px;\n height: 20px;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer(\n nodeGreen\n ).toString('base64')});\n }\n\n .primary-node .primary-node_header p {\n color: ${nodeGreenTextColor};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${nodeTextColor};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${showPropertiesButtonBg};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${nodeButtonTextColor};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${fontFamily};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${showPropertiesButtonBg};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: \"\";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${nodeButtonLineColor};\n }\n\n .primary-node .node-button .icon {\n background: ${nodeGreenBackgroundColor};\n border-color: ${nodeGreenBorderColor}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${nodeBorderColor};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${nodePointerBg};\n border: 0.09375rem solid ${nodeBorderColor};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n `,\n },\n MuiList: {\n styleOverrides: {\n root: {\n '&.customSwitch': {\n padding: '0.125rem',\n background: chipTextColor,\n borderRadius: '0.5rem',\n display: 'flex',\n '& .MuiListItemButton-root': {\n padding: '0.25rem 0.75rem',\n borderRadius: '0.4375rem',\n width: '10.59375rem',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n '&:not(:last-child)': {\n marginBottom: '0',\n },\n '&.Mui-disabled': {\n opacity: 1,\n },\n '&.Mui-selected': {\n background: textWhite,\n boxShadow: listBoxShadow,\n border: `0.03125rem solid ${listBorderColor}`,\n '& .MuiTypography-root': {\n color: listSelectedTextColor,\n },\n },\n },\n '& .MuiChip-root': {\n marginLeft: '0.25rem',\n },\n '& .MuiTypography-root': {\n fontWeight: 500,\n fontSize: '0.8125rem',\n lineHeight: '1.25rem',\n letterSpacing: '-0.005rem',\n color: chipBgColor,\n margin: 0,\n },\n },\n },\n },\n },\n MuiListItemIcon: {\n styleOverrides: {\n root: {\n minWidth: 'inherit',\n },\n },\n },\n MuiListItemButton: {\n styleOverrides: {\n root: {\n padding: 0,\n width: '2.5rem',\n height: '2.5rem',\n borderRadius: '50%',\n justifyContent: 'center',\n backgroundColor: chipTextColor,\n '&:hover': {\n backgroundColor: chipTextColor,\n },\n '&:not(:last-child)': {\n marginBottom: '0.75rem',\n },\n '&.Mui-selected': {\n backgroundColor: listItemActiveBg,\n '&:hover': {\n backgroundColor: listItemActiveBg,\n },\n },\n '&.Mui-disabled': {\n opacity: 0.8,\n },\n },\n },\n },\n },\n };\n};\n\nexport default (customVariables: ThemeVars) =>\n applicationTheme({\n ...vars,\n ...customVariables,\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 * 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 '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n container: {\n height: '100%',\n width: '100%',\n },\n canvasContainer: {\n height: '100%',\n width: '100%',\n background: '#fffff',\n },\n}));\n\ninterface MetaDiagramProps {\n metaNodes: MetaNode[];\n metaLinks: MetaLink[];\n componentsMap: ComponentsMap;\n wrapperClassName?: string;\n canvasClassName?: string;\n metaTheme: {\n customThemeVariables: {};\n canvasClassName: string;\n };\n}\n\nconst MetaDiagram = ({\n metaNodes,\n metaLinks,\n componentsMap,\n wrapperClassName,\n metaTheme,\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 = metaNodes.map(\n mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n );\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\n return (\n \n \n \n \n \n \n \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","variant","options","set","getId","get","getShape","MetaNode","position","undefined","Map","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","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getNode","find","n","getLinkModel","metaLink","link","Object","fromEntries","source","target","setSourcePort","getPort","setTargetPort","nodeGreen","nodeGreenBackgroundColor","nodeGreenTextColor","nodeGreenBorderColor","nodeGreenBoxShadow","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","sidebarBg","sidebarShadow","canvasBg","showPropertiesButtonBg","nodeBorderColor","nodePointerBg","nodeButtonTextColor","nodeButtonLineColor","nodeTextColor","useStyles","makeStyles","node","margin","borderColor","width","border","borderTop","display","Sidebar","classes","setSelected","useState","svgImg","img","Buffer","toString","SidebarItem","props","image","selectedImage","selection","ListItemButton","onClick","ListItemIcon","src","alt","Box","className","List","disablePadding","component","CursorActive","Cursor","MoveActive","Move","Divider","Node","IconActive","Icon","FullscreenActive","Fullscreen","applicationTheme","params","components","MuiCssBaseline","styleOverrides","MuiList","root","padding","background","borderRadius","alignItems","justifyContent","marginBottom","opacity","boxShadow","color","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","height","backgroundColor","customVariables","Position","x","y","_","container","canvasContainer","MetaDiagram","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","ml","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customThemeVariables","CssBaseline","CanvasWidget","canvasClassName"],"mappings":"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"} \ 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/theme.ts","../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;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n variant: string,\n options: Map\n ) {\n this.options = options;\n this.options.set('id', id);\n this.options.set('name', name);\n this.options.set('shape', shape);\n this.options.set('variant', variant);\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 children: MetaNode[];\n options: MetaOptions;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n position: Position,\n variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\n }\n this.children = [];\n options.set('position', position);\n this.options = new MetaOptions(id, name, shape, variant, 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 variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\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, variant, 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;\n links: Map;\n\n constructor(\n nodesMap: Map,\n linksMap: Map\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
Unknown Type
;\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;\n\n constructor(componentsMap: Map) {\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 return (\n // @ts-ignore\n \n );\n }\n // TODO: Generate default node instead\n return ;\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;\n\n constructor(componentsMap: Map) {\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 \n );\n }\n // TODO: Generate default link instead\n return ;\n }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n id: string,\n nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n return nodes.find(n => n.getOptions().id === id);\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","const nodeGreen = {\n nodeGreenBackgroundColor: '#D4F4D4',\n nodeGreenTextColor: '#669D66',\n nodeGreenBorderColor: 'rgba(102, 157, 102, 0.2)',\n nodeGreenBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)',\n};\n\nconst 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 sidebarBg: '#ffffff',\n sidebarShadow: `0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)`,\n canvasBg: '#fff',\n showPropertiesButtonBg: '#161A1E',\n nodeBorderColor: '#18A0FB',\n nodePointerBg: '#fff',\n nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)',\n nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)',\n nodeTextColor: '#3C3C43',\n nodeWrapperBg: '#FFFFFF',\n nodeLabelColor: '#76787D',\n nodeBlockBg: 'rgba(255, 255, 255, 0.6)',\n ...nodeGreen,\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 MoveActive from './assets/svg/move-active.svg';\nimport Icon from './assets/svg/icon.svg';\nimport IconActive from './assets/svg/icon-active.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport CursorActive from './assets/svg/cursor-active.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\nimport FullscreenActive from './assets/svg/fullscreen-active.svg';\n\nconst { dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\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\ntype sidebarItemProps = {\n image: string;\n name: string;\n selectedImage: string;\n selection: string;\n};\n\nconst Sidebar = () => {\n const classes = useStyles();\n const [selected, setSelected] = React.useState('1');\n const svgImg = (img: string) =>\n `data:image/svg+xml;base64,${new Buffer(img).toString('base64')}`;\n const SidebarItem = (props: sidebarItemProps) => {\n const { image, name, selectedImage, selection } = props;\n return (\n setSelected(selection)}\n >\n \n {selected === selection ? (\n {name}\n ) : (\n {name}\n )}\n \n \n );\n };\n\n return (\n \n \n \n \n \n\n \n \n \"Node\"\n \n \n\n \n \n \n \n \n );\n};\n\nexport default Sidebar;\n","import vars from './components/assets/styles/variables';\nimport nodeGreen from './components/assets/svg/node/green.svg';\n\ntype ThemeVars = {\n [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n const {\n primaryBg,\n fontFamily,\n chipTextColor,\n chipBgColor,\n textWhite,\n listItemActiveBg,\n listSelectedTextColor,\n listBoxShadow,\n listBorderColor,\n sidebarBg,\n sidebarShadow,\n canvasBg,\n showPropertiesButtonBg,\n nodeBorderColor,\n nodePointerBg,\n nodeButtonTextColor,\n nodeButtonLineColor,\n nodeGreenBackgroundColor,\n nodeGreenTextColor,\n nodeGreenBorderColor,\n nodeGreenBoxShadow,\n nodeTextColor,\n nodeWrapperBg,\n nodeLabelColor,\n nodeBlockBg,\n } = params;\n return {\n components: {\n MuiCssBaseline: {\n styleOverrides: `\n html {\n background: ${primaryBg};\n font-family: ${fontFamily};\n }\n body {\n background-color:${primaryBg};\n font-family: ${fontFamily};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${sidebarBg};\n box-shadow: ${sidebarShadow};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${canvasBg};\n }\n\n .primary-node {\n border: solid 0.0625rem ${nodeGreenBorderColor};\n border-radius: 50%;\n box-shadow: ${nodeGreenBoxShadow};\n background: ${nodeGreenBackgroundColor};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 1.25rem;\n height: 1.25rem;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer(\n nodeGreen\n ).toString('base64')});\n }\n\n .primary-node .primary-node_header p {\n color: ${nodeGreenTextColor};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${nodeTextColor};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${showPropertiesButtonBg};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${nodeButtonTextColor};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${fontFamily};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${showPropertiesButtonBg};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: \"\";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${nodeButtonLineColor};\n }\n\n .primary-node .node-button .icon {\n background: ${nodeGreenBackgroundColor};\n border-color: ${nodeGreenBorderColor}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${nodeBorderColor};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${nodePointerBg};\n border: 0.09375rem solid ${nodeBorderColor};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n .primary-node.rounded {\n border-radius: 0.875rem;\n padding: 0.5rem;\n width: 18rem;\n height: auto;\n }\n\n .primary-node.rounded .nodes {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\n .primary-node.rounded .primary-node_header {\n height: 4.25rem;\n margin-bottom: 0.25rem\n }\n\n .primary-node .block {\n padding: 0.625rem 0.5rem;\n background-color: ${nodeBlockBg};\n display: flex;\n align-items: center;\n }\n\n .primary-node .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0.625rem;\n }\n\n .primary-node .block:last-child {\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block:not(:last-child) {\n margin-bottom: 0.0625rem;\n }\n\n .primary-node .block .disc {\n width: 1rem;\n height: 1rem;\n border: solid 0.0625rem ${nodeGreenTextColor};\n background: ${nodeGreenBackgroundColor}\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 0.5rem\n }\n\n .primary-node .block .disc:after {\n content: '';\n background: ${nodeGreenTextColor};\n width: 0.375rem;\n height: 0.375rem;\n border-radius: 50%;\n }\n\n .primary-node .block.reverse {\n justify-content: end;\n }\n\n .primary-node .block.reverse .disc {\n order: 2;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n\n .primary-node .block.reverse p {\n order: 1\n }\n\n .primary-node .block-wrapper {\n display: flex;\n gap: 0 0.0625rem;\n flex-wrap: wrap;\n }\n\n .primary-node .block-wrapper .block {\n flex-direction: column;\n align-items: flex-start;\n background: ${nodeWrapperBg};\n padding: 0.5rem;\n width: calc((100% - 0.125rem) / 3);\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root {\n margin-top: 0.25rem;\n word-break: break-all;\n font-weight: 600;\n font-family: 'Roboto Mono', monospace;\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root strong {\n font-family: 'Roboto Mono', monospace;\n font-weight: 600;\n }\n\n .primary-node .block-wrapper .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0\n }\n\n .primary-node .block-wrapper .block:nth-of-type(3) {\n border-top-right-radius: 0.625rem\n }\n\n .primary-node .block-wrapper .block:last-child {\n width: 100%;\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block-wrapper .block label {\n display: block;\n font-weight: 400;\n font-size: 0.625rem;\n line-height: 0.625rem;\n letter-spacing: -0.005rem;\n color: ${nodeLabelColor};\n text-transform: uppercase;\n }\n\n .primary-node .seprator {\n width: 0.125rem;\n height: 1rem;\n border-radius: 1.25rem;\n margin: 0.25rem auto;\n background: ${nodeGreenBorderColor};\n }\n `,\n },\n MuiList: {\n styleOverrides: {\n root: {\n '&.customSwitch': {\n padding: '0.125rem',\n background: chipTextColor,\n borderRadius: '0.5rem',\n display: 'flex',\n '& .MuiListItemButton-root': {\n padding: '0.25rem 0.75rem',\n borderRadius: '0.4375rem',\n width: '10.59375rem',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n '&:not(:last-child)': {\n marginBottom: '0',\n },\n '&.Mui-disabled': {\n opacity: 1,\n },\n '&.Mui-selected': {\n background: textWhite,\n boxShadow: listBoxShadow,\n border: `0.03125rem solid ${listBorderColor}`,\n '& .MuiTypography-root': {\n color: listSelectedTextColor,\n },\n },\n },\n '& .MuiChip-root': {\n marginLeft: '0.25rem',\n },\n '& .MuiTypography-root': {\n fontWeight: 500,\n fontSize: '0.8125rem',\n lineHeight: '1.25rem',\n letterSpacing: '-0.005rem',\n color: chipBgColor,\n margin: 0,\n },\n },\n },\n },\n },\n MuiListItemIcon: {\n styleOverrides: {\n root: {\n minWidth: 'inherit',\n },\n },\n },\n MuiListItemButton: {\n styleOverrides: {\n root: {\n padding: 0,\n width: '2.5rem',\n height: '2.5rem',\n borderRadius: '50%',\n justifyContent: 'center',\n backgroundColor: chipTextColor,\n '&:hover': {\n backgroundColor: chipTextColor,\n },\n '&:not(:last-child)': {\n marginBottom: '0.75rem',\n },\n '&.Mui-selected': {\n backgroundColor: listItemActiveBg,\n '&:hover': {\n backgroundColor: listItemActiveBg,\n },\n },\n '&.Mui-disabled': {\n opacity: 0.8,\n },\n },\n },\n },\n },\n };\n};\n\nexport default (customVariables: ThemeVars) =>\n applicationTheme({\n ...vars,\n ...customVariables,\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 * 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 '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n container: {\n height: '100%',\n width: '100%',\n },\n canvasContainer: {\n height: '100%',\n width: '100%',\n background: '#fffff',\n },\n}));\n\ninterface MetaDiagramProps {\n metaNodes: MetaNode[];\n metaLinks: MetaLink[];\n componentsMap: ComponentsMap;\n wrapperClassName?: string;\n canvasClassName?: string;\n metaTheme: {\n customThemeVariables: {};\n canvasClassName: string;\n };\n}\n\nconst MetaDiagram = ({\n metaNodes,\n metaLinks,\n componentsMap,\n wrapperClassName,\n metaTheme,\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 = metaNodes.map(\n mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n );\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\n return (\n \n \n \n \n \n \n \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","variant","options","set","getId","get","getShape","MetaNode","position","undefined","Map","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","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getNode","find","n","getLinkModel","metaLink","link","Object","fromEntries","source","target","setSourcePort","getPort","setTargetPort","nodeGreen","nodeGreenBackgroundColor","nodeGreenTextColor","nodeGreenBorderColor","nodeGreenBoxShadow","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","sidebarBg","sidebarShadow","canvasBg","showPropertiesButtonBg","nodeBorderColor","nodePointerBg","nodeButtonTextColor","nodeButtonLineColor","nodeTextColor","nodeWrapperBg","nodeLabelColor","nodeBlockBg","useStyles","makeStyles","node","margin","borderColor","width","border","borderTop","display","Sidebar","classes","setSelected","useState","svgImg","img","Buffer","toString","SidebarItem","props","image","selectedImage","selection","ListItemButton","onClick","ListItemIcon","src","alt","Box","className","List","disablePadding","component","CursorActive","Cursor","MoveActive","Move","Divider","Node","IconActive","Icon","FullscreenActive","Fullscreen","applicationTheme","params","components","MuiCssBaseline","styleOverrides","MuiList","root","padding","background","borderRadius","alignItems","justifyContent","marginBottom","opacity","boxShadow","color","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","height","backgroundColor","customVariables","Position","x","y","_","container","canvasContainer","MetaDiagram","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","ml","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customThemeVariables","CssBaseline","CanvasWidget","canvasClassName"],"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 1dd80e0..479d6a0 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,n=require("react"),r=e(n),o=require("@projectstorm/react-diagrams"),i=e(o),a=require("@projectstorm/react-canvas-core"),s=require("@mui/styles"),C=require("@mui/system"),l=require("@mui/material"),d=require("@mui/material/styles"),m=e(require("@mui/material/CssBaseline"));class g{constructor(e,t,n,r,o){this.options=o,this.options.set("id",e),this.options.set("name",t),this.options.set("shape",n),this.options.set("variant",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 o.NodeModel{constructor(e={}){super({...e,type:t.META_NODE}),this.addPort(new o.DefaultPortModel({in:!0,name:"in"})),this.addPort(new o.DefaultPortModel({in:!1,name:"out"}))}}const h=()=>r.createElement("div",null,"Unknown Type");class u extends a.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 r.createElement(t,{key:"node-factory-"+e.model.getOptions().id,engine:this.engine,model:e.model})}return r.createElement(h,null)}}class p extends o.DefaultLinkModel{constructor(e={}){super({...e,type:t.META_LINK})}}class f extends o.DefaultLinkFactory{constructor(e){super(t.META_LINK),this.componentsMap=e}generateModel(){return new p}generateLinkSegment(e,t,n){var o;if(this.componentsMap.has(null==(o=e.getOptions())?void 0:o.shape)){const o=this.componentsMap.get(e.getOptions().shape);return r.createElement(o,{key:"link-factory-"+e.getOptions().id,engine:this.engine,model:e,path:n,selected:t})}return r.createElement(h,null)}}function w(e,t){return t.find(t=>t.getOptions().id===e)}const b={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)",sidebarBg:"#ffffff",sidebarShadow:"0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)",canvasBg:"#fff",showPropertiesButtonBg:"#161A1E",nodeBorderColor:"#18A0FB",nodePointerBg:"#fff",nodeButtonTextColor:"rgba(255, 255, 255, 0.8)",nodeButtonLineColor:"rgba(255, 255, 255, 0.2)",nodeTextColor:"#3C3C43",nodeGreenBackgroundColor:"#D4F4D4",nodeGreenTextColor:"#669D66",nodeGreenBorderColor:"rgba(102, 157, 102, 0.2)",nodeGreenBoxShadow:"0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)"},{dividerColor:v}=b,M=s.makeStyles(()=>({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"}}})),x=()=>{const e=M(),[t,n]=r.useState("1"),o=e=>"data:image/svg+xml;base64,"+new Buffer(e).toString("base64"),i=e=>{const{image:i,name:a,selectedImage:s,selection:C}=e;return r.createElement(l.ListItemButton,{selected:t===C,onClick:()=>n(C)},r.createElement(l.ListItemIcon,null,r.createElement("img",t===C?{src:o(i),alt:a}:{src:o(s),alt:a})))};return r.createElement(C.Box,{className:"sidebar"},r.createElement(l.List,{disablePadding:!0,component:"nav"},r.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"cursor",selection:"1"}),r.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"move",selection:"2"})),r.createElement(C.Box,{className:e.node},r.createElement(l.Divider,null),r.createElement("img",{src:o('\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n'),alt:"Node"}),r.createElement(l.Divider,null)),r.createElement(l.List,{disablePadding:!0,component:"nav"},r.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"draw",selection:"3"}),r.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"fullscreen",selection:"4"})))},y=s.makeStyles(e=>({container:{height:"100%",width:"100%"},canvasContainer:{height:"100%",width:"100%",background:"#fffff"}}));exports.ComponentsMap=class{constructor(e,t){this.nodes=e,this.links=t}},exports.MetaLink=class{constructor(e,t,n,r,o,i,a,s,C){void 0===C&&(C=new Map),this.sourceId=r,this.sourcePortId=o,this.targetId=i,this.targetPortId=a,this.options=new g(e,t,n,s,C)}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,n,r,o,i){void 0===i&&(i=new Map),this.children=[],i.set("position",r),this.options=new g(e,t,n,o,i)}},exports.MetaNodeModel=c,exports.Position=class{constructor(e,t){this.x=e,this.y=t}},exports.default=({metaNodes:e,metaLinks:t,componentsMap:r,wrapperClassName:s,metaTheme:C})=>{const g=y(),h=i();h.getNodeFactories().registerFactory(new u(r.nodes)),h.getLinkFactories().registerFactory(new f(r.links));const v=new o.DiagramModel,M=e.map(e=>new c(Object.fromEntries(e.options.options))),B=t.map(e=>function(e,t){const n=new p(Object.fromEntries(e.options.options)),r=w(e.getSourceId(),t),o=w(e.getTargetId(),t);if(r&&o)return n.setSourcePort(r.getPort(e.getSourcePortId())),n.setTargetPort(o.getPort(e.getTargetPortId())),n}(e,M)).filter(e=>void 0!==e);v.addAll(...M,...B),h.setModel(v);const V=s||g.container;return n.createElement(d.ThemeProvider,{theme:d.createTheme((H=null==C?void 0:C.customThemeVariables,(e=>{const{primaryBg:t,fontFamily:n,chipTextColor:r,chipBgColor:o,textWhite:i,listItemActiveBg:a,listSelectedTextColor:s,listBoxShadow:C,listBorderColor:l,sidebarBg:d,sidebarShadow:m,canvasBg:g,showPropertiesButtonBg:c,nodeBorderColor:h,nodePointerBg:u,nodeButtonTextColor:p,nodeButtonLineColor:f,nodeGreenBackgroundColor:w,nodeGreenTextColor:b,nodeGreenBorderColor:v,nodeGreenBoxShadow:M,nodeTextColor:x}=e;return{components:{MuiCssBaseline:{styleOverrides:`\n html {\n background: ${t};\n font-family: ${n};\n }\n body {\n background-color:${t};\n font-family: ${n};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${d};\n box-shadow: ${m};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${g};\n }\n\n .primary-node {\n border: solid 0.0625rem ${v};\n border-radius: 50%;\n box-shadow: ${M};\n background: ${w};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 20px;\n height: 20px;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer('\n\n').toString("base64")});\n }\n\n .primary-node .primary-node_header p {\n color: ${b};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${x};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${c};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${p};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${n};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${c};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: "";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${f};\n }\n\n .primary-node .node-button .icon {\n background: ${w};\n border-color: ${v}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${h};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${u};\n border: 0.09375rem solid ${h};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n `},MuiList:{styleOverrides:{root:{"&.customSwitch":{padding:"0.125rem",background:r,borderRadius:"0.5rem",display:"flex","& .MuiListItemButton-root":{padding:"0.25rem 0.75rem",borderRadius:"0.4375rem",width:"10.59375rem",display:"flex",alignItems:"center",justifyContent:"center","&:not(:last-child)":{marginBottom:"0"},"&.Mui-disabled":{opacity:1},"&.Mui-selected":{background:i,boxShadow:C,border:"0.03125rem solid "+l,"& .MuiTypography-root":{color:s}}},"& .MuiChip-root":{marginLeft:"0.25rem"},"& .MuiTypography-root":{fontWeight:500,fontSize:"0.8125rem",lineHeight:"1.25rem",letterSpacing:"-0.005rem",color:o,margin:0}}}}},MuiListItemIcon:{styleOverrides:{root:{minWidth:"inherit"}}},MuiListItemButton:{styleOverrides:{root:{padding:0,width:"2.5rem",height:"2.5rem",borderRadius:"50%",justifyContent:"center",backgroundColor:r,"&:hover":{backgroundColor:r},"&:not(:last-child)":{marginBottom:"0.75rem"},"&.Mui-selected":{backgroundColor:a,"&:hover":{backgroundColor:a}},"&.Mui-disabled":{opacity:.8}}}}}}})({...b,...H})))},n.createElement(m,null),n.createElement(l.Box,{className:V},n.createElement(x,null),n.createElement(a.CanvasWidget,{className:"canvas-widget "+(null==C?void 0:C.canvasClassName),engine:h})));var H}; +"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,r=require("react"),t=e(r),o=require("@projectstorm/react-diagrams"),i=e(o),a=require("@projectstorm/react-canvas-core"),s=require("@mui/styles"),d=require("@mui/system"),l=require("@mui/material"),C=require("@mui/material/styles"),m=e(require("@mui/material/CssBaseline"));class c{constructor(e,n,r,t,o){this.options=o,this.options.set("id",e),this.options.set("name",n),this.options.set("shape",r),this.options.set("variant",t)}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"}(n||(n={}));class g extends o.NodeModel{constructor(e={}){super({...e,type:n.META_NODE}),this.addPort(new o.DefaultPortModel({in:!0,name:"in"})),this.addPort(new o.DefaultPortModel({in:!1,name:"out"}))}}const p=()=>t.createElement("div",null,"Unknown Type");class h extends a.AbstractReactFactory{constructor(e){super(n.META_NODE),this.componentsMap=e}generateModel(){return new g}generateReactWidget(e){if(this.componentsMap.has(e.model.options.shape)){const n=this.componentsMap.get(e.model.options.shape);return t.createElement(n,{key:"node-factory-"+e.model.getOptions().id,engine:this.engine,model:e.model})}return t.createElement(p,null)}}class u extends o.DefaultLinkModel{constructor(e={}){super({...e,type:n.META_LINK})}}class f extends o.DefaultLinkFactory{constructor(e){super(n.META_LINK),this.componentsMap=e}generateModel(){return new u}generateLinkSegment(e,n,r){var o;if(this.componentsMap.has(null==(o=e.getOptions())?void 0:o.shape)){const o=this.componentsMap.get(e.getOptions().shape);return t.createElement(o,{key:"link-factory-"+e.getOptions().id,engine:this.engine,model:e,path:r,selected:n})}return t.createElement(p,null)}}function b(e,n){return n.find(n=>n.getOptions().id===e)}const w={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)",sidebarBg:"#ffffff",sidebarShadow:"0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)",canvasBg:"#fff",showPropertiesButtonBg:"#161A1E",nodeBorderColor:"#18A0FB",nodePointerBg:"#fff",nodeButtonTextColor:"rgba(255, 255, 255, 0.8)",nodeButtonLineColor:"rgba(255, 255, 255, 0.2)",nodeTextColor:"#3C3C43",nodeWrapperBg:"#FFFFFF",nodeLabelColor:"#76787D",nodeBlockBg:"rgba(255, 255, 255, 0.6)",nodeGreenBackgroundColor:"#D4F4D4",nodeGreenTextColor:"#669D66",nodeGreenBorderColor:"rgba(102, 157, 102, 0.2)",nodeGreenBoxShadow:"0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)"},{dividerColor:y}=w,v=s.makeStyles(()=>({node:{margin:"0.25rem 0","& .MuiDivider-root":{borderColor:y,width:"calc(100% - 1.5rem)",margin:"0 auto",border:"none",borderTop:"0.0625rem solid"},"& img":{display:"block",margin:"1rem 0"}}})),M=()=>{const e=v(),[n,r]=t.useState("1"),o=e=>"data:image/svg+xml;base64,"+new Buffer(e).toString("base64"),i=e=>{const{image:i,name:a,selectedImage:s,selection:d}=e;return t.createElement(l.ListItemButton,{selected:n===d,onClick:()=>r(d)},t.createElement(l.ListItemIcon,null,t.createElement("img",n===d?{src:o(i),alt:a}:{src:o(s),alt:a})))};return t.createElement(d.Box,{className:"sidebar"},t.createElement(l.List,{disablePadding:!0,component:"nav"},t.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"cursor",selection:"1"}),t.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"move",selection:"2"})),t.createElement(d.Box,{className:e.node},t.createElement(l.Divider,null),t.createElement("img",{src:o('\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n'),alt:"Node"}),t.createElement(l.Divider,null)),t.createElement(l.List,{disablePadding:!0,component:"nav"},t.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"draw",selection:"3"}),t.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"fullscreen",selection:"4"})))},x=s.makeStyles(e=>({container:{height:"100%",width:"100%"},canvasContainer:{height:"100%",width:"100%",background:"#fffff"}}));exports.ComponentsMap=class{constructor(e,n){this.nodes=e,this.links=n}},exports.MetaLink=class{constructor(e,n,r,t,o,i,a,s,d){void 0===d&&(d=new Map),this.sourceId=t,this.sourcePortId=o,this.targetId=i,this.targetPortId=a,this.options=new c(e,n,r,s,d)}getSourceId(){return this.sourceId}getSourcePortId(){return this.sourcePortId}getTargetId(){return this.targetId}getTargetPortId(){return this.targetPortId}},exports.MetaLinkModel=u,exports.MetaNode=class{constructor(e,n,r,t,o,i){void 0===i&&(i=new Map),this.children=[],i.set("position",t),this.options=new c(e,n,r,o,i)}},exports.MetaNodeModel=g,exports.Position=class{constructor(e,n){this.x=e,this.y=n}},exports.default=({metaNodes:e,metaLinks:n,componentsMap:t,wrapperClassName:s,metaTheme:d})=>{const c=x(),p=i();p.getNodeFactories().registerFactory(new h(t.nodes)),p.getLinkFactories().registerFactory(new f(t.links));const y=new o.DiagramModel,v=e.map(e=>new g(Object.fromEntries(e.options.options))),k=n.map(e=>function(e,n){const r=new u(Object.fromEntries(e.options.options)),t=b(e.getSourceId(),n),o=b(e.getTargetId(),n);if(t&&o)return r.setSourcePort(t.getPort(e.getSourcePortId())),r.setTargetPort(o.getPort(e.getTargetPortId())),r}(e,v)).filter(e=>void 0!==e);y.addAll(...v,...k),p.setModel(y);const B=s||c.container;return r.createElement(C.ThemeProvider,{theme:C.createTheme((V=null==d?void 0:d.customThemeVariables,(e=>{const{primaryBg:n,fontFamily:r,chipTextColor:t,chipBgColor:o,textWhite:i,listItemActiveBg:a,listSelectedTextColor:s,listBoxShadow:d,listBorderColor:l,sidebarBg:C,sidebarShadow:m,canvasBg:c,showPropertiesButtonBg:g,nodeBorderColor:p,nodePointerBg:h,nodeButtonTextColor:u,nodeButtonLineColor:f,nodeGreenBackgroundColor:b,nodeGreenTextColor:w,nodeGreenBorderColor:y,nodeGreenBoxShadow:v,nodeTextColor:M,nodeWrapperBg:x,nodeLabelColor:k,nodeBlockBg:B}=e;return{components:{MuiCssBaseline:{styleOverrides:`\n html {\n background: ${n};\n font-family: ${r};\n }\n body {\n background-color:${n};\n font-family: ${r};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${C};\n box-shadow: ${m};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${c};\n }\n\n .primary-node {\n border: solid 0.0625rem ${y};\n border-radius: 50%;\n box-shadow: ${v};\n background: ${b};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 1.25rem;\n height: 1.25rem;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer('\n\n').toString("base64")});\n }\n\n .primary-node .primary-node_header p {\n color: ${w};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${M};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${g};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${u};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${r};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${g};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: "";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${f};\n }\n\n .primary-node .node-button .icon {\n background: ${b};\n border-color: ${y}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${p};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${h};\n border: 0.09375rem solid ${p};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n .primary-node.rounded {\n border-radius: 0.875rem;\n padding: 0.5rem;\n width: 18rem;\n height: auto;\n }\n\n .primary-node.rounded .nodes {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\n .primary-node.rounded .primary-node_header {\n height: 4.25rem;\n margin-bottom: 0.25rem\n }\n\n .primary-node .block {\n padding: 0.625rem 0.5rem;\n background-color: ${B};\n display: flex;\n align-items: center;\n }\n\n .primary-node .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0.625rem;\n }\n\n .primary-node .block:last-child {\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block:not(:last-child) {\n margin-bottom: 0.0625rem;\n }\n\n .primary-node .block .disc {\n width: 1rem;\n height: 1rem;\n border: solid 0.0625rem ${w};\n background: ${b}\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 0.5rem\n }\n\n .primary-node .block .disc:after {\n content: '';\n background: ${w};\n width: 0.375rem;\n height: 0.375rem;\n border-radius: 50%;\n }\n\n .primary-node .block.reverse {\n justify-content: end;\n }\n\n .primary-node .block.reverse .disc {\n order: 2;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n\n .primary-node .block.reverse p {\n order: 1\n }\n\n .primary-node .block-wrapper {\n display: flex;\n gap: 0 0.0625rem;\n flex-wrap: wrap;\n }\n\n .primary-node .block-wrapper .block {\n flex-direction: column;\n align-items: flex-start;\n background: ${x};\n padding: 0.5rem;\n width: calc((100% - 0.125rem) / 3);\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root {\n margin-top: 0.25rem;\n word-break: break-all;\n font-weight: 600;\n font-family: 'Roboto Mono', monospace;\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root strong {\n font-family: 'Roboto Mono', monospace;\n font-weight: 600;\n }\n\n .primary-node .block-wrapper .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0\n }\n\n .primary-node .block-wrapper .block:nth-of-type(3) {\n border-top-right-radius: 0.625rem\n }\n\n .primary-node .block-wrapper .block:last-child {\n width: 100%;\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block-wrapper .block label {\n display: block;\n font-weight: 400;\n font-size: 0.625rem;\n line-height: 0.625rem;\n letter-spacing: -0.005rem;\n color: ${k};\n text-transform: uppercase;\n }\n\n .primary-node .seprator {\n width: 0.125rem;\n height: 1rem;\n border-radius: 1.25rem;\n margin: 0.25rem auto;\n background: ${y};\n }\n `},MuiList:{styleOverrides:{root:{"&.customSwitch":{padding:"0.125rem",background:t,borderRadius:"0.5rem",display:"flex","& .MuiListItemButton-root":{padding:"0.25rem 0.75rem",borderRadius:"0.4375rem",width:"10.59375rem",display:"flex",alignItems:"center",justifyContent:"center","&:not(:last-child)":{marginBottom:"0"},"&.Mui-disabled":{opacity:1},"&.Mui-selected":{background:i,boxShadow:d,border:"0.03125rem solid "+l,"& .MuiTypography-root":{color:s}}},"& .MuiChip-root":{marginLeft:"0.25rem"},"& .MuiTypography-root":{fontWeight:500,fontSize:"0.8125rem",lineHeight:"1.25rem",letterSpacing:"-0.005rem",color:o,margin:0}}}}},MuiListItemIcon:{styleOverrides:{root:{minWidth:"inherit"}}},MuiListItemButton:{styleOverrides:{root:{padding:0,width:"2.5rem",height:"2.5rem",borderRadius:"50%",justifyContent:"center",backgroundColor:t,"&:hover":{backgroundColor:t},"&:not(:last-child)":{marginBottom:"0.75rem"},"&.Mui-selected":{backgroundColor:a,"&:hover":{backgroundColor:a}},"&.Mui-disabled":{opacity:.8}}}}}}})({...w,...V})))},r.createElement(m,null),r.createElement(l.Box,{className:B},r.createElement(M,null),r.createElement(a.CanvasWidget,{className:"canvas-widget "+(null==d?void 0:d.canvasClassName),engine:p})));var V}; //# 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 0f675d5..83aba03 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/assets/styles/variables.ts","../src/components/Sidebar.tsx","../src/index.tsx","../src/models/ComponentsMap.ts","../src/models/MetaLink.ts","../src/models/MetaNode.ts","../src/models/Position.ts","../src/helpers/linksHelper.ts","../src/theme.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;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n variant: string,\n options: Map\n ) {\n this.options = options;\n this.options.set('id', id);\n this.options.set('name', name);\n this.options.set('shape', shape);\n this.options.set('variant', variant);\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
Unknown Type
;\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;\n\n constructor(componentsMap: Map) {\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 return (\n // @ts-ignore\n \n );\n }\n // TODO: Generate default node instead\n return ;\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;\n\n constructor(componentsMap: Map) {\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 \n );\n }\n // TODO: Generate default link instead\n return ;\n }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n id: string,\n nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n return nodes.find(n => n.getOptions().id === id);\n}\n","const nodeGreen = {\n nodeGreenBackgroundColor: '#D4F4D4',\n nodeGreenTextColor: '#669D66',\n nodeGreenBorderColor: 'rgba(102, 157, 102, 0.2)',\n nodeGreenBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)',\n};\n\nconst 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 sidebarBg: '#ffffff',\n sidebarShadow: `0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)`,\n canvasBg: '#fff',\n showPropertiesButtonBg: '#161A1E',\n nodeBorderColor: '#18A0FB',\n nodePointerBg: '#fff',\n nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)',\n nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)',\n nodeTextColor: '#3C3C43',\n ...nodeGreen,\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 MoveActive from './assets/svg/move-active.svg';\nimport Icon from './assets/svg/icon.svg';\nimport IconActive from './assets/svg/icon-active.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport CursorActive from './assets/svg/cursor-active.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\nimport FullscreenActive from './assets/svg/fullscreen-active.svg';\n\nconst { dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\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\ntype sidebarItemProps = {\n image: string;\n name: string;\n selectedImage: string;\n selection: string;\n};\n\nconst Sidebar = () => {\n const classes = useStyles();\n const [selected, setSelected] = React.useState('1');\n const svgImg = (img: string) =>\n `data:image/svg+xml;base64,${new Buffer(img).toString('base64')}`;\n const SidebarItem = (props: sidebarItemProps) => {\n const { image, name, selectedImage, selection } = props;\n return (\n setSelected(selection)}\n >\n \n {selected === selection ? (\n {name}\n ) : (\n {name}\n )}\n \n \n );\n };\n\n return (\n \n \n \n \n \n\n \n \n \"Node\"\n \n \n\n \n \n \n \n \n );\n};\n\nexport default Sidebar;\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 '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n container: {\n height: '100%',\n width: '100%',\n },\n canvasContainer: {\n height: '100%',\n width: '100%',\n background: '#fffff',\n },\n}));\n\ninterface MetaDiagramProps {\n metaNodes: MetaNode[];\n metaLinks: MetaLink[];\n componentsMap: ComponentsMap;\n wrapperClassName?: string;\n canvasClassName?: string;\n metaTheme: {\n customThemeVariables: {};\n canvasClassName: string;\n };\n}\n\nconst MetaDiagram = ({\n metaNodes,\n metaLinks,\n componentsMap,\n wrapperClassName,\n metaTheme,\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 = metaNodes.map(\n mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n );\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\n return (\n \n \n \n \n \n \n \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;\n links: Map;\n\n constructor(\n nodesMap: Map,\n linksMap: Map\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 variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\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, variant, 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 children: MetaNode[];\n options: MetaOptions;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n position: Position,\n variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\n }\n this.children = [];\n options.set('position', position);\n this.options = new MetaOptions(id, name, shape, variant, 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","import vars from './components/assets/styles/variables';\nimport nodeGreen from './components/assets/svg/node/green.svg';\n\ntype ThemeVars = {\n [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n const {\n primaryBg,\n fontFamily,\n chipTextColor,\n chipBgColor,\n textWhite,\n listItemActiveBg,\n listSelectedTextColor,\n listBoxShadow,\n listBorderColor,\n sidebarBg,\n sidebarShadow,\n canvasBg,\n showPropertiesButtonBg,\n nodeBorderColor,\n nodePointerBg,\n nodeButtonTextColor,\n nodeButtonLineColor,\n nodeGreenBackgroundColor,\n nodeGreenTextColor,\n nodeGreenBorderColor,\n nodeGreenBoxShadow,\n nodeTextColor,\n } = params;\n return {\n components: {\n MuiCssBaseline: {\n styleOverrides: `\n html {\n background: ${primaryBg};\n font-family: ${fontFamily};\n }\n body {\n background-color:${primaryBg};\n font-family: ${fontFamily};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${sidebarBg};\n box-shadow: ${sidebarShadow};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${canvasBg};\n }\n\n .primary-node {\n border: solid 0.0625rem ${nodeGreenBorderColor};\n border-radius: 50%;\n box-shadow: ${nodeGreenBoxShadow};\n background: ${nodeGreenBackgroundColor};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 20px;\n height: 20px;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer(\n nodeGreen\n ).toString('base64')});\n }\n\n .primary-node .primary-node_header p {\n color: ${nodeGreenTextColor};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${nodeTextColor};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${showPropertiesButtonBg};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${nodeButtonTextColor};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${fontFamily};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${showPropertiesButtonBg};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: \"\";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${nodeButtonLineColor};\n }\n\n .primary-node .node-button .icon {\n background: ${nodeGreenBackgroundColor};\n border-color: ${nodeGreenBorderColor}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${nodeBorderColor};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${nodePointerBg};\n border: 0.09375rem solid ${nodeBorderColor};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n `,\n },\n MuiList: {\n styleOverrides: {\n root: {\n '&.customSwitch': {\n padding: '0.125rem',\n background: chipTextColor,\n borderRadius: '0.5rem',\n display: 'flex',\n '& .MuiListItemButton-root': {\n padding: '0.25rem 0.75rem',\n borderRadius: '0.4375rem',\n width: '10.59375rem',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n '&:not(:last-child)': {\n marginBottom: '0',\n },\n '&.Mui-disabled': {\n opacity: 1,\n },\n '&.Mui-selected': {\n background: textWhite,\n boxShadow: listBoxShadow,\n border: `0.03125rem solid ${listBorderColor}`,\n '& .MuiTypography-root': {\n color: listSelectedTextColor,\n },\n },\n },\n '& .MuiChip-root': {\n marginLeft: '0.25rem',\n },\n '& .MuiTypography-root': {\n fontWeight: 500,\n fontSize: '0.8125rem',\n lineHeight: '1.25rem',\n letterSpacing: '-0.005rem',\n color: chipBgColor,\n margin: 0,\n },\n },\n },\n },\n },\n MuiListItemIcon: {\n styleOverrides: {\n root: {\n minWidth: 'inherit',\n },\n },\n },\n MuiListItemButton: {\n styleOverrides: {\n root: {\n padding: 0,\n width: '2.5rem',\n height: '2.5rem',\n borderRadius: '50%',\n justifyContent: 'center',\n backgroundColor: chipTextColor,\n '&:hover': {\n backgroundColor: chipTextColor,\n },\n '&:not(:last-child)': {\n marginBottom: '0.75rem',\n },\n '&.Mui-selected': {\n backgroundColor: listItemActiveBg,\n '&:hover': {\n backgroundColor: listItemActiveBg,\n },\n },\n '&.Mui-disabled': {\n opacity: 0.8,\n },\n },\n },\n },\n },\n };\n};\n\nexport default (customVariables: ThemeVars) =>\n applicationTheme({\n ...vars,\n ...customVariables,\n });\n"],"names":["ReactDiagramMetaTypes","MetaOptions","constructor","id","name","shape","variant","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","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","_model$getOptions","getNode","nodes","find","n","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","sidebarBg","sidebarShadow","canvasBg","showPropertiesButtonBg","nodeBorderColor","nodePointerBg","nodeButtonTextColor","nodeButtonLineColor","nodeTextColor","nodeGreenBackgroundColor","nodeGreenTextColor","nodeGreenBorderColor","nodeGreenBoxShadow","useStyles","makeStyles","node","margin","& .MuiDivider-root","borderColor","width","border","borderTop","& img","display","Sidebar","classes","setSelected","useState","svgImg","img","Buffer","toString","SidebarItem","props","image","selectedImage","selection","ListItemButton","onClick","ListItemIcon","src","alt","Box","className","List","disablePadding","component","Divider","_","container","height","canvasContainer","background","nodesMap","linksMap","links","sourceId","sourcePortId","targetId","targetPortId","undefined","Map","getSourceId","getSourcePortId","getTargetId","getTargetPortId","position","children","x","y","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","Object","fromEntries","ml","metaLink","link","source","target","setSourcePort","getPort","setTargetPort","getLinkModel","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customVariables","customThemeVariables","params","components","MuiCssBaseline","styleOverrides","MuiList","root","&.customSwitch","padding","borderRadius","& .MuiListItemButton-root","alignItems","justifyContent","&:not(:last-child)","marginBottom","&.Mui-disabled","opacity","&.Mui-selected","boxShadow","& .MuiTypography-root","color","& .MuiChip-root","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","backgroundColor","&:hover","applicationTheme","CssBaseline","CanvasWidget","canvasClassName"],"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/assets/styles/variables.ts","../src/components/Sidebar.tsx","../src/index.tsx","../src/models/ComponentsMap.ts","../src/models/MetaLink.ts","../src/models/MetaNode.ts","../src/models/Position.ts","../src/helpers/linksHelper.ts","../src/theme.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;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n variant: string,\n options: Map\n ) {\n this.options = options;\n this.options.set('id', id);\n this.options.set('name', name);\n this.options.set('shape', shape);\n this.options.set('variant', variant);\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
Unknown Type
;\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;\n\n constructor(componentsMap: Map) {\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 return (\n // @ts-ignore\n \n );\n }\n // TODO: Generate default node instead\n return ;\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;\n\n constructor(componentsMap: Map) {\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 \n );\n }\n // TODO: Generate default link instead\n return ;\n }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n id: string,\n nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n return nodes.find(n => n.getOptions().id === id);\n}\n","const nodeGreen = {\n nodeGreenBackgroundColor: '#D4F4D4',\n nodeGreenTextColor: '#669D66',\n nodeGreenBorderColor: 'rgba(102, 157, 102, 0.2)',\n nodeGreenBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)',\n};\n\nconst 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 sidebarBg: '#ffffff',\n sidebarShadow: `0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)`,\n canvasBg: '#fff',\n showPropertiesButtonBg: '#161A1E',\n nodeBorderColor: '#18A0FB',\n nodePointerBg: '#fff',\n nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)',\n nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)',\n nodeTextColor: '#3C3C43',\n nodeWrapperBg: '#FFFFFF',\n nodeLabelColor: '#76787D',\n nodeBlockBg: 'rgba(255, 255, 255, 0.6)',\n ...nodeGreen,\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 MoveActive from './assets/svg/move-active.svg';\nimport Icon from './assets/svg/icon.svg';\nimport IconActive from './assets/svg/icon-active.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport CursorActive from './assets/svg/cursor-active.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\nimport FullscreenActive from './assets/svg/fullscreen-active.svg';\n\nconst { dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\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\ntype sidebarItemProps = {\n image: string;\n name: string;\n selectedImage: string;\n selection: string;\n};\n\nconst Sidebar = () => {\n const classes = useStyles();\n const [selected, setSelected] = React.useState('1');\n const svgImg = (img: string) =>\n `data:image/svg+xml;base64,${new Buffer(img).toString('base64')}`;\n const SidebarItem = (props: sidebarItemProps) => {\n const { image, name, selectedImage, selection } = props;\n return (\n setSelected(selection)}\n >\n \n {selected === selection ? (\n {name}\n ) : (\n {name}\n )}\n \n \n );\n };\n\n return (\n \n \n \n \n \n\n \n \n \"Node\"\n \n \n\n \n \n \n \n \n );\n};\n\nexport default Sidebar;\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 '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n container: {\n height: '100%',\n width: '100%',\n },\n canvasContainer: {\n height: '100%',\n width: '100%',\n background: '#fffff',\n },\n}));\n\ninterface MetaDiagramProps {\n metaNodes: MetaNode[];\n metaLinks: MetaLink[];\n componentsMap: ComponentsMap;\n wrapperClassName?: string;\n canvasClassName?: string;\n metaTheme: {\n customThemeVariables: {};\n canvasClassName: string;\n };\n}\n\nconst MetaDiagram = ({\n metaNodes,\n metaLinks,\n componentsMap,\n wrapperClassName,\n metaTheme,\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 = metaNodes.map(\n mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n );\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\n return (\n \n \n \n \n \n \n \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;\n links: Map;\n\n constructor(\n nodesMap: Map,\n linksMap: Map\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 variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\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, variant, 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 children: MetaNode[];\n options: MetaOptions;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n position: Position,\n variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\n }\n this.children = [];\n options.set('position', position);\n this.options = new MetaOptions(id, name, shape, variant, 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","import vars from './components/assets/styles/variables';\nimport nodeGreen from './components/assets/svg/node/green.svg';\n\ntype ThemeVars = {\n [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n const {\n primaryBg,\n fontFamily,\n chipTextColor,\n chipBgColor,\n textWhite,\n listItemActiveBg,\n listSelectedTextColor,\n listBoxShadow,\n listBorderColor,\n sidebarBg,\n sidebarShadow,\n canvasBg,\n showPropertiesButtonBg,\n nodeBorderColor,\n nodePointerBg,\n nodeButtonTextColor,\n nodeButtonLineColor,\n nodeGreenBackgroundColor,\n nodeGreenTextColor,\n nodeGreenBorderColor,\n nodeGreenBoxShadow,\n nodeTextColor,\n nodeWrapperBg,\n nodeLabelColor,\n nodeBlockBg,\n } = params;\n return {\n components: {\n MuiCssBaseline: {\n styleOverrides: `\n html {\n background: ${primaryBg};\n font-family: ${fontFamily};\n }\n body {\n background-color:${primaryBg};\n font-family: ${fontFamily};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${sidebarBg};\n box-shadow: ${sidebarShadow};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${canvasBg};\n }\n\n .primary-node {\n border: solid 0.0625rem ${nodeGreenBorderColor};\n border-radius: 50%;\n box-shadow: ${nodeGreenBoxShadow};\n background: ${nodeGreenBackgroundColor};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 1.25rem;\n height: 1.25rem;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer(\n nodeGreen\n ).toString('base64')});\n }\n\n .primary-node .primary-node_header p {\n color: ${nodeGreenTextColor};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${nodeTextColor};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${showPropertiesButtonBg};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${nodeButtonTextColor};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${fontFamily};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${showPropertiesButtonBg};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: \"\";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${nodeButtonLineColor};\n }\n\n .primary-node .node-button .icon {\n background: ${nodeGreenBackgroundColor};\n border-color: ${nodeGreenBorderColor}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${nodeBorderColor};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${nodePointerBg};\n border: 0.09375rem solid ${nodeBorderColor};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n .primary-node.rounded {\n border-radius: 0.875rem;\n padding: 0.5rem;\n width: 18rem;\n height: auto;\n }\n\n .primary-node.rounded .nodes {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\n .primary-node.rounded .primary-node_header {\n height: 4.25rem;\n margin-bottom: 0.25rem\n }\n\n .primary-node .block {\n padding: 0.625rem 0.5rem;\n background-color: ${nodeBlockBg};\n display: flex;\n align-items: center;\n }\n\n .primary-node .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0.625rem;\n }\n\n .primary-node .block:last-child {\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block:not(:last-child) {\n margin-bottom: 0.0625rem;\n }\n\n .primary-node .block .disc {\n width: 1rem;\n height: 1rem;\n border: solid 0.0625rem ${nodeGreenTextColor};\n background: ${nodeGreenBackgroundColor}\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 0.5rem\n }\n\n .primary-node .block .disc:after {\n content: '';\n background: ${nodeGreenTextColor};\n width: 0.375rem;\n height: 0.375rem;\n border-radius: 50%;\n }\n\n .primary-node .block.reverse {\n justify-content: end;\n }\n\n .primary-node .block.reverse .disc {\n order: 2;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n\n .primary-node .block.reverse p {\n order: 1\n }\n\n .primary-node .block-wrapper {\n display: flex;\n gap: 0 0.0625rem;\n flex-wrap: wrap;\n }\n\n .primary-node .block-wrapper .block {\n flex-direction: column;\n align-items: flex-start;\n background: ${nodeWrapperBg};\n padding: 0.5rem;\n width: calc((100% - 0.125rem) / 3);\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root {\n margin-top: 0.25rem;\n word-break: break-all;\n font-weight: 600;\n font-family: 'Roboto Mono', monospace;\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root strong {\n font-family: 'Roboto Mono', monospace;\n font-weight: 600;\n }\n\n .primary-node .block-wrapper .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0\n }\n\n .primary-node .block-wrapper .block:nth-of-type(3) {\n border-top-right-radius: 0.625rem\n }\n\n .primary-node .block-wrapper .block:last-child {\n width: 100%;\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block-wrapper .block label {\n display: block;\n font-weight: 400;\n font-size: 0.625rem;\n line-height: 0.625rem;\n letter-spacing: -0.005rem;\n color: ${nodeLabelColor};\n text-transform: uppercase;\n }\n\n .primary-node .seprator {\n width: 0.125rem;\n height: 1rem;\n border-radius: 1.25rem;\n margin: 0.25rem auto;\n background: ${nodeGreenBorderColor};\n }\n `,\n },\n MuiList: {\n styleOverrides: {\n root: {\n '&.customSwitch': {\n padding: '0.125rem',\n background: chipTextColor,\n borderRadius: '0.5rem',\n display: 'flex',\n '& .MuiListItemButton-root': {\n padding: '0.25rem 0.75rem',\n borderRadius: '0.4375rem',\n width: '10.59375rem',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n '&:not(:last-child)': {\n marginBottom: '0',\n },\n '&.Mui-disabled': {\n opacity: 1,\n },\n '&.Mui-selected': {\n background: textWhite,\n boxShadow: listBoxShadow,\n border: `0.03125rem solid ${listBorderColor}`,\n '& .MuiTypography-root': {\n color: listSelectedTextColor,\n },\n },\n },\n '& .MuiChip-root': {\n marginLeft: '0.25rem',\n },\n '& .MuiTypography-root': {\n fontWeight: 500,\n fontSize: '0.8125rem',\n lineHeight: '1.25rem',\n letterSpacing: '-0.005rem',\n color: chipBgColor,\n margin: 0,\n },\n },\n },\n },\n },\n MuiListItemIcon: {\n styleOverrides: {\n root: {\n minWidth: 'inherit',\n },\n },\n },\n MuiListItemButton: {\n styleOverrides: {\n root: {\n padding: 0,\n width: '2.5rem',\n height: '2.5rem',\n borderRadius: '50%',\n justifyContent: 'center',\n backgroundColor: chipTextColor,\n '&:hover': {\n backgroundColor: chipTextColor,\n },\n '&:not(:last-child)': {\n marginBottom: '0.75rem',\n },\n '&.Mui-selected': {\n backgroundColor: listItemActiveBg,\n '&:hover': {\n backgroundColor: listItemActiveBg,\n },\n },\n '&.Mui-disabled': {\n opacity: 0.8,\n },\n },\n },\n },\n },\n };\n};\n\nexport default (customVariables: ThemeVars) =>\n applicationTheme({\n ...vars,\n ...customVariables,\n });\n"],"names":["ReactDiagramMetaTypes","MetaOptions","constructor","id","name","shape","variant","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","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","_model$getOptions","getNode","nodes","find","n","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","sidebarBg","sidebarShadow","canvasBg","showPropertiesButtonBg","nodeBorderColor","nodePointerBg","nodeButtonTextColor","nodeButtonLineColor","nodeTextColor","nodeWrapperBg","nodeLabelColor","nodeBlockBg","nodeGreenBackgroundColor","nodeGreenTextColor","nodeGreenBorderColor","nodeGreenBoxShadow","useStyles","makeStyles","node","margin","& .MuiDivider-root","borderColor","width","border","borderTop","& img","display","Sidebar","classes","setSelected","useState","svgImg","img","Buffer","toString","SidebarItem","props","image","selectedImage","selection","ListItemButton","onClick","ListItemIcon","src","alt","Box","className","List","disablePadding","component","Divider","_","container","height","canvasContainer","background","nodesMap","linksMap","links","sourceId","sourcePortId","targetId","targetPortId","undefined","Map","getSourceId","getSourcePortId","getTargetId","getTargetPortId","position","children","x","y","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","Object","fromEntries","ml","metaLink","link","source","target","setSourcePort","getPort","setTargetPort","getLinkModel","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customVariables","customThemeVariables","params","components","MuiCssBaseline","styleOverrides","MuiList","root","&.customSwitch","padding","borderRadius","& .MuiListItemButton-root","alignItems","justifyContent","&:not(:last-child)","marginBottom","&.Mui-disabled","opacity","&.Mui-selected","boxShadow","& .MuiTypography-root","color","& .MuiChip-root","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","backgroundColor","&:hover","applicationTheme","CssBaseline","CanvasWidget","canvasClassName"],"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 137e117..a59ba13 100644 --- a/dist/meta-diagram.esm.js +++ b/dist/meta-diagram.esm.js @@ -237,6 +237,9 @@ const vars = { nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)', nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)', nodeTextColor: '#3C3C43', + nodeWrapperBg: '#FFFFFF', + nodeLabelColor: '#76787D', + nodeBlockBg: 'rgba(255, 255, 255, 0.6)', ...nodeGreen }; @@ -364,7 +367,10 @@ const applicationTheme = params => { nodeGreenTextColor, nodeGreenBorderColor, nodeGreenBoxShadow, - nodeTextColor + nodeTextColor, + nodeWrapperBg, + nodeLabelColor, + nodeBlockBg } = params; return { components: { @@ -425,8 +431,8 @@ const applicationTheme = params => { } .primary-node .icon { - width: 20px; - height: 20px; + width: 1.25rem; + height: 1.25rem; margin: 0 auto 0.25rem; background: url(data:image/svg+xml;base64,${new Buffer(nodeGreen$1).toString('base64')}); } @@ -512,6 +518,138 @@ const applicationTheme = params => { position: absolute; } + .primary-node.rounded { + border-radius: 0.875rem; + padding: 0.5rem; + width: 18rem; + height: auto; + } + + .primary-node.rounded .nodes { + left: 0; + top: 0; + width: 100%; + height: 100%; + } + + .primary-node.rounded .primary-node_header { + height: 4.25rem; + margin-bottom: 0.25rem + } + + .primary-node .block { + padding: 0.625rem 0.5rem; + background-color: ${nodeBlockBg}; + display: flex; + align-items: center; + } + + .primary-node .block:first-of-type { + border-top-left-radius: 0.625rem; + border-top-right-radius: 0.625rem; + } + + .primary-node .block:last-child { + border-bottom-left-radius: 0.625rem; + border-bottom-right-radius: 0.625rem; + } + + .primary-node .block:not(:last-child) { + margin-bottom: 0.0625rem; + } + + .primary-node .block .disc { + width: 1rem; + height: 1rem; + border: solid 0.0625rem ${nodeGreenTextColor}; + background: ${nodeGreenBackgroundColor} + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-right: 0.5rem + } + + .primary-node .block .disc:after { + content: ''; + background: ${nodeGreenTextColor}; + width: 0.375rem; + height: 0.375rem; + border-radius: 50%; + } + + .primary-node .block.reverse { + justify-content: end; + } + + .primary-node .block.reverse .disc { + order: 2; + margin-left: 0.5rem; + margin-right: 0; + } + + .primary-node .block.reverse p { + order: 1 + } + + .primary-node .block-wrapper { + display: flex; + gap: 0 0.0625rem; + flex-wrap: wrap; + } + + .primary-node .block-wrapper .block { + flex-direction: column; + align-items: flex-start; + background: ${nodeWrapperBg}; + padding: 0.5rem; + width: calc((100% - 0.125rem) / 3); + } + + .primary-node .block-wrapper .block .function.MuiTypography-root { + margin-top: 0.25rem; + word-break: break-all; + font-weight: 600; + font-family: 'Roboto Mono', monospace; + } + + .primary-node .block-wrapper .block .function.MuiTypography-root strong { + font-family: 'Roboto Mono', monospace; + font-weight: 600; + } + + .primary-node .block-wrapper .block:first-of-type { + border-top-left-radius: 0.625rem; + border-top-right-radius: 0 + } + + .primary-node .block-wrapper .block:nth-of-type(3) { + border-top-right-radius: 0.625rem + } + + .primary-node .block-wrapper .block:last-child { + width: 100%; + border-bottom-left-radius: 0.625rem; + border-bottom-right-radius: 0.625rem; + } + + .primary-node .block-wrapper .block label { + display: block; + font-weight: 400; + font-size: 0.625rem; + line-height: 0.625rem; + letter-spacing: -0.005rem; + color: ${nodeLabelColor}; + text-transform: uppercase; + } + + .primary-node .seprator { + width: 0.125rem; + height: 1rem; + border-radius: 1.25rem; + margin: 0.25rem auto; + background: ${nodeGreenBorderColor}; + } ` }, MuiList: { diff --git a/dist/meta-diagram.esm.js.map b/dist/meta-diagram.esm.js.map index f64accf..0d39f77 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/theme.ts","../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;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n variant: string,\n options: Map\n ) {\n this.options = options;\n this.options.set('id', id);\n this.options.set('name', name);\n this.options.set('shape', shape);\n this.options.set('variant', variant);\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 children: MetaNode[];\n options: MetaOptions;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n position: Position,\n variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\n }\n this.children = [];\n options.set('position', position);\n this.options = new MetaOptions(id, name, shape, variant, 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 variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\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, variant, 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;\n links: Map;\n\n constructor(\n nodesMap: Map,\n linksMap: Map\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
Unknown Type
;\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;\n\n constructor(componentsMap: Map) {\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 return (\n // @ts-ignore\n \n );\n }\n // TODO: Generate default node instead\n return ;\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;\n\n constructor(componentsMap: Map) {\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 \n );\n }\n // TODO: Generate default link instead\n return ;\n }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n id: string,\n nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n return nodes.find(n => n.getOptions().id === id);\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","const nodeGreen = {\n nodeGreenBackgroundColor: '#D4F4D4',\n nodeGreenTextColor: '#669D66',\n nodeGreenBorderColor: 'rgba(102, 157, 102, 0.2)',\n nodeGreenBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)',\n};\n\nconst 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 sidebarBg: '#ffffff',\n sidebarShadow: `0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)`,\n canvasBg: '#fff',\n showPropertiesButtonBg: '#161A1E',\n nodeBorderColor: '#18A0FB',\n nodePointerBg: '#fff',\n nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)',\n nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)',\n nodeTextColor: '#3C3C43',\n ...nodeGreen,\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 MoveActive from './assets/svg/move-active.svg';\nimport Icon from './assets/svg/icon.svg';\nimport IconActive from './assets/svg/icon-active.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport CursorActive from './assets/svg/cursor-active.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\nimport FullscreenActive from './assets/svg/fullscreen-active.svg';\n\nconst { dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\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\ntype sidebarItemProps = {\n image: string;\n name: string;\n selectedImage: string;\n selection: string;\n};\n\nconst Sidebar = () => {\n const classes = useStyles();\n const [selected, setSelected] = React.useState('1');\n const svgImg = (img: string) =>\n `data:image/svg+xml;base64,${new Buffer(img).toString('base64')}`;\n const SidebarItem = (props: sidebarItemProps) => {\n const { image, name, selectedImage, selection } = props;\n return (\n setSelected(selection)}\n >\n \n {selected === selection ? (\n {name}\n ) : (\n {name}\n )}\n \n \n );\n };\n\n return (\n \n \n \n \n \n\n \n \n \"Node\"\n \n \n\n \n \n \n \n \n );\n};\n\nexport default Sidebar;\n","import vars from './components/assets/styles/variables';\nimport nodeGreen from './components/assets/svg/node/green.svg';\n\ntype ThemeVars = {\n [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n const {\n primaryBg,\n fontFamily,\n chipTextColor,\n chipBgColor,\n textWhite,\n listItemActiveBg,\n listSelectedTextColor,\n listBoxShadow,\n listBorderColor,\n sidebarBg,\n sidebarShadow,\n canvasBg,\n showPropertiesButtonBg,\n nodeBorderColor,\n nodePointerBg,\n nodeButtonTextColor,\n nodeButtonLineColor,\n nodeGreenBackgroundColor,\n nodeGreenTextColor,\n nodeGreenBorderColor,\n nodeGreenBoxShadow,\n nodeTextColor,\n } = params;\n return {\n components: {\n MuiCssBaseline: {\n styleOverrides: `\n html {\n background: ${primaryBg};\n font-family: ${fontFamily};\n }\n body {\n background-color:${primaryBg};\n font-family: ${fontFamily};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${sidebarBg};\n box-shadow: ${sidebarShadow};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${canvasBg};\n }\n\n .primary-node {\n border: solid 0.0625rem ${nodeGreenBorderColor};\n border-radius: 50%;\n box-shadow: ${nodeGreenBoxShadow};\n background: ${nodeGreenBackgroundColor};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 20px;\n height: 20px;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer(\n nodeGreen\n ).toString('base64')});\n }\n\n .primary-node .primary-node_header p {\n color: ${nodeGreenTextColor};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${nodeTextColor};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${showPropertiesButtonBg};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${nodeButtonTextColor};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${fontFamily};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${showPropertiesButtonBg};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: \"\";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${nodeButtonLineColor};\n }\n\n .primary-node .node-button .icon {\n background: ${nodeGreenBackgroundColor};\n border-color: ${nodeGreenBorderColor}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${nodeBorderColor};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${nodePointerBg};\n border: 0.09375rem solid ${nodeBorderColor};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n `,\n },\n MuiList: {\n styleOverrides: {\n root: {\n '&.customSwitch': {\n padding: '0.125rem',\n background: chipTextColor,\n borderRadius: '0.5rem',\n display: 'flex',\n '& .MuiListItemButton-root': {\n padding: '0.25rem 0.75rem',\n borderRadius: '0.4375rem',\n width: '10.59375rem',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n '&:not(:last-child)': {\n marginBottom: '0',\n },\n '&.Mui-disabled': {\n opacity: 1,\n },\n '&.Mui-selected': {\n background: textWhite,\n boxShadow: listBoxShadow,\n border: `0.03125rem solid ${listBorderColor}`,\n '& .MuiTypography-root': {\n color: listSelectedTextColor,\n },\n },\n },\n '& .MuiChip-root': {\n marginLeft: '0.25rem',\n },\n '& .MuiTypography-root': {\n fontWeight: 500,\n fontSize: '0.8125rem',\n lineHeight: '1.25rem',\n letterSpacing: '-0.005rem',\n color: chipBgColor,\n margin: 0,\n },\n },\n },\n },\n },\n MuiListItemIcon: {\n styleOverrides: {\n root: {\n minWidth: 'inherit',\n },\n },\n },\n MuiListItemButton: {\n styleOverrides: {\n root: {\n padding: 0,\n width: '2.5rem',\n height: '2.5rem',\n borderRadius: '50%',\n justifyContent: 'center',\n backgroundColor: chipTextColor,\n '&:hover': {\n backgroundColor: chipTextColor,\n },\n '&:not(:last-child)': {\n marginBottom: '0.75rem',\n },\n '&.Mui-selected': {\n backgroundColor: listItemActiveBg,\n '&:hover': {\n backgroundColor: listItemActiveBg,\n },\n },\n '&.Mui-disabled': {\n opacity: 0.8,\n },\n },\n },\n },\n },\n };\n};\n\nexport default (customVariables: ThemeVars) =>\n applicationTheme({\n ...vars,\n ...customVariables,\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 * 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 '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n container: {\n height: '100%',\n width: '100%',\n },\n canvasContainer: {\n height: '100%',\n width: '100%',\n background: '#fffff',\n },\n}));\n\ninterface MetaDiagramProps {\n metaNodes: MetaNode[];\n metaLinks: MetaLink[];\n componentsMap: ComponentsMap;\n wrapperClassName?: string;\n canvasClassName?: string;\n metaTheme: {\n customThemeVariables: {};\n canvasClassName: string;\n };\n}\n\nconst MetaDiagram = ({\n metaNodes,\n metaLinks,\n componentsMap,\n wrapperClassName,\n metaTheme,\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 = metaNodes.map(\n mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n );\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\n return (\n \n \n \n \n \n \n \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","variant","options","set","getId","get","getShape","MetaNode","position","undefined","Map","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","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getNode","find","n","getLinkModel","metaLink","link","Object","fromEntries","source","target","setSourcePort","getPort","setTargetPort","nodeGreen","nodeGreenBackgroundColor","nodeGreenTextColor","nodeGreenBorderColor","nodeGreenBoxShadow","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","sidebarBg","sidebarShadow","canvasBg","showPropertiesButtonBg","nodeBorderColor","nodePointerBg","nodeButtonTextColor","nodeButtonLineColor","nodeTextColor","useStyles","makeStyles","node","margin","borderColor","width","border","borderTop","display","Sidebar","classes","setSelected","useState","svgImg","img","Buffer","toString","SidebarItem","props","image","selectedImage","selection","ListItemButton","onClick","ListItemIcon","src","alt","Box","className","List","disablePadding","component","CursorActive","Cursor","MoveActive","Move","Divider","Node","IconActive","Icon","FullscreenActive","Fullscreen","applicationTheme","params","components","MuiCssBaseline","styleOverrides","MuiList","root","padding","background","borderRadius","alignItems","justifyContent","marginBottom","opacity","boxShadow","color","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","height","backgroundColor","customVariables","Position","x","y","_","container","canvasContainer","MetaDiagram","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","ml","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customThemeVariables","CssBaseline","CanvasWidget","canvasClassName"],"mappings":";;;;;;;;;MAGaA;EAGXC,YACEC,IACAC,MACAC,OACAC,SACAC;IAEA,KAAKA,OAAL,GAAeA,OAAf;IACA,KAAKA,OAAL,CAAaC,GAAb,CAAiB,IAAjB,EAAuBL,EAAvB;IACA,KAAKI,OAAL,CAAaC,GAAb,CAAiB,MAAjB,EAAyBJ,IAAzB;IACA,KAAKG,OAAL,CAAaC,GAAb,CAAiB,OAAjB,EAA0BH,KAA1B;IACA,KAAKE,OAAL,CAAaC,GAAb,CAAiB,SAAjB,EAA4BF,OAA5B;;;EAGFG,KAAK;IACH,OAAO,KAAKF,OAAL,CAAaG,GAAb,CAAiB,IAAjB,CAAP;;;EAGFC,QAAQ;IACN,OAAO,KAAKJ,OAAL,CAAaG,GAAb,CAAiB,OAAjB,CAAP;;;;;MCtBSE;EAIXV,YACEC,IACAC,MACAC,OACAQ,UACAP,SACAC;IAEA,IAAIA,OAAO,KAAKO,SAAhB,EAA2B;MACzBP,OAAO,GAAG,IAAIQ,GAAJ,EAAV;;;IAEF,KAAKC,QAAL,GAAgB,EAAhB;IACAT,OAAO,CAACC,GAAR,CAAY,UAAZ,EAAwBK,QAAxB;IACA,KAAKN,OAAL,GAAe,IAAIN,WAAJ,CAAgBE,EAAhB,EAAoBC,IAApB,EAA0BC,KAA1B,EAAiCC,OAAjC,EAA0CC,OAA1C,CAAf;;;;;MCjBSU;EAOXf,YACEC,IACAC,MACAC,OACAa,UACAC,cACAC,UACAC,cACAf,SACAC;IAEA,IAAIA,OAAO,KAAKO,SAAhB,EAA2B;MACzBP,OAAO,GAAG,IAAIQ,GAAJ,EAAV;;;IAEF,KAAKG,QAAL,GAAgBA,QAAhB;IACA,KAAKC,YAAL,GAAoBA,YAApB;IACA,KAAKC,QAAL,GAAgBA,QAAhB;IACA,KAAKC,YAAL,GAAoBA,YAApB;IACA,KAAKd,OAAL,GAAe,IAAIN,WAAJ,CAAgBE,EAAhB,EAAoBC,IAApB,EAA0BC,KAA1B,EAAiCC,OAAjC,EAA0CC,OAA1C,CAAf;;;EAGFe,WAAW;IACT,OAAO,KAAKJ,QAAZ;;;EAGFK,eAAe;IACb,OAAO,KAAKJ,YAAZ;;;EAGFK,WAAW;IACT,OAAO,KAAKJ,QAAZ;;;EAGFK,eAAe;IACb,OAAO,KAAKJ,YAAZ;;;;;MC1CSK;EAIXxB,YACEyB,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;EACjC/B,YAAYK,OAAO,GAAG;IACpB,MAAM,EACJ,GAAGA,OADC;MAEJ2B,IAAI,EAAEH,qBAAqB,CAACI;KAF9B;;IAOA,KAAKC,OAAL,CACE,IAAIC,gBAAJ,CAAqB;MACnBC,EAAE,EAAE,IADe;MAEnBlC,IAAI,EAAE;KAFR,CADF;IAMA,KAAKgC,OAAL,CACE,IAAIC,gBAAJ,CAAqB;MACnBC,EAAE,EAAE,KADe;MAEnBlC,IAAI,EAAE;KAFR,CADF;;;;;AChBG,MAAMmC,iBAAiB,GAAG;EAC/B,OAAOC,4BAAA,MAAA,MAAA,gBAAA,CAAP;AACD,CAFM;;MCIMC,wBAAwBC;EAGnCxC,YAAYyC;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,CAAYzC,OAAZ,CAAoBF,KAA3C,CAAJ,EAAuD;MACrD,MAAM4C,kBAAkB,GAAG,KAAKN,aAAL,CAAmBjC,GAAnB,CACzBoC,KAAK,CAACE,KAAN,CAAYzC,OAAZ,CAAoBF,KADK,CAA3B;MAGA;QAEEmC,4BAAA,CAACS,kBAAD;UACEC,GAAG,kBAAkBJ,KAAK,CAACE,KAAN,CAAYG,UAAZ,GAAyBhD;UAC9CiD,MAAM,EAAE,KAAKA;UACbJ,KAAK,EAAEF,KAAK,CAACE;SAHf;;;;;IAQJ,OAAOR,4BAAA,CAACD,iBAAD,MAAA,CAAP;;;;;MC9BSc,sBAAsBC;EACjCpD,YAAYK,OAAO,GAAG;IACpB,MAAM,EACJ,GAAGA,OADC;MAEJ2B,IAAI,EAAEH,qBAAqB,CAACwB;KAF9B;;;;;MCCSC,wBAAwBC;EAGnCvD,YAAYyC;IACV,MAAMZ,qBAAqB,CAACwB,SAA5B;IACA,KAAKZ,aAAL,GAAqBA,aAArB;;;EAGFC,aAAa;IACX,OAAO,IAAIS,aAAJ,EAAP;;;EAGFK,mBAAmB,CACjBV,KADiB,EAEjBW,QAFiB,EAGjBC,IAHiB;;;;IAMjB,IAAI,KAAKjB,aAAL,CAAmBI,GAAnB,sBAAuBC,KAAK,CAACG,UAAN,EAAvB,qBAAuB,kBAAoB9C,KAA3C,CAAJ,EAAuD;MACrD,MAAM4C,kBAAkB,GAAG,KAAKN,aAAL,CAAmBjC,GAAnB;MAEzBsC,KAAK,CAACG,UAAN,GAAmB9C,KAFM,CAA3B;MAKA;QAEEmC,4BAAA,CAACS,kBAAD;UACEC,GAAG,kBAAkBF,KAAK,CAACG,UAAN,GAAmBhD;UACxCiD,MAAM,EAAE,KAAKA;UACbJ,KAAK,EAAEA;UACPY,IAAI,EAAEA;UACND,QAAQ,EAAEA;SALZ;;;;;IAUJ,OAAOnB,4BAAA,CAACD,iBAAD,MAAA,CAAP;;;;;SCxCYsB,QACd1D,IACA0B;EAEA,OAAOA,KAAK,CAACiC,IAAN,CAAWC,CAAC,IAAIA,CAAC,CAACZ,UAAF,GAAehD,EAAf,KAAsBA,EAAtC,CAAP;AACD;;SCFe6D,aACdC,UACApC;EAEA,MAAMqC,IAAI,GAAG,IAAIb,aAAJ,CAAkBc,MAAM,CAACC,WAAP,CAAmBH,QAAQ,CAAC1D,OAAT,CAAiBA,OAApC,CAAlB,CAAb;EACA,MAAM8D,MAAM,GAAGR,OAAO,CAACI,QAAQ,CAAC3C,WAAT,EAAD,EAAyBO,KAAzB,CAAtB;EACA,MAAMyC,MAAM,GAAGT,OAAO,CAACI,QAAQ,CAACzC,WAAT,EAAD,EAAyBK,KAAzB,CAAtB;;EACA,IAAIwC,MAAM,IAAIC,MAAd,EAAsB;IACpBJ,IAAI,CAACK,aAAL,CAAmBF,MAAM,CAACG,OAAP,CAAeP,QAAQ,CAAC1C,eAAT,EAAf,CAAnB;IACA2C,IAAI,CAACO,aAAL,CAAmBH,MAAM,CAACE,OAAP,CAAeP,QAAQ,CAACxC,eAAT,EAAf,CAAnB;IACA,OAAOyC,IAAP;;;EAEF,OAAOpD,SAAP;AACD;;AClBD,MAAM4D,SAAS,GAAG;EAChBC,wBAAwB,EAAE,SADV;EAEhBC,kBAAkB,EAAE,SAFJ;EAGhBC,oBAAoB,EAAE,0BAHN;EAIhBC,kBAAkB,EAAE;AAJJ,CAAlB;AAOA,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,mFAnCS;EAqCXC,SAAS,EAAE,SArCA;EAsCXC,aAAa;+CAtCF;EAwCXC,QAAQ,EAAE,MAxCC;EAyCXC,sBAAsB,EAAE,SAzCb;EA0CXC,eAAe,EAAE,SA1CN;EA2CXC,aAAa,EAAE,MA3CJ;EA4CXC,mBAAmB,EAAE,0BA5CV;EA6CXC,mBAAmB,EAAE,0BA7CV;EA8CXC,aAAa,EAAE,SA9CJ;EA+CX,GAAGtC;AA/CQ,CAAb;;;;;;;;;;;;;;;;;;;;ACQA,MAAM;EAAEsB;AAAF,IAAmBjB,IAAzB;AAEA,MAAMkC,SAAS,gBAAGC,UAAU,CAAC,OAAO;EAClCC,IAAI,EAAE;IACJC,MAAM,EAAE,WADJ;IAEJ,sBAAsB;MACpBC,WAAW,EAAErB,YADO;MAEpBsB,KAAK,EAAE,qBAFa;MAGpBF,MAAM,EAAE,QAHY;MAIpBG,MAAM,EAAE,MAJY;MAKpBC,SAAS,EAAE;KAPT;IAUJ,SAAS;MACPC,OAAO,EAAE,OADF;MAEPL,MAAM,EAAE;;;AAbsB,CAAP,CAAD,CAA5B;;AAyBA,MAAMM,OAAO,GAAG;EACd,MAAMC,OAAO,GAAGV,SAAS,EAAzB;EACA,MAAM,CAACtD,QAAD,EAAWiE,WAAX,IAA0BpF,cAAK,CAACqF,QAAN,CAAe,GAAf,CAAhC;;EACA,MAAMC,MAAM,GAAIC,GAAD,iCACgB,IAAIC,MAAJ,CAAWD,GAAX,EAAgBE,QAAhB,CAAyB,QAAzB,GAD/B;;EAEA,MAAMC,WAAW,GAAIC,KAAD;IAClB,MAAM;MAAEC,KAAF;MAAShI,IAAT;MAAeiI,aAAf;MAA8BC;QAAcH,KAAlD;IACA,OACE3F,4BAAA,CAAC+F,cAAD;MACE5E,QAAQ,EAAEA,QAAQ,KAAK2E;MACvBE,OAAO,EAAE,MAAMZ,WAAW,CAACU,SAAD;KAF5B,EAIE9F,4BAAA,CAACiG,YAAD,MAAA,EACG9E,QAAQ,KAAK2E,SAAb,GACC9F,4BAAA,MAAA;MAAKkG,GAAG,EAAEZ,MAAM,CAACM,KAAD;MAASO,GAAG,EAAEvI;KAA9B,CADD,GAGCoC,4BAAA,MAAA;MAAKkG,GAAG,EAAEZ,MAAM,CAACO,aAAD;MAAiBM,GAAG,EAAEvI;KAAtC,CAJJ,CAJF,CADF;GAFF;;EAkBA,OACEoC,4BAAA,CAACoG,GAAD;IAAKC,SAAS,EAAC;GAAf,EACErG,4BAAA,CAACsG,IAAD;IAAMC,cAAc;IAACC,SAAS,EAAC;GAA/B,EACExG,4BAAA,CAAC0F,WAAD;IACEE,KAAK,EAAEa;IACPZ,aAAa,EAAEa;IACf9I,IAAI,EAAC;IACLkI,SAAS,EAAC;GAJZ,CADF,EAOE9F,4BAAA,CAAC0F,WAAD;IACEE,KAAK,EAAEe;IACPd,aAAa,EAAEe;IACfhJ,IAAI,EAAC;IACLkI,SAAS,EAAC;GAJZ,CAPF,CADF,EAgBE9F,4BAAA,CAACoG,GAAD;IAAKC,SAAS,EAAElB,OAAO,CAACR;GAAxB,EACE3E,4BAAA,CAAC6G,OAAD,MAAA,CADF,EAEE7G,4BAAA,MAAA;IAAKkG,GAAG,EAAEZ,MAAM,CAACwB,IAAD;IAAQX,GAAG,EAAC;GAA5B,CAFF,EAGEnG,4BAAA,CAAC6G,OAAD,MAAA,CAHF,CAhBF,EAsBE7G,4BAAA,CAACsG,IAAD;IAAMC,cAAc;IAACC,SAAS,EAAC;GAA/B,EACExG,4BAAA,CAAC0F,WAAD;IACEE,KAAK,EAAEmB;IACPlB,aAAa,EAAEmB;IACfpJ,IAAI,EAAC;IACLkI,SAAS,EAAC;GAJZ,CADF,EAOE9F,4BAAA,CAAC0F,WAAD;IACEE,KAAK,EAAEqB;IACPpB,aAAa,EAAEqB;IACftJ,IAAI,EAAC;IACLkI,SAAS,EAAC;GAJZ,CAPF,CAtBF,CADF;AAuCD,CA9DD;;;;ACnCA,MAAMqB,gBAAgB,GAAIC,MAAD;EACvB,MAAM;IACJ3E,SADI;IAEJD,UAFI;IAGJG,aAHI;IAIJC,WAJI;IAKJF,SALI;IAMJU,gBANI;IAOJC,qBAPI;IAQJC,aARI;IASJC,eATI;IAUJS,SAVI;IAWJC,aAXI;IAYJC,QAZI;IAaJC,sBAbI;IAcJC,eAdI;IAeJC,aAfI;IAgBJC,mBAhBI;IAiBJC,mBAjBI;IAkBJpC,wBAlBI;IAmBJC,kBAnBI;IAoBJC,oBApBI;IAqBJC,kBArBI;IAsBJkC;MACE4C,MAvBJ;EAwBA,OAAO;IACLC,UAAU,EAAE;MACVC,cAAc,EAAE;QACdC,cAAc;;0BAEI9E;2BACCD;;;+BAGIC;2BACJD;;;;;;0BAMDwB;0BACAC;;;;;;;;;;;;;;;;;;;;gCAoBMC;;;;sCAIM7B;;0BAEZC;0BACAH;;;;;;;;;;;;;;;;;;wDAkB8B,IAAIqD,MAAJ,CAC1CtD,WAD0C,EAE1CuD,QAF0C,CAEjC,QAFiC;;;;qBAMnCrD;;;;;qBAKAoC;;;;;;;;gCAQWL;;;;;;;qBAOXG;;;;;;;2BAOM9B;;;;;;;gCAOK2B;;;;;;;;;;;;;;;;;;;;;gCAqBAI;;;;0BAINpC;4BACEE;;;;;;uCAMW+B;;;;;;;;0BAQbC;uCACaD;;;;;;OA9IvB;MAqJVoD,OAAO,EAAE;QACPD,cAAc,EAAE;UACdE,IAAI,EAAE;YACJ,kBAAkB;cAChBC,OAAO,EAAE,UADO;cAEhBC,UAAU,EAAEhF,aAFI;cAGhBiF,YAAY,EAAE,QAHE;cAIhB3C,OAAO,EAAE,MAJO;cAKhB,6BAA6B;gBAC3ByC,OAAO,EAAE,iBADkB;gBAE3BE,YAAY,EAAE,WAFa;gBAG3B9C,KAAK,EAAE,aAHoB;gBAI3BG,OAAO,EAAE,MAJkB;gBAK3B4C,UAAU,EAAE,QALe;gBAM3BC,cAAc,EAAE,QANW;gBAO3B,sBAAsB;kBACpBC,YAAY,EAAE;iBARW;gBAU3B,kBAAkB;kBAChBC,OAAO,EAAE;iBAXgB;gBAa3B,kBAAkB;kBAChBL,UAAU,EAAEjF,SADI;kBAEhBuF,SAAS,EAAE3E,aAFK;kBAGhByB,MAAM,sBAAsBxB,iBAHZ;kBAIhB,yBAAyB;oBACvB2E,KAAK,EAAE7E;;;eAvBG;cA2BhB,mBAAmB;gBACjB8E,UAAU,EAAE;eA5BE;cA8BhB,yBAAyB;gBACvBC,UAAU,EAAE,GADW;gBAEvBC,QAAQ,EAAE,WAFa;gBAGvBC,UAAU,EAAE,SAHW;gBAIvBC,aAAa,EAAE,WAJQ;gBAKvBL,KAAK,EAAEtF,WALgB;gBAMvBgC,MAAM,EAAE;;;;;OA5LR;MAkMV4D,eAAe,EAAE;QACfjB,cAAc,EAAE;UACdE,IAAI,EAAE;YACJgB,QAAQ,EAAE;;;OArMN;MAyMVC,iBAAiB,EAAE;QACjBnB,cAAc,EAAE;UACdE,IAAI,EAAE;YACJC,OAAO,EAAE,CADL;YAEJ5C,KAAK,EAAE,QAFH;YAGJ6D,MAAM,EAAE,QAHJ;YAIJf,YAAY,EAAE,KAJV;YAKJE,cAAc,EAAE,QALZ;YAMJc,eAAe,EAAEjG,aANb;YAOJ,WAAW;cACTiG,eAAe,EAAEjG;aARf;YAUJ,sBAAsB;cACpBoF,YAAY,EAAE;aAXZ;YAaJ,kBAAkB;cAChBa,eAAe,EAAExF,gBADD;cAEhB,WAAW;gBACTwF,eAAe,EAAExF;;aAhBjB;YAmBJ,kBAAkB;cAChB4E,OAAO,EAAE;;;;;;GAhOrB;AAuOD,CAhQD;;AAkQA,aAAgBa,eAAD,IACb1B,gBAAgB,CAAC,EACf,GAAG5E,IADY;EAEf,GAAGsG;AAFY,CAAD,CADlB;;MCzQaC;EAIXpL,YAAYqL,GAAWC;IACrB,KAAKD,CAAL,GAASA,CAAT;IACA,KAAKC,CAAL,GAASA,CAAT;;;;;ACWJ,MAAMvE,WAAS,gBAAGC,UAAU,CAACuE,CAAC,KAAK;EACjCC,SAAS,EAAE;IACTP,MAAM,EAAE,MADC;IAET7D,KAAK,EAAE;GAHwB;EAKjCqE,eAAe,EAAE;IACfR,MAAM,EAAE,MADO;IAEf7D,KAAK,EAAE,MAFQ;IAGf6C,UAAU,EAAE;;AARmB,CAAL,CAAF,CAA5B;;AAwBA,MAAMyB,WAAW,GAAG,CAAC;EACnBC,SADmB;EAEnBC,SAFmB;EAGnBnJ,aAHmB;EAInBoJ,gBAJmB;EAKnBC;AALmB,CAAD;EAOlB,MAAMrE,OAAO,GAAGV,WAAS,EAAzB;;EAGA,MAAM7D,MAAM,GAAG6I,YAAY,EAA3B;EAEA7I,MAAM,CACH8I,gBADH;GAGGC,eAHH,CAGmB,IAAI1J,eAAJ,CAAoBE,aAAa,CAACd,KAAlC,CAHnB;EAKAuB,MAAM,CACHgJ,gBADH;GAGGD,eAHH,CAGmB,IAAI3I,eAAJ,CAAoBb,aAAa,CAACb,KAAlC,CAHnB;;EAOA,MAAMkB,KAAK,GAAG,IAAIqJ,YAAJ,EAAd;EACA,MAAMxK,KAAK,GAAGgK,SAAS,CAACS,GAAV,CACZC,EAAE,IAAI,IAAIvK,aAAJ,CAAkBmC,MAAM,CAACC,WAAP,CAAmBmI,EAAE,CAAChM,OAAH,CAAWA,OAA9B,CAAlB,CADM,CAAd;EAGA,MAAMuB,KAAK,GAAGgK,SAAS,CACpBQ,GADW,CACPE,EAAE,IAAIxI,YAAY,CAACwI,EAAD,EAAK3K,KAAL,CADX,EAEX4K,MAFW,CAEJC,GAAG,IAAIA,GAAG,KAAK5L,SAFX,CAAd;;EAIAkC,KAAK,CAAC2J,MAAN,CAAa,GAAG9K,KAAhB,EAAuB,GAAGC,KAA1B;;EAGAsB,MAAM,CAACwJ,QAAP,CAAgB5J,KAAhB;EAEA,MAAM6J,kBAAkB,GAAGd,gBAAgB,GACvCA,gBADuC,GAEvCpE,OAAO,CAAC+D,SAFZ;EAIA,OACElJ,aAAA,CAACsK,aAAD;IAAeC,KAAK,EAAEC,WAAW,CAACD,KAAK,CAACf,SAAD,oBAACA,SAAS,CAAEiB,oBAAZ,CAAN;GAAjC,EACEzK,aAAA,CAAC0K,WAAD,MAAA,CADF,EAEE1K,aAAA,CAACoG,KAAD;IAAKC,SAAS,EAAEgE;GAAhB,EACErK,aAAA,CAACkF,OAAD,MAAA,CADF,EAEElF,aAAA,CAAC2K,YAAD;IACEtE,SAAS,mBAAmBmD,SAAjB,oBAAiBA,SAAS,CAAEoB;IACvChK,MAAM,EAAEA;GAFV,CAFF,CAFF,CADF;AAYD,CArDD;;;;;"} \ 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/theme.ts","../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;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n variant: string,\n options: Map\n ) {\n this.options = options;\n this.options.set('id', id);\n this.options.set('name', name);\n this.options.set('shape', shape);\n this.options.set('variant', variant);\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 children: MetaNode[];\n options: MetaOptions;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n position: Position,\n variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\n }\n this.children = [];\n options.set('position', position);\n this.options = new MetaOptions(id, name, shape, variant, 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 variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\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, variant, 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;\n links: Map;\n\n constructor(\n nodesMap: Map,\n linksMap: Map\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
Unknown Type
;\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;\n\n constructor(componentsMap: Map) {\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 return (\n // @ts-ignore\n \n );\n }\n // TODO: Generate default node instead\n return ;\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;\n\n constructor(componentsMap: Map) {\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 \n );\n }\n // TODO: Generate default link instead\n return ;\n }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n id: string,\n nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n return nodes.find(n => n.getOptions().id === id);\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","const nodeGreen = {\n nodeGreenBackgroundColor: '#D4F4D4',\n nodeGreenTextColor: '#669D66',\n nodeGreenBorderColor: 'rgba(102, 157, 102, 0.2)',\n nodeGreenBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)',\n};\n\nconst 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 sidebarBg: '#ffffff',\n sidebarShadow: `0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)`,\n canvasBg: '#fff',\n showPropertiesButtonBg: '#161A1E',\n nodeBorderColor: '#18A0FB',\n nodePointerBg: '#fff',\n nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)',\n nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)',\n nodeTextColor: '#3C3C43',\n nodeWrapperBg: '#FFFFFF',\n nodeLabelColor: '#76787D',\n nodeBlockBg: 'rgba(255, 255, 255, 0.6)',\n ...nodeGreen,\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 MoveActive from './assets/svg/move-active.svg';\nimport Icon from './assets/svg/icon.svg';\nimport IconActive from './assets/svg/icon-active.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport CursorActive from './assets/svg/cursor-active.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\nimport FullscreenActive from './assets/svg/fullscreen-active.svg';\n\nconst { dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\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\ntype sidebarItemProps = {\n image: string;\n name: string;\n selectedImage: string;\n selection: string;\n};\n\nconst Sidebar = () => {\n const classes = useStyles();\n const [selected, setSelected] = React.useState('1');\n const svgImg = (img: string) =>\n `data:image/svg+xml;base64,${new Buffer(img).toString('base64')}`;\n const SidebarItem = (props: sidebarItemProps) => {\n const { image, name, selectedImage, selection } = props;\n return (\n setSelected(selection)}\n >\n \n {selected === selection ? (\n {name}\n ) : (\n {name}\n )}\n \n \n );\n };\n\n return (\n \n \n \n \n \n\n \n \n \"Node\"\n \n \n\n \n \n \n \n \n );\n};\n\nexport default Sidebar;\n","import vars from './components/assets/styles/variables';\nimport nodeGreen from './components/assets/svg/node/green.svg';\n\ntype ThemeVars = {\n [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n const {\n primaryBg,\n fontFamily,\n chipTextColor,\n chipBgColor,\n textWhite,\n listItemActiveBg,\n listSelectedTextColor,\n listBoxShadow,\n listBorderColor,\n sidebarBg,\n sidebarShadow,\n canvasBg,\n showPropertiesButtonBg,\n nodeBorderColor,\n nodePointerBg,\n nodeButtonTextColor,\n nodeButtonLineColor,\n nodeGreenBackgroundColor,\n nodeGreenTextColor,\n nodeGreenBorderColor,\n nodeGreenBoxShadow,\n nodeTextColor,\n nodeWrapperBg,\n nodeLabelColor,\n nodeBlockBg,\n } = params;\n return {\n components: {\n MuiCssBaseline: {\n styleOverrides: `\n html {\n background: ${primaryBg};\n font-family: ${fontFamily};\n }\n body {\n background-color:${primaryBg};\n font-family: ${fontFamily};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${sidebarBg};\n box-shadow: ${sidebarShadow};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${canvasBg};\n }\n\n .primary-node {\n border: solid 0.0625rem ${nodeGreenBorderColor};\n border-radius: 50%;\n box-shadow: ${nodeGreenBoxShadow};\n background: ${nodeGreenBackgroundColor};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 1.25rem;\n height: 1.25rem;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer(\n nodeGreen\n ).toString('base64')});\n }\n\n .primary-node .primary-node_header p {\n color: ${nodeGreenTextColor};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${nodeTextColor};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${showPropertiesButtonBg};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${nodeButtonTextColor};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${fontFamily};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${showPropertiesButtonBg};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: \"\";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${nodeButtonLineColor};\n }\n\n .primary-node .node-button .icon {\n background: ${nodeGreenBackgroundColor};\n border-color: ${nodeGreenBorderColor}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${nodeBorderColor};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${nodePointerBg};\n border: 0.09375rem solid ${nodeBorderColor};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n .primary-node.rounded {\n border-radius: 0.875rem;\n padding: 0.5rem;\n width: 18rem;\n height: auto;\n }\n\n .primary-node.rounded .nodes {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\n .primary-node.rounded .primary-node_header {\n height: 4.25rem;\n margin-bottom: 0.25rem\n }\n\n .primary-node .block {\n padding: 0.625rem 0.5rem;\n background-color: ${nodeBlockBg};\n display: flex;\n align-items: center;\n }\n\n .primary-node .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0.625rem;\n }\n\n .primary-node .block:last-child {\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block:not(:last-child) {\n margin-bottom: 0.0625rem;\n }\n\n .primary-node .block .disc {\n width: 1rem;\n height: 1rem;\n border: solid 0.0625rem ${nodeGreenTextColor};\n background: ${nodeGreenBackgroundColor}\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 0.5rem\n }\n\n .primary-node .block .disc:after {\n content: '';\n background: ${nodeGreenTextColor};\n width: 0.375rem;\n height: 0.375rem;\n border-radius: 50%;\n }\n\n .primary-node .block.reverse {\n justify-content: end;\n }\n\n .primary-node .block.reverse .disc {\n order: 2;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n\n .primary-node .block.reverse p {\n order: 1\n }\n\n .primary-node .block-wrapper {\n display: flex;\n gap: 0 0.0625rem;\n flex-wrap: wrap;\n }\n\n .primary-node .block-wrapper .block {\n flex-direction: column;\n align-items: flex-start;\n background: ${nodeWrapperBg};\n padding: 0.5rem;\n width: calc((100% - 0.125rem) / 3);\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root {\n margin-top: 0.25rem;\n word-break: break-all;\n font-weight: 600;\n font-family: 'Roboto Mono', monospace;\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root strong {\n font-family: 'Roboto Mono', monospace;\n font-weight: 600;\n }\n\n .primary-node .block-wrapper .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0\n }\n\n .primary-node .block-wrapper .block:nth-of-type(3) {\n border-top-right-radius: 0.625rem\n }\n\n .primary-node .block-wrapper .block:last-child {\n width: 100%;\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block-wrapper .block label {\n display: block;\n font-weight: 400;\n font-size: 0.625rem;\n line-height: 0.625rem;\n letter-spacing: -0.005rem;\n color: ${nodeLabelColor};\n text-transform: uppercase;\n }\n\n .primary-node .seprator {\n width: 0.125rem;\n height: 1rem;\n border-radius: 1.25rem;\n margin: 0.25rem auto;\n background: ${nodeGreenBorderColor};\n }\n `,\n },\n MuiList: {\n styleOverrides: {\n root: {\n '&.customSwitch': {\n padding: '0.125rem',\n background: chipTextColor,\n borderRadius: '0.5rem',\n display: 'flex',\n '& .MuiListItemButton-root': {\n padding: '0.25rem 0.75rem',\n borderRadius: '0.4375rem',\n width: '10.59375rem',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n '&:not(:last-child)': {\n marginBottom: '0',\n },\n '&.Mui-disabled': {\n opacity: 1,\n },\n '&.Mui-selected': {\n background: textWhite,\n boxShadow: listBoxShadow,\n border: `0.03125rem solid ${listBorderColor}`,\n '& .MuiTypography-root': {\n color: listSelectedTextColor,\n },\n },\n },\n '& .MuiChip-root': {\n marginLeft: '0.25rem',\n },\n '& .MuiTypography-root': {\n fontWeight: 500,\n fontSize: '0.8125rem',\n lineHeight: '1.25rem',\n letterSpacing: '-0.005rem',\n color: chipBgColor,\n margin: 0,\n },\n },\n },\n },\n },\n MuiListItemIcon: {\n styleOverrides: {\n root: {\n minWidth: 'inherit',\n },\n },\n },\n MuiListItemButton: {\n styleOverrides: {\n root: {\n padding: 0,\n width: '2.5rem',\n height: '2.5rem',\n borderRadius: '50%',\n justifyContent: 'center',\n backgroundColor: chipTextColor,\n '&:hover': {\n backgroundColor: chipTextColor,\n },\n '&:not(:last-child)': {\n marginBottom: '0.75rem',\n },\n '&.Mui-selected': {\n backgroundColor: listItemActiveBg,\n '&:hover': {\n backgroundColor: listItemActiveBg,\n },\n },\n '&.Mui-disabled': {\n opacity: 0.8,\n },\n },\n },\n },\n },\n };\n};\n\nexport default (customVariables: ThemeVars) =>\n applicationTheme({\n ...vars,\n ...customVariables,\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 * 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 '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n container: {\n height: '100%',\n width: '100%',\n },\n canvasContainer: {\n height: '100%',\n width: '100%',\n background: '#fffff',\n },\n}));\n\ninterface MetaDiagramProps {\n metaNodes: MetaNode[];\n metaLinks: MetaLink[];\n componentsMap: ComponentsMap;\n wrapperClassName?: string;\n canvasClassName?: string;\n metaTheme: {\n customThemeVariables: {};\n canvasClassName: string;\n };\n}\n\nconst MetaDiagram = ({\n metaNodes,\n metaLinks,\n componentsMap,\n wrapperClassName,\n metaTheme,\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 = metaNodes.map(\n mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n );\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\n return (\n \n \n \n \n \n \n \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","variant","options","set","getId","get","getShape","MetaNode","position","undefined","Map","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","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getNode","find","n","getLinkModel","metaLink","link","Object","fromEntries","source","target","setSourcePort","getPort","setTargetPort","nodeGreen","nodeGreenBackgroundColor","nodeGreenTextColor","nodeGreenBorderColor","nodeGreenBoxShadow","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","sidebarBg","sidebarShadow","canvasBg","showPropertiesButtonBg","nodeBorderColor","nodePointerBg","nodeButtonTextColor","nodeButtonLineColor","nodeTextColor","nodeWrapperBg","nodeLabelColor","nodeBlockBg","useStyles","makeStyles","node","margin","borderColor","width","border","borderTop","display","Sidebar","classes","setSelected","useState","svgImg","img","Buffer","toString","SidebarItem","props","image","selectedImage","selection","ListItemButton","onClick","ListItemIcon","src","alt","Box","className","List","disablePadding","component","CursorActive","Cursor","MoveActive","Move","Divider","Node","IconActive","Icon","FullscreenActive","Fullscreen","applicationTheme","params","components","MuiCssBaseline","styleOverrides","MuiList","root","padding","background","borderRadius","alignItems","justifyContent","marginBottom","opacity","boxShadow","color","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","height","backgroundColor","customVariables","Position","x","y","_","container","canvasContainer","MetaDiagram","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","ml","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customThemeVariables","CssBaseline","CanvasWidget","canvasClassName"],"mappings":"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"} \ No newline at end of file diff --git a/src/components/assets/styles/variables.ts b/src/components/assets/styles/variables.ts index 38f4c3e..5188a03 100644 --- a/src/components/assets/styles/variables.ts +++ b/src/components/assets/styles/variables.ts @@ -52,6 +52,9 @@ const vars = { nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)', nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)', nodeTextColor: '#3C3C43', + nodeWrapperBg: '#FFFFFF', + nodeLabelColor: '#76787D', + nodeBlockBg: 'rgba(255, 255, 255, 0.6)', ...nodeGreen, }; diff --git a/src/theme.ts b/src/theme.ts index 39a6c50..be9cba4 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -29,6 +29,9 @@ const applicationTheme = (params: ThemeVars) => { nodeGreenBorderColor, nodeGreenBoxShadow, nodeTextColor, + nodeWrapperBg, + nodeLabelColor, + nodeBlockBg, } = params; return { components: { @@ -89,8 +92,8 @@ const applicationTheme = (params: ThemeVars) => { } .primary-node .icon { - width: 20px; - height: 20px; + width: 1.25rem; + height: 1.25rem; margin: 0 auto 0.25rem; background: url(data:image/svg+xml;base64,${new Buffer( nodeGreen @@ -178,6 +181,138 @@ const applicationTheme = (params: ThemeVars) => { position: absolute; } + .primary-node.rounded { + border-radius: 0.875rem; + padding: 0.5rem; + width: 18rem; + height: auto; + } + + .primary-node.rounded .nodes { + left: 0; + top: 0; + width: 100%; + height: 100%; + } + + .primary-node.rounded .primary-node_header { + height: 4.25rem; + margin-bottom: 0.25rem + } + + .primary-node .block { + padding: 0.625rem 0.5rem; + background-color: ${nodeBlockBg}; + display: flex; + align-items: center; + } + + .primary-node .block:first-of-type { + border-top-left-radius: 0.625rem; + border-top-right-radius: 0.625rem; + } + + .primary-node .block:last-child { + border-bottom-left-radius: 0.625rem; + border-bottom-right-radius: 0.625rem; + } + + .primary-node .block:not(:last-child) { + margin-bottom: 0.0625rem; + } + + .primary-node .block .disc { + width: 1rem; + height: 1rem; + border: solid 0.0625rem ${nodeGreenTextColor}; + background: ${nodeGreenBackgroundColor} + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-right: 0.5rem + } + + .primary-node .block .disc:after { + content: ''; + background: ${nodeGreenTextColor}; + width: 0.375rem; + height: 0.375rem; + border-radius: 50%; + } + + .primary-node .block.reverse { + justify-content: end; + } + + .primary-node .block.reverse .disc { + order: 2; + margin-left: 0.5rem; + margin-right: 0; + } + + .primary-node .block.reverse p { + order: 1 + } + + .primary-node .block-wrapper { + display: flex; + gap: 0 0.0625rem; + flex-wrap: wrap; + } + + .primary-node .block-wrapper .block { + flex-direction: column; + align-items: flex-start; + background: ${nodeWrapperBg}; + padding: 0.5rem; + width: calc((100% - 0.125rem) / 3); + } + + .primary-node .block-wrapper .block .function.MuiTypography-root { + margin-top: 0.25rem; + word-break: break-all; + font-weight: 600; + font-family: 'Roboto Mono', monospace; + } + + .primary-node .block-wrapper .block .function.MuiTypography-root strong { + font-family: 'Roboto Mono', monospace; + font-weight: 600; + } + + .primary-node .block-wrapper .block:first-of-type { + border-top-left-radius: 0.625rem; + border-top-right-radius: 0 + } + + .primary-node .block-wrapper .block:nth-of-type(3) { + border-top-right-radius: 0.625rem + } + + .primary-node .block-wrapper .block:last-child { + width: 100%; + border-bottom-left-radius: 0.625rem; + border-bottom-right-radius: 0.625rem; + } + + .primary-node .block-wrapper .block label { + display: block; + font-weight: 400; + font-size: 0.625rem; + line-height: 0.625rem; + letter-spacing: -0.005rem; + color: ${nodeLabelColor}; + text-transform: uppercase; + } + + .primary-node .seprator { + width: 0.125rem; + height: 1rem; + border-radius: 1.25rem; + margin: 0.25rem auto; + background: ${nodeGreenBorderColor}; + } `, }, MuiList: { From 464a04adc7d19b10675edcc6079647c7a8ead0ab Mon Sep 17 00:00:00 2001 From: vidhya-metacell Date: Tue, 9 Aug 2022 12:20:45 +0200 Subject: [PATCH 2/4] #26 Example application expanded node example integration --- .../widgets/CustomNodeExpandedWidget.tsx | 85 +++++++++++++++++++ .../components/widgets/CustomNodeWidget.tsx | 2 +- .../components/widgets/InputOutputNode.tsx | 21 +++++ example/theme.ts | 41 ++++++++- 4 files changed, 147 insertions(+), 2 deletions(-) create mode 100644 example/components/widgets/CustomNodeExpandedWidget.tsx create mode 100644 example/components/widgets/InputOutputNode.tsx diff --git a/example/components/widgets/CustomNodeExpandedWidget.tsx b/example/components/widgets/CustomNodeExpandedWidget.tsx new file mode 100644 index 0000000..66b47a9 --- /dev/null +++ b/example/components/widgets/CustomNodeExpandedWidget.tsx @@ -0,0 +1,85 @@ +import * as React from "react"; +import { withStyles } from '@mui/styles'; +import {DiagramEngine} from "@projectstorm/react-diagrams"; +import {MetaNodeModel} from "../../../dist"; +import {Box, Typography} from "@mui/material"; +import NodeSelection from "./NodeSelection"; +import InputOutputNode from "./InputOutputNode"; + +export interface CustomNodeWidgetProps { + model: MetaNodeModel; + engine: DiagramEngine; + classes: any; +} + +const styles = () => ({ + textColor: { + color: '#4579EE', + }, + codeColor: { + color: '#ED745D' + } +}); + +export class CustomNodeWidget extends React.Component { + render() { + const { classes } = this.props; + const functionValues = (label: string, value: string) => ( + + {label} + {value} + + ) + return ( + + {this.props.model.getOptions()['selected'] && ( + + )} + + + + + + {this.props.model.getOptions()['name']} + + + + + + + + + + + + { + functionValues('Context', '12') + } + { + functionValues('Size', '8.90') + } + { + functionValues('Prefs', '44') + } + + Function + + + function + =pnl.Logistic(gain=1.0, bias=-4) + + + + + + + + + + + ); + } +} + +// @ts-ignore +export default withStyles(styles)(CustomNodeWidget); diff --git a/example/components/widgets/CustomNodeWidget.tsx b/example/components/widgets/CustomNodeWidget.tsx index d6b9e92..6f08f69 100644 --- a/example/components/widgets/CustomNodeWidget.tsx +++ b/example/components/widgets/CustomNodeWidget.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import {DiagramEngine} from "@projectstorm/react-diagrams"; -import {MetaNodeModel} from "../../../."; +import {MetaNodeModel} from "../../../dist"; import {Box, Typography} from "@mui/material"; import NodeSelection from "./NodeSelection"; diff --git a/example/components/widgets/InputOutputNode.tsx b/example/components/widgets/InputOutputNode.tsx new file mode 100644 index 0000000..150c5e4 --- /dev/null +++ b/example/components/widgets/InputOutputNode.tsx @@ -0,0 +1,21 @@ +import * as React from "react"; +import { Box, Typography } from "@mui/material"; +export interface InputOutputNodeProps { + text: string; + direction?: string +} + +class InputOutputNode extends React.Component { + render() { + const { text, direction } = this.props; + const nodeClass = direction === 'right' ? 'block reverse' : 'block'; + return ( + + + {text} + + ) + } +} + +export default InputOutputNode; \ No newline at end of file diff --git a/example/theme.ts b/example/theme.ts index 086d6df..8351387 100644 --- a/example/theme.ts +++ b/example/theme.ts @@ -89,7 +89,46 @@ const theme = { .primary-node.node-gray .node-button .icon { background: ${nodeGrayBackgroundColor}; - border-color: rgba(130, 130, 130, 0.2); + border-color: ${nodeGrayBorderColor}; + } + + .primary-node.node-red .block .disc { + background: ${nodeRedBackgroundColor}; + border-color: ${nodeRedTextColor}; + } + + .primary-node.node-red .block .disc:after { + background: ${nodeRedTextColor}; + } + + .primary-node.node-red .seprator { + background: ${nodeRedBorderColor}; + } + + .primary-node.node-blue .block .disc { + background: ${nodeBlueBackgroundColor}; + border-color: ${nodeBlueTextColor}; + } + + .primary-node.node-blue .block .disc:after { + background: ${nodeBlueTextColor}; + } + + .primary-node.node-blue .seprator { + background: ${nodeBlueBorderColor}; + } + + .primary-node.node-gray .block .disc { + background: ${nodeGrayBackgroundColor}; + border-color: ${nodeGrayTextColor}; + } + + .primary-node.node-gray .block .disc:after { + background: ${nodeGrayTextColor}; + } + + .primary-node.node-gray .seprator { + background: ${nodeGrayBorderColor}; } `, }, From 78d330910c7c87a45c70dfdc214baad75af4fad8 Mon Sep 17 00:00:00 2001 From: vidhya-metacell Date: Tue, 9 Aug 2022 12:56:31 +0200 Subject: [PATCH 3/4] #26 Show expanded node by default for testing --- dist/meta-diagram.cjs.development.js | 2 +- dist/meta-diagram.cjs.development.js.map | 2 +- dist/meta-diagram.cjs.production.min.js | 2 +- dist/meta-diagram.cjs.production.min.js.map | 2 +- dist/meta-diagram.esm.js | 2 +- dist/meta-diagram.esm.js.map | 2 +- ...idget.tsx => ExpandedCustomNodeWidget.tsx} | 30 ++++++++++--------- example/index.tsx | 8 ++--- src/theme.ts | 2 +- 9 files changed, 27 insertions(+), 25 deletions(-) rename example/components/widgets/{CustomNodeExpandedWidget.tsx => ExpandedCustomNodeWidget.tsx} (84%) diff --git a/dist/meta-diagram.cjs.development.js b/dist/meta-diagram.cjs.development.js index 2ec1d0f..7f3a02c 100644 --- a/dist/meta-diagram.cjs.development.js +++ b/dist/meta-diagram.cjs.development.js @@ -570,7 +570,7 @@ const applicationTheme = params => { width: 1rem; height: 1rem; border: solid 0.0625rem ${nodeGreenTextColor}; - background: ${nodeGreenBackgroundColor} + background: ${nodeGreenBackgroundColor}; border-radius: 50%; display: flex; align-items: center; diff --git a/dist/meta-diagram.cjs.development.js.map b/dist/meta-diagram.cjs.development.js.map index b5bbe39..33eaed0 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/theme.ts","../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;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n variant: string,\n options: Map\n ) {\n this.options = options;\n this.options.set('id', id);\n this.options.set('name', name);\n this.options.set('shape', shape);\n this.options.set('variant', variant);\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 children: MetaNode[];\n options: MetaOptions;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n position: Position,\n variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\n }\n this.children = [];\n options.set('position', position);\n this.options = new MetaOptions(id, name, shape, variant, 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 variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\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, variant, 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;\n links: Map;\n\n constructor(\n nodesMap: Map,\n linksMap: Map\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
Unknown Type
;\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;\n\n constructor(componentsMap: Map) {\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 return (\n // @ts-ignore\n \n );\n }\n // TODO: Generate default node instead\n return ;\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;\n\n constructor(componentsMap: Map) {\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 \n );\n }\n // TODO: Generate default link instead\n return ;\n }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n id: string,\n nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n return nodes.find(n => n.getOptions().id === id);\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","const nodeGreen = {\n nodeGreenBackgroundColor: '#D4F4D4',\n nodeGreenTextColor: '#669D66',\n nodeGreenBorderColor: 'rgba(102, 157, 102, 0.2)',\n nodeGreenBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)',\n};\n\nconst 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 sidebarBg: '#ffffff',\n sidebarShadow: `0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)`,\n canvasBg: '#fff',\n showPropertiesButtonBg: '#161A1E',\n nodeBorderColor: '#18A0FB',\n nodePointerBg: '#fff',\n nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)',\n nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)',\n nodeTextColor: '#3C3C43',\n nodeWrapperBg: '#FFFFFF',\n nodeLabelColor: '#76787D',\n nodeBlockBg: 'rgba(255, 255, 255, 0.6)',\n ...nodeGreen,\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 MoveActive from './assets/svg/move-active.svg';\nimport Icon from './assets/svg/icon.svg';\nimport IconActive from './assets/svg/icon-active.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport CursorActive from './assets/svg/cursor-active.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\nimport FullscreenActive from './assets/svg/fullscreen-active.svg';\n\nconst { dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\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\ntype sidebarItemProps = {\n image: string;\n name: string;\n selectedImage: string;\n selection: string;\n};\n\nconst Sidebar = () => {\n const classes = useStyles();\n const [selected, setSelected] = React.useState('1');\n const svgImg = (img: string) =>\n `data:image/svg+xml;base64,${new Buffer(img).toString('base64')}`;\n const SidebarItem = (props: sidebarItemProps) => {\n const { image, name, selectedImage, selection } = props;\n return (\n setSelected(selection)}\n >\n \n {selected === selection ? (\n {name}\n ) : (\n {name}\n )}\n \n \n );\n };\n\n return (\n \n \n \n \n \n\n \n \n \"Node\"\n \n \n\n \n \n \n \n \n );\n};\n\nexport default Sidebar;\n","import vars from './components/assets/styles/variables';\nimport nodeGreen from './components/assets/svg/node/green.svg';\n\ntype ThemeVars = {\n [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n const {\n primaryBg,\n fontFamily,\n chipTextColor,\n chipBgColor,\n textWhite,\n listItemActiveBg,\n listSelectedTextColor,\n listBoxShadow,\n listBorderColor,\n sidebarBg,\n sidebarShadow,\n canvasBg,\n showPropertiesButtonBg,\n nodeBorderColor,\n nodePointerBg,\n nodeButtonTextColor,\n nodeButtonLineColor,\n nodeGreenBackgroundColor,\n nodeGreenTextColor,\n nodeGreenBorderColor,\n nodeGreenBoxShadow,\n nodeTextColor,\n nodeWrapperBg,\n nodeLabelColor,\n nodeBlockBg,\n } = params;\n return {\n components: {\n MuiCssBaseline: {\n styleOverrides: `\n html {\n background: ${primaryBg};\n font-family: ${fontFamily};\n }\n body {\n background-color:${primaryBg};\n font-family: ${fontFamily};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${sidebarBg};\n box-shadow: ${sidebarShadow};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${canvasBg};\n }\n\n .primary-node {\n border: solid 0.0625rem ${nodeGreenBorderColor};\n border-radius: 50%;\n box-shadow: ${nodeGreenBoxShadow};\n background: ${nodeGreenBackgroundColor};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 1.25rem;\n height: 1.25rem;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer(\n nodeGreen\n ).toString('base64')});\n }\n\n .primary-node .primary-node_header p {\n color: ${nodeGreenTextColor};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${nodeTextColor};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${showPropertiesButtonBg};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${nodeButtonTextColor};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${fontFamily};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${showPropertiesButtonBg};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: \"\";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${nodeButtonLineColor};\n }\n\n .primary-node .node-button .icon {\n background: ${nodeGreenBackgroundColor};\n border-color: ${nodeGreenBorderColor}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${nodeBorderColor};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${nodePointerBg};\n border: 0.09375rem solid ${nodeBorderColor};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n .primary-node.rounded {\n border-radius: 0.875rem;\n padding: 0.5rem;\n width: 18rem;\n height: auto;\n }\n\n .primary-node.rounded .nodes {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\n .primary-node.rounded .primary-node_header {\n height: 4.25rem;\n margin-bottom: 0.25rem\n }\n\n .primary-node .block {\n padding: 0.625rem 0.5rem;\n background-color: ${nodeBlockBg};\n display: flex;\n align-items: center;\n }\n\n .primary-node .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0.625rem;\n }\n\n .primary-node .block:last-child {\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block:not(:last-child) {\n margin-bottom: 0.0625rem;\n }\n\n .primary-node .block .disc {\n width: 1rem;\n height: 1rem;\n border: solid 0.0625rem ${nodeGreenTextColor};\n background: ${nodeGreenBackgroundColor}\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 0.5rem\n }\n\n .primary-node .block .disc:after {\n content: '';\n background: ${nodeGreenTextColor};\n width: 0.375rem;\n height: 0.375rem;\n border-radius: 50%;\n }\n\n .primary-node .block.reverse {\n justify-content: end;\n }\n\n .primary-node .block.reverse .disc {\n order: 2;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n\n .primary-node .block.reverse p {\n order: 1\n }\n\n .primary-node .block-wrapper {\n display: flex;\n gap: 0 0.0625rem;\n flex-wrap: wrap;\n }\n\n .primary-node .block-wrapper .block {\n flex-direction: column;\n align-items: flex-start;\n background: ${nodeWrapperBg};\n padding: 0.5rem;\n width: calc((100% - 0.125rem) / 3);\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root {\n margin-top: 0.25rem;\n word-break: break-all;\n font-weight: 600;\n font-family: 'Roboto Mono', monospace;\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root strong {\n font-family: 'Roboto Mono', monospace;\n font-weight: 600;\n }\n\n .primary-node .block-wrapper .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0\n }\n\n .primary-node .block-wrapper .block:nth-of-type(3) {\n border-top-right-radius: 0.625rem\n }\n\n .primary-node .block-wrapper .block:last-child {\n width: 100%;\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block-wrapper .block label {\n display: block;\n font-weight: 400;\n font-size: 0.625rem;\n line-height: 0.625rem;\n letter-spacing: -0.005rem;\n color: ${nodeLabelColor};\n text-transform: uppercase;\n }\n\n .primary-node .seprator {\n width: 0.125rem;\n height: 1rem;\n border-radius: 1.25rem;\n margin: 0.25rem auto;\n background: ${nodeGreenBorderColor};\n }\n `,\n },\n MuiList: {\n styleOverrides: {\n root: {\n '&.customSwitch': {\n padding: '0.125rem',\n background: chipTextColor,\n borderRadius: '0.5rem',\n display: 'flex',\n '& .MuiListItemButton-root': {\n padding: '0.25rem 0.75rem',\n borderRadius: '0.4375rem',\n width: '10.59375rem',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n '&:not(:last-child)': {\n marginBottom: '0',\n },\n '&.Mui-disabled': {\n opacity: 1,\n },\n '&.Mui-selected': {\n background: textWhite,\n boxShadow: listBoxShadow,\n border: `0.03125rem solid ${listBorderColor}`,\n '& .MuiTypography-root': {\n color: listSelectedTextColor,\n },\n },\n },\n '& .MuiChip-root': {\n marginLeft: '0.25rem',\n },\n '& .MuiTypography-root': {\n fontWeight: 500,\n fontSize: '0.8125rem',\n lineHeight: '1.25rem',\n letterSpacing: '-0.005rem',\n color: chipBgColor,\n margin: 0,\n },\n },\n },\n },\n },\n MuiListItemIcon: {\n styleOverrides: {\n root: {\n minWidth: 'inherit',\n },\n },\n },\n MuiListItemButton: {\n styleOverrides: {\n root: {\n padding: 0,\n width: '2.5rem',\n height: '2.5rem',\n borderRadius: '50%',\n justifyContent: 'center',\n backgroundColor: chipTextColor,\n '&:hover': {\n backgroundColor: chipTextColor,\n },\n '&:not(:last-child)': {\n marginBottom: '0.75rem',\n },\n '&.Mui-selected': {\n backgroundColor: listItemActiveBg,\n '&:hover': {\n backgroundColor: listItemActiveBg,\n },\n },\n '&.Mui-disabled': {\n opacity: 0.8,\n },\n },\n },\n },\n },\n };\n};\n\nexport default (customVariables: ThemeVars) =>\n applicationTheme({\n ...vars,\n ...customVariables,\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 * 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 '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n container: {\n height: '100%',\n width: '100%',\n },\n canvasContainer: {\n height: '100%',\n width: '100%',\n background: '#fffff',\n },\n}));\n\ninterface MetaDiagramProps {\n metaNodes: MetaNode[];\n metaLinks: MetaLink[];\n componentsMap: ComponentsMap;\n wrapperClassName?: string;\n canvasClassName?: string;\n metaTheme: {\n customThemeVariables: {};\n canvasClassName: string;\n };\n}\n\nconst MetaDiagram = ({\n metaNodes,\n metaLinks,\n componentsMap,\n wrapperClassName,\n metaTheme,\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 = metaNodes.map(\n mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n );\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\n return (\n \n \n \n \n \n \n \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","variant","options","set","getId","get","getShape","MetaNode","position","undefined","Map","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","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getNode","find","n","getLinkModel","metaLink","link","Object","fromEntries","source","target","setSourcePort","getPort","setTargetPort","nodeGreen","nodeGreenBackgroundColor","nodeGreenTextColor","nodeGreenBorderColor","nodeGreenBoxShadow","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","sidebarBg","sidebarShadow","canvasBg","showPropertiesButtonBg","nodeBorderColor","nodePointerBg","nodeButtonTextColor","nodeButtonLineColor","nodeTextColor","nodeWrapperBg","nodeLabelColor","nodeBlockBg","useStyles","makeStyles","node","margin","borderColor","width","border","borderTop","display","Sidebar","classes","setSelected","useState","svgImg","img","Buffer","toString","SidebarItem","props","image","selectedImage","selection","ListItemButton","onClick","ListItemIcon","src","alt","Box","className","List","disablePadding","component","CursorActive","Cursor","MoveActive","Move","Divider","Node","IconActive","Icon","FullscreenActive","Fullscreen","applicationTheme","params","components","MuiCssBaseline","styleOverrides","MuiList","root","padding","background","borderRadius","alignItems","justifyContent","marginBottom","opacity","boxShadow","color","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","height","backgroundColor","customVariables","Position","x","y","_","container","canvasContainer","MetaDiagram","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","ml","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customThemeVariables","CssBaseline","CanvasWidget","canvasClassName"],"mappings":"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"} \ 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/theme.ts","../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;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n variant: string,\n options: Map\n ) {\n this.options = options;\n this.options.set('id', id);\n this.options.set('name', name);\n this.options.set('shape', shape);\n this.options.set('variant', variant);\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 children: MetaNode[];\n options: MetaOptions;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n position: Position,\n variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\n }\n this.children = [];\n options.set('position', position);\n this.options = new MetaOptions(id, name, shape, variant, 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 variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\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, variant, 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;\n links: Map;\n\n constructor(\n nodesMap: Map,\n linksMap: Map\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
Unknown Type
;\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;\n\n constructor(componentsMap: Map) {\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 return (\n // @ts-ignore\n \n );\n }\n // TODO: Generate default node instead\n return ;\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;\n\n constructor(componentsMap: Map) {\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 \n );\n }\n // TODO: Generate default link instead\n return ;\n }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n id: string,\n nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n return nodes.find(n => n.getOptions().id === id);\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","const nodeGreen = {\n nodeGreenBackgroundColor: '#D4F4D4',\n nodeGreenTextColor: '#669D66',\n nodeGreenBorderColor: 'rgba(102, 157, 102, 0.2)',\n nodeGreenBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)',\n};\n\nconst 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 sidebarBg: '#ffffff',\n sidebarShadow: `0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)`,\n canvasBg: '#fff',\n showPropertiesButtonBg: '#161A1E',\n nodeBorderColor: '#18A0FB',\n nodePointerBg: '#fff',\n nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)',\n nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)',\n nodeTextColor: '#3C3C43',\n nodeWrapperBg: '#FFFFFF',\n nodeLabelColor: '#76787D',\n nodeBlockBg: 'rgba(255, 255, 255, 0.6)',\n ...nodeGreen,\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 MoveActive from './assets/svg/move-active.svg';\nimport Icon from './assets/svg/icon.svg';\nimport IconActive from './assets/svg/icon-active.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport CursorActive from './assets/svg/cursor-active.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\nimport FullscreenActive from './assets/svg/fullscreen-active.svg';\n\nconst { dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\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\ntype sidebarItemProps = {\n image: string;\n name: string;\n selectedImage: string;\n selection: string;\n};\n\nconst Sidebar = () => {\n const classes = useStyles();\n const [selected, setSelected] = React.useState('1');\n const svgImg = (img: string) =>\n `data:image/svg+xml;base64,${new Buffer(img).toString('base64')}`;\n const SidebarItem = (props: sidebarItemProps) => {\n const { image, name, selectedImage, selection } = props;\n return (\n setSelected(selection)}\n >\n \n {selected === selection ? (\n {name}\n ) : (\n {name}\n )}\n \n \n );\n };\n\n return (\n \n \n \n \n \n\n \n \n \"Node\"\n \n \n\n \n \n \n \n \n );\n};\n\nexport default Sidebar;\n","import vars from './components/assets/styles/variables';\nimport nodeGreen from './components/assets/svg/node/green.svg';\n\ntype ThemeVars = {\n [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n const {\n primaryBg,\n fontFamily,\n chipTextColor,\n chipBgColor,\n textWhite,\n listItemActiveBg,\n listSelectedTextColor,\n listBoxShadow,\n listBorderColor,\n sidebarBg,\n sidebarShadow,\n canvasBg,\n showPropertiesButtonBg,\n nodeBorderColor,\n nodePointerBg,\n nodeButtonTextColor,\n nodeButtonLineColor,\n nodeGreenBackgroundColor,\n nodeGreenTextColor,\n nodeGreenBorderColor,\n nodeGreenBoxShadow,\n nodeTextColor,\n nodeWrapperBg,\n nodeLabelColor,\n nodeBlockBg,\n } = params;\n return {\n components: {\n MuiCssBaseline: {\n styleOverrides: `\n html {\n background: ${primaryBg};\n font-family: ${fontFamily};\n }\n body {\n background-color:${primaryBg};\n font-family: ${fontFamily};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${sidebarBg};\n box-shadow: ${sidebarShadow};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${canvasBg};\n }\n\n .primary-node {\n border: solid 0.0625rem ${nodeGreenBorderColor};\n border-radius: 50%;\n box-shadow: ${nodeGreenBoxShadow};\n background: ${nodeGreenBackgroundColor};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 1.25rem;\n height: 1.25rem;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer(\n nodeGreen\n ).toString('base64')});\n }\n\n .primary-node .primary-node_header p {\n color: ${nodeGreenTextColor};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${nodeTextColor};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${showPropertiesButtonBg};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${nodeButtonTextColor};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${fontFamily};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${showPropertiesButtonBg};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: \"\";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${nodeButtonLineColor};\n }\n\n .primary-node .node-button .icon {\n background: ${nodeGreenBackgroundColor};\n border-color: ${nodeGreenBorderColor}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${nodeBorderColor};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${nodePointerBg};\n border: 0.09375rem solid ${nodeBorderColor};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n .primary-node.rounded {\n border-radius: 0.875rem;\n padding: 0.5rem;\n width: 18rem;\n height: auto;\n }\n\n .primary-node.rounded .nodes {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\n .primary-node.rounded .primary-node_header {\n height: 4.25rem;\n margin-bottom: 0.25rem\n }\n\n .primary-node .block {\n padding: 0.625rem 0.5rem;\n background-color: ${nodeBlockBg};\n display: flex;\n align-items: center;\n }\n\n .primary-node .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0.625rem;\n }\n\n .primary-node .block:last-child {\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block:not(:last-child) {\n margin-bottom: 0.0625rem;\n }\n\n .primary-node .block .disc {\n width: 1rem;\n height: 1rem;\n border: solid 0.0625rem ${nodeGreenTextColor};\n background: ${nodeGreenBackgroundColor};\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 0.5rem\n }\n\n .primary-node .block .disc:after {\n content: '';\n background: ${nodeGreenTextColor};\n width: 0.375rem;\n height: 0.375rem;\n border-radius: 50%;\n }\n\n .primary-node .block.reverse {\n justify-content: end;\n }\n\n .primary-node .block.reverse .disc {\n order: 2;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n\n .primary-node .block.reverse p {\n order: 1\n }\n\n .primary-node .block-wrapper {\n display: flex;\n gap: 0 0.0625rem;\n flex-wrap: wrap;\n }\n\n .primary-node .block-wrapper .block {\n flex-direction: column;\n align-items: flex-start;\n background: ${nodeWrapperBg};\n padding: 0.5rem;\n width: calc((100% - 0.125rem) / 3);\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root {\n margin-top: 0.25rem;\n word-break: break-all;\n font-weight: 600;\n font-family: 'Roboto Mono', monospace;\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root strong {\n font-family: 'Roboto Mono', monospace;\n font-weight: 600;\n }\n\n .primary-node .block-wrapper .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0\n }\n\n .primary-node .block-wrapper .block:nth-of-type(3) {\n border-top-right-radius: 0.625rem\n }\n\n .primary-node .block-wrapper .block:last-child {\n width: 100%;\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block-wrapper .block label {\n display: block;\n font-weight: 400;\n font-size: 0.625rem;\n line-height: 0.625rem;\n letter-spacing: -0.005rem;\n color: ${nodeLabelColor};\n text-transform: uppercase;\n }\n\n .primary-node .seprator {\n width: 0.125rem;\n height: 1rem;\n border-radius: 1.25rem;\n margin: 0.25rem auto;\n background: ${nodeGreenBorderColor};\n }\n `,\n },\n MuiList: {\n styleOverrides: {\n root: {\n '&.customSwitch': {\n padding: '0.125rem',\n background: chipTextColor,\n borderRadius: '0.5rem',\n display: 'flex',\n '& .MuiListItemButton-root': {\n padding: '0.25rem 0.75rem',\n borderRadius: '0.4375rem',\n width: '10.59375rem',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n '&:not(:last-child)': {\n marginBottom: '0',\n },\n '&.Mui-disabled': {\n opacity: 1,\n },\n '&.Mui-selected': {\n background: textWhite,\n boxShadow: listBoxShadow,\n border: `0.03125rem solid ${listBorderColor}`,\n '& .MuiTypography-root': {\n color: listSelectedTextColor,\n },\n },\n },\n '& .MuiChip-root': {\n marginLeft: '0.25rem',\n },\n '& .MuiTypography-root': {\n fontWeight: 500,\n fontSize: '0.8125rem',\n lineHeight: '1.25rem',\n letterSpacing: '-0.005rem',\n color: chipBgColor,\n margin: 0,\n },\n },\n },\n },\n },\n MuiListItemIcon: {\n styleOverrides: {\n root: {\n minWidth: 'inherit',\n },\n },\n },\n MuiListItemButton: {\n styleOverrides: {\n root: {\n padding: 0,\n width: '2.5rem',\n height: '2.5rem',\n borderRadius: '50%',\n justifyContent: 'center',\n backgroundColor: chipTextColor,\n '&:hover': {\n backgroundColor: chipTextColor,\n },\n '&:not(:last-child)': {\n marginBottom: '0.75rem',\n },\n '&.Mui-selected': {\n backgroundColor: listItemActiveBg,\n '&:hover': {\n backgroundColor: listItemActiveBg,\n },\n },\n '&.Mui-disabled': {\n opacity: 0.8,\n },\n },\n },\n },\n },\n };\n};\n\nexport default (customVariables: ThemeVars) =>\n applicationTheme({\n ...vars,\n ...customVariables,\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 * 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 '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n container: {\n height: '100%',\n width: '100%',\n },\n canvasContainer: {\n height: '100%',\n width: '100%',\n background: '#fffff',\n },\n}));\n\ninterface MetaDiagramProps {\n metaNodes: MetaNode[];\n metaLinks: MetaLink[];\n componentsMap: ComponentsMap;\n wrapperClassName?: string;\n canvasClassName?: string;\n metaTheme: {\n customThemeVariables: {};\n canvasClassName: string;\n };\n}\n\nconst MetaDiagram = ({\n metaNodes,\n metaLinks,\n componentsMap,\n wrapperClassName,\n metaTheme,\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 = metaNodes.map(\n mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n );\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\n return (\n \n \n \n \n \n \n \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","variant","options","set","getId","get","getShape","MetaNode","position","undefined","Map","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","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getNode","find","n","getLinkModel","metaLink","link","Object","fromEntries","source","target","setSourcePort","getPort","setTargetPort","nodeGreen","nodeGreenBackgroundColor","nodeGreenTextColor","nodeGreenBorderColor","nodeGreenBoxShadow","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","sidebarBg","sidebarShadow","canvasBg","showPropertiesButtonBg","nodeBorderColor","nodePointerBg","nodeButtonTextColor","nodeButtonLineColor","nodeTextColor","nodeWrapperBg","nodeLabelColor","nodeBlockBg","useStyles","makeStyles","node","margin","borderColor","width","border","borderTop","display","Sidebar","classes","setSelected","useState","svgImg","img","Buffer","toString","SidebarItem","props","image","selectedImage","selection","ListItemButton","onClick","ListItemIcon","src","alt","Box","className","List","disablePadding","component","CursorActive","Cursor","MoveActive","Move","Divider","Node","IconActive","Icon","FullscreenActive","Fullscreen","applicationTheme","params","components","MuiCssBaseline","styleOverrides","MuiList","root","padding","background","borderRadius","alignItems","justifyContent","marginBottom","opacity","boxShadow","color","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","height","backgroundColor","customVariables","Position","x","y","_","container","canvasContainer","MetaDiagram","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","ml","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customThemeVariables","CssBaseline","CanvasWidget","canvasClassName"],"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 479d6a0..dc97561 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 n,r=require("react"),t=e(r),o=require("@projectstorm/react-diagrams"),i=e(o),a=require("@projectstorm/react-canvas-core"),s=require("@mui/styles"),d=require("@mui/system"),l=require("@mui/material"),C=require("@mui/material/styles"),m=e(require("@mui/material/CssBaseline"));class c{constructor(e,n,r,t,o){this.options=o,this.options.set("id",e),this.options.set("name",n),this.options.set("shape",r),this.options.set("variant",t)}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"}(n||(n={}));class g extends o.NodeModel{constructor(e={}){super({...e,type:n.META_NODE}),this.addPort(new o.DefaultPortModel({in:!0,name:"in"})),this.addPort(new o.DefaultPortModel({in:!1,name:"out"}))}}const p=()=>t.createElement("div",null,"Unknown Type");class h extends a.AbstractReactFactory{constructor(e){super(n.META_NODE),this.componentsMap=e}generateModel(){return new g}generateReactWidget(e){if(this.componentsMap.has(e.model.options.shape)){const n=this.componentsMap.get(e.model.options.shape);return t.createElement(n,{key:"node-factory-"+e.model.getOptions().id,engine:this.engine,model:e.model})}return t.createElement(p,null)}}class u extends o.DefaultLinkModel{constructor(e={}){super({...e,type:n.META_LINK})}}class f extends o.DefaultLinkFactory{constructor(e){super(n.META_LINK),this.componentsMap=e}generateModel(){return new u}generateLinkSegment(e,n,r){var o;if(this.componentsMap.has(null==(o=e.getOptions())?void 0:o.shape)){const o=this.componentsMap.get(e.getOptions().shape);return t.createElement(o,{key:"link-factory-"+e.getOptions().id,engine:this.engine,model:e,path:r,selected:n})}return t.createElement(p,null)}}function b(e,n){return n.find(n=>n.getOptions().id===e)}const w={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)",sidebarBg:"#ffffff",sidebarShadow:"0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)",canvasBg:"#fff",showPropertiesButtonBg:"#161A1E",nodeBorderColor:"#18A0FB",nodePointerBg:"#fff",nodeButtonTextColor:"rgba(255, 255, 255, 0.8)",nodeButtonLineColor:"rgba(255, 255, 255, 0.2)",nodeTextColor:"#3C3C43",nodeWrapperBg:"#FFFFFF",nodeLabelColor:"#76787D",nodeBlockBg:"rgba(255, 255, 255, 0.6)",nodeGreenBackgroundColor:"#D4F4D4",nodeGreenTextColor:"#669D66",nodeGreenBorderColor:"rgba(102, 157, 102, 0.2)",nodeGreenBoxShadow:"0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)"},{dividerColor:y}=w,v=s.makeStyles(()=>({node:{margin:"0.25rem 0","& .MuiDivider-root":{borderColor:y,width:"calc(100% - 1.5rem)",margin:"0 auto",border:"none",borderTop:"0.0625rem solid"},"& img":{display:"block",margin:"1rem 0"}}})),M=()=>{const e=v(),[n,r]=t.useState("1"),o=e=>"data:image/svg+xml;base64,"+new Buffer(e).toString("base64"),i=e=>{const{image:i,name:a,selectedImage:s,selection:d}=e;return t.createElement(l.ListItemButton,{selected:n===d,onClick:()=>r(d)},t.createElement(l.ListItemIcon,null,t.createElement("img",n===d?{src:o(i),alt:a}:{src:o(s),alt:a})))};return t.createElement(d.Box,{className:"sidebar"},t.createElement(l.List,{disablePadding:!0,component:"nav"},t.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"cursor",selection:"1"}),t.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"move",selection:"2"})),t.createElement(d.Box,{className:e.node},t.createElement(l.Divider,null),t.createElement("img",{src:o('\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n'),alt:"Node"}),t.createElement(l.Divider,null)),t.createElement(l.List,{disablePadding:!0,component:"nav"},t.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"draw",selection:"3"}),t.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"fullscreen",selection:"4"})))},x=s.makeStyles(e=>({container:{height:"100%",width:"100%"},canvasContainer:{height:"100%",width:"100%",background:"#fffff"}}));exports.ComponentsMap=class{constructor(e,n){this.nodes=e,this.links=n}},exports.MetaLink=class{constructor(e,n,r,t,o,i,a,s,d){void 0===d&&(d=new Map),this.sourceId=t,this.sourcePortId=o,this.targetId=i,this.targetPortId=a,this.options=new c(e,n,r,s,d)}getSourceId(){return this.sourceId}getSourcePortId(){return this.sourcePortId}getTargetId(){return this.targetId}getTargetPortId(){return this.targetPortId}},exports.MetaLinkModel=u,exports.MetaNode=class{constructor(e,n,r,t,o,i){void 0===i&&(i=new Map),this.children=[],i.set("position",t),this.options=new c(e,n,r,o,i)}},exports.MetaNodeModel=g,exports.Position=class{constructor(e,n){this.x=e,this.y=n}},exports.default=({metaNodes:e,metaLinks:n,componentsMap:t,wrapperClassName:s,metaTheme:d})=>{const c=x(),p=i();p.getNodeFactories().registerFactory(new h(t.nodes)),p.getLinkFactories().registerFactory(new f(t.links));const y=new o.DiagramModel,v=e.map(e=>new g(Object.fromEntries(e.options.options))),k=n.map(e=>function(e,n){const r=new u(Object.fromEntries(e.options.options)),t=b(e.getSourceId(),n),o=b(e.getTargetId(),n);if(t&&o)return r.setSourcePort(t.getPort(e.getSourcePortId())),r.setTargetPort(o.getPort(e.getTargetPortId())),r}(e,v)).filter(e=>void 0!==e);y.addAll(...v,...k),p.setModel(y);const B=s||c.container;return r.createElement(C.ThemeProvider,{theme:C.createTheme((V=null==d?void 0:d.customThemeVariables,(e=>{const{primaryBg:n,fontFamily:r,chipTextColor:t,chipBgColor:o,textWhite:i,listItemActiveBg:a,listSelectedTextColor:s,listBoxShadow:d,listBorderColor:l,sidebarBg:C,sidebarShadow:m,canvasBg:c,showPropertiesButtonBg:g,nodeBorderColor:p,nodePointerBg:h,nodeButtonTextColor:u,nodeButtonLineColor:f,nodeGreenBackgroundColor:b,nodeGreenTextColor:w,nodeGreenBorderColor:y,nodeGreenBoxShadow:v,nodeTextColor:M,nodeWrapperBg:x,nodeLabelColor:k,nodeBlockBg:B}=e;return{components:{MuiCssBaseline:{styleOverrides:`\n html {\n background: ${n};\n font-family: ${r};\n }\n body {\n background-color:${n};\n font-family: ${r};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${C};\n box-shadow: ${m};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${c};\n }\n\n .primary-node {\n border: solid 0.0625rem ${y};\n border-radius: 50%;\n box-shadow: ${v};\n background: ${b};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 1.25rem;\n height: 1.25rem;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer('\n\n').toString("base64")});\n }\n\n .primary-node .primary-node_header p {\n color: ${w};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${M};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${g};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${u};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${r};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${g};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: "";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${f};\n }\n\n .primary-node .node-button .icon {\n background: ${b};\n border-color: ${y}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${p};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${h};\n border: 0.09375rem solid ${p};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n .primary-node.rounded {\n border-radius: 0.875rem;\n padding: 0.5rem;\n width: 18rem;\n height: auto;\n }\n\n .primary-node.rounded .nodes {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\n .primary-node.rounded .primary-node_header {\n height: 4.25rem;\n margin-bottom: 0.25rem\n }\n\n .primary-node .block {\n padding: 0.625rem 0.5rem;\n background-color: ${B};\n display: flex;\n align-items: center;\n }\n\n .primary-node .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0.625rem;\n }\n\n .primary-node .block:last-child {\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block:not(:last-child) {\n margin-bottom: 0.0625rem;\n }\n\n .primary-node .block .disc {\n width: 1rem;\n height: 1rem;\n border: solid 0.0625rem ${w};\n background: ${b}\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 0.5rem\n }\n\n .primary-node .block .disc:after {\n content: '';\n background: ${w};\n width: 0.375rem;\n height: 0.375rem;\n border-radius: 50%;\n }\n\n .primary-node .block.reverse {\n justify-content: end;\n }\n\n .primary-node .block.reverse .disc {\n order: 2;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n\n .primary-node .block.reverse p {\n order: 1\n }\n\n .primary-node .block-wrapper {\n display: flex;\n gap: 0 0.0625rem;\n flex-wrap: wrap;\n }\n\n .primary-node .block-wrapper .block {\n flex-direction: column;\n align-items: flex-start;\n background: ${x};\n padding: 0.5rem;\n width: calc((100% - 0.125rem) / 3);\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root {\n margin-top: 0.25rem;\n word-break: break-all;\n font-weight: 600;\n font-family: 'Roboto Mono', monospace;\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root strong {\n font-family: 'Roboto Mono', monospace;\n font-weight: 600;\n }\n\n .primary-node .block-wrapper .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0\n }\n\n .primary-node .block-wrapper .block:nth-of-type(3) {\n border-top-right-radius: 0.625rem\n }\n\n .primary-node .block-wrapper .block:last-child {\n width: 100%;\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block-wrapper .block label {\n display: block;\n font-weight: 400;\n font-size: 0.625rem;\n line-height: 0.625rem;\n letter-spacing: -0.005rem;\n color: ${k};\n text-transform: uppercase;\n }\n\n .primary-node .seprator {\n width: 0.125rem;\n height: 1rem;\n border-radius: 1.25rem;\n margin: 0.25rem auto;\n background: ${y};\n }\n `},MuiList:{styleOverrides:{root:{"&.customSwitch":{padding:"0.125rem",background:t,borderRadius:"0.5rem",display:"flex","& .MuiListItemButton-root":{padding:"0.25rem 0.75rem",borderRadius:"0.4375rem",width:"10.59375rem",display:"flex",alignItems:"center",justifyContent:"center","&:not(:last-child)":{marginBottom:"0"},"&.Mui-disabled":{opacity:1},"&.Mui-selected":{background:i,boxShadow:d,border:"0.03125rem solid "+l,"& .MuiTypography-root":{color:s}}},"& .MuiChip-root":{marginLeft:"0.25rem"},"& .MuiTypography-root":{fontWeight:500,fontSize:"0.8125rem",lineHeight:"1.25rem",letterSpacing:"-0.005rem",color:o,margin:0}}}}},MuiListItemIcon:{styleOverrides:{root:{minWidth:"inherit"}}},MuiListItemButton:{styleOverrides:{root:{padding:0,width:"2.5rem",height:"2.5rem",borderRadius:"50%",justifyContent:"center",backgroundColor:t,"&:hover":{backgroundColor:t},"&:not(:last-child)":{marginBottom:"0.75rem"},"&.Mui-selected":{backgroundColor:a,"&:hover":{backgroundColor:a}},"&.Mui-disabled":{opacity:.8}}}}}}})({...w,...V})))},r.createElement(m,null),r.createElement(l.Box,{className:B},r.createElement(M,null),r.createElement(a.CanvasWidget,{className:"canvas-widget "+(null==d?void 0:d.canvasClassName),engine:p})));var V}; +"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,r=require("react"),t=e(r),o=require("@projectstorm/react-diagrams"),i=e(o),a=require("@projectstorm/react-canvas-core"),s=require("@mui/styles"),d=require("@mui/system"),l=require("@mui/material"),C=require("@mui/material/styles"),m=e(require("@mui/material/CssBaseline"));class c{constructor(e,n,r,t,o){this.options=o,this.options.set("id",e),this.options.set("name",n),this.options.set("shape",r),this.options.set("variant",t)}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"}(n||(n={}));class g extends o.NodeModel{constructor(e={}){super({...e,type:n.META_NODE}),this.addPort(new o.DefaultPortModel({in:!0,name:"in"})),this.addPort(new o.DefaultPortModel({in:!1,name:"out"}))}}const p=()=>t.createElement("div",null,"Unknown Type");class h extends a.AbstractReactFactory{constructor(e){super(n.META_NODE),this.componentsMap=e}generateModel(){return new g}generateReactWidget(e){if(this.componentsMap.has(e.model.options.shape)){const n=this.componentsMap.get(e.model.options.shape);return t.createElement(n,{key:"node-factory-"+e.model.getOptions().id,engine:this.engine,model:e.model})}return t.createElement(p,null)}}class u extends o.DefaultLinkModel{constructor(e={}){super({...e,type:n.META_LINK})}}class f extends o.DefaultLinkFactory{constructor(e){super(n.META_LINK),this.componentsMap=e}generateModel(){return new u}generateLinkSegment(e,n,r){var o;if(this.componentsMap.has(null==(o=e.getOptions())?void 0:o.shape)){const o=this.componentsMap.get(e.getOptions().shape);return t.createElement(o,{key:"link-factory-"+e.getOptions().id,engine:this.engine,model:e,path:r,selected:n})}return t.createElement(p,null)}}function b(e,n){return n.find(n=>n.getOptions().id===e)}const w={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)",sidebarBg:"#ffffff",sidebarShadow:"0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)",canvasBg:"#fff",showPropertiesButtonBg:"#161A1E",nodeBorderColor:"#18A0FB",nodePointerBg:"#fff",nodeButtonTextColor:"rgba(255, 255, 255, 0.8)",nodeButtonLineColor:"rgba(255, 255, 255, 0.2)",nodeTextColor:"#3C3C43",nodeWrapperBg:"#FFFFFF",nodeLabelColor:"#76787D",nodeBlockBg:"rgba(255, 255, 255, 0.6)",nodeGreenBackgroundColor:"#D4F4D4",nodeGreenTextColor:"#669D66",nodeGreenBorderColor:"rgba(102, 157, 102, 0.2)",nodeGreenBoxShadow:"0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)"},{dividerColor:y}=w,v=s.makeStyles(()=>({node:{margin:"0.25rem 0","& .MuiDivider-root":{borderColor:y,width:"calc(100% - 1.5rem)",margin:"0 auto",border:"none",borderTop:"0.0625rem solid"},"& img":{display:"block",margin:"1rem 0"}}})),M=()=>{const e=v(),[n,r]=t.useState("1"),o=e=>"data:image/svg+xml;base64,"+new Buffer(e).toString("base64"),i=e=>{const{image:i,name:a,selectedImage:s,selection:d}=e;return t.createElement(l.ListItemButton,{selected:n===d,onClick:()=>r(d)},t.createElement(l.ListItemIcon,null,t.createElement("img",n===d?{src:o(i),alt:a}:{src:o(s),alt:a})))};return t.createElement(d.Box,{className:"sidebar"},t.createElement(l.List,{disablePadding:!0,component:"nav"},t.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"cursor",selection:"1"}),t.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"move",selection:"2"})),t.createElement(d.Box,{className:e.node},t.createElement(l.Divider,null),t.createElement("img",{src:o('\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n'),alt:"Node"}),t.createElement(l.Divider,null)),t.createElement(l.List,{disablePadding:!0,component:"nav"},t.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"draw",selection:"3"}),t.createElement(i,{image:'\n\n',selectedImage:'\n\n',name:"fullscreen",selection:"4"})))},x=s.makeStyles(e=>({container:{height:"100%",width:"100%"},canvasContainer:{height:"100%",width:"100%",background:"#fffff"}}));exports.ComponentsMap=class{constructor(e,n){this.nodes=e,this.links=n}},exports.MetaLink=class{constructor(e,n,r,t,o,i,a,s,d){void 0===d&&(d=new Map),this.sourceId=t,this.sourcePortId=o,this.targetId=i,this.targetPortId=a,this.options=new c(e,n,r,s,d)}getSourceId(){return this.sourceId}getSourcePortId(){return this.sourcePortId}getTargetId(){return this.targetId}getTargetPortId(){return this.targetPortId}},exports.MetaLinkModel=u,exports.MetaNode=class{constructor(e,n,r,t,o,i){void 0===i&&(i=new Map),this.children=[],i.set("position",t),this.options=new c(e,n,r,o,i)}},exports.MetaNodeModel=g,exports.Position=class{constructor(e,n){this.x=e,this.y=n}},exports.default=({metaNodes:e,metaLinks:n,componentsMap:t,wrapperClassName:s,metaTheme:d})=>{const c=x(),p=i();p.getNodeFactories().registerFactory(new h(t.nodes)),p.getLinkFactories().registerFactory(new f(t.links));const y=new o.DiagramModel,v=e.map(e=>new g(Object.fromEntries(e.options.options))),k=n.map(e=>function(e,n){const r=new u(Object.fromEntries(e.options.options)),t=b(e.getSourceId(),n),o=b(e.getTargetId(),n);if(t&&o)return r.setSourcePort(t.getPort(e.getSourcePortId())),r.setTargetPort(o.getPort(e.getTargetPortId())),r}(e,v)).filter(e=>void 0!==e);y.addAll(...v,...k),p.setModel(y);const B=s||c.container;return r.createElement(C.ThemeProvider,{theme:C.createTheme((V=null==d?void 0:d.customThemeVariables,(e=>{const{primaryBg:n,fontFamily:r,chipTextColor:t,chipBgColor:o,textWhite:i,listItemActiveBg:a,listSelectedTextColor:s,listBoxShadow:d,listBorderColor:l,sidebarBg:C,sidebarShadow:m,canvasBg:c,showPropertiesButtonBg:g,nodeBorderColor:p,nodePointerBg:h,nodeButtonTextColor:u,nodeButtonLineColor:f,nodeGreenBackgroundColor:b,nodeGreenTextColor:w,nodeGreenBorderColor:y,nodeGreenBoxShadow:v,nodeTextColor:M,nodeWrapperBg:x,nodeLabelColor:k,nodeBlockBg:B}=e;return{components:{MuiCssBaseline:{styleOverrides:`\n html {\n background: ${n};\n font-family: ${r};\n }\n body {\n background-color:${n};\n font-family: ${r};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${C};\n box-shadow: ${m};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${c};\n }\n\n .primary-node {\n border: solid 0.0625rem ${y};\n border-radius: 50%;\n box-shadow: ${v};\n background: ${b};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 1.25rem;\n height: 1.25rem;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer('\n\n').toString("base64")});\n }\n\n .primary-node .primary-node_header p {\n color: ${w};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${M};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${g};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${u};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${r};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${g};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: "";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${f};\n }\n\n .primary-node .node-button .icon {\n background: ${b};\n border-color: ${y}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${p};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${h};\n border: 0.09375rem solid ${p};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n .primary-node.rounded {\n border-radius: 0.875rem;\n padding: 0.5rem;\n width: 18rem;\n height: auto;\n }\n\n .primary-node.rounded .nodes {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\n .primary-node.rounded .primary-node_header {\n height: 4.25rem;\n margin-bottom: 0.25rem\n }\n\n .primary-node .block {\n padding: 0.625rem 0.5rem;\n background-color: ${B};\n display: flex;\n align-items: center;\n }\n\n .primary-node .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0.625rem;\n }\n\n .primary-node .block:last-child {\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block:not(:last-child) {\n margin-bottom: 0.0625rem;\n }\n\n .primary-node .block .disc {\n width: 1rem;\n height: 1rem;\n border: solid 0.0625rem ${w};\n background: ${b};\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 0.5rem\n }\n\n .primary-node .block .disc:after {\n content: '';\n background: ${w};\n width: 0.375rem;\n height: 0.375rem;\n border-radius: 50%;\n }\n\n .primary-node .block.reverse {\n justify-content: end;\n }\n\n .primary-node .block.reverse .disc {\n order: 2;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n\n .primary-node .block.reverse p {\n order: 1\n }\n\n .primary-node .block-wrapper {\n display: flex;\n gap: 0 0.0625rem;\n flex-wrap: wrap;\n }\n\n .primary-node .block-wrapper .block {\n flex-direction: column;\n align-items: flex-start;\n background: ${x};\n padding: 0.5rem;\n width: calc((100% - 0.125rem) / 3);\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root {\n margin-top: 0.25rem;\n word-break: break-all;\n font-weight: 600;\n font-family: 'Roboto Mono', monospace;\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root strong {\n font-family: 'Roboto Mono', monospace;\n font-weight: 600;\n }\n\n .primary-node .block-wrapper .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0\n }\n\n .primary-node .block-wrapper .block:nth-of-type(3) {\n border-top-right-radius: 0.625rem\n }\n\n .primary-node .block-wrapper .block:last-child {\n width: 100%;\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block-wrapper .block label {\n display: block;\n font-weight: 400;\n font-size: 0.625rem;\n line-height: 0.625rem;\n letter-spacing: -0.005rem;\n color: ${k};\n text-transform: uppercase;\n }\n\n .primary-node .seprator {\n width: 0.125rem;\n height: 1rem;\n border-radius: 1.25rem;\n margin: 0.25rem auto;\n background: ${y};\n }\n `},MuiList:{styleOverrides:{root:{"&.customSwitch":{padding:"0.125rem",background:t,borderRadius:"0.5rem",display:"flex","& .MuiListItemButton-root":{padding:"0.25rem 0.75rem",borderRadius:"0.4375rem",width:"10.59375rem",display:"flex",alignItems:"center",justifyContent:"center","&:not(:last-child)":{marginBottom:"0"},"&.Mui-disabled":{opacity:1},"&.Mui-selected":{background:i,boxShadow:d,border:"0.03125rem solid "+l,"& .MuiTypography-root":{color:s}}},"& .MuiChip-root":{marginLeft:"0.25rem"},"& .MuiTypography-root":{fontWeight:500,fontSize:"0.8125rem",lineHeight:"1.25rem",letterSpacing:"-0.005rem",color:o,margin:0}}}}},MuiListItemIcon:{styleOverrides:{root:{minWidth:"inherit"}}},MuiListItemButton:{styleOverrides:{root:{padding:0,width:"2.5rem",height:"2.5rem",borderRadius:"50%",justifyContent:"center",backgroundColor:t,"&:hover":{backgroundColor:t},"&:not(:last-child)":{marginBottom:"0.75rem"},"&.Mui-selected":{backgroundColor:a,"&:hover":{backgroundColor:a}},"&.Mui-disabled":{opacity:.8}}}}}}})({...w,...V})))},r.createElement(m,null),r.createElement(l.Box,{className:B},r.createElement(M,null),r.createElement(a.CanvasWidget,{className:"canvas-widget "+(null==d?void 0:d.canvasClassName),engine:p})));var V}; //# 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 83aba03..d3a734a 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/assets/styles/variables.ts","../src/components/Sidebar.tsx","../src/index.tsx","../src/models/ComponentsMap.ts","../src/models/MetaLink.ts","../src/models/MetaNode.ts","../src/models/Position.ts","../src/helpers/linksHelper.ts","../src/theme.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;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n variant: string,\n options: Map\n ) {\n this.options = options;\n this.options.set('id', id);\n this.options.set('name', name);\n this.options.set('shape', shape);\n this.options.set('variant', variant);\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
Unknown Type
;\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;\n\n constructor(componentsMap: Map) {\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 return (\n // @ts-ignore\n \n );\n }\n // TODO: Generate default node instead\n return ;\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;\n\n constructor(componentsMap: Map) {\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 \n );\n }\n // TODO: Generate default link instead\n return ;\n }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n id: string,\n nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n return nodes.find(n => n.getOptions().id === id);\n}\n","const nodeGreen = {\n nodeGreenBackgroundColor: '#D4F4D4',\n nodeGreenTextColor: '#669D66',\n nodeGreenBorderColor: 'rgba(102, 157, 102, 0.2)',\n nodeGreenBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)',\n};\n\nconst 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 sidebarBg: '#ffffff',\n sidebarShadow: `0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)`,\n canvasBg: '#fff',\n showPropertiesButtonBg: '#161A1E',\n nodeBorderColor: '#18A0FB',\n nodePointerBg: '#fff',\n nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)',\n nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)',\n nodeTextColor: '#3C3C43',\n nodeWrapperBg: '#FFFFFF',\n nodeLabelColor: '#76787D',\n nodeBlockBg: 'rgba(255, 255, 255, 0.6)',\n ...nodeGreen,\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 MoveActive from './assets/svg/move-active.svg';\nimport Icon from './assets/svg/icon.svg';\nimport IconActive from './assets/svg/icon-active.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport CursorActive from './assets/svg/cursor-active.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\nimport FullscreenActive from './assets/svg/fullscreen-active.svg';\n\nconst { dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\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\ntype sidebarItemProps = {\n image: string;\n name: string;\n selectedImage: string;\n selection: string;\n};\n\nconst Sidebar = () => {\n const classes = useStyles();\n const [selected, setSelected] = React.useState('1');\n const svgImg = (img: string) =>\n `data:image/svg+xml;base64,${new Buffer(img).toString('base64')}`;\n const SidebarItem = (props: sidebarItemProps) => {\n const { image, name, selectedImage, selection } = props;\n return (\n setSelected(selection)}\n >\n \n {selected === selection ? (\n {name}\n ) : (\n {name}\n )}\n \n \n );\n };\n\n return (\n \n \n \n \n \n\n \n \n \"Node\"\n \n \n\n \n \n \n \n \n );\n};\n\nexport default Sidebar;\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 '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n container: {\n height: '100%',\n width: '100%',\n },\n canvasContainer: {\n height: '100%',\n width: '100%',\n background: '#fffff',\n },\n}));\n\ninterface MetaDiagramProps {\n metaNodes: MetaNode[];\n metaLinks: MetaLink[];\n componentsMap: ComponentsMap;\n wrapperClassName?: string;\n canvasClassName?: string;\n metaTheme: {\n customThemeVariables: {};\n canvasClassName: string;\n };\n}\n\nconst MetaDiagram = ({\n metaNodes,\n metaLinks,\n componentsMap,\n wrapperClassName,\n metaTheme,\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 = metaNodes.map(\n mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n );\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\n return (\n \n \n \n \n \n \n \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;\n links: Map;\n\n constructor(\n nodesMap: Map,\n linksMap: Map\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 variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\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, variant, 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 children: MetaNode[];\n options: MetaOptions;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n position: Position,\n variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\n }\n this.children = [];\n options.set('position', position);\n this.options = new MetaOptions(id, name, shape, variant, 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","import vars from './components/assets/styles/variables';\nimport nodeGreen from './components/assets/svg/node/green.svg';\n\ntype ThemeVars = {\n [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n const {\n primaryBg,\n fontFamily,\n chipTextColor,\n chipBgColor,\n textWhite,\n listItemActiveBg,\n listSelectedTextColor,\n listBoxShadow,\n listBorderColor,\n sidebarBg,\n sidebarShadow,\n canvasBg,\n showPropertiesButtonBg,\n nodeBorderColor,\n nodePointerBg,\n nodeButtonTextColor,\n nodeButtonLineColor,\n nodeGreenBackgroundColor,\n nodeGreenTextColor,\n nodeGreenBorderColor,\n nodeGreenBoxShadow,\n nodeTextColor,\n nodeWrapperBg,\n nodeLabelColor,\n nodeBlockBg,\n } = params;\n return {\n components: {\n MuiCssBaseline: {\n styleOverrides: `\n html {\n background: ${primaryBg};\n font-family: ${fontFamily};\n }\n body {\n background-color:${primaryBg};\n font-family: ${fontFamily};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${sidebarBg};\n box-shadow: ${sidebarShadow};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${canvasBg};\n }\n\n .primary-node {\n border: solid 0.0625rem ${nodeGreenBorderColor};\n border-radius: 50%;\n box-shadow: ${nodeGreenBoxShadow};\n background: ${nodeGreenBackgroundColor};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 1.25rem;\n height: 1.25rem;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer(\n nodeGreen\n ).toString('base64')});\n }\n\n .primary-node .primary-node_header p {\n color: ${nodeGreenTextColor};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${nodeTextColor};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${showPropertiesButtonBg};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${nodeButtonTextColor};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${fontFamily};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${showPropertiesButtonBg};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: \"\";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${nodeButtonLineColor};\n }\n\n .primary-node .node-button .icon {\n background: ${nodeGreenBackgroundColor};\n border-color: ${nodeGreenBorderColor}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${nodeBorderColor};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${nodePointerBg};\n border: 0.09375rem solid ${nodeBorderColor};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n .primary-node.rounded {\n border-radius: 0.875rem;\n padding: 0.5rem;\n width: 18rem;\n height: auto;\n }\n\n .primary-node.rounded .nodes {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\n .primary-node.rounded .primary-node_header {\n height: 4.25rem;\n margin-bottom: 0.25rem\n }\n\n .primary-node .block {\n padding: 0.625rem 0.5rem;\n background-color: ${nodeBlockBg};\n display: flex;\n align-items: center;\n }\n\n .primary-node .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0.625rem;\n }\n\n .primary-node .block:last-child {\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block:not(:last-child) {\n margin-bottom: 0.0625rem;\n }\n\n .primary-node .block .disc {\n width: 1rem;\n height: 1rem;\n border: solid 0.0625rem ${nodeGreenTextColor};\n background: ${nodeGreenBackgroundColor}\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 0.5rem\n }\n\n .primary-node .block .disc:after {\n content: '';\n background: ${nodeGreenTextColor};\n width: 0.375rem;\n height: 0.375rem;\n border-radius: 50%;\n }\n\n .primary-node .block.reverse {\n justify-content: end;\n }\n\n .primary-node .block.reverse .disc {\n order: 2;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n\n .primary-node .block.reverse p {\n order: 1\n }\n\n .primary-node .block-wrapper {\n display: flex;\n gap: 0 0.0625rem;\n flex-wrap: wrap;\n }\n\n .primary-node .block-wrapper .block {\n flex-direction: column;\n align-items: flex-start;\n background: ${nodeWrapperBg};\n padding: 0.5rem;\n width: calc((100% - 0.125rem) / 3);\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root {\n margin-top: 0.25rem;\n word-break: break-all;\n font-weight: 600;\n font-family: 'Roboto Mono', monospace;\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root strong {\n font-family: 'Roboto Mono', monospace;\n font-weight: 600;\n }\n\n .primary-node .block-wrapper .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0\n }\n\n .primary-node .block-wrapper .block:nth-of-type(3) {\n border-top-right-radius: 0.625rem\n }\n\n .primary-node .block-wrapper .block:last-child {\n width: 100%;\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block-wrapper .block label {\n display: block;\n font-weight: 400;\n font-size: 0.625rem;\n line-height: 0.625rem;\n letter-spacing: -0.005rem;\n color: ${nodeLabelColor};\n text-transform: uppercase;\n }\n\n .primary-node .seprator {\n width: 0.125rem;\n height: 1rem;\n border-radius: 1.25rem;\n margin: 0.25rem auto;\n background: ${nodeGreenBorderColor};\n }\n `,\n },\n MuiList: {\n styleOverrides: {\n root: {\n '&.customSwitch': {\n padding: '0.125rem',\n background: chipTextColor,\n borderRadius: '0.5rem',\n display: 'flex',\n '& .MuiListItemButton-root': {\n padding: '0.25rem 0.75rem',\n borderRadius: '0.4375rem',\n width: '10.59375rem',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n '&:not(:last-child)': {\n marginBottom: '0',\n },\n '&.Mui-disabled': {\n opacity: 1,\n },\n '&.Mui-selected': {\n background: textWhite,\n boxShadow: listBoxShadow,\n border: `0.03125rem solid ${listBorderColor}`,\n '& .MuiTypography-root': {\n color: listSelectedTextColor,\n },\n },\n },\n '& .MuiChip-root': {\n marginLeft: '0.25rem',\n },\n '& .MuiTypography-root': {\n fontWeight: 500,\n fontSize: '0.8125rem',\n lineHeight: '1.25rem',\n letterSpacing: '-0.005rem',\n color: chipBgColor,\n margin: 0,\n },\n },\n },\n },\n },\n MuiListItemIcon: {\n styleOverrides: {\n root: {\n minWidth: 'inherit',\n },\n },\n },\n MuiListItemButton: {\n styleOverrides: {\n root: {\n padding: 0,\n width: '2.5rem',\n height: '2.5rem',\n borderRadius: '50%',\n justifyContent: 'center',\n backgroundColor: chipTextColor,\n '&:hover': {\n backgroundColor: chipTextColor,\n },\n '&:not(:last-child)': {\n marginBottom: '0.75rem',\n },\n '&.Mui-selected': {\n backgroundColor: listItemActiveBg,\n '&:hover': {\n backgroundColor: listItemActiveBg,\n },\n },\n '&.Mui-disabled': {\n opacity: 0.8,\n },\n },\n },\n },\n },\n };\n};\n\nexport default (customVariables: ThemeVars) =>\n applicationTheme({\n ...vars,\n ...customVariables,\n });\n"],"names":["ReactDiagramMetaTypes","MetaOptions","constructor","id","name","shape","variant","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","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","_model$getOptions","getNode","nodes","find","n","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","sidebarBg","sidebarShadow","canvasBg","showPropertiesButtonBg","nodeBorderColor","nodePointerBg","nodeButtonTextColor","nodeButtonLineColor","nodeTextColor","nodeWrapperBg","nodeLabelColor","nodeBlockBg","nodeGreenBackgroundColor","nodeGreenTextColor","nodeGreenBorderColor","nodeGreenBoxShadow","useStyles","makeStyles","node","margin","& .MuiDivider-root","borderColor","width","border","borderTop","& img","display","Sidebar","classes","setSelected","useState","svgImg","img","Buffer","toString","SidebarItem","props","image","selectedImage","selection","ListItemButton","onClick","ListItemIcon","src","alt","Box","className","List","disablePadding","component","Divider","_","container","height","canvasContainer","background","nodesMap","linksMap","links","sourceId","sourcePortId","targetId","targetPortId","undefined","Map","getSourceId","getSourcePortId","getTargetId","getTargetPortId","position","children","x","y","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","Object","fromEntries","ml","metaLink","link","source","target","setSourcePort","getPort","setTargetPort","getLinkModel","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customVariables","customThemeVariables","params","components","MuiCssBaseline","styleOverrides","MuiList","root","&.customSwitch","padding","borderRadius","& .MuiListItemButton-root","alignItems","justifyContent","&:not(:last-child)","marginBottom","&.Mui-disabled","opacity","&.Mui-selected","boxShadow","& .MuiTypography-root","color","& .MuiChip-root","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","backgroundColor","&:hover","applicationTheme","CssBaseline","CanvasWidget","canvasClassName"],"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/assets/styles/variables.ts","../src/components/Sidebar.tsx","../src/index.tsx","../src/models/ComponentsMap.ts","../src/models/MetaLink.ts","../src/models/MetaNode.ts","../src/models/Position.ts","../src/helpers/linksHelper.ts","../src/theme.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;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n variant: string,\n options: Map\n ) {\n this.options = options;\n this.options.set('id', id);\n this.options.set('name', name);\n this.options.set('shape', shape);\n this.options.set('variant', variant);\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
Unknown Type
;\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;\n\n constructor(componentsMap: Map) {\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 return (\n // @ts-ignore\n \n );\n }\n // TODO: Generate default node instead\n return ;\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;\n\n constructor(componentsMap: Map) {\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 \n );\n }\n // TODO: Generate default link instead\n return ;\n }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n id: string,\n nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n return nodes.find(n => n.getOptions().id === id);\n}\n","const nodeGreen = {\n nodeGreenBackgroundColor: '#D4F4D4',\n nodeGreenTextColor: '#669D66',\n nodeGreenBorderColor: 'rgba(102, 157, 102, 0.2)',\n nodeGreenBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)',\n};\n\nconst 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 sidebarBg: '#ffffff',\n sidebarShadow: `0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)`,\n canvasBg: '#fff',\n showPropertiesButtonBg: '#161A1E',\n nodeBorderColor: '#18A0FB',\n nodePointerBg: '#fff',\n nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)',\n nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)',\n nodeTextColor: '#3C3C43',\n nodeWrapperBg: '#FFFFFF',\n nodeLabelColor: '#76787D',\n nodeBlockBg: 'rgba(255, 255, 255, 0.6)',\n ...nodeGreen,\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 MoveActive from './assets/svg/move-active.svg';\nimport Icon from './assets/svg/icon.svg';\nimport IconActive from './assets/svg/icon-active.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport CursorActive from './assets/svg/cursor-active.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\nimport FullscreenActive from './assets/svg/fullscreen-active.svg';\n\nconst { dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\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\ntype sidebarItemProps = {\n image: string;\n name: string;\n selectedImage: string;\n selection: string;\n};\n\nconst Sidebar = () => {\n const classes = useStyles();\n const [selected, setSelected] = React.useState('1');\n const svgImg = (img: string) =>\n `data:image/svg+xml;base64,${new Buffer(img).toString('base64')}`;\n const SidebarItem = (props: sidebarItemProps) => {\n const { image, name, selectedImage, selection } = props;\n return (\n setSelected(selection)}\n >\n \n {selected === selection ? (\n {name}\n ) : (\n {name}\n )}\n \n \n );\n };\n\n return (\n \n \n \n \n \n\n \n \n \"Node\"\n \n \n\n \n \n \n \n \n );\n};\n\nexport default Sidebar;\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 '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n container: {\n height: '100%',\n width: '100%',\n },\n canvasContainer: {\n height: '100%',\n width: '100%',\n background: '#fffff',\n },\n}));\n\ninterface MetaDiagramProps {\n metaNodes: MetaNode[];\n metaLinks: MetaLink[];\n componentsMap: ComponentsMap;\n wrapperClassName?: string;\n canvasClassName?: string;\n metaTheme: {\n customThemeVariables: {};\n canvasClassName: string;\n };\n}\n\nconst MetaDiagram = ({\n metaNodes,\n metaLinks,\n componentsMap,\n wrapperClassName,\n metaTheme,\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 = metaNodes.map(\n mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n );\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\n return (\n \n \n \n \n \n \n \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;\n links: Map;\n\n constructor(\n nodesMap: Map,\n linksMap: Map\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 variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\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, variant, 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 children: MetaNode[];\n options: MetaOptions;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n position: Position,\n variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\n }\n this.children = [];\n options.set('position', position);\n this.options = new MetaOptions(id, name, shape, variant, 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","import vars from './components/assets/styles/variables';\nimport nodeGreen from './components/assets/svg/node/green.svg';\n\ntype ThemeVars = {\n [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n const {\n primaryBg,\n fontFamily,\n chipTextColor,\n chipBgColor,\n textWhite,\n listItemActiveBg,\n listSelectedTextColor,\n listBoxShadow,\n listBorderColor,\n sidebarBg,\n sidebarShadow,\n canvasBg,\n showPropertiesButtonBg,\n nodeBorderColor,\n nodePointerBg,\n nodeButtonTextColor,\n nodeButtonLineColor,\n nodeGreenBackgroundColor,\n nodeGreenTextColor,\n nodeGreenBorderColor,\n nodeGreenBoxShadow,\n nodeTextColor,\n nodeWrapperBg,\n nodeLabelColor,\n nodeBlockBg,\n } = params;\n return {\n components: {\n MuiCssBaseline: {\n styleOverrides: `\n html {\n background: ${primaryBg};\n font-family: ${fontFamily};\n }\n body {\n background-color:${primaryBg};\n font-family: ${fontFamily};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${sidebarBg};\n box-shadow: ${sidebarShadow};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${canvasBg};\n }\n\n .primary-node {\n border: solid 0.0625rem ${nodeGreenBorderColor};\n border-radius: 50%;\n box-shadow: ${nodeGreenBoxShadow};\n background: ${nodeGreenBackgroundColor};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 1.25rem;\n height: 1.25rem;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer(\n nodeGreen\n ).toString('base64')});\n }\n\n .primary-node .primary-node_header p {\n color: ${nodeGreenTextColor};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${nodeTextColor};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${showPropertiesButtonBg};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${nodeButtonTextColor};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${fontFamily};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${showPropertiesButtonBg};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: \"\";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${nodeButtonLineColor};\n }\n\n .primary-node .node-button .icon {\n background: ${nodeGreenBackgroundColor};\n border-color: ${nodeGreenBorderColor}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${nodeBorderColor};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${nodePointerBg};\n border: 0.09375rem solid ${nodeBorderColor};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n .primary-node.rounded {\n border-radius: 0.875rem;\n padding: 0.5rem;\n width: 18rem;\n height: auto;\n }\n\n .primary-node.rounded .nodes {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\n .primary-node.rounded .primary-node_header {\n height: 4.25rem;\n margin-bottom: 0.25rem\n }\n\n .primary-node .block {\n padding: 0.625rem 0.5rem;\n background-color: ${nodeBlockBg};\n display: flex;\n align-items: center;\n }\n\n .primary-node .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0.625rem;\n }\n\n .primary-node .block:last-child {\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block:not(:last-child) {\n margin-bottom: 0.0625rem;\n }\n\n .primary-node .block .disc {\n width: 1rem;\n height: 1rem;\n border: solid 0.0625rem ${nodeGreenTextColor};\n background: ${nodeGreenBackgroundColor};\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 0.5rem\n }\n\n .primary-node .block .disc:after {\n content: '';\n background: ${nodeGreenTextColor};\n width: 0.375rem;\n height: 0.375rem;\n border-radius: 50%;\n }\n\n .primary-node .block.reverse {\n justify-content: end;\n }\n\n .primary-node .block.reverse .disc {\n order: 2;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n\n .primary-node .block.reverse p {\n order: 1\n }\n\n .primary-node .block-wrapper {\n display: flex;\n gap: 0 0.0625rem;\n flex-wrap: wrap;\n }\n\n .primary-node .block-wrapper .block {\n flex-direction: column;\n align-items: flex-start;\n background: ${nodeWrapperBg};\n padding: 0.5rem;\n width: calc((100% - 0.125rem) / 3);\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root {\n margin-top: 0.25rem;\n word-break: break-all;\n font-weight: 600;\n font-family: 'Roboto Mono', monospace;\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root strong {\n font-family: 'Roboto Mono', monospace;\n font-weight: 600;\n }\n\n .primary-node .block-wrapper .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0\n }\n\n .primary-node .block-wrapper .block:nth-of-type(3) {\n border-top-right-radius: 0.625rem\n }\n\n .primary-node .block-wrapper .block:last-child {\n width: 100%;\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block-wrapper .block label {\n display: block;\n font-weight: 400;\n font-size: 0.625rem;\n line-height: 0.625rem;\n letter-spacing: -0.005rem;\n color: ${nodeLabelColor};\n text-transform: uppercase;\n }\n\n .primary-node .seprator {\n width: 0.125rem;\n height: 1rem;\n border-radius: 1.25rem;\n margin: 0.25rem auto;\n background: ${nodeGreenBorderColor};\n }\n `,\n },\n MuiList: {\n styleOverrides: {\n root: {\n '&.customSwitch': {\n padding: '0.125rem',\n background: chipTextColor,\n borderRadius: '0.5rem',\n display: 'flex',\n '& .MuiListItemButton-root': {\n padding: '0.25rem 0.75rem',\n borderRadius: '0.4375rem',\n width: '10.59375rem',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n '&:not(:last-child)': {\n marginBottom: '0',\n },\n '&.Mui-disabled': {\n opacity: 1,\n },\n '&.Mui-selected': {\n background: textWhite,\n boxShadow: listBoxShadow,\n border: `0.03125rem solid ${listBorderColor}`,\n '& .MuiTypography-root': {\n color: listSelectedTextColor,\n },\n },\n },\n '& .MuiChip-root': {\n marginLeft: '0.25rem',\n },\n '& .MuiTypography-root': {\n fontWeight: 500,\n fontSize: '0.8125rem',\n lineHeight: '1.25rem',\n letterSpacing: '-0.005rem',\n color: chipBgColor,\n margin: 0,\n },\n },\n },\n },\n },\n MuiListItemIcon: {\n styleOverrides: {\n root: {\n minWidth: 'inherit',\n },\n },\n },\n MuiListItemButton: {\n styleOverrides: {\n root: {\n padding: 0,\n width: '2.5rem',\n height: '2.5rem',\n borderRadius: '50%',\n justifyContent: 'center',\n backgroundColor: chipTextColor,\n '&:hover': {\n backgroundColor: chipTextColor,\n },\n '&:not(:last-child)': {\n marginBottom: '0.75rem',\n },\n '&.Mui-selected': {\n backgroundColor: listItemActiveBg,\n '&:hover': {\n backgroundColor: listItemActiveBg,\n },\n },\n '&.Mui-disabled': {\n opacity: 0.8,\n },\n },\n },\n },\n },\n };\n};\n\nexport default (customVariables: ThemeVars) =>\n applicationTheme({\n ...vars,\n ...customVariables,\n });\n"],"names":["ReactDiagramMetaTypes","MetaOptions","constructor","id","name","shape","variant","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","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","_model$getOptions","getNode","nodes","find","n","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","sidebarBg","sidebarShadow","canvasBg","showPropertiesButtonBg","nodeBorderColor","nodePointerBg","nodeButtonTextColor","nodeButtonLineColor","nodeTextColor","nodeWrapperBg","nodeLabelColor","nodeBlockBg","nodeGreenBackgroundColor","nodeGreenTextColor","nodeGreenBorderColor","nodeGreenBoxShadow","useStyles","makeStyles","node","margin","& .MuiDivider-root","borderColor","width","border","borderTop","& img","display","Sidebar","classes","setSelected","useState","svgImg","img","Buffer","toString","SidebarItem","props","image","selectedImage","selection","ListItemButton","onClick","ListItemIcon","src","alt","Box","className","List","disablePadding","component","Divider","_","container","height","canvasContainer","background","nodesMap","linksMap","links","sourceId","sourcePortId","targetId","targetPortId","undefined","Map","getSourceId","getSourcePortId","getTargetId","getTargetPortId","position","children","x","y","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","Object","fromEntries","ml","metaLink","link","source","target","setSourcePort","getPort","setTargetPort","getLinkModel","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customVariables","customThemeVariables","params","components","MuiCssBaseline","styleOverrides","MuiList","root","&.customSwitch","padding","borderRadius","& .MuiListItemButton-root","alignItems","justifyContent","&:not(:last-child)","marginBottom","&.Mui-disabled","opacity","&.Mui-selected","boxShadow","& .MuiTypography-root","color","& .MuiChip-root","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","backgroundColor","&:hover","applicationTheme","CssBaseline","CanvasWidget","canvasClassName"],"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 a59ba13..22b42fc 100644 --- a/dist/meta-diagram.esm.js +++ b/dist/meta-diagram.esm.js @@ -562,7 +562,7 @@ const applicationTheme = params => { width: 1rem; height: 1rem; border: solid 0.0625rem ${nodeGreenTextColor}; - background: ${nodeGreenBackgroundColor} + background: ${nodeGreenBackgroundColor}; border-radius: 50%; display: flex; align-items: center; diff --git a/dist/meta-diagram.esm.js.map b/dist/meta-diagram.esm.js.map index 0d39f77..71d1916 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/theme.ts","../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;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n variant: string,\n options: Map\n ) {\n this.options = options;\n this.options.set('id', id);\n this.options.set('name', name);\n this.options.set('shape', shape);\n this.options.set('variant', variant);\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 children: MetaNode[];\n options: MetaOptions;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n position: Position,\n variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\n }\n this.children = [];\n options.set('position', position);\n this.options = new MetaOptions(id, name, shape, variant, 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 variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\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, variant, 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;\n links: Map;\n\n constructor(\n nodesMap: Map,\n linksMap: Map\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
Unknown Type
;\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;\n\n constructor(componentsMap: Map) {\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 return (\n // @ts-ignore\n \n );\n }\n // TODO: Generate default node instead\n return ;\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;\n\n constructor(componentsMap: Map) {\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 \n );\n }\n // TODO: Generate default link instead\n return ;\n }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n id: string,\n nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n return nodes.find(n => n.getOptions().id === id);\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","const nodeGreen = {\n nodeGreenBackgroundColor: '#D4F4D4',\n nodeGreenTextColor: '#669D66',\n nodeGreenBorderColor: 'rgba(102, 157, 102, 0.2)',\n nodeGreenBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)',\n};\n\nconst 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 sidebarBg: '#ffffff',\n sidebarShadow: `0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)`,\n canvasBg: '#fff',\n showPropertiesButtonBg: '#161A1E',\n nodeBorderColor: '#18A0FB',\n nodePointerBg: '#fff',\n nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)',\n nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)',\n nodeTextColor: '#3C3C43',\n nodeWrapperBg: '#FFFFFF',\n nodeLabelColor: '#76787D',\n nodeBlockBg: 'rgba(255, 255, 255, 0.6)',\n ...nodeGreen,\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 MoveActive from './assets/svg/move-active.svg';\nimport Icon from './assets/svg/icon.svg';\nimport IconActive from './assets/svg/icon-active.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport CursorActive from './assets/svg/cursor-active.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\nimport FullscreenActive from './assets/svg/fullscreen-active.svg';\n\nconst { dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\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\ntype sidebarItemProps = {\n image: string;\n name: string;\n selectedImage: string;\n selection: string;\n};\n\nconst Sidebar = () => {\n const classes = useStyles();\n const [selected, setSelected] = React.useState('1');\n const svgImg = (img: string) =>\n `data:image/svg+xml;base64,${new Buffer(img).toString('base64')}`;\n const SidebarItem = (props: sidebarItemProps) => {\n const { image, name, selectedImage, selection } = props;\n return (\n setSelected(selection)}\n >\n \n {selected === selection ? (\n {name}\n ) : (\n {name}\n )}\n \n \n );\n };\n\n return (\n \n \n \n \n \n\n \n \n \"Node\"\n \n \n\n \n \n \n \n \n );\n};\n\nexport default Sidebar;\n","import vars from './components/assets/styles/variables';\nimport nodeGreen from './components/assets/svg/node/green.svg';\n\ntype ThemeVars = {\n [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n const {\n primaryBg,\n fontFamily,\n chipTextColor,\n chipBgColor,\n textWhite,\n listItemActiveBg,\n listSelectedTextColor,\n listBoxShadow,\n listBorderColor,\n sidebarBg,\n sidebarShadow,\n canvasBg,\n showPropertiesButtonBg,\n nodeBorderColor,\n nodePointerBg,\n nodeButtonTextColor,\n nodeButtonLineColor,\n nodeGreenBackgroundColor,\n nodeGreenTextColor,\n nodeGreenBorderColor,\n nodeGreenBoxShadow,\n nodeTextColor,\n nodeWrapperBg,\n nodeLabelColor,\n nodeBlockBg,\n } = params;\n return {\n components: {\n MuiCssBaseline: {\n styleOverrides: `\n html {\n background: ${primaryBg};\n font-family: ${fontFamily};\n }\n body {\n background-color:${primaryBg};\n font-family: ${fontFamily};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${sidebarBg};\n box-shadow: ${sidebarShadow};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${canvasBg};\n }\n\n .primary-node {\n border: solid 0.0625rem ${nodeGreenBorderColor};\n border-radius: 50%;\n box-shadow: ${nodeGreenBoxShadow};\n background: ${nodeGreenBackgroundColor};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 1.25rem;\n height: 1.25rem;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer(\n nodeGreen\n ).toString('base64')});\n }\n\n .primary-node .primary-node_header p {\n color: ${nodeGreenTextColor};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${nodeTextColor};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${showPropertiesButtonBg};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${nodeButtonTextColor};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${fontFamily};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${showPropertiesButtonBg};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: \"\";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${nodeButtonLineColor};\n }\n\n .primary-node .node-button .icon {\n background: ${nodeGreenBackgroundColor};\n border-color: ${nodeGreenBorderColor}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${nodeBorderColor};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${nodePointerBg};\n border: 0.09375rem solid ${nodeBorderColor};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n .primary-node.rounded {\n border-radius: 0.875rem;\n padding: 0.5rem;\n width: 18rem;\n height: auto;\n }\n\n .primary-node.rounded .nodes {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\n .primary-node.rounded .primary-node_header {\n height: 4.25rem;\n margin-bottom: 0.25rem\n }\n\n .primary-node .block {\n padding: 0.625rem 0.5rem;\n background-color: ${nodeBlockBg};\n display: flex;\n align-items: center;\n }\n\n .primary-node .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0.625rem;\n }\n\n .primary-node .block:last-child {\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block:not(:last-child) {\n margin-bottom: 0.0625rem;\n }\n\n .primary-node .block .disc {\n width: 1rem;\n height: 1rem;\n border: solid 0.0625rem ${nodeGreenTextColor};\n background: ${nodeGreenBackgroundColor}\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 0.5rem\n }\n\n .primary-node .block .disc:after {\n content: '';\n background: ${nodeGreenTextColor};\n width: 0.375rem;\n height: 0.375rem;\n border-radius: 50%;\n }\n\n .primary-node .block.reverse {\n justify-content: end;\n }\n\n .primary-node .block.reverse .disc {\n order: 2;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n\n .primary-node .block.reverse p {\n order: 1\n }\n\n .primary-node .block-wrapper {\n display: flex;\n gap: 0 0.0625rem;\n flex-wrap: wrap;\n }\n\n .primary-node .block-wrapper .block {\n flex-direction: column;\n align-items: flex-start;\n background: ${nodeWrapperBg};\n padding: 0.5rem;\n width: calc((100% - 0.125rem) / 3);\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root {\n margin-top: 0.25rem;\n word-break: break-all;\n font-weight: 600;\n font-family: 'Roboto Mono', monospace;\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root strong {\n font-family: 'Roboto Mono', monospace;\n font-weight: 600;\n }\n\n .primary-node .block-wrapper .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0\n }\n\n .primary-node .block-wrapper .block:nth-of-type(3) {\n border-top-right-radius: 0.625rem\n }\n\n .primary-node .block-wrapper .block:last-child {\n width: 100%;\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block-wrapper .block label {\n display: block;\n font-weight: 400;\n font-size: 0.625rem;\n line-height: 0.625rem;\n letter-spacing: -0.005rem;\n color: ${nodeLabelColor};\n text-transform: uppercase;\n }\n\n .primary-node .seprator {\n width: 0.125rem;\n height: 1rem;\n border-radius: 1.25rem;\n margin: 0.25rem auto;\n background: ${nodeGreenBorderColor};\n }\n `,\n },\n MuiList: {\n styleOverrides: {\n root: {\n '&.customSwitch': {\n padding: '0.125rem',\n background: chipTextColor,\n borderRadius: '0.5rem',\n display: 'flex',\n '& .MuiListItemButton-root': {\n padding: '0.25rem 0.75rem',\n borderRadius: '0.4375rem',\n width: '10.59375rem',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n '&:not(:last-child)': {\n marginBottom: '0',\n },\n '&.Mui-disabled': {\n opacity: 1,\n },\n '&.Mui-selected': {\n background: textWhite,\n boxShadow: listBoxShadow,\n border: `0.03125rem solid ${listBorderColor}`,\n '& .MuiTypography-root': {\n color: listSelectedTextColor,\n },\n },\n },\n '& .MuiChip-root': {\n marginLeft: '0.25rem',\n },\n '& .MuiTypography-root': {\n fontWeight: 500,\n fontSize: '0.8125rem',\n lineHeight: '1.25rem',\n letterSpacing: '-0.005rem',\n color: chipBgColor,\n margin: 0,\n },\n },\n },\n },\n },\n MuiListItemIcon: {\n styleOverrides: {\n root: {\n minWidth: 'inherit',\n },\n },\n },\n MuiListItemButton: {\n styleOverrides: {\n root: {\n padding: 0,\n width: '2.5rem',\n height: '2.5rem',\n borderRadius: '50%',\n justifyContent: 'center',\n backgroundColor: chipTextColor,\n '&:hover': {\n backgroundColor: chipTextColor,\n },\n '&:not(:last-child)': {\n marginBottom: '0.75rem',\n },\n '&.Mui-selected': {\n backgroundColor: listItemActiveBg,\n '&:hover': {\n backgroundColor: listItemActiveBg,\n },\n },\n '&.Mui-disabled': {\n opacity: 0.8,\n },\n },\n },\n },\n },\n };\n};\n\nexport default (customVariables: ThemeVars) =>\n applicationTheme({\n ...vars,\n ...customVariables,\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 * 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 '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n container: {\n height: '100%',\n width: '100%',\n },\n canvasContainer: {\n height: '100%',\n width: '100%',\n background: '#fffff',\n },\n}));\n\ninterface MetaDiagramProps {\n metaNodes: MetaNode[];\n metaLinks: MetaLink[];\n componentsMap: ComponentsMap;\n wrapperClassName?: string;\n canvasClassName?: string;\n metaTheme: {\n customThemeVariables: {};\n canvasClassName: string;\n };\n}\n\nconst MetaDiagram = ({\n metaNodes,\n metaLinks,\n componentsMap,\n wrapperClassName,\n metaTheme,\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 = metaNodes.map(\n mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n );\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\n return (\n \n \n \n \n \n \n \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","variant","options","set","getId","get","getShape","MetaNode","position","undefined","Map","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","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getNode","find","n","getLinkModel","metaLink","link","Object","fromEntries","source","target","setSourcePort","getPort","setTargetPort","nodeGreen","nodeGreenBackgroundColor","nodeGreenTextColor","nodeGreenBorderColor","nodeGreenBoxShadow","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","sidebarBg","sidebarShadow","canvasBg","showPropertiesButtonBg","nodeBorderColor","nodePointerBg","nodeButtonTextColor","nodeButtonLineColor","nodeTextColor","nodeWrapperBg","nodeLabelColor","nodeBlockBg","useStyles","makeStyles","node","margin","borderColor","width","border","borderTop","display","Sidebar","classes","setSelected","useState","svgImg","img","Buffer","toString","SidebarItem","props","image","selectedImage","selection","ListItemButton","onClick","ListItemIcon","src","alt","Box","className","List","disablePadding","component","CursorActive","Cursor","MoveActive","Move","Divider","Node","IconActive","Icon","FullscreenActive","Fullscreen","applicationTheme","params","components","MuiCssBaseline","styleOverrides","MuiList","root","padding","background","borderRadius","alignItems","justifyContent","marginBottom","opacity","boxShadow","color","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","height","backgroundColor","customVariables","Position","x","y","_","container","canvasContainer","MetaDiagram","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","ml","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customThemeVariables","CssBaseline","CanvasWidget","canvasClassName"],"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/theme.ts","../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;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n variant: string,\n options: Map\n ) {\n this.options = options;\n this.options.set('id', id);\n this.options.set('name', name);\n this.options.set('shape', shape);\n this.options.set('variant', variant);\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 children: MetaNode[];\n options: MetaOptions;\n\n constructor(\n id: string,\n name: string,\n shape: string,\n position: Position,\n variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\n }\n this.children = [];\n options.set('position', position);\n this.options = new MetaOptions(id, name, shape, variant, 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 variant: string,\n options: Map\n ) {\n if (options === undefined) {\n options = new Map();\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, variant, 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;\n links: Map;\n\n constructor(\n nodesMap: Map,\n linksMap: Map\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
Unknown Type
;\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;\n\n constructor(componentsMap: Map) {\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 return (\n // @ts-ignore\n \n );\n }\n // TODO: Generate default node instead\n return ;\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;\n\n constructor(componentsMap: Map) {\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 \n );\n }\n // TODO: Generate default link instead\n return ;\n }\n}\n","import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';\n\nexport function getNode(\n id: string,\n nodes: MetaNodeModel[]\n): MetaNodeModel | undefined {\n return nodes.find(n => n.getOptions().id === id);\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","const nodeGreen = {\n nodeGreenBackgroundColor: '#D4F4D4',\n nodeGreenTextColor: '#669D66',\n nodeGreenBorderColor: 'rgba(102, 157, 102, 0.2)',\n nodeGreenBoxShadow: '0 0.25rem 0.625rem -0.25rem rgba(102, 157, 102, 0.3)',\n};\n\nconst 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 sidebarBg: '#ffffff',\n sidebarShadow: `0 0 3.75rem rgba(0, 0, 0, 0.1),\n 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)`,\n canvasBg: '#fff',\n showPropertiesButtonBg: '#161A1E',\n nodeBorderColor: '#18A0FB',\n nodePointerBg: '#fff',\n nodeButtonTextColor: 'rgba(255, 255, 255, 0.8)',\n nodeButtonLineColor: 'rgba(255, 255, 255, 0.2)',\n nodeTextColor: '#3C3C43',\n nodeWrapperBg: '#FFFFFF',\n nodeLabelColor: '#76787D',\n nodeBlockBg: 'rgba(255, 255, 255, 0.6)',\n ...nodeGreen,\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 MoveActive from './assets/svg/move-active.svg';\nimport Icon from './assets/svg/icon.svg';\nimport IconActive from './assets/svg/icon-active.svg';\nimport Node from './assets/svg/node.svg';\nimport Cursor from './assets/svg/cursor.svg';\nimport CursorActive from './assets/svg/cursor-active.svg';\nimport Fullscreen from './assets/svg/fullscreen.svg';\nimport FullscreenActive from './assets/svg/fullscreen-active.svg';\n\nconst { dividerColor } = vars;\n\nconst useStyles = makeStyles(() => ({\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\ntype sidebarItemProps = {\n image: string;\n name: string;\n selectedImage: string;\n selection: string;\n};\n\nconst Sidebar = () => {\n const classes = useStyles();\n const [selected, setSelected] = React.useState('1');\n const svgImg = (img: string) =>\n `data:image/svg+xml;base64,${new Buffer(img).toString('base64')}`;\n const SidebarItem = (props: sidebarItemProps) => {\n const { image, name, selectedImage, selection } = props;\n return (\n setSelected(selection)}\n >\n \n {selected === selection ? (\n {name}\n ) : (\n {name}\n )}\n \n \n );\n };\n\n return (\n \n \n \n \n \n\n \n \n \"Node\"\n \n \n\n \n \n \n \n \n );\n};\n\nexport default Sidebar;\n","import vars from './components/assets/styles/variables';\nimport nodeGreen from './components/assets/svg/node/green.svg';\n\ntype ThemeVars = {\n [key: string]: any;\n};\n\nconst applicationTheme = (params: ThemeVars) => {\n const {\n primaryBg,\n fontFamily,\n chipTextColor,\n chipBgColor,\n textWhite,\n listItemActiveBg,\n listSelectedTextColor,\n listBoxShadow,\n listBorderColor,\n sidebarBg,\n sidebarShadow,\n canvasBg,\n showPropertiesButtonBg,\n nodeBorderColor,\n nodePointerBg,\n nodeButtonTextColor,\n nodeButtonLineColor,\n nodeGreenBackgroundColor,\n nodeGreenTextColor,\n nodeGreenBorderColor,\n nodeGreenBoxShadow,\n nodeTextColor,\n nodeWrapperBg,\n nodeLabelColor,\n nodeBlockBg,\n } = params;\n return {\n components: {\n MuiCssBaseline: {\n styleOverrides: `\n html {\n background: ${primaryBg};\n font-family: ${fontFamily};\n }\n body {\n background-color:${primaryBg};\n font-family: ${fontFamily};\n font-size: 1rem;\n }\n .sidebar {\n z-index: 5;\n width: 4rem;\n background: ${sidebarBg};\n box-shadow: ${sidebarShadow};\n border-radius: 2rem;\n position: fixed;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .sidebar.right {\n left: auto;\n right: 1rem;\n }\n\n .sidebar .MuiList-root {\n padding: 0.75rem\n }\n\n .canvas-widget {\n height: 100%;\n width: 100%;\n background-color: ${canvasBg};\n }\n\n .primary-node {\n border: solid 0.0625rem ${nodeGreenBorderColor};\n border-radius: 50%;\n box-shadow: ${nodeGreenBoxShadow};\n background: ${nodeGreenBackgroundColor};\n position: relative;\n width: 10rem;\n height: 10rem;\n }\n\n .primary-node .primary-node_header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n flex-direction: column;\n }\n\n .primary-node .icon {\n width: 1.25rem;\n height: 1.25rem;\n margin: 0 auto 0.25rem;\n background: url(data:image/svg+xml;base64,${new Buffer(\n nodeGreen\n ).toString('base64')});\n }\n\n .primary-node .primary-node_header p {\n color: ${nodeGreenTextColor};\n }\n\n .primary-node p {\n font-weight: 500;\n color: ${nodeTextColor};\n font-size: 0.8125rem;\n line-height: 1.25rem;\n letter-spacing: -0.005rem;\n margin: 0;\n }\n\n .node-button.MuiButton-root {\n background-color: ${showPropertiesButtonBg};\n border-radius: 1.125rem;\n font-weight: 600;\n font-size: 0.8125rem;\n display: flex;\n line-height: 1rem;\n letter-spacing: -0.025625rem;\n color: ${nodeButtonTextColor};\n margin: 0 !important;\n width: 9.625rem;\n padding: 0;\n height: 2.25rem;\n position: absolute;\n top: -2.625rem;\n font-family: ${fontFamily};\n text-transform: none;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .node-button.MuiButton-root:hover {\n background-color: ${showPropertiesButtonBg};\n }\n\n .node-button .icon {\n width: 1rem;\n border: solid 0.0625rem;\n height: 1rem;\n border-radius: 50%;\n margin: 0 1.25rem 0 0;\n position: relative;\n }\n\n .node-button .icon:after {\n content: \"\";\n height: 1.75rem;\n width: 0.0625rem;\n display: block;\n position: absolute;\n right: -0.625rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: ${nodeButtonLineColor};\n }\n\n .primary-node .node-button .icon {\n background: ${nodeGreenBackgroundColor};\n border-color: ${nodeGreenBorderColor}\n }\n\n .nodes {\n width: 10rem;\n height: 10rem;\n border: 0.09375rem solid ${nodeBorderColor};\n z-index: 99999;\n position: absolute;\n }\n\n .node .pointer {\n width: 0.625rem;\n height: 0.625rem;\n background: ${nodePointerBg};\n border: 0.09375rem solid ${nodeBorderColor};\n border-radius: 0.125rem;\n position: absolute;\n }\n\n .primary-node.rounded {\n border-radius: 0.875rem;\n padding: 0.5rem;\n width: 18rem;\n height: auto;\n }\n\n .primary-node.rounded .nodes {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\n .primary-node.rounded .primary-node_header {\n height: 4.25rem;\n margin-bottom: 0.25rem\n }\n\n .primary-node .block {\n padding: 0.625rem 0.5rem;\n background-color: ${nodeBlockBg};\n display: flex;\n align-items: center;\n }\n\n .primary-node .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0.625rem;\n }\n\n .primary-node .block:last-child {\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block:not(:last-child) {\n margin-bottom: 0.0625rem;\n }\n\n .primary-node .block .disc {\n width: 1rem;\n height: 1rem;\n border: solid 0.0625rem ${nodeGreenTextColor};\n background: ${nodeGreenBackgroundColor};\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 0.5rem\n }\n\n .primary-node .block .disc:after {\n content: '';\n background: ${nodeGreenTextColor};\n width: 0.375rem;\n height: 0.375rem;\n border-radius: 50%;\n }\n\n .primary-node .block.reverse {\n justify-content: end;\n }\n\n .primary-node .block.reverse .disc {\n order: 2;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n\n .primary-node .block.reverse p {\n order: 1\n }\n\n .primary-node .block-wrapper {\n display: flex;\n gap: 0 0.0625rem;\n flex-wrap: wrap;\n }\n\n .primary-node .block-wrapper .block {\n flex-direction: column;\n align-items: flex-start;\n background: ${nodeWrapperBg};\n padding: 0.5rem;\n width: calc((100% - 0.125rem) / 3);\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root {\n margin-top: 0.25rem;\n word-break: break-all;\n font-weight: 600;\n font-family: 'Roboto Mono', monospace;\n }\n\n .primary-node .block-wrapper .block .function.MuiTypography-root strong {\n font-family: 'Roboto Mono', monospace;\n font-weight: 600;\n }\n\n .primary-node .block-wrapper .block:first-of-type {\n border-top-left-radius: 0.625rem;\n border-top-right-radius: 0\n }\n\n .primary-node .block-wrapper .block:nth-of-type(3) {\n border-top-right-radius: 0.625rem\n }\n\n .primary-node .block-wrapper .block:last-child {\n width: 100%;\n border-bottom-left-radius: 0.625rem;\n border-bottom-right-radius: 0.625rem;\n }\n\n .primary-node .block-wrapper .block label {\n display: block;\n font-weight: 400;\n font-size: 0.625rem;\n line-height: 0.625rem;\n letter-spacing: -0.005rem;\n color: ${nodeLabelColor};\n text-transform: uppercase;\n }\n\n .primary-node .seprator {\n width: 0.125rem;\n height: 1rem;\n border-radius: 1.25rem;\n margin: 0.25rem auto;\n background: ${nodeGreenBorderColor};\n }\n `,\n },\n MuiList: {\n styleOverrides: {\n root: {\n '&.customSwitch': {\n padding: '0.125rem',\n background: chipTextColor,\n borderRadius: '0.5rem',\n display: 'flex',\n '& .MuiListItemButton-root': {\n padding: '0.25rem 0.75rem',\n borderRadius: '0.4375rem',\n width: '10.59375rem',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n '&:not(:last-child)': {\n marginBottom: '0',\n },\n '&.Mui-disabled': {\n opacity: 1,\n },\n '&.Mui-selected': {\n background: textWhite,\n boxShadow: listBoxShadow,\n border: `0.03125rem solid ${listBorderColor}`,\n '& .MuiTypography-root': {\n color: listSelectedTextColor,\n },\n },\n },\n '& .MuiChip-root': {\n marginLeft: '0.25rem',\n },\n '& .MuiTypography-root': {\n fontWeight: 500,\n fontSize: '0.8125rem',\n lineHeight: '1.25rem',\n letterSpacing: '-0.005rem',\n color: chipBgColor,\n margin: 0,\n },\n },\n },\n },\n },\n MuiListItemIcon: {\n styleOverrides: {\n root: {\n minWidth: 'inherit',\n },\n },\n },\n MuiListItemButton: {\n styleOverrides: {\n root: {\n padding: 0,\n width: '2.5rem',\n height: '2.5rem',\n borderRadius: '50%',\n justifyContent: 'center',\n backgroundColor: chipTextColor,\n '&:hover': {\n backgroundColor: chipTextColor,\n },\n '&:not(:last-child)': {\n marginBottom: '0.75rem',\n },\n '&.Mui-selected': {\n backgroundColor: listItemActiveBg,\n '&:hover': {\n backgroundColor: listItemActiveBg,\n },\n },\n '&.Mui-disabled': {\n opacity: 0.8,\n },\n },\n },\n },\n },\n };\n};\n\nexport default (customVariables: ThemeVars) =>\n applicationTheme({\n ...vars,\n ...customVariables,\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 * 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 '@mui/styles';\nimport Sidebar from './components/Sidebar';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport theme from './theme';\nimport { Box } from '@mui/material';\n\nconst useStyles = makeStyles(_ => ({\n container: {\n height: '100%',\n width: '100%',\n },\n canvasContainer: {\n height: '100%',\n width: '100%',\n background: '#fffff',\n },\n}));\n\ninterface MetaDiagramProps {\n metaNodes: MetaNode[];\n metaLinks: MetaLink[];\n componentsMap: ComponentsMap;\n wrapperClassName?: string;\n canvasClassName?: string;\n metaTheme: {\n customThemeVariables: {};\n canvasClassName: string;\n };\n}\n\nconst MetaDiagram = ({\n metaNodes,\n metaLinks,\n componentsMap,\n wrapperClassName,\n metaTheme,\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 = metaNodes.map(\n mn => new MetaNodeModel(Object.fromEntries(mn.options.options))\n );\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\n return (\n \n \n \n \n \n \n \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","variant","options","set","getId","get","getShape","MetaNode","position","undefined","Map","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","key","getOptions","engine","MetaLinkModel","DefaultLinkModel","META_LINK","MetaLinkFactory","DefaultLinkFactory","generateLinkSegment","selected","path","getNode","find","n","getLinkModel","metaLink","link","Object","fromEntries","source","target","setSourcePort","getPort","setTargetPort","nodeGreen","nodeGreenBackgroundColor","nodeGreenTextColor","nodeGreenBorderColor","nodeGreenBoxShadow","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","sidebarBg","sidebarShadow","canvasBg","showPropertiesButtonBg","nodeBorderColor","nodePointerBg","nodeButtonTextColor","nodeButtonLineColor","nodeTextColor","nodeWrapperBg","nodeLabelColor","nodeBlockBg","useStyles","makeStyles","node","margin","borderColor","width","border","borderTop","display","Sidebar","classes","setSelected","useState","svgImg","img","Buffer","toString","SidebarItem","props","image","selectedImage","selection","ListItemButton","onClick","ListItemIcon","src","alt","Box","className","List","disablePadding","component","CursorActive","Cursor","MoveActive","Move","Divider","Node","IconActive","Icon","FullscreenActive","Fullscreen","applicationTheme","params","components","MuiCssBaseline","styleOverrides","MuiList","root","padding","background","borderRadius","alignItems","justifyContent","marginBottom","opacity","boxShadow","color","marginLeft","fontWeight","fontSize","lineHeight","letterSpacing","MuiListItemIcon","minWidth","MuiListItemButton","height","backgroundColor","customVariables","Position","x","y","_","container","canvasContainer","MetaDiagram","metaNodes","metaLinks","wrapperClassName","metaTheme","createEngine","getNodeFactories","registerFactory","getLinkFactories","DiagramModel","map","mn","ml","filter","mlm","addAll","setModel","containerClassName","ThemeProvider","theme","createTheme","customThemeVariables","CssBaseline","CanvasWidget","canvasClassName"],"mappings":"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"} \ No newline at end of file diff --git a/example/components/widgets/CustomNodeExpandedWidget.tsx b/example/components/widgets/ExpandedCustomNodeWidget.tsx similarity index 84% rename from example/components/widgets/CustomNodeExpandedWidget.tsx rename to example/components/widgets/ExpandedCustomNodeWidget.tsx index 66b47a9..244d45b 100644 --- a/example/components/widgets/CustomNodeExpandedWidget.tsx +++ b/example/components/widgets/ExpandedCustomNodeWidget.tsx @@ -6,22 +6,24 @@ import {Box, Typography} from "@mui/material"; import NodeSelection from "./NodeSelection"; import InputOutputNode from "./InputOutputNode"; -export interface CustomNodeWidgetProps { +const styles = { + root: { + textColor: { + color: '#4579EE', + }, + codeColor: { + color: '#ED745D' + } + } +}; + +export interface ExpandedCustomNodeWidgetProps { model: MetaNodeModel; engine: DiagramEngine; classes: any; } -const styles = () => ({ - textColor: { - color: '#4579EE', - }, - codeColor: { - color: '#ED745D' - } -}); - -export class CustomNodeWidget extends React.Component { +export class ExpandedCustomNodeWidget extends React.Component { render() { const { classes } = this.props; const functionValues = (label: string, value: string) => ( @@ -64,9 +66,9 @@ export class CustomNodeWidget extends React.Component { Function - + function - =pnl.Logistic(gain=1.0, bias=-4) + =pnl.Logistic(gain=1.0, bias=-4) @@ -82,4 +84,4 @@ export class CustomNodeWidget extends React.Component { } // @ts-ignore -export default withStyles(styles)(CustomNodeWidget); +export default withStyles(styles)(ExpandedCustomNodeWidget); diff --git a/example/index.tsx b/example/index.tsx index 1a3115f..bfc61ee 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -2,7 +2,7 @@ import 'react-app-polyfill/ie11'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import MetaDiagram, {MetaNode, Position, ComponentsMap, MetaLink} from "./.."; -import {CustomNodeWidget} from "./components/widgets/CustomNodeWidget"; +import {ExpandedCustomNodeWidget} from "./components/widgets/ExpandedCustomNodeWidget"; import { makeStyles } from "@mui/styles"; import CustomLinkWidget from "./components/widgets/CustomLinkWidget"; import BG from "./components/assets/svg/bg-dotted.svg"; @@ -26,13 +26,13 @@ const App = () => { const node1 = new MetaNode('1', 'Node 1', 'default', new Position(250, 100), 'node-red', undefined) - const node2 = new MetaNode('2', 'Node 2', 'default', new Position(500, 100), 'node-blue', undefined) + // const node2 = new MetaNode('2', 'Node 2', 'default', new Position(500, 100), 'node-blue', undefined) const link3 = new MetaLink('3', 'link3', 'default', '1', 'out', '2', 'in', undefined, new Map(Object.entries({color: 'rgb(255,192,0)'}))) const componentsMap = new ComponentsMap( - new Map(Object.entries({'default': CustomNodeWidget})), + new Map(Object.entries({'default': ExpandedCustomNodeWidget})), new Map(Object.entries({'default': CustomLinkWidget})) ) @@ -40,7 +40,7 @@ const App = () => {
- { width: 1rem; height: 1rem; border: solid 0.0625rem ${nodeGreenTextColor}; - background: ${nodeGreenBackgroundColor} + background: ${nodeGreenBackgroundColor}; border-radius: 50%; display: flex; align-items: center; From 858a7ebd4bcf078224e06d53894871eb26486a0f Mon Sep 17 00:00:00 2001 From: vidhya-metacell Date: Tue, 9 Aug 2022 16:00:51 +0200 Subject: [PATCH 4/4] #26 Remove hardcode colors from the component --- example/components/assets/styles/variables.ts | 2 ++ example/components/widgets/ExpandedCustomNodeWidget.tsx | 5 +++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/example/components/assets/styles/variables.ts b/example/components/assets/styles/variables.ts index 26b859e..dbb3a87 100644 --- a/example/components/assets/styles/variables.ts +++ b/example/components/assets/styles/variables.ts @@ -23,6 +23,8 @@ const vars = { ...nodeRed, ...nodeBlue, ...nodeGray, + functionTextColor: '#4579EE', + functionCodeColor: '#ED745D', }; export default vars; diff --git a/example/components/widgets/ExpandedCustomNodeWidget.tsx b/example/components/widgets/ExpandedCustomNodeWidget.tsx index 244d45b..cfde1cd 100644 --- a/example/components/widgets/ExpandedCustomNodeWidget.tsx +++ b/example/components/widgets/ExpandedCustomNodeWidget.tsx @@ -5,14 +5,15 @@ import {MetaNodeModel} from "../../../dist"; import {Box, Typography} from "@mui/material"; import NodeSelection from "./NodeSelection"; import InputOutputNode from "./InputOutputNode"; +import vars from "../assets/styles/variables"; const styles = { root: { textColor: { - color: '#4579EE', + color: vars.functionTextColor }, codeColor: { - color: '#ED745D' + color: vars.functionCodeColor } } };