@likec4/diagram 1.19.2 → 1.20.0

package/src/hooks/useDiagramState.ts

@@ -1,36 +0,0 @@
-import { shallowEqual } from 'fast-equals'
-import { useContext } from 'react'
-import { useStoreWithEqualityFn as useZustandStore } from 'zustand/traditional'
-
-import type { ViewId } from '@likec4/core'
-import { DiagramContext } from '../state/DiagramContext'
-import type { DiagramState, DiagramStoreApi } from '../state/diagramStore'
-
-const selectViewId = (state: DiagramState) => state.view.id
-export function useCurrentViewId(): ViewId {
-  return useDiagramState(selectViewId)
-}
-
-export function useDiagramState<StateSlice = unknown>(
-  selector: (state: DiagramState) => StateSlice,
-  equalityFn?: (a: StateSlice, b: StateSlice) => boolean
-): StateSlice {
-  const store = useContext(DiagramContext)
-
-  if (store === null) {
-    throw new Error('useDiagramStore could be used only inside DiagramContext')
-  }
-
-  return useZustandStore(store, selector, equalityFn ?? shallowEqual)
-}
-
-export function useDiagramStoreApi(): DiagramStoreApi {
-  const store = useContext(DiagramContext)
-
-  if (store === null) {
-    throw new Error('useDiagramStoreApi could be used only inside DiagramContext')
-  }
-
-  return store
-}
-export type { DiagramState, DiagramStoreApi }

package/src/overlays/OverlayContext.tsx

@@ -1,11 +0,0 @@
-import { createContext, useContext } from 'react'
-import type { DiagramState } from '../hooks'
-
-export const OverlayContext = createContext({} as {
-  openOverlay: DiagramState['openOverlay']
-  close: (onClosed?: () => void) => void
-})
-
-export function useOverlayDialog() {
-  return useContext(OverlayContext)
-}

package/src/overlays/Overlays.css.ts

@@ -1,136 +0,0 @@
-import { createVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine, vars, whereDark, whereLight, xyvars } from '../theme-vars'
-
-export const mixColor = createVar('mix-color')
-export const container = style({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  padding: 0,
-  margin: 0,
-  boxSizing: 'border-box',
-  border: '0 solid transparent',
-  width: '100%',
-  height: '100%',
-  zIndex: 1000,
-  isolation: 'isolate',
-  WebkitBackdropFilter: 'blur(var(--backdrop-blur))',
-  backdropFilter: 'blur(var(--backdrop-blur))',
-  backgroundColor: `rgb(200 200 200 / var(--backdrop-opacity))`,
-  vars: {
-    '--backdrop-blur': '0px',
-    '--backdrop-opacity': '0%',
-    [mixColor]: `black`
-  },
-  selectors: {
-    [`${whereDark} &`]: {
-      backgroundColor: `rgb(36 36 36 / var(--backdrop-opacity))`,
-      vars: {
-        [mixColor]: `white`
-      }
-    }
-  }
-})
-
-export const cssReactflowMarker = style({})
-globalStyle(`.react-flow${cssReactflowMarker}`, {
-  vars: {
-    // [xyvars.background.color]: vars.likec4.background.color,
-    [xyvars.background.pattern.color]: vars.likec4.background.pattern.color
-  }
-})
-
-globalStyle(`${whereDark} .react-flow${cssReactflowMarker}`, {
-  vars: {
-    [xyvars.edge.labelColor]: vars.relation.labelColor,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
-  }
-})
-globalStyle(`:where(${cssReactflowMarker}) .react-flow__attribution`, {
-  display: 'none'
-})
-globalStyle(`:where(${cssReactflowMarker}) .react-flow__edge-text`, {
-  fontSize: 16
-})
-globalStyle(`${cssReactflowMarker} .react-flow__edges > svg`, {
-  mixBlendMode: 'plus-lighter'
-})
-globalStyle(`${whereLight} ${cssReactflowMarker} .react-flow__edges > svg`, {
-  mixBlendMode: 'screen'
-})
-
-// const dialogFadeIn = keyframes({
-//   '0%': {
-//     opacity: 0,
-//     display: 'none'
-//   },
-//   '100%': {
-//     opacity: 1,
-//     display: 'block'
-//   }
-// })
-
-// const dialogFadeOut = keyframes({
-//   '0%': {
-//     opacity: 1,
-//     transform: 'scale(1)',
-//     display: 'block'
-//   },
-//   '100%': {
-//     opacity: 0,
-//     transform: 'scale(0.98)',
-//     display: 'none'
-//   }
-// })
-
-// const backdropRgb = createVar('backdrop-rgb')
-
-// const dialogBackdropFadeIn = keyframes({
-//   '0%': {
-//     WebkitBackdropFilter: 'blur(1px)',
-//     backdropFilter: 'blur(1px)',
-//     backgroundColor: `rgb(${backdropRgb} / 30%)`
-//   },
-//   '100%': {
-//     WebkitBackdropFilter: 'blur(8px)',
-//     backdropFilter: 'blur(8px)',
-//     backgroundColor: `rgb(${backdropRgb} / 85%)`
-//   }
-// })
-
-// export const dialog = style({
-//   top: 0,
-//   left: 0,
-//   padding: 0,
-//   margin: 0,
-//   boxSizing: 'border-box',
-//   border: '0 solid transparent',
-//   width: '100%',
-//   maxWidth: '100dvw',
-//   height: '100%',
-//   maxHeight: '100dvh',
-//   background: 'transparent',
-//   animation: `${dialogFadeOut} 130ms cubic-bezier(0.50, 0, 1, 1)`,
-//   transformOrigin: '50% 20%',
-//   vars: {
-//     [backdropRgb]: '255 255 255'
-//   },
-//   selectors: {
-//     [`${whereDark} &`]: {
-//       vars: {
-//         [backdropRgb]: '36 36 36'
-//       }
-//     },
-//     '&[open]': {
-//       animation: `${dialogFadeIn} 200ms cubic-bezier(0, 0, 0.40, 1) forwards`
-//     },
-//     '&::backdrop': {
-//       WebkitBackdropFilter: 'blur(1px)',
-//       backdropFilter: 'blur(1px)',
-//       backgroundColor: `rgb(${backdropRgb} / 30%)`
-//     },
-//     '&[open]::backdrop': {
-//       animation: `${dialogBackdropFadeIn} 350ms cubic-bezier(0, 0, 0.40, 1) forwards`
-//     }
-//   }
-// })

