@likec4/diagram 1.19.2 → 1.20.0

package/src/likec4diagram/custom/nodes/toolbar/ColorButton.tsx

@@ -0,0 +1,175 @@
+import { type ThemeColor, defaultTheme } from '@likec4/core'
+import {
+  type PopoverProps,
+  Button,
+  CheckIcon,
+  ColorSwatch,
+  Divider,
+  Flex,
+  Popover,
+  PopoverDropdown,
+  PopoverTarget,
+  rem,
+  Slider,
+  Space,
+  Stack,
+  Tooltip as MantineTooltip,
+  TooltipGroup,
+} from '@mantine/core'
+import { useUpdateEffect } from '@react-hookz/web'
+import { useState } from 'react'
+import { type ColorKey, type OnStyleChange, type ThemeColorKey, colors, themedColors } from './_shared'
+
+type ColorButtonProps = Omit<PopoverProps, 'onChange'> & {
+  elementColor: ThemeColor
+  elementOpacity?: number | undefined
+  isOpacityEditable?: boolean
+  onColorPreview: (color: ThemeColor | null) => void
+  onChange: OnStyleChange
+}
+
+export function ColorButton({
+  elementColor,
+  elementOpacity,
+  onColorPreview,
+  isOpacityEditable = false,
+  onChange,
+  ...props
+}: ColorButtonProps) {
+  return (
+    <Popover
+      clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
+      position="right-end"
+      offset={2}
+      withinPortal={false}
+      {...props}
+    >
+      <PopoverTarget>
+        <Button variant="subtle" color="gray" size="compact-xs" px={3}>
+          <ColorSwatch
+            color={defaultTheme.elements[elementColor]?.fill}
+            size={14}
+            withShadow
+            style={{ color: '#fff', cursor: 'pointer' }} />
+        </Button>
+      </PopoverTarget>
+      <PopoverDropdown p={'xs'}>
+        <ColorSwatches
+          elementColor={elementColor}
+          onColorPreview={onColorPreview}
+          onChange={(color) => onChange({ color })} />
+        {isOpacityEditable && (
+          <>
+            <Space h={'xs'} />
+            <Divider label="opacity" labelPosition="left" />
+            <Space h={'xs'} />
+            <OpacityOption
+              elementOpacity={elementOpacity}
+              onOpacityChange={(opacity) => {
+                onChange({ opacity })
+              }} />
+          </>
+        )}
+      </PopoverDropdown>
+    </Popover>
+  )
+}
+
+export function ColorSwatches({
+  elementColor,
+  onColorPreview,
+  onChange,
+}: {
+  elementColor: ThemeColor
+  onColorPreview: (color: ThemeColor | null) => void
+  onChange: (color: ThemeColor) => void
+}) {
+  const changeColor = (color: ColorKey | ThemeColorKey) => (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onColorPreview(null)
+    if (elementColor === color) {
+      return
+    }
+    onChange(color)
+  }
+  return (
+    <Stack gap={2} onMouseLeave={() => onColorPreview(null)}>
+      <TooltipGroup openDelay={1000} closeDelay={300}>
+        <Flex maw={120} gap="6" justify="flex-start" align="flex-start" direction="row" wrap="wrap">
+          {themedColors.map(({ key, value }) => (
+            <MantineTooltip
+              key={key}
+              label={key}
+              fz={'xs'}
+              color="dark"
+              offset={2}
+              withinPortal={false}
+              transitionProps={{ duration: 140, transition: 'slide-up' }}>
+              <ColorSwatch
+                color={value}
+                size={18}
+                withShadow
+                onMouseEnter={() => onColorPreview(key)}
+                onClick={changeColor(key)}
+                style={{ color: '#fff', cursor: 'pointer' }}
+              >
+                {elementColor === key && <CheckIcon style={{ width: rem(10), height: rem(10) }} />}
+              </ColorSwatch>
+            </MantineTooltip>
+          ))}
+        </Flex>
+
+        <Flex
+          mt="sm"
+          maw={110}
+          gap="6"
+          justify="flex-start"
+          align="flex-start"
+          direction="row"
+          wrap="wrap">
+          {colors.map(({ key, value }) => (
+            <MantineTooltip
+              key={key}
+              label={key}
+              fz={'xs'}
+              color="dark"
+              offset={2}
+              transitionProps={{ duration: 140, transition: 'slide-up' }}>
+              <ColorSwatch
+                color={value}
+                size={18}
+                onMouseEnter={() => onColorPreview(key)}
+                onClick={changeColor(key)}
+                style={{ color: '#fff', cursor: 'pointer' }}
+              >
+                {elementColor === key && <CheckIcon style={{ width: rem(10), height: rem(10) }} />}
+              </ColorSwatch>
+            </MantineTooltip>
+          ))}
+        </Flex>
+      </TooltipGroup>
+    </Stack>
+  )
+}
+
+export function OpacityOption({
+  elementOpacity = 100,
+  onOpacityChange,
+}: {
+  elementOpacity: number | undefined
+  onOpacityChange: (opacity: number) => void
+}) {
+  const [value, setValue] = useState(elementOpacity)
+  useUpdateEffect(() => {
+    setValue(elementOpacity)
+  }, [elementOpacity])
+
+  return (
+    <Slider
+      size={'sm'}
+      color={'dark'}
+      value={value}
+      onChange={setValue}
+      onChangeEnd={onOpacityChange} />
+  )
+}

