@likec4/diagram 1.41.0 → 1.42.0

package/src/likec4diagram/relationship-popover/actor.ts

@@ -1,192 +0,0 @@
-import { type EdgeId } from '@likec4/core/types'
-import {
-  type ActorLogicFrom,
-  type ActorRefFrom,
-  type SnapshotFrom,
-  assertEvent,
-  assign,
-  setup,
-} from 'xstate'
-
-export type RelationshipPopoverActorEvent =
-  // Events from the UI
-  | { type: 'xyedge.mouseEnter'; edgeId: EdgeId }
-  | { type: 'xyedge.mouseLeave' }
-  | { type: 'xyedge.select'; edgeId: EdgeId }
-  | { type: 'xyedge.unselect' }
-  | { type: 'close' }
-  // - From dropdown
-  | { type: 'dropdown.mouseEnter' }
-  | { type: 'dropdown.mouseLeave' }
-
-export interface RelationshipPopoverActorContext {
-  edgeId: EdgeId | null
-  /**
-   * True if the edge was selected
-   */
-  edgeSelected: boolean
-
-  /**
-   * The timeout for opening the popover
-   * If it was closed recently (<1.5s), it will be 300ms
-   * Otherwise, it will be 800ms
-   */
-  openTimeout: number
-}
-
-const _actorLogic = setup({
-  types: {
-    context: {} as RelationshipPopoverActorContext,
-    events: {} as RelationshipPopoverActorEvent,
-    tags: 'opened',
-  },
-  delays: {
-    'open timeout': ({ context }) => context.openTimeout,
-    'close timeout': 600,
-    'long idle': 1500,
-  },
-  actions: {
-    'update edgeId': assign(({ context, event }) => {
-      assertEvent(event, ['xyedge.select', 'xyedge.mouseEnter'])
-      return {
-        edgeId: event.edgeId,
-        edgeSelected: context.edgeSelected || event.type === 'xyedge.select',
-      }
-    }),
-    'increase open timeout': assign(() => ({
-      openTimeout: 800,
-    })),
-    'decrease open timeout': assign(() => ({
-      openTimeout: 300,
-    })),
-    'reset edgeId': assign({
-      edgeId: null,
-      edgeSelected: false,
-    }),
-  },
-  guards: {
-    'edge was selected': ({ context }) => context.edgeSelected,
-    'edge was hovered': ({ context }) => !context.edgeSelected,
-  },
-}).createMachine({
-  id: 'breadcrumbs',
-  context: () => ({
-    edgeId: null,
-    edgeSelected: false,
-    openTimeout: 800,
-  }),
-  initial: 'idle',
-  on: {
-    'close': {
-      target: '#idle',
-      actions: [
-        'reset edgeId',
-        'increase open timeout',
-      ],
-    },
-  },
-  states: {
-    idle: {
-      id: 'idle',
-      on: {
-        'xyedge.mouseEnter': {
-          target: 'opening',
-          actions: 'update edgeId',
-        },
-        'xyedge.select': {
-          target: 'active',
-          actions: 'update edgeId',
-        },
-      },
-      after: {
-        'long idle': {
-          actions: 'increase open timeout',
-        },
-      },
-    },
-    opening: {
-      on: {
-        'xyedge.mouseLeave': {
-          target: 'idle',
-        },
-        'xyedge.select': {
-          target: 'active',
-          actions: 'update edgeId',
-        },
-      },
-      after: {
-        'open timeout': {
-          actions: 'decrease open timeout',
-          target: 'active',
-        },
-      },
-    },
-    active: {
-      tags: ['opened'],
-      initial: 'opened',
-      exit: 'reset edgeId',
-      on: {
-        'xyedge.unselect': {
-          target: 'idle',
-          actions: 'increase open timeout',
-        },
-        'xyedge.select': {
-          actions: 'update edgeId',
-        },
-      },
-      states: {
-        opened: {
-          on: {
-            'dropdown.mouseEnter': {
-              target: 'hovered',
-            },
-            'xyedge.mouseLeave': {
-              guard: 'edge was hovered',
-              target: 'closing',
-            },
-          },
-        },
-        hovered: {
-          on: {
-            'dropdown.mouseLeave': [
-              {
-                guard: 'edge was selected',
-                target: 'opened',
-              },
-              {
-                target: 'closing',
-              },
-            ],
-          },
-        },
-        closing: {
-          on: {
-            'xyedge.mouseEnter': {
-              guard: 'edge was hovered',
-              target: 'opened',
-              actions: 'update edgeId',
-            },
-            'xyedge.select': {
-              target: 'opened',
-              actions: 'update edgeId',
-            },
-            'dropdown.mouseEnter': {
-              target: 'hovered',
-            },
-          },
-          after: {
-            'close timeout': {
-              target: '#idle',
-            },
-          },
-        },
-      },
-    },
-  },
-})
-
-export interface RelationshipPopoverActorLogic extends ActorLogicFrom<typeof _actorLogic> {}
-export const RelationshipPopoverActorLogic: RelationshipPopoverActorLogic = _actorLogic
-
-export type RelationshipPopoverActorSnapshot = SnapshotFrom<RelationshipPopoverActorLogic>
-export interface RelationshipPopoverActorRef extends ActorRefFrom<RelationshipPopoverActorLogic> {}

