@likec4/diagram 1.17.1 → 1.19.0

package/dist/xyflow/utils.js

@@ -0,0 +1,72 @@
+import { invariant, hasAtLeast } from "@likec4/core";
+import { getNodeDimensions } from "@xyflow/system";
+import { Bezier } from "../node_modules/bezier-js/src/bezier.js";
+import { isArray } from "remeda";
+function toDomPrecision(v) {
+  if (v === null) {
+    return 0.01;
+  }
+  return Math.round(v * 100) / 100;
+}
+const nodeToRect = (nd) => ({
+  x: nd.internals.positionAbsolute.x,
+  y: nd.internals.positionAbsolute.y,
+  width: nd.measured.width ?? nd.width ?? nd.data.element.width,
+  height: nd.measured.height ?? nd.height ?? nd.data.element.height
+});
+const isInside = (test, target) => {
+  return test.x >= target.x && test.y >= target.y && test.x + test.width <= target.x + target.width && test.y + test.height <= target.y + target.height;
+};
+function bezierControlPoints(diagramEdge) {
+  let [start, ...bezierPoints] = diagramEdge.points;
+  invariant(start, "start should be defined");
+  const handles = [
+    // start
+  ];
+  while (hasAtLeast(bezierPoints, 3)) {
+    const [cp1, cp2, end, ...rest] = bezierPoints;
+    const bezier = new Bezier(start[0], start[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]);
+    const inflections = bezier.inflections();
+    if (inflections.length === 0) {
+      inflections.push(0.5);
+    }
+    inflections.forEach((t) => {
+      const { x, y } = bezier.get(t);
+      handles.push({
+        x: Math.round(x),
+        y: Math.round(y)
+      });
+    });
+    bezierPoints = rest;
+    start = end;
+  }
+  invariant(bezierPoints.length === 0, "all points should be consumed");
+  return handles;
+}
+const isClose = (a, b) => {
+  return Math.abs(a - b) < 3.1;
+};
+function isSamePoint(a, b) {
+  const [ax, ay] = isArray(a) ? a : [a.x, a.y];
+  const [bx, by] = isArray(b) ? b : [b.x, b.y];
+  return isClose(ax, bx) && isClose(ay, by);
+}
+function stopPropagation(e) {
+  return e.stopPropagation();
+}
+function centerXYInternalNode(nd) {
+  const { width, height } = getNodeDimensions(nd);
+  return {
+    x: nd.internals.positionAbsolute.x + width / 2,
+    y: nd.internals.positionAbsolute.y + height / 2
+  };
+}
+export {
+  bezierControlPoints,
+  centerXYInternalNode,
+  isInside,
+  isSamePoint,
+  nodeToRect,
+  stopPropagation,
+  toDomPrecision
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.17.1",
+  "version": "1.19.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -11,9 +11,7 @@
     "directory": "packages/diagram"
   },
   "files": [
-    "package.json",
-    "LICENSE",
-    "README.md",
+    "dist",
     "src",
     "!**/*.spec.*",
     "!**/*.d.ts.map"
@@ -21,57 +19,68 @@
   "sideEffects": false,
   "type": "module",
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "development": "./src/index.ts",
+      "default": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "default": "./dist/index.js"
+      }
+    },
+    "./style.css": "./dist/style.css"
   },
   "packageManager": "yarn@4.5.3",
   "scripts": {
     "typecheck": "tsc --noEmit",
+    "build": "vite build",
     "lint": "run -T eslint src/ --fix",
     "clean": "rm -r -f -g 'dist/*' .tsbuildinfo",
     "test": "vitest run --no-isolate"
   },
   "dependencies": {
-    "@dagrejs/dagre": "^1.1.4",
-    "@likec4/core": "1.17.1",
-    "@mantine/vanilla-extract": "7.14.1",
+    "@dagrejs/dagre": "1.1.4",
+    "@likec4/core": "1.19.0",
+    "@mantine/vanilla-extract": "7.15.2",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "3.17.0",
-    "@vanilla-extract/css": "^1.16.1",
-    "@vanilla-extract/css-utils": "^0.1.4",
-    "@vanilla-extract/dynamic": "^2.1.2",
-    "@xyflow/react": "12.3.5",
-    "@xyflow/system": "0.0.46",
-    "bezier-js": "^6.1.4",
+    "@xyflow/react": "12.3.6",
+    "@xyflow/system": "0.0.47",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
-    "esm-env": "^1.1.4",
+    "esm-env": "^1.2.1",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.11.17",
+    "framer-motion": "^11.14.1",
     "khroma": "^2.1.0",
-    "remeda": "^2.17.3",
-    "type-fest": "4.27.1",
+    "react-error-boundary": "^4.1.2",
+    "remeda": "^2.17.4",
+    "type-fest": "4.28.1",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.14.1",
-    "@mantine/hooks": "^7.14.1",
-    "@mantine/spotlight": "^7.14.1",
+    "@mantine/core": "^7.15.2",
+    "@mantine/hooks": "^7.15.2",
+    "@mantine/spotlight": "^7.15.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.17.1",
-    "@mantine/core": "7.14.1",
-    "@mantine/hooks": "7.14.1",
-    "@mantine/spotlight": "7.14.1",
+    "@likec4/tsconfig": "1.19.0",
+    "@mantine/core": "7.15.2",
+    "@mantine/hooks": "7.15.2",
+    "@mantine/spotlight": "7.15.2",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.6",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
-    "execa": "^9.3.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
+    "@vanilla-extract/css": "^1.16.1",
+    "@vanilla-extract/css-utils": "^0.1.4",
+    "@vanilla-extract/dynamic": "^2.1.2",
+    "bezier-js": "^6.1.4",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "typescript": "^5.7.2",
-    "vitest": "^2.1.5"
+    "vite": "5.4.11",
+    "vite-plugin-dts": "^4.4.0",
+    "vitest": "^2.1.8"
   }
 }

