@openchoreo/cell-diagram 1.2.0-rc.1

package/dist/diagrams/ProjectDiagram.esm.js

@@ -0,0 +1,251 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { DiagramModel } from '@projectstorm/react-diagrams';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { generateEngine, animateProjectDiagram } from '../utils/diagramUtils.esm.js';
+import { MAIN_CELL, DIAGRAM_END, MARGIN, NO_CELL_NODE, Colors } from '../resources/constants.esm.js';
+import '@mui/material/Fade';
+import '@mui/material/Box';
+import '@mui/material/Tooltip';
+import '@mui/icons-material/OpenInNewRounded';
+import '../components/Project/ProjectNode/styles.esm.js';
+import '../components/Project/ProjectPort/styles.esm.js';
+import { CellModel } from '../components/Cell/CellNode/CellModel.esm.js';
+import '../components/Cell/CellNode/styles.esm.js';
+import { CellDiagramContext } from '../components/DiagramContext/DiagramContext.esm.js';
+import '../theme/ThemeContext.esm.js';
+import '../theme/CellDiagramThemeProvider.esm.js';
+import '../components/SharedLink/SharedLink.esm.js';
+import '../components/Project/AdvancedLink/AdvancedLinkFactory.esm.js';
+import { DiagramLayer } from '../types.esm.js';
+import '../components/Component/ComponentNode/styles.esm.js';
+import '../components/MoreVertMenu/MoreVertMenu.esm.js';
+import '../components/ObservationLabel/ObservationLabel.esm.js';
+import '../components/TooltipLabel/TooltipLabel.esm.js';
+import '@mui/material/Popper';
+import '../components/Connection/ConnectionNode/styles.esm.js';
+import '../components/Cell/EmptyNode/styles.esm.js';
+import '../components/External/ExternalNode/styles.esm.js';
+import '@projectstorm/geometry';
+import { OverlayLayerModel } from '../components/OverlayLoader/OverlayLayerModel.esm.js';
+import '../components/OverlayLoader/OverlayLayerWidget.esm.js';
+import { PromptScreen } from '../components/PromptScreen/PromptScreen.esm.js';
+import '../components/Header/Header.esm.js';
+import { DiagramControls } from '../components/Controls/DiagramControls.esm.js';
+import '@projectstorm/react-diagrams-core';
+import '@projectstorm/react-diagrams-defaults';
+import { isRenderInsideCell, getDiagramDataFromProject, getComponentDiagramWidth, manualDistribute, calculateCellWidth } from '../utils/projectUtils.esm.js';
+import { useStyles, Container, DiagramContainer } from '../utils/CanvasStyles.esm.js';
+import { DiagramLayers } from '../components/Controls/DiagramLayers.esm.js';
+import { DiagramLegend } from '../components/Controls/DiagramLegend.esm.js';
+import CircularProgress from '@mui/material/CircularProgress';
+
+function ProjectDiagram(props) {
+  const {
+    project,
+    componentMenu,
+    showControls = true,
+    animation = true,
+    defaultDiagramLayer = DiagramLayer.ARCHITECTURE,
+    customTooltips,
+    modelVersion,
+    onComponentDoubleClick,
+    previewMode = false
+  } = props;
+  const [diagramEngine] = useState(generateEngine(previewMode));
+  const [diagramModel, setDiagramModel] = useState(
+    void 0
+  );
+  const [selectedNodeId, setSelectedNodeId] = useState("");
+  const [focusedNodeId, setFocusedNodeId] = useState("");
+  const [userMessage, setUserMessage] = useState("");
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [isDiagramLoaded, setIsDiagramLoaded] = useState(false);
+  const cellNodeWidth = useRef(0);
+  const observationSummary = useRef(null);
+  const styles = useStyles();
+  useEffect(() => {
+    if (diagramEngine) {
+      drawDiagram();
+    }
+    return () => {
+      diagramEngine.getModel()?.getNodes().forEach((node) => {
+        if (isRenderInsideCell(node)) {
+          node.clearListeners();
+        }
+      });
+    };
+  }, [props]);
+  useEffect(() => {
+    if (diagramEngine && animation && isDiagramLoaded) {
+      animateProjectDiagram();
+      diagramEngine.repaintCanvas();
+    }
+  }, [isDiagramLoaded, diagramEngine]);
+  useEffect(() => {
+    const listener = diagramEngine.getModel()?.registerListener({
+      zoomUpdated: (event) => {
+        setZoomLevel(event.zoom);
+      }
+    });
+    return () => {
+      diagramEngine.getModel()?.deregisterListener(listener);
+    };
+  }, [diagramEngine]);
+  useEffect(() => {
+    if (diagramEngine.getCanvas()) {
+      document.addEventListener("keydown", handleEscapePress);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscapePress);
+    };
+  }, [diagramModel, diagramEngine.getCanvas()]);
+  function handleEscapePress(event) {
+    if (event.key === "Escape" && selectedNodeId) {
+      setSelectedNodeId("");
+    }
+  }
+  const drawDiagram = () => {
+    const diagramData = getDiagramDataFromProject(project);
+    const componentDiagramWidth = getComponentDiagramWidth(diagramData);
+    cellNodeWidth.current = componentDiagramWidth;
+    const cellNode = new CellModel(
+      MAIN_CELL,
+      componentDiagramWidth,
+      diagramData.gateways,
+      Array.from(
+        diagramData.nodes.connectorNodes.values()
+      ),
+      Array.from(
+        diagramData.nodes.connectionNodes.values()
+      )
+    );
+    const model = new DiagramModel();
+    model.addLayer(new OverlayLayerModel());
+    const models = model.addAll(
+      // nodes
+      cellNode,
+      ...diagramData.nodes.componentNodes.values(),
+      ...diagramData.nodes.connectionNodes.values(),
+      ...diagramData.nodes.connectorNodes.values(),
+      ...diagramData.nodes.emptyNodes.values(),
+      ...diagramData.nodes.externalNodes.values(),
+      ...diagramData.links.connectionLinks.values(),
+      ...diagramData.links.connectorLinks.values(),
+      ...diagramData.links.externalLinks.values(),
+      ...diagramData.links.componentLinks.values(),
+      ...diagramData.links.cellLinks.values(),
+      ...diagramData.links.externalConnectionLinks.values()
+    );
+    models.forEach((item) => {
+      if (isRenderInsideCell(item)) {
+        item.registerListener({
+          positionChanged: () => {
+            refreshDiagram();
+          }
+        });
+      }
+    });
+    model.setOffset(DIAGRAM_END * 4, DIAGRAM_END * 4);
+    diagramEngine.setModel(model);
+    setDiagramModel(model);
+    if (previewMode) {
+      diagramEngine.getModel().setLocked(true);
+      const state = diagramEngine.getStateMachine().getCurrentState();
+      state.dragCanvas.config.allowDrag = false;
+    }
+    observationSummary.current = diagramData.observationSummary;
+    setTimeout(() => {
+      manualDistribute(model);
+      if (diagramEngine.getCanvas()?.getBoundingClientRect !== void 0) {
+        diagramEngine.zoomToFitNodes({
+          margin: previewMode ? MARGIN.PREVIEW : MARGIN.DEFAULT,
+          maxZoom: 1
+        });
+      }
+      const overlayLayer = diagramEngine.getModel().getLayers().find((layer) => layer instanceof OverlayLayerModel);
+      if (overlayLayer) {
+        diagramEngine.getModel().removeLayer(overlayLayer);
+      }
+      diagramEngine.setModel(model);
+      diagramEngine.repaintCanvas();
+      setIsDiagramLoaded(true);
+    }, 1e3);
+  };
+  const refreshDiagram = () => {
+    const model = diagramEngine.getModel();
+    const cellWidth = calculateCellWidth(model);
+    const cellNode = model.getNode(MAIN_CELL);
+    if (!cellNode) {
+      setUserMessage(NO_CELL_NODE);
+      return;
+    }
+    cellNode.width = cellWidth;
+    cellNode.updateDimensions({ width: cellWidth, height: cellWidth });
+    setTimeout(() => {
+      manualDistribute(model);
+      diagramEngine.setModel(model);
+      diagramEngine.repaintCanvas();
+      cellNodeWidth.current = cellWidth;
+    }, 8);
+  };
+  const showDiagramLayers = showControls && (observationSummary.current?.requestCount.max ?? 0) > 0 && !previewMode || false;
+  const ctx = {
+    selectedNodeId,
+    focusedNodeId,
+    componentMenu,
+    zoomLevel,
+    observationSummary: observationSummary.current ?? void 0,
+    defaultDiagramLayer,
+    modelVersion: modelVersion || "v1",
+    setSelectedNodeId,
+    setFocusedNodeId,
+    onComponentDoubleClick,
+    previewMode
+  };
+  const handleCanvasClick = (event) => {
+    if (previewMode && onComponentDoubleClick) {
+      onComponentDoubleClick(MAIN_CELL);
+      return;
+    }
+    if (focusedNodeId && event.target === diagramEngine.getCanvas()) {
+      setFocusedNodeId("");
+    }
+  };
+  let diagramContent;
+  if (diagramEngine?.getModel() && diagramModel) {
+    diagramContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        CanvasWidget,
+        {
+          engine: diagramEngine,
+          className: `${styles.canvas} cell-diagram-canvas`
+        }
+      ),
+      showControls && !previewMode && /* @__PURE__ */ jsx(DiagramControls, { engine: diagramEngine, animation }),
+      showDiagramLayers && /* @__PURE__ */ jsx(
+        DiagramLayers,
+        {
+          animation,
+          tooltips: customTooltips?.diagramLayers
+        }
+      ),
+      showDiagramLayers && /* @__PURE__ */ jsx(DiagramLegend, { animation })
+    ] });
+  } else if (userMessage) {
+    diagramContent = /* @__PURE__ */ jsx(PromptScreen, { userMessage });
+  } else {
+    diagramContent = /* @__PURE__ */ jsx(CircularProgress, { sx: { color: Colors.PRIMARY } });
+  }
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(CellDiagramContext, { ...ctx, children: /* @__PURE__ */ jsx(
+    DiagramContainer,
+    {
+      onClick: handleCanvasClick,
+      className: previewMode ? "preview-mode" : "",
+      children: diagramContent
+    }
+  ) }) });
+}
+
+export { DiagramLayer, ProjectDiagram };
+//# sourceMappingURL=ProjectDiagram.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectDiagram.esm.js","sources":["../../src/diagrams/ProjectDiagram.tsx"],"sourcesContent":["import { MouseEvent, useEffect, useRef, useState } from 'react';\nimport { DiagramEngine, DiagramModel } from '@projectstorm/react-diagrams';\nimport { CanvasWidget } from '@projectstorm/react-canvas-core';\nimport {\n  generateEngine,\n  getComponentDiagramWidth,\n  getDiagramDataFromProject,\n  manualDistribute,\n  calculateCellWidth,\n  isRenderInsideCell,\n  animateProjectDiagram,\n} from '../utils';\nimport {\n  DiagramControls,\n  OverlayLayerModel,\n  CellDiagramContext,\n  PromptScreen,\n  ConnectionModel,\n} from '../components';\nimport {\n  Colors,\n  DIAGRAM_END,\n  MAIN_CELL,\n  MARGIN,\n  NO_CELL_NODE,\n} from '../resources';\nimport { Container, DiagramContainer, useStyles } from '../utils/CanvasStyles';\nimport {\n  CustomTooltips,\n  DiagramLayer,\n  MoreVertMenuItem,\n  ObservationSummary,\n  Project,\n} from '../types';\nimport { CellModel } from '../components/Cell/CellNode/CellModel';\nimport { DiagramLayers } from '../components/Controls/DiagramLayers';\nimport { DiagramLegend } from '../components/Controls/DiagramLegend';\nimport CircularProgress from '@mui/material/CircularProgress';\n\nexport { DiagramLayer } from '../types';\nexport type { MoreVertMenuItem, Project } from '../types';\n\nexport interface ProjectDiagramProps {\n  project: Project;\n  componentMenu?: MoreVertMenuItem[];\n  showControls?: boolean;\n  animation?: boolean;\n  defaultDiagramLayer?: DiagramLayer;\n  customTooltips?: CustomTooltips;\n  modelVersion?: string;\n  onComponentDoubleClick?: (componentId: string) => void;\n  previewMode?: boolean;\n}\n\nexport function ProjectDiagram(props: ProjectDiagramProps) {\n  const {\n    project,\n    componentMenu,\n    showControls = true,\n    animation = true,\n    defaultDiagramLayer = DiagramLayer.ARCHITECTURE,\n    customTooltips,\n    modelVersion,\n    onComponentDoubleClick,\n    previewMode = false,\n  } = props;\n\n  const [diagramEngine] = useState<DiagramEngine>(generateEngine(previewMode));\n  const [diagramModel, setDiagramModel] = useState<DiagramModel | undefined>(\n    undefined,\n  );\n  const [selectedNodeId, setSelectedNodeId] = useState<string>('');\n  const [focusedNodeId, setFocusedNodeId] = useState<string>('');\n  const [userMessage, setUserMessage] = useState<string>('');\n  const [zoomLevel, setZoomLevel] = useState(1);\n  const [isDiagramLoaded, setIsDiagramLoaded] = useState(false);\n\n  const cellNodeWidth = useRef<number>(0); // INFO: use this reference to check if cell node width should change\n  const observationSummary = useRef<ObservationSummary | null>(null);\n\n  const styles = useStyles();\n\n  useEffect(() => {\n    if (diagramEngine) {\n      // eslint-disable-next-line @typescript-eslint/no-use-before-define\n      drawDiagram();\n    }\n    return () => {\n      diagramEngine\n        .getModel()\n        ?.getNodes()\n        .forEach(node => {\n          if (isRenderInsideCell(node)) {\n            node.clearListeners();\n          }\n        });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props]);\n\n  useEffect(() => {\n    if (diagramEngine && animation && isDiagramLoaded) {\n      animateProjectDiagram();\n      diagramEngine.repaintCanvas();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isDiagramLoaded, diagramEngine]);\n\n  useEffect(() => {\n    const listener = diagramEngine.getModel()?.registerListener({\n      zoomUpdated: (event: any) => {\n        setZoomLevel(event.zoom);\n      },\n    });\n    return () => {\n      diagramEngine.getModel()?.deregisterListener(listener);\n    };\n  }, [diagramEngine]);\n\n  useEffect(() => {\n    if (diagramEngine.getCanvas()) {\n      document.addEventListener('keydown', handleEscapePress);\n    }\n    return () => {\n      document.removeEventListener('keydown', handleEscapePress);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [diagramModel, diagramEngine.getCanvas()]);\n\n  function handleEscapePress(event: KeyboardEvent) {\n    if (event.key === 'Escape' && selectedNodeId) {\n      setSelectedNodeId('');\n    }\n  }\n\n  // draw diagram\n  const drawDiagram = () => {\n    // get diagram data (nodes, links, gateways) from project\n    const diagramData = getDiagramDataFromProject(project);\n    // auto distribute component nodes, component links, empty nodes and cell links\n    // get component diagram boundaries\n    // calculate component diagram width\n    const componentDiagramWidth = getComponentDiagramWidth(diagramData);\n    cellNodeWidth.current = componentDiagramWidth;\n    // get cell node\n    const cellNode = new CellModel(\n      MAIN_CELL,\n      componentDiagramWidth,\n      diagramData.gateways,\n      Array.from(\n        (\n          diagramData.nodes.connectorNodes as Map<string, ConnectionModel>\n        ).values(),\n      ),\n      Array.from(\n        (\n          diagramData.nodes.connectionNodes as Map<string, ConnectionModel>\n        ).values(),\n      ),\n    );\n    // create diagram model\n    const model = new DiagramModel();\n    // add preloader overlay layer\n    model.addLayer(new OverlayLayerModel());\n    // add node and links to diagram model\n    const models = model.addAll(\n      // nodes\n      cellNode,\n      ...diagramData.nodes.componentNodes.values(),\n      ...diagramData.nodes.connectionNodes.values(),\n      ...diagramData.nodes.connectorNodes.values(),\n      ...diagramData.nodes.emptyNodes.values(),\n      ...diagramData.nodes.externalNodes.values(),\n      // links\n      ...diagramData.links.connectionLinks.values(),\n      ...diagramData.links.connectorLinks.values(),\n      ...diagramData.links.externalLinks.values(),\n      ...diagramData.links.componentLinks.values(),\n      ...diagramData.links.cellLinks.values(),\n      ...diagramData.links.externalConnectionLinks.values(),\n    );\n\n    models.forEach(item => {\n      if (isRenderInsideCell(item)) {\n        item.registerListener({\n          positionChanged: () => {\n            // eslint-disable-next-line @typescript-eslint/no-use-before-define\n            refreshDiagram();\n          },\n        });\n      }\n    });\n    // initially render end of diagram\n    model.setOffset(DIAGRAM_END * 4, DIAGRAM_END * 4);\n    // draw diagram with all nodes and links\n    diagramEngine.setModel(model);\n    setDiagramModel(model);\n\n    if (previewMode) {\n      // Disable dragging for all nodes\n      diagramEngine.getModel().setLocked(true);\n      const state = diagramEngine.getStateMachine().getCurrentState();\n      (state as any).dragCanvas.config.allowDrag = false;\n    }\n\n    // update observability summary\n    observationSummary.current = diagramData.observationSummary;\n\n    setTimeout(() => {\n      // manual distribute - update empty node, external node and connector node position based on cell node position\n      manualDistribute(model);\n      if (diagramEngine.getCanvas()?.getBoundingClientRect !== undefined) {\n        // zoom to fit nodes and center diagram\n        diagramEngine.zoomToFitNodes({\n          margin: previewMode ? MARGIN.PREVIEW : MARGIN.DEFAULT,\n          maxZoom: 1,\n        });\n      }\n      // remove preloader overlay layer\n      const overlayLayer = diagramEngine\n        .getModel()\n        .getLayers()\n        .find(layer => layer instanceof OverlayLayerModel);\n      if (overlayLayer) {\n        diagramEngine.getModel().removeLayer(overlayLayer);\n      }\n      // update diagram\n      diagramEngine.setModel(model);\n      diagramEngine.repaintCanvas();\n      // After all diagram setup is complete\n      setIsDiagramLoaded(true);\n    }, 1000);\n  };\n\n  // refresh diagram\n  const refreshDiagram = () => {\n    // calculate component diagram width\n    const model = diagramEngine.getModel();\n    const cellWidth = calculateCellWidth(model);\n    // TODO: check if cell node width should change\n    const cellNode = model.getNode(MAIN_CELL);\n    // change cell node width\n    if (!cellNode) {\n      setUserMessage(NO_CELL_NODE); // TODO: handle error properly\n      return;\n    }\n    cellNode.width = cellWidth;\n    cellNode.updateDimensions({ width: cellWidth, height: cellWidth });\n\n    setTimeout(() => {\n      // manual distribute - update empty node, external node and connector node position based on cell node position\n      manualDistribute(model);\n      // update diagram\n      diagramEngine.setModel(model);\n      diagramEngine.repaintCanvas();\n      // update cell node width\n      cellNodeWidth.current = cellWidth;\n    }, 8);\n  };\n\n  const showDiagramLayers =\n    (showControls &&\n      (observationSummary.current?.requestCount.max ?? 0) > 0 &&\n      !previewMode) ||\n    false;\n\n  const ctx = {\n    selectedNodeId,\n    focusedNodeId,\n    componentMenu,\n    zoomLevel,\n    observationSummary: observationSummary.current ?? undefined,\n    defaultDiagramLayer,\n    modelVersion: modelVersion || 'v1',\n    setSelectedNodeId,\n    setFocusedNodeId,\n    onComponentDoubleClick,\n    previewMode,\n  };\n\n  const handleCanvasClick = (\n    event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,\n  ) => {\n    if (previewMode && onComponentDoubleClick) {\n      // In preview mode, clicking anywhere on the canvas should trigger the onComponentDoubleClick\n      onComponentDoubleClick(MAIN_CELL);\n      return;\n    }\n\n    if (focusedNodeId && event.target === diagramEngine.getCanvas()) {\n      setFocusedNodeId('');\n    }\n  };\n\n  let diagramContent;\n  if (diagramEngine?.getModel() && diagramModel) {\n    diagramContent = (\n      <>\n        <CanvasWidget\n          engine={diagramEngine}\n          className={`${styles.canvas} cell-diagram-canvas`}\n        />\n        {showControls && !previewMode && (\n          <DiagramControls engine={diagramEngine} animation={animation} />\n        )}\n        {showDiagramLayers && (\n          <DiagramLayers\n            animation={animation}\n            tooltips={customTooltips?.diagramLayers}\n          />\n        )}\n        {showDiagramLayers && <DiagramLegend animation={animation} />}\n      </>\n    );\n  } else if (userMessage) {\n    diagramContent = <PromptScreen userMessage={userMessage} />;\n  } else {\n    diagramContent = <CircularProgress sx={{ color: Colors.PRIMARY }} />;\n  }\n\n  return (\n    <Container>\n      <CellDiagramContext {...ctx}>\n        <DiagramContainer\n          onClick={handleCanvasClick}\n          className={previewMode ? 'preview-mode' : ''}\n        >\n          {diagramContent}\n        </DiagramContainer>\n      </CellDiagramContext>\n    </Container>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/hooks/useActiveLayers.esm.js

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+const useActiveLayers = (props) => {
+  const [activeLayers, setActiveLayers] = useState([
+    props.defaultDiagramLayer
+  ]);
+  const addLayer = (layer) => {
+    if (!activeLayers.includes(layer)) {
+      setActiveLayers((prev) => [...prev, layer]);
+    }
+  };
+  const removeLayer = (layer) => {
+    if (activeLayers.length > 1) {
+      setActiveLayers(activeLayers.filter((l) => l !== layer));
+    }
+  };
+  const setLayer = (layer) => {
+    setActiveLayers([layer]);
+  };
+  const hasLayer = (layer) => {
+    return activeLayers.includes(layer);
+  };
+  return { activeLayers, addLayer, removeLayer, setLayer, hasLayer };
+};
+
+export { useActiveLayers };
+//# sourceMappingURL=useActiveLayers.esm.js.map