package/src/likec4diagram/relationship-popover/styles.css.ts

@@ -1,27 +0,0 @@
-import { css } from '@likec4/styles/css'
-
-export const endpoint = css({
-  display: 'block',
-  fontSize: 'xxs',
-  fontWeight: 500,
-  whiteSpace: 'nowrap',
-  paddingX: '1',
-  paddingY: '0.5',
-  borderRadius: '[2px]',
-  background: {
-    _light: 'var(--likec4-palette-fill)/90',
-    _dark: 'var(--likec4-palette-fill)/60',
-  },
-  lineHeight: '1',
-  color: {
-    _light: 'var(--likec4-palette-hiContrast)',
-    _dark: 'var(--likec4-palette-loContrast)',
-  },
-})
-
-export const title = css({
-  whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: 'sm',
-  lineHeight: 'sm',
-  userSelect: 'all',
-})

package/src/likec4diagram/types.ts

@@ -1,240 +0,0 @@
-import type {
-  BBox,
-  DeploymentFqn,
-  DiagramEdge,
-  DiagramNode,
-  ExclusiveUnion,
-  Fqn,
-  IconUrl,
-  RichTextOrEmpty,
-  ViewId,
-} from '@likec4/core/types'
-import type { XYPosition } from '@xyflow/system'
-import type { OptionalKeysOf, Simplify } from 'type-fest'
-import type { Base, ReactFlowEdge, ReactFlowNode } from '../base/types'
-
-type NonOptional<T extends object> = Simplify<
-  & {
-    [P in Exclude<keyof T, OptionalKeysOf<T>>]: T[P]
-  }
-  & {
-    [P in OptionalKeysOf<T>]-?: T[P] | undefined
-  }
->
-
-export namespace Types {
-  export type LeafNodeData =
-    & Base.NodeData
-    & NonOptional<
-      Pick<
-        DiagramNode,
-        | 'id'
-        | 'title'
-        | 'technology'
-        | 'color'
-        | 'shape'
-        | 'width'
-        | 'level'
-        | 'height'
-        | 'style'
-        | 'tags'
-        | 'position'
-      >
-    >
-    & {
-      description: RichTextOrEmpty
-      /**
-       * View this node belongs to
-       */
-      viewId: ViewId
-      isMultiple?: boolean | undefined
-      icon: string | null
-    }
-
-  /**
-   * Represents element from logical model
-   */
-  export type ElementNodeData = Simplify<
-    LeafNodeData & {
-      modelFqn: Fqn
-      deploymentFqn?: never
-      /**
-       * If set - this node has navigation to another view and diagram has handler for this
-       */
-      navigateTo: ViewId | null
-    }
-  >
-
-  /**
-   * Represents element from deployment model
-   */
-  export type DeploymentElementNodeData =
-    & LeafNodeData
-    & {
-      navigateTo: ViewId | null
-      deploymentFqn: DeploymentFqn
-      // If set - this node refers to a model element
-      modelFqn: Fqn | null
-    }
-
-  export type SequenceActorNodePort = {
-    id: string
-    cx: number
-    cy: number
-    height: number
-    type: 'target' | 'source'
-    position: 'left' | 'right' | 'top' | 'bottom'
-  }
-  export type SequenceActorNodeData = Simplify<
-    & LeafNodeData
-    & {
-      navigateTo: ViewId | null
-      // If set - this node refers to a model element
-      modelFqn: Fqn | null
-      ports: Array<SequenceActorNodePort>
-      viewHeight: number
-    }
-  >
-
-  export type SequenceParallelAreaData = Simplify<
-    & LeafNodeData
-    & {
-      parallelPrefix: string
-    }
-  >
-
-  export type CompoundNodeData =
-    & Base.NodeData
-    & NonOptional<
-      Pick<
-        DiagramNode,
-        | 'id'
-        | 'title'
-        | 'color'
-        | 'shape'
-        | 'style'
-        | 'tags'
-        | 'position'
-      >
-    >
-    & {
-      /**
-       * View this node belongs to
-       */
-      viewId: ViewId
-      depth: number
-      icon?: IconUrl
-    }
-
-  export type CompoundElementNodeData = CompoundNodeData & {
-    modelFqn: Fqn
-    deploymentFqn?: never
-    /**
-     * If set - this node has navigation to another view and diagram has handler for this
-     */
-    navigateTo: ViewId | null
-  }
-
-  export type CompoundDeploymentNodeData = CompoundNodeData & {
-    deploymentFqn: DeploymentFqn
-    /**
-     * If set - this node refers to a model element
-     */
-    modelFqn: Fqn | null
-    /**
-     * If set - this node has navigation to another view and diagram has handler for this
-     */
-    navigateTo: ViewId | null
-  }
-
-  export type ViewGroupNodeData = CompoundNodeData & {
-    isViewGroup: true
-  }
-
-  // export type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>
-
-  export type ElementNode = ReactFlowNode<ElementNodeData, 'element'>
-  export type DeploymentElementNode = ReactFlowNode<DeploymentElementNodeData, 'deployment'>
-
-  export type SequenceActorNode = ReactFlowNode<SequenceActorNodeData, 'seq-actor'>
-  export type SequenceParallelArea = ReactFlowNode<SequenceParallelAreaData, 'seq-parallel'>
-
-  export type CompoundElementNode = ReactFlowNode<CompoundElementNodeData, 'compound-element'>
-  export type CompoundDeploymentNode = ReactFlowNode<CompoundDeploymentNodeData, 'compound-deployment'>
-  export type ViewGroupNode = ReactFlowNode<ViewGroupNodeData, 'view-group'>
-
-  export type Node =
-    | ElementNode
-    | DeploymentElementNode
-    | CompoundElementNode
-    | CompoundDeploymentNode
-    | ViewGroupNode
-    | SequenceActorNode
-    | SequenceParallelArea
-
-  export type NodeData = ExclusiveUnion<{
-    ElementNodeData: ElementNodeData
-    DeploymentElementNodeData: DeploymentElementNodeData
-    CompoundElementNodeData: CompoundElementNodeData
-    CompoundDeploymentNodeData: CompoundDeploymentNodeData
-    ViewGroupNodeData: ViewGroupNodeData
-    SequenceActorNodeData: SequenceActorNodeData
-    SequenceParallelAreaData: SequenceParallelAreaData
-  }>
-
-  export type RelationshipEdgeData = Simplify<
-    & Base.EdgeData
-    & NonOptional<
-      Pick<
-        DiagramEdge,
-        | 'id'
-        | 'label'
-        | 'labelBBox'
-        | 'technology'
-        | 'points'
-        | 'dir'
-        | 'color'
-        | 'line'
-        | 'head'
-        | 'tail'
-        | 'navigateTo'
-      >
-    >
-    & {
-      notes: RichTextOrEmpty
-      labelXY: XYPosition | null
-      controlPoints: XYPosition[] | undefined | null
-    }
-  >
-
-  export type SequenceStepEdgeData = Simplify<
-    & Base.EdgeData
-    & NonOptional<
-      Pick<
-        DiagramEdge,
-        | 'id'
-        | 'label'
-        | 'technology'
-        | 'points'
-        | 'dir'
-        | 'color'
-        | 'line'
-        | 'head'
-        | 'tail'
-        | 'navigateTo'
-      >
-    >
-    & {
-      notes: RichTextOrEmpty
-      labelXY: XYPosition | null
-      labelBBox: BBox
-      controlPoints: XYPosition[] | undefined | null
-    }
-  >
-
-  export type RelationshipEdge = ReactFlowEdge<RelationshipEdgeData, 'relationship'>
-  export type SequenceStepEdge = ReactFlowEdge<SequenceStepEdgeData, 'seq-step'>
-
-  export type Edge = RelationshipEdge | SequenceStepEdge
-  export type EdgeData = RelationshipEdgeData | SequenceStepEdgeData
-}

