@openchoreo/cell-diagram 1.2.0-rc.1

package/dist/components/External/ExternalLink/ExternalLinkWidget.esm.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useContext, useEffect } from 'react';
+import { EXTERNAL_LINK, LINK_WIDTH } from '../../../resources/constants.esm.js';
+import { DiagramContext } from '../../DiagramContext/DiagramContext.esm.js';
+import { useColors } from '../../../theme/ThemeContext.esm.js';
+import '../../../theme/CellDiagramThemeProvider.esm.js';
+
+function ExternalLinkWidget(props) {
+  const { link } = props;
+  const colors = useColors();
+  const [isSelected, setIsSelected] = useState(false);
+  const { previewMode } = useContext(DiagramContext);
+  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]);
+  const selectPath = () => {
+    setIsSelected(true);
+    link.selectLinkedNodes();
+  };
+  const unselectPath = () => {
+    setIsSelected(false);
+    link.resetLinkedNodes();
+  };
+  return /* @__PURE__ */ jsxs("g", { className: EXTERNAL_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: isSelected ? colors.SECONDARY : colors.OUTLINE
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        id: link.getID(),
+        d: link.withRightOffset ? link.getCurvePathWithOffset() : link.getCurvePath(),
+        fill: "none",
+        stroke: isSelected ? colors.SECONDARY : colors.OUTLINE,
+        strokeWidth: previewMode ? LINK_WIDTH.PREVIEW : LINK_WIDTH.DEFAULT,
+        markerEnd: `url(#${link.getLinkArrowId()})`
+      }
+    )
+  ] });
+}
+
+export { ExternalLinkWidget };
+//# sourceMappingURL=ExternalLinkWidget.esm.js.map

