@openchoreo/cell-diagram 1.2.0-rc.1

package/dist/components/Cell/CellNode/CellWidget.esm.js

@@ -0,0 +1,166 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext, useState, useEffect } from 'react';
+import { PortModelAlignment } from '@projectstorm/react-diagrams';
+import { CellBounds } from './CellModel.esm.js';
+import { CellNode, TopPortCircle, TopIconWrapper, LeftPortCircle, IconWrapper, RightPortsWrapper, DotWrapper, Dot, BottomPortsWrapper } from './styles.esm.js';
+import { CellPortWidget } from '../CellPort/CellPortWidget.esm.js';
+import { getCellPortId, getRoundedOctagonSVG } from '../cell-util.esm.js';
+import { CELL_LINE_PREVIEW_WIDTH, CELL_LINE_MIN_WIDTH, ICON_SCALE, MAIN_CELL } from '../../../resources/constants.esm.js';
+import { GatewayIcon } from '../../../resources/assets/icons/GatewayIcon.esm.js';
+import { DiagramContext } from '../../DiagramContext/DiagramContext.esm.js';
+
+const generateRoundedOctagonSVG = (diagramHeight, radiusMultiplier) => {
+  const sideLength = diagramHeight * 4.14 / 10;
+  const { width, height, path } = getRoundedOctagonSVG(
+    sideLength,
+    sideLength * radiusMultiplier
+  );
+  return /* @__PURE__ */ jsx("svg", { width, height, id: MAIN_CELL, children: /* @__PURE__ */ jsx("g", { transform: `rotate(${45 / 2}, ${width / 2}, ${height / 2})`, children: /* @__PURE__ */ jsx("path", { d: path }) }) });
+};
+function CellWidget(props) {
+  const { node, engine } = props;
+  const { zoomLevel, previewMode } = useContext(DiagramContext);
+  const [cellHeight, setCellHeight] = useState(node.width);
+  useEffect(() => {
+    resizeCellHeight();
+  }, [node]);
+  useEffect(() => {
+    resizeCellHeight();
+  }, [node.width]);
+  const resizeCellHeight = () => {
+    const conCount = node.connectorNodes?.length || 0;
+    const connectorRowWidth = (conCount * 100 + 40) * 100 / 40;
+    setCellHeight(Math.max(connectorRowWidth, node.width));
+    engine.repaintCanvas();
+  };
+  const strokeWidth = previewMode ? Math.max(cellHeight / 200, CELL_LINE_PREVIEW_WIDTH) : node.getDynamicLineWidth(zoomLevel, CELL_LINE_MIN_WIDTH);
+  const transform = previewMode ? `scale(${ICON_SCALE.PREVIEW})` : "none";
+  return /* @__PURE__ */ jsxs(CellNode, { height: cellHeight, borderWidth: strokeWidth, children: [
+    generateRoundedOctagonSVG(cellHeight, 0.08),
+    /* @__PURE__ */ jsxs(TopPortCircle, { show: Boolean(node.gateways?.internet), children: [
+      /* @__PURE__ */ jsx(TopIconWrapper, { children: /* @__PURE__ */ jsx(GatewayIcon, { styles: { transform } }) }),
+      /* @__PURE__ */ jsx(
+        CellPortWidget,
+        {
+          port: node.getPort(
+            getCellPortId(
+              node.getID(),
+              CellBounds.NorthBound,
+              PortModelAlignment.TOP
+            )
+          ),
+          engine
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CellPortWidget,
+        {
+          port: node.getPort(
+            getCellPortId(
+              node.getID(),
+              CellBounds.NorthBound,
+              PortModelAlignment.BOTTOM
+            )
+          ),
+          engine
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(LeftPortCircle, { show: Boolean(node.gateways?.intranet), children: [
+      /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(GatewayIcon, { styles: { transform } }) }),
+      /* @__PURE__ */ jsx(
+        CellPortWidget,
+        {
+          port: node.getPort(
+            getCellPortId(
+              node.getID(),
+              CellBounds.WestBound,
+              PortModelAlignment.LEFT
+            )
+          ),
+          engine
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CellPortWidget,
+        {
+          port: node.getPort(
+            getCellPortId(
+              node.getID(),
+              CellBounds.WestBound,
+              PortModelAlignment.RIGHT
+            )
+          ),
+          engine
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(RightPortsWrapper, { children: node.connectionNodes?.map((connectionNode) => {
+      return /* @__PURE__ */ jsx(DotWrapper, { children: /* @__PURE__ */ jsxs(Dot, { children: [
+        /* @__PURE__ */ jsx(
+          CellPortWidget,
+          {
+            port: node.getPort(
+              getCellPortId(
+                node.getID(),
+                CellBounds.EastBound,
+                PortModelAlignment.LEFT,
+                connectionNode.connection.id
+              )
+            ),
+            engine
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CellPortWidget,
+          {
+            port: node.getPort(
+              getCellPortId(
+                node.getID(),
+                CellBounds.EastBound,
+                PortModelAlignment.RIGHT,
+                connectionNode.connection.id
+              )
+            ),
+            engine
+          }
+        )
+      ] }) }, connectionNode.getID());
+    }) }),
+    /* @__PURE__ */ jsx(BottomPortsWrapper, { children: node.connectorNodes?.map((connectorNode) => {
+      return /* @__PURE__ */ jsx(DotWrapper, { children: /* @__PURE__ */ jsxs(Dot, { children: [
+        /* @__PURE__ */ jsx(
+          CellPortWidget,
+          {
+            port: node.getPort(
+              getCellPortId(
+                node.getID(),
+                CellBounds.SouthBound,
+                PortModelAlignment.TOP,
+                connectorNode.connection.id
+              )
+            ),
+            engine
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CellPortWidget,
+          {
+            port: node.getPort(
+              getCellPortId(
+                node.getID(),
+                CellBounds.SouthBound,
+                PortModelAlignment.BOTTOM,
+                connectorNode.connection.id
+              )
+            ),
+            engine
+          }
+        )
+      ] }) }, connectorNode.getID());
+    }) })
+  ] });
+}
+
+export { CellWidget, generateRoundedOctagonSVG };
+//# sourceMappingURL=CellWidget.esm.js.map

package/dist/components/Cell/CellNode/CellWidget.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellWidget.esm.js","sources":["../../../../src/components/Cell/CellNode/CellWidget.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from 'react';\nimport {\n  DiagramEngine,\n  PortModelAlignment,\n} from '@projectstorm/react-diagrams';\nimport { CellBounds, CellModel } from './CellModel';\nimport {\n  CellNode,\n  TopPortCircle,\n  LeftPortCircle,\n  BottomPortsWrapper,\n  DotWrapper,\n  Dot,\n  IconWrapper,\n  TopIconWrapper,\n  RightPortsWrapper,\n} from './styles';\nimport { CellPortWidget } from '../CellPort/CellPortWidget';\nimport { CellPortModel } from '../CellPort/CellPortModel';\nimport { getCellPortId, getRoundedOctagonSVG } from '../cell-util';\nimport {\n  CELL_LINE_MIN_WIDTH,\n  CELL_LINE_PREVIEW_WIDTH,\n  ICON_SCALE,\n  MAIN_CELL,\n} from '../../../resources';\nimport { GatewayIcon } from '../../../resources/assets/icons/GatewayIcon';\nimport { DiagramContext } from '../../DiagramContext/DiagramContext';\n\nexport const generateRoundedOctagonSVG = (\n  diagramHeight: number,\n  radiusMultiplier: number,\n) => {\n  const sideLength = (diagramHeight * 4.14) / 10;\n  const { width, height, path } = getRoundedOctagonSVG(\n    sideLength,\n    sideLength * radiusMultiplier,\n  );\n  return (\n    <svg width={width} height={height} id={MAIN_CELL}>\n      <g transform={`rotate(${45 / 2}, ${width / 2}, ${height / 2})`}>\n        <path d={path} />\n      </g>\n    </svg>\n  );\n};\n\ninterface CellWidgetProps {\n  node: CellModel;\n  engine: DiagramEngine;\n}\n\nexport function CellWidget(props: CellWidgetProps) {\n  const { node, engine } = props;\n\n  const { zoomLevel, previewMode } = useContext(DiagramContext);\n  const [cellHeight, setCellHeight] = useState<number>(node.width);\n\n  useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    resizeCellHeight();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [node]);\n\n  useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    resizeCellHeight();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [node.width]);\n\n  const resizeCellHeight = () => {\n    const conCount = node.connectorNodes?.length || 0;\n    const connectorRowWidth = ((conCount * 100 + 40) * 100) / 40;\n    setCellHeight(Math.max(connectorRowWidth, node.width));\n    engine.repaintCanvas();\n  };\n\n  const strokeWidth = previewMode\n    ? Math.max(cellHeight / 200, CELL_LINE_PREVIEW_WIDTH)\n    : node.getDynamicLineWidth(zoomLevel, CELL_LINE_MIN_WIDTH);\n\n  const transform = previewMode ? `scale(${ICON_SCALE.PREVIEW})` : 'none';\n\n  return (\n    <CellNode height={cellHeight} borderWidth={strokeWidth}>\n      {generateRoundedOctagonSVG(cellHeight, 0.08)}\n\n      <TopPortCircle show={Boolean(node.gateways?.internet)}>\n        <TopIconWrapper>\n          <GatewayIcon styles={{ transform }} />\n        </TopIconWrapper>\n        <CellPortWidget\n          port={\n            node.getPort(\n              getCellPortId(\n                node.getID(),\n                CellBounds.NorthBound,\n                PortModelAlignment.TOP,\n              ),\n            ) as CellPortModel\n          }\n          engine={engine}\n        />\n        <CellPortWidget\n          port={\n            node.getPort(\n              getCellPortId(\n                node.getID(),\n                CellBounds.NorthBound,\n                PortModelAlignment.BOTTOM,\n              ),\n            ) as CellPortModel\n          }\n          engine={engine}\n        />\n      </TopPortCircle>\n\n      <LeftPortCircle show={Boolean(node.gateways?.intranet)}>\n        <IconWrapper>\n          <GatewayIcon styles={{ transform }} />\n        </IconWrapper>\n        <CellPortWidget\n          port={\n            node.getPort(\n              getCellPortId(\n                node.getID(),\n                CellBounds.WestBound,\n                PortModelAlignment.LEFT,\n              ),\n            ) as CellPortModel\n          }\n          engine={engine}\n        />\n        <CellPortWidget\n          port={\n            node.getPort(\n              getCellPortId(\n                node.getID(),\n                CellBounds.WestBound,\n                PortModelAlignment.RIGHT,\n              ),\n            ) as CellPortModel\n          }\n          engine={engine}\n        />\n      </LeftPortCircle>\n\n      <RightPortsWrapper>\n        {node.connectionNodes?.map(connectionNode => {\n          return (\n            <DotWrapper key={connectionNode.getID()}>\n              <Dot>\n                <CellPortWidget\n                  port={\n                    node.getPort(\n                      getCellPortId(\n                        node.getID(),\n                        CellBounds.EastBound,\n                        PortModelAlignment.LEFT,\n                        connectionNode.connection.id,\n                      ),\n                    ) as CellPortModel\n                  }\n                  engine={engine}\n                />\n                <CellPortWidget\n                  port={\n                    node.getPort(\n                      getCellPortId(\n                        node.getID(),\n                        CellBounds.EastBound,\n                        PortModelAlignment.RIGHT,\n                        connectionNode.connection.id,\n                      ),\n                    ) as CellPortModel\n                  }\n                  engine={engine}\n                />\n              </Dot>\n            </DotWrapper>\n          );\n        })}\n      </RightPortsWrapper>\n      <BottomPortsWrapper>\n        {node.connectorNodes?.map(connectorNode => {\n          return (\n            <DotWrapper key={connectorNode.getID()}>\n              <Dot>\n                <CellPortWidget\n                  port={\n                    node.getPort(\n                      getCellPortId(\n                        node.getID(),\n                        CellBounds.SouthBound,\n                        PortModelAlignment.TOP,\n                        connectorNode.connection.id,\n                      ),\n                    ) as CellPortModel\n                  }\n                  engine={engine}\n                />\n                <CellPortWidget\n                  port={\n                    node.getPort(\n                      getCellPortId(\n                        node.getID(),\n                        CellBounds.SouthBound,\n                        PortModelAlignment.BOTTOM,\n                        connectorNode.connection.id,\n                      ),\n                    ) as CellPortModel\n                  }\n                  engine={engine}\n                />\n              </Dot>\n            </DotWrapper>\n          );\n        })}\n      </BottomPortsWrapper>\n    </CellNode>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Cell/CellNode/styles.esm.js

@@ -0,0 +1,149 @@
+import styled from '@emotion/styled';
+import { CIRCLE_WIDTH, CELL_LINE_MIN_WIDTH, DOT_WIDTH } from '../../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+
+const CellNode = styled.div`
+  width: ${(props) => props.height}px;
+  height: ${(props) => props.height}px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  text-align: center;
+  position: relative;
+  overflow: visible;
+  pointer-events: none;
+
+  #mainCell svg {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+  }
+
+  #mainCell path {
+    stroke: ${({ theme }) => theme.colors.OUTLINE};
+    stroke-width: ${(props) => props.borderWidth};
+    fill: none;
+    pointer-events: none;
+  }
+`;
+const Circle = styled.div`
+  visibility: ${(props) => props.show ? "unset" : "hidden"};
+  width: ${CIRCLE_WIDTH}px;
+  height: ${CIRCLE_WIDTH}px;
+  border-radius: 50%;
+  border: ${CELL_LINE_MIN_WIDTH}px solid ${({ theme }) => theme.colors.OUTLINE};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ theme }) => theme.colors.SURFACE};
+`;
+const Dot = styled.div`
+  width: ${DOT_WIDTH}px;
+  height: ${DOT_WIDTH}px;
+  border-radius: 50%;
+  border: ${CELL_LINE_MIN_WIDTH}px solid ${({ theme }) => theme.colors.OUTLINE};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ theme }) => theme.colors.SURFACE_DIM};
+`;
+const TopPortCircle = styled(Circle)`
+  position: absolute;
+  top: -${CIRCLE_WIDTH / 2}px;
+  left: 50% - ${CIRCLE_WIDTH / 2}px;
+`;
+const LeftPortCircle = styled(Circle)`
+  position: absolute;
+  top: 50% - ${CIRCLE_WIDTH / 2}px;
+  left: -${CIRCLE_WIDTH / 2}px;
+`;
+styled(Dot)`
+  position: absolute;
+  top: 50% - ${DOT_WIDTH / 2 + CELL_LINE_MIN_WIDTH}px;
+  right: -${DOT_WIDTH / 2 + CELL_LINE_MIN_WIDTH}px;
+`;
+const BottomPortsWrapper = styled.div`
+  position: absolute;
+  bottom: -${DOT_WIDTH / 2 + CELL_LINE_MIN_WIDTH}px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: ${CIRCLE_WIDTH}px;
+`;
+const RightPortsWrapper = styled.div`
+  position: absolute;
+  right: -${DOT_WIDTH / 2 + CELL_LINE_MIN_WIDTH}px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${CIRCLE_WIDTH}px;
+`;
+const DotWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+styled.div`
+  margin-top: 10px;
+`;
+const PortLabel = styled.div`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  font-family: 'GilmerMedium';
+  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};
+  font-size: 20px;
+  span {
+    text-align: left;
+    width: max-content;
+  }
+`;
+styled(PortLabel)`
+  top: -24px;
+  right: -116px;
+`;
+styled(PortLabel)`
+  top: -24px;
+  left: -116px;
+  align-items: flex-end;
+  span {
+    text-align: right;
+  }
+`;
+styled(PortLabel)`
+  top: -32px;
+  right: -116px;
+`;
+styled(PortLabel)`
+  bottom: -36px;
+  left: -132px;
+  align-items: flex-end;
+  span {
+    text-align: right;
+  }
+`;
+const IconWrapper = styled.div`
+  height: 32px;
+  width: 32px;
+  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};
+  font-size: 28px;
+`;
+const TopIconWrapper = styled.div`
+  height: 32px;
+  width: 32px;
+  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};
+  font-size: 28px;
+  transform: rotate(90deg);
+`;
+
+export { BottomPortsWrapper, CellNode, Circle, Dot, DotWrapper, IconWrapper, LeftPortCircle, PortLabel, RightPortsWrapper, TopIconWrapper, TopPortCircle };
+//# sourceMappingURL=styles.esm.js.map

package/dist/components/Cell/CellNode/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/components/Cell/CellNode/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  CIRCLE_WIDTH,\n  DOT_WIDTH,\n  CELL_LINE_MIN_WIDTH,\n} from '../../../resources';\n\ninterface StyleProps {\n  isSelected?: boolean;\n  isClickable?: boolean;\n  isCollapsed?: boolean;\n  isFocused?: boolean;\n  height?: number;\n  borderWidth: number;\n}\n\nexport const CellNode = styled.div<StyleProps>`\n  width: ${(props: StyleProps) => props.height}px;\n  height: ${(props: StyleProps) => props.height}px;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  text-align: center;\n  position: relative;\n  overflow: visible;\n  pointer-events: none;\n\n  #mainCell svg {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n  }\n\n  #mainCell path {\n    stroke: ${({ theme }) => theme.colors.OUTLINE};\n    stroke-width: ${(props: StyleProps) => props.borderWidth};\n    fill: none;\n    pointer-events: none;\n  }\n`;\n\ninterface ElementProps {\n  show: boolean;\n}\n\nexport const Circle = styled.div<ElementProps>`\n  visibility: ${(props: ElementProps) => (props.show ? 'unset' : 'hidden')};\n  width: ${CIRCLE_WIDTH}px;\n  height: ${CIRCLE_WIDTH}px;\n  border-radius: 50%;\n  border: ${CELL_LINE_MIN_WIDTH}px solid ${({ theme }) => theme.colors.OUTLINE};\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  background-color: ${({ theme }) => theme.colors.SURFACE};\n`;\n\nexport const Dot = styled.div<any>`\n  width: ${DOT_WIDTH}px;\n  height: ${DOT_WIDTH}px;\n  border-radius: 50%;\n  border: ${CELL_LINE_MIN_WIDTH}px solid ${({ theme }) => theme.colors.OUTLINE};\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  background-color: ${({ theme }) => theme.colors.SURFACE_DIM};\n`;\n\nexport const TopPortCircle: React.FC<any> = styled(Circle)`\n  position: absolute;\n  top: -${CIRCLE_WIDTH / 2}px;\n  left: 50% - ${CIRCLE_WIDTH / 2}px;\n`;\n\nexport const LeftPortCircle: React.FC<any> = styled(Circle)`\n  position: absolute;\n  top: 50% - ${CIRCLE_WIDTH / 2}px;\n  left: -${CIRCLE_WIDTH / 2}px;\n`;\n\nexport const RightPortCircle: React.FC<any> = styled(Dot)`\n  position: absolute;\n  top: 50% - ${DOT_WIDTH / 2 + CELL_LINE_MIN_WIDTH}px;\n  right: -${DOT_WIDTH / 2 + CELL_LINE_MIN_WIDTH}px;\n`;\n\nexport const BottomPortsWrapper: React.FC<any> = styled.div`\n  position: absolute;\n  bottom: -${DOT_WIDTH / 2 + CELL_LINE_MIN_WIDTH}px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  gap: ${CIRCLE_WIDTH}px;\n`;\n\nexport const RightPortsWrapper: React.FC<any> = styled.div`\n  position: absolute;\n  right: -${DOT_WIDTH / 2 + CELL_LINE_MIN_WIDTH}px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: ${CIRCLE_WIDTH}px;\n`;\n\nexport const DotWrapper: React.FC<any> = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\nexport const Label: React.FC<any> = styled.div`\n  margin-top: 10px;\n`;\n\nexport const PortLabel: React.FC<any> = styled.div`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  font-family: 'GilmerMedium';\n  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};\n  font-size: 20px;\n  span {\n    text-align: left;\n    width: max-content;\n  }\n`;\n\nexport const TopPortLabel: React.FC<any> = styled(PortLabel)`\n  top: -24px;\n  right: -116px;\n`;\n\nexport const LeftPortLabel: React.FC<any> = styled(PortLabel)`\n  top: -24px;\n  left: -116px;\n  align-items: flex-end;\n  span {\n    text-align: right;\n  }\n`;\n\nexport const RightPortLabel: React.FC<any> = styled(PortLabel)`\n  top: -32px;\n  right: -116px;\n`;\n\nexport const BottomPortLabel: React.FC<any> = styled(PortLabel)`\n  bottom: -36px;\n  left: -132px;\n  align-items: flex-end;\n  span {\n    text-align: right;\n  }\n`;\n\nexport const IconWrapper: React.FC<any> = styled.div`\n  height: 32px;\n  width: 32px;\n  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};\n  font-size: 28px;\n`;\n\nexport const TopIconWrapper: React.FC<any> = styled.div`\n  height: 32px;\n  width: 32px;\n  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};\n  font-size: 28px;\n  transform: rotate(90deg);\n`;\n"],"names":[],"mappings":"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"}

package/dist/components/Cell/CellPort/CellPortFactory.esm.js

@@ -0,0 +1,17 @@
+import { AbstractModelFactory } from '@projectstorm/react-canvas-core';
+import { CellPortModel } from './CellPortModel.esm.js';
+
+class CellPortFactory extends AbstractModelFactory {
+  constructor() {
+    super("cellPort");
+  }
+  generateModel(event) {
+    return new CellPortModel(
+      event.initialConfig.id,
+      event.initialConfig.portType
+    );
+  }
+}
+
+export { CellPortFactory };
+//# sourceMappingURL=CellPortFactory.esm.js.map

package/dist/components/Cell/CellPort/CellPortFactory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellPortFactory.esm.js","sources":["../../../../src/components/Cell/CellPort/CellPortFactory.tsx"],"sourcesContent":["import { DiagramEngine, PortModel } from '@projectstorm/react-diagrams';\nimport { AbstractModelFactory } from '@projectstorm/react-canvas-core';\nimport { CellPortModel } from './CellPortModel';\n\nexport class CellPortFactory extends AbstractModelFactory<\n  PortModel,\n  DiagramEngine\n> {\n  constructor() {\n    super('cellPort');\n  }\n\n  generateModel(event: { initialConfig: any }): CellPortModel {\n    return new CellPortModel(\n      event.initialConfig.id,\n      event.initialConfig.portType,\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,wBAAwB,oBAAA,CAGnC;AAAA,EACA,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM,UAAU,CAAA;AAAA,EAClB;AAAA,EAEA,cAAc,KAAA,EAA8C;AAC1D,IAAA,OAAO,IAAI,aAAA;AAAA,MACT,MAAM,aAAA,CAAc,EAAA;AAAA,MACpB,MAAM,aAAA,CAAc;AAAA,KACtB;AAAA,EACF;AACF;;;;"}

package/dist/components/Cell/CellPort/CellPortModel.esm.js

@@ -0,0 +1,18 @@
+import { PortModel } from '@projectstorm/react-diagrams';
+
+class CellPortModel extends PortModel {
+  constructor(id, portType) {
+    super({
+      type: "cellPort",
+      name: `${portType}-${id}`,
+      id: `${portType}-${id}`,
+      alignment: portType
+    });
+  }
+  isLocked() {
+    return true;
+  }
+}
+
+export { CellPortModel };
+//# sourceMappingURL=CellPortModel.esm.js.map

package/dist/components/Cell/CellPort/CellPortModel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellPortModel.esm.js","sources":["../../../../src/components/Cell/CellPort/CellPortModel.ts"],"sourcesContent":["import { PortModel, PortModelAlignment } from '@projectstorm/react-diagrams';\n\nexport class CellPortModel extends PortModel {\n  constructor(id: string, portType: PortModelAlignment) {\n    super({\n      type: 'cellPort',\n      name: `${portType}-${id}`,\n      id: `${portType}-${id}`,\n      alignment: portType,\n    });\n  }\n\n  isLocked(): boolean {\n    return true;\n  }\n}\n"],"names":[],"mappings":";;AAEO,MAAM,sBAAsB,SAAA,CAAU;AAAA,EAC3C,WAAA,CAAY,IAAY,QAAA,EAA8B;AACpD,IAAA,KAAA,CAAM;AAAA,MACJ,IAAA,EAAM,UAAA;AAAA,MACN,IAAA,EAAM,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA;AAAA,MACvB,EAAA,EAAI,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA;AAAA,MACrB,SAAA,EAAW;AAAA,KACZ,CAAA;AAAA,EACH;AAAA,EAEA,QAAA,GAAoB;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AACF;;;;"}

package/dist/components/Cell/CellPort/CellPortWidget.esm.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { PortWidget, PortModelAlignment } from '@projectstorm/react-diagrams';
+import { sidePortStyles, inclusionPortStyles } from './styles.esm.js';
+
+function getPortStyles(alignment) {
+  if (alignment === PortModelAlignment.LEFT) {
+    return { left: 0, ...sidePortStyles };
+  }
+  if (alignment === PortModelAlignment.RIGHT) {
+    return { right: 0, ...sidePortStyles };
+  }
+  if (alignment === PortModelAlignment.TOP) {
+    return { top: 0, ...inclusionPortStyles };
+  }
+  return { bottom: 0, ...inclusionPortStyles };
+}
+function CellPortWidget(props) {
+  const { port, engine } = props;
+  const portStyles = getPortStyles(port.getOptions().alignment);
+  return /* @__PURE__ */ jsx(PortWidget, { engine, port, style: portStyles });
+}
+
+export { CellPortWidget };
+//# sourceMappingURL=CellPortWidget.esm.js.map

package/dist/components/Cell/CellPort/CellPortWidget.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellPortWidget.esm.js","sources":["../../../../src/components/Cell/CellPort/CellPortWidget.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport {\n  DiagramEngine,\n  PortModelAlignment,\n  PortWidget,\n} from '@projectstorm/react-diagrams';\nimport { CellPortModel } from './CellPortModel';\nimport { inclusionPortStyles, sidePortStyles } from './styles';\n\ninterface CustomPortProps {\n  port: CellPortModel;\n  engine: DiagramEngine;\n}\n\nfunction getPortStyles(\n  alignment: PortModelAlignment | undefined,\n): CSSProperties {\n  if (alignment === PortModelAlignment.LEFT) {\n    return { left: 0, ...sidePortStyles };\n  }\n  if (alignment === PortModelAlignment.RIGHT) {\n    return { right: 0, ...sidePortStyles };\n  }\n  if (alignment === PortModelAlignment.TOP) {\n    return { top: 0, ...inclusionPortStyles };\n  }\n  return { bottom: 0, ...inclusionPortStyles };\n}\n\nexport function CellPortWidget(props: CustomPortProps) {\n  const { port, engine } = props;\n  const portStyles: CSSProperties = getPortStyles(port.getOptions().alignment);\n\n  return <PortWidget engine={engine} port={port} style={portStyles} />;\n}\n"],"names":[],"mappings":";;;;AAcA,SAAS,cACP,SAAA,EACe;AACf,EAAA,IAAI,SAAA,KAAc,mBAAmB,IAAA,EAAM;AACzC,IAAA,OAAO,EAAE,IAAA,EAAM,CAAA,EAAG,GAAG,cAAA,EAAe;AAAA,EACtC;AACA,EAAA,IAAI,SAAA,KAAc,mBAAmB,KAAA,EAAO;AAC1C,IAAA,OAAO,EAAE,KAAA,EAAO,CAAA,EAAG,GAAG,cAAA,EAAe;AAAA,EACvC;AACA,EAAA,IAAI,SAAA,KAAc,mBAAmB,GAAA,EAAK;AACxC,IAAA,OAAO,EAAE,GAAA,EAAK,CAAA,EAAG,GAAG,mBAAA,EAAoB;AAAA,EAC1C;AACA,EAAA,OAAO,EAAE,MAAA,EAAQ,CAAA,EAAG,GAAG,mBAAA,EAAoB;AAC7C;AAEO,SAAS,eAAe,KAAA,EAAwB;AACrD,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAO,GAAI,KAAA;AACzB,EAAA,MAAM,UAAA,GAA4B,aAAA,CAAc,IAAA,CAAK,UAAA,GAAa,SAAS,CAAA;AAE3E,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,MAAA,EAAgB,IAAA,EAAY,OAAO,UAAA,EAAY,CAAA;AACpE;;;;"}

package/dist/components/Cell/CellPort/styles.esm.js

@@ -0,0 +1,13 @@
+const sidePortStyles = {
+  height: "0.5px",
+  position: "absolute",
+  width: "8px"
+};
+const inclusionPortStyles = {
+  height: "2px",
+  position: "absolute",
+  width: "2px"
+};
+
+export { inclusionPortStyles, sidePortStyles };
+//# sourceMappingURL=styles.esm.js.map

package/dist/components/Cell/CellPort/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/components/Cell/CellPort/styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport const sidePortStyles: CSSProperties = {\n  height: '0.5px',\n  position: 'absolute',\n  width: '8px',\n};\n\nexport const inclusionPortStyles: CSSProperties = {\n  height: '2px',\n  position: 'absolute',\n  width: '2px',\n};\n"],"names":[],"mappings":"AAEO,MAAM,cAAA,GAAgC;AAAA,EAC3C,MAAA,EAAQ,OAAA;AAAA,EACR,QAAA,EAAU,UAAA;AAAA,EACV,KAAA,EAAO;AACT;AAEO,MAAM,mBAAA,GAAqC;AAAA,EAChD,MAAA,EAAQ,KAAA;AAAA,EACR,QAAA,EAAU,UAAA;AAAA,EACV,KAAA,EAAO;AACT;;;;"}

package/dist/components/Cell/EmptyNode/EmptyFactory.esm.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
+import { EmptyModel } from './EmptyModel.esm.js';
+import { EmptyWidget } from './EmptyWidget.esm.js';
+import { EMPTY_NODE } from '../../../resources/constants.esm.js';
+
+class EmptyFactory extends AbstractReactFactory {
+  constructor() {
+    super(EMPTY_NODE);
+  }
+  generateReactWidget(event) {
+    return /* @__PURE__ */ jsx(EmptyWidget, { engine: this.engine, node: event.model });
+  }
+  generateModel(event) {
+    return new EmptyModel(event.initialConfig.key, event.initialConfig.cell);
+  }
+}
+
+export { EmptyFactory };
+//# sourceMappingURL=EmptyFactory.esm.js.map

package/dist/components/Cell/EmptyNode/EmptyFactory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyFactory.esm.js","sources":["../../../../src/components/Cell/EmptyNode/EmptyFactory.tsx"],"sourcesContent":["import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { DiagramEngine } from '@projectstorm/react-diagrams-core';\nimport { EmptyModel } from './EmptyModel';\nimport { EmptyWidget } from './EmptyWidget';\nimport { EMPTY_NODE } from '../../../resources';\n\nexport class EmptyFactory extends AbstractReactFactory<\n  EmptyModel,\n  DiagramEngine\n> {\n  constructor() {\n    super(EMPTY_NODE);\n  }\n\n  generateReactWidget(event: { model: EmptyModel }): JSX.Element {\n    return <EmptyWidget engine={this.engine} node={event.model} />;\n  }\n\n  generateModel(event: { initialConfig: any }) {\n    return new EmptyModel(event.initialConfig.key, event.initialConfig.cell);\n  }\n}\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,qBAAqB,oBAAA,CAGhC;AAAA,EACA,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM,UAAU,CAAA;AAAA,EAClB;AAAA,EAEA,oBAAoB,KAAA,EAA2C;AAC7D,IAAA,2BAAQ,WAAA,EAAA,EAAY,MAAA,EAAQ,KAAK,MAAA,EAAQ,IAAA,EAAM,MAAM,KAAA,EAAO,CAAA;AAAA,EAC9D;AAAA,EAEA,cAAc,KAAA,EAA+B;AAC3C,IAAA,OAAO,IAAI,UAAA,CAAW,KAAA,CAAM,cAAc,GAAA,EAAK,KAAA,CAAM,cAAc,IAAI,CAAA;AAAA,EACzE;AACF;;;;"}

package/dist/components/Cell/EmptyNode/EmptyModel.esm.js

@@ -0,0 +1,25 @@
+import { PortModelAlignment } from '@projectstorm/react-diagrams';
+import { SharedNodeModel } from '../../SharedNode/SharedNode.esm.js';
+import { CellPortModel } from '../CellPort/CellPortModel.esm.js';
+import { getEmptyNodeName } from '../cell-util.esm.js';
+import { EMPTY_NODE, CIRCLE_WIDTH } from '../../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+
+class EmptyModel extends SharedNodeModel {
+  bound;
+  width;
+  constructor(bound, width, suffix) {
+    const name = getEmptyNodeName(bound, suffix ?? "");
+    super(EMPTY_NODE, name);
+    this.bound = bound;
+    this.width = width || CIRCLE_WIDTH;
+    this.setLocked(true);
+    this.addPort(new CellPortModel(name, PortModelAlignment.TOP));
+    this.addPort(new CellPortModel(name, PortModelAlignment.BOTTOM));
+    this.addPort(new CellPortModel(name, PortModelAlignment.LEFT));
+    this.addPort(new CellPortModel(name, PortModelAlignment.RIGHT));
+  }
+}
+
+export { EmptyModel };
+//# sourceMappingURL=EmptyModel.esm.js.map

package/dist/components/Cell/EmptyNode/EmptyModel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyModel.esm.js","sources":["../../../../src/components/Cell/EmptyNode/EmptyModel.ts"],"sourcesContent":["import { PortModelAlignment } from '@projectstorm/react-diagrams';\nimport { SharedNodeModel } from '../../SharedNode/SharedNode';\nimport { CellPortModel } from '../CellPort/CellPortModel';\nimport { getEmptyNodeName } from '../cell-util';\nimport { CellBounds } from '../CellNode/CellModel';\nimport { CIRCLE_WIDTH, EMPTY_NODE } from '../../../resources';\n\nexport class EmptyModel extends SharedNodeModel {\n  readonly bound: CellBounds;\n  readonly width: number;\n\n  constructor(bound: CellBounds, width?: number, suffix?: string) {\n    const name = getEmptyNodeName(bound, suffix ?? '');\n    super(EMPTY_NODE, name);\n    this.bound = bound;\n    this.width = width || CIRCLE_WIDTH;\n    this.setLocked(true);\n\n    this.addPort(new CellPortModel(name, PortModelAlignment.TOP));\n    this.addPort(new CellPortModel(name, PortModelAlignment.BOTTOM));\n    this.addPort(new CellPortModel(name, PortModelAlignment.LEFT));\n    this.addPort(new CellPortModel(name, PortModelAlignment.RIGHT));\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAOO,MAAM,mBAAmB,eAAA,CAAgB;AAAA,EACrC,KAAA;AAAA,EACA,KAAA;AAAA,EAET,WAAA,CAAY,KAAA,EAAmB,KAAA,EAAgB,MAAA,EAAiB;AAC9D,IAAA,MAAM,IAAA,GAAO,gBAAA,CAAiB,KAAA,EAAO,MAAA,IAAU,EAAE,CAAA;AACjD,IAAA,KAAA,CAAM,YAAY,IAAI,CAAA;AACtB,IAAA,IAAA,CAAK,KAAA,GAAQ,KAAA;AACb,IAAA,IAAA,CAAK,QAAQ,KAAA,IAAS,YAAA;AACtB,IAAA,IAAA,CAAK,UAAU,IAAI,CAAA;AAEnB,IAAA,IAAA,CAAK,QAAQ,IAAI,aAAA,CAAc,IAAA,EAAM,kBAAA,CAAmB,GAAG,CAAC,CAAA;AAC5D,IAAA,IAAA,CAAK,QAAQ,IAAI,aAAA,CAAc,IAAA,EAAM,kBAAA,CAAmB,MAAM,CAAC,CAAA;AAC/D,IAAA,IAAA,CAAK,QAAQ,IAAI,aAAA,CAAc,IAAA,EAAM,kBAAA,CAAmB,IAAI,CAAC,CAAA;AAC7D,IAAA,IAAA,CAAK,QAAQ,IAAI,aAAA,CAAc,IAAA,EAAM,kBAAA,CAAmB,KAAK,CAAC,CAAA;AAAA,EAChE;AACF;;;;"}

package/dist/components/Cell/EmptyNode/EmptyWidget.esm.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { PortModelAlignment } from '@projectstorm/react-diagrams';
+import { EmptyNode } from './styles.esm.js';
+import { CellPortWidget } from '../CellPort/CellPortWidget.esm.js';
+import { getNodePortId } from '../cell-util.esm.js';
+import { useDiagramContext } from '../../DiagramContext/DiagramContext.esm.js';
+
+function EmptyWidget(props) {
+  const { node, engine } = props;
+  const { previewMode } = useDiagramContext();
+  return /* @__PURE__ */ jsxs(EmptyNode, { width: node.width, previewMode, children: [
+    /* @__PURE__ */ jsx(
+      CellPortWidget,
+      {
+        port: node.getPort(
+          getNodePortId(node.getID(), PortModelAlignment.TOP)
+        ),
+        engine
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CellPortWidget,
+      {
+        port: node.getPort(
+          getNodePortId(node.getID(), PortModelAlignment.BOTTOM)
+        ),
+        engine
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CellPortWidget,
+      {
+        port: node.getPort(
+          getNodePortId(node.getID(), PortModelAlignment.LEFT)
+        ),
+        engine
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CellPortWidget,
+      {
+        port: node.getPort(
+          getNodePortId(node.getID(), PortModelAlignment.RIGHT)
+        ),
+        engine
+      }
+    )
+  ] });
+}
+
+export { EmptyWidget };
+//# sourceMappingURL=EmptyWidget.esm.js.map

package/dist/components/Cell/EmptyNode/EmptyWidget.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyWidget.esm.js","sources":["../../../../src/components/Cell/EmptyNode/EmptyWidget.tsx"],"sourcesContent":["import {\n  DiagramEngine,\n  PortModelAlignment,\n} from '@projectstorm/react-diagrams';\nimport { EmptyModel } from './EmptyModel';\nimport { EmptyNode } from './styles';\nimport { CellPortWidget } from '../CellPort/CellPortWidget';\nimport { CellPortModel } from '../CellPort/CellPortModel';\nimport { getNodePortId } from '../cell-util';\nimport { useDiagramContext } from '../../DiagramContext/DiagramContext';\n\ninterface EmptyWidgetProps {\n  node: EmptyModel;\n  engine: DiagramEngine;\n}\n\nexport function EmptyWidget(props: EmptyWidgetProps) {\n  const { node, engine } = props;\n  const { previewMode } = useDiagramContext();\n\n  return (\n    <EmptyNode width={node.width} previewMode={previewMode}>\n      <CellPortWidget\n        port={\n          node.getPort(\n            getNodePortId(node.getID(), PortModelAlignment.TOP),\n          ) as CellPortModel\n        }\n        engine={engine}\n      />\n      <CellPortWidget\n        port={\n          node.getPort(\n            getNodePortId(node.getID(), PortModelAlignment.BOTTOM),\n          ) as CellPortModel\n        }\n        engine={engine}\n      />\n      <CellPortWidget\n        port={\n          node.getPort(\n            getNodePortId(node.getID(), PortModelAlignment.LEFT),\n          ) as CellPortModel\n        }\n        engine={engine}\n      />\n      <CellPortWidget\n        port={\n          node.getPort(\n            getNodePortId(node.getID(), PortModelAlignment.RIGHT),\n          ) as CellPortModel\n        }\n        engine={engine}\n      />\n    </EmptyNode>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAgBO,SAAS,YAAY,KAAA,EAAyB;AACnD,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAO,GAAI,KAAA;AACzB,EAAA,MAAM,EAAE,WAAA,EAAY,GAAI,iBAAA,EAAkB;AAE1C,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAO,IAAA,CAAK,OAAO,WAAA,EAC5B,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,MACE,IAAA,CAAK,OAAA;AAAA,UACH,aAAA,CAAc,IAAA,CAAK,KAAA,EAAM,EAAG,mBAAmB,GAAG;AAAA,SACpD;AAAA,QAEF;AAAA;AAAA,KACF;AAAA,oBACA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,MACE,IAAA,CAAK,OAAA;AAAA,UACH,aAAA,CAAc,IAAA,CAAK,KAAA,EAAM,EAAG,mBAAmB,MAAM;AAAA,SACvD;AAAA,QAEF;AAAA;AAAA,KACF;AAAA,oBACA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,MACE,IAAA,CAAK,OAAA;AAAA,UACH,aAAA,CAAc,IAAA,CAAK,KAAA,EAAM,EAAG,mBAAmB,IAAI;AAAA,SACrD;AAAA,QAEF;AAAA;AAAA,KACF;AAAA,oBACA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,MACE,IAAA,CAAK,OAAA;AAAA,UACH,aAAA,CAAc,IAAA,CAAK,KAAA,EAAM,EAAG,mBAAmB,KAAK;AAAA,SACtD;AAAA,QAEF;AAAA;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/Cell/EmptyNode/styles.esm.js

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+const EmptyNode = styled.div`
+  width: ${(props) => props.width}px;
+  height: ${(props) => props.width}px;
+  border-radius: 50%;
+  background-color: none;
+  cursor: ${(props) => props.previewMode ? "pointer" : "move"};
+`;
+
+export { EmptyNode };
+//# sourceMappingURL=styles.esm.js.map

package/dist/components/Cell/EmptyNode/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/components/Cell/EmptyNode/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\n\ninterface StyleProps {\n  width: number;\n  previewMode: boolean;\n}\n\nexport const EmptyNode = styled.div<any>`\n  width: ${(props: StyleProps) => props.width}px;\n  height: ${(props: StyleProps) => props.width}px;\n  border-radius: 50%;\n  background-color: none;\n  cursor: ${(props: StyleProps) => (props.previewMode ? 'pointer' : 'move')};\n`;\n"],"names":[],"mappings":";;AAOO,MAAM,YAAY,MAAA,CAAO,GAAA;AAAA,SAAA,EACrB,CAAC,KAAA,KAAsB,KAAA,CAAM,KAAK,CAAA;AAAA,UAAA,EACjC,CAAC,KAAA,KAAsB,KAAA,CAAM,KAAK,CAAA;AAAA;AAAA;AAAA,UAAA,EAGlC,CAAC,KAAA,KAAuB,KAAA,CAAM,WAAA,GAAc,YAAY,MAAO,CAAA;AAAA;;;;"}