package/src/likec4diagram/custom/nodes/toolbar/CompoundToolbar.tsx

@@ -0,0 +1,122 @@
+import { type BorderStyle } from '@likec4/core'
+import { Box, SegmentedControl } from '@mantine/core'
+import { useEffect, useState } from 'react'
+import type { NodeProps } from '../../../../base/types'
+import { useEnabledFeature } from '../../../../context'
+import type { Types } from '../../../types'
+import type { OnStyleChange } from './_shared'
+import { BrowseRelationshipsButton, GoToSourceButton, useHandlers } from './_shared'
+import { ColorButton } from './ColorButton'
+import { Toolbar } from './Toolbar'
+
+type CompoundElementToolbarProps = NodeProps<Types.CompoundElementNodeData>
+export function CompoundElementToolbar(props: CompoundElementToolbarProps) {
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'Vscode')
+  const {
+    data: {
+      style,
+      modelFqn,
+    },
+  } = props
+
+  const { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props)
+
+  return (
+    <Toolbar
+      nodeProps={props}
+      title={modelFqn}
+      align="start">
+      <ColorButton
+        elementColor={elementColor}
+        onColorPreview={onColorPreview}
+        isOpacityEditable
+        elementOpacity={style?.opacity}
+        onChange={onChange}
+        position="left-start"
+      />
+      <BorderStyleOption
+        elementBorderStyle={style?.border}
+        onChange={onChange}
+      />
+      {enableVscode && <GoToSourceButton elementId={modelFqn} />}
+      {enableRelationshipBrowser && <BrowseRelationshipsButton fqn={modelFqn} />}
+    </Toolbar>
+  )
+}
+
+type CompoundDeploymentToolbarProps = NodeProps<Types.CompoundDeploymentNodeData>
+export function CompoundDeploymentToolbar(props: CompoundDeploymentToolbarProps) {
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'Vscode')
+  const {
+    data: {
+      deploymentFqn,
+      style,
+      modelFqn,
+    },
+  } = props
+
+  const { elementColor, onColorPreview, onChange } = useHandlers(deploymentFqn, props)
+
+  return (
+    <Toolbar
+      nodeProps={props}
+      title={deploymentFqn}
+      align="start">
+      <ColorButton
+        elementColor={elementColor}
+        onColorPreview={onColorPreview}
+        isOpacityEditable
+        elementOpacity={style?.opacity}
+        onChange={onChange}
+        position="left-start"
+      />
+      <BorderStyleOption
+        elementBorderStyle={style?.border}
+        onChange={onChange}
+      />
+      {enableVscode && <GoToSourceButton deploymentId={deploymentFqn} />}
+      {enableRelationshipBrowser && modelFqn && <BrowseRelationshipsButton fqn={modelFqn} />}
+    </Toolbar>
+  )
+}
+
+function BorderStyleOption({
+  elementBorderStyle = 'dashed',
+  onChange,
+}: {
+  elementBorderStyle: BorderStyle | undefined
+  onChange: OnStyleChange
+}) {
+  const [value, setValue] = useState(elementBorderStyle)
+  useEffect(() => {
+    setValue(elementBorderStyle)
+  }, [elementBorderStyle])
+
+  return (
+    <Box>
+      <SegmentedControl
+        size="xs"
+        fullWidth
+        withItemsBorders={false}
+        value={value}
+        onChange={v => {
+          const border = v as BorderStyle
+          setValue(border)
+          onChange({ border })
+        }}
+        styles={{
+          label: {
+            paddingTop: 2,
+            paddingBottom: 2,
+          },
+        }}
+        data={[
+          { label: 'Solid', value: 'solid' },
+          { label: 'Dashed', value: 'dashed' },
+          { label: 'Dotted', value: 'dotted' },
+          { label: 'None', value: 'none' },
+        ]}
+      />
+    </Box>
+  )
+}