package/src/LikeC4Diagram.props.ts

@@ -3,9 +3,9 @@ import type {
   DiagramNode,
   DiagramView,
   Fqn,
-  RelationID,
+  RelationId,
   ViewChange,
-  ViewID,
+  ViewId,
   WhereOperator
 } from '@likec4/core'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
@@ -13,7 +13,7 @@ import type { XYBackground } from './xyflow/XYFlowBackground'
 
 export type { WhereOperator }
 
-export type DiagramNodeWithNavigate<ID extends string = ViewID> = Omit<DiagramNode, 'navigateTo'> & {
+export type DiagramNodeWithNavigate<ID extends string = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
   navigateTo: ID
 }
 
@@ -27,7 +27,7 @@ export type ElementIconRenderer = (props: {
   node: ElementIconNodeProps
 }) => ReactNode
 
-export type OnNavigateTo<ID extends string = ViewID> = (
+export type OnNavigateTo<ID extends string = ViewId> = (
   to: ID,
   // These fields present if navigateTo triggered by a node click
   event?: ReactMouseEvent,
@@ -191,6 +191,22 @@ export interface LikeC4DiagramProperties {
   where?: WhereOperator<string, string> | undefined
 }
 
+export type OpenSourceParams =
+  | {
+    element: Fqn
+    property?: string
+  }
+  | {
+    relation: RelationId
+  }
+  | {
+    deployment: Fqn
+    property?: string
+  }
+  | {
+    view: ViewId
+  }
+
 export interface LikeC4DiagramEventHandlers {
   onChange?: OnChange | null | undefined
   onNavigateTo?: OnNavigateTo | null | undefined
@@ -205,12 +221,5 @@ export interface LikeC4DiagramEventHandlers {
   // if set, will render a burger menu icon in the top left corner
   onBurgerMenuClick?: null | undefined | (() => void)
 
-  // if set, will render a source code icon in the top left corner
-  onOpenSourceView?: null | undefined | (() => void)
-
-  // if set, will render an icon in properties webview for each element
-  onOpenSourceElement?: null | undefined | ((fqn: Fqn) => void)
-
-  // if set, will be called on edge click
-  onOpenSourceRelation?: null | undefined | ((id: RelationID) => void)
+  onOpenSource?: null | undefined | ((params: OpenSourceParams) => void)
 }

package/src/LikeC4Diagram.tsx

@@ -1,3 +1,4 @@
+import { isDeploymentView } from '@likec4/core'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual } from 'fast-equals'
@@ -16,7 +17,7 @@ import { EnsureMantine } from './ui/EnsureMantine'
 import { FramerMotionConfig } from './ui/FramerMotionConfig'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
 import { SelectEdgesOnNodeFocus } from './xyflow/SelectEdgesOnNodeFocus'
-import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
+import type { DiagramFlowTypes } from './xyflow/types'
 import { XYFlow } from './xyflow/XYFlow'
 import { XYFlowInner } from './xyflow/XYFlowInner'
 
@@ -54,9 +55,7 @@ export function LikeC4Diagram({
   onNavigateTo,
   onNodeClick,
   onNodeContextMenu,
-  onOpenSourceElement,
-  onOpenSourceView,
-  onOpenSourceRelation,
+  onOpenSource,
   onBurgerMenuClick,
   renderIcon,
   where,
@@ -64,8 +63,8 @@ export function LikeC4Diagram({
 }: LikeC4DiagramProps) {
   const hasLikec4model = !!useLikeC4Model()
   const initialRef = useRef({
-    defaultNodes: [] as XYFlowNode[],
-    defaultEdges: [] as XYFlowEdge[],
+    defaultNodes: [] as DiagramFlowTypes.Node[],
+    defaultEdges: [] as DiagramFlowTypes.Edge[],
     initialWidth: initialWidth ?? view.bounds.width,
     initialHeight: initialHeight ?? view.bounds.height
   })
@@ -112,11 +111,12 @@ export function LikeC4Diagram({
             showNavigationButtons={showNavigationButtons && !!onNavigateTo}
             showNotations={showNotations}
             enableFocusMode={enableFocusMode}
-            enableRelationshipDetails={enableRelationshipDetails && hasLikec4model}
             enableSearch={hasLikec4model && enableSearch}
             enableElementDetails={enableElementDetails && hasLikec4model}
             enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
             enableRelationshipBrowser={enableRelationshipBrowser && hasLikec4model}
+            // TODO: temporary disable relationship details for deployment views
+            enableRelationshipDetails={enableRelationshipDetails && hasLikec4model && !isDeploymentView(view)}
             // Apply where filter only in readonly mode
             whereFilter={readonly ? (where ?? null) : null}
             renderIcon={renderIcon ?? null}
@@ -129,9 +129,7 @@ export function LikeC4Diagram({
             onChange={onChange ?? null}
             onNavigateTo={onNavigateTo ?? null}
             onCanvasDblClick={onCanvasDblClick ?? null}
-            onOpenSourceView={onOpenSourceView ?? null}
-            onOpenSourceElement={onOpenSourceElement ?? null}
-            onOpenSourceRelation={onOpenSourceRelation ?? null}
+            onOpenSource={onOpenSource ?? null}
             onBurgerMenuClick={onBurgerMenuClick ?? null}
           >
             <LikeC4DiagramInnerMemo

package/src/LikeC4Search.css.ts

@@ -0,0 +1,12 @@
+import { rem } from '@mantine/core'
+import { globalStyle, style } from '@vanilla-extract/css'
+
+export const actionSection = style({
+  marginInlineEnd: 4
+})
+
+globalStyle(`:where(${actionSection}) .tabler-icon`, {
+  opacity: 0.8,
+  width: '70%',
+  height: '70%'
+})

package/src/LikeC4Search.tsx

@@ -1,72 +1,16 @@
-import type { DiagramView } from '@likec4/core'
-import { Spotlight, SpotlightActionsGroup, type SpotlightActionData } from '@mantine/spotlight'
-import { IconRectangularPrism, IconSitemap, IconSearch } from '@tabler/icons-react'
-import { memo, useMemo, useState } from 'react'
+import { rem } from '@mantine/core'
+import { Spotlight, type SpotlightActionData } from '@mantine/spotlight'
+import { IconRectangularPrism, IconSearch, IconSitemap, IconStack2 } from '@tabler/icons-react'
+import { memo, useMemo } from 'react'
 import { filter, map, pipe } from 'remeda'
 import { useDiagramState, useDiagramStoreApi, useMantinePortalProps } from './hooks'
 import { useLikeC4Model } from './likec4model'
-import { Center, Group, Highlight, Text } from '@mantine/core'
-
-interface QueryMatch {
-  data: SpotlightActionData,
-  keyword: string,
-  match: string
-}
-
-function filterAction(actionData: SpotlightActionData, query: string) : QueryMatch | undefined {
-  const queryLower = query.toLowerCase();
-  const keywords = Array.isArray(actionData.keywords) ? actionData.keywords : [];
-  const keywordMatch = keywords
-    .map(keyword => {
-      const index = keyword.toLowerCase().indexOf(queryLower);
-      return index !== -1 ? {
-        keyword: keyword,
-        match: keyword.substring(index, index + query.length)
-      } : null;
-    })
-    .find(match => !!match);
-  return !!keywordMatch ? {
-    data: actionData,
-    keyword: keywordMatch.keyword,
-    match: keywordMatch.match
-  } : undefined;
-}
-
-function buildFilteredActions(actionsData: SpotlightActionData[], query: string): JSX.Element[] {
-  return pipe(
-    actionsData,
-    map(a => filterAction(a, query)),
-    filter(qm => !!qm),
-    map(qm => buildSpotlightAction(qm))
-  );
-}
-
-function highlightMatch(match: QueryMatch): JSX.Element {
-  return <Highlight highlight={match.match}>{match.keyword}</Highlight>
-}
-
-function buildSpotlightAction(matchedAction: QueryMatch): JSX.Element {
-  const isMatchInLabel = matchedAction.keyword == matchedAction.data.label;
-  return <Spotlight.Action onClick={matchedAction.data.onClick}>
-    <Center style={{ marginRight: '8px '}}>
-      {matchedAction.data.leftSection}
-    </Center>
-    <Group wrap="nowrap" w="100%">
-      <div style={{ flex: 1 }}>
-        <Text>
-          {isMatchInLabel ? highlightMatch(matchedAction) : matchedAction.data.label}
-        </Text>
-        {!isMatchInLabel && <Text opacity={0.6} size="xs">{highlightMatch(matchedAction)}</Text>}
-      </div>
-    </Group>
-  </Spotlight.Action>
-}
+import * as css from './LikeC4Search.css'
 
 export const LikeC4Search = memo(() => {
   const view = useDiagramState(s => s.view)
   const model = useLikeC4Model(true)
   const store = useDiagramStoreApi()
-  const [ query, setQuery ] = useState('')
 
   const getNodeActionsData = (): SpotlightActionData[] => {
     const { focusOnNode } = store.getState()
@@ -77,6 +21,9 @@ export const LikeC4Search = memo(() => {
       map(n => ({
         id: n.id,
         label: n.title,
+        ...(n.description && {
+          description: n.description
+        }),
         keywords: [
           n.title,
           ...(n.tags ?? []).map(t => `#${t}`),
@@ -85,62 +32,67 @@ export const LikeC4Search = memo(() => {
         onClick: () => focusOnNode(n.id),
         leftSection: <IconRectangularPrism />
       }))
-    );
+    )
   }
 
   const getViewActionsData = (): SpotlightActionData[] => {
-    const { onNavigateTo } = store.getState()
-    const views = model.views()
+    const views = [...model.views()]
 
     return map(views, v => ({
       id: v.id,
       label: v.title ?? v.id,
+      ...(v.$view.description && {
+        description: v.$view.description
+      }),
       keywords: [
         v.title ?? v.id,
         ...(v.tags ?? []),
-        ...(v.view.description ? [v.view.description] : [])
+        ...(v.$view.description ? [v.$view.description] : [])
       ],
       onClick: () => {
         store.setState({
-          hoveredNodeId: null,
           lastOnNavigate: {
             fromView: view.id,
             toView: v.id,
             fromNode: null
           }
         })
-        onNavigateTo?.(v.id)
+        store.getState().onNavigateTo?.(v.id)
       },
-      leftSection: <IconSitemap />
-    }));
+      leftSection: v.isDeploymentView()
+        ? <IconStack2 />
+        : <IconSitemap />
+    }))
   }
 
-  const { nodeActions, viewActions } = useMemo(() => ({
-      nodeActions: buildFilteredActions(getNodeActionsData(), query),
-      viewActions: buildFilteredActions(getViewActionsData(), query)
-    }),
-    [model, store, view, query]
-  );
+  const actions = useMemo(() => [
+    {
+      group: 'Elements',
+      actions: getNodeActionsData()
+    },
+    {
+      group: 'Views',
+      actions: getViewActionsData()
+    }
+  ], [model, store, view])
 
-  const portalProps = useMantinePortalProps();
+  const portalProps = useMantinePortalProps()
   return (
-    <Spotlight.Root
+    <Spotlight
       {...portalProps}
+      actions={actions}
+      nothingFound="Nothing found..."
       shortcut={['mod + f', 'mod + k']}
-      query={query}
-      onQueryChange={setQuery}
       scrollable
-      maxHeight={'calc(100vh - 100px)'}
-    >
-      <Spotlight.Search
-        placeholder="Search elements in current view and other views..."
-        leftSection={<IconSearch stroke={1.5} />}
-      />
-      <Spotlight.ActionsList>
-      {nodeActions.length > 0 && <SpotlightActionsGroup label="Elements">{nodeActions}</SpotlightActionsGroup> }
-      {viewActions.length > 0 && <SpotlightActionsGroup label="Views">{viewActions}</SpotlightActionsGroup> }
-      {nodeActions.length == 0 && viewActions.length == 0 && <Spotlight.Empty>Nothing found...</Spotlight.Empty> }
-      </Spotlight.ActionsList>
-    </Spotlight.Root>
-  );
-});
+      highlightQuery
+      maxHeight={350}
+      classNames={{
+        actionSection: css.actionSection
+      }}
+      searchProps={{
+        leftSection: <IconSearch style={{ width: rem(18), height: rem(18) }} stroke={1.5} />,
+        placeholder: 'Search elements and views...'
+      }}
+    />
+  )
+})

package/src/controls/Text.ts

@@ -0,0 +1,5 @@
+import { Text as MantineText } from '@mantine/core'
+
+export const Text = MantineText.withProps({
+  component: 'div'
+})

package/src/controls/action-button-bar/ActionButtonBar.css.ts

@@ -0,0 +1,13 @@
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+  zIndex: 100,
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  gap: 2,
+  justifyContent: 'center',
+  pointerEvents: 'none',
+})

package/src/controls/action-button-bar/ActionButtonBar.tsx

@@ -0,0 +1,138 @@
+import { Box } from '@mantine/core'
+import { useId } from '@mantine/hooks'
+import clsx from 'clsx'
+import { type Variants } from 'framer-motion'
+import type { PropsWithChildren } from 'react'
+import * as css from './ActionButtonBar.css'
+import { ActionButtonBarContext } from './useActionButtonBarCtx'
+
+const TRANSLATE_DIFF = 5
+
+type ShiftX = 'left' | 'spread' | 'right'
+type ShiftY = 'top' | 'spread' | 'bottom'
+type ShiftMode = number | 'spread'
+
+type ActionButtonBarProps = PropsWithChildren<{
+  shiftX?: ShiftX
+  shiftY?: ShiftY
+}>
+
+const elementVariants = (prefix: string, index: number, count: number, shiftX: ShiftMode, shiftY: ShiftMode) => {
+  const name = `${prefix}${index + 1}`
+  const translation = count > 1
+    ? {
+      x: shiftX === 'spread' ? 1 - count + index * 2 : shiftX,
+      y: shiftY === 'spread' ? 1 - count + index * 2 : shiftY,
+    }
+    : {
+      x: 0,
+      y: 1,
+    }
+
+  const variants = {
+    idle: {
+      '--icon-scale': 'scale(1)',
+      '--ai-bg': 'var(--ai-bg-idle)',
+      scale: 1,
+      opacity: 0.8,
+      translateX: 0,
+      translateY: 0,
+      originX: 0.5,
+      originY: 0.5,
+      // translateY: 0,
+      // ...align === 'left' && {
+      //   originX: 0.75,
+      //   translateX: -1
+      // },
+      // ...align === 'right' && {
+      //   originX: 0.25,
+      //   translateX: 1
+      // }
+    },
+    hovered: {
+      '--ai-bg': 'var(--ai-bg-hover)',
+      '--icon-scale': 'scale(1)',
+      // translateY: 3,
+      scale: 1.28,
+      opacity: 1,
+      translateX: translation.x * TRANSLATE_DIFF,
+      translateY: translation.y * TRANSLATE_DIFF,
+      // ...align === 'left' && {
+      //   translateX: -4
+      // },
+      // ...align === 'right' && {
+      //   translateX: 4
+      // }
+    },
+    [`hovered:${name}`]: {
+      '--ai-bg': 'var(--ai-hover)',
+      '--icon-scale': 'scale(1.08)',
+      scale: 1.45,
+    },
+    [`tap:${name}`]: {
+      '--icon-scale': 'scale(1)',
+      scale: 1.15,
+    },
+    selected: {},
+  } satisfies Variants
+  variants['selected'] = variants['hovered']
+  variants['hovered:details'] = variants['idle']
+  return {
+    variants,
+    ['data-animate-target']: name,
+  }
+}
+
+export const ActionButtonBar = ({
+  shiftX = 'spread',
+  shiftY = 'spread',
+  children,
+}: ActionButtonBarProps) => {
+  const id = useId()
+  const childrenArray = Array.isArray(children) ? children : [children]
+
+  // determine offsets for shifting
+  let shiftDiffX: ShiftMode = 'spread'
+  if (shiftX == 'left') {
+    shiftDiffX = -1
+  }
+  else if (shiftX == 'right') {
+    shiftDiffX = 1
+  }
+
+  let shiftDiffY: ShiftMode = 'spread'
+  if (shiftY == 'top') {
+    shiftDiffY = -1
+  }
+  else if (shiftY == 'bottom') {
+    shiftDiffY = 1
+  }
+
+  return (
+    <Box className={clsx(css.container)}>
+      {childrenArray.map((child, i, all) => (
+        <ActionButtonBarContext.Provider
+          value={elementVariants(id, i, all.length, shiftDiffX, shiftDiffY)}>
+          {child}
+        </ActionButtonBarContext.Provider>
+        // <>{cloneElement(child, {
+        //   key: i,
+        //   variants: elementVariants(i, all.length, shiftDiffX, shiftDiffY),
+        //   ['data-animate-target']: `i${i + 1}`,
+        //   ...props
+        // })}</>
+      ))}
+      {
+        /* {childrenArray.filter(child => !!child).map((child, i) => (
+        <m.div
+          key={i}
+          variants={elementVariants(i, childrenArray.length, shiftDiffX, shiftDiffY)}
+          {...props}
+          >
+          {child}
+        </m.div>
+      ))} */
+      }
+    </Box>
+  )
+}