@openchoreo/cell-diagram 1.2.0-rc.1

package/dist/components/SharedLink/SharedLink.esm.js

@@ -0,0 +1,175 @@
+import { DefaultLinkModel, PortModelAlignment } from '@projectstorm/react-diagrams';
+import { BezierCurve } from '@projectstorm/geometry';
+import { forIn } from 'lodash';
+import styled from '@emotion/styled';
+import { keyframes, css } from '@emotion/react';
+import { EMPTY_NODE } from '../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+import { CellBounds } from '../Cell/CellNode/CellModel.esm.js';
+import { getCellPortMetadata, getEmptyNodeName } from '../Cell/cell-util.esm.js';
+
+class SharedLinkModel extends DefaultLinkModel {
+  diagramEngine;
+  observations;
+  observationOnly;
+  tooltip;
+  constructor(id, type) {
+    super({
+      id,
+      type
+    });
+  }
+  initLinks = (diagramEngine) => {
+    this.diagramEngine = diagramEngine;
+  };
+  fireEventTroughLink = (event) => {
+    const selectTargetPort = (targetNode2, alignment, bound) => {
+      if (targetNode2.getType() === EMPTY_NODE && targetNode2.bound === bound) {
+        const portMetadata = getCellPortMetadata(targetNode2.getID());
+        if (!portMetadata?.args) {
+          return;
+        }
+        const targetPort = targetNode2.getPortFromID(
+          `${alignment}-${getEmptyNodeName(bound, ...portMetadata.args)}`
+        );
+        if (!targetPort) {
+          return;
+        }
+        forIn(targetPort.getLinks(), (link) => {
+          link.fireEvent({ component: this }, event);
+        });
+      }
+    };
+    this.getSourcePort().getNode().fireEvent({ component: this }, event);
+    const targetNode = this.getTargetPort().getNode();
+    targetNode.fireEvent({ component: this }, event);
+    selectTargetPort(
+      targetNode,
+      PortModelAlignment.BOTTOM,
+      CellBounds.SouthBound
+    );
+    selectTargetPort(
+      targetNode,
+      PortModelAlignment.RIGHT,
+      CellBounds.EastBound
+    );
+  };
+  selectLinkedNodes = () => {
+    this.fireEventTroughLink("SELECT");
+  };
+  resetLinkedNodes = () => {
+    this.fireEventTroughLink("UNSELECT");
+  };
+  getCurvePath = () => {
+    const lineCurve = new BezierCurve();
+    if (this.getSourcePort() && this.getTargetPort()) {
+      const markerSpace = this.getType() === "componentLink" ? 70 : 120;
+      lineCurve.setSource(this.getSourcePort().getPosition());
+      lineCurve.setTarget(this.getTargetPort().getPosition());
+      const sourcePoint = this.getSourcePort().getPosition().clone();
+      const targetPoint = this.getTargetPort().getPosition().clone();
+      if (this.getTargetPort().getOptions().alignment === PortModelAlignment.LEFT) {
+        targetPoint.x = targetPoint.x - markerSpace;
+      } else if (this.getTargetPort().getOptions().alignment === PortModelAlignment.RIGHT) {
+        targetPoint.x = targetPoint.x + markerSpace;
+      } else if (this.getTargetPort().getOptions().alignment === PortModelAlignment.BOTTOM) {
+        targetPoint.y = targetPoint.y + markerSpace;
+      } else {
+        targetPoint.y = targetPoint.y - markerSpace;
+      }
+      if (this.getSourcePort().getOptions().alignment === PortModelAlignment.LEFT) {
+        sourcePoint.x = sourcePoint.x - markerSpace;
+      } else if (this.getSourcePort().getOptions().alignment === PortModelAlignment.RIGHT) {
+        sourcePoint.x = sourcePoint.x + markerSpace;
+      } else if (this.getSourcePort().getOptions().alignment === PortModelAlignment.BOTTOM) {
+        sourcePoint.y = sourcePoint.y + markerSpace;
+      } else {
+        sourcePoint.y = sourcePoint.y - markerSpace;
+      }
+      lineCurve.setSourceControl(sourcePoint);
+      lineCurve.setTargetControl(targetPoint);
+      lineCurve.getSourceControl().translate(...this.calculateControlOffset(this.getSourcePort()));
+      lineCurve.getTargetControl().translate(...this.calculateControlOffset(this.getTargetPort()));
+    }
+    return lineCurve.getSVGCurve();
+  };
+  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.RIGHT) {
+      points = `${targetPort.x + 2 * sizeMultiplier} ${targetPort.y}, ${targetPort.x + 12 * sizeMultiplier} ${targetPort.y + 6 * sizeMultiplier},
+                ${targetPort.x + 12 * sizeMultiplier} ${targetPort.y - 6 * sizeMultiplier}`;
+    } else if (this.getTargetPort().getOptions().alignment === PortModelAlignment.LEFT) {
+      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.BOTTOM) {
+      points = `${targetPort.x} ${targetPort.y + 2 * sizeMultiplier}, ${targetPort.x + 10 * sizeMultiplier} ${targetPort.y + 14 * sizeMultiplier},
+                ${targetPort.x - 10 * sizeMultiplier} ${targetPort.y + 14 * sizeMultiplier}`;
+    } else if (this.getTargetPort().getOptions().alignment === PortModelAlignment.TOP) {
+      points = `${targetPort.x} ${targetPort.y}, ${targetPort.x + 10 * sizeMultiplier} ${targetPort.y - 15 * sizeMultiplier},
+                ${targetPort.x - 10 * sizeMultiplier} ${targetPort.y - 15 * sizeMultiplier}`;
+    }
+    return points;
+  };
+  setObservations = (observations, observationOnly) => {
+    this.observations = observations;
+    if (observationOnly) {
+      this.observationOnly = observationOnly;
+    }
+  };
+  setTooltip = (tooltip) => {
+    this.tooltip = tooltip;
+  };
+  getMidPoint = () => {
+    const sourcePortPosition = this.getSourcePort().getPosition();
+    const targetPortPosition = this.getTargetPort().getPosition();
+    return {
+      x: (sourcePortPosition.x + targetPortPosition.x) / 2,
+      y: (sourcePortPosition.y + targetPortPosition.y) / 2
+    };
+  };
+  scaleValueToLinkWidth = (requestCount, minRequestCount, maxRequestCount, maxPossibleRequestCount = 1e3, minStrokeWidth = 2, maxFullStrokeWidth = 30) => {
+    const boundedRequestCount = Math.max(
+      minRequestCount,
+      Math.min(requestCount, maxRequestCount)
+    );
+    const range = maxRequestCount - minRequestCount;
+    const normalizedCount = (boundedRequestCount - minRequestCount) / range;
+    const normalizedMaxCount = 1;
+    const base = 10;
+    const logCount = Math.log(normalizedCount + 1) / Math.log(base);
+    const logMaxCount = Math.log(normalizedMaxCount + 1) / Math.log(base);
+    const scalingFactor = maxRequestCount < maxPossibleRequestCount ? maxRequestCount / maxPossibleRequestCount : 1;
+    const dynamicMaxStrokeWidth = minStrokeWidth + scalingFactor * (maxFullStrokeWidth - minStrokeWidth);
+    const scale = logCount / logMaxCount * (dynamicMaxStrokeWidth - minStrokeWidth);
+    return minStrokeWidth + scale;
+  };
+  getLinkArrowId = () => {
+    const id = this.getID().replace(/[^a-zA-Z0-9]/g, "");
+    return `${id}-arrow`;
+  };
+}
+var SharedLink;
+((SharedLink2) => {
+  SharedLink2.Keyframes = keyframes`
+		from {
+			stroke-dashoffset: 24;
+		}
+		to {
+			stroke-dashoffset: 0;
+		}
+	`;
+  const selected = css`
+    stroke-dasharray: 10, 6;
+    animation: ${SharedLink2.Keyframes} 1s linear infinite;
+  `;
+  SharedLink2.Path = styled.path`
+    ${(p) => p.selected && selected};
+    fill: none;
+    pointer-events: auto;
+  `;
+})(SharedLink || (SharedLink = {}));
+
+export { SharedLink, SharedLinkModel };
+//# sourceMappingURL=SharedLink.esm.js.map