package/src/likec4diagram/custom/nodes/toolbar/ElementToolbar.tsx

@@ -0,0 +1,140 @@
+import { type ElementShape, ElementShapes } from '@likec4/core'
+import { Button, Menu, MenuDropdown, MenuItem, MenuTarget } from '@mantine/core'
+import { IconCheck, IconSelector } from '@tabler/icons-react'
+import type { NodeProps } from '../../../../base/types'
+import { useEnabledFeature } from '../../../../context'
+import { stopPropagation } from '../../../../utils/xyflow'
+import type { Types } from '../../../types'
+import type { OnStyleChange } from './_shared'
+import { BrowseRelationshipsButton, GoToSourceButton, useHandlers } from './_shared'
+import { ColorButton } from './ColorButton'
+import { Toolbar } from './Toolbar'
+
+type ElementToolbarProps = NodeProps<Types.ElementNodeData>
+export function ElementToolbar(props: ElementToolbarProps) {
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'Vscode')
+  const {
+    data: {
+      shape,
+      modelFqn,
+    },
+  } = props
+
+  const { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props)
+
+  return (
+    <Toolbar
+      nodeProps={props}
+      title={modelFqn}
+      align="start">
+      <ElementShapeButton
+        elementShape={shape}
+        onChange={onChange}
+      />
+      <ColorButton
+        elementColor={elementColor}
+        onColorPreview={onColorPreview}
+        onChange={onChange}
+        position="right-end"
+      />
+      {enableVscode && <GoToSourceButton elementId={modelFqn} />}
+      {enableRelationshipBrowser && <BrowseRelationshipsButton fqn={modelFqn} />}
+    </Toolbar>
+  )
+}
+
+type DeploymentElementToolbarProps = NodeProps<Types.DeploymentElementNodeData>
+export function DeploymentElementToolbar(props: DeploymentElementToolbarProps) {
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'Vscode')
+  const {
+    data: {
+      shape,
+      deploymentFqn,
+      modelFqn,
+    },
+  } = props
+
+  const { elementColor, onColorPreview, onChange } = useHandlers(deploymentFqn, props)
+
+  return (
+    <Toolbar
+      nodeProps={props}
+      title={deploymentFqn}
+      align="start">
+      <ElementShapeButton
+        elementShape={shape}
+        onChange={onChange}
+      />
+      <ColorButton
+        elementColor={elementColor}
+        onColorPreview={onColorPreview}
+        onChange={onChange}
+        position="right-end"
+      />
+      {enableVscode && <GoToSourceButton deploymentId={deploymentFqn} />}
+      {enableRelationshipBrowser && modelFqn && <BrowseRelationshipsButton fqn={modelFqn} />}
+    </Toolbar>
+  )
+}
+
+function ElementShapeButton({
+  elementShape,
+  onChange,
+}: {
+  elementShape: ElementShape
+  onChange: OnStyleChange
+}) {
+  return (
+    <Menu
+      openDelay={300}
+      closeDelay={450}
+      floatingStrategy={'fixed'}
+      closeOnClickOutside
+      clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
+      closeOnEscape
+      closeOnItemClick={false}
+      position="top-start"
+      offset={2}
+      styles={{
+        item: {
+          padding: 'calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-xs)',
+        },
+      }}
+      withinPortal={false}
+    >
+      <MenuTarget>
+        <Button
+          variant="light"
+          color="gray"
+          size="compact-xs"
+          rightSection={<IconSelector size={12} />}
+        >
+          {elementShape}
+        </Button>
+      </MenuTarget>
+      <MenuDropdown
+        // className={css.menuDropdown}
+        // onPointerDownCapture={stopEventPropagation}
+        // onPointerDown={stopEventPropagation}
+        onDoubleClick={stopPropagation}
+        onClick={stopPropagation}
+      >
+        {ElementShapes.map(shape => (
+          <MenuItem
+            fz={12}
+            fw={500}
+            key={shape}
+            value={shape}
+            rightSection={elementShape === shape ? <IconCheck size={12} /> : undefined}
+            onClick={e => {
+              e.stopPropagation()
+              onChange({ shape })
+            }}
+          >
+            {shape}
+          </MenuItem>
+        ))}
+      </MenuDropdown>
+    </Menu>
+  )
+}

