likec4 1.42.1 → 1.44.0

package/__app__/src/main.js

@@ -1,11 +1,15 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useEffect, lazy, Suspense, createContext, useContext, useState, useMemo, memo, useRef, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { cN as useRouter, cO as isNotFound, cP as Container, bk as Alert, as as Text, aa as Code, ac as Button, ab as Group, a_ as rem, b_ as Title, cQ as Link, cR as useNavigate, d as useCallbackRef, cS as createRootRouteWithContext, cT as stripSearchParams, aI as e, cU as Outlet, O as useMantineColorScheme, cV as createFileRoute, cW as useDocumentTitle, aY as Stack, cX as Loader, cY as useStore, a7 as ErrorBoundary, cZ as Navigate, c_ as t, s as shallowEqual, c$ as useParams, S as useIsomorphicLayoutEffect, d0 as SimpleGrid, d1 as useInViewport, j as e$1, ch as Card, aq as Box, d2 as notFound, bv as r, bj as useTree, d3 as useComputedColorScheme, bl as Tree, aA as HoverCard, aB as HoverCardTarget, aC as HoverCardDropdown, aj as ThemeIcon, d4 as onMount, R as atom, cg as useLocalStorage, d5 as Drawer, bT as ScrollArea, aR as SegmentedControl, ah as ActionIcon, b2 as Menu, b3 as MenuTarget, b4 as MenuDropdown, b5 as MenuItem, aQ as CopyButton$1, d6 as Select, d7 as ModalRoot, d8 as ModalOverlay, d9 as ModalContent, da as ModalBody, bP as Tabs, bQ as TabsList, bR as TabsTab, bS as TabsPanel, db as useMatches, dc as useMantineTheme, dd as useMediaQuery, de as useDisclosure, b1 as Paper, aX as Divider, aW as Space, df as useParentMatches, dg as MenuLabel, a2 as t$1, bo as t$2, br as t$3, bq as e$2, bp as t$4, bs as t$5, V as t$6, bt as n, k as t$7, by as dagre, bn as DefaultMap, bz as t$8, bA as t$9, dh as useSearch, av as useDebouncedCallback, di as LoadingOverlay, dj as toBlob, ak as Tooltip, dk as useAsync, dl as PanelGroup, dm as Panel, dn as PanelResizeHandle, dp as Burger, dq as RouterProvider, dr as createRouter$1, ds as createHashHistory, dt as createBrowserHistory, du as createTheme, aT as Portal, X as MantineProvider } from "./vendors.js";
+import { cB as useRouter, cC as isNotFound, cD as Container, a_ as Alert, O as Text, cE as Code, P as Button, aH as Group, aD as rem, bE as Title, cF as Link, cG as useNavigate, bx as useCallbackRef, cH as createRootRouteWithContext, cI as stripSearchParams, al as e, cJ as Outlet, l as useMantineColorScheme, cK as createFileRoute, cL as useDocumentTitle, aB as Stack, cM as Loader, cN as useStore, N as ErrorBoundary, cO as Navigate, d as deepEqual, s as shallowEqual, cP as useParams, v as useIsomorphicLayoutEffect, cQ as SimpleGrid, cR as useInViewport, cS as e$1, bZ as Card, ab as Box, cT as notFound, b7 as r, aZ as useTree, cU as useComputedColorScheme, a$ as Tree, as as HoverCard, at as HoverCardTarget, au as HoverCardDropdown, T as ThemeIcon, cV as onMount, r as atom, bY as useLocalStorage, cW as Drawer, bv as ScrollArea, a4 as SegmentedControl, Y as ActionIcon, a1 as Menu, aI as MenuTarget, aJ as MenuDropdown, aK as MenuItem, ar as CopyButton$1, cX as Select, cY as ModalRoot, cZ as ModalOverlay, c_ as ModalContent, c$ as ModalBody, br as Tabs, bs as TabsList, bt as TabsTab, bu as TabsPanel, d0 as useMatches, d1 as useMantineTheme, d2 as useMediaQuery, d3 as useDisclosure, aG as Paper, a5 as Divider, aA as Space, d4 as useParentMatches, d5 as MenuLabel, G as t, b1 as t$1, b4 as t$2, b3 as e$2, b2 as t$3, b5 as t$4, z as t$5, b6 as n, g as t$6, ba as dagre, bb as t$7, bc as t$8, d6 as useSearch, ae as useDebouncedCallback, d7 as LoadingOverlay, d8 as toBlob, $ as Tooltip, d9 as useAsync, da as PanelGroup, db as Panel, dc as PanelResizeHandle, dd as Burger, de as RouterProvider, df as createRouter$1, dg as createHashHistory, dh as createBrowserHistory, di as createTheme, ax as Portal, A as MantineProvider } from "./vendors.js";
 import { projects } from "likec4:projects";
