@likec4/diagram 1.40.0 → 1.42.0

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

@@ -1,129 +0,0 @@
-import { type NodeId } from '@likec4/core'
-import type { NodeProps } from '../../../base'
-import {
-  CompoundDetailsButton,
-  CompoundNodeContainer,
-  CompoundTitle,
-  DefaultHandles,
-  ElementDetailsButton,
-  ElementNodeContainer,
-  ElementShape,
-  ElementTags,
-  ElementTitle,
-} from '../../../base/primitives'
-import { useEnabledFeatures } from '../../../context/DiagramFeatures'
-import type { CustomNodes as CustomNodesType } from '../../../custom/customNodes'
-import { useDiagram } from '../../../hooks/useDiagram'
-import type { Types } from '../../types'
-import { CompoundActions } from './CompoundActions'
-import { DeploymentElementActions, ElementActions } from './ElementActions'
-import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar'
-import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar'
-
-export type CustomNodes = Required<CustomNodesType>
-
-export function ElementDetailsButtonWithHandler(
-  props: NodeProps<Types.ElementNodeData | Types.DeploymentElementNodeData>,
-) {
-  const { enableElementDetails } = useEnabledFeatures()
-  const diagram = useDiagram()
-  const fqn = props.data.modelFqn
-
-  if (!enableElementDetails || !fqn) return null
-
-  return (
-    <ElementDetailsButton
-      {...props}
-      onClick={e => {
-        e.stopPropagation()
-        diagram.openElementDetails(fqn, props.id as NodeId)
-      }} />
-  )
-}
-
-export function CompoundDetailsButtonWithHandler(
-  props: NodeProps<Types.CompoundElementNodeData | Types.CompoundDeploymentNodeData>,
-) {
-  const { enableElementDetails } = useEnabledFeatures()
-  const diagram = useDiagram()
-  const fqn = props.data.modelFqn
-
-  if (!enableElementDetails || !fqn) return null
-
-  return (
-    <CompoundDetailsButton
-      {...props}
-      onClick={e => {
-        e.stopPropagation()
-        diagram.openElementDetails(fqn, props.id as NodeId)
-      }} />
-  )
-}
-
-export const ElementNode: CustomNodes['element'] = (props) => {
-  const { enableElementTags, enableReadOnly } = useEnabledFeatures()
-  return (
-    <ElementNodeContainer nodeProps={props}>
-      <ElementShape {...props} />
-      <ElementTitle {...props} />
-      {enableElementTags && <ElementTags {...props} />}
-      <ElementActions {...props} />
-      <ElementDetailsButtonWithHandler {...props} />
-      {!enableReadOnly && <ElementToolbar {...props} />}
-      <DefaultHandles />
-    </ElementNodeContainer>
-  )
-}
-ElementNode.displayName = 'ElementNode'
-
-export const DeploymentNode: CustomNodes['deployment'] = (props) => {
-  const { enableElementTags, enableReadOnly } = useEnabledFeatures()
-  return (
-    <ElementNodeContainer nodeProps={props}>
-      <ElementShape {...props} />
-      <ElementTitle {...props} />
-      {enableElementTags && <ElementTags {...props} />}
-      <DeploymentElementActions {...props} />
-      <ElementDetailsButtonWithHandler {...props} />
-      {!enableReadOnly && <DeploymentElementToolbar {...props} />}
-      <DefaultHandles />
-    </ElementNodeContainer>
-  )
-}
-DeploymentNode.displayName = 'DeploymentNode'
-
-export const CompoundElementNode: CustomNodes['compoundElement'] = (props) => {
-  const { enableElementDetails, enableReadOnly } = useEnabledFeatures()
-  return (
-    <CompoundNodeContainer nodeProps={props}>
-      <CompoundTitle {...props} />
-      <CompoundActions {...props} />
-      {enableElementDetails && <CompoundDetailsButtonWithHandler {...props} />}
-      {!enableReadOnly && <CompoundElementToolbar {...props} />}
-      <DefaultHandles />
-    </CompoundNodeContainer>
-  )
-}
-CompoundElementNode.displayName = 'CompoundElementNode'
-
-export const CompoundDeploymentNode: CustomNodes['compoundDeployment'] = (props) => {
-  const { enableElementDetails, enableReadOnly } = useEnabledFeatures()
-  return (
-    <CompoundNodeContainer nodeProps={props}>
-      <CompoundTitle {...props} />
-      <CompoundActions {...props} />
-      {enableElementDetails && <CompoundDetailsButtonWithHandler {...props} />}
-      {!enableReadOnly && <CompoundDeploymentToolbar {...props} />}
-      <DefaultHandles />
-    </CompoundNodeContainer>
-  )
-}
-CompoundDeploymentNode.displayName = 'CompoundDeploymentNode'
-
-export const ViewGroupNode: CustomNodes['viewGroup'] = (props) => (
-  <CompoundNodeContainer nodeProps={props}>
-    <CompoundTitle {...props} />
-    <DefaultHandles />
-  </CompoundNodeContainer>
-)
-ViewGroupNode.displayName = 'ViewGroupNode'

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