package/dist/components/External/ExternalLink/ExternalLinkWidget.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalLinkWidget.esm.js","sources":["../../../../src/components/External/ExternalLink/ExternalLinkWidget.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from 'react';\nimport { DiagramEngine } from '@projectstorm/react-diagrams';\nimport { ExternalLinkModel } from './ExternalLinkModel';\nimport { EXTERNAL_LINK, LINK_WIDTH } from '../../../resources';\nimport { DiagramContext } from '../../DiagramContext/DiagramContext';\nimport { useColors } from '../../../theme';\n\ninterface WidgetProps {\n  engine: DiagramEngine;\n  link: ExternalLinkModel;\n}\n\nexport function ExternalLinkWidget(props: WidgetProps) {\n  const { link } = props;\n  const colors = useColors();\n\n  const [isSelected, setIsSelected] = useState<boolean>(false);\n  const { previewMode } = useContext(DiagramContext);\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]);\n\n  const selectPath = () => {\n    setIsSelected(true);\n    link.selectLinkedNodes();\n  };\n\n  const unselectPath = () => {\n    setIsSelected(false);\n    link.resetLinkedNodes();\n  };\n\n  return (\n    <g className={EXTERNAL_LINK}>\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\n            points=\"0,6 0,0 5,3\"\n            fill={isSelected ? colors.SECONDARY : colors.OUTLINE}\n          />\n        </marker>\n      </defs>\n      <path\n        id={link.getID()}\n        d={\n          link.withRightOffset\n            ? link.getCurvePathWithOffset()\n            : link.getCurvePath()\n        }\n        fill=\"none\"\n        stroke={isSelected ? colors.SECONDARY : colors.OUTLINE}\n        strokeWidth={previewMode ? LINK_WIDTH.PREVIEW : LINK_WIDTH.DEFAULT}\n        markerEnd={`url(#${link.getLinkArrowId()})`}\n      />\n    </g>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAYO,SAAS,mBAAmB,KAAA,EAAoB;AACrD,EAAA,MAAM,EAAE,MAAK,GAAI,KAAA;AACjB,EAAA,MAAM,SAAS,SAAA,EAAU;AAEzB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAkB,KAAK,CAAA;AAC3D,EAAA,MAAM,EAAE,WAAA,EAAY,GAAI,UAAA,CAAW,cAAc,CAAA;AAEjD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,QAAA,GAAW,KAAK,gBAAA,CAAiB;AAAA;AAAA,MAErC,MAAA,EAAQ,UAAA;AAAA;AAAA,MAER,QAAA,EAAU;AAAA,KACX,CAAA;AACD,IAAA,OAAO,MAAM;AACX,MAAA,IAAA,CAAK,mBAAmB,QAAQ,CAAA;AAAA,IAClC,CAAA;AAAA,EAEF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,aAAA,CAAc,IAAI,CAAA;AAClB,IAAA,IAAA,CAAK,iBAAA,EAAkB;AAAA,EACzB,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,aAAA,CAAc,KAAK,CAAA;AACnB,IAAA,IAAA,CAAK,gBAAA,EAAiB;AAAA,EACxB,CAAA;AAEA,EAAA,uBACE,IAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAW,aAAA,EACZ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,KAAK,cAAA,EAAe;AAAA,QACxB,WAAA,EAAY,GAAA;AAAA,QACZ,YAAA,EAAa,GAAA;AAAA,QACb,WAAA,EAAY,aAAA;AAAA,QACZ,IAAA,EAAK,GAAA;AAAA,QACL,IAAA,EAAK,GAAA;AAAA,QACL,OAAA,EAAQ,SAAA;AAAA,QACR,MAAA,EAAO,MAAA;AAAA,QAEP,QAAA,kBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAO,aAAA;AAAA,YACP,IAAA,EAAM,UAAA,GAAa,MAAA,CAAO,SAAA,GAAY,MAAA,CAAO;AAAA;AAAA;AAC/C;AAAA,KACF,EACF,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,KAAK,KAAA,EAAM;AAAA,QACf,GACE,IAAA,CAAK,eAAA,GACD,KAAK,sBAAA,EAAuB,GAC5B,KAAK,YAAA,EAAa;AAAA,QAExB,IAAA,EAAK,MAAA;AAAA,QACL,MAAA,EAAQ,UAAA,GAAa,MAAA,CAAO,SAAA,GAAY,MAAA,CAAO,OAAA;AAAA,QAC/C,WAAA,EAAa,WAAA,GAAc,UAAA,CAAW,OAAA,GAAU,UAAA,CAAW,OAAA;AAAA,QAC3D,SAAA,EAAW,CAAA,KAAA,EAAQ,IAAA,CAAK,cAAA,EAAgB,CAAA,CAAA;AAAA;AAAA;AAC1C,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/External/ExternalNode/ExternalFactory.esm.js

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

package/dist/components/External/ExternalNode/ExternalFactory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalFactory.esm.js","sources":["../../../../src/components/External/ExternalNode/ExternalFactory.tsx"],"sourcesContent":["import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { DiagramEngine } from '@projectstorm/react-diagrams-core';\nimport { ExternalModel } from './ExternalModel';\nimport { ExternalWidget } from './ExternalWidget';\nimport { EXTERNAL_NODE } from '../../../resources';\n\nexport class ExternalFactory extends AbstractReactFactory<\n  ExternalModel,\n  DiagramEngine\n> {\n  constructor() {\n    super(EXTERNAL_NODE);\n  }\n\n  generateReactWidget(event: { model: ExternalModel }): JSX.Element {\n    return <ExternalWidget engine={this.engine} node={event.model} />;\n  }\n\n  generateModel(event: { initialConfig: any }) {\n    return new ExternalModel(event.initialConfig.key);\n  }\n}\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,wBAAwB,oBAAA,CAGnC;AAAA,EACA,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM,aAAa,CAAA;AAAA,EACrB;AAAA,EAEA,oBAAoB,KAAA,EAA8C;AAChE,IAAA,2BAAQ,cAAA,EAAA,EAAe,MAAA,EAAQ,KAAK,MAAA,EAAQ,IAAA,EAAM,MAAM,KAAA,EAAO,CAAA;AAAA,EACjE;AAAA,EAEA,cAAc,KAAA,EAA+B;AAC3C,IAAA,OAAO,IAAI,aAAA,CAAc,KAAA,CAAM,aAAA,CAAc,GAAG,CAAA;AAAA,EAClD;AACF;;;;"}

package/dist/components/External/ExternalNode/ExternalModel.esm.js

@@ -0,0 +1,20 @@
+import { PortModelAlignment } from '@projectstorm/react-diagrams';
+import { SharedNodeModel } from '../../SharedNode/SharedNode.esm.js';
+import { CellPortModel } from '../../Cell/CellPort/CellPortModel.esm.js';
+import { EXTERNAL_NODE } from '../../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+import { getExternalNodeName } from '../external-node-util.esm.js';
+
+class ExternalModel extends SharedNodeModel {
+  constructor(id) {
+    const name = getExternalNodeName(id);
+    super(EXTERNAL_NODE, name);
+    this.addPort(new CellPortModel(name, PortModelAlignment.LEFT));
+    this.addPort(new CellPortModel(name, PortModelAlignment.RIGHT));
+    this.addPort(new CellPortModel(name, PortModelAlignment.TOP));
+    this.addPort(new CellPortModel(name, PortModelAlignment.BOTTOM));
+  }
+}
+
+export { ExternalModel };
+//# sourceMappingURL=ExternalModel.esm.js.map

package/dist/components/External/ExternalNode/ExternalModel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalModel.esm.js","sources":["../../../../src/components/External/ExternalNode/ExternalModel.ts"],"sourcesContent":["import { PortModelAlignment } from '@projectstorm/react-diagrams';\nimport { SharedNodeModel } from '../../SharedNode/SharedNode';\nimport { CellPortModel } from '../../Cell/CellPort/CellPortModel';\nimport { EXTERNAL_NODE } from '../../../resources';\nimport { getExternalNodeName } from '../external-node-util';\n\nexport class ExternalModel extends SharedNodeModel {\n  constructor(id: string) {\n    const name = getExternalNodeName(id);\n    super(EXTERNAL_NODE, name);\n\n    this.addPort(new CellPortModel(name, PortModelAlignment.LEFT));\n    this.addPort(new CellPortModel(name, PortModelAlignment.RIGHT));\n    this.addPort(new CellPortModel(name, PortModelAlignment.TOP));\n    this.addPort(new CellPortModel(name, PortModelAlignment.BOTTOM));\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAMO,MAAM,sBAAsB,eAAA,CAAgB;AAAA,EACjD,YAAY,EAAA,EAAY;AACtB,IAAA,MAAM,IAAA,GAAO,oBAAoB,EAAE,CAAA;AACnC,IAAA,KAAA,CAAM,eAAe,IAAI,CAAA;AAEzB,IAAA,IAAA,CAAK,QAAQ,IAAI,aAAA,CAAc,IAAA,EAAM,kBAAA,CAAmB,IAAI,CAAC,CAAA;AAC7D,IAAA,IAAA,CAAK,QAAQ,IAAI,aAAA,CAAc,IAAA,EAAM,kBAAA,CAAmB,KAAK,CAAC,CAAA;AAC9D,IAAA,IAAA,CAAK,QAAQ,IAAI,aAAA,CAAc,IAAA,EAAM,kBAAA,CAAmB,GAAG,CAAC,CAAA;AAC5D,IAAA,IAAA,CAAK,QAAQ,IAAI,aAAA,CAAc,IAAA,EAAM,kBAAA,CAAmB,MAAM,CAAC,CAAA;AAAA,EACjE;AACF;;;;"}

package/dist/components/External/ExternalNode/ExternalWidget.esm.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ExternalNode } from './styles.esm.js';
+import { CellPortWidget } from '../../Cell/CellPort/CellPortWidget.esm.js';
+
+function ExternalWidget(props) {
+  const { node, engine } = props;
+  return /* @__PURE__ */ jsxs(ExternalNode, { children: [
+    /* @__PURE__ */ jsx(
+      CellPortWidget,
+      {
+        port: node.getPort(`left-${node.getID()}`),
+        engine
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CellPortWidget,
+      {
+        port: node.getPort(`right-${node.getID()}`),
+        engine
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CellPortWidget,
+      {
+        port: node.getPort(`top-${node.getID()}`),
+        engine
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CellPortWidget,
+      {
+        port: node.getPort(`bottom-${node.getID()}`),
+        engine
+      }
+    )
+  ] });
+}
+
+export { ExternalWidget };
+//# sourceMappingURL=ExternalWidget.esm.js.map

package/dist/components/External/ExternalNode/ExternalWidget.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalWidget.esm.js","sources":["../../../../src/components/External/ExternalNode/ExternalWidget.tsx"],"sourcesContent":["import {} from 'react';\nimport { DiagramEngine } from '@projectstorm/react-diagrams';\nimport { ExternalModel } from './ExternalModel';\nimport { ExternalNode } from './styles';\nimport { CellPortWidget } from '../../Cell/CellPort/CellPortWidget';\nimport { CellPortModel } from '../../Cell/CellPort/CellPortModel';\n\ninterface ExternalWidgetProps {\n  node: ExternalModel;\n  engine: DiagramEngine;\n}\n\nexport function ExternalWidget(props: ExternalWidgetProps) {\n  const { node, engine } = props;\n  return (\n    <ExternalNode>\n      <CellPortWidget\n        port={node.getPort(`left-${node.getID()}`) as CellPortModel}\n        engine={engine}\n      />\n      <CellPortWidget\n        port={node.getPort(`right-${node.getID()}`) as CellPortModel}\n        engine={engine}\n      />\n      <CellPortWidget\n        port={node.getPort(`top-${node.getID()}`) as CellPortModel}\n        engine={engine}\n      />\n      <CellPortWidget\n        port={node.getPort(`bottom-${node.getID()}`) as CellPortModel}\n        engine={engine}\n      />\n    </ExternalNode>\n  );\n}\n"],"names":[],"mappings":";;;;AAYO,SAAS,eAAe,KAAA,EAA4B;AACzD,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAO,GAAI,KAAA;AACzB,EAAA,4BACG,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,MAAM,IAAA,CAAK,OAAA,CAAQ,QAAQ,IAAA,CAAK,KAAA,EAAO,CAAA,CAAE,CAAA;AAAA,QACzC;AAAA;AAAA,KACF;AAAA,oBACA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,MAAM,IAAA,CAAK,OAAA,CAAQ,SAAS,IAAA,CAAK,KAAA,EAAO,CAAA,CAAE,CAAA;AAAA,QAC1C;AAAA;AAAA,KACF;AAAA,oBACA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,MAAM,IAAA,CAAK,OAAA,CAAQ,OAAO,IAAA,CAAK,KAAA,EAAO,CAAA,CAAE,CAAA;AAAA,QACxC;AAAA;AAAA,KACF;AAAA,oBACA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,MAAM,IAAA,CAAK,OAAA,CAAQ,UAAU,IAAA,CAAK,KAAA,EAAO,CAAA,CAAE,CAAA;AAAA,QAC3C;AAAA;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/External/ExternalNode/styles.esm.js

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+const ExternalNode = styled.div`
+  width: ${(props) => props.height}px;
+  height: ${(props) => props.height}px;
+`;
+
+export { ExternalNode };
+//# sourceMappingURL=styles.esm.js.map

package/dist/components/External/ExternalNode/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/components/External/ExternalNode/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\n\ninterface StyleProps {\n  isAnonymous: boolean;\n  isSelected?: boolean;\n  isClickable?: boolean;\n  isCollapsed?: boolean;\n  isFocused?: boolean;\n  height?: number;\n}\n\nexport const ExternalNode = styled.div<any>`\n  width: ${(props: StyleProps) => props.height}px;\n  height: ${(props: StyleProps) => props.height}px;\n`;\n"],"names":[],"mappings":";;AAWO,MAAM,eAAe,MAAA,CAAO,GAAA;AAAA,SAAA,EACxB,CAAC,KAAA,KAAsB,KAAA,CAAM,MAAM,CAAA;AAAA,UAAA,EAClC,CAAC,KAAA,KAAsB,KAAA,CAAM,MAAM,CAAA;AAAA;;;;"}

package/dist/components/External/external-node-util.esm.js

@@ -0,0 +1,12 @@
+import { EXTERNAL_LINK, NAME_JOIN_CHAR, EXTERNAL_NODE } from '../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+
+function getExternalNodeName(id) {
+  return `${EXTERNAL_NODE}${NAME_JOIN_CHAR}${id}`;
+}
+function getExternalLinkName(source, target) {
+  return `${EXTERNAL_LINK}${NAME_JOIN_CHAR}${source}::${target}`;
+}
+
+export { getExternalLinkName, getExternalNodeName };
+//# sourceMappingURL=external-node-util.esm.js.map

package/dist/components/External/external-node-util.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"external-node-util.esm.js","sources":["../../../src/components/External/external-node-util.ts"],"sourcesContent":["import { EXTERNAL_LINK, EXTERNAL_NODE, NAME_JOIN_CHAR } from '../../resources';\n\nexport function getExternalNodeName(id: string): string {\n  return `${EXTERNAL_NODE}${NAME_JOIN_CHAR}${id}`;\n}\n\nexport function getExternalNodeMetadataByName(name: string): {\n  type: string;\n  id: string;\n} {\n  const parts = name.split(NAME_JOIN_CHAR);\n  return { type: parts[0], id: parts[1] };\n}\n\nexport function getExternalLinkName(source: string, target: string): string {\n  return `${EXTERNAL_LINK}${NAME_JOIN_CHAR}${source}::${target}`;\n}\n"],"names":[],"mappings":";;;AAEO,SAAS,oBAAoB,EAAA,EAAoB;AACtD,EAAA,OAAO,CAAA,EAAG,aAAa,CAAA,EAAG,cAAc,GAAG,EAAE,CAAA,CAAA;AAC/C;AAUO,SAAS,mBAAA,CAAoB,QAAgB,MAAA,EAAwB;AAC1E,EAAA,OAAO,GAAG,aAAa,CAAA,EAAG,cAAc,CAAA,EAAG,MAAM,KAAK,MAAM,CAAA,CAAA;AAC9D;;;;"}

package/dist/components/Header/Header.esm.js

@@ -0,0 +1,17 @@
+import 'react/jsx-runtime';
+import styled from '@emotion/styled';
+
+styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};
+  display: flex;
+  flex-direction: row;
+  font-family: GilmerBold;
+  font-size: 16px;
+  height: 50px;
+  justify-content: space-between;
+  min-width: 350px;
+  padding-inline: 10px;
+  width: calc(100vw - 20px);
+`;
+//# sourceMappingURL=Header.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\ninterface HeaderProps {}\n\nconst HeaderContainer = styled.div`\n  align-items: center;\n  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};\n  display: flex;\n  flex-direction: row;\n  font-family: GilmerBold;\n  font-size: 16px;\n  height: 50px;\n  justify-content: space-between;\n  min-width: 350px;\n  padding-inline: 10px;\n  width: calc(100vw - 20px);\n`;\n\nexport function HeaderWidget(_props: HeaderProps) {\n  return <HeaderContainer>Cell Diagram</HeaderContainer>;\n}\n"],"names":[],"mappings":";;;AAIwB,MAAA,CAAO,GAAA;AAAA;AAAA,SAAA,EAEpB,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,kBAAkB,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/components/MoreVertMenu/MoreVertMenu.esm.js

@@ -0,0 +1,81 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+const IconStyles = styled.button`
+  position: absolute;
+  background-color: ${({ theme }) => theme.colors.SURFACE};
+  margin-left: 68px;
+  margin-bottom: 58px;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  line-height: 0;
+  border: 3px solid ${({ theme }) => theme.colors.SURFACE_DIM};
+  transition: 'transform 0.3s ease-in-out';
+  cursor: pointer;
+`;
+function MoreVertMenu(props) {
+  const { component, menuItems, onClose } = props;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const menuId = `menu-${component.id}`;
+  const handleClick = (event) => {
+    event?.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+    onClose && onClose();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconStyles,
+      {
+        "aria-controls": open ? menuId : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        onClick: handleClick,
+        children: /* @__PURE__ */ jsx(MoreVertIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        id: menuId,
+        anchorEl,
+        open,
+        onClose: handleClose,
+        anchorOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        children: menuItems.map((item) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            onClick: () => {
+              item.callback(component.id, component.version);
+              handleClose();
+            },
+            children: item.label
+          },
+          `menu-item ${item.label}`
+        ))
+      }
+    )
+  ] });
+}
+
+export { MoreVertMenu };
+//# sourceMappingURL=MoreVertMenu.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MoreVertMenu.esm.js","sources":["../../../src/components/MoreVertMenu/MoreVertMenu.tsx"],"sourcesContent":["import { MouseEvent, useState } from 'react';\nimport styled from '@emotion/styled';\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport { Component } from '../../types';\nimport { MoreVertMenuItem } from '../../types';\n\nconst IconStyles = styled.button`\n  position: absolute;\n  background-color: ${({ theme }) => theme.colors.SURFACE};\n  margin-left: 68px;\n  margin-bottom: 58px;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  line-height: 0;\n  border: 3px solid ${({ theme }) => theme.colors.SURFACE_DIM};\n  transition: 'transform 0.3s ease-in-out';\n  cursor: pointer;\n`;\n\ninterface MoreVertMenuProps {\n  component: Component;\n  menuItems: MoreVertMenuItem[];\n  hasComponentKind?: boolean;\n  onClose?: () => void;\n}\n\nexport function MoreVertMenu(props: MoreVertMenuProps) {\n  const { component, menuItems, onClose } = props;\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n  const menuId = `menu-${component.id}`;\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event?.stopPropagation();\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n    // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n    onClose && onClose();\n  };\n\n  return (\n    <>\n      <IconStyles\n        aria-controls={open ? menuId : undefined}\n        aria-haspopup=\"true\"\n        aria-expanded={open ? 'true' : undefined}\n        onClick={handleClick}\n      >\n        <MoreVertIcon />\n      </IconStyles>\n\n      <Menu\n        id={menuId}\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n      >\n        {menuItems.map(item => (\n          <MenuItem\n            key={`menu-item ${item.label}`}\n            onClick={() => {\n              item.callback(component.id, component.version);\n              handleClose();\n            }}\n          >\n            {item.label}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,aAAa,MAAA,CAAO,MAAA;AAAA;AAAA,oBAAA,EAEJ,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAA,EAWnC,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,WAAW,CAAA;AAAA;AAAA;AAAA,CAAA;AAYtD,SAAS,aAAa,KAAA,EAA0B;AACrD,EAAA,MAAM,EAAE,SAAA,EAAW,SAAA,EAAW,OAAA,EAAQ,GAAI,KAAA;AAC1C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAA6B,IAAI,CAAA;AACjE,EAAA,MAAM,IAAA,GAAO,QAAQ,QAAQ,CAAA;AAC7B,EAAA,MAAM,MAAA,GAAS,CAAA,KAAA,EAAQ,SAAA,CAAU,EAAE,CAAA,CAAA;AAEnC,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,IAAA,KAAA,EAAO,eAAA,EAAgB;AACvB,IAAA,WAAA,CAAY,MAAM,aAAa,CAAA;AAAA,EACjC,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,WAAA,CAAY,IAAI,CAAA;AAEhB,IAAA,OAAA,IAAW,OAAA,EAAQ;AAAA,EACrB,CAAA;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,eAAA,EAAe,OAAO,MAAA,GAAS,MAAA;AAAA,QAC/B,eAAA,EAAc,MAAA;AAAA,QACd,eAAA,EAAe,OAAO,MAAA,GAAS,MAAA;AAAA,QAC/B,OAAA,EAAS,WAAA;AAAA,QAET,8BAAC,YAAA,EAAA,EAAa;AAAA;AAAA,KAChB;AAAA,oBAEA,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,MAAA;AAAA,QACJ,QAAA;AAAA,QACA,IAAA;AAAA,QACA,OAAA,EAAS,WAAA;AAAA,QACT,YAAA,EAAc;AAAA,UACZ,QAAA,EAAU,KAAA;AAAA,UACV,UAAA,EAAY;AAAA,SACd;AAAA,QACA,eAAA,EAAiB;AAAA,UACf,QAAA,EAAU,KAAA;AAAA,UACV,UAAA,EAAY;AAAA,SACd;AAAA,QAEC,QAAA,EAAA,SAAA,CAAU,IAAI,CAAA,IAAA,qBACb,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,SAAS,MAAM;AACb,cAAA,IAAA,CAAK,QAAA,CAAS,SAAA,CAAU,EAAA,EAAI,SAAA,CAAU,OAAO,CAAA;AAC7C,cAAA,WAAA,EAAY;AAAA,YACd,CAAA;AAAA,YAEC,QAAA,EAAA,IAAA,CAAK;AAAA,WAAA;AAAA,UAND,CAAA,UAAA,EAAa,KAAK,KAAK,CAAA;AAAA,SAQ/B;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/ObservationLabel/ObservationLabel.esm.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+import { useDiagramContext } from '../DiagramContext/DiagramContext.esm.js';
+
+const Table = styled.table`
+  width: 100%;
+`;
+const TableRow = styled.tr``;
+const TableHeader = styled.td`
+  padding: 2px 2px;
+  text-align: left;
+  font-family: 'GilmerMedium';
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 160px;
+`;
+const TopTableHeader = styled(TableHeader)`
+  text-align: right;
+  max-width: 120px;
+`;
+const TableData = styled.td`
+  padding: 2px 2px 2px 8px;
+  color: ${({ theme }) => theme.colors.PRIMARY};
+  text-align: right;
+  font-family: 'GilmerRegular';
+`;
+const convertToMs = (value) => (value / 1e3 / 1e3).toFixed(value / 1e3 / 1e3 > 100 ? 1 : 2);
+function formatLatency(value) {
+  return value < 1 ? `${(value * 1e3).toFixed(2)} ms` : `${value.toFixed(2)} s`;
+}
+function ObservationLabel({ observations }) {
+  const { modelVersion } = useDiagramContext();
+  const displayedObservations = observations.slice(0, 5);
+  let metrics = [
+    { name: "Request Count", valueFn: (obs) => obs.requestCount },
+    {
+      name: "Error Percentage",
+      valueFn: (obs) => `${(obs.errorCount * 100 / obs.requestCount).toFixed(2)}%`
+    },
+    {
+      name: "Average Latency",
+      valueFn: (obs) => `${convertToMs(obs.avgLatency)} ms`
+    },
+    {
+      name: "99% Latency",
+      valueFn: (obs) => `${convertToMs(obs.p99Latency)} ms`
+    },
+    {
+      name: "90% Latency",
+      valueFn: (obs) => `${convertToMs(obs.p90Latency)} ms`
+    },
+    {
+      name: "50% Latency",
+      valueFn: (obs) => `${convertToMs(obs.p50Latency)} ms`
+    }
+  ];
+  if (modelVersion === "v2") {
+    metrics = [
+      {
+        name: "Request Count",
+        valueFn: (obs) => obs.requestCount.toFixed(0)
+      },
+      {
+        name: "Error Percentage",
+        valueFn: (obs) => `${(obs.errorCount * 100 / obs.requestCount).toFixed(2)}%`
+      },
+      {
+        name: "Average Latency",
+        valueFn: (obs) => formatLatency(obs.avgLatency)
+      },
+      {
+        name: "99% Latency",
+        valueFn: (obs) => formatLatency(obs.p99Latency)
+      },
+      {
+        name: "90% Latency",
+        valueFn: (obs) => formatLatency(obs.p90Latency)
+      },
+      {
+        name: "50% Latency",
+        valueFn: (obs) => formatLatency(obs.p50Latency)
+      }
+    ];
+  }
+  function formatNumberWithCommas(x) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  }
+  return /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableHeader, {}),
+      displayedObservations.map((obs, index) => /* @__PURE__ */ jsx(TopTableHeader, { children: obs.label || obs.componentVersion || "" }, index))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: metrics.map((metric) => /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: metric.name }),
+      displayedObservations.map((obs, index) => /* @__PURE__ */ jsx(TableData, { children: formatNumberWithCommas(metric.valueFn(obs).toString()) }, index))
+    ] }, metric.name)) })
+  ] });
+}
+
+export { ObservationLabel };
+//# sourceMappingURL=ObservationLabel.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ObservationLabel.esm.js","sources":["../../../src/components/ObservationLabel/ObservationLabel.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Observations } from '../../types';\nimport { useDiagramContext } from '../DiagramContext/DiagramContext';\n\nconst Table = styled.table`\n  width: 100%;\n`;\n\nconst TableRow = styled.tr``;\n\nconst TableHeader = styled.td`\n  padding: 2px 2px;\n  text-align: left;\n  font-family: 'GilmerMedium';\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 160px;\n`;\n\nconst TopTableHeader = styled(TableHeader)`\n  text-align: right;\n  max-width: 120px;\n`;\n\nconst TableData = styled.td`\n  padding: 2px 2px 2px 8px;\n  color: ${({ theme }) => theme.colors.PRIMARY};\n  text-align: right;\n  font-family: 'GilmerRegular';\n`;\n\nconst convertToMs = (value: number) =>\n  (value / 1000 / 1000).toFixed(value / 1000 / 1000 > 100 ? 1 : 2);\n\ninterface ObservationLabelProps {\n  observations: Observations[];\n}\n\nfunction formatLatency(value: number): string {\n  return value < 1\n    ? `${(value * 1000).toFixed(2)} ms`\n    : `${value.toFixed(2)} s`;\n}\n\nexport function ObservationLabel({ observations }: ObservationLabelProps) {\n  const { modelVersion } = useDiagramContext();\n\n  // Slice the observations array to include only up to the first 5 elements\n  // TODO: Add a \"View All\" button to view all observations\n  const displayedObservations = observations.slice(0, 5);\n\n  let metrics = [\n    { name: 'Request Count', valueFn: (obs: Observations) => obs.requestCount },\n    {\n      name: 'Error Percentage',\n      valueFn: (obs: Observations) =>\n        `${((obs.errorCount * 100) / obs.requestCount).toFixed(2)}%`,\n    },\n    {\n      name: 'Average Latency',\n      valueFn: (obs: Observations) => `${convertToMs(obs.avgLatency)} ms`,\n    },\n    {\n      name: '99% Latency',\n      valueFn: (obs: Observations) => `${convertToMs(obs.p99Latency)} ms`,\n    },\n    {\n      name: '90% Latency',\n      valueFn: (obs: Observations) => `${convertToMs(obs.p90Latency)} ms`,\n    },\n    {\n      name: '50% Latency',\n      valueFn: (obs: Observations) => `${convertToMs(obs.p50Latency)} ms`,\n    },\n  ];\n\n  if (modelVersion === 'v2') {\n    metrics = [\n      {\n        name: 'Request Count',\n        valueFn: (obs: Observations) => obs.requestCount.toFixed(0),\n      },\n      {\n        name: 'Error Percentage',\n        valueFn: (obs: Observations) =>\n          `${((obs.errorCount * 100) / obs.requestCount).toFixed(2)}%`,\n      },\n      {\n        name: 'Average Latency',\n        valueFn: (obs: Observations) => formatLatency(obs.avgLatency),\n      },\n      {\n        name: '99% Latency',\n        valueFn: (obs: Observations) => formatLatency(obs.p99Latency),\n      },\n      {\n        name: '90% Latency',\n        valueFn: (obs: Observations) => formatLatency(obs.p90Latency),\n      },\n      {\n        name: '50% Latency',\n        valueFn: (obs: Observations) => formatLatency(obs.p50Latency),\n      },\n    ];\n  }\n\n  function formatNumberWithCommas(x: string): string {\n    return x.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n  }\n\n  return (\n    <Table>\n      <thead>\n        <TableRow>\n          <TableHeader />\n          {displayedObservations.map((obs, index) => (\n            <TopTableHeader key={index}>\n              {obs.label || obs.componentVersion || ''}\n            </TopTableHeader>\n          ))}\n        </TableRow>\n      </thead>\n      <tbody>\n        {metrics.map(metric => (\n          <TableRow key={metric.name}>\n            <TableHeader>{metric.name}</TableHeader>\n            {displayedObservations.map((obs, index) => (\n              <TableData key={index}>\n                {formatNumberWithCommas(metric.valueFn(obs).toString())}\n              </TableData>\n            ))}\n          </TableRow>\n        ))}\n      </tbody>\n    </Table>\n  );\n}\n"],"names":[],"mappings":";;;;AAIA,MAAM,QAAQ,MAAA,CAAO,KAAA;AAAA;AAAA,CAAA;AAIrB,MAAM,WAAW,MAAA,CAAO,EAAA,CAAA,CAAA;AAExB,MAAM,cAAc,MAAA,CAAO,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AAU3B,MAAM,cAAA,GAAiB,OAAO,WAAW,CAAA;AAAA;AAAA;AAAA,CAAA;AAKzC,MAAM,YAAY,MAAA,CAAO,EAAA;AAAA;AAAA,SAAA,EAEd,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AAAA;AAAA,CAAA;AAK9C,MAAM,WAAA,GAAc,CAAC,KAAA,KAAA,CAClB,KAAA,GAAQ,GAAA,GAAO,GAAA,EAAM,OAAA,CAAQ,KAAA,GAAQ,GAAA,GAAO,GAAA,GAAO,GAAA,GAAM,CAAA,GAAI,CAAC,CAAA;AAMjE,SAAS,cAAc,KAAA,EAAuB;AAC5C,EAAA,OAAO,KAAA,GAAQ,CAAA,GACX,CAAA,EAAA,CAAI,KAAA,GAAQ,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,GAAA,CAAA,GAC5B,CAAA,EAAG,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA;AACzB;AAEO,SAAS,gBAAA,CAAiB,EAAE,YAAA,EAAa,EAA0B;AACxE,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,iBAAA,EAAkB;AAI3C,EAAA,MAAM,qBAAA,GAAwB,YAAA,CAAa,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA;AAErD,EAAA,IAAI,OAAA,GAAU;AAAA,IACZ,EAAE,IAAA,EAAM,eAAA,EAAiB,SAAS,CAAC,GAAA,KAAsB,IAAI,YAAA,EAAa;AAAA,IAC1E;AAAA,MACE,IAAA,EAAM,kBAAA;AAAA,MACN,OAAA,EAAS,CAAC,GAAA,KACR,CAAA,EAAA,CAAK,GAAA,CAAI,UAAA,GAAa,GAAA,GAAO,GAAA,CAAI,YAAA,EAAc,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA;AAAA,KAC7D;AAAA,IACA;AAAA,MACE,IAAA,EAAM,iBAAA;AAAA,MACN,SAAS,CAAC,GAAA,KAAsB,GAAG,WAAA,CAAY,GAAA,CAAI,UAAU,CAAC,CAAA,GAAA;AAAA,KAChE;AAAA,IACA;AAAA,MACE,IAAA,EAAM,aAAA;AAAA,MACN,SAAS,CAAC,GAAA,KAAsB,GAAG,WAAA,CAAY,GAAA,CAAI,UAAU,CAAC,CAAA,GAAA;AAAA,KAChE;AAAA,IACA;AAAA,MACE,IAAA,EAAM,aAAA;AAAA,MACN,SAAS,CAAC,GAAA,KAAsB,GAAG,WAAA,CAAY,GAAA,CAAI,UAAU,CAAC,CAAA,GAAA;AAAA,KAChE;AAAA,IACA;AAAA,MACE,IAAA,EAAM,aAAA;AAAA,MACN,SAAS,CAAC,GAAA,KAAsB,GAAG,WAAA,CAAY,GAAA,CAAI,UAAU,CAAC,CAAA,GAAA;AAAA;AAChE,GACF;AAEA,EAAA,IAAI,iBAAiB,IAAA,EAAM;AACzB,IAAA,OAAA,GAAU;AAAA,MACR;AAAA,QACE,IAAA,EAAM,eAAA;AAAA,QACN,SAAS,CAAC,GAAA,KAAsB,GAAA,CAAI,YAAA,CAAa,QAAQ,CAAC;AAAA,OAC5D;AAAA,MACA;AAAA,QACE,IAAA,EAAM,kBAAA;AAAA,QACN,OAAA,EAAS,CAAC,GAAA,KACR,CAAA,EAAA,CAAK,GAAA,CAAI,UAAA,GAAa,GAAA,GAAO,GAAA,CAAI,YAAA,EAAc,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA;AAAA,OAC7D;AAAA,MACA;AAAA,QACE,IAAA,EAAM,iBAAA;AAAA,QACN,OAAA,EAAS,CAAC,GAAA,KAAsB,aAAA,CAAc,IAAI,UAAU;AAAA,OAC9D;AAAA,MACA;AAAA,QACE,IAAA,EAAM,aAAA;AAAA,QACN,OAAA,EAAS,CAAC,GAAA,KAAsB,aAAA,CAAc,IAAI,UAAU;AAAA,OAC9D;AAAA,MACA;AAAA,QACE,IAAA,EAAM,aAAA;AAAA,QACN,OAAA,EAAS,CAAC,GAAA,KAAsB,aAAA,CAAc,IAAI,UAAU;AAAA,OAC9D;AAAA,MACA;AAAA,QACE,IAAA,EAAM,aAAA;AAAA,QACN,OAAA,EAAS,CAAC,GAAA,KAAsB,aAAA,CAAc,IAAI,UAAU;AAAA;AAC9D,KACF;AAAA,EACF;AAEA,EAAA,SAAS,uBAAuB,CAAA,EAAmB;AACjD,IAAA,OAAO,CAAA,CAAE,QAAA,EAAS,CAAE,OAAA,CAAQ,yBAAyB,GAAG,CAAA;AAAA,EAC1D;AAEA,EAAA,4BACG,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,EAAA,EACC,+BAAC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,CAAA;AAAA,MACZ,qBAAA,CAAsB,GAAA,CAAI,CAAC,GAAA,EAAK,KAAA,qBAC/B,GAAA,CAAC,cAAA,EAAA,EACE,QAAA,EAAA,GAAA,CAAI,KAAA,IAAS,GAAA,CAAI,gBAAA,IAAoB,EAAA,EAAA,EADnB,KAErB,CACD;AAAA,KAAA,EACH,CAAA,EACF,CAAA;AAAA,wBACC,OAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAA,MAAA,0BACV,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAA,EAAA,EAAa,iBAAO,IAAA,EAAK,CAAA;AAAA,MACzB,sBAAsB,GAAA,CAAI,CAAC,GAAA,EAAK,KAAA,yBAC9B,SAAA,EAAA,EACE,QAAA,EAAA,sBAAA,CAAuB,MAAA,CAAO,OAAA,CAAQ,GAAG,CAAA,CAAE,QAAA,EAAU,CAAA,EAAA,EADxC,KAEhB,CACD;AAAA,KAAA,EAAA,EANY,MAAA,CAAO,IAOtB,CACD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/OverlayLoader/OverlayLayerFactory.esm.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
+import { OverlayLayerModel } from './OverlayLayerModel.esm.js';
+import { OverlayLayerWidget } from './OverlayLayerWidget.esm.js';
+
+class OverlayLayerFactory extends AbstractReactFactory {
+  constructor() {
+    super("diagram-overlays");
+  }
+  generateModel() {
+    return new OverlayLayerModel();
+  }
+  generateReactWidget(event) {
+    return /* @__PURE__ */ jsx(OverlayLayerWidget, { layer: event.model, engine: this.engine });
+  }
+}
+
+export { OverlayLayerFactory };
+//# sourceMappingURL=OverlayLayerFactory.esm.js.map

package/dist/components/OverlayLoader/OverlayLayerFactory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLayerFactory.esm.js","sources":["../../../src/components/OverlayLoader/OverlayLayerFactory.tsx"],"sourcesContent":["import {\n  AbstractReactFactory,\n  GenerateWidgetEvent,\n} from '@projectstorm/react-canvas-core';\nimport { DiagramEngine } from '@projectstorm/react-diagrams';\n\nimport { OverlayLayerModel } from './OverlayLayerModel';\nimport { OverlayLayerWidget } from './OverlayLayerWidget';\n\nexport class OverlayLayerFactory extends AbstractReactFactory<\n  OverlayLayerModel,\n  DiagramEngine\n> {\n  constructor() {\n    super('diagram-overlays');\n  }\n\n  generateModel(): OverlayLayerModel {\n    return new OverlayLayerModel();\n  }\n\n  generateReactWidget(\n    event: GenerateWidgetEvent<OverlayLayerModel>,\n  ): JSX.Element {\n    return <OverlayLayerWidget layer={event.model} engine={this.engine} />;\n  }\n}\n"],"names":[],"mappings":";;;;;AASO,MAAM,4BAA4B,oBAAA,CAGvC;AAAA,EACA,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM,kBAAkB,CAAA;AAAA,EAC1B;AAAA,EAEA,aAAA,GAAmC;AACjC,IAAA,OAAO,IAAI,iBAAA,EAAkB;AAAA,EAC/B;AAAA,EAEA,oBACE,KAAA,EACa;AACb,IAAA,2BAAQ,kBAAA,EAAA,EAAmB,KAAA,EAAO,MAAM,KAAA,EAAO,MAAA,EAAQ,KAAK,MAAA,EAAQ,CAAA;AAAA,EACtE;AACF;;;;"}

package/dist/components/OverlayLoader/OverlayLayerModel.esm.js

@@ -0,0 +1,15 @@
+import { LayerModel } from '@projectstorm/react-canvas-core';
+
+class OverlayLayerModel extends LayerModel {
+  constructor() {
+    super({
+      type: "diagram-overlays"
+    });
+  }
+  getChildModelFactoryBank(_engine) {
+    throw new Error("Method not implemented.");
+  }
+}
+
+export { OverlayLayerModel };
+//# sourceMappingURL=OverlayLayerModel.esm.js.map

package/dist/components/OverlayLoader/OverlayLayerModel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLayerModel.esm.js","sources":["../../../src/components/OverlayLoader/OverlayLayerModel.ts"],"sourcesContent":["import {\n  AbstractModelFactory,\n  BaseModel,\n  BaseModelGenerics,\n  CanvasEngine,\n  CanvasEngineListener,\n  CanvasModel,\n  CanvasModelGenerics,\n  FactoryBank,\n  FactoryBankListener,\n  LayerModel,\n  LayerModelGenerics,\n} from '@projectstorm/react-canvas-core';\nimport { DiagramEngine } from '@projectstorm/react-diagrams';\n\nexport interface OverlayLayerModelGenerics extends LayerModelGenerics {\n  ENGINE: DiagramEngine;\n}\n\nexport class OverlayLayerModel<\n  G extends OverlayLayerModelGenerics = OverlayLayerModelGenerics,\n> extends LayerModel<G> {\n  constructor() {\n    super({\n      type: 'diagram-overlays',\n    });\n  }\n\n  getChildModelFactoryBank(\n    _engine: G['ENGINE'],\n  ): FactoryBank<\n    AbstractModelFactory<\n      BaseModel<BaseModelGenerics>,\n      CanvasEngine<CanvasEngineListener, CanvasModel<CanvasModelGenerics>>\n    >,\n    FactoryBankListener<\n      AbstractModelFactory<\n        BaseModel<BaseModelGenerics>,\n        CanvasEngine<CanvasEngineListener, CanvasModel<CanvasModelGenerics>>\n      >\n    >\n  > {\n    throw new Error('Method not implemented.');\n  }\n}\n"],"names":[],"mappings":";;AAmBO,MAAM,0BAEH,UAAA,CAAc;AAAA,EACtB,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM;AAAA,MACJ,IAAA,EAAM;AAAA,KACP,CAAA;AAAA,EACH;AAAA,EAEA,yBACE,OAAA,EAYA;AACA,IAAA,MAAM,IAAI,MAAM,yBAAyB,CAAA;AAAA,EAC3C;AACF;;;;"}

package/dist/components/OverlayLoader/OverlayLayerWidget.esm.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import CircularProgress from '@mui/material/CircularProgress';
+import styled from '@emotion/styled';
+import { Colors } from '../../resources/constants.esm.js';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  background-image: radial-gradient(
+    ${({ theme }) => theme.colors.SURFACE_CONTAINER} 10%,
+    transparent 0px
+  );
+  background-size: 16px 16px;
+  background-color: ${({ theme }) => theme.colors.SURFACE_BRIGHT};
+`;
+class OverlayLayerWidget extends Component {
+  render() {
+    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(CircularProgress, { sx: { color: Colors.PRIMARY } }) });
+  }
+}
+
+export { OverlayLayerWidget };
+//# sourceMappingURL=OverlayLayerWidget.esm.js.map