-import { c as css, L as LikeC4ProjectsProvider, u as useLikeC4Projects, I as IconRendererProvider, a as LikeC4ModelProvider, S as StaticLikeC4Diagram, M as Markdown, R as RichText, B as Box$1, b as useLikeC4Model$1, n as nonexhaustive, d as compareNatural, e as useUpdateEffect, f as IconStarFilled, g as IconStack2, h as IconLayoutDashboard, i as IconFileCode, j as IconFolderOpen, k as IconFolderFilled, l as IconArrowLeft, m as IconMoonStars, o as IconSun, p as IconChevronDown, q as IconAlertTriangle, r as IconCheck, s as IconCopy, t as IconExternalLink, v as IconShare, w as computeRelationshipsView, x as toArray, y as sortParentsFirst, z as exact, A as invariant, C as isDescendantOf, D as isAncestor, E as nonNullable, F as getViewBounds, G as LikeC4Diagram, H as useDiagramContext } from "./likec4.js";
+import { c as css, L as LikeC4ProjectsProvider, u as useLikeC4Projects, I as IconRendererProvider, a as LikeC4ModelProvider, b as useUpdateEffect, S as StaticLikeC4Diagram, M as Markdown, B as Box$1, d as useLikeC4Model$1, e as IconStarFilled, f as IconStack2, g as IconLayoutDashboard, h as IconFileCode, i as IconFolderOpen, j as IconFolderFilled, k as IconArrowLeft, l as IconMoonStars, m as IconSun, n as IconChevronDown, o as IconAlertTriangle, p as IconCheck, q as IconCopy, r as IconExternalLink, s as IconShare, t as pickViewBounds, v as LikeC4Diagram, w as useDiagramContext } from "./likec4.js";
 import { pageTitle, ComponentName, useHashHistory, withOverviewGraph, krokiPumlSvgUrl, isDevelopment, krokiD2SvgUrl, basepath } from "./const.js";
 import { loadModel } from "likec4:model";
