@likec4/diagram 1.17.1 → 1.19.0

package/src/state/diagramStore.ts

@@ -1,13 +1,13 @@
 import type {
+  ComputedNode,
   DiagramNode,
   DiagramView,
   EdgeId,
-  ElementKind,
   ElementNotation,
   Fqn,
   NodeId,
   ViewChange,
-  ViewID,
+  ViewId,
   XYPoint
 } from '@likec4/core'
 import {
@@ -17,17 +17,16 @@ import {
   isStepEdgeId,
   nonexhaustive,
   nonNullable,
-  StepEdgeId
+  type StepEdgeId
 } from '@likec4/core'
 import {
   applyEdgeChanges,
   applyNodeChanges,
   getViewportForBounds,
-  type InternalNode,
   type OnEdgesChange,
   type OnNodesChange
 } from '@xyflow/react'
-import { boxToRect, getBoundsOfRects, getNodeDimensions, type XYPosition } from '@xyflow/system'
+import { boxToRect, getBoundsOfRects, getNodeDimensions } from '@xyflow/system'
 import { DEV } from 'esm-env'
 import { deepEqual as eq, shallowEqual } from 'fast-equals'
 import type { MouseEvent as ReactMouseEvent } from 'react'
@@ -43,10 +42,9 @@ import type {
   LikeC4DiagramEventHandlers,
   WhereOperator
 } from '../LikeC4Diagram.props'
-import { type Vector, vector } from '../utils/vector'
+import { type Vector, vector, VectorImpl } from '../utils/vector'
 import { MinZoom } from '../xyflow/const'
-import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
-import { createLayoutConstraints } from '../xyflow/useLayoutConstraints'
+import type { DiagramFlowTypes } from '../xyflow/types'
 import { bezierControlPoints, isInside, isSamePoint, toDomPrecision } from '../xyflow/utils'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
 import { align, type AlignmentMode } from './diagramStore.layout'
@@ -80,13 +78,15 @@ export type DiagramInitialState = {
   // If Dynamic View
   enableDynamicViewWalkthrough: boolean
 
-  xyflow: XYFlowInstance
+  xyflow: DiagramFlowTypes.XYFlowInstance
   xystore: XYStoreApi
 
   // Diagram Container, for Mantine Portal
   getContainer: () => HTMLDivElement | null
 } & RequiredOrNull<LikeC4DiagramEventHandlers>
 
+type NodeKind = ComputedNode['kind']
+
 const StringSet = Set<string>
 
 export type DiagramState = Simplify<
@@ -94,8 +94,8 @@ export type DiagramState = Simplify<
     readonly storeDevId: string
 
     // Internal state
-    xynodes: XYFlowNode[]
-    xyedges: XYFlowEdge[]
+    xynodes: DiagramFlowTypes.Node[]
+    xyedges: DiagramFlowTypes.Edge[]
     viewSyncDebounceTimeout: number | null
     viewportChanged: boolean
 
@@ -125,19 +125,18 @@ export type DiagramState = Simplify<
     lastClickedNodeId: string | null
     lastClickedEdgeId: string | null
     focusedNodeId: string | null
-    hoveredNodeId: string | null
     hoveredEdgeId: string | null
 
     // id's of nodes / edges that
     dimmed: ReadonlySet<string>
 
     lastOnNavigate: null | {
-      fromView: ViewID
-      toView: ViewID
+      fromView: ViewId
+      toView: ViewId
       fromNode: NodeId | null
     }
     navigationHistory: Array<{
-      viewId: ViewID
+      viewId: ViewId
       nodeId: NodeId | null
     }>
     navigationHistoryIndex: number
@@ -151,7 +150,6 @@ export type DiagramState = Simplify<
      */
     focusOnNode: (nodeId: string | false) => void
 
-    setHoveredNode: (nodeId: string | null) => void
     setHoveredEdge: (edgeId: string | null) => void
 
     setLastClickedNode: (nodeId: string | null) => void
@@ -176,20 +174,22 @@ export type DiagramState = Simplify<
     goForward: () => void
 
     nextDynamicStep: (increment?: number) => void
-    activateWalkthrough: (step: EdgeId | XYFlowEdge) => void
+    activateWalkthrough: (step: EdgeId | DiagramFlowTypes.Edge) => void
     stopWalkthrough: () => void
 
     openOverlay: (overlay: NonNullable<DiagramState['activeOverlay']>) => void
     closeOverlay: () => void
 
-    onInit: (xyflow: XYFlowInstance) => void
-    onNodesChange: OnNodesChange<XYFlowNode>
-    onEdgesChange: OnEdgesChange<XYFlowEdge>
+    onInit: (xyflow: DiagramFlowTypes.XYFlowInstance) => void
+    onNodesChange: OnNodesChange<DiagramFlowTypes.Node>
+    onEdgesChange: OnEdgesChange<DiagramFlowTypes.Edge>
 
-    highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void
+    highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => void
 
     resetEdgeControlPoints: () => void
     align: (mode: AlignmentMode) => void
+
+    onOpenSourceView: () => void
   }
 >
 
