@likec4/diagram 1.19.2 → 1.20.0

package/src/overlays/shared/xyflow/RelationshipEdge.css.ts

@@ -1,60 +0,0 @@
-import { style } from '@vanilla-extract/css'
-import { mantine, transitions, vars, whereDark, xyvars } from '../../../theme-vars'
-import { mixColor } from '../../Overlays.css'
-
-const DimmedTransitionDelay = '400ms'
-
-export const edgeContainer = style({
-  opacity: 1,
-  transition: transitions.fast,
-  vars: {
-    [xyvars.edge.stroke]: vars.relation.lineColor,
-    [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
-    [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 50%)`,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 20%)`
-  },
-  selectors: {
-    [`&[data-edge-dimmed='true']`]: {
-      opacity: 0.2,
-      transitionDelay: DimmedTransitionDelay
-    },
-    [`&[data-edge-dimmed='immediate']`]: {
-      opacity: 0.2
-    },
-    [`${whereDark} &`]: {
-      vars: {
-        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
-      }
-    }
-  }
-})
-
-export const edgeLabel = style([edgeContainer, {
-  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'
-}])
-
-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
-})

package/src/overlays/shared/xyflow/_types.ts

@@ -1,87 +0,0 @@
-import type { AbstractRelation, ComputedNode, Fqn, ViewId } from '@likec4/core'
-import type { Edge as ReactFlowEdge, Node as ReactFlowNode } from '@xyflow/react'
-import type { SetRequired } from 'type-fest'
-
-export namespace SharedFlowTypes {
-  export type EmptyNodeData = {
-    /**
-     * Whether the cursor is hovering over the node
-     */
-    hovered?: boolean
-    /**
-     * Whether the node is currently leaving the overlay
-     */
-    leaving?: boolean
-    /**
-     * Whether the node is currently entering the overlay
-     * @default true
-     */
-    entering?: boolean
-    /**
-     * Whether the node is dimmed
-     * 'immediate' means that the node is dimmed without delay
-     */
-    dimmed?: 'immediate' | boolean
-  }
-
-  export type NonEmptyNodeData = EmptyNodeData & {
-    /**
-     * The node's fully qualified name
-     */
-    fqn: Fqn
-  }
-
-  export type OverlayNodeData = NonEmptyNodeData & {
-    /**
-     * The ComputedNode backing this node
-     */
-    element: Pick<ComputedNode, 'color' | 'title' | 'description' | 'shape' | 'kind'>
-    /**
-     * The node's incoming and outgoing ports
-     */
-    ports: {
-      in: string[]
-      out: string[]
-    }
-    /**
-     * The id of the view that should be navigated to when clicking the navigate button
-     */
-    navigateTo: ViewId | null
-    /**
-     * The node's visual depth on the screen, 1 being the highest
-     */
-    depth?: number
-  }
-
-  export type ElementNode = SetRequired<ReactFlowNode<OverlayNodeData, 'element'>, 'type'>
-
-  export type CompoundNode = SetRequired<ReactFlowNode<OverlayNodeData, 'compound'>, 'type'>
-
-  export type NonEmptyNode = ElementNode | CompoundNode
-
-  export type EmptyNode = SetRequired<ReactFlowNode<EmptyNodeData, 'empty'>, 'type'>
-
-  export type Node = NonEmptyNode | EmptyNode
-
-  export type EdgeData = {
-    /**
-     * The model's relations represented by this edge
-     */
-    relations: [AbstractRelation, ...AbstractRelation[]]
-    /**
-     * Whether the cursor is hovering over the node
-     */
-    hovered?: boolean
-    /**
-     * Whether the node is dimmed
-     * 'immediate' means that the node is dimmed without delay
-     */
-    dimmed?: 'immediate' | boolean
-    /**
-     * The id of the view that should be navigated to when clicking the edge
-     */
-    navigateTo?: ViewId | null
-  }
-
-  export type Edge = SetRequired<ReactFlowEdge<EdgeData, 'relation'>, 'data' | 'type'>
-}

package/src/state/DiagramContext.tsx

