@likec4/diagram 1.19.1 → 1.20.0

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

@@ -1,220 +0,0 @@
-import {
-  ActionIconGroup,
-  Code,
-  Group,
-  HoverCard,
-  HoverCardDropdown,
-  HoverCardTarget,
-  Notification,
-  Overlay,
-  type PopoverProps,
-  Stack,
-  Text,
-  TooltipGroup
-} from '@mantine/core'
-import { openSpotlight } from '@mantine/spotlight'
-import {
-  IconAlertTriangle,
-  IconChevronLeft,
-  IconChevronRight,
-  IconFileSymlink,
-  IconFocusCentered,
-  IconMenu2,
-  IconSearch
-} from '@tabler/icons-react'
-import clsx from 'clsx'
-import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
-import { isNullish } from 'remeda'
-import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
-import { useMantinePortalProps } from '../../hooks/useMantinePortalProps'
-import { mantine } from '../../theme-vars'
-import { ActionIcon, Tooltip } from './_shared'
-import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
-import { ManualLayoutToolsButton } from './ManualLayoutToolsButton'
-import * as css from './styles.css'
-
-const historySelector = (s: DiagramState) => ({
-  showBurgerMenu: !!s.onBurgerMenuClick,
-  hasStepBack: s.showNavigationButtons && !!s.onNavigateTo && s.navigationHistoryIndex > 0,
-  hasStepForward: s.showNavigationButtons && !!s.onNavigateTo
-    && s.navigationHistoryIndex < s.navigationHistory.length - 1
-})
-
-const BackwardForwardButtons = () => {
-  const store = useDiagramStoreApi()
-  const {
-    showBurgerMenu,
-    hasStepBack,
-    hasStepForward
-  } = useDiagramState(historySelector)
-  return (
-    <LayoutGroup>
-      <Group
-        className={clsx(css.backwardForwardButtons, 'likec4-navigation-webview')}
-        align="flex-start"
-        gap={'xs'}>
-        {showBurgerMenu && (
-          <ActionIcon
-            onClick={e => {
-              e.stopPropagation()
-              store.getState().onBurgerMenuClick?.()
-            }}>
-            <IconMenu2 />
-          </ActionIcon>
-        )}
-        <AnimatePresence>
-          {hasStepBack && (
-            <m.div
-              layout
-              initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
-              animate={{ opacity: 1, transform: 'translateX(0)' }}
-              exit={{
-                opacity: 0.05,
-                transform: 'translateX(-10px)'
-              }}
-              key={'back'}>
-              <ActionIcon
-                onClick={e => {
-                  e.stopPropagation()
-                  store.getState().goBack()
-                }}>
-                <IconChevronLeft />
-              </ActionIcon>
-            </m.div>
-          )}
-          {hasStepForward && (
-            <m.div
-              layout
-              initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
-              animate={{ opacity: 1, transform: 'translateX(0)' }}
-              exit={{
-                opacity: 0,
-                transform: 'translateX(10px)'
-              }}
-              key={'forward'}>
-              <ActionIcon
-                onClick={e => {
-                  e.stopPropagation()
-                  store.getState().goForward()
-                }}>
-                <IconChevronRight />
-              </ActionIcon>
-            </m.div>
-          )}
-        </AnimatePresence>
-      </Group>
-    </LayoutGroup>
-  )
-}
-
-const LayoutDriftNotification = (props: PopoverProps) => (
-  <HoverCard
-    position="right-start"
-    openDelay={200}
-    closeDelay={100}
-    {...props}>
-    <HoverCardTarget>
-      <ActionIcon c="orange">
-        <Overlay color={mantine.colors.orange.lightHover} backgroundOpacity={1} />
-        <IconAlertTriangle />
-      </ActionIcon>
-    </HoverCardTarget>
-    <HoverCardDropdown p={'0'}>
-      <Notification
-        color="orange"
-        withBorder={false}
-        withCloseButton={false}
-        title="Manual layout issues">
-        <Text mt={2} size="sm" lh="xs">
-          View contains new elements or their sizes have changed,<br />
-          last manual layout can not be applied.
-        </Text>
-        <Text mt={'xs'} size="sm" lh="xs">
-          Update view predicates or remove <Code>@likec4-generated</Code>
-        </Text>
-      </Notification>
-    </HoverCardDropdown>
-  </HoverCard>
-)
-
-export const TopLeftPanel = () => {
-  const store = useDiagramStoreApi()
-  const {
-    enableSearch,
-    showNavigationButtons,
-    showFitDiagram,
-    showLayoutDriftWarning,
-    showChangeAutoLayout,
-    showGoToSource,
-    viewportChanged,
-    showManualLayoutTools
-  } = useDiagramState(s => {
-    const isNotWalkthrough = isNullish(s.activeWalkthrough)
-    const isNotFocused = isNullish(s.focusedNodeId)
-    const isNotActive = isNotWalkthrough && isNotFocused
-    return ({
-      enableSearch: s.enableSearch,
-      showNavigationButtons: !!s.onBurgerMenuClick || (s.showNavigationButtons && !!s.onNavigateTo),
-      showFitDiagram: s.controls && s.fitViewEnabled && s.zoomable && isNotWalkthrough,
-      showLayoutDriftWarning: s.controls && !s.readonly && s.view.hasLayoutDrift === true && isNotActive,
-      showChangeAutoLayout: s.controls && s.isEditable() && isNotActive,
-      showGoToSource: s.controls && !!s.onOpenSource && isNotWalkthrough,
-      viewportChanged: s.viewportChanged,
-      showManualLayoutTools: s.controls && s.readonly !== true && s.experimentalEdgeEditing === true
-    })
-  })
-  const portalProps = useMantinePortalProps()
-
-  return (
-    <TooltipGroup openDelay={600} closeDelay={150}>
-      <Stack
-        className={clsx(
-          'react-flow__panel',
-          css.panel,
-          'likec4-top-left-panel'
-        )}
-        align="flex-start"
-        onClick={e => e.stopPropagation()}
-        gap={'xs'}>
-        {showNavigationButtons && <BackwardForwardButtons />}
-        <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
-          {enableSearch && (
-            <Tooltip label="Search (Ctrl+F or ⌘+F)">
-              <ActionIcon
-                onClick={() => openSpotlight()}
-              >
-                <IconSearch />
-              </ActionIcon>
-            </Tooltip>
-          )}
-          {showGoToSource && (
-            <Tooltip label="Open source" {...portalProps}>
-              <ActionIcon
-                onClick={e => {
-                  e.stopPropagation()
-                  store.getState().onOpenSourceView()
-                }}>
-                <IconFileSymlink stroke={1.5} />
-              </ActionIcon>
-            </Tooltip>
-          )}
-          {showChangeAutoLayout && <ChangeAutoLayoutButton {...portalProps} />}
-          {showLayoutDriftWarning && <LayoutDriftNotification {...portalProps} />}
-          {showManualLayoutTools && <ManualLayoutToolsButton {...portalProps} />}
-          {showFitDiagram && (
-            <Tooltip label={viewportChanged ? 'Center camera' : 'Camera is centered'} {...portalProps}>
-              <ActionIcon
-                onClick={e => {
-                  e.stopPropagation()
-                  store.getState().fitDiagram()
-                }}>
-                <IconFocusCentered />
-              </ActionIcon>
-            </Tooltip>
-          )}
-        </ActionIconGroup>
-      </Stack>
-    </TooltipGroup>
-  )
-}
-TopLeftPanel.displayName = 'TopLeftPanel'

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -1,83 +0,0 @@
-import { useDebouncedEffect } from '@react-hookz/web'
-import { shallowEqual } from 'fast-equals'
-import { useRef, useState } from 'react'
-import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../hooks/useDiagramState'
-import { useXYStore } from '../hooks/useXYFlow'
-
-function selectXYFlowSize(state: { width: number; height: number }): string {
-  return `${Math.round(state.width)}:${Math.round(state.height)}`
-}
-
-function selectDiagramsize({ view, fitViewPadding }: DiagramState) {
-  return [
-    view.bounds.x,
-    view.bounds.y,
-    view.bounds.width,
-    view.bounds.height,
-    fitViewPadding
-  ].map(Math.round).join(':')
-}
-
-function FitViewOnViewportResize({ diagramApi }: {
-  diagramApi: DiagramStoreApi
-}) {
-  const xyflowsize = useXYStore(selectXYFlowSize)
-  const viewsize = useDiagramState(selectDiagramsize)
-  const dimensions = xyflowsize + viewsize
-  const prevDimensionsRef = useRef(dimensions)
-
-  useDebouncedEffect(
-    () => {
-      const { focusedNodeId, fitDiagram } = diagramApi.getState()
-      if (focusedNodeId || prevDimensionsRef.current === dimensions) {
-        return
-      }
-      prevDimensionsRef.current = dimensions
-      fitDiagram(250)
-    },
-    [dimensions, diagramApi],
-    250
-  )
-
-  return null
-}
-
-function selector({ view, activeWalkthrough, viewportChanged, fitViewPadding }: DiagramState) {
-  return {
-    layoutId: view.id + '_' + view.autoLayout + '_' + fitViewPadding,
-    isActiveWalkthrough: !!activeWalkthrough,
-    viewportNotMoved: !viewportChanged
-  }
-}
-
-/**
- * Fits the view when diagram changes
- */
-export function FitViewOnDiagramChange() {
-  const {
-    layoutId,
-    isActiveWalkthrough,
-    viewportNotMoved
-  } = useDiagramState(selector, shallowEqual)
-  const diagramApi = useDiagramStoreApi()
-  const [currentLayoutId, setCurrent] = useState(layoutId)
-
-  const requiresFit = layoutId !== currentLayoutId
-
-  useDebouncedEffect(
-    () => {
-      if (layoutId === currentLayoutId) {
-        return
-      }
-      setCurrent(layoutId)
-      diagramApi.getState().fitDiagram(450)
-    },
-    [requiresFit, diagramApi],
-    50
-  )
-
-  if (viewportNotMoved && !isActiveWalkthrough && !requiresFit) {
-    return <FitViewOnViewportResize diagramApi={diagramApi} />
-  }
-  return null
-}

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -1,106 +0,0 @@
-import { nonNullable } from '@likec4/core'
-import { useHotkeys } from '@mantine/hooks'
-import type { EdgeChange, NodeChange } from '@xyflow/react'
-import { getBoundsOfRects, getViewportForBounds } from '@xyflow/system'
-import { useUpdateEffect } from '../hooks'
-import { useDiagramState, useDiagramStoreApi } from '../hooks/useDiagramState'
-import { MinZoom } from './const'
-import type { DiagramFlowTypes } from './types'
-import { nodeToRect } from './utils'
-
-export function SelectEdgesOnNodeFocus() {
-  const diagramStore = useDiagramStoreApi()
-  const focusedNodeId = useDiagramState(s => s.focusedNodeId)
-
-  useUpdateEffect(() => {
-    if (!focusedNodeId) {
-      diagramStore.getState().xystore.getState().resetSelectedElements()
-      return
-    }
-    const container = diagramStore.getState().getContainer()
-    if (!container) {
-      return
-    }
-
-    const edgeChanges = [] as EdgeChange<DiagramFlowTypes.Edge>[]
-    const nodeChanges = [] as NodeChange<DiagramFlowTypes.Node>[]
-    const {
-      edgeLookup,
-      nodeLookup,
-      panZoom,
-      transform,
-      triggerNodeChanges,
-      triggerEdgeChanges
-    } = diagramStore.getState().xystore.getState()
-
-    let focusBounds = nodeToRect(nonNullable(nodeLookup.get(focusedNodeId)))
-
-    for (const [, edge] of edgeLookup) {
-      if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
-        const anotherNodeId = edge.source === focusedNodeId ? edge.target : edge.source
-        const nd = nonNullable(nodeLookup.get(anotherNodeId))
-        focusBounds = getBoundsOfRects(focusBounds, nodeToRect(nd))
-      }
-      if (edge.selected) {
-        edgeChanges.push({
-          id: edge.id,
-          type: 'select',
-          selected: false
-        })
-      }
-    }
-    for (const [, node] of nodeLookup) {
-      if (node.selected && node.id !== focusedNodeId) {
-        nodeChanges.push({
-          id: node.id,
-          type: 'select',
-          selected: false
-        })
-      }
-    }
-    nodeChanges.push({
-      id: focusedNodeId,
-      type: 'select',
-      selected: true
-    })
-    if (edgeChanges.length > 0) {
-      triggerEdgeChanges(edgeChanges)
-    }
-    triggerNodeChanges(nodeChanges)
-
-    const { width, height } = container.getBoundingClientRect()
-
-    const maxZoom = Math.max(1, transform[2])
-    const viewport = getViewportForBounds(
-      {
-        x: focusBounds.x - 16,
-        y: focusBounds.y - 16,
-        width: focusBounds.width + 32,
-        height: focusBounds.height + 32
-      },
-      width,
-      height,
-      MinZoom,
-      maxZoom,
-      0
-    )
-    panZoom?.setViewport(viewport, {
-      duration: 350
-    })
-  }, [focusedNodeId])
-
-  useHotkeys(
-    focusedNodeId !== null
-      ? [
-        ['Escape', (e) => {
-          e.stopPropagation()
-          const { resetFocusAndLastClicked, fitDiagram } = diagramStore.getState()
-          resetFocusAndLastClicked()
-          fitDiagram()
-        }, { preventDefault: true }]
-      ]
-      : []
-  )
-
-  return null
-}

