@likec4/diagram 1.17.1 → 1.18.0

package/src/ui/OptionsPanel.tsx

@@ -1,70 +0,0 @@
-import { Card } from '@mantine/core'
-import { useOnSelectionChange } from '@xyflow/react'
-import clsx from 'clsx'
-import { deepEqual as eq } from 'fast-equals'
-import { AnimatePresence, m } from 'framer-motion'
-import { useState } from 'react'
-import { useDiagramState } from '../hooks/useDiagramState'
-import { NodeOptions } from './options/NodeOptions'
-import * as styles from './OptionsPanel.css'
-
-/**
- * @deprecated
- */
-export function OptionsPanel() {
-  const { isFocused, viewId } = useDiagramState(s => ({
-    viewId: s.view.id,
-    isFocused: s.focusedNodeId !== null || s.activeWalkthrough !== null
-  }))
-  const [selected, setSelected] = useState<{
-    nodes: string[]
-    edges: string[]
-  }>({
-    nodes: [],
-    edges: []
-  })
-  useOnSelectionChange({
-    onChange: ({ nodes, edges }) => {
-      const newSelected = {
-        nodes: nodes.map(n => n.id).sort(),
-        edges: edges.map(e => e.id).sort()
-      }
-      if (!eq(selected, newSelected)) {
-        setSelected(newSelected)
-      }
-    }
-  })
-  const { nodes } = selected
-  // const hasAnySelection = !isFocused && (nodes.length > 0 || edges.length > 0)
-  const hasAnySelection = !isFocused && nodes.length > 0
-  return (
-    <AnimatePresence mode="wait">
-      {hasAnySelection && (
-        <m.div
-          key={viewId}
-          initial={{ opacity: 0, scale: 0.85 }}
-          animate={{ opacity: 1, scale: 1 }}
-          exit={{
-            opacity: 0,
-            scale: 0.85
-          }}
-          transition={{ duration: 0.14 }}
-          className={clsx('react-flow__panel', styles.panel)}
-          style={{
-            transformOrigin: 'center right',
-            maxWidth: '320px'
-          }}
-        >
-          <Card shadow="md">
-            {nodes.length > 0 && <NodeOptions selectedNodeIds={nodes} />}
-            {
-              /* nodes.length === 0 && edges.length > 0 && (
-              <EdgeOptions selectedEdgeIds={edges} />
-            ) */
-            }
-          </Card>
-        </m.div>
-      )}
-    </AnimatePresence>
-  )
-}

package/src/ui/options/EdgeOptions.tsx