@@ -207,7 +207,6 @@ const DEFAULT_PROPS: Except<
   activeOverlay: null,
   activeWalkthrough: null,
   focusedNodeId: null,
-  hoveredNodeId: null,
   hoveredEdgeId: null,
   lastClickedNodeId: null,
   lastClickedEdgeId: null,
@@ -283,7 +282,6 @@ export function createDiagramStore(props: DiagramInitialState) {
               nodesDraggable,
               nodesSelectable,
               hoveredEdgeId,
-              hoveredNodeId,
               xyedges,
               xynodes
             } = get()
@@ -302,9 +300,6 @@ export function createDiagramStore(props: DiagramInitialState) {
               if (lastClickedNodeId && !nodeIds.has(lastClickedNodeId)) {
                 lastClickedNodeId = null
               }
-              if (hoveredNodeId && !nodeIds.has(hoveredNodeId)) {
-                hoveredNodeId = null
-              }
               if (focusedNodeId && !nodeIds.has(focusedNodeId)) {
                 focusedNodeId = null
                 dimmed = EmptyStringSet
@@ -383,7 +378,6 @@ export function createDiagramStore(props: DiagramInitialState) {
               lastClickedEdgeId = null
               lastClickedNodeId = null
               hoveredEdgeId = null
-              hoveredNodeId = null
               focusedNodeId = null
               activeWalkthrough = null
               activeOverlay = null
@@ -415,14 +409,14 @@ export function createDiagramStore(props: DiagramInitialState) {
                 return {
                   ...existing,
                   ...update
-                } as XYFlowNode
+                } as DiagramFlowTypes.Node
               }
               return update
             })
             // Merge with existing edges, but only if the view is the same
             // and the edges have no layout drift
             if (isSameView && !nextView.hasLayoutDrift) {
-              update.xyedges = update.xyedges.map((update): XYFlowEdge => {
+              update.xyedges = update.xyedges.map((update): DiagramFlowTypes.Edge => {
                 const existing = xyedges.find(n => n.id === update.id)
                 if (existing) {
                   if (
@@ -458,7 +452,6 @@ export function createDiagramStore(props: DiagramInitialState) {
                 lastClickedEdgeId,
                 focusedNodeId,
                 hoveredEdgeId,
-                hoveredNodeId,
                 navigationHistory,
                 navigationHistoryIndex,
                 dimmed,
@@ -516,12 +509,6 @@ export function createDiagramStore(props: DiagramInitialState) {
             }
           },
 
-          setHoveredNode: (nodeId) => {
-            if (nodeId !== get().hoveredNodeId) {
-              set({ hoveredNodeId: nodeId })
-            }
-          },
-
           setHoveredEdge: (edgeId) => {
             if (edgeId !== get().hoveredEdgeId) {
               set({ hoveredEdgeId: edgeId })
@@ -850,10 +837,25 @@ export function createDiagramStore(props: DiagramInitialState) {
             }
           },
 
+          onOpenSourceView: () => {
+            const { view, onOpenSource } = get()
+            onOpenSource?.({
+              view: view.id
+            })
+          },
+
           openOverlay: (overlay) => {
             if (eq(overlay, get().activeOverlay)) {
               return
             }
+            if ('elementDetails' in overlay) {
+              const diagramNode = get().view.nodes.find(({ id }) => id === overlay.elementDetails)
+              if (!diagramNode || !diagramNode.modelRef) {
+                get().closeOverlay()
+                return
+              }
+            }
+
             set(
               {
                 activeWalkthrough: null,
@@ -902,7 +904,7 @@ export function createDiagramStore(props: DiagramInitialState) {
             }
           },
 
-          activateWalkthrough: (step: EdgeId | XYFlowEdge) => {
+          activateWalkthrough: (step: EdgeId | DiagramFlowTypes.Edge) => {
             const stepId = typeof step === 'string' ? step : step.data.edge.id
             invariant(isStepEdgeId(stepId), `stepId ${stepId} is not a step edge id`)
             let {
@@ -932,7 +934,7 @@ export function createDiagramStore(props: DiagramInitialState) {
                 )
                 .map(({ id }) => id)
             )
-            const selected = [] as XYFlowNode[]
+            const selected = [] as DiagramFlowTypes.Node[]
             for (const n of xyflow.getNodes()) {
               if (n.id === edge.source || n.id === edge.target) {
                 selected.push(n)
@@ -992,7 +994,7 @@ export function createDiagramStore(props: DiagramInitialState) {
             }
           },
 
-          highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => {
+          highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => {
             const { xynodes, xyedges } = get()
             const dimmed = new StringSet(map(xyedges, prop('id')))
             xynodes.forEach(({ id, data }) => {
@@ -1018,7 +1020,7 @@ export function createDiagramStore(props: DiagramInitialState) {
 
             scheduleSaveManualLayout()
 
-            function getNodeCenter(node: XYFlowNode, nodes: XYFlowNode[]) {
+            function getNodeCenter(node: DiagramFlowTypes.Node, nodes: DiagramFlowTypes.Node[]) {
               const dimensions = vector({ x: node.width || 0, y: node.height || 0 })
               let position = vector(node.position)
                 .add(dimensions.mul(0.5))
@@ -1038,7 +1040,7 @@ export function createDiagramStore(props: DiagramInitialState) {
               return position
             }
 
-            function getControlPointForEdge(edge: XYFlowEdge): XYPoint[] {
+            function getControlPointForEdge(edge: DiagramFlowTypes.Edge): XYPoint[] {
               const source = xynodes.find(x => x.id == edge.source)
               const target = xynodes.find(x => x.id == edge.target)
               if (!source || !target) {
@@ -1048,18 +1050,31 @@ export function createDiagramStore(props: DiagramInitialState) {
               const sourceCenter = getNodeCenter(source, xynodes)
               const targetCenter = getNodeCenter(target, xynodes)
 
-              if (sourceCenter && targetCenter) {
-                const sourceToTargetVector = targetCenter.sub(sourceCenter)
-                const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector)
-                const targetBorderPoint = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.mul(-1))
+              if (!sourceCenter || !targetCenter) {
+                return []
+              }
+
+              // Edge is a loop
+              if(source == target) {
+                const loopSize = 80                
+                const centerOfTopBoundary = new VectorImpl(0, source.height || 0)
+                  .mul(-0.5)
+                  .add(sourceCenter)
 
-                return [sourceBorderPoint.add(targetBorderPoint.sub(sourceBorderPoint).mul(0.3))]
+                return [
+                  centerOfTopBoundary.add(new VectorImpl(-loopSize / 2.5, -loopSize)),
+                  centerOfTopBoundary.add(new VectorImpl(loopSize / 2.5, -loopSize))
+                ]
               }
 
-              return []
+              const sourceToTargetVector = targetCenter.sub(sourceCenter)
+              const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector)
+              const targetBorderPoint = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.mul(-1))
+
+              return [sourceBorderPoint.add(targetBorderPoint.sub(sourceBorderPoint).mul(0.3))]
             }
 
-            function getBorderPointOnVector(node: XYFlowNode, nodeCenter: Vector, v: Vector) {
+            function getBorderPointOnVector(node: DiagramFlowTypes.Node, nodeCenter: Vector, v: Vector) {
               const xScale = (node.width || 0) / 2 / v.x
               const yScale = (node.height || 0) / 2 / v.y
 

package/src/theme-vars.css.ts

@@ -0,0 +1,81 @@
+import { createGlobalThemeContract } from '@vanilla-extract/css'
+
+export const vars = createGlobalThemeContract({
+  safariAnimationHook: 'safari-animation-hook',
+  default: {
+    font: 'default-font-family',
+  },
+  likec4: {
+    font: 'font-family',
+    background: {
+      color: 'background-color',
+      pattern: {
+        color: 'background-pattern-color',
+      },
+    },
+  },
+  compound: {
+    font: 'compound-font-family',
+    titleColor: 'compound-title-color',
+  },
+  element: {
+    font: 'element-font-family',
+    fill: 'element-fill',
+    stroke: 'element-stroke',
+    hiContrast: 'element-hiContrast',
+    loContrast: 'element-loContrast',
+  },
+  relation: {
+    lineColor: 'relation-lineColor',
+    labelColor: 'relation-labelColor',
+    labelBgColor: 'relation-labelBg',
+  },
+  optionsPanel: {
+    top: 'options-webview-top',
+    right: 'options-webview-right',
+  },
+  navigationPanel: {
+    top: 'navigation-webview-top',
+    left: 'navigation-webview-left',
+  },
+}, (value) => `likec4-${value}`)
+
+export const xyvars = createGlobalThemeContract({
+  background: {
+    color: 'background-color',
+    pattern: {
+      color: 'background-pattern-color',
+      // dots: 'background-pattern-dots-color',
+      // lines: 'background-pattern-lines-color',
+      // cross: 'background-pattern-cross-color'
+    },
+  },
+  edge: {
+    stroke: 'edge-stroke',
+    strokeSelected: 'edge-stroke-selected',
+    labelColor: 'edge-label-color',
+    labelBgColor: 'edge-label-background-color',
+    strokeWidth: 'edge-stroke-width',
+  },
+  node: {
+    color: 'node-color',
+    border: 'node-border',
+    backgroundColor: 'node-background-color',
+    groupBackgroundColor: 'node-group-background-color',
+    boxshadowHover: 'node-boxshadow-hover',
+    boxshadowSelected: 'node-boxshadow-selected',
+    borderRadius: 'node-border-radius',
+  },
+}, (value) => `xy-${value}`)
+
+export const whereLight = ':where([data-mantine-color-scheme="light"])'
+export const whereDark = ':where([data-mantine-color-scheme="dark"])'
+
+export const easings = {
+  out: 'cubic-bezier(0, 0, 0.40, 1)',
+  inOut: 'cubic-bezier(0.50, 0, 0.2, 1)',
+}
+
+export const transitions = {
+  fast: `all 130ms ${easings.inOut}`,
+}

package/src/theme-vars.ts

@@ -1,85 +1,12 @@
 import { themeToVars } from '@mantine/vanilla-extract'
-import { createGlobalThemeContract } from '@vanilla-extract/css'
 
-export const vars = createGlobalThemeContract({
-  safariAnimationHook: 'safari-animation-hook',
-  default: {
-    font: 'default-font-family'
-  },
-  likec4: {
-    font: 'font-family',
-    background: {
-      color: 'background-color',
-      pattern: {
-        color: 'background-pattern-color'
-      }
-    }
-  },
-  compound: {
-    font: 'compound-font-family',
-    titleColor: 'compound-title-color'
-  },
-  element: {
-    font: 'element-font-family',
-    fill: 'element-fill',
-    stroke: 'element-stroke',
-    hiContrast: 'element-hiContrast',
-    loContrast: 'element-loContrast'
-  },
-  relation: {
-    lineColor: 'relation-lineColor',
-    labelColor: 'relation-labelColor',
-    labelBgColor: 'relation-labelBg'
-  },
-  optionsPanel: {
-    top: 'options-webview-top',
-    right: 'options-webview-right'
-  },
-  navigationPanel: {
-    top: 'navigation-webview-top',
-    left: 'navigation-webview-left'
-  }
-}, (value) => `likec4-${value}`)
+export {
+  easings,
+  transitions,
+  vars,
+  whereDark,
+  whereLight,
+  xyvars,
+} from './theme-vars.css'
 
-export const xyvars = createGlobalThemeContract({
-  background: {
-    color: 'background-color',
-    pattern: {
-      color: 'background-pattern-color'
-      // dots: 'background-pattern-dots-color',
-      // lines: 'background-pattern-lines-color',
-      // cross: 'background-pattern-cross-color'
-    }
-  },
-  edge: {
-    stroke: 'edge-stroke',
-    strokeSelected: 'edge-stroke-selected',
-    labelColor: 'edge-label-color',
-    labelBgColor: 'edge-label-background-color',
-    strokeWidth: 'edge-stroke-width'
-  },
-  node: {
-    color: 'node-color',
-    border: 'node-border',
-    backgroundColor: 'node-background-color',
-    groupBackgroundColor: 'node-group-background-color',
-    boxshadowHover: 'node-boxshadow-hover',
-    boxshadowSelected: 'node-boxshadow-selected',
-    borderRadius: 'node-border-radius'
-  }
-}, (value) => `xy-${value}`)
-
-export const whereLight = ':where([data-mantine-color-scheme="light"])'
-export const whereDark = ':where([data-mantine-color-scheme="dark"])'
-
-export const easings = {
-  out: 'cubic-bezier(0, 0, 0.40, 1)',
-  inOut: 'cubic-bezier(0.50, 0, 0.2, 1)'
-}
-
-export const transitions = {
-  fast: `all 130ms ${easings.inOut}`
-}
-
-// we need only variables names
 export const mantine = themeToVars({})

package/src/ui/DiagramTitlePanel.tsx

@@ -5,19 +5,20 @@ import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
 import { type DiagramState, useDiagramState } from '../hooks'
 import * as css from './DiagramTitlePanel.css'
+import { Link } from './Link'
 
 const selector = (s: DiagramState) => ({
   id: s.view.id,
   title: s.view.title ?? 'untitled',
   description: s.view.description,
-  links: s.view.links
+  links: s.view.links,
 })
 
 export default function DiagramTitlePanel() {
   const { id, title, description, links } = useDiagramState(selector)
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: 'diagram-title-webview-collapsed',
-    defaultValue: false
+    defaultValue: false,
   })
   const toggle = () => setCollapsed(v => !v)
 
@@ -45,11 +46,11 @@ export default function DiagramTitlePanel() {
         animate={{ opacity: 1, scale: 1 }}
         exit={{
           opacity: 0.05,
-          scale: 0.6
+          scale: 0.6,
         }}
         className={clsx('react-flow__panel', css.container)}
         style={{
-          transformOrigin: 'left center'
+          transformOrigin: 'left center',
         }}
       >
         <Card
@@ -115,7 +116,7 @@ export default function DiagramTitlePanel() {
                   fw={500}
                   c={'dimmed'}
                   style={{
-                    userSelect: 'all'
+                    userSelect: 'all',
                   }}>
                   <span style={{ userSelect: 'none' }}>id:{' '}</span>
                   {id}
@@ -151,35 +152,7 @@ export default function DiagramTitlePanel() {
                   gap={3}
                   justify="stretch"
                   align="stretch">
-                  {links.map((link) => (
-                    <Group key={link.url} wrap="nowrap" align="center" gap={'sm'}>
-                      <Box flex={'1'} style={{ overflow: 'hidden' }}>
-                        <Anchor
-                          href={link.url}
-                          target="_blank"
-                          fz="xs"
-                          truncate="end"
-                          display={'inline-block'}
-                          w={'100%'}>
-                          {link.title || link.url}
-                        </Anchor>
-                      </Box>
-                      <CopyButton value={link.url}>
-                        {({ copied, copy }) => (
-                          <Button
-                            size="compact-xs"
-                            fz={'10'}
-                            variant="light"
-                            onClick={copy}
-                            color={copied
-                              ? 'teal'
-                              : 'gray'}>
-                            {copied ? 'copied' : 'copy'}
-                          </Button>
-                        )}
-                      </CopyButton>
-                    </Group>
-                  ))}
+                  {links.map((link) => <Link link={link} key={link.url} />)}
                 </Stack>
               )}
             </>

package/src/ui/Link.tsx

@@ -0,0 +1,40 @@
+import type { Link } from '@likec4/core'
+import { Anchor, Box, Button, CopyButton, Group } from '@mantine/core'
+
+export function Link({ link }: { link: Link }) {
+  return (
+    <>
+      <Group key={link.url} wrap="nowrap" align="center" gap={'sm'}>
+        <Box flex={'1'} style={{ overflow: 'hidden' }}>
+          <Anchor
+            href={link.url}
+            target="_blank"
+            fz="xs"
+            truncate="end"
+            display={'inline-block'}
+            w={'100%'}
+            onClick={(e) => e.stopPropagation()}>
+            {link.title || link.url}
+          </Anchor>
+        </Box>
+        <CopyButton value={link.url}>
+          {({ copied, copy }) => (
+            <Button
+              size="compact-xs"
+              fz={'10'}
+              variant="light"
+              onClick={(e) => {
+                e.stopPropagation()
+                copy()
+              }}
+              color={copied
+                ? 'teal'
+                : 'gray'}>
+              {copied ? 'copied' : 'copy'}
+            </Button>
+          )}
+        </CopyButton>
+      </Group>
+    </>
+  )
+}

package/src/ui/notation/NotationPanel.tsx

@@ -1,4 +1,4 @@
-import { type ElementKind, type ElementNotation as ElementNotationData } from '@likec4/core'
+import { type ComputedNode, type ElementNotation as ElementNotationData } from '@likec4/core'
 import {
   ActionIcon,
   Badge,
@@ -29,13 +29,15 @@ import { vars } from '../../theme-vars'
 import { ElementShapeSvg } from '../../xyflow/nodes/element/ElementShapeSvg'
 import * as css from './NotationPanel.css'
 
+type NodeKind = ComputedNode['kind']
+
 const ElementNotation = ({ value }: { value: ElementNotationData }) => {
   const {
     title,
     color = 'primary',
     shape = 'rectangle'
   } = value
-  const [onlyKind, setOnlyKind] = useState<ElementKind | null>(null)
+  const [onlyKind, setOnlyKind] = useState<NodeKind | null>(null)
   const diagramStore = useDiagramStoreApi()
   const w = 300
   const h = 200

package/src/ui/top-left/ChangeAutoLayoutButton.tsx

@@ -137,7 +137,7 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
 }
 
 const MAX_SPACING = 400
-const SpacingSliders = forwardRef<HTMLDivElement, {
+const SpacingSliders = forwardRef<HTMLDivElement | null, {
   isVertical: boolean
   nodeSep: number | undefined
   rankSep: number | undefined
@@ -160,7 +160,7 @@ const SpacingSliders = forwardRef<HTMLDivElement, {
       onChange(Math.round(x * MAX_SPACING), Math.round(y * MAX_SPACING))
     },
     [onChange, isVertical],
-    150,
+    250,
     2000
   )