+import { RichText } from "@likec4/core/types";
+import { nonexhaustive, compareNatural, toArray, sortParentsFirst, invariant, DefaultMap, isDescendantOf, isAncestor, nonNullable } from "@likec4/core/utils";
+import { exact } from "@likec4/core";
+import { computeRelationshipsView } from "@likec4/core/compute-view/relationships";
 function Fallback$1({ error, resetErrorBoundary }) {
   const router = useRouter();
   return isNotFound(error) ? /* @__PURE__ */ jsx(Container, { my: "md", children: /* @__PURE__ */ jsxs(Alert, { variant: "light", color: "orange", children: [
@@ -182,15 +186,15 @@ function LikeC4IconRendererContext({ children, projectId }) {
   const IconRenderer = _renderers[projectId] ??= (props) => /* @__PURE__ */ jsx(ProjectIconRenderer, { ...props, projectId });
   return /* @__PURE__ */ jsx(IconRendererProvider, { value: IconRenderer, children });
 }
-const LikeC4ModelDataContext = createContext(null), LikeC4ModelDataContextProvider = LikeC4ModelDataContext.Provider, useLikeC4ModelDataAtom = () => {
+const LikeC4ModelDataContext = createContext(null), LikeC4ModelDataContextProvider = LikeC4ModelDataContext.Provider, useLikeC4ModelAtom = () => {
   const ctx = useContext(LikeC4ModelDataContext);
   if (ctx === null)
-    throw new Error("LikeC4ModelDataAtom is not provided");
+    throw new Error("LikeC4ModelAtom is not provided");
   return ctx;
 };
 function LikeC4ModelContext({ likec4data, likec4model, children }) {
   const model = useStore(likec4model);
-  return /* @__PURE__ */ jsx(LikeC4ModelDataContextProvider, { value: likec4data, children: /* @__PURE__ */ jsx(LikeC4ModelProvider, { likec4model: model, children }) });
+  return /* @__PURE__ */ jsx(LikeC4ModelDataContextProvider, { value: likec4model, children: /* @__PURE__ */ jsx(LikeC4ModelProvider, { likec4model: model, children }) });
 }
 css({
   position: "absolute",
@@ -278,13 +282,16 @@ function useTransparentBackground(enabled = !0) {
   }, [enabled]);
 }
 function useLikeC4Views() {
-  const $likec4data = useLikeC4ModelDataAtom(), [views, setViews] = useState([]);
-  return useEffect(() => $likec4data.subscribe((next) => {
+  const $likec4model = useLikeC4ModelAtom(), [views, setViews] = useState([]);
+  return useEffect(() => $likec4model.subscribe((next) => {
     setViews((prev) => {
-      const nextViews = t(next.views);
+      const nextViews = [...next.views()].map((v) => {
+        const n2 = v.$layouted, p = prev.find((_) => _.id === v.id);
+        return p && deepEqual(n2, p) ? p : n2;
+      });
       return shallowEqual(prev, nextViews) ? prev : nextViews;
     });
-  }), [$likec4data]), views;
+  }), [$likec4model]), views;
 }
 function useCurrentViewId() {
   return useParams({
@@ -292,9 +299,18 @@ function useCurrentViewId() {
     strict: !1
   });
 }
-function useCurrentDiagram() {
-  const viewId = useCurrentViewId();
-  return useLikeC4Views().find((v) => v.id === viewId) ?? null;
+function useCurrentView() {
+  const viewId = useCurrentViewId(), $likec4model = useLikeC4ModelAtom(), [layoutType, setLayoutType] = useState("manual");
+  useUpdateEffect(() => {
+    setLayoutType("manual");
+  }, [viewId]);
+  const [view, setView] = useState($likec4model.value?.findView(viewId)?.$layouted ?? null);
+  return useEffect(() => $likec4model.subscribe((next) => {
+    setView((current) => {
+      const vm = next.findView(viewId), nextView = (layoutType === "manual" ? vm?.$layouted : vm?.$view) ?? null;
+      return deepEqual(current, nextView) ? current : nextView;
+    });
+  }), [$likec4model, viewId, layoutType]), [view, setLayoutType];
 }
 function useCurrentProject() {
   const projects2 = useLikeC4Projects(), projectId = useParams({
@@ -576,7 +592,7 @@ const isFile = (node) => isTreeNodeData(node) && node.type === "file", FolderIco
         viewId: viewId2
       })
     });
-  }, diagram = useCurrentDiagram(), viewId = diagram?.id ?? null, tree = useTree({
+  }, [diagram] = useCurrentView(), viewId = diagram?.id ?? null, tree = useTree({
     multiple: !1
   });
   tree.setHoveredNode = setHoveredNode;
@@ -967,7 +983,7 @@ function WebcomponentsPanel({ diagram }) {
 function ShareModal({
   onClose
 }) {
-  const diagram = useCurrentDiagram(), [activeTab, setActiveTab] = useState("webcomponent");
+  const [diagram] = useCurrentView(), [activeTab, setActiveTab] = useState("webcomponent");
   return diagram ? /* @__PURE__ */ jsxs(
     ModalRoot,
     {
@@ -1297,11 +1313,11 @@ function applyDagreLayout(g) {
 }
 function layoutRelationshipsView(data) {
   const g = createGraph(), incomers = createNodes("in", data.incomers, g), subjects = createNodes("subject", data.subjects, g), outgoers = createNodes("out", data.outgoers, g), edges = [];
-  t$1(
-    t$5(
-      t$1(
+  t(
+    t$4(
+      t(
         toArray(data.incoming),
-        t$3((r2) => ({
+        t$2((r2) => ({
           id: r2.source.id,
           source: incomers.byId(r2.source.id).graph,
           target: subjects.byId(r2.target.id).graph,
@@ -1310,9 +1326,9 @@ function layoutRelationshipsView(data) {
         // Sort by source
         sortParentsFirst
       ),
-      t$1(
+      t(
         toArray(data.outgoing),
-        t$3((r2) => ({
+        t$2((r2) => ({
           id: r2.target.id,
           source: subjects.byId(r2.source.id).graph,
           target: outgoers.byId(r2.target.id).graph,
@@ -1322,13 +1338,13 @@ function layoutRelationshipsView(data) {
         sortParentsFirst
       )
     ),
-    t$3((r2) => ({
+    t$2((r2) => ({
       ...r2,
       expr: `${r2.source.id}->${r2.target.id}`
     })),
     // Group if same source and target
-    t$4(e$2("expr")),
-    t$2((grouped) => {
+    t$3(e$2("expr")),
+    t$1((grouped) => {
       const source = grouped[0].source, target = grouped[0].target, name = grouped[0].expr;
       g.node(source.id).outPorts.push(target.id), g.node(target.id).inPorts.push(source.id), g.setEdge(source.portId, target.portId, {
         ...Sizes.edgeLabel
@@ -1336,7 +1352,7 @@ function layoutRelationshipsView(data) {
         name,
         source: source.id,
         target: target.id,
-        relations: t$3(grouped, e$2("relation"))
+        relations: t$2(grouped, e$2("relation"))
       });
     })
   );
@@ -1351,21 +1367,21 @@ function layoutRelationshipsView(data) {
     ...incomers.graphNodes.values(),
     ...subjects.graphNodes.values(),
     ...outgoers.graphNodes.values()
-  ], _calculatedNodeBounds = t$1(
+  ], _calculatedNodeBounds = t(
     nodeIds,
     // Compound nodes have different portId
     n((n2) => n2.id === n2.portId),
-    t$6((n2) => [n2.id, dagreBounds(n2.id)])
+    t$5((n2) => [n2.id, dagreBounds(n2.id)])
   );
   function nodeBounds(nodeId) {
-    return _calculatedNodeBounds[nodeId] ??= t$1(
+    return _calculatedNodeBounds[nodeId] ??= t(
       g.children(nodeId) ?? [],
       n((id) => !id.endsWith(PortSuffix)),
-      t$3((id) => nodeBounds(id)),
-      t$9((bounds) => {
+      t$2((id) => nodeBounds(id)),
+      t$8((bounds) => {
         invariant(bounds.length > 0, `Node ${nodeId} has no nested nodes`);
       }),
-      t$8((acc, bounds) => ({
+      t$7((acc, bounds) => ({
         minY: Math.min(acc.minY, bounds.position.y),
         maxY: Math.max(acc.maxY, bounds.position.y + bounds.height)
       }), { minY: 1 / 0, maxY: -1 / 0 }),
@@ -1444,7 +1460,7 @@ function layoutRelationshipsView(data) {
       const edge = g.edge(e2), ename = e2.name;
       invariant(ename, "Edge has no name");
       const { name, source, target, relations } = r(edges, (e22) => e22.name === ename), points = edge.points.map((p) => [p.x, p.y]);
-      return invariant(t$7(points, 1), `Edge ${name} has less than 2 points`), {
+      return invariant(t$6(points, 1), `Edge ${name} has less than 2 points`), {
         id: name,
         source,
         target,
@@ -1506,7 +1522,7 @@ function ExportPage() {
     dynamic
   } = useSearch({
     strict: !1
-  }), diagram = useCurrentDiagram(), viewportRef = useRef(null), loadingOverlayRef = useRef(null), downloadedRef = useRef(!1);
+  }), [diagram] = useCurrentView(), viewportRef = useRef(null), loadingOverlayRef = useRef(null), downloadedRef = useRef(!1);
   useTransparentBackground();
   const downloadDiagram = useDebouncedCallback(
     () => {
@@ -1524,7 +1540,7 @@ function ExportPage() {
   );
   if (!diagram)
     return /* @__PURE__ */ jsx("div", { children: "Loading..." });
-  const bounds = getViewBounds(diagram, dynamic), extraPadding = 16, width = bounds.width + padding * 2 + extraPadding, height = bounds.height + padding * 2 + extraPadding;
+  const bounds = pickViewBounds(diagram, dynamic), extraPadding = 16, width = bounds.width + padding * 2 + extraPadding, height = bounds.height + padding * 2 + extraPadding;
   return /* @__PURE__ */ jsxs(
     Box$1,
     {
@@ -1569,7 +1585,7 @@ function ExportPage() {
             pannable: !1,
             zoomable: !1,
             controls: !1,
-            showNotations: !1,
+            enableNotations: !1,
             enableElementDetails: !1,
             enableRelationshipDetails: !1,
             enableRelationshipBrowser: !1,
@@ -1611,10 +1627,10 @@ function EmbedPage() {
     dynamic
   } = useSearch({
     strict: !1
-  }), diagram = useCurrentDiagram();
+  }), [diagram] = useCurrentView();
   if (useTransparentBackground(!!diagram), !diagram)
     return /* @__PURE__ */ jsx("div", { children: "Loading..." });
-  const bounds = getViewBounds(diagram, dynamic);
+  const bounds = pickViewBounds(diagram, dynamic);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1650,7 +1666,7 @@ const Route$b = createFileRoute("/_single/embed/$viewId")({
   component: EmbedPage
 });
 function ViewReact() {
-  const navigate = useNavigate(), view = useCurrentDiagram(), model = useLikeC4Model$1(), { dynamic } = useSearch({
+  const navigate = useNavigate(), [view, setLayoutType] = useCurrentView(), model = useLikeC4Model$1(), { dynamic } = useSearch({
     from: "__root__"
   }), onNavigateTo = useCallbackRef((viewId) => {
     navigate({
@@ -1689,11 +1705,12 @@ function ViewReact() {
       enableRelationshipDetails: !0,
       enableRelationshipBrowser: !0,
       enableElementTags: !0,
-      experimentalEdgeEditing: !1,
-      showNotations: hasNotations,
+      enableCompareWithLatest: !0,
+      enableNotations: hasNotations,
       nodesDraggable: !1,
       nodesSelectable: !0,
       onNavigateTo,
+      onLayoutTypeChange: setLayoutType,
       onBurgerMenuClick: () => {
         navigate({
           to: "/"
@@ -1920,16 +1937,16 @@ function ViewAsMmd() {
   ] });
 }
 function ViewEditor() {
-  const router = useRouter(), view = useCurrentDiagram(), onNavigateTo = useCallbackRef((viewId) => {
-    const loc = router.buildLocation({
-      to: ".",
+  const navigate = useNavigate(), [view, setLayoutType] = useCurrentView(), onNavigateTo = useCallbackRef((viewId) => {
+    navigate({
+      to: "./",
+      viewTransition: !1,
       params: (current) => ({
         ...current,
         viewId
       }),
       search: !0
     });
-    router.commitLocation(loc);
   });
   if (!view)
     return /* @__PURE__ */ jsx(NotFound, {});
@@ -1943,7 +1960,6 @@ function ViewEditor() {
       pannable: !0,
       controls: !0,
       nodesDraggable: !0,
-      experimentalEdgeEditing: !0,
       fitViewPadding: {
         top: "70px",
         bottom: "32px",
@@ -1951,7 +1967,7 @@ function ViewEditor() {
         right: "32px"
       },
       showNavigationButtons: !0,
-      showNotations: isDevelopment || hasNotations,
+      enableNotations: isDevelopment || hasNotations,
       enableSearch: !0,
       enableDynamicViewWalkthrough: !0,
       enableFocusMode: !0,
@@ -1959,10 +1975,12 @@ function ViewEditor() {
       enableRelationshipDetails: !0,
       enableRelationshipBrowser: !0,
       enableElementTags: !0,
+      enableCompareWithLatest: !0,
       onNavigateTo,
+      onLayoutTypeChange: setLayoutType,
       onChange: (e2) => console.log(e2),
       onBurgerMenuClick: () => {
-        router.navigate({
+        navigate({
           to: "/"
         });
       }