likec4 1.10.1 → 1.12.0

package/dist/__app__/react/likec4.tsx

@@ -1,20 +1,17 @@
 import {
   LikeC4Browser,
+  type LikeC4Model,
+  LikeC4ModelProvider as GenericLikeC4ModelProvider,
   LikeC4ViewEmbedded,
   type LikeC4ViewProps as BaseLikeC4ViewProps,
   ReactLikeC4 as GenericReactLikeC4,
   type ReactLikeC4Props as GenericReactLikeC4Props,
   useColorScheme
 } from 'likec4/react'
-import { memo, useCallback, useState } from 'react'
+import { memo, type PropsWithChildren, useCallback, useState } from 'react'
 import { Icons } from 'virtual:likec4/icons'
-import {
-  isLikeC4ViewId,
-  type LikeC4ElementKind,
-  type LikeC4Tag,
-  type LikeC4ViewId,
-  LikeC4Views
-} from 'virtual:likec4/views'
+import type { DiagramView, LikeC4ElementKind, LikeC4Tag, LikeC4ViewId } from 'virtual:likec4/model'
+import { likec4model as likeC4Model, LikeC4Views, useLikeC4ModelAtom } from 'virtual:likec4/model'
 
 type IconRendererProps = {
   node: {
@@ -24,15 +21,32 @@ type IconRendererProps = {
   }
 }
 
-function RenderIcon({ node }: IconRendererProps) {
+export function RenderIcon({ node }: IconRendererProps) {
   const IconComponent = Icons[node.icon ?? '']
   return IconComponent ? <IconComponent /> : null
 }
 
-export { isLikeC4ViewId, LikeC4Views, RenderIcon }
+export { likeC4Model, LikeC4Views }
+
+export function useLikeC4Model() {
+  return useLikeC4ModelAtom()
+}
+
+export const useLikeC4ViewModel = (viewId: LikeC4ViewId): LikeC4Model.Layouted.ViewModel =>
+  useLikeC4ModelAtom().view(viewId)
+
+export const useLikeC4View = (viewId: LikeC4ViewId): DiagramView => useLikeC4ModelAtom().view(viewId).view as any
 
 export type LikeC4ViewProps = BaseLikeC4ViewProps<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
 
+export function isLikeC4ViewId(value: unknown): value is LikeC4ViewId {
+  return (
+    value != null
+    && typeof value === 'string'
+    && value in LikeC4Views
+  )
+}
+
 const NotFound = ({ viewId }: { viewId: string }) => (
   <div
     style={{
@@ -51,6 +65,15 @@ const NotFound = ({ viewId }: { viewId: string }) => (
   </div>
 )
 
+export function LikeC4ModelProvider({ children }: PropsWithChildren) {
+  const likeC4Model = useLikeC4ModelAtom()
+  return (
+    <GenericLikeC4ModelProvider likec4model={likeC4Model}>
+      {children}
+    </GenericLikeC4ModelProvider>
+  )
+}
+
 const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View({
   viewId,
   interactive = true,
@@ -64,6 +87,7 @@ const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View
   showNavigationButtons = false,
   showNotations = false,
   enableFocusMode = false,
+  showRelationshipDetails = false,
   browserClassName,
   browserStyle,
   mantineTheme,
@@ -94,7 +118,7 @@ const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View
   }
 
   return (
-    <>
+    <LikeC4ModelProvider>
       <LikeC4ViewEmbedded<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
         view={view}
         colorScheme={colorScheme}
@@ -107,6 +131,7 @@ const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View
         showNavigationButtons={showNavigationButtons}
         showNotations={showNotations}
         enableFocusMode={enableFocusMode}
+        showRelationshipDetails={showRelationshipDetails}
         where={where}
         mantineTheme={mantineTheme}
         {...props}
@@ -126,7 +151,7 @@ const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View
           mantineTheme={mantineTheme}
         />
       )}
-    </>
+    </LikeC4ModelProvider>
   )
 })
 LikeC4ViewMemo.displayName = 'LikeC4ViewMemo'
@@ -144,10 +169,12 @@ export function ReactLikeC4({ viewId, ...props }: ReactLikeC4Props) {
     return <NotFound viewId={viewId} />
   }
   return (
-    <GenericReactLikeC4
-      view={view}
-      renderIcon={RenderIcon}
-      {...props}
-    />
+    <LikeC4ModelProvider>
+      <GenericReactLikeC4
+        view={view}
+        renderIcon={RenderIcon}
+        {...props}
+      />
+    </LikeC4ModelProvider>
   )
 }

package/dist/__app__/src/chunks/{-index-overview-CR08x_EG.js → -index-overview-Csz814YU.js}

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useOverviewGraph } from "virtual:likec4/overview-graph";
-import { u, c as createReactComponent, I as IconFolderFilled, e, a as useUpdateEffect, n as nonexhaustive } from "./main-D12NE066.js";
-import { u as useRouter } from "./tanstack-router-DKnF_3kP.js";
-import { B as BaseEdge, H as Handle, P as Position, u as useNodesState, a as useEdgesState, i as index, b as Background, c as BackgroundVariant } from "./likec4-BFZn233G.js";
+import { u, c as createReactComponent, I as IconFolderFilled, e, a as useUpdateEffect, n as nonexhaustive } from "./main-Bc_PC5BH.js";
+import { u as useRouter } from "./tanstack-router-CU5V4Ll-.js";
+import { B as BaseEdge, H as Handle, P as Position, u as useNodesState, a as useEdgesState, i as index, b as Background, c as BackgroundVariant } from "./likec4-DlkyDuSp.js";
 import { memo, useRef, useMemo } from "react";
