@openchoreo/cell-diagram 1.2.0-rc.1

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @openchoreo/cell-diagram
+
+## 1.2.0-next.3
+
+### Minor Changes
+
+- 436c144: Bring the Cell Diagram library into the repo as the internal package
+  `@openchoreo/cell-diagram` (previously the external `@wso2/cell-diagram`). The
+  exported API is unchanged; the frontend and backend plugins now consume the
+  workspace package.

package/README.md

@@ -0,0 +1,115 @@
+# @openchoreo/cell-diagram
+
+A React component library that visualizes cell architectures.
+
+> Previously published as `@wso2/cell-diagram`. The exported API is unchanged;
+> only the package name has moved into the `@openchoreo` scope.
+
+## Provenance
+
+This package was imported into the monorepo from
+[`wso2/cell-diagram`](https://github.com/wso2/cell-diagram) at commit
+[`d590506`](https://github.com/wso2/cell-diagram/commit/d590506cecdc1eee478a057a5f535075d5f56dde)
+(last published as `@wso2/cell-diagram@0.3.1`), per
+[openchoreo/openchoreo#4003](https://github.com/openchoreo/openchoreo/issues/4003).
+The original repository's git history is preserved upstream; it is not
+reproduced here because the PR lands as a single squashed commit. The source is
+unchanged in behaviour — only adapted to the monorepo's strict TypeScript and
+lint settings, and the per-file Apache-2.0 headers were dropped to match repo
+convention (the package remains Apache-2.0 licensed; see `package.json`).
+
+## Installation
+
+```bash
+npm install @openchoreo/cell-diagram
+```
+
+## Basic usage
+
+```tsx
+import { CellDiagram } from '@openchoreo/cell-diagram';
+
+<CellDiagram project={project} />;
+```
+
+## Theming (light / dark)
+
+`<CellDiagram>` accepts an optional `mode` prop and, for advanced cases, a
+`colors` prop that lets host applications drive the palette from the outside.
+Defaults are unchanged — callers that don't pass `mode` get the original
+light appearance.
+
+### Switching modes
+
+```tsx
+import { CellDiagram } from '@openchoreo/cell-diagram';
+
+// Follow the host application's theme.
+<CellDiagram project={project} mode={isDarkTheme ? 'dark' : 'light'} />;
+```
+
+The library subscribes its internal styled components to an Emotion
+`ThemeProvider`, so toggling `mode` re-renders the canvas live; zoom, layout
+and selection state persist across the swap.
+
+### Backstage example
+
+```tsx
+import { useTheme } from '@material-ui/core/styles';
+
+export function CellDiagramTab({ project }) {
+  const theme = useTheme();
+  return (
+    <CellDiagram
+      project={project}
+      mode={theme.palette.type === 'dark' ? 'dark' : 'light'}
+    />
+  );
+}
+```
+
+### Per-token overrides
+
+For host apps that want to snap accents to their own brand without giving up
+the rest of the preset, pass `colors`:
+
+```tsx
+import { CellDiagram, CellDiagramColors } from '@openchoreo/cell-diagram';
+
+const brandOverride: Partial<CellDiagramColors> = {
+  PRIMARY: '#22D3EE',
+  PRIMARY_HOVER: '#67E8F9',
+};
+
+<CellDiagram project={project} mode="dark" colors={brandOverride} />;
+```
+
+The full token set is exported as `CellDiagramColors` and the two presets as
+`lightColors` / `darkColors`.
+
+### What's themed and what isn't
+
+Themed surfaces include the canvas background, all node types
+(cell/component/connection/project/external), all link layers
+(architecture/observability/diff), legend, controls and tooltips.
+
+**Not themed**: brand language-icon SVGs (Java blue, Python yellow, NodeJS
+green, etc.) — those are kept identity-colored in both modes.
+
+## Development
+
+This package builds with `backstage-cli` and ships a Storybook (Vite builder)
+for local component development:
+
+```bash
+yarn workspace @openchoreo/cell-diagram storybook   # http://localhost:6006
+yarn workspace @openchoreo/cell-diagram build       # dist/ (esm + cjs + types)
+```
+
+## Migration from `0.2.x`
+
+- The `Colors` enum was previously a TypeScript `enum`. From `0.3.0` it is a
+  frozen object alias of `lightColors`. Value imports (`Colors.PRIMARY`) keep
+  working unchanged. Type imports (`: Colors`) also keep working through a
+  `type Colors = CellDiagramColors` alias.
+- Callers that don't pass `mode` see no visual change.

package/dist/Diagram.esm.js

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+import { Container } from './utils/CanvasStyles.esm.js';
+import { ensureFontsLoaded } from './resources/assets/font/fonts.esm.js';
+import { ProjectDiagram } from './diagrams/ProjectDiagram.esm.js';
+import '@projectstorm/react-canvas-core';
+import '@projectstorm/react-diagrams';
+import 'gsap';
+import '@projectstorm/react-diagrams-core';
+import '@projectstorm/geometry';
+import '@projectstorm/react-diagrams-defaults';
+import 'dagre';
+import 'lodash';
+import 'react';
+import '@mui/material/Fade';
+import '@mui/material/Box';
+import '@mui/material/Tooltip';
+import '@mui/icons-material/OpenInNewRounded';
+import './components/Project/ProjectNode/styles.esm.js';
+import './components/Project/ProjectPort/styles.esm.js';
+import './components/Cell/CellNode/styles.esm.js';
+import './components/DiagramContext/DiagramContext.esm.js';
+import './theme/ThemeContext.esm.js';
+import { CellDiagramThemeProvider } from './theme/CellDiagramThemeProvider.esm.js';
+import './components/SharedLink/SharedLink.esm.js';
+import './components/Project/AdvancedLink/AdvancedLinkFactory.esm.js';
+import './components/Component/ComponentNode/styles.esm.js';
+import './components/MoreVertMenu/MoreVertMenu.esm.js';
+import './components/ObservationLabel/ObservationLabel.esm.js';
+import './components/TooltipLabel/TooltipLabel.esm.js';
+import '@mui/material/Popper';
+import './components/Connection/ConnectionNode/styles.esm.js';
+import './components/Cell/EmptyNode/styles.esm.js';
+import './components/External/ExternalNode/styles.esm.js';
+import './components/OverlayLoader/OverlayLayerWidget.esm.js';
+import { PromptScreen } from './components/PromptScreen/PromptScreen.esm.js';
+import './components/Header/Header.esm.js';
+import './components/Controls/DiagramControls.esm.js';
+import { OrgDiagram } from './diagrams/OrgDiagram.esm.js';
+
+ensureFontsLoaded();
+function CellDiagram(props) {
+  const { organization, project, previewMode, mode, colors } = props;
+  let diagram;
+  if (organization) {
+    diagram = /* @__PURE__ */ jsx(OrgDiagram, { organization, ...props });
+  } else if (project) {
+    diagram = /* @__PURE__ */ jsx(ProjectDiagram, { project, ...props, previewMode });
+  } else {
+    diagram = /* @__PURE__ */ jsx(PromptScreen, { userMessage: "Organization or Project model not provided." });
+  }
+  return /* @__PURE__ */ jsx(CellDiagramThemeProvider, { mode, colors, children: /* @__PURE__ */ jsx(Container, { className: previewMode ? "preview-mode" : "", children: diagram }) });
+}
+
+export { CellDiagram };
+//# sourceMappingURL=Diagram.esm.js.map

package/dist/Diagram.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Diagram.esm.js","sources":["../src/Diagram.tsx"],"sourcesContent":["import { Container } from './utils/CanvasStyles';\nimport {\n  CustomTooltips,\n  DiagramLayer,\n  MoreVertMenuItem,\n  Organization,\n  Project,\n} from './types';\nimport { ensureFontsLoaded } from './resources/assets/font/fonts';\nimport { ProjectDiagram } from './diagrams/ProjectDiagram';\nimport { PromptScreen } from './components';\nimport { OrgDiagram } from './diagrams/OrgDiagram';\nimport {\n  CellDiagramColors,\n  CellDiagramThemeMode,\n  CellDiagramThemeProvider,\n} from './theme';\n\n// Inject the Gilmer @font-face declarations as soon as the diagram module\n// loads, matching the original eager `import \"./...fonts.css\"` side effect.\nensureFontsLoaded();\n\nexport { DiagramLayer } from './types';\nexport type { MoreVertMenuItem, Project } from './types';\nexport type { CellDiagramColors, CellDiagramThemeMode } from './theme';\nexport { lightColors, darkColors } from './theme';\n\nexport interface CellDiagramProps {\n  organization?: Organization;\n  project?: Project;\n  componentMenu?: MoreVertMenuItem[];\n  showControls?: boolean;\n  animation?: boolean;\n  defaultDiagramLayer?: DiagramLayer;\n  customTooltips?: CustomTooltips;\n  modelVersion?: string;\n  previewMode?: boolean;\n  onComponentDoubleClick?: (componentId: string) => void;\n  /**\n   * Color scheme to render the diagram in. Defaults to `'light'` so\n   * existing callers see no visual change.\n   */\n  mode?: CellDiagramThemeMode;\n  /**\n   * Optional per-token overrides merged on top of the `mode` preset. Use\n   * this to snap the diagram to a host application's brand palette.\n   */\n  colors?: Partial<CellDiagramColors>;\n}\n\nexport function CellDiagram(props: CellDiagramProps) {\n  const { organization, project, previewMode, mode, colors } = props;\n\n  let diagram;\n  if (organization) {\n    diagram = <OrgDiagram organization={organization} {...props} />;\n  } else if (project) {\n    diagram = (\n      <ProjectDiagram project={project} {...props} previewMode={previewMode} />\n    );\n  } else {\n    diagram = (\n      <PromptScreen userMessage=\"Organization or Project model not provided.\" />\n    );\n  }\n\n  return (\n    <CellDiagramThemeProvider mode={mode} colors={colors}>\n      <Container className={previewMode ? 'preview-mode' : ''}>\n        {diagram}\n      </Container>\n    </CellDiagramThemeProvider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,iBAAA,EAAkB;AA8BX,SAAS,YAAY,KAAA,EAAyB;AACnD,EAAA,MAAM,EAAE,YAAA,EAAc,OAAA,EAAS,WAAA,EAAa,IAAA,EAAM,QAAO,GAAI,KAAA;AAE7D,EAAA,IAAI,OAAA;AACJ,EAAA,IAAI,YAAA,EAAc;AAChB,IAAA,OAAA,mBAAU,GAAA,CAAC,UAAA,EAAA,EAAW,YAAA,EAA6B,GAAG,KAAA,EAAO,CAAA;AAAA,EAC/D,WAAW,OAAA,EAAS;AAClB,IAAA,OAAA,mBACE,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAmB,GAAG,OAAO,WAAA,EAA0B,CAAA;AAAA,EAE3E,CAAA,MAAO;AACL,IAAA,OAAA,mBACE,GAAA,CAAC,YAAA,EAAA,EAAa,WAAA,EAAY,6CAAA,EAA8C,CAAA;AAAA,EAE5E;AAEA,EAAA,uBACE,GAAA,CAAC,wBAAA,EAAA,EAAyB,IAAA,EAAY,MAAA,EACpC,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,WAAA,GAAc,cAAA,GAAiB,EAAA,EAClD,QAAA,EAAA,OAAA,EACH,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/Cell/CellLink/CellLinkFactory.esm.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { DefaultLinkFactory } from '@projectstorm/react-diagrams';
+import { CellLinkModel } from './CellLinkModel.esm.js';
+import { CellLinkWidget } from './CellLinkWidget.esm.js';
+
+class CellLinkFactory extends DefaultLinkFactory {
+  constructor() {
+    super("cellLink");
+  }
+  generateModel(event) {
+    return new CellLinkModel(event.initialConfig.id);
+  }
+  generateReactWidget(props) {
+    return /* @__PURE__ */ jsx(CellLinkWidget, { link: props.model, engine: this.engine });
+  }
+}
+
+export { CellLinkFactory };
+//# sourceMappingURL=CellLinkFactory.esm.js.map

package/dist/components/Cell/CellLink/CellLinkFactory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellLinkFactory.esm.js","sources":["../../../../src/components/Cell/CellLink/CellLinkFactory.tsx"],"sourcesContent":["import { DefaultLinkFactory } from '@projectstorm/react-diagrams';\nimport { CellLinkModel } from './CellLinkModel';\nimport { CellLinkWidget } from './CellLinkWidget';\n\nexport class CellLinkFactory extends DefaultLinkFactory {\n  constructor() {\n    super('cellLink');\n  }\n\n  generateModel(event: { initialConfig: any }): CellLinkModel {\n    return new CellLinkModel(event.initialConfig.id);\n  }\n\n  generateReactWidget(props: { model: CellLinkModel }): JSX.Element {\n    return <CellLinkWidget link={props.model} engine={this.engine} />;\n  }\n}\n"],"names":[],"mappings":";;;;;AAIO,MAAM,wBAAwB,kBAAA,CAAmB;AAAA,EACtD,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM,UAAU,CAAA;AAAA,EAClB;AAAA,EAEA,cAAc,KAAA,EAA8C;AAC1D,IAAA,OAAO,IAAI,aAAA,CAAc,KAAA,CAAM,aAAA,CAAc,EAAE,CAAA;AAAA,EACjD;AAAA,EAEA,oBAAoB,KAAA,EAA8C;AAChE,IAAA,2BAAQ,cAAA,EAAA,EAAe,IAAA,EAAM,MAAM,KAAA,EAAO,MAAA,EAAQ,KAAK,MAAA,EAAQ,CAAA;AAAA,EACjE;AACF;;;;"}

package/dist/components/Cell/CellLink/CellLinkModel.esm.js

@@ -0,0 +1,59 @@
+import { PortModelAlignment } from '@projectstorm/react-diagrams';
+import { SharedLinkModel } from '../../SharedLink/SharedLink.esm.js';
+import { CellBounds } from '../CellNode/CellModel.esm.js';
+import { getEmptyNodeName } from '../cell-util.esm.js';
+
+class CellLinkModel extends SharedLinkModel {
+  sourceNode;
+  targetNode;
+  isExternalConsumerLink;
+  destinationNode;
+  constructor(id) {
+    super(id, "cellLink");
+  }
+  setIsExternalConsumerLink(isExternalConsumerLink) {
+    this.isExternalConsumerLink = isExternalConsumerLink;
+  }
+  setDestinationNode(destinationNode) {
+    this.destinationNode = destinationNode;
+  }
+  setSourceNode(nodeId) {
+    this.sourceNode = { nodeId };
+  }
+  setTargetNode(nodeId) {
+    this.targetNode = { nodeId };
+  }
+  getDestinationNode() {
+    return this.destinationNode;
+  }
+  getIsExternalConsumerLink() {
+    return this.isExternalConsumerLink;
+  }
+  getArrowHeadPoints = (scale = 1) => {
+    let points = "";
+    const sizeMultiplier = Math.max(Math.min(scale / 9, 4), 1);
+    const targetPort = this.getTargetPort().getPosition();
+    if (this.getTargetPort().getOptions().alignment === PortModelAlignment.LEFT && getEmptyNodeName(CellBounds.WestBound) === this.sourceNode.nodeId) {
+      points = `${targetPort.x} ${targetPort.y}, ${targetPort.x - 14 * sizeMultiplier} ${targetPort.y + 10 * sizeMultiplier},
+                ${targetPort.x - 14 * sizeMultiplier} ${targetPort.y - 10 * sizeMultiplier}`;
+    } else if (this.getTargetPort().getOptions().alignment === PortModelAlignment.TOP && getEmptyNodeName(CellBounds.NorthBound) === this.sourceNode.nodeId) {
+      points = `${targetPort.x} ${targetPort.y}, ${targetPort.x + 10 * sizeMultiplier} ${targetPort.y - 15 * sizeMultiplier},
+                ${targetPort.x - 10 * sizeMultiplier} ${targetPort.y - 15 * sizeMultiplier}`;
+    }
+    return points;
+  };
+  showArrowHead = () => {
+    const targetPortAlignment = this.getTargetPort().getOptions().alignment;
+    const sourceNodeId = this.sourceNode.nodeId;
+    if (targetPortAlignment === PortModelAlignment.LEFT && getEmptyNodeName(CellBounds.WestBound) === sourceNodeId) {
+      return true;
+    }
+    if (targetPortAlignment === PortModelAlignment.TOP && getEmptyNodeName(CellBounds.NorthBound) === sourceNodeId) {
+      return true;
+    }
+    return false;
+  };
+}
+
+export { CellLinkModel };
+//# sourceMappingURL=CellLinkModel.esm.js.map

package/dist/components/Cell/CellLink/CellLinkModel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellLinkModel.esm.js","sources":["../../../../src/components/Cell/CellLink/CellLinkModel.ts"],"sourcesContent":["import { PortModelAlignment } from '@projectstorm/react-diagrams';\nimport { Point } from '@projectstorm/geometry';\nimport { SharedLinkModel } from '../../SharedLink/SharedLink';\nimport { CellBounds } from '../CellNode/CellModel';\nimport { getEmptyNodeName } from '../cell-util';\nimport { ComponentModel } from '../../Component/ComponentNode/ComponentModel';\n\ninterface LinkOrigins {\n  nodeId: string;\n}\n\nexport class CellLinkModel extends SharedLinkModel {\n  sourceNode!: LinkOrigins;\n  targetNode!: LinkOrigins;\n  isExternalConsumerLink!: boolean;\n  destinationNode!: ComponentModel;\n\n  constructor(id: string) {\n    super(id, 'cellLink');\n  }\n\n  setIsExternalConsumerLink(isExternalConsumerLink: boolean) {\n    this.isExternalConsumerLink = isExternalConsumerLink;\n  }\n\n  setDestinationNode(destinationNode: ComponentModel) {\n    this.destinationNode = destinationNode;\n  }\n\n  setSourceNode(nodeId: string) {\n    this.sourceNode = { nodeId };\n  }\n\n  setTargetNode(nodeId: string) {\n    this.targetNode = { nodeId };\n  }\n\n  getDestinationNode() {\n    return this.destinationNode;\n  }\n\n  getIsExternalConsumerLink() {\n    return this.isExternalConsumerLink;\n  }\n\n  getArrowHeadPoints = (scale = 1): string => {\n    let points = '';\n    const sizeMultiplier = Math.max(Math.min(scale / 9, 4), 1);\n    const targetPort: Point = this.getTargetPort().getPosition();\n\n    if (\n      this.getTargetPort().getOptions().alignment === PortModelAlignment.LEFT &&\n      getEmptyNodeName(CellBounds.WestBound) === this.sourceNode.nodeId\n    ) {\n      points = `${targetPort.x} ${targetPort.y}, ${\n        targetPort.x - 14 * sizeMultiplier\n      } ${targetPort.y + 10 * sizeMultiplier},\n                ${targetPort.x - 14 * sizeMultiplier} ${\n        targetPort.y - 10 * sizeMultiplier\n      }`;\n    } else if (\n      this.getTargetPort().getOptions().alignment === PortModelAlignment.TOP &&\n      getEmptyNodeName(CellBounds.NorthBound) === this.sourceNode.nodeId\n    ) {\n      points = `${targetPort.x} ${targetPort.y}, ${\n        targetPort.x + 10 * sizeMultiplier\n      } ${targetPort.y - 15 * sizeMultiplier},\n                ${targetPort.x - 10 * sizeMultiplier} ${\n        targetPort.y - 15 * sizeMultiplier\n      }`;\n    }\n    return points;\n  };\n\n  showArrowHead = (): boolean => {\n    const targetPortAlignment = this.getTargetPort().getOptions().alignment;\n    const sourceNodeId = this.sourceNode.nodeId;\n\n    if (\n      targetPortAlignment === PortModelAlignment.LEFT &&\n      getEmptyNodeName(CellBounds.WestBound) === sourceNodeId\n    ) {\n      return true;\n    }\n\n    if (\n      targetPortAlignment === PortModelAlignment.TOP &&\n      getEmptyNodeName(CellBounds.NorthBound) === sourceNodeId\n    ) {\n      return true;\n    }\n\n    return false;\n  };\n}\n"],"names":[],"mappings":";;;;;AAWO,MAAM,sBAAsB,eAAA,CAAgB;AAAA,EACjD,UAAA;AAAA,EACA,UAAA;AAAA,EACA,sBAAA;AAAA,EACA,eAAA;AAAA,EAEA,YAAY,EAAA,EAAY;AACtB,IAAA,KAAA,CAAM,IAAI,UAAU,CAAA;AAAA,EACtB;AAAA,EAEA,0BAA0B,sBAAA,EAAiC;AACzD,IAAA,IAAA,CAAK,sBAAA,GAAyB,sBAAA;AAAA,EAChC;AAAA,EAEA,mBAAmB,eAAA,EAAiC;AAClD,IAAA,IAAA,CAAK,eAAA,GAAkB,eAAA;AAAA,EACzB;AAAA,EAEA,cAAc,MAAA,EAAgB;AAC5B,IAAA,IAAA,CAAK,UAAA,GAAa,EAAE,MAAA,EAAO;AAAA,EAC7B;AAAA,EAEA,cAAc,MAAA,EAAgB;AAC5B,IAAA,IAAA,CAAK,UAAA,GAAa,EAAE,MAAA,EAAO;AAAA,EAC7B;AAAA,EAEA,kBAAA,GAAqB;AACnB,IAAA,OAAO,IAAA,CAAK,eAAA;AAAA,EACd;AAAA,EAEA,yBAAA,GAA4B;AAC1B,IAAA,OAAO,IAAA,CAAK,sBAAA;AAAA,EACd;AAAA,EAEA,kBAAA,GAAqB,CAAC,KAAA,GAAQ,CAAA,KAAc;AAC1C,IAAA,IAAI,MAAA,GAAS,EAAA;AACb,IAAA,MAAM,cAAA,GAAiB,KAAK,GAAA,CAAI,IAAA,CAAK,IAAI,KAAA,GAAQ,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,CAAA;AACzD,IAAA,MAAM,UAAA,GAAoB,IAAA,CAAK,aAAA,EAAc,CAAE,WAAA,EAAY;AAE3D,IAAA,IACE,IAAA,CAAK,aAAA,EAAc,CAAE,UAAA,GAAa,SAAA,KAAc,kBAAA,CAAmB,IAAA,IACnE,gBAAA,CAAiB,UAAA,CAAW,SAAS,CAAA,KAAM,IAAA,CAAK,WAAW,MAAA,EAC3D;AACA,MAAA,MAAA,GAAS,CAAA,EAAG,UAAA,CAAW,CAAC,CAAA,CAAA,EAAI,WAAW,CAAC,CAAA,EAAA,EACtC,UAAA,CAAW,CAAA,GAAI,KAAK,cACtB,CAAA,CAAA,EAAI,UAAA,CAAW,CAAA,GAAI,KAAK,cAAc,CAAA;AAAA,gBAAA,EAC1B,UAAA,CAAW,IAAI,EAAA,GAAK,cAAc,IAC5C,UAAA,CAAW,CAAA,GAAI,KAAK,cACtB,CAAA,CAAA;AAAA,IACF,CAAA,MAAA,IACE,IAAA,CAAK,aAAA,EAAc,CAAE,YAAW,CAAE,SAAA,KAAc,kBAAA,CAAmB,GAAA,IACnE,iBAAiB,UAAA,CAAW,UAAU,CAAA,KAAM,IAAA,CAAK,WAAW,MAAA,EAC5D;AACA,MAAA,MAAA,GAAS,CAAA,EAAG,UAAA,CAAW,CAAC,CAAA,CAAA,EAAI,WAAW,CAAC,CAAA,EAAA,EACtC,UAAA,CAAW,CAAA,GAAI,KAAK,cACtB,CAAA,CAAA,EAAI,UAAA,CAAW,CAAA,GAAI,KAAK,cAAc,CAAA;AAAA,gBAAA,EAC1B,UAAA,CAAW,IAAI,EAAA,GAAK,cAAc,IAC5C,UAAA,CAAW,CAAA,GAAI,KAAK,cACtB,CAAA,CAAA;AAAA,IACF;AACA,IAAA,OAAO,MAAA;AAAA,EACT,CAAA;AAAA,EAEA,gBAAgB,MAAe;AAC7B,IAAA,MAAM,mBAAA,GAAsB,IAAA,CAAK,aAAA,EAAc,CAAE,YAAW,CAAE,SAAA;AAC9D,IAAA,MAAM,YAAA,GAAe,KAAK,UAAA,CAAW,MAAA;AAErC,IAAA,IACE,wBAAwB,kBAAA,CAAmB,IAAA,IAC3C,iBAAiB,UAAA,CAAW,SAAS,MAAM,YAAA,EAC3C;AACA,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,IACE,wBAAwB,kBAAA,CAAmB,GAAA,IAC3C,iBAAiB,UAAA,CAAW,UAAU,MAAM,YAAA,EAC5C;AACA,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,OAAO,KAAA;AAAA,EACT,CAAA;AACF;;;;"}

package/dist/components/Cell/CellLink/CellLinkWidget.esm.js

@@ -0,0 +1,217 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useMemo, useContext, useState, useEffect } from 'react';
+import { PortModelAlignment } from '@projectstorm/react-diagrams';
+import { CELL_LINK, LINK_WIDTH } from '../../../resources/constants.esm.js';
+import { WarningIcon } from '../../../resources/assets/icons/WarningIcon.esm.js';
+import { ObservationLabel } from '../../ObservationLabel/ObservationLabel.esm.js';
+import { TooltipLabel } from '../../TooltipLabel/TooltipLabel.esm.js';
+import { DiagramContext } from '../../DiagramContext/DiagramContext.esm.js';
+import { DiagramLayer } from '../../../types.esm.js';
+import { SharedLink } from '../../SharedLink/SharedLink.esm.js';
+import Popper from '@mui/material/Popper';
+import Box from '@mui/material/Box';
+import { CellBounds } from '../CellNode/CellModel.esm.js';
+import { useColors } from '../../../theme/ThemeContext.esm.js';
+import '../../../theme/CellDiagramThemeProvider.esm.js';
+
+function CellLinkWidget(props) {
+  const { link } = props;
+  const colors = useColors();
+  const tooltipPopOverStyle = useMemo(
+    () => ({
+      backgroundColor: colors.SURFACE,
+      border: `1px solid ${colors.SECONDARY}`,
+      padding: "10px",
+      borderRadius: "5px",
+      display: "flex",
+      flexDirection: "column",
+      maxWidth: "280px",
+      gap: "8px",
+      pointerEvents: "none"
+    }),
+    [colors]
+  );
+  const observabilityPopOverStyle = useMemo(
+    () => ({
+      backgroundColor: colors.SURFACE,
+      border: `1px solid ${colors.SECONDARY}`,
+      padding: "10px",
+      borderRadius: "5px",
+      display: "flex",
+      flexDirection: "column",
+      pointerEvents: "none"
+    }),
+    [colors]
+  );
+  const {
+    diagramLayers: { hasLayer },
+    observationSummary: { requestCount: { min, max } } = {
+      requestCount: { min: 0, max: 0 }
+    },
+    previewMode
+  } = useContext(DiagramContext);
+  const [isSelected, setIsSelected] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = (link.tooltip || link.observations?.length > 0) && Boolean(anchorEl) && !previewMode;
+  const hasArchitectureLayer = hasLayer(DiagramLayer.ARCHITECTURE);
+  const hasObservabilityLayer = hasLayer(DiagramLayer.OBSERVABILITY);
+  const hasDiffLayer = hasLayer(DiagramLayer.DIFF);
+  const hideLink = hasObservabilityLayer && (!link.observations || link.observations?.length === 0) && !hasArchitectureLayer && !hasDiffLayer || hasArchitectureLayer && !hasObservabilityLayer && !hasDiffLayer && link.observationOnly || previewMode && link.observationOnly;
+  useEffect(() => {
+    const listener = link.registerListener({
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      SELECT: selectPath,
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      UNSELECT: unselectPath
+    });
+    return () => {
+      link.deregisterListener(listener);
+    };
+  }, [link, hideLink]);
+  useEffect(() => {
+    if (link.getIsExternalConsumerLink()) {
+      const destinationNode = link.getDestinationNode();
+      if (destinationNode) {
+        destinationNode.fireEvent(
+          {
+            cellBound: link.getTargetPort().getOptions().alignment === PortModelAlignment.TOP ? CellBounds.NorthBound : CellBounds.WestBound
+          },
+          isSelected ? "EXTERNAL_CONSUMER_LINK_SELECT" : "EXTERNAL_CONSUMER_LINK_UNSELECT"
+        );
+      }
+    }
+  }, [link, isSelected]);
+  const selectPath = () => {
+    if (hideLink) {
+      return;
+    }
+    setIsSelected(true);
+    link.selectLinkedNodes();
+  };
+  const unselectPath = () => {
+    setIsSelected(false);
+    link.resetLinkedNodes();
+  };
+  const handleMouseOver = (event) => {
+    event.stopPropagation();
+    if (hideLink || previewMode) {
+      return;
+    }
+    selectPath();
+    setAnchorEl(event.currentTarget);
+  };
+  const handleMouseLeave = (event) => {
+    event.stopPropagation();
+    if (previewMode) {
+      return;
+    }
+    unselectPath();
+    setAnchorEl(null);
+  };
+  const getRequestCount = () => {
+    if (!hasObservabilityLayer || !link.observations || link.observations.length === 0) {
+      return 0;
+    }
+    return link.observations?.reduce((acc, obs) => acc + obs.requestCount, 0);
+  };
+  const strokeWidth = () => {
+    if (previewMode) {
+      return LINK_WIDTH.PREVIEW;
+    }
+    const requestCount = getRequestCount();
+    return requestCount ? link.scaleValueToLinkWidth(requestCount, min, max) : LINK_WIDTH.DEFAULT;
+  };
+  const strokeColor = () => {
+    if (isSelected && (hasArchitectureLayer || hasDiffLayer)) {
+      return colors.SECONDARY;
+    }
+    if (hasDiffLayer && link.observationOnly) {
+      return colors.ERROR;
+    }
+    if (hasObservabilityLayer && link.observations?.length > 0) {
+      return colors.PRIMARY;
+    }
+    if (hideLink) {
+      return "transparent";
+    }
+    return colors.OUTLINE;
+  };
+  const strokeDash = () => {
+    if (hasDiffLayer && !(link.observations?.length > 0)) {
+      return "8,8";
+    }
+    return "";
+  };
+  const midPoint = link.getMidPoint();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "g",
+      {
+        onMouseOver: handleMouseOver,
+        onMouseLeave: handleMouseLeave,
+        pointerEvents: "all",
+        className: CELL_LINK,
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+            "marker",
+            {
+              id: link.getLinkArrowId(),
+              markerWidth: "8",
+              markerHeight: "8",
+              markerUnits: "strokeWidth",
+              refX: "4",
+              refY: "3",
+              viewBox: "0 0 6 6",
+              orient: "auto",
+              children: /* @__PURE__ */ jsx("polygon", { points: "0,6 0,0 5,3", fill: strokeColor() })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: link.getCurvePath(),
+              fill: "none",
+              stroke: "transparent",
+              strokeWidth: 40
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SharedLink.Path,
+            {
+              selected: hasObservabilityLayer && isSelected,
+              id: link.getID(),
+              d: link.getCurvePath(),
+              fill: "none",
+              stroke: strokeColor(),
+              strokeWidth: strokeWidth(),
+              strokeDasharray: strokeDash(),
+              markerEnd: link.showArrowHead() && !hasObservabilityLayer ? `url(#${link.getLinkArrowId()})` : ""
+            }
+          ),
+          hasDiffLayer && link.observationOnly && !previewMode && /* @__PURE__ */ jsx(
+            WarningIcon,
+            {
+              x: midPoint.x - 10,
+              y: midPoint.y - 10,
+              width: "20",
+              height: "20"
+            }
+          )
+        ]
+      }
+    ),
+    (hasObservabilityLayer || link.tooltip) && !previewMode && /* @__PURE__ */ jsx(Popper, { id: link.getID(), open: Boolean(open), anchorEl, children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: link.observations?.length > 0 && !link.tooltip ? observabilityPopOverStyle : tooltipPopOverStyle,
+        children: [
+          link.tooltip && /* @__PURE__ */ jsx(TooltipLabel, { tooltip: link.tooltip }),
+          link.observations?.length > 0 && !link.tooltip && /* @__PURE__ */ jsx(ObservationLabel, { observations: link.observations })
+        ]
+      }
+    ) })
+  ] });
+}
+
+export { CellLinkWidget };
+//# sourceMappingURL=CellLinkWidget.esm.js.map

