@likec4/diagram 1.12.1 → 1.13.0

package/src/overlays/relationships-of/xyflow/ElementNode.tsx

@@ -0,0 +1,130 @@
+import { ActionIcon, Box, Text as MantineText } from '@mantine/core'
+import { IconZoomScan } from '@tabler/icons-react'
+import { Handle, type NodeProps, Position } from '@xyflow/react'
+import clsx from 'clsx'
+import { m } from 'framer-motion'
+import { useOverlayDialog } from '../../../components'
+import { type DiagramState, useDiagramState } from '../../../hooks'
+import { ElementShapeSvg } from '../../../xyflow/nodes/element/ElementShapeSvg'
+import { stopPropagation } from '../../../xyflow/utils'
+import type { XYFlowTypes } from '../_types'
+import * as css from './styles.css'
+
+const Text = MantineText.withProps({
+  component: 'div'
+})
+
+type ElementNodeProps = NodeProps<XYFlowTypes.ElementNode>
+
+function selector(s: DiagramState) {
+  return {
+    viewId: s.view.id,
+    onNavigateTo: s.onNavigateTo
+  }
+}
+
+export function ElementNode({
+  data: {
+    element,
+    ports,
+    navigateTo,
+    ...data
+  },
+  selectable = true,
+  width: w = 100,
+  height: h = 100
+}: ElementNodeProps) {
+  const overlay = useOverlayDialog()
+  const {
+    viewId,
+    onNavigateTo
+  } = useDiagramState(selector)
+  return (
+    <>
+      <m.div
+        className={clsx([
+          css.elementNode,
+          'likec4-element-node'
+        ])}
+        data-likec4-color={element.color}
+        animate={{
+          opacity: data.dimmed ? 0.15 : 1,
+          transition: {
+            delay: data.dimmed ? .8 : 0
+          }
+        }}
+        {...(selectable && {
+          whileHover: {
+            scale: 1.045,
+            transition: {
+              delay: 0.15
+            }
+          },
+          whileTap: {
+            scale: 0.97
+          }
+        })}
+      >
+        <svg
+          className={clsx(
+            css.cssShapeSvg
+          )}
+          viewBox={`0 0 ${w} ${h}`}
+          width={w}
+          height={h}
+        >
+          <ElementShapeSvg
+            shape={element.shape}
+            w={w}
+            h={h} />
+        </svg>
+        <Box className={css.elementNodeContent}>
+          <Text className={css.elementNodeTitle} lineClamp={2}>{element.title}</Text>
+          {element.description && (
+            <Text className={css.elementNodeDescription} lineClamp={4}>{element.description}</Text>
+          )}
+        </Box>
+        {navigateTo && onNavigateTo && navigateTo !== viewId && (
+          <Box className={css.navigateBtnBox}>
+            <ActionIcon
+              className={clsx('nodrag nopan', css.navigateBtn)}
+              radius="md"
+              onClick={(event) => {
+                event.stopPropagation()
+                setTimeout(() => onNavigateTo(navigateTo), 200)
+                overlay.close()
+              }}
+              role="button"
+              onDoubleClick={stopPropagation}
+              onPointerDownCapture={stopPropagation}
+            >
+              <IconZoomScan stroke={1.8} style={{ width: '75%' }} />
+            </ActionIcon>
+          </Box>
+        )}
+      </m.div>
+      {ports.left.map(({ id, type }, i) => (
+        <Handle
+          key={id}
+          id={id}
+          type={type === 'in' ? 'target' : 'source'}
+          position={Position.Left}
+          style={{
+            visibility: 'hidden',
+            top: `${15 + (i + 1) * ((h - 30) / (ports.left.length + 1))}px`
+          }} />
+      ))}
+      {ports.right.map(({ id, type }, i) => (
+        <Handle
+          key={id}
+          id={id}
+          type={type === 'in' ? 'target' : 'source'}
+          position={Position.Right}
+          style={{
+            visibility: 'hidden',
+            top: `${15 + (i + 1) * ((h - 30) / (ports.right.length + 1))}px`
+          }} />
+      ))}
+    </>
+  )
+}

