@likec4/diagram 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -48,31 +48,31 @@
     "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.5.0",
+    "@likec4/core": "1.6.0",
     "@react-hookz/web": "^24.0.4",
-    "@tabler/icons-react": "^3.9.0",
+    "@tabler/icons-react": "^3.11.0",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.2.13",
+    "framer-motion": "^11.3.8",
     "remeda": "^2.3.0",
     "zustand": "^4.5.4"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.11.1",
-    "@mantine/hooks": "^7.11.1",
+    "@mantine/core": "^7.11.2",
+    "@mantine/hooks": "^7.11.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.5.0",
+    "@likec4/tsconfig": "1.6.0",
     "@lume/kiwi": "^0.4.3",
-    "@mantine/core": "7.11.1",
-    "@mantine/hooks": "7.11.1",
-    "@mantine/vanilla-extract": "7.11.1",
+    "@mantine/core": "7.11.2",
+    "@mantine/hooks": "7.11.2",
+    "@mantine/vanilla-extract": "7.11.2",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.6",
@@ -80,8 +80,8 @@
     "@types/react-dom": "^18.3.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.8",
     "@vitejs/plugin-react": "^4.3.1",
-    "@xyflow/react": "12.0.1",
-    "@xyflow/system": "0.0.35",
+    "@xyflow/react": "12.0.3",
+    "@xyflow/system": "0.0.37",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "execa": "^9.3.0",
@@ -91,7 +91,7 @@
     "tilg": "^0.1.1",
     "type-fest": "^4.21.0",
     "typescript": "^5.5.3",
-    "vite": "5.3.3",
+    "vite": "5.3.4",
     "vite-plugin-dts": "^3.9.1"
   }
 }

package/src/LikeC4Diagram.props.ts

@@ -6,17 +6,29 @@ import type {
   EdgeId,
   ElementShape,
   Fqn,
+  IconUrl,
   NonEmptyArray,
   ThemeColor,
   ViewID
 } from '@likec4/core'
 import type { XYPosition } from '@xyflow/system'
-import type { MouseEvent as ReactMouseEvent } from 'react'
-import type { SetRequired, Simplify } from 'type-fest'
+import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
 import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
 import type { XYBackground } from './xyflow/XYFlowBackground'
 