package/src/xyflow/XYFlow.tsx

@@ -1,179 +0,0 @@
-import { ReactFlow, useOnViewportChange } from '@xyflow/react'
-import { shallowEqual } from 'fast-equals'
-import { type CSSProperties, type PropsWithChildren, useMemo } from 'react'
-import { useDiagramState } from '../hooks/useDiagramState'
-import { useXYStoreApi } from '../hooks/useXYFlow'
-import type { DiagramState } from '../state/diagramStore'
-import { MaxZoom, MinZoom } from './const'
-import { RelationshipEdge } from './edges/RelationshipEdge'
-import { CompoundNode } from './nodes/compound'
-import { ElementNode } from './nodes/element'
-import { useLayoutConstraints } from './useLayoutConstraints'
-import { useXYFlowEvents } from './useXYFlowEvents'
-import type { DiagramFlowTypes } from './types'
-
-const nodeTypes = {
-  element: ElementNode,
-  compound: CompoundNode
-}
-const edgeTypes = {
-  relationship: RelationshipEdge
-}
-
-type XYFlowWrapperProps = PropsWithChildren<{
-  colorMode?: 'system' | 'light' | 'dark'
-  className?: string | undefined
-  style?: CSSProperties | undefined
-}>
-
-// const propsAreEqual = (
-//   prev: XYFlowWrapperProps,
-//   next: XYFlowWrapperProps
-// ) => {
-//   return shallowEqual(
-//     omit(prev, ['children']),
-//     omit(next, ['children'])
-//   )
-// }
-
-const selector = (s: DiagramState) => ({
-  nodes: s.xynodes,
-  edges: s.xyedges,
-  onInit: s.onInit,
-  onNodesChange: s.onNodesChange,
-  onEdgesChange: s.onEdgesChange,
-  nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
-  nodesDraggable: s.nodesDraggable,
-  fitView: s.fitViewEnabled,
-  fitViewPadding: s.fitViewPadding,
-  // hasOnNavigateTo: !!s.onNavigateTo,
-  // hasOnNodeClick: !!s.onNodeClick,
-  hasOnNodeContextMenu: !!s.onNodeContextMenu,
-  hasOnCanvasContextMenu: !!s.onCanvasContextMenu,
-  hasOnEdgeContextMenu: !!s.onEdgeContextMenu,
-  hasOnEdgeClick: !!s.onEdgeClick,
-  zoomable: s.zoomable,
-  pannable: s.pannable,
-  // If fitView is not enabled
-  // And diagram starts with a negative x or y - we need to translate viewprot
-  translateX: s.fitViewEnabled ? 0 : -Math.min(s.view.bounds.x, 0),
-  translateY: s.fitViewEnabled ? 0 : -Math.min(s.view.bounds.y, 0)
-})
-
-export function XYFlow({
-  colorMode = 'system',
-  className,
-  children,
-  style
-}: XYFlowWrapperProps) {
-  const xyflowApi = useXYStoreApi()
-  const {
-    nodes,
-    edges,
-    onInit,
-    onNodesChange,
-    onEdgesChange,
-    nodesSelectable,
-    nodesDraggable,
-    fitView,
-    fitViewPadding,
-    pannable,
-    zoomable,
-    hasOnNodeContextMenu,
-    hasOnCanvasContextMenu,
-    hasOnEdgeContextMenu,
-    translateX,
-    translateY
-  } = useDiagramState(selector, shallowEqual)
-  // const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(zoomable)
-  const layoutConstraints = useLayoutConstraints()
-  const {
-    onNodeContextMenu,
-    onPaneContextMenu,
-    onEdgeContextMenu,
-    ...handlers
-  } = useXYFlowEvents()
-
-  /**
-   * WORKAROUND - Called on viewport change
-   * Viewport transform is not rounded to integers which results in blurry nodes on some resolution
-   * https://github.com/xyflow/xyflow/issues/3282
-   * https://github.com/likec4/likec4/issues/734
-   */
-  useOnViewportChange({
-    onEnd: ({ x, y, zoom }) => {
-      const roundedX = Math.round(x),
-        roundedY = Math.round(y)
-      if (x !== roundedX || y !== roundedY) {
-        xyflowApi.setState({ transform: [roundedX, roundedY, zoom] })
-      }
-      // setZoomOnDoubleClick(zoomable && zoom < 0.75)
-    }
-  })
-
-  // useEffect(() => {
-  //   const zoom = xyflowApi.getState().transform[2]
-  //   setZoomOnDoubleClick(zoomable && zoom < 0.75)
-  // }, [])
-
-  return (
-    <ReactFlow<DiagramFlowTypes.Node, DiagramFlowTypes.Edge>
-      className={className}
-      style={style}
-      {...colorMode && { colorMode }}
-      nodes={nodes}
-      edges={edges}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      onInit={onInit}
-      nodeTypes={nodeTypes}
-      edgeTypes={edgeTypes}
-      zoomOnPinch={zoomable}
-      zoomOnScroll={!pannable && zoomable}
-      {...(!zoomable && {
-        zoomActivationKeyCode: null
-      })}
-      zoomOnDoubleClick={false}
-      maxZoom={zoomable ? MaxZoom : 1}
-      minZoom={zoomable ? MinZoom : 1}
-      // Fitview is handled by store in onInit
-      fitView={false}
-      fitViewOptions={{
-        minZoom: MinZoom,
-        maxZoom: 1,
-        padding: fitViewPadding,
-        includeHiddenNodes: true
-      }}
-      {...(!fitView && {
-        viewport: {
-          x: translateX,
-          y: translateY,
-          zoom: 1
-        }
-      })}
-      preventScrolling={zoomable || pannable}
-      defaultMarkerColor="var(--xy-edge-stroke)"
-      noDragClassName="nodrag"
-      noPanClassName="nopan"
-      panOnScroll={pannable}
-      panOnDrag={pannable}
-      {...(!pannable && {
-        selectionKeyCode: null
-      })}
-      elementsSelectable={nodesSelectable}
-      nodesFocusable={nodesDraggable || nodesSelectable}
-      edgesFocusable={false}
-      nodesDraggable={nodesDraggable}
-      {...nodesDraggable && layoutConstraints}
-      nodeDragThreshold={4}
-      elevateNodesOnSelect={false} // or edges are not visible after select\
-      selectNodesOnDrag={false}
-      {...hasOnNodeContextMenu && { onNodeContextMenu }}
-      {...hasOnCanvasContextMenu && { onPaneContextMenu }}
-      {...hasOnEdgeContextMenu && { onEdgeContextMenu }}
-      {...handlers}
-    >
-      {children}
-    </ReactFlow>
-  )
-}

