@openchoreo/cell-diagram 1.2.0-rc.1

package/dist/components/Cell/cell-util.esm.js

@@ -0,0 +1,110 @@
+import { NAME_JOIN_CHAR, EMPTY_NODE, CELL_LINK } from '../../resources/constants.esm.js';
+
+function getRoundedOctagonSVG(sideLength, radius, padding = 0) {
+  const sideCount = 8;
+  const halfAngle = (sideCount - 2) * Math.PI / sideCount / 2;
+  const sin = Math.sin(halfAngle);
+  const cos = Math.cos(halfAngle);
+  const gap = sideLength - 2 / Math.tan(halfAngle) * radius;
+  const round = 2 * cos * radius;
+  let diameter = sideLength / cos;
+  let offsetY = 0;
+  diameter += 2 * padding;
+  const points = [
+    [0, radius / sin - radius * sin + padding + offsetY]
+  ];
+  const angles = [halfAngle - Math.PI / 2];
+  for (let i = 1; i <= sideCount; i += 1) {
+    const prev = angles[i - 1];
+    const next = prev + Math.PI - 2 * halfAngle;
+    const middle = (prev + next) / 2;
+    angles.push(next);
+    points.push([Math.cos(middle) * round, Math.sin(middle) * round]);
+    if (i !== sideCount) {
+      points.push([Math.cos(next) * gap, Math.sin(next) * gap]);
+    }
+  }
+  const verticalCut = radius / sin - radius;
+  {
+    diameter -= verticalCut * 2;
+    points[0][1] -= verticalCut;
+  }
+  points[0][0] = diameter / 2 - cos * radius;
+  const width = Math.ceil(diameter);
+  const delta = (width - diameter) / 2;
+  points[0][0] += delta;
+  points[0][1] += delta;
+  const fixFloat = (value) => {
+    const fixed = +value.toPrecision(14);
+    return Math.abs(fixed) < 1e-13 ? 0 : fixed;
+  };
+  const list = [];
+  points.forEach((p, index) => {
+    const x = fixFloat(p[0]);
+    const y = fixFloat(p[1]);
+    if (index === 0) {
+      list.push(`M${x} ${y}`);
+    } else if (index % 2) {
+      list.push(`a${radius} ${radius} 0 0 1 ${x} ${y}`);
+    } else {
+      list.push(`l${x} ${y}`);
+    }
+  });
+  list.push(`Z`);
+  const path = list.join("");
+  return {
+    width,
+    height: width,
+    path
+  };
+}
+function getCellPortId(name, bound, align, ...args) {
+  const portName = getCellPortIdWithoutAlignment(name, bound, ...args);
+  if (align) {
+    return `${align}-${portName}`;
+  }
+  return portName;
+}
+function getCellPortIdWithoutAlignment(name, bound, ...args) {
+  let rest = "";
+  if (args.length > 0) {
+    rest = `${NAME_JOIN_CHAR}${args.join(NAME_JOIN_CHAR)}`;
+  }
+  return `${name}${NAME_JOIN_CHAR}${bound}${rest !== "" ? `${rest}` : ""}`;
+}
+function getCellPortMetadata(cellPortId) {
+  const parts = cellPortId.split(NAME_JOIN_CHAR);
+  const nameAndAlign = parts[0].split("-");
+  let name;
+  let align;
+  if (nameAndAlign.length === 1) {
+    name = nameAndAlign[0];
+  } else {
+    name = nameAndAlign[1];
+    align = nameAndAlign[0];
+  }
+  const bound = parts[1];
+  let args = [];
+  if (parts.length > 2) {
+    args = parts.slice(2);
+  }
+  return { name, bound, align, args };
+}
+function getNodePortId(name, align) {
+  return `${align ? `${align}-` : ""}${name}`;
+}
+function getCellLinkName(source, target) {
+  return `${CELL_LINK}${NAME_JOIN_CHAR}${source}::${target}`;
+}
+function getEmptyNodeName(bound, ...args) {
+  let rest = "";
+  args?.forEach((arg) => {
+    if (arg) {
+      rest += `${NAME_JOIN_CHAR}${arg}`;
+    }
+  });
+  return `${EMPTY_NODE}${NAME_JOIN_CHAR}${bound}${rest !== "" ? `${rest}` : ""}`;
+}
+
+export { getCellLinkName, getCellPortId, getCellPortIdWithoutAlignment, getCellPortMetadata, getEmptyNodeName, getNodePortId, getRoundedOctagonSVG };
+//# sourceMappingURL=cell-util.esm.js.map