package/dist/components/OverlayLoader/OverlayLayerWidget.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLayerWidget.esm.js","sources":["../../../src/components/OverlayLoader/OverlayLayerWidget.tsx"],"sourcesContent":["import { Component } from 'react';\nimport { DiagramEngine } from '@projectstorm/react-diagrams';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport styled from '@emotion/styled';\n\nimport { OverlayLayerModel } from './OverlayLayerModel';\nimport { Colors } from '../../resources';\n\nexport interface NodeLayerWidgetProps {\n  layer: OverlayLayerModel;\n  engine: DiagramEngine;\n}\n\nconst Container = styled.div`\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  background-image: radial-gradient(\n    ${({ theme }) => theme.colors.SURFACE_CONTAINER} 10%,\n    transparent 0px\n  );\n  background-size: 16px 16px;\n  background-color: ${({ theme }) => theme.colors.SURFACE_BRIGHT};\n`;\n\nexport class OverlayLayerWidget extends Component<NodeLayerWidgetProps> {\n  render() {\n    return (\n      <Container>\n        <CircularProgress sx={{ color: Colors.PRIMARY }} />\n      </Container>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;AAaA,MAAM,YAAY,MAAA,CAAO,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,EAQnB,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,iBAAiB,CAAA;AAAA;AAAA;AAAA;AAAA,oBAAA,EAI7B,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,cAAc,CAAA;AAAA,CAAA;AAGzD,MAAM,2BAA2B,SAAA,CAAgC;AAAA,EACtE,MAAA,GAAS;AACP,IAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,EAAA,EAAI,EAAE,KAAA,EAAO,MAAA,CAAO,OAAA,EAAQ,EAAG,CAAA,EACnD,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist/components/Project/AdvancedLink/AdvancedLinkFactory.esm.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AdvancedLinkModel } from './AdvancedLinkModel.esm.js';
+import { AdvancedLinkWidget } from './AdvancedLinkWidget.esm.js';
+import styled from '@emotion/styled';
+import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
+import { keyframes } from '@emotion/react';
+
+var S;
+((S2) => {
+  S2.Keyframes = keyframes`
+		from {
+			stroke-dashoffset: 24;
+		}
+		to {
+			stroke-dashoffset: 0;
+		}
+	`;
+  S2.Path = styled.path`
+    fill: none;
+    pointer-events: auto;
+  `;
+})(S || (S = {}));
+class AdvancedLinkFactory extends AbstractReactFactory {
+  constructor(type = "default-2") {
+    super(type);
+  }
+  generateReactWidget(event) {
+    return /* @__PURE__ */ jsx(AdvancedLinkWidget, { link: event.model, diagramEngine: this.engine });
+  }
+  generateModel() {
+    return new AdvancedLinkModel();
+  }
+  generateLinkSegment(model, selected, path, showArrow) {
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        S.Path,
+        {
+          stroke: selected ? model.getOptions().selectedColor : model.getOptions().color,
+          strokeWidth: model.getOptions().width,
+          d: path,
+          markerEnd: showArrow ? `url(#arrow-head-${model.getID()})` : ""
+        }
+      ),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+        "marker",
+        {
+          id: `arrow-head-${model.getID()}`,
+          markerWidth: "5",
+          markerHeight: "5",
+          markerUnits: "strokeWidth",
+          refX: "5",
+          refY: "2.5",
+          viewBox: "0 0 5 5",
+          orient: "auto",
+          children: /* @__PURE__ */ jsx(
+            "polygon",
+            {
+              points: "0,5 0,0 5,2.5",
+              fill: selected ? model.getOptions().selectedColor : model.getOptions().color
+            }
+          )
+        }
+      ) })
+    ] });
+  }
+}
+
+export { AdvancedLinkFactory };
+//# sourceMappingURL=AdvancedLinkFactory.esm.js.map

