@openchoreo/cell-diagram 1.2.0-rc.1

package/dist/components/Controls/DiagramLegend.esm.js

@@ -0,0 +1,242 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext, useRef, useEffect } from 'react';
+import styled from '@emotion/styled';
+import gsap from 'gsap';
+import { DiagramContext } from '../DiagramContext/DiagramContext.esm.js';
+import { DiagramLayer } from '../../types.esm.js';
+import { useColors } from '../../theme/ThemeContext.esm.js';
+import '../../theme/CellDiagramThemeProvider.esm.js';
+
+const DiagramLegendPanel = styled.div`
+  position: absolute;
+  top: 15px;
+  right: 15px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: start;
+  gap: 4px;
+
+  padding: 8px;
+
+  background-color: ${({ theme }) => theme.colors.SURFACE};
+  border: 1px solid ${({ theme }) => theme.colors.SURFACE_DIM};
+`;
+const LegendRow = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  gap: 8px;
+`;
+const Text = styled.div`
+  font-size: 12px;
+  user-select: none;
+  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};
+`;
+function DiagramLegend(props) {
+  const { animation = true } = props;
+  const colors = useColors();
+  const {
+    diagramLayers: { hasLayer }
+  } = useContext(DiagramContext);
+  const controlPanelRef = useRef(null);
+  const hasArchitectureLayer = hasLayer(DiagramLayer.ARCHITECTURE);
+  const hasObservabilityLayer = hasLayer(DiagramLayer.OBSERVABILITY);
+  const hasDiffLayer = hasLayer(DiagramLayer.DIFF);
+  useEffect(() => {
+    if (animation) {
+      gsap.fromTo(
+        controlPanelRef.current,
+        { scale: 0 },
+        {
+          scale: 1,
+          duration: 1,
+          ease: "power3.out",
+          delay: 1
+        }
+      );
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs(DiagramLegendPanel, { ref: controlPanelRef, children: [
+    (hasObservabilityLayer || hasDiffLayer) && /* @__PURE__ */ jsxs(LegendRow, { children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 200 50",
+          width: 50,
+          height: 10,
+          children: [
+            /* @__PURE__ */ jsx("g", { strokeWidth: "10", stroke: "hsl(0, 0%, 30%)", fill: "none", children: /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: "0",
+                y1: "25",
+                x2: "200",
+                y2: "25",
+                markerEnd: hasObservabilityLayer ? "" : "url(#solidLinkArrow)",
+                stroke: hasObservabilityLayer ? colors.PRIMARY : colors.ON_SURFACE_VARIANT
+              }
+            ) }),
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+              "marker",
+              {
+                id: "solidLinkArrow",
+                markerWidth: "5",
+                markerHeight: "5",
+                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: hasObservabilityLayer ? colors.PRIMARY : colors.ON_SURFACE_VARIANT
+                  }
+                )
+              }
+            ) })
+          ]
+        }
+      ),
+      hasObservabilityLayer && !hasDiffLayer && /* @__PURE__ */ jsx(Text, { children: "Only runtime dependency" }),
+      hasObservabilityLayer && hasDiffLayer && /* @__PURE__ */ jsx(Text, { children: "Both static and runtime dependency" }),
+      !hasObservabilityLayer && hasDiffLayer && /* @__PURE__ */ jsx(Text, { children: "Both static and runtime dependency" })
+    ] }),
+    hasArchitectureLayer && !hasDiffLayer && /* @__PURE__ */ jsxs(LegendRow, { children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 200 50",
+          width: 50,
+          height: 10,
+          children: [
+            /* @__PURE__ */ jsx("g", { strokeWidth: "10", stroke: "hsl(0, 0%, 30%)", fill: "none", children: /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: "0",
+                y1: "25",
+                x2: "200",
+                y2: "25",
+                markerEnd: hasObservabilityLayer ? "" : "url(#solidLinkArrow)",
+                stroke: colors.ON_SURFACE_VARIANT
+              }
+            ) }),
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+              "marker",
+              {
+                id: "solidLinkArrow",
+                markerWidth: "5",
+                markerHeight: "5",
+                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: colors.ON_SURFACE_VARIANT
+                  }
+                )
+              }
+            ) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { children: "Only static dependency" })
+    ] }),
+    hasDiffLayer && /* @__PURE__ */ jsxs(LegendRow, { children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 200 50",
+          width: 50,
+          height: 10,
+          children: [
+            /* @__PURE__ */ jsx("g", { strokeWidth: 10, stroke: "hsl(0, 0%, 30%)", fill: "none", children: /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: 0,
+                y1: 25,
+                x2: 200,
+                y2: 25,
+                markerEnd: hasObservabilityLayer ? "" : "url(#redLinkArrow)",
+                stroke: colors.ERROR
+              }
+            ) }),
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+              "marker",
+              {
+                id: "redLinkArrow",
+                markerWidth: "5",
+                markerHeight: "5",
+                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: colors.ERROR })
+              }
+            ) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { children: "Only runtime dependency" })
+    ] }),
+    hasDiffLayer && /* @__PURE__ */ jsxs(LegendRow, { children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 200 50",
+          width: 50,
+          height: 10,
+          children: [
+            /* @__PURE__ */ jsx("g", { strokeWidth: "10", stroke: "hsl(0, 0%, 30%)", fill: "none", children: /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: "0",
+                y1: "25",
+                x2: "200",
+                y2: "25",
+                markerEnd: hasObservabilityLayer ? "" : "url(#dashLinkArrow)",
+                strokeDasharray: "20,20"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+              "marker",
+              {
+                id: "dashLinkArrow",
+                markerWidth: "5",
+                markerHeight: "5",
+                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: colors.ON_SURFACE_VARIANT
+                  }
+                )
+              }
+            ) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { children: "Only static dependency" })
+    ] })
+  ] });
+}
+
+export { DiagramLegend, DiagramLegendPanel, LegendRow, Text };
+//# sourceMappingURL=DiagramLegend.esm.js.map

package/dist/components/Controls/DiagramLegend.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramLegend.esm.js","sources":["../../../src/components/Controls/DiagramLegend.tsx"],"sourcesContent":["import { FC, useContext, useEffect, useRef } from 'react';\nimport styled from '@emotion/styled';\nimport gsap from 'gsap';\nimport { DiagramContext } from '../DiagramContext/DiagramContext';\nimport { DiagramLayer } from '../../types';\nimport { useColors } from '../../theme';\n\nexport const DiagramLegendPanel: FC<any> = styled.div`\n  position: absolute;\n  top: 15px;\n  right: 15px;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: start;\n  gap: 4px;\n\n  padding: 8px;\n\n  background-color: ${({ theme }) => theme.colors.SURFACE};\n  border: 1px solid ${({ theme }) => theme.colors.SURFACE_DIM};\n`;\n\nexport const LegendRow: FC<any> = styled.div`\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  gap: 8px;\n`;\n\nexport const Text: FC<any> = styled.div`\n  font-size: 12px;\n  user-select: none;\n  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};\n`;\n\ninterface DiagramLegendProps {\n  animation?: boolean;\n}\n\nexport function DiagramLegend(props: DiagramLegendProps) {\n  const { animation = true } = props;\n  const colors = useColors();\n  // The \"hsl(0, 0%, 30%)\" stroke on the legend's svg <g> is a backdrop\n  // line that gets overdrawn by the actual stroke color below; we leave\n  // it as-is to preserve the original visual.\n\n  const {\n    diagramLayers: { hasLayer },\n  } = useContext(DiagramContext);\n\n  const controlPanelRef = useRef(null);\n  const hasArchitectureLayer = hasLayer(DiagramLayer.ARCHITECTURE);\n  const hasObservabilityLayer = hasLayer(DiagramLayer.OBSERVABILITY);\n  const hasDiffLayer = hasLayer(DiagramLayer.DIFF);\n\n  useEffect(() => {\n    if (animation) {\n      gsap.fromTo(\n        controlPanelRef.current,\n        { scale: 0 },\n        {\n          scale: 1,\n          duration: 1,\n          ease: 'power3.out',\n          delay: 1,\n        },\n      );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <DiagramLegendPanel ref={controlPanelRef}>\n      {(hasObservabilityLayer || hasDiffLayer) && (\n        <LegendRow>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 200 50\"\n            width={50}\n            height={10}\n          >\n            <g strokeWidth=\"10\" stroke=\"hsl(0, 0%, 30%)\" fill=\"none\">\n              <line\n                x1=\"0\"\n                y1=\"25\"\n                x2=\"200\"\n                y2=\"25\"\n                markerEnd={hasObservabilityLayer ? '' : 'url(#solidLinkArrow)'}\n                stroke={\n                  hasObservabilityLayer\n                    ? colors.PRIMARY\n                    : colors.ON_SURFACE_VARIANT\n                }\n              />\n            </g>\n            <defs>\n              <marker\n                id=\"solidLinkArrow\"\n                markerWidth=\"5\"\n                markerHeight=\"5\"\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={\n                    hasObservabilityLayer\n                      ? colors.PRIMARY\n                      : colors.ON_SURFACE_VARIANT\n                  }\n                />\n              </marker>\n            </defs>\n          </svg>\n          {hasObservabilityLayer && !hasDiffLayer && (\n            <Text>Only runtime dependency</Text>\n          )}\n          {hasObservabilityLayer && hasDiffLayer && (\n            <Text>Both static and runtime dependency</Text>\n          )}\n          {!hasObservabilityLayer && hasDiffLayer && (\n            <Text>Both static and runtime dependency</Text>\n          )}\n        </LegendRow>\n      )}\n      {hasArchitectureLayer && !hasDiffLayer && (\n        <LegendRow>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 200 50\"\n            width={50}\n            height={10}\n          >\n            <g strokeWidth=\"10\" stroke=\"hsl(0, 0%, 30%)\" fill=\"none\">\n              <line\n                x1=\"0\"\n                y1=\"25\"\n                x2=\"200\"\n                y2=\"25\"\n                markerEnd={hasObservabilityLayer ? '' : 'url(#solidLinkArrow)'}\n                stroke={colors.ON_SURFACE_VARIANT}\n              />\n            </g>\n            <defs>\n              <marker\n                id=\"solidLinkArrow\"\n                markerWidth=\"5\"\n                markerHeight=\"5\"\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={colors.ON_SURFACE_VARIANT}\n                />\n              </marker>\n            </defs>\n          </svg>\n          <Text>Only static dependency</Text>\n        </LegendRow>\n      )}\n      {hasDiffLayer && (\n        <LegendRow>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 200 50\"\n            width={50}\n            height={10}\n          >\n            <g strokeWidth={10} stroke=\"hsl(0, 0%, 30%)\" fill=\"none\">\n              <line\n                x1={0}\n                y1={25}\n                x2={200}\n                y2={25}\n                markerEnd={hasObservabilityLayer ? '' : 'url(#redLinkArrow)'}\n                stroke={colors.ERROR}\n              />\n            </g>\n            <defs>\n              <marker\n                id=\"redLinkArrow\"\n                markerWidth=\"5\"\n                markerHeight=\"5\"\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={colors.ERROR} />\n              </marker>\n            </defs>\n          </svg>\n          <Text>Only runtime dependency</Text>\n        </LegendRow>\n      )}\n      {hasDiffLayer && (\n        <LegendRow>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 200 50\"\n            width={50}\n            height={10}\n          >\n            <g strokeWidth=\"10\" stroke=\"hsl(0, 0%, 30%)\" fill=\"none\">\n              <line\n                x1=\"0\"\n                y1=\"25\"\n                x2=\"200\"\n                y2=\"25\"\n                markerEnd={hasObservabilityLayer ? '' : 'url(#dashLinkArrow)'}\n                strokeDasharray=\"20,20\"\n              />\n            </g>\n            <defs>\n              <marker\n                id=\"dashLinkArrow\"\n                markerWidth=\"5\"\n                markerHeight=\"5\"\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={colors.ON_SURFACE_VARIANT}\n                />\n              </marker>\n            </defs>\n          </svg>\n          <Text>Only static dependency</Text>\n        </LegendRow>\n      )}\n    </DiagramLegendPanel>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Controls/LayerButton.esm.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+import Tooltip from '@mui/material/Tooltip';
+
+const Button = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  cursor: ${(props) => props.clickable ? "pointer" : "not-allowed"};
+  color: ${({ theme, selected }) => selected ? theme.colors.PRIMARY : theme.colors.ON_SURFACE_VARIANT};
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  div {
+    border: 1px solid
+      ${({ theme, selected }) => selected ? theme.colors.PRIMARY : theme.colors.SURFACE_DIM};
+    background-color: ${({ theme }) => theme.colors.SURFACE};
+    color: ${({ theme, selected }) => selected ? theme.colors.PRIMARY : theme.colors.OUTLINE_VARIANT};
+  }
+  &:hover {
+    color: ${({ theme }) => theme.colors.PRIMARY};
+  }
+  &:hover div {
+    border: 1px solid ${({ theme }) => theme.colors.PRIMARY};
+    color: ${({ theme }) => theme.colors.PRIMARY};
+  }
+`;
+const TooltipContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 12px;
+`;
+const Title = styled.div`
+  font-size: 12px;
+  font-weight: 600;
+`;
+const Description = styled.div`
+  font-size: 12px;
+`;
+function LayerButton(props) {
+  const {
+    children,
+    onClick,
+    selected = false,
+    clickable = true,
+    tooltipTitle,
+    tooltipDescription,
+    tooltipPlacement = "top-start"
+  } = props;
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      arrow: true,
+      placement: tooltipPlacement,
+      title: /* @__PURE__ */ jsxs(Fragment, { children: [
+        !tooltipDescription && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          tooltipTitle,
+          " "
+        ] }),
+        tooltipDescription && /* @__PURE__ */ jsxs(TooltipContainer, { children: [
+          /* @__PURE__ */ jsx(Title, { children: tooltipTitle }),
+          /* @__PURE__ */ jsx(Description, { children: tooltipDescription })
+        ] })
+      ] }),
+      enterNextDelay: 500,
+      componentsProps: {
+        tooltip: {
+          sx: {
+            fontFamily: "GilmerRegular",
+            fontSize: "12px",
+            padding: "6px 10px"
+          }
+        }
+      },
+      PopperProps: {
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, -10]
+            }
+          }
+        ]
+      },
+      children: /* @__PURE__ */ jsx(Button, { onClick, selected, clickable, children })
+    }
+  );
+}
+
+export { LayerButton };
+//# sourceMappingURL=LayerButton.esm.js.map

package/dist/components/Controls/LayerButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerButton.esm.js","sources":["../../../src/components/Controls/LayerButton.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { ReactNode } from 'react';\nimport Tooltip from '@mui/material/Tooltip';\n\ninterface ButtonProps {\n  selected?: boolean;\n  clickable?: boolean;\n}\n\nconst Button = styled.div<ButtonProps>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 12px;\n  cursor: ${props => (props.clickable ? 'pointer' : 'not-allowed')};\n  color: ${({ theme, selected }) =>\n    selected ? theme.colors.PRIMARY : theme.colors.ON_SURFACE_VARIANT};\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  div {\n    border: 1px solid\n      ${({ theme, selected }) =>\n        selected ? theme.colors.PRIMARY : theme.colors.SURFACE_DIM};\n    background-color: ${({ theme }) => theme.colors.SURFACE};\n    color: ${({ theme, selected }) =>\n      selected ? theme.colors.PRIMARY : theme.colors.OUTLINE_VARIANT};\n  }\n  &:hover {\n    color: ${({ theme }) => theme.colors.PRIMARY};\n  }\n  &:hover div {\n    border: 1px solid ${({ theme }) => theme.colors.PRIMARY};\n    color: ${({ theme }) => theme.colors.PRIMARY};\n  }\n`;\n\nconst TooltipContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  gap: 12px;\n`;\n\nconst Title = styled.div`\n  font-size: 12px;\n  font-weight: 600;\n`;\n\nconst Description = styled.div`\n  font-size: 12px;\n`;\n\ninterface LayerButtonProps {\n  children: ReactNode;\n  selected?: boolean;\n  clickable?: boolean;\n  onClick: () => void;\n  tooltipTitle?: string;\n  tooltipDescription?: string;\n  tooltipPlacement?: 'left-end' | 'right-end' | 'top-start';\n}\n\nexport function LayerButton(props: LayerButtonProps) {\n  const {\n    children,\n    onClick,\n    selected = false,\n    clickable = true,\n    tooltipTitle,\n    tooltipDescription,\n    tooltipPlacement = 'top-start',\n  } = props;\n\n  return (\n    <Tooltip\n      arrow\n      placement={tooltipPlacement}\n      title={\n        <>\n          {!tooltipDescription && <> {tooltipTitle} </>}\n          {tooltipDescription && (\n            <TooltipContainer>\n              <Title>{tooltipTitle}</Title>\n              <Description>{tooltipDescription}</Description>\n            </TooltipContainer>\n          )}\n        </>\n      }\n      enterNextDelay={500}\n      componentsProps={{\n        tooltip: {\n          sx: {\n            fontFamily: 'GilmerRegular',\n            fontSize: '12px',\n            padding: '6px 10px',\n          },\n        },\n      }}\n      PopperProps={{\n        modifiers: [\n          {\n            name: 'offset',\n            options: {\n              offset: [0, -10],\n            },\n          },\n        ],\n      }}\n    >\n      <Button onClick={onClick} selected={selected} clickable={clickable}>\n        {children}\n      </Button>\n    </Tooltip>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/DiagramContext/DiagramContext.esm.js

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+import { useActiveLayers } from '../../hooks/useActiveLayers.esm.js';
+
+const defaultState = {};
+const DiagramContext = createContext(defaultState);
+function CellDiagramContext(props) {
+  const {
+    children,
+    selectedNodeId,
+    focusedNodeId,
+    componentMenu,
+    zoomLevel,
+    observationSummary,
+    defaultDiagramLayer,
+    modelVersion,
+    previewMode,
+    setSelectedNodeId,
+    setFocusedNodeId,
+    onComponentDoubleClick
+  } = props;
+  const { activeLayers, addLayer, removeLayer, setLayer, hasLayer } = useActiveLayers({ defaultDiagramLayer });
+  const context = {
+    selectedNodeId,
+    focusedNodeId,
+    componentMenu,
+    zoomLevel,
+    observationSummary,
+    modelVersion,
+    previewMode,
+    setSelectedNodeId,
+    setFocusedNodeId,
+    onComponentDoubleClick,
+    diagramLayers: {
+      activeLayers,
+      setLayer,
+      addLayer,
+      removeLayer,
+      hasLayer
+    }
+  };
+  return /* @__PURE__ */ jsx(DiagramContext.Provider, { value: { ...context }, children });
+}
+const useDiagramContext = () => useContext(DiagramContext);
+
+export { CellDiagramContext, DiagramContext, useDiagramContext };
+//# sourceMappingURL=DiagramContext.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramContext.esm.js","sources":["../../../src/components/DiagramContext/DiagramContext.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext } from 'react';\nimport { DiagramLayer } from '../../types';\nimport { useActiveLayers } from '../../hooks/useActiveLayers';\nimport { MoreVertMenuItem, ObservationSummary } from '../../types';\n\ninterface IDiagramContext {\n  selectedNodeId: string;\n  focusedNodeId?: string;\n  componentMenu?: MoreVertMenuItem[];\n  zoomLevel: number;\n  observationSummary?: ObservationSummary;\n  modelVersion?: string;\n  previewMode?: boolean;\n  setSelectedNodeId: (id: string) => void;\n  setFocusedNodeId?: (id: string) => void;\n  onComponentDoubleClick?: (componentId: string) => void;\n  diagramLayers: {\n    activeLayers: DiagramLayer[];\n    setLayer: (layer: DiagramLayer) => void;\n    addLayer: (layer: DiagramLayer) => void;\n    removeLayer: (layer: DiagramLayer) => void;\n    hasLayer: (layer: DiagramLayer) => boolean;\n  };\n}\n// Omitted states are handled by the Diagram context provider\ntype OmittedDiagramContext = Omit<IDiagramContext, 'diagramLayers'>;\ninterface DiagramContextProps extends OmittedDiagramContext {\n  children: ReactNode;\n  defaultDiagramLayer: DiagramLayer;\n}\n\nconst defaultState: any = {};\nexport const DiagramContext = createContext<IDiagramContext>(defaultState);\n\nexport function CellDiagramContext(props: DiagramContextProps) {\n  const {\n    children,\n    selectedNodeId,\n    focusedNodeId,\n    componentMenu,\n    zoomLevel,\n    observationSummary,\n    defaultDiagramLayer,\n    modelVersion,\n    previewMode,\n    setSelectedNodeId,\n    setFocusedNodeId,\n    onComponentDoubleClick,\n  } = props;\n\n  const { activeLayers, addLayer, removeLayer, setLayer, hasLayer } =\n    useActiveLayers({ defaultDiagramLayer });\n\n  const context: IDiagramContext = {\n    selectedNodeId,\n    focusedNodeId,\n    componentMenu,\n    zoomLevel,\n    observationSummary,\n    modelVersion,\n    previewMode,\n    setSelectedNodeId,\n    setFocusedNodeId,\n    onComponentDoubleClick,\n    diagramLayers: {\n      activeLayers,\n      setLayer,\n      addLayer,\n      removeLayer,\n      hasLayer,\n    },\n  };\n\n  return (\n    <DiagramContext.Provider value={{ ...context }}>\n      {children}\n    </DiagramContext.Provider>\n  );\n}\n\nexport const useDiagramContext = () => useContext(DiagramContext);\n"],"names":[],"mappings":";;;;AA+BA,MAAM,eAAoB,EAAC;AACpB,MAAM,cAAA,GAAiB,cAA+B,YAAY;AAElE,SAAS,mBAAmB,KAAA,EAA4B;AAC7D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,kBAAA;AAAA,IACA,mBAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,YAAA,EAAc,QAAA,EAAU,WAAA,EAAa,QAAA,EAAU,UAAS,GAC9D,eAAA,CAAgB,EAAE,mBAAA,EAAqB,CAAA;AAEzC,EAAA,MAAM,OAAA,GAA2B;AAAA,IAC/B,cAAA;AAAA,IACA,aAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,gBAAA;AAAA,IACA,sBAAA;AAAA,IACA,aAAA,EAAe;AAAA,MACb,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,eAAe,QAAA,EAAf,EAAwB,OAAO,EAAE,GAAG,OAAA,EAAQ,EAC1C,QAAA,EACH,CAAA;AAEJ;AAEO,MAAM,iBAAA,GAAoB,MAAM,UAAA,CAAW,cAAc;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalLinkFactory.esm.js","sources":["../../../../src/components/External/ExternalLink/ExternalLinkFactory.tsx"],"sourcesContent":["import { DefaultLinkFactory } from '@projectstorm/react-diagrams';\nimport { ExternalLinkModel } from './ExternalLinkModel';\nimport { ExternalLinkWidget } from './ExternalLinkWidget';\n\nexport class ExternalLinkFactory extends DefaultLinkFactory {\n  constructor() {\n    super('externalLink');\n  }\n\n  generateModel(event: { initialConfig: any }): ExternalLinkModel {\n    return new ExternalLinkModel(event.initialConfig.id);\n  }\n\n  generateReactWidget(props: { model: ExternalLinkModel }): JSX.Element {\n    return <ExternalLinkWidget link={props.model} engine={this.engine} />;\n  }\n}\n"],"names":[],"mappings":";;;;;AAIO,MAAM,4BAA4B,kBAAA,CAAmB;AAAA,EAC1D,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM,cAAc,CAAA;AAAA,EACtB;AAAA,EAEA,cAAc,KAAA,EAAkD;AAC9D,IAAA,OAAO,IAAI,iBAAA,CAAkB,KAAA,CAAM,aAAA,CAAc,EAAE,CAAA;AAAA,EACrD;AAAA,EAEA,oBAAoB,KAAA,EAAkD;AACpE,IAAA,2BAAQ,kBAAA,EAAA,EAAmB,IAAA,EAAM,MAAM,KAAA,EAAO,MAAA,EAAQ,KAAK,MAAA,EAAQ,CAAA;AAAA,EACrE;AACF;;;;"}

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

@@ -0,0 +1,112 @@
+import { PortModelAlignment } from '@projectstorm/react-diagrams';
+import { BezierCurve, Point } from '@projectstorm/geometry';
+import { SharedLinkModel } from '../../SharedLink/SharedLink.esm.js';
+
+class ExternalLinkModel extends SharedLinkModel {
+  sourceNode;
+  targetNode;
+  withRightOffset;
+  constructor(id, withRightOffset = false) {
+    super(id, "externalLink");
+    this.withRightOffset = withRightOffset;
+  }
+  setSourceNode(nodeId) {
+    this.sourceNode = { nodeId };
+  }
+  setTargetNode(nodeId) {
+    this.targetNode = { nodeId };
+  }
+  getArrowHeadPoints = () => {
+    let points = "";
+    const targetPort = this.getTargetPort().getPosition();
+    if (this.getTargetPort().getOptions().alignment === PortModelAlignment.RIGHT) {
+      points = `${targetPort.x + 6} ${targetPort.y}, ${targetPort.x + 16} ${targetPort.y + 10},
+                ${targetPort.x + 16} ${targetPort.y - 10}`;
+    } else if (this.getTargetPort().getOptions().alignment === PortModelAlignment.LEFT) {
+      points = `${targetPort.x} ${targetPort.y}, ${targetPort.x - 14} ${targetPort.y + 10},
+                ${targetPort.x - 14} ${targetPort.y - 10}`;
+    } else if (this.getTargetPort().getOptions().alignment === PortModelAlignment.BOTTOM) {
+      points = `${targetPort.x} ${targetPort.y + 2}, ${targetPort.x + 10} ${targetPort.y + 14},
+				${targetPort.x - 10} ${targetPort.y + 14}`;
+    } else if (this.getTargetPort().getOptions().alignment === PortModelAlignment.TOP) {
+      points = `${targetPort.x} ${targetPort.y}, ${targetPort.x + 10} ${targetPort.y - 15},
+					${targetPort.x - 10} ${targetPort.y - 15}`;
+    }
+    return points;
+  };
+  getCurvePath = () => {
+    const lineCurve = new BezierCurve();
+    if (this.getSourcePort() && this.getTargetPort()) {
+      const markerSpace = 60;
+      const sourcePoint = this.getSourcePort().getPosition().clone();
+      const targetPoint = this.getTargetPort().getPosition().clone();
+      if (this.getTargetPort().getOptions().alignment === PortModelAlignment.LEFT) {
+        targetPoint.x -= markerSpace;
+      } else if (this.getTargetPort().getOptions().alignment === PortModelAlignment.RIGHT) {
+        targetPoint.x += markerSpace;
+      } else if (this.getTargetPort().getOptions().alignment === PortModelAlignment.BOTTOM) {
+        targetPoint.y += markerSpace;
+      } else {
+        targetPoint.y -= markerSpace;
+      }
+      lineCurve.setSource(this.getSourcePort().getPosition());
+      lineCurve.setTarget(this.getTargetPort().getPosition());
+      lineCurve.setSourceControl(sourcePoint);
+      lineCurve.setTargetControl(targetPoint);
+      lineCurve.getSourceControl().translate(...this.calculateControlOffset(this.getSourcePort()));
+      lineCurve.getTargetControl().translate(...this.calculateControlOffset(this.getTargetPort()));
+    }
+    return lineCurve.getSVGCurve();
+  };
+  getCurvePathWithOffset = () => {
+    const lineCurve = new BezierCurve();
+    if (this.getSourcePort() && this.getTargetPort()) {
+      const markerSpace = 60;
+      const sourcePoint = this.getSourcePort().getPosition().clone();
+      const targetPoint = this.getTargetPort().getPosition().clone();
+      const middlePoint = new Point(targetPoint.x + 100, sourcePoint.y - 100);
+      if (this.getTargetPort().getOptions().alignment === PortModelAlignment.LEFT) {
+        targetPoint.x -= markerSpace;
+      } else if (this.getTargetPort().getOptions().alignment === PortModelAlignment.RIGHT) {
+        targetPoint.x += markerSpace;
+      } else if (this.getTargetPort().getOptions().alignment === PortModelAlignment.BOTTOM) {
+        targetPoint.y += markerSpace;
+      } else {
+        targetPoint.y -= markerSpace;
+      }
+      lineCurve.setSource(this.getSourcePort().getPosition());
+      lineCurve.setTarget(this.getTargetPort().getPosition());
+      lineCurve.setSourceControl(middlePoint);
+      lineCurve.setTargetControl(targetPoint);
+      lineCurve.getSourceControl().translate(...this.calculateControlOffset(this.getSourcePort()));
+      lineCurve.getTargetControl().translate(...this.calculateControlOffset(this.getTargetPort()));
+    }
+    return lineCurve.getSVGCurve();
+  };
+  getTwoBendPath = () => {
+    let path = "";
+    let startHorizontally = false;
+    if (this.getTargetPort().getOptions().alignment === PortModelAlignment.LEFT || this.getTargetPort().getOptions().alignment === PortModelAlignment.RIGHT) {
+      startHorizontally = true;
+    }
+    if (this.getSourcePort() && this.getTargetPort()) {
+      const sourcePoint = this.getSourcePort().getPosition().clone();
+      const targetPoint = this.getTargetPort().getPosition().clone();
+      if (startHorizontally) {
+        path = `M ${sourcePoint.x} ${sourcePoint.y} `;
+        path += `L ${(sourcePoint.x + targetPoint.x) / 2} ${sourcePoint.y} `;
+        path += `L ${(sourcePoint.x + targetPoint.x) / 2} ${targetPoint.y} `;
+        path += `L ${targetPoint.x} ${targetPoint.y}`;
+      } else {
+        path = `M ${sourcePoint.x} ${sourcePoint.y} `;
+        path += `L ${sourcePoint.x} ${(sourcePoint.y + targetPoint.y) / 2} `;
+        path += `L ${targetPoint.x} ${(sourcePoint.y + targetPoint.y) / 2} `;
+        path += `L ${targetPoint.x} ${targetPoint.y}`;
+      }
+    }
+    return path;
+  };
+}
+
+export { ExternalLinkModel };
+//# sourceMappingURL=ExternalLinkModel.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalLinkModel.esm.js","sources":["../../../../src/components/External/ExternalLink/ExternalLinkModel.ts"],"sourcesContent":["import { PortModelAlignment } from '@projectstorm/react-diagrams';\nimport { BezierCurve, Point } from '@projectstorm/geometry';\nimport { SharedLinkModel } from '../../SharedLink/SharedLink';\n\ninterface LinkOrigins {\n  nodeId: string;\n}\n\nexport class ExternalLinkModel extends SharedLinkModel {\n  sourceNode!: LinkOrigins;\n  targetNode!: LinkOrigins;\n  withRightOffset: boolean;\n\n  constructor(id: string, withRightOffset: boolean = false) {\n    super(id, 'externalLink');\n    this.withRightOffset = withRightOffset;\n  }\n\n  setSourceNode(nodeId: string) {\n    this.sourceNode = { nodeId };\n  }\n\n  setTargetNode(nodeId: string) {\n    this.targetNode = { nodeId };\n  }\n\n  getArrowHeadPoints = (): string => {\n    let points: string = '';\n    const targetPort: Point = this.getTargetPort().getPosition();\n\n    if (\n      this.getTargetPort().getOptions().alignment === PortModelAlignment.RIGHT\n    ) {\n      points = `${targetPort.x + 6} ${targetPort.y}, ${targetPort.x + 16} ${\n        targetPort.y + 10\n      },\n                ${targetPort.x + 16} ${targetPort.y - 10}`;\n    } else if (\n      this.getTargetPort().getOptions().alignment === PortModelAlignment.LEFT\n    ) {\n      points = `${targetPort.x} ${targetPort.y}, ${targetPort.x - 14} ${\n        targetPort.y + 10\n      },\n                ${targetPort.x - 14} ${targetPort.y - 10}`;\n    } else if (\n      this.getTargetPort().getOptions().alignment === PortModelAlignment.BOTTOM\n    ) {\n      points = `${targetPort.x} ${targetPort.y + 2}, ${targetPort.x + 10} ${\n        targetPort.y + 14\n      },\n\t\t\t\t${targetPort.x - 10} ${targetPort.y + 14}`;\n    } else if (\n      this.getTargetPort().getOptions().alignment === PortModelAlignment.TOP\n    ) {\n      points = `${targetPort.x} ${targetPort.y}, ${targetPort.x + 10} ${\n        targetPort.y - 15\n      },\n\t\t\t\t\t${targetPort.x - 10} ${targetPort.y - 15}`;\n    }\n    return points;\n  };\n\n  getCurvePath = (): string => {\n    const lineCurve = new BezierCurve();\n\n    if (this.getSourcePort() && this.getTargetPort()) {\n      const markerSpace: number = 60;\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 -= markerSpace;\n      } else if (\n        this.getTargetPort().getOptions().alignment === PortModelAlignment.RIGHT\n      ) {\n        targetPoint.x += markerSpace;\n      } else if (\n        this.getTargetPort().getOptions().alignment ===\n        PortModelAlignment.BOTTOM\n      ) {\n        targetPoint.y += markerSpace;\n      } else {\n        targetPoint.y -= markerSpace;\n      }\n\n      lineCurve.setSource(this.getSourcePort().getPosition());\n      lineCurve.setTarget(this.getTargetPort().getPosition());\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  getCurvePathWithOffset = (): string => {\n    const lineCurve = new BezierCurve();\n\n    if (this.getSourcePort() && this.getTargetPort()) {\n      const markerSpace: number = 60;\n\n      const sourcePoint: Point = this.getSourcePort().getPosition().clone();\n      const targetPoint: Point = this.getTargetPort().getPosition().clone();\n      const middlePoint = new Point(targetPoint.x + 100, sourcePoint.y - 100);\n\n      if (\n        this.getTargetPort().getOptions().alignment === PortModelAlignment.LEFT\n      ) {\n        targetPoint.x -= markerSpace;\n      } else if (\n        this.getTargetPort().getOptions().alignment === PortModelAlignment.RIGHT\n      ) {\n        targetPoint.x += markerSpace;\n      } else if (\n        this.getTargetPort().getOptions().alignment ===\n        PortModelAlignment.BOTTOM\n      ) {\n        targetPoint.y += markerSpace;\n      } else {\n        targetPoint.y -= markerSpace;\n      }\n\n      lineCurve.setSource(this.getSourcePort().getPosition());\n      lineCurve.setTarget(this.getTargetPort().getPosition());\n      lineCurve.setSourceControl(middlePoint);\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  getTwoBendPath = (): string => {\n    let path = '';\n    let startHorizontally = false;\n\n    if (\n      this.getTargetPort().getOptions().alignment === PortModelAlignment.LEFT ||\n      this.getTargetPort().getOptions().alignment === PortModelAlignment.RIGHT\n    ) {\n      startHorizontally = true;\n    }\n\n    if (this.getSourcePort() && this.getTargetPort()) {\n      const sourcePoint: Point = this.getSourcePort().getPosition().clone();\n      const targetPoint: Point = this.getTargetPort().getPosition().clone();\n\n      if (startHorizontally) {\n        // Start horizontally, then bend in the center of the y-axis\n        path = `M ${sourcePoint.x} ${sourcePoint.y} `;\n        path += `L ${(sourcePoint.x + targetPoint.x) / 2} ${sourcePoint.y} `;\n        path += `L ${(sourcePoint.x + targetPoint.x) / 2} ${targetPoint.y} `;\n        path += `L ${targetPoint.x} ${targetPoint.y}`;\n      } else {\n        // Start vertically, then bend in the center of the x-axis\n        path = `M ${sourcePoint.x} ${sourcePoint.y} `;\n        path += `L ${sourcePoint.x} ${(sourcePoint.y + targetPoint.y) / 2} `;\n        path += `L ${targetPoint.x} ${(sourcePoint.y + targetPoint.y) / 2} `;\n        path += `L ${targetPoint.x} ${targetPoint.y}`;\n      }\n    }\n\n    return path;\n  };\n}\n"],"names":[],"mappings":"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"}