-export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigateTo'>>
+export type DiagramNodeWithNavigate = Omit<DiagramNode, 'navigateTo'> & {
+  navigateTo: ViewID
+}
+
+type ElementIconNodeProps = {
+  id: string
+  title: string
+  icon?: string | undefined
+}
+
+export type ElementIconRenderer = (props: {
+  node: ElementIconNodeProps
+}) => ReactNode
 
 export type OnNavigateTo = {
   (
@@ -177,6 +189,12 @@ export interface LikeC4DiagramProperties {
    * @default false
    */
   experimentalEdgeEditing?: boolean | undefined
+
+  /**
+   * Render custom icon for a node
+   * By default, if icon is http:// or https://, it will be rendered as an image
+   */
+  renderIcon?: ElementIconRenderer | undefined
 }
 
 export interface LikeC4DiagramEventHandlers {

package/src/LikeC4Diagram.tsx

@@ -49,7 +49,8 @@ export function LikeC4Diagram({
   onEdgeContextMenu,
   onNavigateTo,
   onNodeClick,
-  onNodeContextMenu
+  onNodeContextMenu,
+  renderIcon
 }: LikeC4DiagramProps) {
   DEV && useTilg()
   const initialRef = useRef<{
@@ -70,6 +71,7 @@ export function LikeC4Diagram({
       initialHeight: initialHeight ?? view.height
     }
   }
+
   return (
     <EnsureMantine>
       <XYFlowProvider
@@ -89,6 +91,7 @@ export function LikeC4Diagram({
           nodesDraggable={nodesDraggable}
           nodesSelectable={nodesSelectable}
           experimentalEdgeEditing={experimentalEdgeEditing}
+          renderIcon={renderIcon ?? null}
           onCanvasClick={onCanvasClick}
           onCanvasContextMenu={onCanvasContextMenu}
           onEdgeClick={onEdgeClick}

package/src/StaticLikeC4Diagram.tsx

@@ -11,6 +11,7 @@ export type StaticLikeC4DiagramProps = Pick<
   | 'background'
   | 'initialWidth'
   | 'initialHeight'
+  | 'renderIcon'
 >
 
 export function StaticLikeC4Diagram({

package/src/state/DiagramContext.tsx

@@ -2,7 +2,7 @@ import { shallowEqual } from 'fast-equals'
 import { createContext, type PropsWithChildren, useEffect, useRef } from 'react'
 import { hasSubObject, isNonNullish, pickBy } from 'remeda'
 import { useUpdateEffect } from '../hooks'
-import { useXYFlow, useXYStoreApi } from '../xyflow/hooks'
+import { useXYFlow, useXYStoreApi } from '../xyflow/hooks/useXYFlow'
 import { createDiagramStore, type DiagramInitialState } from './diagramStore'
 
 export type DiagramZustandStore = ReturnType<typeof createDiagramStore>

package/src/state/diagramStore.ts

@@ -10,7 +10,12 @@ import type { Exact, Except, RequiredKeysOf, Simplify } from 'type-fest'
 import { devtools, subscribeWithSelector } from 'zustand/middleware'
 import { shallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
-import type { Changes, DiagramNodeWithNavigate, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props'
+import type {
+  Changes,
+  DiagramNodeWithNavigate,
+  ElementIconRenderer,
+  LikeC4DiagramEventHandlers
+} from '../LikeC4Diagram.props'
 import { MinZoom } from '../xyflow/const'
 import type { XYStoreApi } from '../xyflow/hooks'
 import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
@@ -29,6 +34,7 @@ export type DiagramStore = {
   nodesDraggable: boolean
   nodesSelectable: boolean
   experimentalEdgeEditing: boolean
+  renderIcon: ElementIconRenderer | null
   // Diagram Container, see DiagramContainer.tsx
   getContainer: () => HTMLDivElement | null
 
@@ -76,6 +82,7 @@ export type DiagramInitialState = // Required properties
   & Pick<
     DiagramStore,
     | 'view'
+    | 'renderIcon'
     | 'readonly'
     | 'showElementLinks'
     | 'fitViewEnabled'

package/src/ui/BackwardForwardPanel.tsx

@@ -2,7 +2,7 @@ import { ActionIcon, Group } from '@mantine/core'
 import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
-import { useNavigationHistory } from '../state/hooks'
+import { useNavigationHistory } from '../state/useNavigationHistory'
 import * as css from './BackwardForwardPanel.css'
 
 export function BackwardForwardPanel() {

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -3,7 +3,7 @@ import { useDebouncedEffect } from '@react-hookz/web'
 import { shallowEqual } from 'fast-equals'
 import { useEffect, useRef } from 'react'
 import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../state/hooks'
-import { useXYStore, useXYStoreApi, type XYStoreApi } from './hooks'
+import { useXYStore, useXYStoreApi, type XYStoreApi } from './hooks/useXYFlow'
 import type { XYFlowState } from './types'
 import { toDomPrecision } from './utils'
 

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -2,7 +2,7 @@ import { nonNullable } from '@likec4/core'
 import type { EdgeChange, NodeChange } from '@xyflow/react'
 import { getBoundsOfRects, getViewportForBounds, nodeToRect } from '@xyflow/system'
 import { useEffect } from 'react'
-import { useDiagramStoreApi } from '../state/hooks'
+import { useDiagramStoreApi } from '../state/useDiagramStore'
 import { MinZoom } from './const'
 import type { XYFlowEdge, XYFlowNode } from './types'
 

package/src/xyflow/SyncWithDiagram.tsx

@@ -2,7 +2,7 @@ import { deepEqual as eq } from 'fast-equals'
 
 import { useEffect } from 'react'
 import { omit } from 'remeda'
-import { useDiagramState, useDiagramStoreApi } from '../state/hooks'
+import { useDiagramState, useDiagramStoreApi } from '../state/useDiagramStore'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
 
 /**

package/src/xyflow/XYFlow.tsx

@@ -3,7 +3,8 @@ import { DEV } from 'esm-env'
 import { deepEqual as eq } from 'fast-equals'
 import { type CSSProperties, type PropsWithChildren, useCallback } from 'react'
 import useTilg from 'tilg'
-import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../state/hooks'
+import type { DiagramState } from '../state/diagramStore'
+import { useDiagramState, useDiagramStoreApi } from '../state/useDiagramStore'
 import { MinZoom } from './const'
 import { RelationshipEdge } from './edges/RelationshipEdge'
 import { useLayoutConstraints } from './hooks/useLayoutConstraints'

package/src/xyflow/XYFlowEvents.tsx

@@ -1,7 +1,7 @@
 import type { ReactFlowProps } from '@xyflow/react'
 import { useMemo, useRef } from 'react'
 import type { Simplify } from 'type-fest'
-import { useDiagramStoreApi } from '../state/hooks'
+import { useDiagramStoreApi } from '../state/useDiagramStore'
 import type { XYFlowEdge, XYFlowNode } from './types'
 
 export type XYFlowEventHandlers = Simplify<

package/src/xyflow/XYFlowInner.tsx

@@ -3,7 +3,7 @@ import { shallowEqual } from 'fast-equals'
 import { memo, type PropsWithChildren } from 'react'
 import { isNonNull } from 'remeda'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
-import { useDiagramState } from '../state/hooks'
+import { useDiagramState } from '../state/useDiagramStore'
 import { BackwardForwardPanel } from '../ui/BackwardForwardPanel'
 import DiagramTitlePanel from '../ui/DiagramTitlePanel'
 import { DynamicViewWalkthrough } from '../ui/DynamicViewWalkthrough'

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -16,10 +16,10 @@ import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { deepEqual, deepEqual as eq } from 'fast-equals'
 import { memo, type PointerEvent as ReactPointerEvent, useRef, useState } from 'react'
 import { first, hasAtLeast, isArray, isTruthy, last } from 'remeda'
-import { useDiagramState, useDiagramStoreApi } from '../../state/hooks'
+import { useDiagramState, useDiagramStoreApi } from '../../state/useDiagramStore'
 import { ZIndexes } from '../const'
 import { EdgeMarkers } from '../EdgeMarkers'
-import { useXYStoreApi } from '../hooks'
+import { useXYStoreApi } from '../hooks/useXYFlow'
 import { type RelationshipData, type XYFlowEdge } from '../types'
 import { bezierControlPoints } from '../utils'
 import * as edgesCss from './edges.css'
@@ -375,7 +375,7 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
             selected: selected ?? false,
             stepNum: data.stepNum,
             label: data.label,
-            zIndex: edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge,
+            zIndex: (edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge) + 1,
             isHovered,
             isActive,
             isStepEdge

package/src/xyflow/edges/edges.css.ts

@@ -53,7 +53,7 @@ globalStyle(`:where(${isSelected}) ${container}[data-edge-hovered='true']`, {
 // })
 
 globalStyle(`.react-flow__edges > svg`, {
-  mixBlendMode: 'screen'
+  mixBlendMode: 'plus-lighter'
 })
 
 // globalStyle(`:where([data-mantine-color-scheme="light"]) .react-flow__edges > svg`, {
@@ -63,7 +63,7 @@ globalStyle(`.react-flow__edges > svg`, {
 export const dimmed = style({})
 
 globalStyle(`.react-flow__edges > svg:has(${dimmed})`, {
-  opacity: 0.8,
+  opacity: 0.6,
   transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
   transitionDelay: '200ms',
   filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
@@ -117,11 +117,11 @@ export const controlPoint = style({
 })
 
 export const controlDragging = style({
-  cursor: 'grabbing'
+  cursor: 'grab'
 })
 
 globalStyle(`${controlDragging} *`, {
-  cursor: 'grabbing'
+  cursor: 'grab'
 })
 
 const strokeKeyframes = keyframes({
@@ -174,7 +174,7 @@ export const edgeLabel = style({
   cursor: 'pointer',
   width: 'fit-content',
   transformOrigin: '50% 50%',
-  mixBlendMode: 'screen',
+  mixBlendMode: 'plus-lighter',
   color: xyvars.edge.labelColor,
   backgroundColor: xyvars.edge.labelBgColor,
   borderRadius: 3,
@@ -188,7 +188,7 @@ export const edgeLabel = style({
       transform: `${varTranslate} scale(1.12)`
     },
     [`&:is(${dimmed})`]: {
-      opacity: 0.6,
+      opacity: 0.3,
       transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
       transitionDelay: '200ms',
       filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,

package/src/xyflow/hooks/useLayoutConstraints.ts

@@ -4,7 +4,7 @@ import type { InternalNode, ReactFlowProps, XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { useMemo, useRef } from 'react'
 import { isNullish } from 'remeda'
-import { useDiagramStoreApi } from '../../state/hooks'
+import { useDiagramStoreApi } from '../../state/useDiagramStore'
 import type { XYFlowInstance, XYFlowNode } from '../types'
 import { isSamePoint } from '../utils'
 import { useXYStoreApi, type XYStoreApi } from './useXYFlow'

package/src/xyflow/nodes/compound/CompoundNode.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
 import { memo } from 'react'
 import { clamp } from 'remeda'
-import { useDiagramState } from '../../../state/hooks'
+import { useDiagramState } from '../../../state/useDiagramStore'
 import type { CompoundXYFlowNode } from '../../types'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
 import * as css from './CompoundNode.css'

package/src/xyflow/nodes/element/ElementLink.tsx

@@ -16,7 +16,8 @@ import { IconLink } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { useId } from 'react'
 import { clamp } from 'remeda'
-import { type DiagramState, useDiagramState } from '../../../state/hooks'
+import { type DiagramState } from '../../../state/diagramStore'
+import { useDiagramState } from '../../../state/useDiagramStore'
 import type { XYFlowNode } from '../../types'
 import { elementLink, trigger } from './ElementLink.css'
 

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -1,19 +1,23 @@
-import { Text } from '@mantine/core'
+import type { DiagramNode } from '@likec4/core/types'
+import { Text as MantineText } from '@mantine/core'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
 import { m, type Variants } from 'framer-motion'
 import { memo } from 'react'
-import { isNumber } from 'remeda'
-import { useDiagramState } from '../../../state/hooks'
+import { isNumber, isTruthy } from 'remeda'
+import { useDiagramState } from '../../../state/useDiagramStore'
 import type { ElementXYFlowNode } from '../../types'
 import { toDomPrecision } from '../../utils'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
 import * as css from './element.css'
-import { ElementIcon } from './ElementIcon'
 import { ElementLink } from './ElementLink'
 import { ElementShapeSvg, SelectedIndicator } from './ElementShapeSvg'
 
+const Text = MantineText.withProps({
+  component: 'div'
+})
+
 type ElementNodeProps = NodeProps<ElementXYFlowNode>
 
 const selectedScale = 1.015
@@ -143,6 +147,22 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
           whileTap: dragging ? animate : 'tap'
         })}
       >
+        {
+          /* <svg
+          className={clsx(
+            css.cssShapeSvgMultiple
+          )}
+          viewBox={`0 0 ${w} ${h}`}
+          width={w}
+          height={h}
+        >
+          <ElementShapeSvg
+            shape={element.shape}
+            w={w}
+            h={h}
+          />
+        </svg> */
+        }
         <svg
           className={clsx(
             css.cssShapeSvg
@@ -164,27 +184,32 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
             h={h}
           />
         </svg>
-        <div className={clsx(css.element, 'likec4-element')}>
-          <ElementIcon node={element} />
-          <Text
-            component="div"
-            className={clsx(css.title, 'likec4-element-title')}>
-            {element.title}
-          </Text>
-          {element.technology && (
-            <Text
-              component="div"
-              className={clsx(css.technology, 'likec4-element-technology')}>
-              {element.technology}
-            </Text>
+        <div
+          className={clsx(
+            css.elementDataContainer,
+            isTruthy(element.icon) && css.hasIcon,
+            'likec4-element'
           )}
-          {element.description && (
+        >
+          {isTruthy(element.icon) && <ElementIcon node={element} />}
+          <div className={clsx(css.elementTextData, 'likec4-element-main-props')}>
             <Text
-              component="div"
-              className={clsx(css.description, 'likec4-element-description')}>
-              {element.description}
+              className={clsx(css.title, 'likec4-element-title')}>
+              {element.title}
             </Text>
-          )}
+            {element.technology && (
+              <Text
+                className={clsx(css.technology, 'likec4-element-technology')}>
+                {element.technology}
+              </Text>
+            )}
+            {element.description && (
+              <Text
+                className={clsx(css.description, 'likec4-element-description')}>
+                {element.description}
+              </Text>
+            )}
+          </div>
         </div>
         {isHovercards && element.links && <ElementLink element={element} />}
         {isNavigable && <NavigateToBtn xynodeId={id} className={css.cssNavigateBtn} />}
@@ -197,3 +222,26 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     </>
   )
 }, isEqualProps)
+
+const ElementIcon = ({ node }: { node: DiagramNode }) => {
+  const RenderIcon = useDiagramState(s => s.renderIcon)
+  if (!node.icon) {
+    return null
+  }
+  if (node.icon.startsWith('http://') || node.icon.startsWith('https://')) {
+    return (
+      <div className={clsx(css.elementIcon, 'likec4-element-icon')}>
+        <img src={node.icon} alt={node.title} />
+      </div>
+    )
+  }
+  const icon = RenderIcon ? <RenderIcon node={node} /> : null
+  if (!icon) {
+    return null
+  }
+  return (
+    <div className={clsx(css.elementIcon, 'likec4-element-icon')}>
+      {icon}
+    </div>
+  )
+}

package/src/xyflow/nodes/element/ElementShapeSvg.tsx

@@ -2,7 +2,7 @@ import { type ElementShape, nonexhaustive } from '@likec4/core'
 import { toDomPrecision } from '../../utils'
 import { fillElementFill, fillMixStroke } from './element.css'
 
-function cylinderSVGPath(diameter: number, height: number, tilt = 0.0725) {
+export function cylinderSVGPath(diameter: number, height: number, tilt = 0.065) {
   const radius = Math.round(diameter / 2)
   // const tiltAdjustedHeight = height * Math.cos((tilt * Math.PI) / 2)
   const rx = radius
@@ -25,7 +25,7 @@ function cylinderSVGPath(diameter: number, height: number, tilt = 0.0725) {
   }
 }
 
-function queueSVGPath(width: number, height: number, tilt = 0.2) {
+function queueSVGPath(width: number, height: number, tilt = 0.185) {
   const diameter = height
   const radius = Math.round(diameter / 2)
   const ry = radius