package/dist/hooks/useActiveLayers.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActiveLayers.esm.js","sources":["../../src/hooks/useActiveLayers.ts"],"sourcesContent":["import { useState } from 'react';\nimport { DiagramLayer } from '../types';\n\ninterface ActiveLayersHookProps {\n  defaultDiagramLayer?: DiagramLayer;\n}\n\nexport const useActiveLayers = (props: ActiveLayersHookProps) => {\n  const [activeLayers, setActiveLayers] = useState<DiagramLayer[]>([\n    props.defaultDiagramLayer as DiagramLayer,\n  ]);\n\n  const addLayer = (layer: DiagramLayer) => {\n    if (!activeLayers.includes(layer)) {\n      setActiveLayers(prev => [...prev, layer]);\n    }\n  };\n\n  const removeLayer = (layer: DiagramLayer) => {\n    if (activeLayers.length > 1) {\n      // Don't allow removing the last layer\n      setActiveLayers(activeLayers.filter(l => l !== layer));\n    }\n  };\n\n  const setLayer = (layer: DiagramLayer) => {\n    setActiveLayers([layer]);\n  };\n\n  const hasLayer = (layer: DiagramLayer) => {\n    return activeLayers.includes(layer);\n  };\n\n  return { activeLayers, addLayer, removeLayer, setLayer, hasLayer };\n};\n"],"names":[],"mappings":";;AAOO,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAiC;AAC/D,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAAA,CAAyB;AAAA,IAC/D,KAAA,CAAM;AAAA,GACP,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,CAAC,KAAA,KAAwB;AACxC,IAAA,IAAI,CAAC,YAAA,CAAa,QAAA,CAAS,KAAK,CAAA,EAAG;AACjC,MAAA,eAAA,CAAgB,CAAA,IAAA,KAAQ,CAAC,GAAG,IAAA,EAAM,KAAK,CAAC,CAAA;AAAA,IAC1C;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAwB;AAC3C,IAAA,IAAI,YAAA,CAAa,SAAS,CAAA,EAAG;AAE3B,MAAA,eAAA,CAAgB,YAAA,CAAa,MAAA,CAAO,CAAA,CAAA,KAAK,CAAA,KAAM,KAAK,CAAC,CAAA;AAAA,IACvD;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,QAAA,GAAW,CAAC,KAAA,KAAwB;AACxC,IAAA,eAAA,CAAgB,CAAC,KAAK,CAAC,CAAA;AAAA,EACzB,CAAA;AAEA,EAAA,MAAM,QAAA,GAAW,CAAC,KAAA,KAAwB;AACxC,IAAA,OAAO,YAAA,CAAa,SAAS,KAAK,CAAA;AAAA,EACpC,CAAA;AAEA,EAAA,OAAO,EAAE,YAAA,EAAc,QAAA,EAAU,WAAA,EAAa,UAAU,QAAA,EAAS;AACnE;;;;"}