package/src/overlays/edge-details/EdgeDetailsXYFlow.tsx

@@ -1,255 +0,0 @@
-import { type DiagramEdge, type EdgeId, isAncestor } from '@likec4/core'
-import { Box, Group, Text } from '@mantine/core'
-import { useDebouncedCallback, useSyncedRef, useUpdateEffect } from '@react-hookz/web'
-import {
-  getViewportForBounds,
-  Panel,
-  ReactFlow,
-  type ReactFlowInstance,
-  useReactFlow,
-  useStoreApi,
-  ViewportPortal
-} from '@xyflow/react'
-import { memo, useEffect } from 'react'
-import { only } from 'remeda'
-import { useDiagramStoreApi } from '../../hooks/useDiagramState'
-import type { SharedFlowTypes } from '../shared/xyflow/_types'
-import type { EdgeDetailsFlowTypes } from './_types'
-import { SelectEdge } from './SelectEdge'
-import * as css from './SelectEdge.css'
-import { useLayoutedEdgeDetails, ZIndexes } from './use-layouted-edge-details'
-import { CompoundNode } from './xyflow/CompoundNode'
-import { ElementNode } from './xyflow/ElementNode'
-import { RelationshipEdge } from './xyflow/RelationshipEdge'
-
-const nodeTypes = {
-  element: ElementNode,
-  compound: CompoundNode
-}
-const edgeTypes = {
-  relation: RelationshipEdge
-}
-
-const resetDimmedAndHovered = (xyflow: ReactFlowInstance<SharedFlowTypes.Node, EdgeDetailsFlowTypes.Edge>) => {
-  xyflow.setEdges(edges =>
-    edges.map(edge => ({
-      ...edge,
-      data: {
-        ...edge.data,
-        dimmed: false,
-        hovered: false
-      },
-      animated: false
-    }))
-  )
-  xyflow.setNodes(nodes =>
-    nodes.map(n =>
-      ({
-        ...n,
-        data: {
-          ...n.data,
-          dimmed: false,
-          hovered: false
-        }
-      }) as SharedFlowTypes.Node
-    )
-  )
-}
-
-const animateEdge = (node: SharedFlowTypes.Node, animated = true) => (edges: EdgeDetailsFlowTypes.Edge[]) => {
-  return edges.map(edge => {
-    const isConnected = edge.source === node.id || edge.target === node.id || isAncestor(node.id, edge.source)
-      || isAncestor(node.id, edge.target)
-    return {
-      ...edge,
-      animated: animated && isConnected
-    }
-  })
-}
-
-export const EdgeDetailsXYFlow = memo<{ edgeId: EdgeId }>(function EdgeDetailsXYFlow({ edgeId }) {
-  const diagramStore = useDiagramStoreApi()
-
-  const {
-    view,
-    edge,
-    edges,
-    nodes,
-    bounds
-  } = useLayoutedEdgeDetails(edgeId)
-
-  const boundsRef = useSyncedRef(bounds)
-
-  const xyflow = useReactFlow<SharedFlowTypes.Node, EdgeDetailsFlowTypes.Edge>()
-  const xystore = useStoreApi<SharedFlowTypes.Node, EdgeDetailsFlowTypes.Edge>()
-
-  const fitview = useDebouncedCallback(
-    () => {
-      const {
-        width,
-        height
-      } = xystore.getState()
-      const viewport = getViewportForBounds(
-        {
-          ...boundsRef.current,
-          height: Math.max(boundsRef.current.height + 100, height - 200) // Add some padding to the bottom
-        },
-        width,
-        height,
-        0.2,
-        1,
-        0.2
-      )
-      xyflow.setViewport(viewport, { duration: 350 })
-    },
-    [xyflow],
-    150
-  )
-
-  useEffect(() => {
-    xyflow.setNodes(nodes)
-    xyflow.setEdges(edges)
-  }, [nodes, edges])
-
-  const zoomable = true
-
-  useUpdateEffect(() => fitview(), [edge.id])
-
-  return (
-    <ReactFlow
-      defaultEdges={[] as EdgeDetailsFlowTypes.Edge[]}
-      defaultNodes={[] as SharedFlowTypes.Node[]}
-      nodeTypes={nodeTypes}
-      edgeTypes={edgeTypes}
-      defaultMarkerColor="var(--xy-edge-stroke)"
-      zoomOnPinch={zoomable}
-      zoomOnScroll={false}
-      zoomOnDoubleClick={false}
-      maxZoom={1.5}
-      minZoom={0.1}
-      fitView
-      fitViewOptions={{
-        padding: 0.2,
-        maxZoom: 1,
-        minZoom: 0.1,
-        includeHiddenNodes: true
-      }}
-      preventScrolling={true}
-      noDragClassName="nodrag"
-      noPanClassName="nopan"
-      panOnScroll
-      panOnDrag
-      elementsSelectable
-      nodesFocusable={false}
-      edgesFocusable={false}
-      nodesDraggable={false}
-      // onNodeMouseEnter={(_, node) => {
-      //   if (node.type === 'empty') return
-      //   xyflow.setEdges(animateEdge(node, true))
-      // }}
-      // onNodeMouseLeave={() => {
-      //   resetDimmedAndHovered(xyflow)
-      // }}
-      onEdgeMouseEnter={(_, edge) => {
-        xyflow.setEdges(edges =>
-          edges.map(e => ({
-            ...e,
-            data: {
-              ...e.data,
-              dimmed: e.id !== edge.id,
-              hovered: e.id === edge.id
-            },
-            zIndex: e.id === edge.id ? ZIndexes.max : ZIndexes.edge,
-            animated: e.id === edge.id
-          }))
-        )
-        xyflow.setNodes(nodes =>
-          nodes.map(n => ({
-            ...n,
-            data: {
-              ...n.data,
-              dimmed: n.id !== edge.source && n.id !== edge.target
-            }
-          } as SharedFlowTypes.Node))
-        )
-      }}
-      onEdgeMouseLeave={() => {
-        resetDimmedAndHovered(xyflow)
-      }}
-      // onNodeClick={(e, node) => {
-      //   e.stopPropagation()
-      //   if (node.type === 'empty') return
-      //   if (subject.id !== node.data.fqn) {
-      //     lastClickedNodeRef.current = node
-      //   }
-      //   overlay.openOverlay({
-      //     relationshipsOf: node.data.fqn
-      //   })
-      // }}
-      // onDoubleClick={e => {
-      //   e.stopPropagation()
-      //   xyflow.fitView({
-      //     includeHiddenNodes: true,
-      //     maxZoom: 1,
-      //     duration: 450
-      //   })
-      // }}
-      onEdgeClick={(e, edge) => {
-        e.stopPropagation()
-        // edge-details only ever deals with edges that represent only one relation
-        let relationId = only(edge.data.relations)?.id
-        if (relationId) {
-          diagramStore.getState().onOpenSource?.({
-            relation: relationId
-          })
-        }
-      }}
-      // onEdgeClick={(e, edge) => {
-      //   e.stopPropagation()
-      //   if (edge.data.relations.length <= 1) {
-      //     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') {
-      //     lastClickedNodeRef.current = next
-      //     overlay.openOverlay({
-      //       relationshipsOf: next.data.fqn
-      //     })
-      //   }
-      // }}
-    >
-      <Panel position="top-center">
-        <Group gap={'xs'} wrap={'nowrap'}>
-          <SelectEdge
-            view={view}
-            edge={edge} />
-        </Group>
-      </Panel>
-      <EdgeData edge={edge} top={bounds.height} width={bounds.width} />
-    </ReactFlow>
-  )
-})
-
-const EdgeData = ({ edge, top, width }: { edge: DiagramEdge; top: number; width: number }) => {
-  return (
-    <ViewportPortal>
-      <Box
-        maw={width}
-        style={{
-          transform: `translate(100px, ${top + 32}px)`
-        }}>
-        <Box className={css.edgeDataGrid}>
-          <Text size="xs" fw={500} c="dimmed">technology</Text>
-          <Text>{edge.technology || 'unknown'}</Text>
-          <Text size="xs" fw={500} c="dimmed">description</Text>
-          <Text>{edge.description || 'no description'}</Text>
-        </Box>
-      </Box>
-    </ViewportPortal>
-  )
-}