@@ -1,107 +0,0 @@
-import { invariant } from '@likec4/core'
-import { Box } from '@mantine/core'
-import { useMergedRef, useReducedMotion } from '@mantine/hooks'
-import { deepEqual, shallowEqual } from 'fast-equals'
-import { useAnimate } from 'framer-motion'
-import { createContext, type PropsWithChildren, useCallback, useEffect, useRef } from 'react'
-import { clone } from 'remeda'
-import { useUpdateEffect } from '../hooks/useUpdateEffect'
-import { useXYFlow, useXYStoreApi } from '../hooks/useXYFlow'
-import { createDiagramStore, type DiagramInitialState, type DiagramZustandStore } from './diagramStore'
-
-export const DiagramContext = createContext<DiagramZustandStore | null>(null)
-
-export type DiagramContextProviderProps = PropsWithChildren<
-  Omit<DiagramInitialState, 'xystore' | 'xyflow' | 'getContainer'> & {
-    className: string
-    keepAspectRatio: boolean
-  }
->
-
-export function DiagramContextProvider({
-  children,
-  view,
-  className,
-  keepAspectRatio,
-  whereFilter,
-  ...props
-}: DiagramContextProviderProps) {
-  const isMotionReduced = useReducedMotion() ?? false
-  const [scope, animate] = useAnimate()
-  const containerRef = useRef<HTMLDivElement>(null)
-  const ref = useMergedRef(scope, containerRef)
-  const xystore = useXYStoreApi()
-  const xyflow = useXYFlow()
-  const store = useRef<DiagramZustandStore>()
-
-  const getContainer = useCallback(() => containerRef.current, [containerRef])
-
-  if (!store.current) {
-    store.current = createDiagramStore({
-      xystore,
-      xyflow,
-      view,
-      getContainer,
-      whereFilter: clone(whereFilter),
-      ...props
-    })
-  }
-
-  useUpdateEffect(
-    () => store.current?.setState({ xyflow, xystore, getContainer }, false, 'update xyflow and xystore'),
-    [xyflow, xystore, getContainer]
-  )
-
-  useUpdateEffect(
-    () => store.current?.setState(props, false, 'update incoming props'),
-    [props]
-  )
-
-  useUpdateEffect(
-    () => {
-      const current = store.current
-      invariant(current, 'DiagramContext.store.current is not defined')
-      if (!deepEqual(whereFilter, current.getState().whereFilter)) {
-        current.setState({ whereFilter: clone(whereFilter) }, false, 'update where filter')
-      }
-      current.getState().updateView(view)
-    },
-    [view, whereFilter] as const,
-    (a, b) => shallowEqual(a[0], b[0]) && deepEqual(a[1], b[1])
-  )
-
-  const api = store.current
-  useEffect(() => {
-    if (isMotionReduced) {
-      return
-    }
-    return api.subscribe(s => !!s.activeOverlay, (isActiveOverlay) => {
-      animate('.likec4-diagram .react-flow__renderer', {
-        opacity: isActiveOverlay ? 0.7 : 1,
-        filter: isActiveOverlay ? 'grayscale(1)' : 'grayscale(0)',
-        transform: isActiveOverlay ? `perspective(300px) translateZ(-10px) translateY(2px)` : `translateY(0)`
-      }, {
-        duration: isActiveOverlay ? 0.4 : 0.2
-      })
-    }, {
-      fireImmediately: true
-    })
-  }, [api, isMotionReduced])
-
-  return (
-    <Box
-      ref={ref}
-      className={className}
-      {...(keepAspectRatio && {
-        style: {
-          aspectRatio: `${Math.ceil(view.bounds.width)}/${Math.ceil(view.bounds.height)}`,
-          maxHeight: Math.ceil(view.bounds.height)
-        }
-      })}>
-      <DiagramContext.Provider value={api}>
-        {children}
-      </DiagramContext.Provider>
-    </Box>
-  )
-}
-DiagramContextProvider.displayName = 'DiagramContextProvider'

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