package/src/overlays/relationships-of/xyflow/EmptyNode.tsx

@@ -0,0 +1,22 @@
+import { Box, Text as MantineText } from '@mantine/core'
+import { type NodeProps } from '@xyflow/react'
+import type { XYFlowTypes } from '../_types'
+import * as css from './styles.css'
+
+const Text = MantineText.withProps({
+  component: 'div'
+})
+
+type EmptyNodeProps = NodeProps<XYFlowTypes.EmptyNode>
+
+export function EmptyNode({
+  data: {
+    column
+  }
+}: EmptyNodeProps) {
+  return (
+    <Box className={css.emptyNode}>
+      <Text c={'dimmed'} fw={500}>No {column === 'incomers' ? 'incoming' : 'outgoing'}</Text>
+    </Box>
+  )
+}

package/src/overlays/relationships-of/xyflow/RelationshipEdge.tsx

@@ -0,0 +1,59 @@
+import { Group, Text, ThemeIcon } from '@mantine/core'
+import { IconBoxMultipleFilled } from '@tabler/icons-react'
+import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getBezierPath } from '@xyflow/react'
+import clsx from 'clsx'
+import type { XYFlowTypes } from '../_types'
+import { ZIndexes } from '../use-layouted-relationships'
+import * as css from './styles.css'
+
+export function RelationshipEdge({
+  data,
+  label,
+  ...props
+}: EdgeProps<XYFlowTypes.Edge>) {
+  const [edgePath, labelX, labelY] = getBezierPath(props)
+  const isMultiRelation = data.relations.length > 1
+  return (
+    <>
+      <g
+        className={css.edgePath}
+        data-edge-dimmed={data.dimmed}
+        data-edge-hovered={data.hovered}
+      >
+        <BaseEdge
+          path={edgePath}
+          {...props}
+        />
+      </g>
+      {label && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              maxWidth: Math.abs(props.targetX - props.sourceX - 40),
+              zIndex: ZIndexes.max
+            }}
+            className={clsx([
+              css.edgeLabel,
+              'nodrag nopan'
+            ])}
+            data-edge-dimmed={data.dimmed}
+            data-edge-hovered={data.hovered}
+          >
+            <Group gap={6} wrap="nowrap">
+              {isMultiRelation && (
+                <ThemeIcon size={'sm'} variant="transparent" color="orange">
+                  <IconBoxMultipleFilled style={{ width: '80%' }} />
+                </ThemeIcon>
+              )}
+              <Text fw={isMultiRelation ? '500' : '400'} component={'div'} className={css.edgeLabelText} lineClamp={3}>
+                {label}
+              </Text>
+            </Group>
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  )
+}

package/src/overlays/relationships-of/xyflow/styles.css.ts