-import { P as Paper, c as clsx, G as Group, T as ThemeIcon, a as Text, C as Card, b as CardSection, d as Center, I as Image, B as Box, u as useMantineColorScheme } from "./mantine-BnwtT_Nz.js";
+import { P as Paper, c as clsx, G as Group, T as ThemeIcon, a as Text, C as Card, b as CardSection, d as Center, I as Image, B as Box, u as useMantineColorScheme } from "./mantine-IOl1S4mZ.js";
 import { usePreviewUrl } from "virtual:likec4/previews";
 function a(...n) {
   return u(c, n);
@@ -15,14 +15,14 @@ function c(n, r) {
   return o;
 }
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconLoader = createReactComponent("outline", "loader", "IconLoader", [["path", { d: "M12 6l0 -3", key: "svg-0" }], ["path", { d: "M16.25 7.75l2.15 -2.15", key: "svg-1" }], ["path", { d: "M18 12l3 0", key: "svg-2" }], ["path", { d: "M16.25 16.25l2.15 2.15", key: "svg-3" }], ["path", { d: "M12 18l0 3", key: "svg-4" }], ["path", { d: "M7.75 16.25l-2.15 2.15", key: "svg-5" }], ["path", { d: "M6 12l-3 0", key: "svg-6" }], ["path", { d: "M7.75 7.75l-2.15 -2.15", key: "svg-7" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/__app__/src/chunks/{likec4-BFZn233G.js → likec4-DlkyDuSp.js}

@@ -2790,7 +2790,12 @@ function mergeObjects(base, incoming) {
 function updateAbsolutePositions(nodeLookup, parentLookup, options) {
   const _options = mergeObjects(defaultOptions, options);
   for (const node of nodeLookup.values())
-    node.parentId && updateChildNode(node, nodeLookup, parentLookup, _options);
+    if (node.parentId)
+      updateChildNode(node, nodeLookup, parentLookup, _options);
+    else {
+      const positionWithOrigin = getNodePositionWithOrigin(node, _options.nodeOrigin), extent = isCoordinateExtent(node.extent) ? node.extent : _options.nodeExtent, clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(node));
+      node.internals.positionAbsolute = clampedPosition;
+    }
 }
 function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
   const _options = mergeObjects(adoptUserNodesDefaultOptions, options), tmpLookup = new Map(nodeLookup), selectedNodeZ = _options?.elevateNodesOnSelect ? 1e3 : 0;
@@ -3046,6 +3051,8 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
         nodesBox = rectToBox(rect);
       }
       for (const [id2, dragItem] of dragItems) {
+        if (!nodeLookup.has(id2))
+          continue;
         let nextPosition = { x: x - dragItem.distance.x, y: y - dragItem.distance.y };
         snapToGrid && (nextPosition = snapPosition(nextPosition, snapGrid));
         let adjustedNodeExtent = [
@@ -3101,8 +3108,9 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
       const { domNode: domNode2, nodeDragThreshold, transform: transform2, snapGrid, snapToGrid } = getStoreItems();
       abortDrag = !1, nodeDragThreshold === 0 && startDrag(event), lastPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid }), containerBounds = domNode2?.getBoundingClientRect() || null, mousePosition = getEventPosition(event.sourceEvent, containerBounds);
     }).on("drag", (event) => {
-      const { autoPanOnNodeDrag, transform: transform2, snapGrid, snapToGrid, nodeDragThreshold } = getStoreItems(), pointerPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid });
-      if (event.sourceEvent.type === "touchmove" && event.sourceEvent.touches.length > 1 && (abortDrag = !0), !abortDrag) {
+      const { autoPanOnNodeDrag, transform: transform2, snapGrid, snapToGrid, nodeDragThreshold, nodeLookup } = getStoreItems(), pointerPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid });
+      if ((event.sourceEvent.type === "touchmove" && event.sourceEvent.touches.length > 1 || // if user deletes a node while dragging, we need to abort the drag to prevent errors
+      nodeId && !nodeLookup.has(nodeId)) && (abortDrag = !0), !abortDrag) {
         if (!autoPanStarted && autoPanOnNodeDrag && dragStarted && (autoPanStarted = !0, autoPan()), !dragStarted) {
           const x = pointerPos.xSnapped - (lastPos.x ?? 0), y = pointerPos.ySnapped - (lastPos.y ?? 0);
           Math.sqrt(x * x + y * y) > nodeDragThreshold && startDrag(event);
@@ -3733,8 +3741,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     destroy
   };
 }
-var define_import_meta_env_default = { BASE_URL: "/", MODE: "production", DEV: !1, PROD: !0, SSR: !1 };
-const createStoreImpl = (createState) => {
+const __vite_import_meta_env__ = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, createStoreImpl = (createState) => {
   let state;
   const listeners = /* @__PURE__ */ new Set(), setState = (partial, replace) => {
     const nextState = typeof partial == "function" ? partial(state) : partial;
@@ -3743,7 +3750,7 @@ const createStoreImpl = (createState) => {
       state = replace ?? (typeof nextState != "object" || nextState === null) ? nextState : Object.assign({}, state, nextState), listeners.forEach((listener) => listener(state, previousState));
     }
   }, getState = () => state, api = { setState, getState, getInitialState: () => initialState, subscribe: (listener) => (listeners.add(listener), () => listeners.delete(listener)), destroy: () => {
-    (define_import_meta_env_default ? "production" : void 0) !== "production" && console.warn(
+    (__vite_import_meta_env__ ? "production" : void 0) !== "production" && console.warn(
       "[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected."
     ), listeners.clear();
   } }, initialState = state = createState(setState, getState, api);
@@ -4035,15 +4042,18 @@ const useViewportHelper = () => {
       return { x, y, zoom: zoom2 };
     },
     fitView: (options) => {
-      const { nodeLookup, width, height, minZoom, maxZoom, panZoom } = store.getState(), fitViewNodes = getFitViewNodes(nodeLookup, options);
-      return panZoom ? fitView({
+      const { nodeLookup, minZoom, maxZoom, panZoom, domNode } = store.getState();
+      if (!panZoom || !domNode)
+        return Promise.resolve(!1);
+      const fitViewNodes = getFitViewNodes(nodeLookup, options), { width, height } = getDimensions(domNode);
+      return fitView({
         nodes: fitViewNodes,
         width,
         height,
         minZoom,
         maxZoom,
         panZoom
-      }, options) : Promise.resolve(!1);
+      }, options);
     },
     setCenter: async (x, y, options) => {
       const { width, height, maxZoom, panZoom } = store.getState(), nextZoom = typeof options?.zoom < "u" ? options.zoom : maxZoom, centerX = width / 2 - x * nextZoom, centerY = height / 2 - y * nextZoom;
@@ -6017,9 +6027,10 @@ export {
   getBoundsOfRects as n,
   boxToRect as o,
   useStoreWithEqualityFn as p,
-  useOnViewportChange as q,
-  useOnSelectionChange as r,
+  getDefaultExportFromCjs as q,
+  useOnViewportChange as r,
   shallow$1 as s,
+  useOnSelectionChange as t,
   useNodesState as u,
   withSelectorExports as w
 };