@@ -1,142 +0,0 @@
-import { DefaultRelationshipColor, defaultTheme, type NonEmptyArray, type ThemeColor } from '@likec4/core'
-import { CheckIcon, ColorSwatch, Divider, Flex, rem, Stack, Text, Tooltip, TooltipGroup } from '@mantine/core'
-import { shallowEqual } from 'fast-equals'
-import { memo } from 'react'
-import { hasAtLeast, keys, takeWhile } from 'remeda'
-import { useDiagramStoreApi, useXYEdgesData } from '../../hooks'
-import { type XYFlowEdge } from '../../xyflow/types'
-
-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']
-
-type XYEdgeData = Pick<XYFlowEdge, 'id' | 'data'>
-
-export const EdgeOptions = memo<{ selectedEdgeIds: string[] }>(({ selectedEdgeIds }) => {
-  const diagramApi = useDiagramStoreApi()
-  const edges = useXYEdgesData(selectedEdgeIds)
-  if (!hasAtLeast(edges, 1)) {
-    return null
-  }
-  if (edges.length !== selectedEdgeIds.length) {
-    throw new Error('EdgeOptions: edges and props.edges should have the same length')
-  }
-  const [firstEdge, ...rest] = edges
-
-  return (
-    <Stack gap={'xs'}>
-      <div>
-        <Text fz={rem(9)} fw={'500'} c={'dimmed'}>
-          RELATIONSHIP{rest.length > 0 ? 'S' : ''}
-        </Text>
-        <Text size="xs" c={rest.length > 0 ? 'dimmed' : ''} truncate>
-          {rest.length === 0 ? firstEdge.data.edge.label : `[ multiple ]`}
-        </Text>
-      </div>
-      {
-        /* {showShapeOption && (
-        <ShapeOption
-          nodes={edges}
-          onShapeChange={(shape: ElementShape) => {
-            triggerChange({ shape })
-          }} />
-      )} */
-      }
-      <Colors
-        edges={edges}
-        onColorChange={(_color: ColorKey | ThemeColorKey) => {
-          // triggerChange({ color })
-        }} />
-    </Stack>
-  )
-}, (prevProps, nextProps) => shallowEqual(prevProps.selectedEdgeIds, nextProps.selectedEdgeIds))
-
-function Colors({
-  edges: [firstEdge, ...edges],
-  onColorChange
-}: {
-  edges: NonEmptyArray<XYEdgeData>
-  onColorChange: (color: ColorKey | ThemeColorKey) => void
-}) {
-  let selectedColor = (firstEdge.data.edge.color ?? DefaultRelationshipColor) as ThemeColor | null
-  takeWhile(edges, edge => {
-    const color = edge.data.edge.color ?? DefaultRelationshipColor
-    if (color !== selectedColor) {
-      selectedColor = null
-      return false
-    }
-    return true
-  })
-  const changeColor = (color: ColorKey | ThemeColorKey) => () => {
-    if (selectedColor === color) {
-      return
-    }
-    onColorChange(color)
-  }
-  return (
-    <div>
-      <TooltipGroup openDelay={400} closeDelay={300}>
-        <Divider label="color" labelPosition="left" />
-        <Flex mt={'xs'} maw={150} gap="xs" justify="flex-start" align="flex-start" direction="row" wrap="wrap">
-          {themedColors.map(({ key, value }) => (
-            <Tooltip
-              key={key}
-              label={key}
-              fz={'xs'}
-              color="dark"
-              offset={2}
-              transitionProps={{ duration: 140, transition: 'slide-up' }}>
-              <ColorSwatch
-                color={value}
-                size={20}
-                withShadow
-                onClick={changeColor(key)}
-                style={{ color: '#fff', cursor: 'pointer' }}
-              >
-                {selectedColor === key && <CheckIcon style={{ width: rem(12), height: rem(12) }} />}
-              </ColorSwatch>
-            </Tooltip>
-          ))}
-        </Flex>
-
-        <Flex mt="sm" maw={150} gap="xs" justify="flex-start" align="flex-start" direction="row" wrap="wrap">
-          {colors.map(({ key, value }) => (
-            <Tooltip
-              key={key}
-              label={key}
-              fz={'xs'}
-              color="dark"
-              offset={2}
-              transitionProps={{ duration: 140, transition: 'slide-up' }}>
-              <ColorSwatch
-                color={value}
-                size={20}
-                onClick={changeColor(key)}
-                style={{ color: '#fff', cursor: 'pointer' }}
-              >
-                {selectedColor === key && <CheckIcon style={{ width: rem(12), height: rem(12) }} />}
-              </ColorSwatch>
-            </Tooltip>
-          ))}
-        </Flex>
-      </TooltipGroup>
-    </div>
-  )
-}

package/src/ui/options/NodeOptions.tsx