@@ -1,175 +0,0 @@
-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

@@ -1,122 +0,0 @@
-import { type BorderStyle } from '@likec4/core'
-import { Box, SegmentedControl } from '@mantine/core'
-import { useEffect, useState } from 'react'
-import type { NodeProps } from '../../../../base/types'
-import { useEnabledFeatures } from '../../../../context/DiagramFeatures'
-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 } = useEnabledFeatures()
-  const {
-    data: {
-      style,
-      modelFqn,
-    },
-  } = props
-
-  const { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props)
-  const opacity = style?.opacity ?? 100
-  return (
-    <Toolbar
-      nodeProps={props}
-      title={modelFqn}
-      align="start">
-      <ColorButton
-        elementColor={elementColor}
-        onColorPreview={onColorPreview}
-        isOpacityEditable
-        elementOpacity={opacity}
-        onChange={onChange}
-        position="left-start"
-      />
-      <BorderStyleOption
-        elementBorderStyle={style?.border ?? (opacity < 99 ? 'dashed' : 'none')}
-        onChange={onChange}
-      />
-      {enableVscode && <GoToSourceButton elementId={modelFqn} />}
-      {enableRelationshipBrowser && <BrowseRelationshipsButton fqn={modelFqn} />}
-    </Toolbar>
-  )
-}
-
-type CompoundDeploymentToolbarProps = NodeProps<Types.CompoundDeploymentNodeData>
-export function CompoundDeploymentToolbar(props: CompoundDeploymentToolbarProps) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures()
-  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: '0.5',
-            paddingBottom: '0.5',
-          },
-        }}
-        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

@@ -1,140 +0,0 @@
-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 { useEnabledFeatures } from '../../../../context/DiagramFeatures'
-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 } = useEnabledFeatures()
-  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 } = useEnabledFeatures()
-  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

@@ -1,82 +0,0 @@
-import { cx as clsx } from '@likec4/styles/css'
-import { Box, Group, Paper, Stack, Text } from '@mantine/core'
-import { useDebouncedValue } from '@mantine/hooks'
-import { type NodeToolbarProps, NodeToolbar } from '@xyflow/react'
-import type { ReactNode } from 'react'
-import type { NodeProps } from '../../../../base/types'
-import { useDiagramContext } from '../../../../hooks/useDiagram'
-import { stopPropagation } from '../../../../utils/xyflow'
-import type { Types } from '../../../types'
-import * as styles from './styles.css'
-
-export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
-  nodeProps: NodeProps<Types.NodeData>
-  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)
-  if (!isToolbarVisible) {
-    return null
-  }
-
-  return (
-    <NodeToolbar
-      isVisible={!dragging}
-      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={'6px'}>
-          <Box px={'4px'}>
-            <Text className={styles.toolbarTitle}>{title}</Text>
-          </Box>
-          <Group gap={4}>
-            {children}
-          </Group>
-        </Stack>
-      </Paper>
-    </NodeToolbar>
-  )
-}