package/src/overlays/edge-details/_types.ts

@@ -1,18 +0,0 @@
-import type { AddEdgeData } from '../../utils/types'
-import type { SharedFlowTypes } from '../shared/xyflow/_types'
-
-export namespace EdgeDetailsFlowTypes {
-
-  /**
-   * Data that is exclusive to the edge-details overlay. It will be merged into the edge types
-   * provided by SharedFlowTypes.
-   */
-  type EdgeDetailsEdgeData = {
-    technology: string | null
-    description: string | null
-  }
-
-  // Extend the edge types provided by SharedFlowTypes with EdgeDetailsEdgeData
-
-  export type Edge = AddEdgeData<SharedFlowTypes.Edge, EdgeDetailsEdgeData>
-}

package/src/overlays/edge-details/xyflow/CompoundNode.tsx

@@ -1,72 +0,0 @@
-import { Handle, type NodeProps, Position } from '@xyflow/react'
-import clsx from 'clsx'
-import { m } from 'framer-motion'
-import type { SharedFlowTypes } from '../../shared/xyflow/_types'
-import * as css from './styles.css'
-import { Text } from '../../../controls/Text'
-
-type CompoundNodeProps = NodeProps<SharedFlowTypes.CompoundNode>
-
-export function CompoundNode({
-  data: {
-    element,
-    ports,
-    ...data
-  },
-  width = 200,
-  selectable = true
-}: CompoundNodeProps) {
-  return (
-    <>
-      <m.div
-        className={clsx([
-          css.compoundNodeBody,
-          'likec4-compound-node'
-        ])}
-        data-compound-depth={3}
-        data-likec4-color={element.color}
-        animate={{
-          opacity: data.dimmed ? 0.15 : 1,
-          transition: {
-            delay: data.dimmed === true ? .4 : 0
-          }
-        }}
-        {...(selectable && {
-          whileHover: {
-            scale: 1.04,
-            transition: {
-              delay: 0.15
-            }
-          },
-          whileTap: {
-            scale: 1
-          }
-        })}
-      >
-        <Text className={css.compoundNodeTitle} maw={width - 20}>{element.title}</Text>
-      </m.div>
-      {ports.out.map((id, i) => (
-        <Handle
-          key={id}
-          id={id}
-          type={'source'}
-          position={Position.Right}
-          style={{
-            visibility: 'hidden',
-            top: `${16 + 20 * i}px`
-          }} />
-      ))}
-      {ports.in.map((id, i) => (
-        <Handle
-          key={id}
-          id={id}
-          type={'target'}
-          position={Position.Left}
-          style={{
-            visibility: 'hidden',
-            top: `${16 + 20 * i}px`
-          }} />
-      ))}
-    </>
-  )
-}

