@likec4/diagram 1.13.0 → 1.15.0

package/src/overlays/edge-details/xyflow/styles.css.ts

@@ -0,0 +1,196 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { mantine, vars, whereLight, xyvars } from '../../../theme-vars'
+
+export const elementNode = style({
+  width: '100%',
+  height: '100%'
+})
+
+export const elementNodeContent = style({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  overflow: 'hidden',
+  gap: 6,
+  padding: 16
+})
+
+export const elementNodeTitle = style({
+  flex: '0 0 auto',
+  width: 'fit-content',
+  textAlign: 'center',
+  fontFamily: vars.element.font,
+  fontOpticalSizing: 'auto',
+  fontStyle: 'normal',
+  fontWeight: 500,
+  fontSize: 17,
+  lineHeight: 1.25,
+  textWrap: 'balance',
+  color: vars.element.hiContrast
+})
+
+export const elementNodeDescription = style({
+  flex: '0 0 auto',
+  width: 'fit-content',
+  textAlign: 'center',
+  fontFamily: vars.element.font,
+  fontOpticalSizing: 'auto',
+  fontStyle: 'normal',
+  fontSize: mantine.fontSizes.xs,
+  lineHeight: 1.25,
+  textWrap: 'balance',
+  color: vars.element.loContrast
+})
+
+export const compoundNodeBody = style({
+  width: '100%',
+  height: '100%',
+  boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
+  background: `color-mix(in srgb , ${vars.element.fill},  transparent 10%)`,
+  borderRadius: 4
+})
+
+export const compoundNodeTitle = style({
+  fontFamily: vars.compound.font,
+  fontOpticalSizing: 'auto',
+  fontStyle: 'normal',
+  fontWeight: 600,
+  fontSize: 14,
+  lineHeight: 1,
+  textTransform: 'uppercase',
+  paddingTop: 12,
+  paddingLeft: 10,
+  mixBlendMode: 'screen',
+  color: vars.compound.titleColor
+})
+
+export const cssShapeSvg = style({
+  top: 0,
+  left: 0,
+  position: 'absolute',
+  pointerEvents: 'none',
+  fill: vars.element.fill,
+  stroke: vars.element.stroke,
+  overflow: 'visible',
+  filter: `
+      drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
+      drop-shadow(0 1px 1px color-mix(in srgb, ${vars.element.stroke} 40%, transparent))
+      drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))
+    `,
+  zIndex: -1
+})
+
+const DimmedTransitionDelay = '400ms'
+
+export const edgePath = style({
+  opacity: 1,
+  transition: 'all 0.2s ease-in-out',
+
+  selectors: {
+    [`&[data-edge-dimmed='true']`]: {
+      opacity: 0.1,
+      transitionDelay: DimmedTransitionDelay
+    }
+  }
+})
+
+export const edgeLabel = style({
+  padding: '2px 5px',
+  fontFamily: vars.likec4.font,
+  position: 'absolute',
+  cursor: 'pointer',
+  width: 'fit-content',
+  color: xyvars.edge.labelColor,
+  backgroundColor: xyvars.edge.labelBgColor,
+  borderRadius: 4,
+  // everything inside EdgeLabelRenderer has no pointer events by default
+  // if you have an interactive element, set pointer-events: all
+  pointerEvents: 'all',
+  textWrap: 'pretty',
+  whiteSpace: 'preserve-breaks',
+  opacity: 1,
+  transition: 'all 0.2s ease-in-out',
+  selectors: {
+    [`&[data-edge-dimmed='true']`]: {
+      opacity: 0.1,
+      transitionDelay: DimmedTransitionDelay
+    }
+  }
+})
+
+export const edgeLabelText = style({
+  textAlign: 'center',
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: mantine.fontSizes.md,
+  lineHeight: mantine.lineHeights.xs
+})
+
+export const edgeLabelTechnology = style({
+  textAlign: 'center',
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: mantine.fontSizes.sm,
+  lineHeight: 1
+})
+
+export const navigateBtnBox = style({
+  zIndex: 100,
+  position: 'absolute',
+  left: '50%',
+  bottom: 2,
+  transform: 'translate(-50%, 0%)',
+  gap: 0,
+  transition: 'all 190ms cubic-bezier(0.5, 0, 0.4, 1)',
+  selectors: {
+    [`:where([data-likec4-shape='browser'],[data-likec4-shape='mobile']) &`]: {
+      bottom: 6
+    }
+  }
+})
+globalStyle(`:where(${elementNode}:hover) ${navigateBtnBox}`, {
+  transitionDelay: '20ms',
+  gap: 8,
+  transform: 'translate(-50%, 5px)'
+})
+
+export const navigateBtn = style({
+  opacity: 0.7,
+  pointerEvents: 'all',
+  cursor: 'pointer',
+  transform: 'scale(0.9)',
+  transition: 'all 190ms cubic-bezier(0.5, 0, 0.4, 1)',
+  'vars': {
+    '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+    '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
+    '--ai-hover': `color-mix(in srgb , ${vars.element.fill} 50%, ${vars.element.stroke})`
+  },
+  ':hover': {
+    transitionDelay: '0ms',
+    transform: 'scale(1.25)',
+    boxShadow: mantine.shadows.lg
+  },
+  ':active': {
+    transform: 'scale(0.975)'
+  }
+})
+
+globalStyle(`:where(${elementNode}:hover) ${navigateBtn}`, {
+  transitionDelay: '40ms',
+  transitionTimingFunction: 'cubic-bezier(0, 0, 0.40, 1)',
+  opacity: 1,
+  transform: 'scale(1.07)',
+  boxShadow: mantine.shadows.md,
+  vars: {
+    '--ai-bg': `var(--ai-bg-hover)`
+  }
+})
+// globalStyle(`${elementNode}:hover ${navigateBtn}`, {
+//   opacity: 1,
+//   transform: 'scale(1.05)',
+//   boxShadow: mantine.shadows.md,
+//   vars: {
+//     '--ai-bg': `var(--ai-bg-hover)`
+//   }
+// })

