@openchoreo/cell-diagram 1.2.0-rc.1

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

@@ -0,0 +1,158 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useContext, useState, useRef, useEffect } from 'react';
+import { PortModelAlignment } from '@projectstorm/react-diagrams';
+import { ComponentHeadWidget } from './ComponentHead/ComponentHead.esm.js';
+import { ComponentNode, ComponentName, PortsContainer } from './styles.esm.js';
+import { DiagramContext } from '../../DiagramContext/DiagramContext.esm.js';
+import { ComponentPortWidget } from '../ComponentPort/ComponentPortWidget.esm.js';
+import Tooltip from '@mui/material/Tooltip';
+import { CellBounds } from '../../Cell/CellNode/CellModel.esm.js';
+
+function ComponentWidget(props) {
+  const { node, engine } = props;
+  const {
+    selectedNodeId,
+    focusedNodeId,
+    componentMenu,
+    onComponentDoubleClick,
+    previewMode
+  } = useContext(DiagramContext);
+  const [selectedLink, setSelectedLink] = useState(void 0);
+  const [isHovered, setIsHovered] = useState(false);
+  const headPorts = useRef([]);
+  const displayName = node.component.label || node.component.id;
+  const isDisabled = Boolean(node.component.disabled?.status);
+  useEffect(() => {
+    if (previewMode) {
+      return void 0;
+    }
+    const listener = node.registerListener({
+      SELECT: (event) => {
+        setSelectedLink(event.component);
+      },
+      UNSELECT: () => {
+        setSelectedLink(void 0);
+      }
+    });
+    headPorts.current.push(
+      node.getPortFromID(`left-${node.getID()}`)
+    );
+    headPorts.current.push(
+      node.getPortFromID(`right-${node.getID()}`)
+    );
+    headPorts.current.push(
+      node.getPortFromID(`bottom-${node.getID()}`)
+    );
+    const handleExternalConsumerLink = (evt, action) => {
+      setIsHovered(action === "SELECT");
+      const portId = evt.cellBound === CellBounds.NorthBound ? "top" : "left";
+      const alignment = evt.cellBound === CellBounds.NorthBound ? PortModelAlignment.TOP : PortModelAlignment.LEFT;
+      const port = node.getPort(`${portId}-${node.getID()}`);
+      const portLinks = new Map(
+        Object.entries(port.links)
+      );
+      portLinks.forEach((link) => {
+        if (link.getTargetPort().getOptions().alignment === alignment) {
+          link.fireEvent({}, action);
+        }
+      });
+    };
+    const externalConsumerListener = node.registerListener({
+      EXTERNAL_CONSUMER_LINK_SELECT: (evt) => {
+        handleExternalConsumerLink(
+          evt,
+          "SELECT"
+        );
+      },
+      EXTERNAL_CONSUMER_LINK_UNSELECT: (evt) => {
+        handleExternalConsumerLink(
+          evt,
+          "UNSELECT"
+        );
+      }
+    });
+    return () => {
+      node.deregisterListener(listener);
+      node.deregisterListener(externalConsumerListener);
+    };
+  }, [node]);
+  const handleOnHover = (task) => {
+    setIsHovered(task === "SELECT" ? true : false);
+    node.handleHover(headPorts.current, task);
+  };
+  const handleOnWidgetDoubleClick = () => {
+    if (onComponentDoubleClick) {
+      onComponentDoubleClick(node.component.id);
+    }
+  };
+  const handleMouseEnter = () => {
+    if (previewMode) {
+      return;
+    }
+    setIsHovered(true);
+    handleOnHover("SELECT");
+  };
+  const handleMouseLeave = () => {
+    if (previewMode) {
+      return;
+    }
+    setIsHovered(false);
+    handleOnHover("UNSELECT");
+  };
+  const handleOnContextMenu = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs(
+    ComponentNode,
+    {
+      previewMode: Boolean(previewMode),
+      onMouseOver: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onDoubleClick: handleOnWidgetDoubleClick,
+      onContextMenu: handleOnContextMenu,
+      children: [
+        /* @__PURE__ */ jsx(
+          ComponentHeadWidget,
+          {
+            engine,
+            node,
+            isSelected: node.getID() === selectedNodeId || node.isNodeSelected(selectedLink, node.getID()),
+            isFocused: node.getID() === focusedNodeId || isHovered,
+            menuItems: componentMenu ?? [],
+            onFocusOut: handleMouseLeave
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: displayName,
+            placement: "bottom",
+            enterNextDelay: 500,
+            arrow: true,
+            children: !previewMode ? /* @__PURE__ */ jsx(ComponentName, { disabled: isDisabled, children: displayName }) : /* @__PURE__ */ jsx(Fragment, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs(PortsContainer, { children: [
+          /* @__PURE__ */ jsx(
+            ComponentPortWidget,
+            {
+              port: node.getPort(`top-${node.getID()}`),
+              engine
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ComponentPortWidget,
+            {
+              port: node.getPort(`bottom-${node.getID()}`),
+              engine
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { ComponentWidget };
+//# sourceMappingURL=ComponentWidget.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentWidget.esm.js","sources":["../../../../src/components/Component/ComponentNode/ComponentWidget.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useRef, useState } from 'react';\nimport {\n  DiagramEngine,\n  LinkModel,\n  PortModel,\n  PortModelAlignment,\n} from '@projectstorm/react-diagrams';\nimport { ComponentModel } from './ComponentModel';\nimport { ComponentLinkModel } from '../ComponentLink/ComponentLinkModel';\nimport { ComponentHeadWidget } from './ComponentHead/ComponentHead';\nimport { ComponentName, ComponentNode, PortsContainer } from './styles';\nimport { DiagramContext } from '../../DiagramContext/DiagramContext';\nimport { ComponentPortWidget } from '../ComponentPort/ComponentPortWidget';\nimport Tooltip from '@mui/material/Tooltip';\nimport { ExternalConsumerLinkSelectEvent } from '../../../types';\nimport { CellBounds } from '../../Cell/CellNode/CellModel';\nimport { BaseEvent } from '@projectstorm/react-canvas-core';\nimport { ComponentPortModel } from '../ComponentPort/ComponentPortModel';\n\ninterface ComponentWidgetProps {\n  node: ComponentModel;\n  engine: DiagramEngine;\n}\n\nexport function ComponentWidget(props: ComponentWidgetProps) {\n  const { node, engine } = props;\n  const {\n    selectedNodeId,\n    focusedNodeId,\n    componentMenu,\n    onComponentDoubleClick,\n    previewMode,\n  } = useContext(DiagramContext);\n  const [selectedLink, setSelectedLink] = useState<\n    ComponentLinkModel | undefined\n  >(undefined);\n  const [isHovered, setIsHovered] = useState<boolean>(false);\n  const headPorts = useRef<PortModel[]>([]);\n\n  const displayName: string = node.component.label || node.component.id;\n  const isDisabled = Boolean(node.component.disabled?.status);\n\n  useEffect(() => {\n    if (previewMode) {\n      return undefined;\n    }\n    const listener = node.registerListener({\n      SELECT: (event: any) => {\n        setSelectedLink(event.component as ComponentLinkModel);\n      },\n      UNSELECT: () => {\n        setSelectedLink(undefined);\n      },\n    });\n    headPorts.current.push(\n      node.getPortFromID(`left-${node.getID()}`) as PortModel,\n    );\n    headPorts.current.push(\n      node.getPortFromID(`right-${node.getID()}`) as PortModel,\n    );\n    headPorts.current.push(\n      node.getPortFromID(`bottom-${node.getID()}`) as PortModel,\n    );\n\n    const handleExternalConsumerLink = (\n      evt: ExternalConsumerLinkSelectEvent,\n      action: 'SELECT' | 'UNSELECT',\n    ) => {\n      setIsHovered(action === 'SELECT');\n      const portId = evt.cellBound === CellBounds.NorthBound ? 'top' : 'left';\n      const alignment =\n        evt.cellBound === CellBounds.NorthBound\n          ? PortModelAlignment.TOP\n          : PortModelAlignment.LEFT;\n      const port = node.getPort(`${portId}-${node.getID()}`) as PortModel;\n      const portLinks: Map<string, LinkModel> = new Map(\n        Object.entries(port.links),\n      );\n      portLinks.forEach(link => {\n        if (link.getTargetPort().getOptions().alignment === alignment) {\n          link.fireEvent({}, action);\n        }\n      });\n    };\n\n    const externalConsumerListener = node.registerListener({\n      EXTERNAL_CONSUMER_LINK_SELECT: (evt: BaseEvent) => {\n        handleExternalConsumerLink(\n          evt as ExternalConsumerLinkSelectEvent,\n          'SELECT',\n        );\n      },\n      EXTERNAL_CONSUMER_LINK_UNSELECT: (evt: BaseEvent) => {\n        handleExternalConsumerLink(\n          evt as ExternalConsumerLinkSelectEvent,\n          'UNSELECT',\n        );\n      },\n    });\n\n    return () => {\n      node.deregisterListener(listener);\n      node.deregisterListener(externalConsumerListener);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [node]);\n\n  const handleOnHover = (task: string) => {\n    setIsHovered(task === 'SELECT' ? true : false);\n    node.handleHover(headPorts.current, task);\n  };\n\n  const handleOnWidgetDoubleClick = () => {\n    if (onComponentDoubleClick) {\n      onComponentDoubleClick(node.component.id);\n    }\n  };\n\n  const handleMouseEnter = () => {\n    if (previewMode) {\n      return;\n    }\n    setIsHovered(true);\n    handleOnHover('SELECT');\n  };\n\n  const handleMouseLeave = () => {\n    if (previewMode) {\n      return;\n    }\n    setIsHovered(false);\n    handleOnHover('UNSELECT');\n  };\n\n  const handleOnContextMenu = (event: MouseEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  return (\n    <ComponentNode\n      previewMode={Boolean(previewMode)}\n      onMouseOver={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onDoubleClick={handleOnWidgetDoubleClick}\n      onContextMenu={handleOnContextMenu}\n    >\n      <ComponentHeadWidget\n        engine={engine}\n        node={node}\n        isSelected={\n          node.getID() === selectedNodeId ||\n          node.isNodeSelected(selectedLink as ComponentLinkModel, node.getID())\n        }\n        isFocused={node.getID() === focusedNodeId || isHovered}\n        menuItems={componentMenu ?? []}\n        onFocusOut={handleMouseLeave}\n      />\n      <Tooltip\n        title={displayName}\n        placement=\"bottom\"\n        enterNextDelay={500}\n        arrow\n      >\n        {!previewMode ? (\n          <ComponentName disabled={isDisabled}>{displayName}</ComponentName>\n        ) : (\n          <></>\n        )}\n      </Tooltip>\n      <PortsContainer>\n        <ComponentPortWidget\n          port={node.getPort(`top-${node.getID()}`) as ComponentPortModel}\n          engine={engine}\n        />\n        <ComponentPortWidget\n          port={node.getPort(`bottom-${node.getID()}`) as ComponentPortModel}\n          engine={engine}\n        />\n      </PortsContainer>\n    </ComponentNode>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,102 @@
+import styled from '@emotion/styled';
+import { COMPONENT_CIRCLE_WIDTH, LABEL_FONT_SIZE, LABEL_MAX_WIDTH, ICON_SCALE } from '../../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+
+const ComponentNode = styled.div`
+  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: ${COMPONENT_CIRCLE_WIDTH * 2}px;
+  gap: 10px;
+  padding: 2px;
+  pointer-events: all;
+  cursor: ${(props) => props.previewMode ? "pointer" : "grab"};
+  &:active {
+    cursor: ${(props) => props.previewMode ? "pointer" : "grabbing"};
+  }
+`;
+const getComponentHeadBorderColor = ({
+  theme,
+  disabled,
+  isSelected
+}) => {
+  if (disabled) {
+    return theme.colors.SURFACE_DIM;
+  }
+  if (isSelected) {
+    return theme.colors.SECONDARY;
+  }
+  return theme.colors.PRIMARY;
+};
+const ComponentHead = styled.div`
+  background-color: ${({ theme, disabled, isSelected }) => !disabled && isSelected ? theme.colors.SECONDARY_CONTAINER : theme.colors.SURFACE};
+  border: ${({ theme, borderWidth, disabled, isSelected }) => `${borderWidth}px solid ${getComponentHeadBorderColor({
+  theme,
+  disabled,
+  isSelected
+})}`};
+  border-radius: 50%;
+  height: ${COMPONENT_CIRCLE_WIDTH}px;
+  width: ${COMPONENT_CIRCLE_WIDTH}px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+
+  position: relative;
+`;
+const ComponentKind = styled.div`
+  background-color: ${({ theme }) => theme.colors.SURFACE};
+  border-radius: 50%;
+
+  height: ${COMPONENT_CIRCLE_WIDTH / 3}px;
+  width: ${COMPONENT_CIRCLE_WIDTH / 3}px;
+
+  position: relative;
+  bottom: -16px;
+  right: 44px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  padding: 4px;
+`;
+const ComponentName = styled.span`
+  font-size: ${LABEL_FONT_SIZE}px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  max-width: ${LABEL_MAX_WIDTH}px;
+  color: ${({ theme, disabled }) => disabled ? theme.colors.SURFACE_DIM : theme.colors.ON_SURFACE_VARIANT};
+`;
+const IconWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  color: ${({ theme, disabled }) => disabled ? theme.colors.SURFACE_DIM : theme.colors.PRIMARY};
+  font-size: 32px;
+
+  svg {
+    fill: ${({ theme, disabled }) => disabled ? theme.colors.SURFACE_DIM : theme.colors.PRIMARY};
+    height: 32px;
+    width: 32px;
+    transform: ${({ previewMode }) => previewMode ? `scale(${ICON_SCALE.PREVIEW})` : "none"};
+  }
+`;
+const PortsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+export { ComponentHead, ComponentKind, ComponentName, ComponentNode, IconWrapper, PortsContainer };
+//# sourceMappingURL=styles.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/components/Component/ComponentNode/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Theme } from '@emotion/react';\nimport {\n  COMPONENT_CIRCLE_WIDTH,\n  ICON_SCALE,\n  LABEL_FONT_SIZE,\n  LABEL_MAX_WIDTH,\n} from '../../../resources';\n\ninterface ComponentNodeStyleProps {\n  previewMode: boolean;\n}\nexport const ComponentNode = styled.div<ComponentNodeStyleProps>`\n  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: ${COMPONENT_CIRCLE_WIDTH * 2}px;\n  gap: 10px;\n  padding: 2px;\n  pointer-events: all;\n  cursor: ${(props: ComponentNodeStyleProps) =>\n    props.previewMode ? 'pointer' : 'grab'};\n  &:active {\n    cursor: ${(props: ComponentNodeStyleProps) =>\n      props.previewMode ? 'pointer' : 'grabbing'};\n  }\n`;\n\ninterface ComponentHeadStyleProps {\n  isSelected: boolean;\n  borderWidth: number;\n  disabled: boolean;\n}\n\nconst getComponentHeadBorderColor = ({\n  theme,\n  disabled,\n  isSelected,\n}: Pick<ComponentHeadStyleProps, 'disabled' | 'isSelected'> & {\n  theme: Theme;\n}) => {\n  if (disabled) {\n    return theme.colors.SURFACE_DIM;\n  }\n  if (isSelected) {\n    return theme.colors.SECONDARY;\n  }\n  return theme.colors.PRIMARY;\n};\n\nexport const ComponentHead = styled.div<ComponentHeadStyleProps>`\n  background-color: ${({ theme, disabled, isSelected }) =>\n    !disabled && isSelected\n      ? theme.colors.SECONDARY_CONTAINER\n      : theme.colors.SURFACE};\n  border: ${({ theme, borderWidth, disabled, isSelected }) =>\n    `${borderWidth}px solid ${getComponentHeadBorderColor({\n      theme,\n      disabled,\n      isSelected,\n    })}`};\n  border-radius: 50%;\n  height: ${COMPONENT_CIRCLE_WIDTH}px;\n  width: ${COMPONENT_CIRCLE_WIDTH}px;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n\n  position: relative;\n`;\n\nexport const ComponentKind = styled.div`\n  background-color: ${({ theme }) => theme.colors.SURFACE};\n  border-radius: 50%;\n\n  height: ${COMPONENT_CIRCLE_WIDTH / 3}px;\n  width: ${COMPONENT_CIRCLE_WIDTH / 3}px;\n\n  position: relative;\n  bottom: -16px;\n  right: 44px;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  padding: 4px;\n`;\n\ninterface ComponentNameStyleProps {\n  disabled: boolean;\n}\nexport const ComponentName = styled.span<ComponentNameStyleProps>`\n  font-size: ${LABEL_FONT_SIZE}px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n  max-width: ${LABEL_MAX_WIDTH}px;\n  color: ${({ theme, disabled }) =>\n    disabled ? theme.colors.SURFACE_DIM : theme.colors.ON_SURFACE_VARIANT};\n`;\n\ninterface IconWrapperStyleProps {\n  previewMode: boolean;\n  disabled: boolean;\n}\nexport const IconWrapper = styled.div<IconWrapperStyleProps>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n\n  color: ${({ theme, disabled }) =>\n    disabled ? theme.colors.SURFACE_DIM : theme.colors.PRIMARY};\n  font-size: 32px;\n\n  svg {\n    fill: ${({ theme, disabled }) =>\n      disabled ? theme.colors.SURFACE_DIM : theme.colors.PRIMARY};\n    height: 32px;\n    width: 32px;\n    transform: ${({ previewMode }) =>\n      previewMode ? `scale(${ICON_SCALE.PREVIEW})` : 'none'};\n  }\n`;\n\nexport const PortsContainer = styled.div`\n  display: flex;\n  justify-content: center;\n`;\n"],"names":[],"mappings":";;;;AAYO,MAAM,gBAAgB,MAAA,CAAO,GAAA;AAAA,SAAA,EACzB,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,kBAAkB,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAA,EAK9C,yBAAyB,CAAC,CAAA;AAAA;AAAA;AAAA;AAAA,UAAA,EAIzB,CAAC,KAAA,KACT,KAAA,CAAM,WAAA,GAAc,YAAY,MAAM,CAAA;AAAA;AAAA,YAAA,EAE5B,CAAC,KAAA,KACT,KAAA,CAAM,WAAA,GAAc,YAAY,UAAU,CAAA;AAAA;AAAA;AAUhD,MAAM,8BAA8B,CAAC;AAAA,EACnC,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAEM;AACJ,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,MAAM,MAAA,CAAO,WAAA;AAAA,EACtB;AACA,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,OAAO,MAAM,MAAA,CAAO,SAAA;AAAA,EACtB;AACA,EAAA,OAAO,MAAM,MAAA,CAAO,OAAA;AACtB,CAAA;AAEO,MAAM,gBAAgB,MAAA,CAAO,GAAA;AAAA,oBAAA,EACd,CAAC,EAAE,KAAA,EAAO,QAAA,EAAU,YAAW,KACjD,CAAC,QAAA,IAAY,UAAA,GACT,KAAA,CAAM,MAAA,CAAO,mBAAA,GACb,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA,UAAA,EAChB,CAAC,EAAE,KAAA,EAAO,WAAA,EAAa,QAAA,EAAU,YAAW,KACpD,CAAA,EAAG,WAAW,CAAA,SAAA,EAAY,2BAAA,CAA4B;AAAA,EACpD,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAC,CAAC,CAAA,CAAE,CAAA;AAAA;AAAA,UAAA,EAEI,sBAAsB,CAAA;AAAA,SAAA,EACvB,sBAAsB,CAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAW1B,MAAM,gBAAgB,MAAA,CAAO,GAAA;AAAA,oBAAA,EACd,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;;AAAA,UAAA,EAG7C,yBAAyB,CAAC,CAAA;AAAA,SAAA,EAC3B,yBAAyB,CAAC,CAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAiB9B,MAAM,gBAAgB,MAAA,CAAO,IAAA;AAAA,aAAA,EACrB,eAAe,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAA,EAKf,eAAe,CAAA;AAAA,SAAA,EACnB,CAAC,EAAE,KAAA,EAAO,QAAA,EAAS,KAC1B,QAAA,GAAW,KAAA,CAAM,MAAA,CAAO,WAAA,GAAc,KAAA,CAAM,MAAA,CAAO,kBAAkB,CAAA;AAAA;AAOlE,MAAM,cAAc,MAAA,CAAO,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,SAAA,EAOvB,CAAC,EAAE,KAAA,EAAO,QAAA,EAAS,KAC1B,QAAA,GAAW,KAAA,CAAM,MAAA,CAAO,WAAA,GAAc,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA;AAAA;;AAAA;AAAA,UAAA,EAIlD,CAAC,EAAE,KAAA,EAAO,QAAA,EAAS,KACzB,QAAA,GAAW,KAAA,CAAM,MAAA,CAAO,WAAA,GAAc,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA;AAAA;AAAA;AAAA,eAAA,EAG/C,CAAC,EAAE,WAAA,EAAY,KAC1B,cAAc,CAAA,MAAA,EAAS,UAAA,CAAW,OAAO,CAAA,CAAA,CAAA,GAAM,MAAM,CAAA;AAAA;AAAA;AAIpD,MAAM,iBAAiB,MAAA,CAAO,GAAA;AAAA;AAAA;AAAA;;;;"}

package/dist/components/Component/ComponentPort/ComponentPortFactory.esm.js

@@ -0,0 +1,17 @@
+import { AbstractModelFactory } from '@projectstorm/react-canvas-core';
+import { ComponentPortModel } from './ComponentPortModel.esm.js';
+
+class ComponentPortFactory extends AbstractModelFactory {
+  constructor() {
+    super("componentPort");
+  }
+  generateModel(event) {
+    return new ComponentPortModel(
+      event.initialConfig.id,
+      event.initialConfig.portType
+    );
+  }
+}
+
+export { ComponentPortFactory };
+//# sourceMappingURL=ComponentPortFactory.esm.js.map

package/dist/components/Component/ComponentPort/ComponentPortFactory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentPortFactory.esm.js","sources":["../../../../src/components/Component/ComponentPort/ComponentPortFactory.tsx"],"sourcesContent":["import { DiagramEngine, PortModel } from '@projectstorm/react-diagrams';\nimport { AbstractModelFactory } from '@projectstorm/react-canvas-core';\nimport { ComponentPortModel } from './ComponentPortModel';\n\nexport class ComponentPortFactory extends AbstractModelFactory<\n  PortModel,\n  DiagramEngine\n> {\n  constructor() {\n    super('componentPort');\n  }\n\n  generateModel(event: { initialConfig: any }): ComponentPortModel {\n    return new ComponentPortModel(\n      event.initialConfig.id,\n      event.initialConfig.portType,\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,6BAA6B,oBAAA,CAGxC;AAAA,EACA,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM,eAAe,CAAA;AAAA,EACvB;AAAA,EAEA,cAAc,KAAA,EAAmD;AAC/D,IAAA,OAAO,IAAI,kBAAA;AAAA,MACT,MAAM,aAAA,CAAc,EAAA;AAAA,MACpB,MAAM,aAAA,CAAc;AAAA,KACtB;AAAA,EACF;AACF;;;;"}

package/dist/components/Component/ComponentPort/ComponentPortModel.esm.js

@@ -0,0 +1,18 @@
+import { PortModel } from '@projectstorm/react-diagrams';
+
+class ComponentPortModel extends PortModel {
+  constructor(id, portType) {
+    super({
+      type: "componentPort",
+      name: `${portType}-${id}`,
+      id: `${portType}-${id}`,
+      alignment: portType
+    });
+  }
+  isLocked() {
+    return true;
+  }
+}
+
+export { ComponentPortModel };
+//# sourceMappingURL=ComponentPortModel.esm.js.map

package/dist/components/Component/ComponentPort/ComponentPortModel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentPortModel.esm.js","sources":["../../../../src/components/Component/ComponentPort/ComponentPortModel.ts"],"sourcesContent":["import { PortModel, PortModelAlignment } from '@projectstorm/react-diagrams';\n\nexport class ComponentPortModel extends PortModel {\n  constructor(id: string, portType: PortModelAlignment) {\n    super({\n      type: 'componentPort',\n      name: `${portType}-${id}`,\n      id: `${portType}-${id}`,\n      alignment: portType,\n    });\n  }\n\n  isLocked(): boolean {\n    return true;\n  }\n}\n"],"names":[],"mappings":";;AAEO,MAAM,2BAA2B,SAAA,CAAU;AAAA,EAChD,WAAA,CAAY,IAAY,QAAA,EAA8B;AACpD,IAAA,KAAA,CAAM;AAAA,MACJ,IAAA,EAAM,eAAA;AAAA,MACN,IAAA,EAAM,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA;AAAA,MACvB,EAAA,EAAI,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA;AAAA,MACrB,SAAA,EAAW;AAAA,KACZ,CAAA;AAAA,EACH;AAAA,EAEA,QAAA,GAAoB;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AACF;;;;"}

package/dist/components/Component/ComponentPort/ComponentPortWidget.esm.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { PortWidget, PortModelAlignment } from '@projectstorm/react-diagrams';
+import { sidePortStyles, inclusionPortStyles } from './styles.esm.js';
+
+function getPortStyles(alignment) {
+  if (alignment === PortModelAlignment.LEFT) {
+    return { left: 0, ...sidePortStyles };
+  }
+  if (alignment === PortModelAlignment.RIGHT) {
+    return { right: 0, ...sidePortStyles };
+  }
+  if (alignment === PortModelAlignment.TOP) {
+    return { top: 0, ...inclusionPortStyles };
+  }
+  return { bottom: 0, ...inclusionPortStyles };
+}
+function ComponentPortWidget(props) {
+  const { port, engine } = props;
+  const portStyles = getPortStyles(port.getOptions().alignment);
+  return /* @__PURE__ */ jsx(PortWidget, { engine, port, style: portStyles });
+}
+
+export { ComponentPortWidget };
+//# sourceMappingURL=ComponentPortWidget.esm.js.map

package/dist/components/Component/ComponentPort/ComponentPortWidget.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentPortWidget.esm.js","sources":["../../../../src/components/Component/ComponentPort/ComponentPortWidget.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport {\n  DiagramEngine,\n  PortModelAlignment,\n  PortWidget,\n} from '@projectstorm/react-diagrams';\nimport { ComponentPortModel } from './ComponentPortModel';\nimport { inclusionPortStyles, sidePortStyles } from './styles';\n\ninterface CustomPortProps {\n  port: ComponentPortModel;\n  engine: DiagramEngine;\n}\n\nfunction getPortStyles(\n  alignment: PortModelAlignment | undefined,\n): CSSProperties {\n  if (alignment === PortModelAlignment.LEFT) {\n    return { left: 0, ...sidePortStyles };\n  }\n  if (alignment === PortModelAlignment.RIGHT) {\n    return { right: 0, ...sidePortStyles };\n  }\n  if (alignment === PortModelAlignment.TOP) {\n    return { top: 0, ...inclusionPortStyles };\n  }\n  return { bottom: 0, ...inclusionPortStyles };\n}\n\nexport function ComponentPortWidget(props: CustomPortProps) {\n  const { port, engine } = props;\n  const portStyles: CSSProperties = getPortStyles(port.getOptions().alignment);\n\n  return <PortWidget engine={engine} port={port} style={portStyles} />;\n}\n"],"names":[],"mappings":";;;;AAcA,SAAS,cACP,SAAA,EACe;AACf,EAAA,IAAI,SAAA,KAAc,mBAAmB,IAAA,EAAM;AACzC,IAAA,OAAO,EAAE,IAAA,EAAM,CAAA,EAAG,GAAG,cAAA,EAAe;AAAA,EACtC;AACA,EAAA,IAAI,SAAA,KAAc,mBAAmB,KAAA,EAAO;AAC1C,IAAA,OAAO,EAAE,KAAA,EAAO,CAAA,EAAG,GAAG,cAAA,EAAe;AAAA,EACvC;AACA,EAAA,IAAI,SAAA,KAAc,mBAAmB,GAAA,EAAK;AACxC,IAAA,OAAO,EAAE,GAAA,EAAK,CAAA,EAAG,GAAG,mBAAA,EAAoB;AAAA,EAC1C;AACA,EAAA,OAAO,EAAE,MAAA,EAAQ,CAAA,EAAG,GAAG,mBAAA,EAAoB;AAC7C;AAEO,SAAS,oBAAoB,KAAA,EAAwB;AAC1D,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAO,GAAI,KAAA;AACzB,EAAA,MAAM,UAAA,GAA4B,aAAA,CAAc,IAAA,CAAK,UAAA,GAAa,SAAS,CAAA;AAE3E,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,MAAA,EAAgB,IAAA,EAAY,OAAO,UAAA,EAAY,CAAA;AACpE;;;;"}

package/dist/components/Component/ComponentPort/styles.esm.js

@@ -0,0 +1,16 @@
+const sidePortStyles = {
+  position: "absolute",
+  height: "2px",
+  width: 0,
+  backgroundColor: "red",
+  margin: "0 -4px"
+};
+const inclusionPortStyles = {
+  position: "absolute",
+  height: 0,
+  width: "2px",
+  backgroundColor: "blue"
+};
+
+export { inclusionPortStyles, sidePortStyles };
+//# sourceMappingURL=styles.esm.js.map

package/dist/components/Component/ComponentPort/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/components/Component/ComponentPort/styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport const sidePortStyles: CSSProperties = {\n  position: 'absolute',\n  height: '2px',\n  width: 0,\n  backgroundColor: 'red',\n  margin: '0 -4px',\n};\n\nexport const inclusionPortStyles: CSSProperties = {\n  position: 'absolute',\n  height: 0,\n  width: '2px',\n  backgroundColor: 'blue',\n};\n"],"names":[],"mappings":"AAEO,MAAM,cAAA,GAAgC;AAAA,EAC3C,QAAA,EAAU,UAAA;AAAA,EACV,MAAA,EAAQ,KAAA;AAAA,EACR,KAAA,EAAO,CAAA;AAAA,EACP,eAAA,EAAiB,KAAA;AAAA,EACjB,MAAA,EAAQ;AACV;AAEO,MAAM,mBAAA,GAAqC;AAAA,EAChD,QAAA,EAAU,UAAA;AAAA,EACV,MAAA,EAAQ,CAAA;AAAA,EACR,KAAA,EAAO,KAAA;AAAA,EACP,eAAA,EAAiB;AACnB;;;;"}

package/dist/components/Component/component-node-util.esm.js

@@ -0,0 +1,15 @@
+import { COMPONENT_NODE, NAME_JOIN_CHAR, COMPONENT_LINK } from '../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+
+function getComponentName(component) {
+  return getComponentNameById(component.id);
+}
+function getComponentNameById(id) {
+  return `${COMPONENT_NODE}${NAME_JOIN_CHAR}${id}`;
+}
+function getComponentLinkName(source, target) {
+  return `${COMPONENT_LINK}${NAME_JOIN_CHAR}${source}::${target}`;
+}
+
+export { getComponentLinkName, getComponentName, getComponentNameById };
+//# sourceMappingURL=component-node-util.esm.js.map

package/dist/components/Component/component-node-util.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-node-util.esm.js","sources":["../../../src/components/Component/component-node-util.ts"],"sourcesContent":["import {\n  COMPONENT_LINK,\n  COMPONENT_NODE,\n  NAME_JOIN_CHAR,\n} from '../../resources';\nimport { Component } from '../../types';\n\nexport function getComponentName(component: Component): string {\n  return getComponentNameById(component.id);\n}\n\nexport function getComponentNameById(id: string): string {\n  return `${COMPONENT_NODE}${NAME_JOIN_CHAR}${id}`;\n}\n\nexport function getComponentMetadataByName(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 getComponentLinkName(source: string, target: string): string {\n  return `${COMPONENT_LINK}${NAME_JOIN_CHAR}${source}::${target}`;\n}\n"],"names":[],"mappings":";;;AAOO,SAAS,iBAAiB,SAAA,EAA8B;AAC7D,EAAA,OAAO,oBAAA,CAAqB,UAAU,EAAE,CAAA;AAC1C;AAEO,SAAS,qBAAqB,EAAA,EAAoB;AACvD,EAAA,OAAO,CAAA,EAAG,cAAc,CAAA,EAAG,cAAc,GAAG,EAAE,CAAA,CAAA;AAChD;AAUO,SAAS,oBAAA,CAAqB,QAAgB,MAAA,EAAwB;AAC3E,EAAA,OAAO,GAAG,cAAc,CAAA,EAAG,cAAc,CAAA,EAAG,MAAM,KAAK,MAAM,CAAA,CAAA;AAC/D;;;;"}

package/dist/components/Connection/ConnectionNode/ConnectionFactory.esm.js

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

package/dist/components/Connection/ConnectionNode/ConnectionFactory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionFactory.esm.js","sources":["../../../../src/components/Connection/ConnectionNode/ConnectionFactory.tsx"],"sourcesContent":["import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { DiagramEngine } from '@projectstorm/react-diagrams-core';\nimport { ConnectionModel } from './ConnectionModel';\nimport { ConnectionWidget } from './ConnectionWidget';\nimport { CONNECTION_NODE } from '../../../resources';\n\nexport class ConnectionFactory extends AbstractReactFactory<\n  ConnectionModel,\n  DiagramEngine\n> {\n  constructor() {\n    super(CONNECTION_NODE);\n  }\n\n  generateReactWidget(event: { model: ConnectionModel }): JSX.Element {\n    return <ConnectionWidget engine={this.engine} node={event.model} />;\n  }\n\n  generateModel(event: { initialConfig: any }) {\n    return new ConnectionModel(event.initialConfig.connection);\n  }\n}\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,0BAA0B,oBAAA,CAGrC;AAAA,EACA,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM,eAAe,CAAA;AAAA,EACvB;AAAA,EAEA,oBAAoB,KAAA,EAAgD;AAClE,IAAA,2BAAQ,gBAAA,EAAA,EAAiB,MAAA,EAAQ,KAAK,MAAA,EAAQ,IAAA,EAAM,MAAM,KAAA,EAAO,CAAA;AAAA,EACnE;AAAA,EAEA,cAAc,KAAA,EAA+B;AAC3C,IAAA,OAAO,IAAI,eAAA,CAAgB,KAAA,CAAM,aAAA,CAAc,UAAU,CAAA;AAAA,EAC3D;AACF;;;;"}

package/dist/components/Connection/ConnectionNode/ConnectionHead/ConnectionHead.esm.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext, useRef, useState, useEffect } from 'react';
+import { ConnectionHead, IconWrapper } from '../styles.esm.js';
+import { ConnectionIcon } from '../../../../resources/assets/icons/ConnectionIcon.esm.js';
+import { DatabaseIcon } from '../../../../resources/assets/icons/DatabaseIcon.esm.js';
+import { ConnectionPortWidget } from '../../ConnectionPort/ConnectionPortWidget.esm.js';
+import { ConnectionType } from '../../../../types.esm.js';
+import { DiagramContext } from '../../../DiagramContext/DiagramContext.esm.js';
+import { COMPONENT_LINE_PREVIEW_WIDTH, COMPONENT_LINE_MIN_WIDTH } from '../../../../resources/constants.esm.js';
+
+function ConnectionHeadWidget(props) {
+  const { engine, node, isSelected } = props;
+  const { zoomLevel, previewMode } = useContext(DiagramContext);
+  const headPorts = useRef([]);
+  const [isHovered, setIsHovered] = useState(false);
+  useEffect(() => {
+    headPorts.current.push(
+      node.getPortFromID(`left-${node.getID()}`)
+    );
+    headPorts.current.push(
+      node.getPortFromID(`right-${node.getID()}`)
+    );
+  }, [node]);
+  const handleOnHover = (task) => {
+    if (previewMode) {
+      return;
+    }
+    setIsHovered(task === "SELECT" ? true : false);
+    node.handleHover(headPorts.current, task);
+  };
+  const getConnectionIcon = () => {
+    switch (node.connection.type) {
+      case ConnectionType.Datastore:
+        return /* @__PURE__ */ jsx(DatabaseIcon, {});
+      default:
+        return /* @__PURE__ */ jsx(ConnectionIcon, {});
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    ConnectionHead,
+    {
+      isSelected: isSelected || isHovered,
+      borderWidth: previewMode ? COMPONENT_LINE_PREVIEW_WIDTH : node.getDynamicLineWidth(zoomLevel, COMPONENT_LINE_MIN_WIDTH),
+      onMouseOver: () => handleOnHover("SELECT"),
+      onMouseLeave: () => handleOnHover("UNSELECT"),
+      children: [
+        /* @__PURE__ */ jsx(IconWrapper, { previewMode: Boolean(previewMode), children: getConnectionIcon() }),
+        /* @__PURE__ */ jsx(
+          ConnectionPortWidget,
+          {
+            port: node.getPort(`top-${node.getID()}`),
+            engine
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ConnectionPortWidget,
+          {
+            port: node.getPort(`left-${node.getID()}`),
+            engine
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ConnectionHeadWidget };
+//# sourceMappingURL=ConnectionHead.esm.js.map

package/dist/components/Connection/ConnectionNode/ConnectionHead/ConnectionHead.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionHead.esm.js","sources":["../../../../../src/components/Connection/ConnectionNode/ConnectionHead/ConnectionHead.tsx"],"sourcesContent":["import { useContext, useEffect, useRef, useState } from 'react';\nimport { DiagramEngine, PortModel } from '@projectstorm/react-diagrams';\nimport { ConnectionModel } from '../ConnectionModel';\nimport { ConnectionHead, IconWrapper } from '../styles';\nimport {\n  ConnectionIcon,\n  DatabaseIcon,\n} from '../../../../resources/assets/icons';\nimport { ConnectionPortWidget } from '../../ConnectionPort/ConnectionPortWidget';\nimport { ConnectionPortModel } from '../../ConnectionPort/ConnectionPortModel';\nimport { ConnectionType } from '../../../../types';\nimport { DiagramContext } from '../../../DiagramContext/DiagramContext';\nimport {\n  COMPONENT_LINE_MIN_WIDTH,\n  COMPONENT_LINE_PREVIEW_WIDTH,\n} from '../../../../resources';\n\ninterface ServiceHeadProps {\n  engine: DiagramEngine;\n  node: ConnectionModel;\n  isSelected: boolean;\n}\n\nexport function ConnectionHeadWidget(props: ServiceHeadProps) {\n  const { engine, node, isSelected } = props;\n\n  const { zoomLevel, previewMode } = useContext(DiagramContext);\n  const headPorts = useRef<PortModel[]>([]);\n  const [isHovered, setIsHovered] = useState<boolean>(false);\n\n  useEffect(() => {\n    headPorts.current.push(\n      node.getPortFromID(`left-${node.getID()}`) as PortModel,\n    );\n    headPorts.current.push(\n      node.getPortFromID(`right-${node.getID()}`) as PortModel,\n    );\n  }, [node]);\n\n  const handleOnHover = (task: string) => {\n    if (previewMode) {\n      return;\n    }\n    setIsHovered(task === 'SELECT' ? true : false);\n    node.handleHover(headPorts.current, task);\n  };\n\n  // get connection icon\n  const getConnectionIcon = () => {\n    switch (node.connection.type) {\n      case ConnectionType.Datastore:\n        return <DatabaseIcon />;\n      default:\n        return <ConnectionIcon />;\n    }\n  };\n\n  return (\n    <ConnectionHead\n      isSelected={isSelected || isHovered}\n      borderWidth={\n        previewMode\n          ? COMPONENT_LINE_PREVIEW_WIDTH\n          : node.getDynamicLineWidth(zoomLevel, COMPONENT_LINE_MIN_WIDTH)\n      }\n      onMouseOver={() => handleOnHover('SELECT')}\n      onMouseLeave={() => handleOnHover('UNSELECT')}\n    >\n      <IconWrapper previewMode={Boolean(previewMode)}>\n        {getConnectionIcon()}\n      </IconWrapper>\n      <ConnectionPortWidget\n        port={node.getPort(`top-${node.getID()}`) as ConnectionPortModel}\n        engine={engine}\n      />\n      <ConnectionPortWidget\n        port={node.getPort(`left-${node.getID()}`) as ConnectionPortModel}\n        engine={engine}\n      />\n    </ConnectionHead>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAuBO,SAAS,qBAAqB,KAAA,EAAyB;AAC5D,EAAA,MAAM,EAAE,MAAA,EAAQ,IAAA,EAAM,UAAA,EAAW,GAAI,KAAA;AAErC,EAAA,MAAM,EAAE,SAAA,EAAW,WAAA,EAAY,GAAI,WAAW,cAAc,CAAA;AAC5D,EAAA,MAAM,SAAA,GAAY,MAAA,CAAoB,EAAE,CAAA;AACxC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAkB,KAAK,CAAA;AAEzD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,SAAA,CAAU,OAAA,CAAQ,IAAA;AAAA,MAChB,KAAK,aAAA,CAAc,CAAA,KAAA,EAAQ,IAAA,CAAK,KAAA,EAAO,CAAA,CAAE;AAAA,KAC3C;AACA,IAAA,SAAA,CAAU,OAAA,CAAQ,IAAA;AAAA,MAChB,KAAK,aAAA,CAAc,CAAA,MAAA,EAAS,IAAA,CAAK,KAAA,EAAO,CAAA,CAAE;AAAA,KAC5C;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,aAAA,GAAgB,CAAC,IAAA,KAAiB;AACtC,IAAA,IAAI,WAAA,EAAa;AACf,MAAA;AAAA,IACF;AACA,IAAA,YAAA,CAAa,IAAA,KAAS,QAAA,GAAW,IAAA,GAAO,KAAK,CAAA;AAC7C,IAAA,IAAA,CAAK,WAAA,CAAY,SAAA,CAAU,OAAA,EAAS,IAAI,CAAA;AAAA,EAC1C,CAAA;AAGA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,QAAQ,IAAA,CAAK,WAAW,IAAA;AAAM,MAC5B,KAAK,cAAA,CAAe,SAAA;AAClB,QAAA,2BAAQ,YAAA,EAAA,EAAa,CAAA;AAAA,MACvB;AACE,QAAA,2BAAQ,cAAA,EAAA,EAAe,CAAA;AAAA;AAC3B,EACF,CAAA;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,YAAY,UAAA,IAAc,SAAA;AAAA,MAC1B,aACE,WAAA,GACI,4BAAA,GACA,IAAA,CAAK,mBAAA,CAAoB,WAAW,wBAAwB,CAAA;AAAA,MAElE,WAAA,EAAa,MAAM,aAAA,CAAc,QAAQ,CAAA;AAAA,MACzC,YAAA,EAAc,MAAM,aAAA,CAAc,UAAU,CAAA;AAAA,MAE5C,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,eAAY,WAAA,EAAa,OAAA,CAAQ,WAAW,CAAA,EAC1C,6BAAkB,EACrB,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,oBAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,OAAA,CAAQ,OAAO,IAAA,CAAK,KAAA,EAAO,CAAA,CAAE,CAAA;AAAA,YACxC;AAAA;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,oBAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,OAAA,CAAQ,QAAQ,IAAA,CAAK,KAAA,EAAO,CAAA,CAAE,CAAA;AAAA,YACzC;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/Connection/ConnectionNode/ConnectionModel.esm.js

@@ -0,0 +1,29 @@
+import { PortModelAlignment } from '@projectstorm/react-diagrams';
+import { SharedNodeModel } from '../../SharedNode/SharedNode.esm.js';
+import { ConnectionPortModel } from '../ConnectionPort/ConnectionPortModel.esm.js';
+import { CONNECTION_NODE } from '../../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+import { getConnectionName } from '../connection-node-util.esm.js';
+
+var Orientation = /* @__PURE__ */ ((Orientation2) => {
+  Orientation2["VERTICAL"] = "vertical";
+  Orientation2["HORIZONTAL"] = "horizontal";
+  return Orientation2;
+})(Orientation || {});
+class ConnectionModel extends SharedNodeModel {
+  connection;
+  orientation;
+  constructor(connection, orientation) {
+    const name = getConnectionName(connection);
+    super(CONNECTION_NODE, name);
+    this.connection = connection;
+    this.orientation = orientation || "vertical" /* VERTICAL */;
+    this.addPort(new ConnectionPortModel(name, PortModelAlignment.TOP));
+    this.addPort(new ConnectionPortModel(name, PortModelAlignment.BOTTOM));
+    this.addPort(new ConnectionPortModel(name, PortModelAlignment.LEFT));
+    this.addPort(new ConnectionPortModel(name, PortModelAlignment.RIGHT));
+  }
+}
+
+export { ConnectionModel, Orientation };
+//# sourceMappingURL=ConnectionModel.esm.js.map

package/dist/components/Connection/ConnectionNode/ConnectionModel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionModel.esm.js","sources":["../../../../src/components/Connection/ConnectionNode/ConnectionModel.ts"],"sourcesContent":["import { PortModelAlignment } from '@projectstorm/react-diagrams';\nimport { SharedNodeModel } from '../../SharedNode/SharedNode';\nimport { ConnectionPortModel } from '../ConnectionPort/ConnectionPortModel';\nimport { Connection } from '../../../types';\nimport { CONNECTION_NODE } from '../../../resources';\nimport { getConnectionName } from '../connection-node-util';\n\nexport enum Orientation {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\n\nexport class ConnectionModel extends SharedNodeModel {\n  readonly connection: Connection;\n  readonly orientation: Orientation;\n\n  constructor(connection: Connection, orientation?: Orientation) {\n    const name = getConnectionName(connection);\n    super(CONNECTION_NODE, name);\n    this.connection = connection;\n    this.orientation = orientation || Orientation.VERTICAL;\n\n    this.addPort(new ConnectionPortModel(name, PortModelAlignment.TOP));\n    this.addPort(new ConnectionPortModel(name, PortModelAlignment.BOTTOM));\n\n    this.addPort(new ConnectionPortModel(name, PortModelAlignment.LEFT));\n    this.addPort(new ConnectionPortModel(name, PortModelAlignment.RIGHT));\n  }\n}\n"],"names":["Orientation"],"mappings":";;;;;;;AAOO,IAAK,WAAA,qBAAAA,YAAAA,KAAL;AACL,EAAAA,aAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,aAAA,YAAA,CAAA,GAAa,YAAA;AAFH,EAAA,OAAAA,YAAAA;AAAA,CAAA,EAAA,WAAA,IAAA,EAAA;AAKL,MAAM,wBAAwB,eAAA,CAAgB;AAAA,EAC1C,UAAA;AAAA,EACA,WAAA;AAAA,EAET,WAAA,CAAY,YAAwB,WAAA,EAA2B;AAC7D,IAAA,MAAM,IAAA,GAAO,kBAAkB,UAAU,CAAA;AACzC,IAAA,KAAA,CAAM,iBAAiB,IAAI,CAAA;AAC3B,IAAA,IAAA,CAAK,UAAA,GAAa,UAAA;AAClB,IAAA,IAAA,CAAK,cAAc,WAAA,IAAe,UAAA;AAElC,IAAA,IAAA,CAAK,QAAQ,IAAI,mBAAA,CAAoB,IAAA,EAAM,kBAAA,CAAmB,GAAG,CAAC,CAAA;AAClE,IAAA,IAAA,CAAK,QAAQ,IAAI,mBAAA,CAAoB,IAAA,EAAM,kBAAA,CAAmB,MAAM,CAAC,CAAA;AAErE,IAAA,IAAA,CAAK,QAAQ,IAAI,mBAAA,CAAoB,IAAA,EAAM,kBAAA,CAAmB,IAAI,CAAC,CAAA;AACnE,IAAA,IAAA,CAAK,QAAQ,IAAI,mBAAA,CAAoB,IAAA,EAAM,kBAAA,CAAmB,KAAK,CAAC,CAAA;AAAA,EACtE;AACF;;;;"}

package/dist/components/Connection/ConnectionNode/ConnectionWidget.esm.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext, useState, useEffect } from 'react';
+import { ConnectionHeadWidget } from './ConnectionHead/ConnectionHead.esm.js';
+import { ConnectionNode, ConnectionName } from './styles.esm.js';
+import { DiagramContext } from '../../DiagramContext/DiagramContext.esm.js';
+
+function ConnectionWidget(props) {
+  const { node, engine } = props;
+  const { selectedNodeId, focusedNodeId, previewMode } = useContext(DiagramContext);
+  const [selectedLink, setSelectedLink] = useState(void 0);
+  const displayName = node.connection.label || node.connection.id;
+  useEffect(() => {
+    if (previewMode) {
+      return void 0;
+    }
+    const listener = node.registerListener({
+      SELECT: (event) => {
+        setSelectedLink(event.component);
+      },
+      UNSELECT: () => {
+        setSelectedLink(void 0);
+      }
+    });
+    return () => {
+      node.deregisterListener(listener);
+    };
+  }, [node]);
+  return /* @__PURE__ */ jsxs(
+    ConnectionNode,
+    {
+      previewMode,
+      isSelected: node.getID() === selectedNodeId || node.isNodeSelected(selectedLink, node.getID()),
+      isFocused: node.getID() === focusedNodeId,
+      orientation: node.orientation,
+      children: [
+        /* @__PURE__ */ jsx(
+          ConnectionHeadWidget,
+          {
+            engine,
+            node,
+            isSelected: node.getID() === selectedNodeId || node.isNodeSelected(selectedLink, node.getID())
+          }
+        ),
+        !previewMode && /* @__PURE__ */ jsx(ConnectionName, { orientation: node.orientation, children: displayName })
+      ]
+    }
+  );
+}
+
+export { ConnectionWidget };
+//# sourceMappingURL=ConnectionWidget.esm.js.map

package/dist/components/Connection/ConnectionNode/ConnectionWidget.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionWidget.esm.js","sources":["../../../../src/components/Connection/ConnectionNode/ConnectionWidget.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from 'react';\nimport { DiagramEngine } from '@projectstorm/react-diagrams';\nimport { ConnectionModel } from './ConnectionModel';\nimport { ConnectionHeadWidget } from './ConnectionHead/ConnectionHead';\nimport { ConnectionName, ConnectionNode } from './styles';\nimport { DiagramContext } from '../../DiagramContext/DiagramContext';\nimport { ComponentLinkModel } from '../../Component/ComponentLink/ComponentLinkModel';\n\ninterface ConnectionWidgetProps {\n  node: ConnectionModel;\n  engine: DiagramEngine;\n}\n\nexport function ConnectionWidget(props: ConnectionWidgetProps) {\n  const { node, engine } = props;\n  const { selectedNodeId, focusedNodeId, previewMode } =\n    useContext(DiagramContext);\n  const [selectedLink, setSelectedLink] = useState<\n    ComponentLinkModel | undefined\n  >(undefined);\n  const displayName = node.connection.label || node.connection.id;\n\n  useEffect(() => {\n    if (previewMode) {\n      return undefined;\n    }\n    const listener = node.registerListener({\n      SELECT: (event: any) => {\n        setSelectedLink(event.component as ComponentLinkModel);\n      },\n      UNSELECT: () => {\n        setSelectedLink(undefined);\n      },\n    });\n    return () => {\n      node.deregisterListener(listener);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [node]);\n\n  return (\n    <ConnectionNode\n      previewMode={previewMode}\n      isSelected={\n        node.getID() === selectedNodeId ||\n        node.isNodeSelected(selectedLink as ComponentLinkModel, node.getID())\n      }\n      isFocused={node.getID() === focusedNodeId}\n      orientation={node.orientation}\n    >\n      <ConnectionHeadWidget\n        engine={engine}\n        node={node}\n        isSelected={\n          node.getID() === selectedNodeId ||\n          node.isNodeSelected(selectedLink as ComponentLinkModel, node.getID())\n        }\n      />\n      {!previewMode && (\n        <ConnectionName orientation={node.orientation}>\n          {displayName}\n        </ConnectionName>\n      )}\n    </ConnectionNode>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAaO,SAAS,iBAAiB,KAAA,EAA8B;AAC7D,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAO,GAAI,KAAA;AACzB,EAAA,MAAM,EAAE,cAAA,EAAgB,aAAA,EAAe,WAAA,EAAY,GACjD,WAAW,cAAc,CAAA;AAC3B,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAEtC,MAAS,CAAA;AACX,EAAA,MAAM,WAAA,GAAc,IAAA,CAAK,UAAA,CAAW,KAAA,IAAS,KAAK,UAAA,CAAW,EAAA;AAE7D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAAA,EAAa;AACf,MAAA,OAAO,MAAA;AAAA,IACT;AACA,IAAA,MAAM,QAAA,GAAW,KAAK,gBAAA,CAAiB;AAAA,MACrC,MAAA,EAAQ,CAAC,KAAA,KAAe;AACtB,QAAA,eAAA,CAAgB,MAAM,SAA+B,CAAA;AAAA,MACvD,CAAA;AAAA,MACA,UAAU,MAAM;AACd,QAAA,eAAA,CAAgB,MAAS,CAAA;AAAA,MAC3B;AAAA,KACD,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,uBACE,IAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,UAAA,EACE,IAAA,CAAK,KAAA,EAAM,KAAM,cAAA,IACjB,KAAK,cAAA,CAAe,YAAA,EAAoC,IAAA,CAAK,KAAA,EAAO,CAAA;AAAA,MAEtE,SAAA,EAAW,IAAA,CAAK,KAAA,EAAM,KAAM,aAAA;AAAA,MAC5B,aAAa,IAAA,CAAK,WAAA;AAAA,MAElB,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,oBAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,IAAA;AAAA,YACA,UAAA,EACE,IAAA,CAAK,KAAA,EAAM,KAAM,cAAA,IACjB,KAAK,cAAA,CAAe,YAAA,EAAoC,IAAA,CAAK,KAAA,EAAO;AAAA;AAAA,SAExE;AAAA,QACC,CAAC,WAAA,oBACA,GAAA,CAAC,kBAAe,WAAA,EAAa,IAAA,CAAK,aAC/B,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}