package/src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx

@@ -0,0 +1,77 @@
+import { Box, Group, Paper, Stack, Text } from '@mantine/core'
+import { useDebouncedValue } from '@mantine/hooks'
+import { type NodeToolbarProps, NodeToolbar } from '@xyflow/react'
+import clsx from 'clsx'
+import type { ReactNode } from 'react'
+import type { Base } from '../../../../base'
+import { useDiagramContext } from '../../../../hooks/useDiagramContext'
+import { stopPropagation } from '../../../../utils/xyflow'
+import * as css from './styles.css'
+
+export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
+  nodeProps: Base.NodeProps
+  title: ReactNode
+}
+
+const useSelectedNodesCount = () => {
+  return useDiagramContext(s => s.xynodes.filter(x => x.selected).length)
+}
+
+export function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps) {
+  const selectedNodesCount = useSelectedNodesCount()
+  const {
+    selected = false,
+    dragging = false,
+    data: {
+      hovered = false,
+    },
+  } = nodeProps
+
+  const _isToolbarVisible = (hovered && selectedNodesCount === 0) || (selected && selectedNodesCount === 1)
+  let delay = 150
+  if (_isToolbarVisible) {
+    // If the node is selected, we want to show the toolbar with minimal delay
+    if (selected) {
+      delay = 100
+    } else {
+      // If the node is hovered, we want to show the toolbar with a delay
+      delay = 1000
+    }
+  } else {
+    // if there is another node selected, we want to hide the toolbar immediately
+    if (selectedNodesCount > 0) {
+      delay = 50
+    }
+  }
+  // TODO: This is a workaround to prevent the toolbar from flickering when the node unhovered
+  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, delay)
+  return (
+    <NodeToolbar
+      isVisible={!dragging && isToolbarVisible}
+      offset={4}
+      {...props}>
+      <Paper
+        className={clsx('nodrag', 'nopan')}
+        px={5}
+        pb={8}
+        pt={4}
+        radius={'sm'}
+        shadow="xl"
+        // Prevent event bubbling to XYFlow
+        onDoubleClickCapture={stopPropagation}
+        onPointerDown={stopPropagation}
+        onClick={stopPropagation}
+        onDoubleClick={stopPropagation}
+        withBorder>
+        <Stack gap={6}>
+          <Box pl={2}>
+            <Text c="dimmed" className={css.toolbarTitle}>{title}</Text>
+          </Box>
+          <Group gap={4}>
+            {children}
+          </Group>
+        </Stack>
+      </Paper>
+    </NodeToolbar>
+  )
+}

package/src/likec4diagram/custom/nodes/toolbar/_shared.tsx