package/src/overlays/index.tsx

@@ -1,33 +1 @@
-import { memo } from 'react'
-import { useDiagramState } from '../hooks/useDiagramState'
-import { EdgeDetailsOverlay } from './edge-details/EdgeDetailsOverlay'
-import { RelationshipsOfOverlay } from './relationships-of/RelationshipsOverlay'
-
-export const Overlays = memo(() => {
-  const {
-    hasLikeC4Model,
-    activeOverlay
-  } = useDiagramState(s => ({
-    hasLikeC4Model: s.hasLikeC4Model,
-    activeOverlay: s.activeOverlay
-  }))
-
-  if (!activeOverlay) {
-    return null
-  }
-
-  if (!hasLikeC4Model) {
-    console.warn('LikeC4Model is not available, but overlays are active')
-    return null
-  }
-
-  if (activeOverlay.relationshipsOf) {
-    return <RelationshipsOfOverlay />
-  }
-
-  if (activeOverlay.edgeDetails) {
-    return <EdgeDetailsOverlay edgeId={activeOverlay.edgeDetails} />
-  }
-
-  return null
-})
+export { Overlays } from './Overlays'

package/src/overlays/relationships-of/RelationshipsXYFlow.tsx

@@ -1,16 +1,23 @@
-import { isAncestor, type Relation } from '@likec4/core'
+import { type Fqn, isAncestor, type Relation } from '@likec4/core'
 import { Box, Button, Group, SegmentedControl, Space, Text } from '@mantine/core'
 import { useLocalStorage, useStateHistory } from '@mantine/hooks'
-import { useDebouncedEffect } from '@react-hookz/web'
+import { useDebouncedCallback, useSyncedRef } from '@react-hookz/web'
 import { IconArrowLeft, IconArrowRight } from '@tabler/icons-react'