@@ -1,150 +0,0 @@
-import { type DiagramEdge, DiagramNode, type DiagramView, ElementKind, type Fqn } from '@likec4/core'
-import { nonNullable, whereOperatorAsPredicate } from '@likec4/core'
-import { hasAtLeast } from 'remeda'
-import type { WhereOperator } from '../LikeC4Diagram.props'
-import { ZIndexes } from '../xyflow/const'
-import type { DiagramFlowTypes } from '../xyflow/types'
-
-// const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
-
-export function diagramViewToXYFlowData(
-  view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__'>,
-  opts: {
-    where: WhereOperator<string, string> | null
-    draggable: boolean
-    selectable: boolean
-  }
-): {
-  xynodes: DiagramFlowTypes.Node[]
-  xyedges: DiagramFlowTypes.Edge[]
-} {
-  const isDynamicView = view.__ === 'dynamic',
-    xynodes = [] as DiagramFlowTypes.Node[],
-    xyedges = [] as DiagramFlowTypes.Edge[],
-    nodeLookup = new Map<Fqn, DiagramNode>()
-
-  const traverse = view.nodes.reduce(
-    (acc, node) => {
-      nodeLookup.set(node.id, node)
-      if (!node.parent) {
-        acc.push({ node, parent: null })
-      }
-      return acc
-    },
-    new Array<{
-      node: DiagramNode
-      parent: DiagramNode | null
-    }>()
-  )
-
-  let visiblePredicate = (_nodeOrEdge: DiagramNode | DiagramEdge): boolean => true
-  if (opts.where) {
-    try {
-      visiblePredicate = whereOperatorAsPredicate(opts.where)
-    } catch (e) {
-      console.error('Error in where filter:', e)
-    }
-  }
-
-  // const visiblePredicate = opts.where ? whereOperatorAsPredicate(opts.where) : () => true
-
-  // namespace to force unique ids
-  const ns = ''
-  const nodeById = (id: Fqn) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`)
-
-  let next: typeof traverse[0] | undefined
-  while ((next = traverse.shift())) {
-    const { node, parent } = next
-    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group
-    if (isCompound) {
-      traverse.push(...node.children.map(child => ({ node: nodeById(child), parent: node })))
-    }
-
-    const position = {
-      x: node.position[0],
-      y: node.position[1]
-    }
-    if (parent) {
-      position.x -= parent.position[0]
-      position.y -= parent.position[1]
-    }
-
-    const id = ns + node.id
-
-    const base: Omit<DiagramFlowTypes.Node, 'data' | 'type'> = {
-      id,
-      draggable: opts.draggable,
-      selectable: opts.selectable && node.kind !== ElementKind.Group,
-      focusable: opts.selectable && !isCompound,
-      deletable: false,
-      position,
-      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
-      width: node.width,
-      height: node.height,
-      hidden: node.kind !== ElementKind.Group && !visiblePredicate(node),
-      ...(parent && {
-        parentId: ns + parent.id
-      })
-    }
-
-    xynodes.push(
-      isCompound
-        ? {
-          ...base,
-          type: 'compound',
-          data: {
-            fqn: node.id,
-            isViewGroup: node.kind === ElementKind.Group,
-            element: node
-          },
-          dragHandle: '.likec4-compound-title'
-        }
-        : {
-          ...base,
-          type: 'element',
-          data: {
-            fqn: node.id,
-            element: node
-          }
-        }
-    )
-  }
-
-  for (const edge of view.edges) {
-    const source = edge.source
-    const target = edge.target
-    const id = ns + edge.id
-
-    if (!hasAtLeast(edge.points, 2)) {
-      console.error('edge should have at least 2 points', edge)
-      continue
-    }
-
-    xyedges.push({
-      id,
-      type: 'relationship',
-      source: ns + source,
-      target: ns + target,
-      zIndex: ZIndexes.Edge,
-      selectable: opts.selectable,
-      hidden: !visiblePredicate(edge),
-      deletable: false,
-      data: {
-        edge,
-        controlPoints: edge.controlPoints || null,
-        label: !!edge.labelBBox
-          ? {
-            bbox: edge.labelBBox,
-            text: edge.label ?? ''
-          }
-          : null
-      },
-      interactionWidth: 20
-    })
-  }
-
-  return {
-    xynodes,
-    xyedges
-  }
-}

package/src/state/diagramStore.layout.ts

@@ -1,66 +0,0 @@
-import { nonexhaustive } from '@likec4/core'
-import { getNodeDimensions } from '@xyflow/system'
-import { hasAtLeast } from 'remeda'
-import type { DiagramState } from '../hooks'
-import { createLayoutConstraints } from '../xyflow/useLayoutConstraints'
-import { type Aligner, getLinearAligner, GridAligner, type GridAlignmentMode, type LinearAlignmentMode, type NodeRect } from './aligners'
-import type { DiagramFlowTypes } from '../xyflow/types'
-
-export type AlignmentMode = LinearAlignmentMode | GridAlignmentMode
-
-export function align(get: () => DiagramState) {
-  return (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 = [...selectedNodes.difference(new Set(parentLookup.keys()))]
-
-    if (!hasAtLeast(nodesToAlign, 2)) {
-      console.warn('At least 2 nodes must be selected to align')
-      return
-    }
-    const constraints = createLayoutConstraints(xystore, nodesToAlign)
-
-    const aligner = getAligner(mode)
-
-    constraints.onMove(nodes => {
-      aligner.computeLayout(nodes.map(({ node }) => toNodeRect(node)))
-
-      nodes.forEach(({ rect, node }) => {
-        rect.positionAbsolute = {
-          ...rect.positionAbsolute,
-          ...aligner.applyPosition(toNodeRect(node))
-        }
-      })
-    })
-
-    scheduleSaveManualLayout()
-  }
-}
-
-function toNodeRect(node: DiagramFlowTypes.InternalNode): NodeRect {
-  return {
-    ...node.internals.positionAbsolute,
-    id: node.id,
-    width: getNodeDimensions(node).width,
-    height: getNodeDimensions(node).height
-  }
-}
-
-function getAligner(mode: AlignmentMode): Aligner {
-  switch (mode) {
-    case 'Left':
-    case 'Right':
-    case 'Top':
-    case 'Bottom':
-    case 'Center':
-    case 'Middle':
-      return getLinearAligner(mode)
-    case 'Column':
-    case 'Row':
-      return new GridAligner(mode)
-    default:
-      nonexhaustive(mode)
-  }
-}