@@ -1,362 +0,0 @@
-import {
-  type BorderStyle,
-  defaultTheme,
-  type ElementShape,
-  ElementShapes,
-  invariant,
-  type NonEmptyArray,
-  type ThemeColor,
-  type ViewChange
-} from '@likec4/core'
-import {
-  ActionIcon,
-  Box,
-  CheckIcon,
-  ColorSwatch,
-  Divider,
-  Flex,
-  Group,
-  rem,
-  SegmentedControl,
-  Select,
-  Slider,
-  Space,
-  Stack,
-  Text,
-  Tooltip,
-  TooltipGroup
-} from '@mantine/core'
-import { IconFileSymlink } from '@tabler/icons-react'
-import { shallowEqual } from 'fast-equals'
-import { memo, useState } from 'react'
-import { hasAtLeast, keys, takeWhile } from 'remeda'
-import { useDiagramStoreApi, useXYNodesData } from '../../hooks'
-import { useUpdateEffect } from '../../hooks/useUpdateEffect'
-import { XYFlowNode } from '../../xyflow/types'
-
-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']
-
-type XYNodesData = Pick<XYFlowNode, 'id' | 'data' | 'type'>
-
-/**
- * @deprecated
- */
-export const NodeOptions = memo<{ selectedNodeIds: string[] }>(({ selectedNodeIds }) => {
-  // export function NodeOptions(props: { nodes: XYFlowNode[] }) {
-  const diagramApi = useDiagramStoreApi()
-  // const nodes = useXYNodesData(props.nodes.map(node => node.id))
-  const nodes = useXYNodesData(selectedNodeIds)
-  if (!hasAtLeast(nodes, 1)) {
-    return null
-  }
-  if (nodes.length !== selectedNodeIds.length) {
-    throw new Error('NodeOptions: nodes and props.nodes should have the same length')
-  }
-  // Makes sense to show shape option only if there is at least one element node
-  const showShapeOption = nodes.some(node => node.type === 'element')
-
-  const [firstNode, ...rest] = nodes
-
-  const showGoToSource = rest.length === 0 && diagramApi.getState().onOpenSourceElement!!
-
-  // Makes sense to show opacity option only if there is at least one compound node
-  const showOpacityOption = firstNode.type === 'compound'
-    && (rest.length === 0 || rest.every(node => node.type === 'compound'))
-
-  const triggerChange = (style: ViewChange.ChangeElementStyle['style']) => {
-    const targets = nodes.map(node => node.data.element.id)
-    invariant(hasAtLeast(targets, 1), 'At least one target is required')
-    diagramApi.getState().triggerChangeElementStyle({
-      op: 'change-element-style',
-      style,
-      targets
-    })
-  }
-
-  return (
-    <Stack gap={'xs'}>
-      <Group wrap="nowrap" align="flex-start">
-        <Box flex={1} miw={0}>
-          <Text fz={rem(9)} fw={'500'} c={'dimmed'}>
-            ELEMENT{rest.length > 0 ? 'S' : ``}
-          </Text>
-          <Text size="xs" c={rest.length > 0 ? 'dimmed' : ''} truncate>
-            {rest.length === 0 ? firstNode.data.element.title : `[ multiple ]`}
-          </Text>
-        </Box>
-        {showGoToSource && (
-          <Box flex={0}>
-            <ActionIcon
-              size={'sm'}
-              variant="light"
-              color="gray"
-              onClick={e => {
-                e.stopPropagation()
-                diagramApi.getState().onOpenSourceElement?.(firstNode.data.element.id)
-              }}>
-              <IconFileSymlink
-                stroke={1.2}
-                style={{
-                  width: '70%',
-                  height: '70%'
-                }} />
-            </ActionIcon>
-          </Box>
-        )}
-      </Group>
-      {showShapeOption && (
-        <ShapeOption
-          nodes={nodes}
-          onShapeChange={(shape: ElementShape) => {
-            triggerChange({ shape })
-          }} />
-      )}
-      <Colors
-        nodes={nodes}
-        onColorChange={(color: ColorKey | ThemeColorKey) => {
-          triggerChange({ color })
-        }} />
-
-      {showOpacityOption && (
-        <div key={firstNode.id}>
-          <Divider label="opacity and border" labelPosition="left" />
-          <Space h={'xs'} />
-          <OpacityOption
-            node={firstNode}
-            onOpacityChange={(opacity: number) => {
-              triggerChange({ opacity })
-            }} />
-          <Space h={'sm'} />
-          <BorderStyleOption
-            node={firstNode}
-            onChange={(border: BorderStyle) => {
-              triggerChange({ border })
-            }}
-          />
-        </div>
-      )}
-      <NavigateToOption nodes={nodes} />
-    </Stack>
-  )
-}, (prevProps, nextProps) => shallowEqual(prevProps.selectedNodeIds, nextProps.selectedNodeIds))
-
-function Colors({
-  nodes: [firstNode, ...nodes],
-  onColorChange
-}: {
-  nodes: NonEmptyArray<XYNodesData>
-  onColorChange: (color: ColorKey | ThemeColorKey) => void
-}) {
-  let selectedColor = firstNode.data.element.color as ThemeColor | null
-  takeWhile(nodes, node => {
-    if (node.data.element.color !== selectedColor) {
-      selectedColor = null
-      return false
-    }
-    return true
-  })
-  const changeColor = (color: ColorKey | ThemeColorKey) => () => {
-    if (selectedColor === color) {
-      return
-    }
-    onColorChange(color)
-  }
-  return (
-    <div>
-      <TooltipGroup openDelay={400} closeDelay={300}>
-        <Divider label="color" labelPosition="left" />
-        <Flex mt={'xs'} maw={150} gap="xs" justify="flex-start" align="flex-start" direction="row" wrap="wrap">
-          {themedColors.map(({ key, value }) => (
-            <Tooltip
-              key={key}
-              label={key}
-              fz={'xs'}
-              color="dark"
-              offset={2}
-              transitionProps={{ duration: 140, transition: 'slide-up' }}>
-              <ColorSwatch
-                color={value}
-                size={20}
-                withShadow
-                onClick={changeColor(key)}
-                style={{ color: '#fff', cursor: 'pointer' }}
-              >
-                {selectedColor === key && <CheckIcon style={{ width: rem(12), height: rem(12) }} />}
-              </ColorSwatch>
-            </Tooltip>
-          ))}
-        </Flex>
-
-        <Flex mt="sm" maw={150} gap="xs" justify="flex-start" align="flex-start" direction="row" wrap="wrap">
-          {colors.map(({ key, value }) => (
-            <Tooltip
-              key={key}
-              label={key}
-              fz={'xs'}
-              color="dark"
-              offset={2}
-              transitionProps={{ duration: 140, transition: 'slide-up' }}>
-              <ColorSwatch
-                color={value}
-                size={20}
-                onClick={changeColor(key)}
-                style={{ color: '#fff', cursor: 'pointer' }}
-              >
-                {selectedColor === key && <CheckIcon style={{ width: rem(12), height: rem(12) }} />}
-              </ColorSwatch>
-            </Tooltip>
-          ))}
-        </Flex>
-      </TooltipGroup>
-    </div>
-  )
-}
-
-function ShapeOption({
-  nodes: [firstNode, ...nodes],
-  onShapeChange
-}: {
-  nodes: NonEmptyArray<XYNodesData>
-  onShapeChange: (shape: ElementShape) => void
-}) {
-  let selectedShape = firstNode.data.element.shape as ElementShape | null
-  takeWhile(nodes, node => {
-    if (node.data.element.shape !== selectedShape) {
-      selectedShape = null
-      return false
-    }
-    return true
-  })
-
-  return (
-    <div>
-      <Divider label="shape" labelPosition="left" />
-      <Select
-        mt={'xs'}
-        size="xs"
-        variant="filled"
-        value={selectedShape}
-        placeholder={'[ multiple ]'}
-        data={ElementShapes}
-        allowDeselect={false}
-        checkIconPosition="right"
-        onChange={(value) => {
-          if (!value || value === selectedShape) {
-            return
-          }
-          onShapeChange(value as ElementShape)
-        }} />
-    </div>
-  )
-}
-
-function NavigateToOption({
-  nodes: [node, ...nodes]
-}: {
-  nodes: NonEmptyArray<XYNodesData>
-}) {
-  const isMultiple = nodes.length >= 1
-  return (
-    <div>
-      <Divider label="navigate to" labelPosition="left" />
-      {isMultiple && (
-        <Text size="xs" c={'dimmed'}>
-          {'[ multiple ]'}
-        </Text>
-      )}
-      {!isMultiple && (
-        <>
-          <Space h={'xs'} />
-          <Select
-            size="xs"
-            variant="filled"
-            value={node.data.element.navigateTo ?? null}
-            placeholder={'select'}
-            data={node.data.element.navigateTo
-              ? [{ value: node.data.element.navigateTo, label: node.data.element.navigateTo }]
-              : []}
-            allowDeselect={true}
-            checkIconPosition="right"
-          />
-        </>
-      )}
-    </div>
-  )
-}
-
-function OpacityOption({
-  node,
-  onOpacityChange
-}: {
-  node: XYNodesData
-  onOpacityChange: (opacity: number) => void
-}) {
-  let selectedOpacity = node.data.element.style.opacity ?? 100
-  const [value, setValue] = useState(selectedOpacity)
-  useUpdateEffect(() => {
-    setValue(selectedOpacity)
-  }, [selectedOpacity])
-
-  return (
-    <Slider
-      size={'sm'}
-      color={'dark'}
-      value={value}
-      onChange={setValue}
-      onChangeEnd={onOpacityChange} />
-  )
-}
-
-function BorderStyleOption({
-  node,
-  onChange
-}: {
-  node: XYNodesData
-  onChange: (borderStyle: BorderStyle) => void
-}) {
-  let selecteBorderStyle = node.data.element.style.border ?? 'dashed'
-  const [value, setValue] = useState(selecteBorderStyle)
-  useUpdateEffect(() => {
-    setValue(selecteBorderStyle)
-  }, [selecteBorderStyle])
-
-  return (
-    <Box>
-      <SegmentedControl
-        size="xs"
-        fullWidth
-        withItemsBorders={false}
-        value={value}
-        onChange={v => {
-          setValue(v as BorderStyle)
-          onChange(v as BorderStyle)
-        }}
-        data={[
-          { label: 'Solid', value: 'solid' },
-          { label: 'Dashed', value: 'dashed' },
-          { label: 'Dotted', value: 'dotted' },
-          { label: 'None', value: 'none' }
-        ]}
-      />
-    </Box>
-  )
-}