-import { Panel, ReactFlow, type ReactFlowInstance, useReactFlow, useStoreApi } from '@xyflow/react'
+import {
+  getViewportForBounds,
+  Panel,
+  ReactFlow,
+  type ReactFlowInstance,
+  useReactFlow,
+  useStoreApi
+} from '@xyflow/react'
+import { getNodeDimensions } from '@xyflow/system'
 import { memo, useEffect, useRef } from 'react'
 import { map, only, prop, unique } from 'remeda'
-import { useOverlayDialog } from '../../components'
 import { useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { useOverlayDialog } from '../OverlayContext'
 import type { XYFlowTypes } from './_types'
 import { SelectElement } from './SelectElement'
-import * as css from './styles.css'
 import { useLayoutedRelationships, ZIndexes } from './use-layouted-relationships'
 import { CompoundNode } from './xyflow/CompoundNode'
 import { ElementNode } from './xyflow/ElementNode'
@@ -26,6 +33,9 @@ const edgeTypes = {
   relation: RelationshipEdge
 }
 
+const findSubjectNode = (nodes: XYFlowTypes.Node[]) =>
+  nodes.find((n): n is XYFlowTypes.ElementNode => n.type === 'element' && n.data.column === 'subject')
+
 const resetDimmedAndHovered = (xyflow: ReactFlowInstance<XYFlowTypes.Node, XYFlowTypes.Edge>) => {
   xyflow.setEdges(edges =>
     edges.map(edge => ({
@@ -70,7 +80,7 @@ const onlyOneUnique = <T extends keyof Relation>(
   return only(unique(map(data.relations, prop(property))))
 }
 
-export const RelationshipsXYFlow = memo(function RelationshipsXYFlow() {
+export const RelationshipsXYFlow = memo<{ subjectId: Fqn }>(function RelationshipsXYFlow({ subjectId }) {
   const diagramStore = useDiagramStoreApi()
   const lastClickedNodeRef = useRef<XYFlowTypes.NonEmptyNode | null>(null)
   const [_scope, setScope] = useLocalStorage<'global' | 'view'>({
@@ -83,15 +93,16 @@ export const RelationshipsXYFlow = memo(function RelationshipsXYFlow() {
     viewIncludesSubject,
     edges,
     nodes,
-    subject
-  } = useLayoutedRelationships(_scope)
+    subject,
+    bounds
+  } = useLayoutedRelationships(subjectId, _scope)
   const scope = viewIncludesSubject ? _scope : 'global'
   const showSubjectWarning = !viewIncludesSubject && _scope === 'view'
 
   const [historySubjectId, historyOps, { history, current }] = useStateHistory(subject.id)
 
   const xyflow = useReactFlow<XYFlowTypes.Node, XYFlowTypes.Edge>()
-  const xystore = useStoreApi()
+  const xystore = useStoreApi<XYFlowTypes.Node, XYFlowTypes.Edge>()
   const overlay = useOverlayDialog()
 
   useEffect(() => {
@@ -108,66 +119,119 @@ export const RelationshipsXYFlow = memo(function RelationshipsXYFlow() {
     }
   }, [historySubjectId])
 
+  const fitview = useDebouncedCallback(
+    () => {
+      xyflow.fitView({
+        padding: 0.2,
+        includeHiddenNodes: true,
+        maxZoom: 1,
+        duration: 500
+      })
+    },
+    [xyflow],
+    150
+  )
+
   useEffect(() => {
-    const nextSubjectNode = nodes.find((n): n is XYFlowTypes.NonEmptyNode =>
-      n.type !== 'empty' && n.data.column === 'subject'
-    )
+    const {
+      nodes: _nodes,
+      edges: _edges,
+      setNodes,
+      setEdges,
+      width,
+      height
+    } = xystore.getState()
+
+    const nextSubjectNode = findSubjectNode(nodes)
+    const currentSubjectNode = findSubjectNode(_nodes)
+
+    // If subject node is the same, don't animate
+    if (nextSubjectNode?.data.fqn === currentSubjectNode?.data.fqn) {
+      setNodes(nodes)
+      setEdges(edges)
+      return
+    }
+
     if (!nextSubjectNode) {
       console.error('Subject node not found')
     } else if (nextSubjectNode.data.fqn !== subject.id) {
       console.error(`Subject node mismatch, expected: ${subject.id} got: ${nextSubjectNode.data.fqn}`)
     }
+
+    const nextzoom = getViewportForBounds(bounds, width, height, 0.2, 1, 0.2).zoom
+
+    const nextSubjectCenter = nextSubjectNode && {
+      x: nextSubjectNode.position.x + (nextSubjectNode.width ?? 0) / 2,
+      y: nextSubjectNode.position.y + (nextSubjectNode.height ?? 0) / 2
+    }
+
     const existingNode = lastClickedNodeRef.current
       ?? xyflow.getNodes().find(n => n.type !== 'empty' && n.data.column !== 'subject' && n.data.fqn === subject.id)
     lastClickedNodeRef.current = null
-    // Correct position if we have subject in existing nodes
-    if (nextSubjectNode && existingNode && existingNode.data.column !== 'subject') {
-      const xynodeFrom = xyflow.getInternalNode(existingNode.id)!
-      const fromPos = xyflow.flowToScreenPosition({
-          x: xynodeFrom.internals.positionAbsolute.x,
-          y: xynodeFrom.internals.positionAbsolute.y
-        }),
-        toPos = xyflow.flowToScreenPosition({
-          x: nextSubjectNode.position.x,
-          y: nextSubjectNode.position.y
-        }),
-        diff = {
-          x: fromPos.x - toPos.x,
-          y: fromPos.y - toPos.y
+    // Animate from existing node to next subject node
+    if (nextSubjectCenter && existingNode) {
+      // Dim all nodes except the existing node
+      setNodes(_nodes.map(n => {
+        return {
+          ...n,
+          data: {
+            ...n.data,
+            dimmed: n.id !== existingNode.id ? 'immediate' : false
+          }
+        } as XYFlowTypes.Node
+      }))
+      setEdges(_edges.map(e => ({
+        ...e,
+        data: {
+          ...e.data,
+          dimmed: true
         }
-      xystore.getState().panBy(diff)
-      xystore.getState().setNodes(nodes)
-      xystore.getState().setEdges(edges)
-      return
-    }
-    xyflow.setNodes(nodes)
-    xyflow.setEdges(edges)
-  }, [nodes, edges])
+      })))
 
-  const zoomable = true
+      // Move to center of existing node
+      const existingInternalNode = xyflow.getInternalNode(existingNode.id)!
+      const existingDimensions = getNodeDimensions(existingInternalNode)
+      const existingCenter = {
+        x: existingInternalNode.internals.positionAbsolute.x + existingDimensions.width / 2,
+        y: existingInternalNode.internals.positionAbsolute.y + existingDimensions.height / 2
+      }
 
-  useDebouncedEffect(
-    () => {
-      xyflow.fitView({
-        padding: 0.2,
-        includeHiddenNodes: true,
-        maxZoom: 1,
-        duration: 450
+      // Pick the smaller zoom level
+      const zoom = Math.min(
+        xyflow.getViewport().zoom,
+        nextzoom,
+        nextSubjectNode.width! / existingDimensions.width,
+        nextSubjectNode.height! / existingDimensions.height
+      )
+
+      let isCancelled = false
+
+      xyflow.setCenter(existingCenter.x, existingCenter.y, { zoom, duration: 350 }).then(() => {
+        // If the component is unmounted, we don't want to update the state
+        if (isCancelled) return
+        setNodes(nodes)
+        setEdges(edges)
+        xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom: nextzoom })
+        fitview()
       })
-    },
-    [subject.id, scope],
-    200
-  )
+      return () => {
+        isCancelled = true
+      }
+    }
+    setNodes(nodes)
+    setEdges(edges)
+    fitview()
+    return undefined
+  }, [nodes, edges])
 
   return (
     <ReactFlow
-      className={css.root}
       defaultEdges={[] as XYFlowTypes.Edge[]}
       defaultNodes={[] as XYFlowTypes.Node[]}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       defaultMarkerColor="var(--xy-edge-stroke)"
-      zoomOnPinch={zoomable}
+      zoomOnPinch={true}
       zoomOnScroll={false}
       zoomOnDoubleClick={false}
       maxZoom={1.5}
@@ -224,30 +288,27 @@ export const RelationshipsXYFlow = memo(function RelationshipsXYFlow() {
       onNodeClick={(e, node) => {
         e.stopPropagation()
         if (node.type === 'empty') return
-        if (subject.id !== node.data.fqn) {
-          lastClickedNodeRef.current = node
-        }
+        lastClickedNodeRef.current = node
         overlay.openOverlay({
           relationshipsOf: node.data.fqn
         })
       }}
+      onNodeDoubleClick={(e) => {
+        e.stopPropagation()
+      }}
       onDoubleClick={e => {
         e.stopPropagation()
-        xyflow.fitView({
-          includeHiddenNodes: true,
-          maxZoom: 1,
-          duration: 450
-        })
+        fitview()
       }}
       onEdgeClick={(e, edge) => {
         e.stopPropagation()
-        if (edge.data.relations.length <= 1) {
-          const relationId = only(edge.data.relations)?.id
-          if (relationId) {
-            diagramStore.getState().onOpenSourceRelation?.(relationId)
-          }
+        // One relation in edge
+        const relationId = only(edge.data.relations)?.id
+        if (relationId) {
+          diagramStore.getState().onOpenSourceRelation?.(relationId)
           return
         }
+
         const nodeId = onlyOneUnique(edge.data, 'source') ? edge.source : edge.target
         const next = xyflow.getNode(nodeId)
         if (next && next.type !== 'empty') {
@@ -285,7 +346,7 @@ export const RelationshipsXYFlow = memo(function RelationshipsXYFlow() {
           </Button>
           <Space w={2} />
           <Group gap={'xs'} pos={'relative'} wrap="nowrap" flex={'1 0 auto'}>
-            <Box fz={'sm'} fw={'400'} style={{ whiteSpace: 'nowrap' }}>Relationships of</Box>
+            <Box fz={'sm'} fw={'400'} style={{ whiteSpace: 'nowrap', userSelect: 'none' }}>Relationships of</Box>
             <Box flex={'1 0 auto'}>
               <SelectElement
                 scope={scope}
@@ -324,7 +385,7 @@ export const RelationshipsXYFlow = memo(function RelationshipsXYFlow() {
                 }}
               >
                 <Text fw={500} size="xs" c="orange" component="div">
-                  Current view doesn't include selected element, switched to Global
+                  Current view doesn't include this element, switched to Global
                 </Text>
               </Box>
             )}

package/src/overlays/relationships-of/_types.ts

@@ -1,5 +1,10 @@
 import type { ComputedNode, Fqn, Relation, ViewID } from '@likec4/core'
-import type { Edge as ReactFlowEdge, Node as ReactFlowNode, ReactFlowInstance } from '@xyflow/react'
+import type {
+  Edge as ReactFlowEdge,
+  InternalNode as ReactFlowInternalNode,
+  Node as ReactFlowNode,
+  ReactFlowInstance
+} from '@xyflow/react'
 import type { SetRequired } from 'type-fest'
 
 export namespace XYFlowTypes {
@@ -23,7 +28,11 @@ export namespace XYFlowTypes {
     }
     navigateTo: ViewID | null
     hovered?: boolean
-    dimmed?: boolean
+    /**
+     * Whether the node is dimmed
+     * 'immediate' means that the node is dimmed without delay
+     */
+    dimmed?: 'immediate' | boolean
   }
 
   export type ElementNode = SetRequired<ReactFlowNode<NodeProps, 'element'>, 'type'>
@@ -53,4 +62,6 @@ export namespace XYFlowTypes {
   }
 
   export type Instance = ReactFlowInstance<Node, Edge>
+
+  export type InternalNode = ReactFlowInternalNode<Node>
 }