package/dist/components/Cell/CellLink/CellLinkWidget.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellLinkWidget.esm.js","sources":["../../../../src/components/Cell/CellLink/CellLinkWidget.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useMemo, useState } from 'react';\nimport {\n  DiagramEngine,\n  PortModelAlignment,\n} from '@projectstorm/react-diagrams';\nimport { CellLinkModel } from './CellLinkModel';\nimport { CELL_LINK, LINK_WIDTH, WarningIcon } from '../../../resources';\nimport { ObservationLabel } from '../../ObservationLabel/ObservationLabel';\nimport { TooltipLabel } from '../../TooltipLabel/TooltipLabel';\nimport { DiagramContext } from '../../DiagramContext/DiagramContext';\nimport { DiagramLayer } from '../../../types';\nimport { SharedLink } from '../../SharedLink/SharedLink';\nimport Popper from '@mui/material/Popper';\nimport Box from '@mui/material/Box';\nimport { CellBounds } from '../CellNode/CellModel';\nimport { useColors } from '../../../theme';\n\ninterface WidgetProps {\n  engine: DiagramEngine;\n  link: CellLinkModel;\n}\n\nexport function CellLinkWidget(props: WidgetProps) {\n  const { link } = props;\n  const colors = useColors();\n\n  const tooltipPopOverStyle = useMemo(\n    () => ({\n      backgroundColor: colors.SURFACE,\n      border: `1px solid ${colors.SECONDARY}`,\n      padding: '10px',\n      borderRadius: '5px',\n      display: 'flex',\n      flexDirection: 'column' as const,\n      maxWidth: '280px',\n      gap: '8px',\n      pointerEvents: 'none' as const,\n    }),\n    [colors],\n  );\n\n  const observabilityPopOverStyle = useMemo(\n    () => ({\n      backgroundColor: colors.SURFACE,\n      border: `1px solid ${colors.SECONDARY}`,\n      padding: '10px',\n      borderRadius: '5px',\n      display: 'flex',\n      flexDirection: 'column' as const,\n      pointerEvents: 'none' as const,\n    }),\n    [colors],\n  );\n\n  const {\n    diagramLayers: { hasLayer },\n    observationSummary: { requestCount: { min, max } } = {\n      requestCount: { min: 0, max: 0 },\n    },\n    previewMode,\n  } = useContext(DiagramContext);\n\n  const [isSelected, setIsSelected] = useState<boolean>(false);\n  const [anchorEl, setAnchorEl] = useState<null | SVGGElement>(null);\n\n  const open =\n    (link.tooltip || link.observations?.length > 0) &&\n    Boolean(anchorEl) &&\n    !previewMode;\n  const hasArchitectureLayer = hasLayer(DiagramLayer.ARCHITECTURE);\n  const hasObservabilityLayer = hasLayer(DiagramLayer.OBSERVABILITY);\n  const hasDiffLayer = hasLayer(DiagramLayer.DIFF);\n\n  const hideLink =\n    (hasObservabilityLayer &&\n      (!link.observations || link.observations?.length === 0) &&\n      !hasArchitectureLayer &&\n      !hasDiffLayer) ||\n    (hasArchitectureLayer &&\n      !hasObservabilityLayer &&\n      !hasDiffLayer &&\n      link.observationOnly) ||\n    (previewMode && link.observationOnly);\n\n  useEffect(() => {\n    const listener = link.registerListener({\n      // eslint-disable-next-line @typescript-eslint/no-use-before-define\n      SELECT: selectPath,\n      // eslint-disable-next-line @typescript-eslint/no-use-before-define\n      UNSELECT: unselectPath,\n    });\n    return () => {\n      link.deregisterListener(listener);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [link, hideLink]);\n\n  useEffect(() => {\n    if (link.getIsExternalConsumerLink()) {\n      const destinationNode = link.getDestinationNode();\n      if (destinationNode) {\n        destinationNode.fireEvent(\n          {\n            cellBound:\n              link.getTargetPort().getOptions().alignment ===\n              PortModelAlignment.TOP\n                ? CellBounds.NorthBound\n                : CellBounds.WestBound,\n          },\n          isSelected\n            ? 'EXTERNAL_CONSUMER_LINK_SELECT'\n            : 'EXTERNAL_CONSUMER_LINK_UNSELECT',\n        );\n      }\n    }\n  }, [link, isSelected]);\n\n  const selectPath = () => {\n    if (hideLink) {\n      return;\n    }\n    setIsSelected(true);\n    link.selectLinkedNodes();\n  };\n\n  const unselectPath = () => {\n    setIsSelected(false);\n    link.resetLinkedNodes();\n  };\n\n  const handleMouseOver = (\n    event: MouseEvent<SVGGElement, globalThis.MouseEvent>,\n  ) => {\n    event.stopPropagation();\n    if (hideLink || previewMode) {\n      return;\n    }\n    selectPath();\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleMouseLeave = (\n    event: MouseEvent<SVGGElement, globalThis.MouseEvent>,\n  ) => {\n    event.stopPropagation();\n    if (previewMode) {\n      return;\n    }\n    unselectPath();\n    setAnchorEl(null);\n  };\n\n  const getRequestCount = () => {\n    if (\n      !hasObservabilityLayer ||\n      !link.observations ||\n      link.observations.length === 0\n    ) {\n      return 0;\n    }\n    return link.observations?.reduce((acc, obs) => acc + obs.requestCount, 0);\n  };\n\n  const strokeWidth = () => {\n    if (previewMode) {\n      return LINK_WIDTH.PREVIEW;\n    }\n    const requestCount = getRequestCount();\n    return requestCount\n      ? link.scaleValueToLinkWidth(requestCount, min, max)\n      : LINK_WIDTH.DEFAULT;\n  };\n\n  const strokeColor = () => {\n    if (isSelected && (hasArchitectureLayer || hasDiffLayer)) {\n      return colors.SECONDARY;\n    }\n    if (hasDiffLayer && link.observationOnly) {\n      return colors.ERROR;\n    }\n    if (hasObservabilityLayer && link.observations?.length > 0) {\n      return colors.PRIMARY;\n    }\n    if (hideLink) {\n      return 'transparent';\n    }\n\n    return colors.OUTLINE;\n  };\n\n  const strokeDash = () => {\n    if (hasDiffLayer && !(link.observations?.length > 0)) {\n      return '8,8';\n    }\n    return '';\n  };\n\n  const midPoint = link.getMidPoint();\n\n  return (\n    <>\n      <g\n        onMouseOver={handleMouseOver}\n        onMouseLeave={handleMouseLeave}\n        pointerEvents=\"all\"\n        className={CELL_LINK}\n      >\n        <defs>\n          <marker\n            id={link.getLinkArrowId()}\n            markerWidth=\"8\"\n            markerHeight=\"8\"\n            markerUnits=\"strokeWidth\"\n            refX=\"4\"\n            refY=\"3\"\n            viewBox=\"0 0 6 6\"\n            orient=\"auto\"\n          >\n            <polygon points=\"0,6 0,0 5,3\" fill={strokeColor()} />\n          </marker>\n        </defs>\n        <path\n          d={link.getCurvePath()}\n          fill=\"none\"\n          stroke=\"transparent\"\n          strokeWidth={40}\n        />\n        <SharedLink.Path\n          selected={hasObservabilityLayer && isSelected}\n          id={link.getID()}\n          d={link.getCurvePath()}\n          fill=\"none\"\n          stroke={strokeColor()}\n          strokeWidth={strokeWidth()}\n          strokeDasharray={strokeDash()}\n          markerEnd={\n            link.showArrowHead() && !hasObservabilityLayer\n              ? `url(#${link.getLinkArrowId()})`\n              : ''\n          }\n        />\n        {hasDiffLayer && link.observationOnly && !previewMode && (\n          <WarningIcon\n            x={midPoint.x - 10}\n            y={midPoint.y - 10}\n            width=\"20\"\n            height=\"20\"\n          />\n        )}\n      </g>\n      {(hasObservabilityLayer || link.tooltip) && !previewMode && (\n        <Popper id={link.getID()} open={Boolean(open)} anchorEl={anchorEl}>\n          <Box\n            sx={\n              link.observations?.length > 0 && !link.tooltip\n                ? observabilityPopOverStyle\n                : tooltipPopOverStyle\n            }\n          >\n            {link.tooltip && <TooltipLabel tooltip={link.tooltip} />}\n            {link.observations?.length > 0 && !link.tooltip && (\n              <ObservationLabel observations={link.observations} />\n            )}\n          </Box>\n        </Popper>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
+import { CellModel } from './CellModel.esm.js';
+import { CellWidget } from './CellWidget.esm.js';
+
+class CellFactory extends AbstractReactFactory {
+  constructor() {
+    super("cellNode");
+  }
+  generateReactWidget(event) {
+    return /* @__PURE__ */ jsx(CellWidget, { engine: this.engine, node: event.model });
+  }
+  generateModel(event) {
+    return new CellModel(event.initialConfig.key, event.initialConfig.cell);
+  }
+}
+
+export { CellFactory };
+//# sourceMappingURL=CellFactory.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CellFactory.esm.js","sources":["../../../../src/components/Cell/CellNode/CellFactory.tsx"],"sourcesContent":["import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { DiagramEngine } from '@projectstorm/react-diagrams-core';\nimport { CellModel } from './CellModel';\nimport { CellWidget } from './CellWidget';\n\nexport class CellFactory extends AbstractReactFactory<\n  CellModel,\n  DiagramEngine\n> {\n  constructor() {\n    super('cellNode');\n  }\n\n  generateReactWidget(event: { model: CellModel }): JSX.Element {\n    return <CellWidget engine={this.engine} node={event.model} />;\n  }\n\n  generateModel(event: { initialConfig: any }) {\n    return new CellModel(event.initialConfig.key, event.initialConfig.cell);\n  }\n}\n"],"names":[],"mappings":";;;;;AAKO,MAAM,oBAAoB,oBAAA,CAG/B;AAAA,EACA,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM,UAAU,CAAA;AAAA,EAClB;AAAA,EAEA,oBAAoB,KAAA,EAA0C;AAC5D,IAAA,2BAAQ,UAAA,EAAA,EAAW,MAAA,EAAQ,KAAK,MAAA,EAAQ,IAAA,EAAM,MAAM,KAAA,EAAO,CAAA;AAAA,EAC7D;AAAA,EAEA,cAAc,KAAA,EAA+B;AAC3C,IAAA,OAAO,IAAI,SAAA,CAAU,KAAA,CAAM,cAAc,GAAA,EAAK,KAAA,CAAM,cAAc,IAAI,CAAA;AAAA,EACxE;AACF;;;;"}

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

@@ -0,0 +1,73 @@
+import { PortModelAlignment } from '@projectstorm/react-diagrams';
+import { SharedNodeModel } from '../../SharedNode/SharedNode.esm.js';
+import { CellPortModel } from '../CellPort/CellPortModel.esm.js';
+import { getCellPortIdWithoutAlignment } from '../cell-util.esm.js';
+import { MAIN_CELL_DEFAULT_HEIGHT } from '../../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+
+var CellBounds = /* @__PURE__ */ ((CellBounds2) => {
+  CellBounds2["NorthBound"] = "nb";
+  CellBounds2["SouthBound"] = "sb";
+  CellBounds2["EastBound"] = "eb";
+  CellBounds2["WestBound"] = "wb";
+  return CellBounds2;
+})(CellBounds || {});
+class CellModel extends SharedNodeModel {
+  width;
+  gateways;
+  connectorNodes;
+  connectionNodes;
+  constructor(cellName, width = MAIN_CELL_DEFAULT_HEIGHT, gateways, connectorNodes, connectionNodes) {
+    super("cellNode", cellName);
+    this.width = width;
+    this.gateways = gateways;
+    this.connectorNodes = connectorNodes;
+    this.connectionNodes = connectionNodes;
+    this.setLocked(true);
+    const northBoundPortName = getCellPortIdWithoutAlignment(
+      cellName,
+      "nb" /* NorthBound */
+    );
+    this.addPort(new CellPortModel(northBoundPortName, PortModelAlignment.TOP));
+    this.addPort(
+      new CellPortModel(northBoundPortName, PortModelAlignment.BOTTOM)
+    );
+    const westBoundPortName = getCellPortIdWithoutAlignment(
+      cellName,
+      "wb" /* WestBound */
+    );
+    this.addPort(new CellPortModel(westBoundPortName, PortModelAlignment.LEFT));
+    this.addPort(
+      new CellPortModel(westBoundPortName, PortModelAlignment.RIGHT)
+    );
+    if (this.connectionNodes) {
+      this.connectionNodes.forEach((connectionNode) => {
+        const portName = getCellPortIdWithoutAlignment(
+          cellName,
+          "eb" /* EastBound */,
+          connectionNode.connection.id
+        );
+        this.addPort(new CellPortModel(portName, PortModelAlignment.LEFT));
+        this.addPort(new CellPortModel(portName, PortModelAlignment.RIGHT));
+      });
+    }
+    if (this.connectorNodes) {
+      this.connectorNodes.forEach((connectorNode) => {
+        const portName = getCellPortIdWithoutAlignment(
+          cellName,
+          "sb" /* SouthBound */,
+          connectorNode.connection.id
+        );
+        this.addPort(new CellPortModel(portName, PortModelAlignment.TOP));
+        this.addPort(new CellPortModel(portName, PortModelAlignment.BOTTOM));
+      });
+    }
+  }
+  setWidth(newWidth) {
+    this.width = newWidth;
+    this.updateDimensions({ width: newWidth, height: newWidth });
+  }
+}
+
+export { CellBounds, CellModel };
+//# sourceMappingURL=CellModel.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CellModel.esm.js","sources":["../../../../src/components/Cell/CellNode/CellModel.ts"],"sourcesContent":["import { PortModelAlignment } from '@projectstorm/react-diagrams';\nimport { SharedNodeModel } from '../../SharedNode/SharedNode';\nimport { CellPortModel } from '../CellPort/CellPortModel';\nimport { getCellPortIdWithoutAlignment } from '../cell-util';\nimport { MAIN_CELL_DEFAULT_HEIGHT } from '../../../resources';\nimport { ConnectionModel } from '../../Connection/ConnectionNode/ConnectionModel';\nimport { Gateways } from '../../../types';\n\nexport enum CellBounds {\n  NorthBound = 'nb',\n  SouthBound = 'sb',\n  EastBound = 'eb',\n  WestBound = 'wb',\n}\n\nexport class CellModel extends SharedNodeModel {\n  width: number;\n  gateways?: Gateways;\n  readonly connectorNodes?: ConnectionModel[];\n  readonly connectionNodes?: ConnectionModel[];\n\n  constructor(\n    cellName: string,\n    width = MAIN_CELL_DEFAULT_HEIGHT,\n    gateways?: Gateways,\n    connectorNodes?: ConnectionModel[],\n    connectionNodes?: ConnectionModel[],\n  ) {\n    super('cellNode', cellName);\n    this.width = width;\n    this.gateways = gateways;\n    this.connectorNodes = connectorNodes;\n    this.connectionNodes = connectionNodes;\n    this.setLocked(true);\n\n    // North bound ports - for public exposed APIs\n    const northBoundPortName = getCellPortIdWithoutAlignment(\n      cellName,\n      CellBounds.NorthBound,\n    );\n    this.addPort(new CellPortModel(northBoundPortName, PortModelAlignment.TOP));\n    this.addPort(\n      new CellPortModel(northBoundPortName, PortModelAlignment.BOTTOM),\n    );\n\n    // West bound ports\n    const westBoundPortName = getCellPortIdWithoutAlignment(\n      cellName,\n      CellBounds.WestBound,\n    );\n    this.addPort(new CellPortModel(westBoundPortName, PortModelAlignment.LEFT));\n    this.addPort(\n      new CellPortModel(westBoundPortName, PortModelAlignment.RIGHT),\n    );\n\n    // East bound ports - for other project connections\n    if (this.connectionNodes) {\n      this.connectionNodes.forEach((connectionNode: ConnectionModel) => {\n        const portName = getCellPortIdWithoutAlignment(\n          cellName,\n          CellBounds.EastBound,\n          connectionNode.connection.id,\n        );\n        this.addPort(new CellPortModel(portName, PortModelAlignment.LEFT));\n        this.addPort(new CellPortModel(portName, PortModelAlignment.RIGHT));\n      });\n    }\n\n    // South bound ports - for non platform connectors\n    if (this.connectorNodes) {\n      this.connectorNodes.forEach((connectorNode: ConnectionModel) => {\n        const portName = getCellPortIdWithoutAlignment(\n          cellName,\n          CellBounds.SouthBound,\n          connectorNode.connection.id,\n        );\n        this.addPort(new CellPortModel(portName, PortModelAlignment.TOP));\n        this.addPort(new CellPortModel(portName, PortModelAlignment.BOTTOM));\n      });\n    }\n  }\n\n  setWidth(newWidth: number) {\n    this.width = newWidth;\n    this.updateDimensions({ width: newWidth, height: newWidth });\n  }\n}\n"],"names":["CellBounds"],"mappings":"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"}