package/src/xyflow/nodes/element/ElementDetails.css.ts

@@ -1,101 +0,0 @@
-import { createVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine, vars, whereDark, whereLight } from '../../../theme-vars'
-
-const bg = createVar('bg')
-
-export const container = style({
-  backgroundColor: mantine.colors.body,
-  pointerEvents: 'all',
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  zIndex: 100,
-  vars: {
-    [bg]: `linear-gradient(180deg, ${vars.element.fill}, ${vars.element.fill} 3px, transparent 3px)`
-  },
-  backgroundImage: bg,
-  selectors: {
-    [`${whereDark} &`]: {
-      backgroundColor: mantine.colors.dark[6],
-      vars: {
-        [bg]: `
-        linear-gradient(180deg, color-mix(in srgb, ${vars.element.fill} 10%, transparent), transparent 60px),
-        linear-gradient(180deg, ${vars.element.fill}, ${vars.element.fill} 3px, transparent 3px)
-      `
-      }
-    }
-  }
-})
-
-export const noPointerEvents = style({
-  pointerEvents: 'none'
-})
-
-export const fqn = style({
-  display: 'inline-block',
-  fontSize: mantine.fontSizes.xs,
-  fontWeight: 500,
-  whiteSpace: 'nowrap',
-  padding: '3px 5px',
-  borderRadius: 2,
-  background: `color-mix(in srgb , ${vars.element.fill},  transparent 25%)`,
-  lineHeight: 1.2,
-  color: vars.element.hiContrast,
-  selectors: {
-    [`${whereDark} &`]: {
-      // background: `color-mix(in srgb , ${vars.element.fill},  transparent 45%)`,
-      // color: vars.element.loContrast
-    }
-  }
-})
-
-export const edgeNum = style({
-  display: 'inline-block',
-  fontSize: mantine.fontSizes.sm,
-  fontWeight: 600,
-  padding: '1px 5px',
-  minWidth: 24,
-  textAlign: 'center',
-  borderRadius: mantine.radius.sm,
-  background: mantine.colors.dark[7],
-  color: mantine.colors.defaultColor,
-  selectors: {
-    [`${whereLight} &`]: {
-      background: mantine.colors.gray[4],
-      color: mantine.colors.dark[6]
-    },
-    [`&[data-zero]`]: {
-      color: mantine.colors.dimmed
-    },
-    [`${whereLight} &[data-zero]`]: {
-      background: mantine.colors.gray[3]
-    },
-    [`&[data-missing]`]: {
-      color: mantine.colors.orange[4],
-      background: `color-mix(in srgb, ${mantine.colors.orange[8]} 20%, transparent)`
-    },
-    [`${whereLight} &[data-missing]`]: {
-      color: mantine.colors.orange[8]
-    }
-  }
-})
-
-export const viewButton = style({
-  paddingLeft: 2,
-  height: 'auto'
-})
-
-globalStyle(`${viewButton} .mantine-Button-label`, {
-  color: mantine.colors.text,
-  fontWeight: 500,
-  flexDirection: 'column',
-  alignItems: 'flex-start'
-})
-globalStyle(`${viewButton} .tabler-icon`, {
-  width: '75%',
-  opacity: 0.75
-})
-
-globalStyle(`${whereLight} ${viewButton} .mantine-Button-label`, {
-  color: mantine.colors.dark[3]
-})