@@ -0,0 +1,170 @@
+import { 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',
+  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 45%)`,
+  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,
+  selectors: {
+    [`${whereLight} &`]: {
+      mixBlendMode: 'darken',
+      color: vars.element.stroke
+    }
+  }
+})
+
+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
+})
+
+export const edgePath = style({
+  opacity: 1,
+  transition: 'all 0.2s ease-in-out',
+
+  selectors: {
+    [`&[data-edge-dimmed='true']`]: {
+      opacity: 0.1,
+      transitionDelay: '800ms'
+    }
+  }
+})
+
+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,
+      // transitionDuration: '400ms',
+      transitionDelay: '800ms'
+    }
+  }
+})
+
+export const edgeLabelText = style({
+  textAlign: 'center',
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: mantine.fontSizes.sm,
+  lineHeight: mantine.lineHeights.xs
+})
+
+export const emptyNode = style({
+  width: '100%',
+  height: '100%',
+  border: `3px dashed ${mantine.colors.defaultBorder}`,
+  borderRadius: mantine.radius.md,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+})
+
+export const navigateBtnBox = style({
+  zIndex: 100,
+  position: 'absolute',
+  left: '50%',
+  bottom: 2,
+  transform: 'translate(-50%, 0%)',
+  selectors: {
+    [`:where([data-likec4-shape='browser']) &`]: {
+      bottom: 4
+    }
+  }
+})
+export const navigateBtn = style({
+  pointerEvents: 'all',
+  color: vars.element.loContrast,
+  cursor: 'pointer',
+  backgroundColor: 'var(--ai-bg)',
+  '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': {
+    boxShadow: mantine.shadows.md
+  }
+})

package/src/state/diagram-to-xyflow.ts

@@ -73,7 +73,7 @@ export function diagramViewToXYFlowData(
     // const inEdges = node.inEdges.map(e => view.edges.find(edge => edge.id === e)).filter(Boolean)
 
     const id = ns + node.id
-    const draggable = opts.draggable && (!parent || parent.children.length > 1)
+    const draggable = opts.draggable
     xynodes.push({
       id,
       type: isCompound ? 'compound' : 'element',

package/src/state/diagramStore.ts

@@ -23,15 +23,16 @@ import {
   applyEdgeChanges,
   applyNodeChanges,
   getViewportForBounds,
+  type InternalNode,
   type OnEdgesChange,
   type OnNodesChange
 } from '@xyflow/react'
-import { boxToRect, getBoundsOfRects, getNodeDimensions } from '@xyflow/system'
+import { boxToRect, getBoundsOfRects, getNodeDimensions, type XYPosition } from '@xyflow/system'
 import { DEV } from 'esm-env'
 import { deepEqual as eq, shallowEqual } from 'fast-equals'
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import { entries, first, hasAtLeast, isNullish, map, prop, reduce } from 'remeda'
-import type { ConditionalKeys, Except, RequiredKeysOf, Simplify } from 'type-fest'
+import type { ConditionalKeys, Except, RequiredKeysOf, RequireExactlyOne, Simplify } from 'type-fest'
 import { devtools, subscribeWithSelector } from 'zustand/middleware'
 import { shallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
@@ -45,6 +46,7 @@ import type {
 import { type Vector, vector } from '../utils/vector'
 import { MinZoom } from '../xyflow/const'
 import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
+import { createLayoutConstraints } from '../xyflow/useLayoutConstraints'
 import { bezierControlPoints, isInside, isSamePoint, toDomPrecision } from '../xyflow/utils'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
 
@@ -55,6 +57,9 @@ type RequiredOrNull<T> = {
 export type DiagramInitialState = {
   view: DiagramView
   readonly: boolean
+  // If LikeC4Model provided
+  hasLikeC4Model: boolean
+  controls: boolean
   showElementLinks: boolean
   showNavigationButtons: boolean
   showNotations: boolean
@@ -67,6 +72,7 @@ export type DiagramInitialState = {
   nodesSelectable: boolean
   experimentalEdgeEditing: boolean
   enableFocusMode: boolean
+  enableRelationshipsBrowser: boolean
   renderIcon: ElementIconRenderer | null
   whereFilter: WhereOperator<string, string> | null
   // If Dynamic View
@@ -79,6 +85,8 @@ export type DiagramInitialState = {
   getContainer: () => HTMLDivElement | null
 } & RequiredOrNull<LikeC4DiagramEventHandlers>
 
+type AlignmentMode = 'Left' | 'Center' | 'Right' | 'Top' | 'Middle' | 'Bottom'
+
 const StringSet = Set<string>
 
 export type DiagramState = Simplify<
@@ -93,6 +101,13 @@ export type DiagramState = Simplify<
 
     initialized: boolean
 
+    activeOverlay:
+      | null
+      | RequireExactlyOne<{
+        relationshipsOf: Fqn
+        edgeDetails: EdgeId
+      }>
+
     // readonly=false and onChange is not null
     isEditable: () => boolean
 
@@ -163,6 +178,9 @@ export type DiagramState = Simplify<
     activateWalkthrough: (step: EdgeId | XYFlowEdge) => void
     stopWalkthrough: () => void
 
+    openOverlay: (overlay: NonNullable<DiagramState['activeOverlay']>) => void
+    closeOverlay: () => void
+
     onInit: (xyflow: XYFlowInstance) => void
     onNodesChange: OnNodesChange<XYFlowNode>
     onEdgesChange: OnEdgesChange<XYFlowEdge>
@@ -170,6 +188,7 @@ export type DiagramState = Simplify<
     highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void
 
     resetEdgeControlPoints: () => void
+    align: (mode: AlignmentMode) => void
   }
 >
 
@@ -184,6 +203,7 @@ const DEFAULT_PROPS: Except<
   initialized: false,
   navigationHistoryIndex: 0,
   viewportChanged: false,
+  activeOverlay: null,
   activeWalkthrough: null,
   focusedNodeId: null,
   hoveredNodeId: null,
@@ -258,6 +278,7 @@ export function createDiagramStore(props: DiagramInitialState) {
               lastClickedNodeId,
               lastClickedEdgeId,
               activeWalkthrough,
+              activeOverlay,
               nodesDraggable,
               nodesSelectable,
               hoveredEdgeId,
@@ -364,6 +385,7 @@ export function createDiagramStore(props: DiagramInitialState) {
               hoveredNodeId = null
               focusedNodeId = null
               activeWalkthrough = null
+              activeOverlay = null
               dimmed = EmptyStringSet
             }
 
@@ -429,6 +451,7 @@ export function createDiagramStore(props: DiagramInitialState) {
                 viewSyncDebounceTimeout,
                 view: nextView,
                 activeWalkthrough,
+                activeOverlay,
                 lastOnNavigate,
                 lastClickedNodeId,
                 lastClickedEdgeId,
@@ -453,6 +476,7 @@ export function createDiagramStore(props: DiagramInitialState) {
               set(
                 {
                   activeWalkthrough: null,
+                  activeOverlay: null,
                   focusedNodeId: null,
                   dimmed: EmptyStringSet
                 },
@@ -481,6 +505,7 @@ export function createDiagramStore(props: DiagramInitialState) {
               set(
                 {
                   activeWalkthrough: null,
+                  activeOverlay: null,
                   focusedNodeId: nodeId,
                   dimmed
                 },
@@ -515,27 +540,19 @@ export function createDiagramStore(props: DiagramInitialState) {
           },
 
           resetFocusAndLastClicked: () => {
-            let {
-              activeWalkthrough,
-              focusedNodeId,
-              lastClickedNodeId,
-              lastClickedEdgeId,
-              xystore
-            } = get()
-            if (activeWalkthrough || focusedNodeId || lastClickedNodeId || lastClickedEdgeId) {
-              set(
-                {
-                  activeWalkthrough: null,
-                  focusedNodeId: null,
-                  lastClickedNodeId: null,
-                  lastClickedEdgeId: null,
-                  dimmed: EmptyStringSet
-                },
-                noReplace,
-                'resetLastClicked'
-              )
-            }
-            xystore.getState().resetSelectedElements()
+            set(
+              {
+                activeWalkthrough: null,
+                activeOverlay: null,
+                focusedNodeId: null,
+                lastClickedNodeId: null,
+                lastClickedEdgeId: null,
+                dimmed: EmptyStringSet
+              },
+              noReplace,
+              'resetLastClicked'
+            )
+            get().xystore.getState().resetSelectedElements()
           },
 
           getElement: (fqn) => {
@@ -740,10 +757,7 @@ export function createDiagramStore(props: DiagramInitialState) {
             onChange?.({ change })
           },
           scheduleSaveManualLayout: () => {
-            let { viewSyncDebounceTimeout } = get()
-            if (viewSyncDebounceTimeout) {
-              clearTimeout(viewSyncDebounceTimeout)
-            }
+            clearTimeout(get().viewSyncDebounceTimeout ?? undefined)
             set(
               {
                 viewSyncDebounceTimeout: setTimeout(() => {
@@ -835,6 +849,25 @@ export function createDiagramStore(props: DiagramInitialState) {
             }
           },
 
+          openOverlay: (overlay) => {
+            set(
+              {
+                activeOverlay: overlay
+              },
+              noReplace,
+              'openOverlay'
+            )
+          },
+          closeOverlay: () => {
+            set(
+              {
+                activeOverlay: null
+              },
+              noReplace,
+              'openOverlay'
+            )
+          },
+
           fitDiagram: (duration = 500) => {
             const { fitViewPadding, view, xystore } = get()
             const { width, height, panZoom, transform } = xystore.getState()
@@ -1024,6 +1057,65 @@ export function createDiagramStore(props: DiagramInitialState) {
 
               return vector(v).mul(scale).add(nodeCenter)
             }
+          },
+          align: (mode: AlignmentMode) => {
+            const { scheduleSaveManualLayout, xystore } = get()
+            const { nodeLookup, parentLookup } = xystore.getState()
+
+            const selectedNodes = new Set(nodeLookup.values().filter(n => n.selected).map(n => n.id))
+            const nodesToAlign = new Set(selectedNodes.difference(new Set(parentLookup.keys())))
+            const constraints = createLayoutConstraints(xystore, nodesToAlign)
+
+            let getEdgePosition: (nodes: InternalNode<XYFlowNode>[]) => number
+            let getPosition: (alignTo: number, node: InternalNode<XYFlowNode>) => number
+            let propertyToEdit: keyof XYPosition
+
+            switch (mode) {
+              case 'Left':
+                getEdgePosition = nodes => Math.min(...nodes.map(n => n.internals.positionAbsolute.x))
+                propertyToEdit = 'x'
+                getPosition = (alignTo, _) => Math.floor(alignTo)
+                break
+              case 'Top':
+                getEdgePosition = nodes => Math.min(...nodes.map(n => n.internals.positionAbsolute.y))
+                propertyToEdit = 'y'
+                getPosition = (alignTo, _) => Math.floor(alignTo)
+                break
+              case 'Right':
+                getEdgePosition = nodes =>
+                  Math.max(...nodes.map(n => n.internals.positionAbsolute.x + getNodeDimensions(n).width))
+                propertyToEdit = 'x'
+                getPosition = (alignTo, node) => Math.floor(alignTo - node.width!)
+                break
+              case 'Bottom':
+                getEdgePosition = nodes =>
+                  Math.max(...nodes.map(n => n.internals.positionAbsolute.y + getNodeDimensions(n).height))
+                propertyToEdit = 'y'
+                getPosition = (alignTo, node) => Math.floor(alignTo - node.height!)
+                break
+              case 'Center':
+                getEdgePosition = nodes =>
+                  Math.max(...nodes.map(n => n.internals.positionAbsolute.x + getNodeDimensions(n).width / 2))
+                propertyToEdit = 'x'
+                getPosition = (alignTo, node) => Math.floor(alignTo - getNodeDimensions(node).width / 2)
+                break
+              case 'Middle':
+                getEdgePosition = nodes =>
+                  Math.max(...nodes.map(n => n.internals.positionAbsolute.y + getNodeDimensions(n).height / 2))
+                propertyToEdit = 'y'
+                getPosition = (alignTo, node) => Math.floor(alignTo - getNodeDimensions(node).height / 2)
+                break
+            }
+
+            constraints.onMove((nodes) => {
+              const alignTo = getEdgePosition(nodes.map(({ node }) => node))
+
+              nodes.forEach(({ rect, node }) => {
+                rect.positionAbsolute = { ...rect.positionAbsolute, [propertyToEdit]: getPosition(alignTo, node) }
+              })
+            })
+
+            scheduleSaveManualLayout()
           }
         } satisfies DiagramState),
         {