package/src/overlays/edge-details/xyflow/ElementNode.tsx

@@ -1,152 +0,0 @@
-import { ActionIcon, Box, Group } from '@mantine/core'
-import { IconFileSymlink, IconTransform, IconZoomScan } from '@tabler/icons-react'
-import { Handle, type NodeProps, Position } from '@xyflow/react'
-import clsx from 'clsx'
-import { m } from 'framer-motion'
-import { type DiagramState, useDiagramState } from '../../../hooks'
-import { ElementShapeSvg } from '../../../xyflow/nodes/element/ElementShapeSvg'
-import { stopPropagation } from '../../../xyflow/utils'
-import { useOverlayDialog } from '../../OverlayContext'
-import type { SharedFlowTypes } from '../../shared/xyflow/_types'
-import * as css from './styles.css'
-import { Text } from '../../../controls/Text'
-
-const Action = ActionIcon.withProps({
-  className: 'nodrag nopan ' + css.navigateBtn,
-  radius: 'md',
-  role: 'button',
-  onDoubleClick: stopPropagation,
-  onPointerDownCapture: stopPropagation
-})
-
-type ElementNodeProps = NodeProps<SharedFlowTypes.ElementNode>
-
-function selector(s: DiagramState) {
-  return {
-    currentViewId: s.view.id,
-    enableRelationshipBrowser: s.enableRelationshipBrowser,
-    onNavigateTo: s.onNavigateTo,
-    onOpenSource: s.onOpenSource
-  }
-}
-
-export function ElementNode({
-  data: {
-    element,
-    ports,
-    navigateTo,
-    ...data
-  },
-  selectable = true,
-  width: w = 100,
-  height: h = 100
-}: ElementNodeProps) {
-  const overlay = useOverlayDialog()
-  const {
-    currentViewId,
-    onNavigateTo,
-    onOpenSource,
-    enableRelationshipBrowser
-  } = useDiagramState(selector)
-  return (
-    <>
-      <m.div
-        className={clsx([
-          css.elementNode,
-          'likec4-element-node'
-        ])}
-        data-likec4-color={element.color}
-        data-likec4-shape={element.shape}
-        animate={{
-          opacity: data.dimmed ? 0.15 : 1,
-          transition: {
-            delay: data.dimmed === true ? .4 : 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>
-        <Group className={css.navigateBtnBox}>
-          {navigateTo && onNavigateTo && navigateTo !== currentViewId && (
-            <Action
-              onClick={(event) => {
-                event.stopPropagation()
-                overlay.close(() => onNavigateTo(navigateTo))
-              }}>
-              <IconZoomScan stroke={1.8} style={{ width: '75%' }} />
-            </Action>
-          )}
-          {enableRelationshipBrowser && (
-            <Action
-              onClick={(event) => {
-                event.stopPropagation()
-                overlay.openOverlay({
-                  relationshipsOf: data.fqn
-                })
-              }}>
-              <IconTransform stroke={1.8} style={{ width: '72%' }} />
-            </Action>
-          )}
-          {onOpenSource && (
-            <Action
-              onClick={(event) => {
-                event.stopPropagation()
-                onOpenSource({
-                  element: data.fqn
-                })
-              }}>
-              <IconFileSymlink stroke={1.8} style={{ width: '72%' }} />
-            </Action>
-          )}
-        </Group>
-      </m.div>
-      {ports.out.map((id, i) => (
-        <Handle
-          key={id}
-          id={id}
-          type="source"
-          position={Position.Right}
-          style={{
-            visibility: 'hidden',
-            top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
-          }} />
-      ))}
-      {ports.in.map((id, i) => (
-        <Handle
-          key={id}
-          id={id}
-          type="target"
-          position={Position.Left}
-          style={{
-            visibility: 'hidden',
-            top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
-          }} />
-      ))}
-    </>
-  )
-}