package/src/xyflow/XYFlowInner.tsx

@@ -1,48 +0,0 @@
-import { deepEqual, shallowEqual } from 'fast-equals'
-import { memo } from 'react'
-import { isNonNullish } from 'remeda'
-import { useDiagramState } from '../hooks/useDiagramState'
-import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
-import DiagramTitlePanel from '../ui/DiagramTitlePanel'
-import { DynamicViewWalkthrough } from '../ui/DynamicViewWalkthrough'
-import NotationPanel from '../ui/notation'
-import { TopLeftPanel } from '../ui/top-left/TopLeftPanel'
-import { XYFlowBackground } from './XYFlowBackground'
-
-type XYFlowInnerProps = {
-  background: NonNullable<LikeC4DiagramProperties['background']>
-  showDiagramTitle: boolean
-}
-
-export const XYFlowInner = /* @__PURE__ */ memo(function XYFlowInnerR({
-  background,
-  showDiagramTitle
-}: XYFlowInnerProps) {
-  const {
-    showNotations,
-    isDynamicView,
-    showTopLeft,
-    isDynamicViewActive,
-    enableDynamicViewWalkthrough
-  } = useDiagramState(s => ({
-    showNotations: s.showNotations,
-    isDynamicView: s.isDynamicView,
-    showTopLeft: s.controls || (s.showNavigationButtons && !!s.onNavigateTo) || !!s.onBurgerMenuClick,
-    enableDynamicViewWalkthrough: s.enableDynamicViewWalkthrough,
-    isDynamicViewActive: isNonNullish(s.activeWalkthrough)
-  }))
-
-  const isBgWithPattern = background !== 'transparent' && background !== 'solid'
-
-  const isDiagramTitleVisible = showDiagramTitle && !isDynamicViewActive
-  return (
-    <>
-      {isBgWithPattern && <XYFlowBackground background={background} />}
-      {showTopLeft && <TopLeftPanel />}
-      {isDiagramTitleVisible && <DiagramTitlePanel />}
-      {isDynamicView && enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
-      {showNotations && <NotationPanel />}
-    </>
-  )
-}, deepEqual)
-XYFlowInner.displayName = 'XYFlowInner'