@@ -0,0 +1,143 @@
+import { type Fqn, type NodeId, type ThemeColor, type ViewChange, defaultTheme, invariant } from '@likec4/core'
+import { ActionIcon, Tooltip as MantineTooltip } from '@mantine/core'
+import { useCallbackRef } from '@mantine/hooks'
+import { IconFileSymlink, IconTransform } from '@tabler/icons-react'
+import { useState } from 'react'
+import { keys } from 'remeda'
+import type { MergeExclusive } from 'type-fest'
+import type { NodeProps } from '../../../../base'
+import { useDiagramEventHandlers } from '../../../../context'
+import { useDiagram } from '../../../../hooks/useDiagram'
+import type { Types } from '../../../types'
+
+export type OnStyleChange = (style: ViewChange.ChangeElementStyle['style']) => void
+
+const {
+  primary,
+  secondary,
+  muted,
+  ...otherColors
+} = defaultTheme.elements
+
+export const themedColors = [
+  { key: 'primary', value: primary.fill },
+  { key: 'secondary', value: secondary.fill },
+  { key: 'muted', value: muted.fill },
+] satisfies Array<{ key: ThemeColor; value: string }>
+
+export const colors = keys(otherColors).map(key => ({
+  key,
+  value: defaultTheme.elements[key].fill,
+}))
+
+export type ThemeColorKey = typeof themedColors[0]['key']
+export type ColorKey = typeof colors[0]['key']
+
+export const Tooltip = MantineTooltip.withProps({
+  color: 'dark',
+  fz: 'xs',
+  openDelay: 400,
+  closeDelay: 150,
+  label: '',
+  children: null,
+  offset: 4,
+  withinPortal: false,
+})
+
+export function useHandlers(
+  target: Fqn,
+  props: NodeProps<Types.NodeData>,
+) {
+  const { onChange: triggerOnChange } = useDiagramEventHandlers()
+  const diagram = useDiagram()
+
+  const [originalColor, setOriginalColor] = useState<ThemeColor | null>(null)
+  const onColorPreview = useCallbackRef((color: ThemeColor | null) => {
+    if (color === null) {
+      invariant(originalColor, 'originalColor is null')
+      setOriginalColor(null)
+      diagram.updateNodeData(props.id as NodeId, {
+        color: originalColor,
+      })
+      return
+    }
+    setOriginalColor(value => value ?? props.data.color as ThemeColor)
+    diagram.updateNodeData(props.id as NodeId, {
+      color,
+    })
+  })
+
+  const onChange: OnStyleChange = useCallbackRef((change) => {
+    triggerOnChange?.({
+      change: {
+        op: 'change-element-style',
+        style: change,
+        targets: [target],
+      },
+    })
+    const { shape, color, ...style } = change
+    diagram.updateNodeData(props.id as NodeId, {
+      ...(shape && { shape }),
+      ...(color && { color }),
+      style,
+    })
+  })
+
+  return {
+    elementColor: originalColor ?? props.data.color as ThemeColor,
+    onColorPreview,
+    onChange,
+  }
+}
+
+export function BrowseRelationshipsButton({ fqn }: { fqn: Fqn }) {
+  const diagram = useDiagram()
+  return (
+    <Tooltip label={'Browse relationships'}>
+      <ActionIcon
+        size={'sm'}
+        variant="subtle"
+        color="gray"
+        onClick={e => {
+          e.stopPropagation()
+          diagram.openRelationshipsBrowser(fqn)
+        }}>
+        <IconTransform
+          stroke={2}
+          style={{
+            width: '72%',
+            height: '72%',
+          }} />
+      </ActionIcon>
+    </Tooltip>
+  )
+}
+
+export function GoToSourceButton(props: MergeExclusive<{ elementId: Fqn }, { deploymentId: Fqn }>) {
+  const { onOpenSource } = useDiagramEventHandlers()
+  if (!onOpenSource) return null
+  // const diagramApi = useDiagramStoreApi()
+  // const portalProps = useMantinePortalProps()
+  return (
+    <Tooltip label={'Open source'}>
+      <ActionIcon
+        size={'sm'}
+        variant="subtle"
+        color="gray"
+        onClick={e => {
+          e.stopPropagation()
+          if (props.elementId) {
+            onOpenSource?.({
+              element: props.elementId,
+            })
+          } else if (props.deploymentId) {
+            onOpenSource?.({
+              deployment: props.deploymentId,
+            })
+          }
+        }}>
+        <IconFileSymlink stroke={1.8} style={{ width: '70%' }} />
+      </ActionIcon>
+    </Tooltip>
+  )
+}

package/src/likec4diagram/custom/nodes/toolbar/styles.css.ts

@@ -0,0 +1,9 @@
+import { rem } from '@mantine/core'
+import { style } from '@vanilla-extract/css'
+
+export const toolbarTitle = style({
+  fontSize: rem(10),
+  fontWeight: 600,
+  cursor: 'default',
+  userSelect: 'all',
+})

package/src/likec4diagram/state/actorContext.ts

@@ -0,0 +1,8 @@
+import { createActorContext } from '@xstate/react'
+import { diagramMachine } from './machine'
+
+export const {
+  Provider: LikeC4ViewMachineContextProvider,
+  useSelector,
+  useActorRef,
+} = createActorContext(diagramMachine)