package/dist/components/Cell/cell-util.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell-util.esm.js","sources":["../../../src/components/Cell/cell-util.ts"],"sourcesContent":["import {\n  CELL_LINK,\n  EMPTY_NODE,\n  NAME_JOIN_CHAR,\n} from '../../resources/constants';\nimport { CellBounds } from './CellNode/CellModel';\nimport { PortModelAlignment } from '@projectstorm/react-diagrams';\n\nexport function getRoundedOctagonSVG(\n  sideLength: number,\n  radius: number,\n  padding: number = 0,\n): { width: number; height: number; path: string } {\n  const sideCount = 8;\n  const halfAngle = ((sideCount - 2) * Math.PI) / sideCount / 2;\n  const sin = Math.sin(halfAngle);\n  const cos = Math.cos(halfAngle);\n  const gap = sideLength - (2 / Math.tan(halfAngle)) * radius;\n  const round = 2 * cos * radius;\n  let diameter = sideLength / cos;\n  let offsetY = 0;\n\n  if (sideCount % 2) {\n    const vertical = diameter / 2 + (diameter / 2) * sin;\n    diameter = Math.sqrt(Math.pow(sideLength / 2, 2) + Math.pow(vertical, 2));\n    offsetY = (diameter - vertical) / 2;\n  }\n\n  diameter += 2 * padding;\n\n  const getQuadrant = (x: number) =>\n    Math.floor(((x + 2 * Math.PI) % (2 * Math.PI)) / (Math.PI / 2)) + 1;\n\n  const points: number[][] = [\n    [0, radius / sin - radius * sin + padding + offsetY],\n  ];\n  const angles = [halfAngle - Math.PI / 2];\n  let horizontalCut = 0;\n\n  for (let i = 1; i <= sideCount; i += 1) {\n    const prev = angles[i - 1];\n    const next = prev + Math.PI - 2 * halfAngle;\n    const middle = (prev + next) / 2;\n\n    const prevQ = getQuadrant(prev);\n    const nextQ = getQuadrant(next);\n\n    if (prevQ === 1 && nextQ >= 2 && nextQ <= 3) {\n      horizontalCut =\n        (Math.cos(Math.abs(middle - Math.PI / 2)) * radius) / sin - radius;\n    }\n\n    angles.push(next);\n    points.push([Math.cos(middle) * round, Math.sin(middle) * round]);\n    if (i !== sideCount) {\n      points.push([Math.cos(next) * gap, Math.sin(next) * gap]);\n    }\n  }\n\n  const verticalCut = radius / sin - radius;\n\n  if (sideCount % 2) {\n    diameter -= horizontalCut * 2;\n    points[0][1] -= (horizontalCut * 2 + verticalCut) / 2;\n  } else {\n    diameter -= verticalCut * 2;\n    points[0][1] -= verticalCut;\n  }\n  points[0][0] = diameter / 2 - cos * radius;\n\n  const width = Math.ceil(diameter);\n  const delta = (width - diameter) / 2;\n  points[0][0] += delta;\n  points[0][1] += delta;\n\n  const fixFloat = (value: number) => {\n    const fixed = +value.toPrecision(14);\n    return Math.abs(fixed) < 1e-13 ? 0 : fixed;\n  };\n\n  const list: string[] = [];\n  points.forEach((p, index) => {\n    const x = fixFloat(p[0]);\n    const y = fixFloat(p[1]);\n    if (index === 0) {\n      list.push(`M${x} ${y}`);\n    } else if (index % 2) {\n      list.push(`a${radius} ${radius} 0 0 1 ${x} ${y}`);\n    } else {\n      list.push(`l${x} ${y}`);\n    }\n  });\n\n  // Connect the end of the path to the start\n  list.push(`Z`);\n\n  const path = list.join('');\n\n  return {\n    width: width,\n    height: width,\n    path: path,\n  };\n}\n\n// Cell port utils\n\nexport function getCellPortId(\n  name: string,\n  bound: CellBounds,\n  align?: PortModelAlignment,\n  ...args: string[]\n): string {\n  const portName = getCellPortIdWithoutAlignment(name, bound, ...args);\n  if (align) {\n    return `${align}-${portName}`;\n  }\n  return portName;\n}\n\n// this will return the port name without the alignment\nexport function getCellPortIdWithoutAlignment(\n  name: string,\n  bound: CellBounds,\n  ...args: string[]\n): string {\n  let rest = '';\n  if (args.length > 0) {\n    rest = `${NAME_JOIN_CHAR}${args.join(NAME_JOIN_CHAR)}`;\n  }\n  return `${name}${NAME_JOIN_CHAR}${bound}${rest !== '' ? `${rest}` : ''}`;\n}\n\n// destruct the port name to get the name, bound, alignment and args\nexport function getCellPortMetadata(cellPortId: string): {\n  name: string;\n  bound: CellBounds;\n  align?: PortModelAlignment;\n  args: string[];\n} {\n  const parts = cellPortId.split(NAME_JOIN_CHAR);\n  const nameAndAlign = parts[0].split('-');\n  let name: string;\n  let align: PortModelAlignment | undefined;\n  if (nameAndAlign.length === 1) {\n    name = nameAndAlign[0];\n  } else {\n    name = nameAndAlign[1];\n    align = nameAndAlign[0] as PortModelAlignment;\n  }\n  const bound = parts[1] as CellBounds;\n  let args: string[] = [];\n  if (parts.length > 2) {\n    args = parts.slice(2);\n  }\n  return { name, bound, align, args };\n}\n\nexport function getNodePortId(\n  name: string,\n  align?: PortModelAlignment,\n): string {\n  return `${align ? `${align}-` : ''}${name}`;\n}\n\n// Cell link utils\n\nexport function getCellLinkName(source: string, target: string): string {\n  return `${CELL_LINK}${NAME_JOIN_CHAR}${source}::${target}`;\n}\n\n// Empty node utils\n\nexport function getEmptyNodeName(bound: CellBounds, ...args: string[]): string {\n  let rest = '';\n  args?.forEach(arg => {\n    if (arg) {\n      rest += `${NAME_JOIN_CHAR}${arg}`;\n    }\n  });\n  return `${EMPTY_NODE}${NAME_JOIN_CHAR}${bound}${\n    rest !== '' ? `${rest}` : ''\n  }`;\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Component/ComponentLink/ComponentLinkFactory.esm.js

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

package/dist/components/Component/ComponentLink/ComponentLinkFactory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentLinkFactory.esm.js","sources":["../../../../src/components/Component/ComponentLink/ComponentLinkFactory.tsx"],"sourcesContent":["import { DefaultLinkFactory } from '@projectstorm/react-diagrams';\nimport { ComponentLinkModel } from './ComponentLinkModel';\nimport { ComponentLinkWidget } from './ComponentLinkWidget';\n\nexport class ComponentLinkFactory extends DefaultLinkFactory {\n  constructor() {\n    super('componentLink');\n  }\n\n  generateModel(event: { initialConfig: any }): ComponentLinkModel {\n    return new ComponentLinkModel(event.initialConfig.id);\n  }\n\n  generateReactWidget(props: { model: ComponentLinkModel }): JSX.Element {\n    return <ComponentLinkWidget link={props.model} engine={this.engine} />;\n  }\n}\n"],"names":[],"mappings":";;;;;AAIO,MAAM,6BAA6B,kBAAA,CAAmB;AAAA,EAC3D,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM,eAAe,CAAA;AAAA,EACvB;AAAA,EAEA,cAAc,KAAA,EAAmD;AAC/D,IAAA,OAAO,IAAI,kBAAA,CAAmB,KAAA,CAAM,aAAA,CAAc,EAAE,CAAA;AAAA,EACtD;AAAA,EAEA,oBAAoB,KAAA,EAAmD;AACrE,IAAA,2BAAQ,mBAAA,EAAA,EAAoB,IAAA,EAAM,MAAM,KAAA,EAAO,MAAA,EAAQ,KAAK,MAAA,EAAQ,CAAA;AAAA,EACtE;AACF;;;;"}

package/dist/components/Component/ComponentLink/ComponentLinkModel.esm.js

@@ -0,0 +1,20 @@
+import { COMPONENT_LINK } from '../../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+import { SharedLinkModel } from '../../SharedLink/SharedLink.esm.js';
+
+class ComponentLinkModel extends SharedLinkModel {
+  sourceNode;
+  targetNode;
+  constructor(id) {
+    super(id, COMPONENT_LINK);
+  }
+  setSourceNode(nodeId) {
+    this.sourceNode = { nodeId };
+  }
+  setTargetNode(nodeId) {
+    this.targetNode = { nodeId };
+  }
+}
+
+export { ComponentLinkModel };
+//# sourceMappingURL=ComponentLinkModel.esm.js.map

package/dist/components/Component/ComponentLink/ComponentLinkModel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentLinkModel.esm.js","sources":["../../../../src/components/Component/ComponentLink/ComponentLinkModel.ts"],"sourcesContent":["import { COMPONENT_LINK } from '../../../resources';\nimport { SharedLinkModel } from '../../SharedLink/SharedLink';\n\ninterface LinkOrigins {\n  nodeId: string;\n}\n\nexport class ComponentLinkModel extends SharedLinkModel {\n  sourceNode!: LinkOrigins;\n  targetNode!: LinkOrigins;\n\n  constructor(id: string) {\n    super(id, COMPONENT_LINK);\n  }\n\n  setSourceNode(nodeId: string) {\n    this.sourceNode = { nodeId };\n  }\n\n  setTargetNode(nodeId: string) {\n    this.targetNode = { nodeId };\n  }\n}\n"],"names":[],"mappings":";;;;AAOO,MAAM,2BAA2B,eAAA,CAAgB;AAAA,EACtD,UAAA;AAAA,EACA,UAAA;AAAA,EAEA,YAAY,EAAA,EAAY;AACtB,IAAA,KAAA,CAAM,IAAI,cAAc,CAAA;AAAA,EAC1B;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;AACF;;;;"}

package/dist/components/Component/ComponentLink/ComponentLinkWidget.esm.js

@@ -0,0 +1,205 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useMemo, useContext, useState, useEffect } from 'react';
+import { COMPONENT_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 { useColors } from '../../../theme/ThemeContext.esm.js';
+import '../../../theme/CellDiagramThemeProvider.esm.js';
+
+function ComponentLinkWidget(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 } = { min: 0, max: 0 }
+    } = {},
+    previewMode
+  } = useContext(DiagramContext);
+  const [isSelected, setIsSelected] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(link.tooltip || link.observations?.length > 0) && Boolean(anchorEl);
+  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;
+  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]);
+  const selectPath = () => {
+    if (hideLink || previewMode) {
+      return;
+    }
+    setIsSelected(true);
+    link.selectLinkedNodes();
+  };
+  const unselectPath = () => {
+    if (previewMode) {
+      return;
+    }
+    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: COMPONENT_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: !hasObservabilityLayer ? `url(#${link.getLinkArrowId()})` : ""
+            }
+          ),
+          hasDiffLayer && link.observationOnly && /* @__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, 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 { ComponentLinkWidget };
+//# sourceMappingURL=ComponentLinkWidget.esm.js.map

package/dist/components/Component/ComponentLink/ComponentLinkWidget.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentLinkWidget.esm.js","sources":["../../../../src/components/Component/ComponentLink/ComponentLinkWidget.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useMemo, useState } from 'react';\nimport { DiagramEngine } from '@projectstorm/react-diagrams';\nimport { ComponentLinkModel } from './ComponentLinkModel';\nimport { COMPONENT_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 { useColors } from '../../../theme';\n\ninterface WidgetProps {\n  engine: DiagramEngine;\n  link: ComponentLinkModel;\n}\n\nexport function ComponentLinkWidget(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: {\n      requestCount: { min, max } = { 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    Boolean(link.tooltip || link.observations?.length > 0) && Boolean(anchorEl);\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\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  const selectPath = () => {\n    if (hideLink || previewMode) {\n      return;\n    }\n    setIsSelected(true);\n    link.selectLinkedNodes();\n  };\n\n  const unselectPath = () => {\n    if (previewMode) {\n      return;\n    }\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={COMPONENT_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            !hasObservabilityLayer ? `url(#${link.getLinkArrowId()})` : ''\n          }\n        />\n        {hasDiffLayer && link.observationOnly && (\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={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/Component/ComponentNode/ComponentFactory.esm.js

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

package/dist/components/Component/ComponentNode/ComponentFactory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentFactory.esm.js","sources":["../../../../src/components/Component/ComponentNode/ComponentFactory.tsx"],"sourcesContent":["import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { DiagramEngine } from '@projectstorm/react-diagrams-core';\nimport { ComponentModel } from './ComponentModel';\nimport { ComponentWidget } from './ComponentWidget';\nimport { COMPONENT_NODE } from '../../../resources';\n\nexport class ComponentFactory extends AbstractReactFactory<\n  ComponentModel,\n  DiagramEngine\n> {\n  constructor() {\n    super(COMPONENT_NODE);\n  }\n\n  generateReactWidget(event: { model: ComponentModel }): JSX.Element {\n    return <ComponentWidget engine={this.engine} node={event.model} />;\n  }\n\n  generateModel(event: { initialConfig: any }) {\n    return new ComponentModel(event.initialConfig.component);\n  }\n}\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,yBAAyB,oBAAA,CAGpC;AAAA,EACA,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM,cAAc,CAAA;AAAA,EACtB;AAAA,EAEA,oBAAoB,KAAA,EAA+C;AACjE,IAAA,2BAAQ,eAAA,EAAA,EAAgB,MAAA,EAAQ,KAAK,MAAA,EAAQ,IAAA,EAAM,MAAM,KAAA,EAAO,CAAA;AAAA,EAClE;AAAA,EAEA,cAAc,KAAA,EAA+B;AAC3C,IAAA,OAAO,IAAI,cAAA,CAAe,KAAA,CAAM,aAAA,CAAc,SAAS,CAAA;AAAA,EACzD;AACF;;;;"}

package/dist/components/Component/ComponentNode/ComponentHead/ComponentHead.esm.js

@@ -0,0 +1,97 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { ComponentPortWidget } from '../../ComponentPort/ComponentPortWidget.esm.js';
+import { ComponentHead, IconWrapper, ComponentKind } from '../styles.esm.js';
+import { ComponentType } from '../../../../types.esm.js';
+import * as index from '../../../../resources/assets/icons/index.esm.js';
+import { MoreVertMenu } from '../../../MoreVertMenu/MoreVertMenu.esm.js';
+import { DiagramContext } from '../../../DiagramContext/DiagramContext.esm.js';
+import { COMPONENT_LINE_PREVIEW_WIDTH, COMPONENT_LINE_MIN_WIDTH } from '../../../../resources/constants.esm.js';
+import { ServiceIcon } from '../../../../resources/assets/icons/ServiceIcon.esm.js';
+import { SettingsIcon } from '../../../../resources/assets/icons/SettingsIcon.esm.js';
+import { ExternalConsumerIcon } from '../../../../resources/assets/icons/ExternalConsumerIcon.esm.js';
+import { WebhookIcon } from '../../../../resources/assets/icons/WebhookIcon.esm.js';
+import { WebAppIcon } from '../../../../resources/assets/icons/WebAppIcon.esm.js';
+import { AddCheckIcon } from '../../../../resources/assets/icons/AddCheckIcon.esm.js';
+import { ScheduledTaskIcon } from '../../../../resources/assets/icons/ScheduledTaskIcon.esm.js';
+import { ManualTaskIcon } from '../../../../resources/assets/icons/ManualTaskIcon.esm.js';
+import { EventIcon } from '../../../../resources/assets/icons/EventIcon.esm.js';
+import { ProxyIcon } from '../../../../resources/assets/icons/ProxyIcon.esm.js';
+import { CodeIcon } from '../../../../resources/assets/icons/CodeIcon.esm.js';
+
+function ComponentHeadWidget(props) {
+  const { engine, node, isSelected, isFocused, menuItems, onFocusOut } = props;
+  const { zoomLevel, previewMode } = useContext(DiagramContext);
+  const isDisabled = Boolean(node.component.disabled?.status);
+  const getComponentTypeIcon = (type) => {
+    switch (type) {
+      case ComponentType.API_PROXY:
+        return /* @__PURE__ */ jsx(ProxyIcon, {});
+      case ComponentType.EVENT_HANDLER:
+        return /* @__PURE__ */ jsx(EventIcon, {});
+      case ComponentType.MANUAL_TASK:
+        return /* @__PURE__ */ jsx(ManualTaskIcon, {});
+      case ComponentType.SCHEDULED_TASK:
+        return /* @__PURE__ */ jsx(ScheduledTaskIcon, {});
+      case ComponentType.SERVICE:
+        return /* @__PURE__ */ jsx(ServiceIcon, {});
+      case ComponentType.TEST:
+        return /* @__PURE__ */ jsx(AddCheckIcon, {});
+      case ComponentType.WEB_APP:
+        return /* @__PURE__ */ jsx(WebAppIcon, {});
+      case ComponentType.WEB_HOOK:
+        return /* @__PURE__ */ jsx(WebhookIcon, {});
+      case ComponentType.EXTERNAL_CONSUMER:
+        return /* @__PURE__ */ jsx(ExternalConsumerIcon, {});
+      case ComponentType.SYSTEM_COMPONENT:
+        return /* @__PURE__ */ jsx(SettingsIcon, {});
+      default:
+        return /* @__PURE__ */ jsx(ServiceIcon, {});
+    }
+  };
+  const getComponentBuildIcon = (kind) => {
+    const icon = `${kind}Icon`;
+    const IconComponent = index[icon] || CodeIcon;
+    return /* @__PURE__ */ jsx(IconComponent, {});
+  };
+  return /* @__PURE__ */ jsxs(
+    ComponentHead,
+    {
+      isSelected: isSelected || isFocused,
+      borderWidth: previewMode ? COMPONENT_LINE_PREVIEW_WIDTH : node.getDynamicLineWidth(zoomLevel, COMPONENT_LINE_MIN_WIDTH),
+      disabled: isDisabled,
+      children: [
+        /* @__PURE__ */ jsx(IconWrapper, { disabled: isDisabled, previewMode: Boolean(previewMode), children: getComponentTypeIcon(node.component.type) }),
+        /* @__PURE__ */ jsx(
+          ComponentPortWidget,
+          {
+            port: node.getPort(`left-${node.getID()}`),
+            engine
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ComponentPortWidget,
+          {
+            port: node.getPort(`right-${node.getID()}`),
+            engine
+          }
+        ),
+        node.component.buildPack && node.component.buildPack.toLowerCase() !== "other" && !previewMode && /* @__PURE__ */ jsx(ComponentKind, { children: getComponentBuildIcon(node.component.buildPack) }),
+        isFocused && menuItems?.length > 0 && !previewMode && /* @__PURE__ */ jsx(
+          MoreVertMenu,
+          {
+            component: node.component,
+            menuItems,
+            hasComponentKind: Boolean(
+              node.component.buildPack && node.component.buildPack.toLowerCase() !== "other"
+            ),
+            onClose: onFocusOut
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ComponentHeadWidget };
+//# sourceMappingURL=ComponentHead.esm.js.map

package/dist/components/Component/ComponentNode/ComponentHead/ComponentHead.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentHead.esm.js","sources":["../../../../../src/components/Component/ComponentNode/ComponentHead/ComponentHead.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { DiagramEngine } from '@projectstorm/react-diagrams';\nimport { ComponentPortWidget } from '../../ComponentPort/ComponentPortWidget';\nimport { ComponentPortModel } from '../../ComponentPort/ComponentPortModel';\nimport { ComponentModel } from '../ComponentModel';\nimport { ComponentHead, ComponentKind, IconWrapper } from '../styles';\nimport { ComponentType } from '../../../../types';\nimport {\n  WebAppIcon,\n  ScheduledTaskIcon,\n  ServiceIcon,\n  ProxyIcon,\n  EventIcon,\n  AddCheckIcon,\n  ManualTaskIcon,\n  WebhookIcon,\n  ExternalConsumerIcon,\n  SettingsIcon,\n} from '../../../../resources/assets/icons';\nimport * as icons from '../../../../resources/assets/icons'; // import all icon SVGs as an object\nimport { MoreVertMenu } from '../../../MoreVertMenu/MoreVertMenu';\nimport { MoreVertMenuItem } from '../../../../types';\nimport { DiagramContext } from '../../../DiagramContext/DiagramContext';\nimport {\n  COMPONENT_LINE_MIN_WIDTH,\n  COMPONENT_LINE_PREVIEW_WIDTH,\n} from '../../../../resources';\n\ninterface ServiceHeadProps {\n  engine: DiagramEngine;\n  node: ComponentModel;\n  isSelected: boolean;\n  isFocused: boolean;\n  menuItems: MoreVertMenuItem[];\n  onFocusOut?: () => void;\n}\n\nexport function ComponentHeadWidget(props: ServiceHeadProps) {\n  const { engine, node, isSelected, isFocused, menuItems, onFocusOut } = props;\n\n  const { zoomLevel, previewMode } = useContext(DiagramContext);\n\n  const isDisabled = Boolean(node.component.disabled?.status);\n  const getComponentTypeIcon = (type: ComponentType) => {\n    switch (type) {\n      case ComponentType.API_PROXY:\n        return <ProxyIcon />;\n      case ComponentType.EVENT_HANDLER:\n        return <EventIcon />;\n      case ComponentType.MANUAL_TASK:\n        return <ManualTaskIcon />;\n      case ComponentType.SCHEDULED_TASK:\n        return <ScheduledTaskIcon />;\n      case ComponentType.SERVICE:\n        return <ServiceIcon />;\n      case ComponentType.TEST:\n        return <AddCheckIcon />;\n      case ComponentType.WEB_APP:\n        return <WebAppIcon />;\n      case ComponentType.WEB_HOOK:\n        return <WebhookIcon />;\n      case ComponentType.EXTERNAL_CONSUMER:\n        return <ExternalConsumerIcon />;\n      case ComponentType.SYSTEM_COMPONENT:\n        return <SettingsIcon />;\n      default:\n        return <ServiceIcon />;\n    }\n  };\n\n  const getComponentBuildIcon = (kind: string) => {\n    const icon = `${kind}Icon` as keyof typeof icons;\n    const IconComponent = icons[icon] || icons.codeIcon;\n    return <IconComponent />;\n  };\n\n  return (\n    <ComponentHead\n      isSelected={isSelected || isFocused}\n      borderWidth={\n        previewMode\n          ? COMPONENT_LINE_PREVIEW_WIDTH\n          : node.getDynamicLineWidth(zoomLevel, COMPONENT_LINE_MIN_WIDTH)\n      }\n      disabled={isDisabled}\n    >\n      <IconWrapper disabled={isDisabled} previewMode={Boolean(previewMode)}>\n        {getComponentTypeIcon(node.component.type)}\n      </IconWrapper>\n      <ComponentPortWidget\n        port={node.getPort(`left-${node.getID()}`) as ComponentPortModel}\n        engine={engine}\n      />\n      <ComponentPortWidget\n        port={node.getPort(`right-${node.getID()}`) as ComponentPortModel}\n        engine={engine}\n      />\n      {node.component.buildPack &&\n        node.component.buildPack.toLowerCase() !== 'other' &&\n        !previewMode && (\n          <ComponentKind>\n            {getComponentBuildIcon(node.component.buildPack)}\n          </ComponentKind>\n        )}\n      {isFocused && menuItems?.length > 0 && !previewMode && (\n        <MoreVertMenu\n          component={node.component}\n          menuItems={menuItems}\n          hasComponentKind={Boolean(\n            node.component.buildPack &&\n              node.component.buildPack.toLowerCase() !== 'other',\n          )}\n          onClose={onFocusOut}\n        />\n      )}\n    </ComponentHead>\n  );\n}\n"],"names":["icons","icons.codeIcon"],"mappings":"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"}

package/dist/components/Component/ComponentNode/ComponentModel.esm.js

@@ -0,0 +1,26 @@
+import { PortModelAlignment } from '@projectstorm/react-diagrams';
+import { SharedNodeModel } from '../../SharedNode/SharedNode.esm.js';
+import { ComponentPortModel } from '../ComponentPort/ComponentPortModel.esm.js';
+import { ComponentType } from '../../../types.esm.js';
+import { COMPONENT_NODE } from '../../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+import { getComponentName } from '../component-node-util.esm.js';
+
+class ComponentModel extends SharedNodeModel {
+  component;
+  constructor(component) {
+    const name = getComponentName(component);
+    super(COMPONENT_NODE, name);
+    this.component = component;
+    this.addPort(new ComponentPortModel(name, PortModelAlignment.LEFT));
+    this.addPort(new ComponentPortModel(name, PortModelAlignment.RIGHT));
+    this.addPort(new ComponentPortModel(name, PortModelAlignment.TOP));
+    this.addPort(new ComponentPortModel(name, PortModelAlignment.BOTTOM));
+  }
+  isExternalConsumer() {
+    return this.component.type === ComponentType.EXTERNAL_CONSUMER;
+  }
+}
+
+export { ComponentModel };
+//# sourceMappingURL=ComponentModel.esm.js.map

package/dist/components/Component/ComponentNode/ComponentModel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentModel.esm.js","sources":["../../../../src/components/Component/ComponentNode/ComponentModel.ts"],"sourcesContent":["import { PortModelAlignment } from '@projectstorm/react-diagrams';\nimport { SharedNodeModel } from '../../SharedNode/SharedNode';\nimport { ComponentPortModel } from '../ComponentPort/ComponentPortModel';\nimport { Component, ComponentType } from '../../../types';\nimport { COMPONENT_NODE } from '../../../resources';\nimport { getComponentName } from '../component-node-util';\n\nexport class ComponentModel extends SharedNodeModel {\n  readonly component: Component;\n\n  constructor(component: Component) {\n    const name = getComponentName(component);\n    super(COMPONENT_NODE, name);\n    this.component = component;\n\n    this.addPort(new ComponentPortModel(name, PortModelAlignment.LEFT));\n    this.addPort(new ComponentPortModel(name, PortModelAlignment.RIGHT));\n\n    this.addPort(new ComponentPortModel(name, PortModelAlignment.TOP));\n    this.addPort(new ComponentPortModel(name, PortModelAlignment.BOTTOM));\n  }\n\n  isExternalConsumer(): boolean {\n    return this.component.type === ComponentType.EXTERNAL_CONSUMER;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAOO,MAAM,uBAAuB,eAAA,CAAgB;AAAA,EACzC,SAAA;AAAA,EAET,YAAY,SAAA,EAAsB;AAChC,IAAA,MAAM,IAAA,GAAO,iBAAiB,SAAS,CAAA;AACvC,IAAA,KAAA,CAAM,gBAAgB,IAAI,CAAA;AAC1B,IAAA,IAAA,CAAK,SAAA,GAAY,SAAA;AAEjB,IAAA,IAAA,CAAK,QAAQ,IAAI,kBAAA,CAAmB,IAAA,EAAM,kBAAA,CAAmB,IAAI,CAAC,CAAA;AAClE,IAAA,IAAA,CAAK,QAAQ,IAAI,kBAAA,CAAmB,IAAA,EAAM,kBAAA,CAAmB,KAAK,CAAC,CAAA;AAEnE,IAAA,IAAA,CAAK,QAAQ,IAAI,kBAAA,CAAmB,IAAA,EAAM,kBAAA,CAAmB,GAAG,CAAC,CAAA;AACjE,IAAA,IAAA,CAAK,QAAQ,IAAI,kBAAA,CAAmB,IAAA,EAAM,kBAAA,CAAmB,MAAM,CAAC,CAAA;AAAA,EACtE;AAAA,EAEA,kBAAA,GAA8B;AAC5B,IAAA,OAAO,IAAA,CAAK,SAAA,CAAU,IAAA,KAAS,aAAA,CAAc,iBAAA;AAAA,EAC/C;AACF;;;;"}