package/dist/components/SharedLink/SharedLink.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharedLink.esm.js","sources":["../../../src/components/SharedLink/SharedLink.ts"],"sourcesContent":["import {\n  DefaultLinkModel,\n  DiagramEngine,\n  NodeModel,\n  PortModelAlignment,\n} from '@projectstorm/react-diagrams';\nimport { BezierCurve, Point } from '@projectstorm/geometry';\nimport { forIn } from 'lodash';\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\nimport { EMPTY_NODE } from '../../resources';\nimport { EmptyModel } from '../Cell/EmptyNode/EmptyModel';\nimport { CellBounds } from '../Cell/CellNode/CellModel';\nimport { getCellPortMetadata } from '../Cell/cell-util';\nimport { getEmptyNodeName } from '../Cell/cell-util';\nimport { Observations } from '../../types';\n\nexport class SharedLinkModel extends DefaultLinkModel {\n  diagramEngine!: DiagramEngine;\n  observations!: Observations[];\n  observationOnly!: boolean;\n  tooltip!: string;\n\n  constructor(id: string, type: string) {\n    super({\n      id: id,\n      type: type,\n    });\n  }\n\n  initLinks = (diagramEngine: DiagramEngine) => {\n    this.diagramEngine = diagramEngine;\n  };\n\n  fireEventTroughLink = (event: string) => {\n    const selectTargetPort = (\n      targetNode: NodeModel,\n      alignment: PortModelAlignment,\n      bound: CellBounds,\n    ) => {\n      if (\n        targetNode.getType() === EMPTY_NODE &&\n        (targetNode as EmptyModel).bound === bound\n      ) {\n        const portMetadata = getCellPortMetadata(targetNode.getID());\n        if (!portMetadata?.args) {\n          return;\n        }\n        const targetPort = targetNode.getPortFromID(\n          `${alignment}-${getEmptyNodeName(bound, ...portMetadata.args)}`,\n        );\n        if (!targetPort) {\n          return;\n        }\n        forIn(targetPort.getLinks(), link => {\n          link.fireEvent({ component: this }, event);\n        });\n      }\n    };\n\n    // notify source node\n    this.getSourcePort().getNode().fireEvent({ component: this }, event);\n    //  notify target node\n    const targetNode = this.getTargetPort().getNode();\n    // notify immediate target node\n    targetNode.fireEvent({ component: this }, event);\n    // notify target connection nodes\n    selectTargetPort(\n      targetNode,\n      PortModelAlignment.BOTTOM,\n      CellBounds.SouthBound,\n    );\n    // notify target inter org service nodes\n    selectTargetPort(\n      targetNode,\n      PortModelAlignment.RIGHT,\n      CellBounds.EastBound,\n    );\n  };\n\n  selectLinkedNodes = () => {\n    this.fireEventTroughLink('SELECT');\n  };\n\n  resetLinkedNodes = () => {\n    this.fireEventTroughLink('UNSELECT');\n  };\n\n  getCurvePath = (): string => {\n    const lineCurve = new BezierCurve();\n\n    if (this.getSourcePort() && this.getTargetPort()) {\n      const markerSpace: number = this.getType() === 'componentLink' ? 70 : 120;\n\n      lineCurve.setSource(this.getSourcePort().getPosition());\n      lineCurve.setTarget(this.getTargetPort().getPosition());\n\n      // With a leeway space for the marker\n      const sourcePoint: Point = this.getSourcePort().getPosition().clone();\n      const targetPoint: Point = this.getTargetPort().getPosition().clone();\n\n      if (\n        this.getTargetPort().getOptions().alignment === PortModelAlignment.LEFT\n      ) {\n        targetPoint.x = targetPoint.x - markerSpace;\n      } else if (\n        this.getTargetPort().getOptions().alignment === PortModelAlignment.RIGHT\n      ) {\n        targetPoint.x = targetPoint.x + markerSpace;\n      } else if (\n        this.getTargetPort().getOptions().alignment ===\n        PortModelAlignment.BOTTOM\n      ) {\n        targetPoint.y = targetPoint.y + markerSpace;\n      } else {\n        targetPoint.y = targetPoint.y - markerSpace;\n      }\n\n      if (\n        this.getSourcePort().getOptions().alignment === PortModelAlignment.LEFT\n      ) {\n        sourcePoint.x = sourcePoint.x - markerSpace;\n      } else if (\n        this.getSourcePort().getOptions().alignment === PortModelAlignment.RIGHT\n      ) {\n        sourcePoint.x = sourcePoint.x + markerSpace;\n      } else if (\n        this.getSourcePort().getOptions().alignment ===\n        PortModelAlignment.BOTTOM\n      ) {\n        sourcePoint.y = sourcePoint.y + markerSpace;\n      } else {\n        sourcePoint.y = sourcePoint.y - markerSpace;\n      }\n\n      lineCurve.setSourceControl(sourcePoint);\n      lineCurve.setTargetControl(targetPoint);\n      lineCurve\n        .getSourceControl()\n        .translate(...this.calculateControlOffset(this.getSourcePort()));\n      lineCurve\n        .getTargetControl()\n        .translate(...this.calculateControlOffset(this.getTargetPort()));\n    }\n\n    return lineCurve.getSVGCurve();\n  };\n\n  getArrowHeadPoints = (scale = 1): string => {\n    let points: string = '';\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.RIGHT\n    ) {\n      points = `${targetPort.x + 2 * sizeMultiplier} ${targetPort.y}, ${\n        targetPort.x + 12 * sizeMultiplier\n      } ${targetPort.y + 6 * sizeMultiplier},\n                ${targetPort.x + 12 * sizeMultiplier} ${\n        targetPort.y - 6 * sizeMultiplier\n      }`;\n    } else if (\n      this.getTargetPort().getOptions().alignment === PortModelAlignment.LEFT\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.BOTTOM\n    ) {\n      points = `${targetPort.x} ${targetPort.y + 2 * sizeMultiplier}, ${\n        targetPort.x + 10 * sizeMultiplier\n      } ${targetPort.y + 14 * sizeMultiplier},\n                ${targetPort.x - 10 * sizeMultiplier} ${\n        targetPort.y + 14 * sizeMultiplier\n      }`;\n    } else if (\n      this.getTargetPort().getOptions().alignment === PortModelAlignment.TOP\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  setObservations = (\n    observations: Observations[],\n    observationOnly?: boolean,\n  ) => {\n    this.observations = observations;\n    if (observationOnly) {\n      this.observationOnly = observationOnly;\n    }\n  };\n\n  setTooltip = (tooltip: string) => {\n    this.tooltip = tooltip;\n  };\n\n  getMidPoint = () => {\n    const sourcePortPosition = this.getSourcePort().getPosition();\n    const targetPortPosition = this.getTargetPort().getPosition();\n    // Get midpoint of the link line\n    return {\n      x: (sourcePortPosition.x + targetPortPosition.x) / 2,\n      y: (sourcePortPosition.y + targetPortPosition.y) / 2,\n    };\n  };\n\n  scaleValueToLinkWidth = (\n    requestCount: number,\n    minRequestCount: number,\n    maxRequestCount: number,\n    maxPossibleRequestCount: number = 1000,\n    minStrokeWidth: number = 2,\n    maxFullStrokeWidth: number = 30,\n  ): number => {\n    // Ensure the request count is within the min and max bounds\n    const boundedRequestCount = Math.max(\n      minRequestCount,\n      Math.min(requestCount, maxRequestCount),\n    );\n    const range = maxRequestCount - minRequestCount;\n    const normalizedCount = (boundedRequestCount - minRequestCount) / range;\n    const normalizedMaxCount = 1; // Normalized value of max count in the range\n    const base = 10;\n    // Logarithmic transformation with a base\n    const logCount = Math.log(normalizedCount + 1) / Math.log(base);\n    const logMaxCount = Math.log(normalizedMaxCount + 1) / Math.log(base);\n    // Adjusting the scaling factor based on max request count\n    const scalingFactor =\n      maxRequestCount < maxPossibleRequestCount\n        ? maxRequestCount / maxPossibleRequestCount\n        : 1;\n    // Scale to stroke width range\n    const dynamicMaxStrokeWidth =\n      minStrokeWidth + scalingFactor * (maxFullStrokeWidth - minStrokeWidth);\n    const scale =\n      (logCount / logMaxCount) * (dynamicMaxStrokeWidth - minStrokeWidth);\n    return minStrokeWidth + scale;\n  };\n\n  getLinkArrowId = () => {\n    // remove special characters from id\n    const id = this.getID().replace(/[^a-zA-Z0-9]/g, '');\n    return `${id}-arrow`;\n  };\n}\n\nexport namespace SharedLink {\n  export const Keyframes = keyframes`\n\t\tfrom {\n\t\t\tstroke-dashoffset: 24;\n\t\t}\n\t\tto {\n\t\t\tstroke-dashoffset: 0;\n\t\t}\n\t`;\n\n  const selected = css`\n    stroke-dasharray: 10, 6;\n    animation: ${Keyframes} 1s linear infinite;\n  `;\n\n  export const Path = styled.path<{ selected: boolean }>`\n    ${p => p.selected && selected};\n    fill: none;\n    pointer-events: auto;\n  `;\n}\n"],"names":["targetNode","SharedLink"],"mappings":"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"}

package/dist/components/SharedNode/SharedNode.esm.js

@@ -0,0 +1,44 @@
+import { NodeModel } from '@projectstorm/react-diagrams';
+import { LINE_MIN_WIDTH, LINE_MAX_WIDTH } from '../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+
+class SharedNodeModel extends NodeModel {
+  constructor(type, id) {
+    super({
+      type,
+      id
+    });
+  }
+  handleHover = (ports, task) => {
+    if (ports.length > 0) {
+      ports.forEach((port) => {
+        const portLinks = new Map(
+          Object.entries(port.links)
+        );
+        portLinks.forEach((link) => {
+          if (link.getSourcePort().getID() === port.getID()) {
+            link.fireEvent({}, task);
+          }
+        });
+      });
+    }
+  };
+  isNodeSelected = (selectedLink, portIdentifier) => {
+    if (selectedLink) {
+      if (selectedLink.getSourcePort().getNode().getID() === this.getID()) {
+        const sourcePortID = selectedLink.getSourcePort().getID();
+        return sourcePortID.slice(sourcePortID.indexOf("-") + 1) === portIdentifier;
+      } else if (selectedLink.getTargetPort().getNode().getID() === this.getID()) {
+        const targetPortID = selectedLink.getTargetPort().getID();
+        return targetPortID.slice(targetPortID.indexOf("-") + 1) === portIdentifier;
+      }
+    }
+    return false;
+  };
+  getDynamicLineWidth = (zoomLevel, minWidth = LINE_MIN_WIDTH, maxWidth = LINE_MAX_WIDTH) => {
+    return Math.min(Math.max(minWidth, 100 / zoomLevel), maxWidth);
+  };
+}
+
+export { SharedNodeModel };
+//# sourceMappingURL=SharedNode.esm.js.map

package/dist/components/SharedNode/SharedNode.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharedNode.esm.js","sources":["../../../src/components/SharedNode/SharedNode.ts"],"sourcesContent":["import {\n  LinkModel,\n  NodeModel,\n  NodeModelGenerics,\n  PortModel,\n} from '@projectstorm/react-diagrams';\nimport { ComponentLinkModel } from '../Component/ComponentLink/ComponentLinkModel';\nimport { LINE_MAX_WIDTH, LINE_MIN_WIDTH } from '../../resources';\n\nexport class SharedNodeModel extends NodeModel<NodeModelGenerics> {\n  constructor(type: string, id: string) {\n    super({\n      type: type,\n      id: id,\n    });\n  }\n\n  handleHover = (ports: PortModel[], task: string) => {\n    if (ports.length > 0) {\n      ports.forEach(port => {\n        const portLinks: Map<string, LinkModel> = new Map(\n          Object.entries(port.links),\n        );\n        portLinks.forEach(link => {\n          if (link.getSourcePort().getID() === port.getID()) {\n            link.fireEvent({}, task);\n          }\n        });\n      });\n    }\n  };\n\n  isNodeSelected = (\n    selectedLink: ComponentLinkModel,\n    portIdentifier: string,\n  ): boolean => {\n    if (selectedLink) {\n      if (selectedLink.getSourcePort().getNode().getID() === this.getID()) {\n        const sourcePortID: string = selectedLink.getSourcePort().getID();\n        return (\n          sourcePortID.slice(sourcePortID.indexOf('-') + 1) === portIdentifier\n        );\n      } else if (\n        selectedLink.getTargetPort().getNode().getID() === this.getID()\n      ) {\n        const targetPortID: string = selectedLink.getTargetPort().getID();\n        return (\n          targetPortID.slice(targetPortID.indexOf('-') + 1) === portIdentifier\n        );\n      }\n    }\n    return false;\n  };\n\n  getDynamicLineWidth = (\n    zoomLevel: number,\n    minWidth = LINE_MIN_WIDTH,\n    maxWidth = LINE_MAX_WIDTH,\n  ): number => {\n    return Math.min(Math.max(minWidth, 100 / zoomLevel), maxWidth);\n  };\n}\n"],"names":[],"mappings":";;;;AASO,MAAM,wBAAwB,SAAA,CAA6B;AAAA,EAChE,WAAA,CAAY,MAAc,EAAA,EAAY;AACpC,IAAA,KAAA,CAAM;AAAA,MACJ,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,EACH;AAAA,EAEA,WAAA,GAAc,CAAC,KAAA,EAAoB,IAAA,KAAiB;AAClD,IAAA,IAAI,KAAA,CAAM,SAAS,CAAA,EAAG;AACpB,MAAA,KAAA,CAAM,QAAQ,CAAA,IAAA,KAAQ;AACpB,QAAA,MAAM,YAAoC,IAAI,GAAA;AAAA,UAC5C,MAAA,CAAO,OAAA,CAAQ,IAAA,CAAK,KAAK;AAAA,SAC3B;AACA,QAAA,SAAA,CAAU,QAAQ,CAAA,IAAA,KAAQ;AACxB,UAAA,IAAI,KAAK,aAAA,EAAc,CAAE,OAAM,KAAM,IAAA,CAAK,OAAM,EAAG;AACjD,YAAA,IAAA,CAAK,SAAA,CAAU,EAAC,EAAG,IAAI,CAAA;AAAA,UACzB;AAAA,QACF,CAAC,CAAA;AAAA,MACH,CAAC,CAAA;AAAA,IACH;AAAA,EACF,CAAA;AAAA,EAEA,cAAA,GAAiB,CACf,YAAA,EACA,cAAA,KACY;AACZ,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,IAAI,YAAA,CAAa,eAAc,CAAE,OAAA,GAAU,KAAA,EAAM,KAAM,IAAA,CAAK,KAAA,EAAM,EAAG;AACnE,QAAA,MAAM,YAAA,GAAuB,YAAA,CAAa,aAAA,EAAc,CAAE,KAAA,EAAM;AAChE,QAAA,OACE,aAAa,KAAA,CAAM,YAAA,CAAa,QAAQ,GAAG,CAAA,GAAI,CAAC,CAAA,KAAM,cAAA;AAAA,MAE1D,CAAA,MAAA,IACE,YAAA,CAAa,aAAA,EAAc,CAAE,OAAA,GAAU,KAAA,EAAM,KAAM,IAAA,CAAK,KAAA,EAAM,EAC9D;AACA,QAAA,MAAM,YAAA,GAAuB,YAAA,CAAa,aAAA,EAAc,CAAE,KAAA,EAAM;AAChE,QAAA,OACE,aAAa,KAAA,CAAM,YAAA,CAAa,QAAQ,GAAG,CAAA,GAAI,CAAC,CAAA,KAAM,cAAA;AAAA,MAE1D;AAAA,IACF;AACA,IAAA,OAAO,KAAA;AAAA,EACT,CAAA;AAAA,EAEA,sBAAsB,CACpB,SAAA,EACA,QAAA,GAAW,cAAA,EACX,WAAW,cAAA,KACA;AACX,IAAA,OAAO,IAAA,CAAK,IAAI,IAAA,CAAK,GAAA,CAAI,UAAU,GAAA,GAAM,SAAS,GAAG,QAAQ,CAAA;AAAA,EAC/D,CAAA;AACF;;;;"}

package/dist/components/TooltipLabel/TooltipLabel.esm.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+
+const Section = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-family: 'GilmerRegular';
+`;
+function TooltipLabel(props) {
+  const { tooltip } = props;
+  return /* @__PURE__ */ jsx(Section, { children: /* @__PURE__ */ jsx(Row, { children: tooltip }) });
+}
+
+export { TooltipLabel };
+//# sourceMappingURL=TooltipLabel.esm.js.map

package/dist/components/TooltipLabel/TooltipLabel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipLabel.esm.js","sources":["../../../src/components/TooltipLabel/TooltipLabel.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nconst Section = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n`;\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  font-family: 'GilmerRegular';\n`;\n\ninterface TooltipLabelProps {\n  tooltip: string;\n}\n\nexport function TooltipLabel(props: TooltipLabelProps) {\n  const { tooltip } = props;\n\n  return (\n    <Section>\n      <Row>{tooltip}</Row>\n    </Section>\n  );\n}\n"],"names":[],"mappings":";;;AAEA,MAAM,UAAU,MAAA,CAAO,GAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AAMvB,MAAM,MAAM,MAAA,CAAO,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AAYZ,SAAS,aAAa,KAAA,EAA0B;AACrD,EAAA,MAAM,EAAE,SAAQ,GAAI,KAAA;AAEpB,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,GAAA,EAAA,EAAK,mBAAQ,CAAA,EAChB,CAAA;AAEJ;;;;"}

package/dist/diagrams/OrgDiagram.esm.js

@@ -0,0 +1,176 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { DiagramModel } from '@projectstorm/react-diagrams';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import CircularProgress from '@mui/material/CircularProgress';
+import { generateEngine, animateOrgDiagram } from '../utils/diagramUtils.esm.js';
+import { getDiagramDataFromOrg } from '../utils/orgUtils.esm.js';
+import { PROJECT_NODE, CONNECTION_NODE, Colors } from '../resources/constants.esm.js';
+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 { CellDiagramContext } from '../components/DiagramContext/DiagramContext.esm.js';
+import '../theme/ThemeContext.esm.js';
+import '../theme/CellDiagramThemeProvider.esm.js';
+import '../components/SharedLink/SharedLink.esm.js';
+import '../components/Project/AdvancedLink/AdvancedLinkFactory.esm.js';
+import { DiagramLayer } from '../types.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 '@projectstorm/geometry';
+import { OverlayLayerModel } from '../components/OverlayLoader/OverlayLayerModel.esm.js';
+import '../components/OverlayLoader/OverlayLayerWidget.esm.js';
+import '../components/PromptScreen/PromptScreen.esm.js';
+import '../components/Header/Header.esm.js';
+import { DiagramControls } from '../components/Controls/DiagramControls.esm.js';
+import { DagreEngine } from '../resources/Dagre/DagreEngine.esm.js';
+import { useStyles, Container, DiagramContainer } from '../utils/CanvasStyles.esm.js';
+
+function OrgDiagram(props) {
+  const {
+    organization,
+    componentMenu,
+    showControls = true,
+    animation = true,
+    defaultDiagramLayer = DiagramLayer.ARCHITECTURE,
+    onComponentDoubleClick
+  } = props;
+  const [diagramEngine] = useState(generateEngine);
+  const [diagramModel, setDiagramModel] = useState(
+    void 0
+  );
+  const [selectedNodeId, setSelectedNodeId] = useState("");
+  const [focusedNodeId, setFocusedNodeId] = useState("");
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [isDiagramLoaded, setIsDiagramLoaded] = useState(false);
+  const styles = useStyles();
+  useEffect(() => {
+    if (diagramEngine) {
+      drawDiagram();
+    }
+    return () => {
+      diagramEngine.getModel()?.getNodes().forEach((node) => {
+        node.clearListeners();
+      });
+    };
+  }, [props]);
+  useEffect(() => {
+    if (diagramEngine && animation && isDiagramLoaded) {
+      animateOrgDiagram();
+      diagramEngine.repaintCanvas();
+    }
+  }, [isDiagramLoaded, diagramEngine]);
+  useEffect(() => {
+    const listener = diagramEngine.getModel()?.registerListener({
+      zoomUpdated: (event) => {
+        setZoomLevel(event.zoom);
+      }
+    });
+    return () => {
+      diagramEngine.getModel()?.deregisterListener(listener);
+    };
+  }, [diagramEngine]);
+  useEffect(() => {
+    if (diagramEngine.getCanvas()) {
+      document.addEventListener("keydown", handleEscapePress);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscapePress);
+    };
+  }, [diagramModel, diagramEngine.getCanvas()]);
+  function handleEscapePress(event) {
+    if (event.key === "Escape" && selectedNodeId) {
+      setSelectedNodeId("");
+    }
+  }
+  const drawDiagram = () => {
+    const diagramData = getDiagramDataFromOrg(organization);
+    const model = new DiagramModel();
+    model.addLayer(new OverlayLayerModel());
+    const models = model.addAll(
+      ...diagramData.nodes.projectNodes.values(),
+      ...diagramData.links.projectLinks.values()
+    );
+    diagramEngine.setModel(model);
+    setDiagramModel(model);
+    setTimeout(() => {
+      const dagreEngine = new DagreEngine({
+        graph: {
+          rankdir: "LR",
+          ranksep: 110,
+          edgesep: 44,
+          nodesep: 20,
+          // acyclicer: 'greedy',
+          ranker: "network-simplex"
+        },
+        includeLinks: true
+      });
+      dagreEngine.redistribute(model);
+      const links = model.getLinks();
+      let maxY = 0;
+      links.forEach((link) => {
+        link.getPoints().forEach((point) => {
+          if (point.getY() > maxY) {
+            maxY = point.getY();
+          }
+        });
+      });
+      const nodes = model.getNodes();
+      nodes.forEach((node) => {
+        if (node.getType() === PROJECT_NODE) {
+          const y = node.getY() + 120;
+          if (y > maxY) {
+            maxY = y;
+          }
+        }
+      });
+      models.forEach((node) => {
+        if (node.getType() === CONNECTION_NODE) {
+          node.setPosition(0, maxY + 40);
+        }
+      });
+      if (diagramEngine.getCanvas()?.getBoundingClientRect()) {
+        diagramEngine.zoomToFitNodes({ margin: 40, maxZoom: 1 });
+      }
+      const overlayLayer = diagramEngine.getModel().getLayers().find((layer) => layer instanceof OverlayLayerModel);
+      if (overlayLayer) {
+        diagramEngine.getModel().removeLayer(overlayLayer);
+      }
+      diagramEngine.setModel(model);
+      diagramEngine.repaintCanvas();
+      setIsDiagramLoaded(true);
+    }, 1e3);
+  };
+  const ctx = {
+    selectedNodeId,
+    focusedNodeId,
+    componentMenu,
+    zoomLevel,
+    defaultDiagramLayer,
+    setSelectedNodeId,
+    setFocusedNodeId,
+    onComponentDoubleClick
+  };
+  const handleCanvasClick = (event) => {
+    if (focusedNodeId && event.target === diagramEngine.getCanvas()) {
+      setFocusedNodeId("");
+    }
+  };
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(CellDiagramContext, { ...ctx, children: /* @__PURE__ */ jsx(DiagramContainer, { onClick: handleCanvasClick, children: diagramEngine?.getModel() && diagramModel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CanvasWidget, { engine: diagramEngine, className: styles.canvas }),
+    showControls && /* @__PURE__ */ jsx(DiagramControls, { engine: diagramEngine, animation })
+  ] }) : /* @__PURE__ */ jsx(CircularProgress, { sx: { color: Colors.PRIMARY } }) }) }) });
+}
+
+export { DiagramLayer, OrgDiagram };
+//# sourceMappingURL=OrgDiagram.esm.js.map

package/dist/diagrams/OrgDiagram.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrgDiagram.esm.js","sources":["../../src/diagrams/OrgDiagram.tsx"],"sourcesContent":["import { MouseEvent, useEffect, useState } from 'react';\nimport { DiagramEngine, DiagramModel } from '@projectstorm/react-diagrams';\nimport { CanvasWidget } from '@projectstorm/react-canvas-core';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport {\n  generateEngine,\n  getDiagramDataFromOrg,\n  animateOrgDiagram,\n} from '../utils';\nimport {\n  DiagramControls,\n  OverlayLayerModel,\n  CellDiagramContext,\n  ConnectionModel,\n} from '../components';\nimport { CONNECTION_NODE, Colors, PROJECT_NODE } from '../resources';\nimport { Container, DiagramContainer, useStyles } from '../utils/CanvasStyles';\nimport {\n  CustomTooltips,\n  DiagramLayer,\n  MoreVertMenuItem,\n  Organization,\n} from '../types';\nimport { DagreEngine } from '../resources/Dagre/DagreEngine';\n\nexport { DiagramLayer } from '../types';\nexport type { MoreVertMenuItem, Project } from '../types';\n\nexport interface OrgDiagramProps {\n  organization: Organization;\n  componentMenu?: MoreVertMenuItem[];\n  showControls?: boolean;\n  animation?: boolean;\n  defaultDiagramLayer?: DiagramLayer;\n  customTooltips?: CustomTooltips;\n  onComponentDoubleClick?: (componentId: string) => void;\n}\n\nexport function OrgDiagram(props: OrgDiagramProps) {\n  const {\n    organization,\n    componentMenu,\n    showControls = true,\n    animation = true,\n    defaultDiagramLayer = DiagramLayer.ARCHITECTURE,\n    onComponentDoubleClick,\n  } = props;\n\n  const [diagramEngine] = useState<DiagramEngine>(generateEngine);\n  const [diagramModel, setDiagramModel] = useState<DiagramModel | undefined>(\n    undefined,\n  );\n  const [selectedNodeId, setSelectedNodeId] = useState<string>('');\n  const [focusedNodeId, setFocusedNodeId] = useState<string>('');\n  const [zoomLevel, setZoomLevel] = useState(1);\n  const [isDiagramLoaded, setIsDiagramLoaded] = useState(false);\n\n  const styles = useStyles();\n\n  useEffect(() => {\n    if (diagramEngine) {\n      // eslint-disable-next-line @typescript-eslint/no-use-before-define\n      drawDiagram();\n    }\n    return () => {\n      diagramEngine\n        .getModel()\n        ?.getNodes()\n        .forEach(node => {\n          node.clearListeners();\n        });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props]);\n\n  useEffect(() => {\n    if (diagramEngine && animation && isDiagramLoaded) {\n      animateOrgDiagram();\n      diagramEngine.repaintCanvas();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isDiagramLoaded, diagramEngine]);\n\n  useEffect(() => {\n    const listener = diagramEngine.getModel()?.registerListener({\n      zoomUpdated: (event: any) => {\n        setZoomLevel(event.zoom);\n      },\n    });\n    return () => {\n      diagramEngine.getModel()?.deregisterListener(listener);\n    };\n  }, [diagramEngine]);\n\n  useEffect(() => {\n    if (diagramEngine.getCanvas()) {\n      document.addEventListener('keydown', handleEscapePress);\n    }\n    return () => {\n      document.removeEventListener('keydown', handleEscapePress);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [diagramModel, diagramEngine.getCanvas()]);\n\n  function handleEscapePress(event: KeyboardEvent) {\n    if (event.key === 'Escape' && selectedNodeId) {\n      setSelectedNodeId('');\n    }\n  }\n\n  // draw diagram\n  const drawDiagram = () => {\n    const diagramData = getDiagramDataFromOrg(organization);\n    // create diagram model\n    const model = new DiagramModel();\n    // add preloader overlay layer\n    model.addLayer(new OverlayLayerModel());\n    // add node and links to diagram model\n    const models = model.addAll(\n      // nodes\n      ...diagramData.nodes.projectNodes.values(),\n      // links\n      ...diagramData.links.projectLinks.values(),\n    );\n\n    // draw diagram with all nodes and links\n    diagramEngine.setModel(model);\n    setDiagramModel(model);\n\n    setTimeout(() => {\n      const dagreEngine = new DagreEngine({\n        graph: {\n          rankdir: 'LR',\n          ranksep: 110,\n          edgesep: 44,\n          nodesep: 20,\n          // acyclicer: 'greedy',\n          ranker: 'network-simplex',\n        },\n        includeLinks: true,\n      });\n      dagreEngine.redistribute(model);\n\n      // get all links and find link in the bottom of the diagram and find y coordinate\n      const links = model.getLinks();\n      let maxY = 0;\n      links.forEach(link => {\n        link.getPoints().forEach(point => {\n          if (point.getY() > maxY) {\n            maxY = point.getY();\n          }\n        });\n      });\n\n      // get all nodes and find node in the bottom of the diagram and find y coordinate\n      const nodes = model.getNodes();\n      nodes.forEach(node => {\n        if (node.getType() === PROJECT_NODE) {\n          const y = node.getY() + 120;\n          if (y > maxY) {\n            maxY = y;\n          }\n        }\n      });\n\n      // update connection nodes position to the bottom of the diagram\n      models.forEach(node => {\n        if (node.getType() === CONNECTION_NODE) {\n          (node as ConnectionModel).setPosition(0, maxY + 40);\n        }\n      });\n\n      if (diagramEngine.getCanvas()?.getBoundingClientRect()) {\n        // zoom to fit nodes and center diagram\n        diagramEngine.zoomToFitNodes({ margin: 40, maxZoom: 1 });\n      }\n      // remove preloader overlay layer\n      const overlayLayer = diagramEngine\n        .getModel()\n        .getLayers()\n        .find(layer => layer instanceof OverlayLayerModel);\n      if (overlayLayer) {\n        diagramEngine.getModel().removeLayer(overlayLayer);\n      }\n      // update diagram\n      diagramEngine.setModel(model);\n      diagramEngine.repaintCanvas();\n      // After all diagram setup is complete\n      setIsDiagramLoaded(true);\n    }, 1000);\n  };\n\n  const ctx = {\n    selectedNodeId,\n    focusedNodeId,\n    componentMenu,\n    zoomLevel,\n    defaultDiagramLayer,\n    setSelectedNodeId,\n    setFocusedNodeId,\n    onComponentDoubleClick,\n  };\n\n  const handleCanvasClick = (\n    event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,\n  ) => {\n    if (focusedNodeId && event.target === diagramEngine.getCanvas()) {\n      setFocusedNodeId('');\n    }\n  };\n\n  return (\n    <Container>\n      <CellDiagramContext {...ctx}>\n        <DiagramContainer onClick={handleCanvasClick}>\n          {diagramEngine?.getModel() && diagramModel ? (\n            <>\n              <CanvasWidget engine={diagramEngine} className={styles.canvas} />\n              {showControls && (\n                <DiagramControls engine={diagramEngine} animation={animation} />\n              )}\n            </>\n          ) : (\n            <CircularProgress sx={{ color: Colors.PRIMARY }} />\n          )}\n        </DiagramContainer>\n      </CellDiagramContext>\n    </Container>\n  );\n}\n"],"names":[],"mappings":"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"}