package/dist/components/Project/AdvancedLink/AdvancedLinkFactory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedLinkFactory.esm.js","sources":["../../../../src/components/Project/AdvancedLink/AdvancedLinkFactory.tsx"],"sourcesContent":["import { AdvancedLinkModel } from './AdvancedLinkModel';\nimport { AdvancedLinkWidget } from './AdvancedLinkWidget';\nimport styled from '@emotion/styled';\nimport { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { DiagramEngine } from '@projectstorm/react-diagrams-core';\nimport { keyframes } from '@emotion/react';\n\nnamespace S {\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  export const Path = styled.path`\n    fill: none;\n    pointer-events: auto;\n  `;\n}\n\nexport class AdvancedLinkFactory<\n  Link extends AdvancedLinkModel = AdvancedLinkModel,\n> extends AbstractReactFactory<Link, DiagramEngine> {\n  constructor(type = 'default-2') {\n    super(type);\n  }\n\n  generateReactWidget(event: { model: AdvancedLinkModel }): JSX.Element {\n    return (\n      <AdvancedLinkWidget link={event.model} diagramEngine={this.engine} />\n    );\n  }\n\n  generateModel(): Link {\n    return new AdvancedLinkModel() as Link;\n  }\n\n  generateLinkSegment(\n    model: Link,\n    selected: boolean,\n    path: string,\n    showArrow?: boolean,\n  ) {\n    return (\n      <g>\n        <S.Path\n          // selected={selected}\n          stroke={\n            selected\n              ? model.getOptions().selectedColor\n              : model.getOptions().color\n          }\n          strokeWidth={model.getOptions().width}\n          d={path}\n          markerEnd={showArrow ? `url(#arrow-head-${model.getID()})` : ''}\n        />\n        <defs>\n          <marker\n            id={`arrow-head-${model.getID()}`}\n            markerWidth=\"5\"\n            markerHeight=\"5\"\n            markerUnits=\"strokeWidth\"\n            refX=\"5\"\n            refY=\"2.5\"\n            viewBox=\"0 0 5 5\"\n            orient=\"auto\"\n          >\n            <polygon\n              points=\"0,5 0,0 5,2.5\"\n              fill={\n                selected\n                  ? model.getOptions().selectedColor\n                  : model.getOptions().color\n              }\n            />\n          </marker>\n        </defs>\n      </g>\n    );\n  }\n}\n"],"names":["S"],"mappings":";;;;;;;AAOA,IAAU,CAAA;AAAA,CAAV,CAAUA,EAAAA,KAAV;AACS,EAAMA,GAAA,SAAA,GAAY,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AASlB,EAAMA,EAAAA,CAAA,OAAO,MAAA,CAAO,IAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAAA,CAAA,EAVnB,CAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAA;AAgBH,MAAM,4BAEH,oBAAA,CAA0C;AAAA,EAClD,WAAA,CAAY,OAAO,WAAA,EAAa;AAC9B,IAAA,KAAA,CAAM,IAAI,CAAA;AAAA,EACZ;AAAA,EAEA,oBAAoB,KAAA,EAAkD;AACpE,IAAA,2BACG,kBAAA,EAAA,EAAmB,IAAA,EAAM,MAAM,KAAA,EAAO,aAAA,EAAe,KAAK,MAAA,EAAQ,CAAA;AAAA,EAEvE;AAAA,EAEA,aAAA,GAAsB;AACpB,IAAA,OAAO,IAAI,iBAAA,EAAkB;AAAA,EAC/B;AAAA,EAEA,mBAAA,CACE,KAAA,EACA,QAAA,EACA,IAAA,EACA,SAAA,EACA;AACA,IAAA,4BACG,GAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,CAAA,CAAE,IAAA;AAAA,QAAF;AAAA,UAEC,MAAA,EACE,WACI,KAAA,CAAM,UAAA,GAAa,aAAA,GACnB,KAAA,CAAM,YAAW,CAAE,KAAA;AAAA,UAEzB,WAAA,EAAa,KAAA,CAAM,UAAA,EAAW,CAAE,KAAA;AAAA,UAChC,CAAA,EAAG,IAAA;AAAA,UACH,WAAW,SAAA,GAAY,CAAA,gBAAA,EAAmB,KAAA,CAAM,KAAA,EAAO,CAAA,CAAA,CAAA,GAAM;AAAA;AAAA,OAC/D;AAAA,0BACC,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,CAAA,WAAA,EAAc,KAAA,CAAM,KAAA,EAAO,CAAA,CAAA;AAAA,UAC/B,WAAA,EAAY,GAAA;AAAA,UACZ,YAAA,EAAa,GAAA;AAAA,UACb,WAAA,EAAY,aAAA;AAAA,UACZ,IAAA,EAAK,GAAA;AAAA,UACL,IAAA,EAAK,KAAA;AAAA,UACL,OAAA,EAAQ,SAAA;AAAA,UACR,MAAA,EAAO,MAAA;AAAA,UAEP,QAAA,kBAAA,GAAA;AAAA,YAAC,SAAA;AAAA,YAAA;AAAA,cACC,MAAA,EAAO,eAAA;AAAA,cACP,IAAA,EACE,WACI,KAAA,CAAM,UAAA,GAAa,aAAA,GACnB,KAAA,CAAM,YAAW,CAAE;AAAA;AAAA;AAE3B;AAAA,OACF,EACF;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}