package/src/likec4diagram/ui/controls/ChangeAutoLayoutButton.tsx

@@ -1,202 +0,0 @@
-import type { AutoLayoutDirection } from '@likec4/core'
-import {
-  type PopoverProps,
-  Box,
-  Flex,
-  FloatingIndicator,
-  Popover,
-  PopoverDropdown,
-  PopoverTarget,
-  Text,
-  UnstyledButton,
-} from '@mantine/core'
-import {
-  type UseMovePosition,
-  clampUseMovePosition,
-  useHover,
-  useMergedRef,
-  useMove,
-  useUncontrolled,
-} from '@mantine/hooks'
-import { useDebouncedCallback } from '@react-hookz/web'
-import { IconLayoutDashboard } from '@tabler/icons-react'
-import { forwardRef, useState } from 'react'
-import { useDiagramEventHandlers } from '../../../context'
-import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
-import type { DiagramContext } from '../../../state/types'
-import { ActionIcon, Tooltip } from './_shared'
-import * as css from './styles.css'
-
-const selector = (state: DiagramContext) => ({
-  viewId: state.view.id,
-  autoLayout: state.view.autoLayout,
-})
-
-export const ChangeAutoLayoutButton = (props: PopoverProps) => {
-  const {
-    onChange,
-  } = useDiagramEventHandlers()
-  const diagram = useDiagram()
-  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null)
-  const [controlsRefs, setControlsRefs] = useState<Record<AutoLayoutDirection, HTMLButtonElement | null>>({} as any)
-  const {
-    autoLayout,
-    viewId,
-  } = useDiagramContext(selector)
-
-  const { ref, hovered: isSpacingHovered } = useHover()
-
-  const setControlRef = (name: AutoLayoutDirection) => (node: HTMLButtonElement) => {
-    controlsRefs[name] = node
-    setControlsRefs(controlsRefs)
-  }
-
-  const setAutoLayout = (direction: AutoLayoutDirection) => (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation()
-    onChange?.({
-      change: {
-        op: 'change-autolayout',
-        layout: {
-          ...autoLayout,
-          direction,
-        },
-      },
-    })
-  }
-
-  const setSpacing = (nodeSep: number | null, rankSep: number | null) => {
-    // Force fitDiagram
-    diagram.fitDiagram()
-    onChange?.({
-      change: {
-        op: 'change-autolayout',
-        layout: {
-          ...autoLayout,
-          nodeSep,
-          rankSep,
-        },
-      },
-    })
-  }
-
-  return (
-    <Popover
-      position="right-start"
-      clickOutsideEvents={[
-        'pointerdown',
-      ]}
-      radius="xs"
-      shadow="lg"
-      offset={{
-        mainAxis: 10,
-      }}
-      {...props}>
-      <PopoverTarget>
-        <Tooltip label="Change Auto Layout">
-          <ActionIcon>
-            <IconLayoutDashboard />
-          </ActionIcon>
-        </Tooltip>
-      </PopoverTarget>
-      <PopoverDropdown className="likec4-top-left-panel" p={8} pt={6} opacity={isSpacingHovered ? 0.6 : 1}>
-        <Box pos={'relative'} ref={setRootRef}>
-          <FloatingIndicator
-            target={controlsRefs[autoLayout.direction]}
-            parent={rootRef}
-            className={css.autolayoutIndicator}
-          />
-          <Box mb={10}>
-            <Text inline fz={'xs'} c={'dimmed'} fw={500}>Auto layout:</Text>
-          </Box>
-          <Flex gap={2} wrap={'wrap'} justify={'stretch'} maw={160}>
-            <UnstyledButton className={css.autolayoutButton} ref={setControlRef('TB')} onClick={setAutoLayout('TB')}>
-              Top-Bottom
-            </UnstyledButton>
-            <UnstyledButton className={css.autolayoutButton} ref={setControlRef('BT')} onClick={setAutoLayout('BT')}>
-              Bottom-Top
-            </UnstyledButton>
-            <UnstyledButton className={css.autolayoutButton} ref={setControlRef('LR')} onClick={setAutoLayout('LR')}>
-              Left-Right
-            </UnstyledButton>
-            <UnstyledButton className={css.autolayoutButton} ref={setControlRef('RL')} onClick={setAutoLayout('RL')}>
-              Right-Left
-            </UnstyledButton>
-          </Flex>
-          <Box my={10}>
-            <Text inline fz={'xs'} c={'dimmed'} fw={500}>Spacing:</Text>
-          </Box>
-          <SpacingSliders
-            ref={ref}
-            isVertical={autoLayout.direction === 'TB' || autoLayout.direction === 'BT'}
-            key={viewId}
-            nodeSep={autoLayout.nodeSep}
-            rankSep={autoLayout.rankSep}
-            onChange={setSpacing}
-          />
-        </Box>
-      </PopoverDropdown>
-    </Popover>
-  )
-}
-
-const MAX_SPACING = 400
-const SpacingSliders = forwardRef<HTMLDivElement | null, {
-  isVertical: boolean
-  nodeSep: number | undefined
-  rankSep: number | undefined
-  onChange: (nodeSep: number, rankSep: number) => void
-}>(({
-  isVertical,
-  nodeSep,
-  rankSep,
-  onChange,
-}, _ref) => {
-  if (!isVertical) {
-    ;[nodeSep, rankSep] = [rankSep, nodeSep]
-  }
-
-  const propagateChange = useDebouncedCallback(
-    ({ x, y }: UseMovePosition) => {
-      if (!isVertical) {
-        ;[x, y] = [y, x]
-      }
-      onChange(Math.round(x * MAX_SPACING), Math.round(y * MAX_SPACING))
-    },
-    [onChange, isVertical],
-    250,
-    2000,
-  )
-
-  const [value, setValue] = useUncontrolled({
-    defaultValue: clampUseMovePosition({
-      x: (nodeSep ?? 100) / MAX_SPACING,
-      y: (rankSep ?? 120) / MAX_SPACING,
-    }),
-    onChange: propagateChange,
-  })
-
-  const { ref } = useMove(setValue)
-
-  let nodeSepValue = Math.round(value.x * MAX_SPACING)
-  let rankSepValue = Math.round(value.y * MAX_SPACING)
-  if (!isVertical) {
-    ;[nodeSepValue, rankSepValue] = [rankSepValue, nodeSepValue]
-  }
-
-  const mergedRef = useMergedRef(ref, _ref)
-
-  return (
-    <Box ref={mergedRef} className={css.spacingSliderBody} pt={'100%'}>
-      <Box
-        className={css.spacingSliderThumb}
-        style={{
-          left: `${value.x * 100}%`,
-          top: `${value.y * 100}%`,
-        }}
-      />
-      <Box pos={'absolute'} left={2} bottom={2}>
-        <Text component="div" fz={8} c={'dimmed'} fw={500}>{rankSepValue}, {nodeSepValue}</Text>
-      </Box>
-    </Box>
-  )
-})