@likec4/diagram 1.3.0 → 1.5.0

package/src/ui/DiagramTitlePanel.tsx

@@ -1,8 +1,9 @@
-import { Anchor, Box, Button, CopyButton, Group, Paper, Spoiler, Stack, Text } from '@mantine/core'
+import { Anchor, Box, Button, Card, CardSection, CopyButton, Group, Spoiler, Stack, Text } from '@mantine/core'
 import { useLocalStorage } from '@mantine/hooks'
+import { IconMenu } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
-import { type DiagramState, useDiagramState } from '../state'
+import { type DiagramState, useDiagramState } from '../state/hooks'
 import * as css from './DiagramTitlePanel.css'
 
 const selector = (s: DiagramState) => ({
@@ -35,103 +36,116 @@ export default function DiagramTitlePanel() {
           transformOrigin: 'left center'
         }}
       >
-        <Paper
+        <Card
           radius="sm"
-          withBorder={!isCollapsed}
-          className={css.paper}
-          p={isCollapsed ? 'xs' : 'lg'}
+          className={css.card}
+          withBorder
+          p={'md'}
+          pb={isCollapsed ? 'sm' : 'md'}
           onDoubleClick={e => e.stopPropagation()}>
-          <Stack gap={'sm'} justify="stretch" align="stretch">
-            <Group justify="stretch" wrap="nowrap" onClick={toggle} style={{ cursor: 'pointer' }}>
-              <Text
-                component={'div'}
-                flex={'1'}
-                size={isCollapsed ? 'sm' : 'lg'}
-                fw={500}
-                lh={1.1}
-                className={css.title}
-              >
-                {title}
-              </Text>
-              <Text
-                hidden={isCollapsed}
-                component={'div'}
-                flex={'0 0 auto'}
-                inline
-                size="xs"
-                fz={9}
-                fw={500}
-                c={'dimmed'}
-                style={{
-                  userSelect: 'all'
-                }}>
-                <span style={{ userSelect: 'none' }}>id:{' '}</span>
-                {id}
-              </Text>
-            </Group>
-            {!isCollapsed && (
-              <>
-                {description && (
-                  <Spoiler
-                    maxHeight={42}
-                    showLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">show more</Button>}
-                    hideLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">hide</Button>}>
-                    <Text
-                      component={'div'}
-                      size="sm"
-                      className={css.description}>
-                      {description || 'no description'}
-                    </Text>
-                  </Spoiler>
-                )}
-                {!description && (
+          <CardSection mb={isCollapsed ? 10 : 'sm'}>
+            <Button
+              fullWidth
+              size="xs"
+              h={'sm'}
+              py={2}
+              radius={'0'}
+              variant={isCollapsed ? 'light' : 'subtle'}
+              color="gray"
+              onClick={toggle}
+            >
+              <IconMenu size={11} opacity={0.7} />
+            </Button>
+          </CardSection>
+          <Group justify="stretch" wrap="nowrap" mb={isCollapsed ? 0 : 'sm'}>
+            <Text
+              component={'div'}
+              flex={'1'}
+              size={isCollapsed ? 'sm' : 'lg'}
+              fw={500}
+              lh={1.1}
+              className={css.title}
+            >
+              {title}
+            </Text>
+            <Text
+              hidden={isCollapsed}
+              component={'div'}
+              flex={'0 0 auto'}
+              inline
+              size="xs"
+              fz={9}
+              fw={500}
+              c={'dimmed'}
+              style={{
+                userSelect: 'all'
+              }}>
+              <span style={{ userSelect: 'none' }}>id:{' '}</span>
+              {id}
+            </Text>
+          </Group>
+          {!isCollapsed && (
+            <>
+              {description && (
+                <Spoiler
+                  maxHeight={42}
+                  showLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">show more</Button>}
+                  hideLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">hide</Button>}>
                   <Text
                     component={'div'}
-                    size="xs"
-                    c={'dimmed'}>
-                    no description
+                    size="sm"
+                    className={css.description}>
+                    {description || 'no description'}
                   </Text>
-                )}
-                {links && (
-                  <Stack
-                    gap={3}
-                    justify="stretch"
-                    align="stretch">
-                    {links.map((link) => (
-                      <Group key={link} wrap="nowrap" align="center" gap={'sm'}>
-                        <Box flex={'1'} style={{ overflow: 'hidden' }}>
-                          <Anchor
-                            href={link}
-                            target="_blank"
-                            fz="xs"
-                            truncate="end"
-                            display={'inline-block'}
-                            w={'100%'}>
-                            {link}
-                          </Anchor>
-                        </Box>
-                        <CopyButton value={link}>
-                          {({ copied, copy }) => (
-                            <Button
-                              size="compact-xs"
-                              fz={'10'}
-                              variant="light"
-                              onClick={copy}
-                              color={copied
-                                ? 'teal'
-                                : 'gray'}>
-                              {copied ? 'copied' : 'copy'}
-                            </Button>
-                          )}
-                        </CopyButton>
-                      </Group>
-                    ))}
-                  </Stack>
-                )}
-              </>
-            )}
-          </Stack>
-        </Paper>
+                </Spoiler>
+              )}
+              {!description && (
+                <Text
+                  component={'div'}
+                  size="xs"
+                  c={'dimmed'}>
+                  no description
+                </Text>
+              )}
+              {links && (
+                <Stack
+                  gap={3}
+                  justify="stretch"
+                  align="stretch">
+                  {links.map((link) => (
+                    <Group key={link} wrap="nowrap" align="center" gap={'sm'}>
+                      <Box flex={'1'} style={{ overflow: 'hidden' }}>
+                        <Anchor
+                          href={link}
+                          target="_blank"
+                          fz="xs"
+                          truncate="end"
+                          display={'inline-block'}
+                          w={'100%'}>
+                          {link}
+                        </Anchor>
+                      </Box>
+                      <CopyButton value={link}>
+                        {({ copied, copy }) => (
+                          <Button
+                            size="compact-xs"
+                            fz={'10'}
+                            variant="light"
+                            onClick={copy}
+                            color={copied
+                              ? 'teal'
+                              : 'gray'}>
+                            {copied ? 'copied' : 'copy'}
+                          </Button>
+                        )}
+                      </CopyButton>
+                    </Group>
+                  ))}
+                </Stack>
+              )}
+            </>
+          )}
+        </Card>
       </m.div>
     </AnimatePresence>
   )

package/src/ui/DynamicViewWalkthrough.tsx

@@ -1,4 +1,4 @@
-import { Box, Button } from '@mantine/core'
+import { Box, Button, ButtonGroup } from '@mantine/core'
 import { useHotkeys } from '@mantine/hooks'
 import {
   IconPlayerPlayFilled,
@@ -8,7 +8,7 @@ import {
 } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { isNullish, isNumber } from 'remeda'
-import { useDiagramState } from '../state/useDiagramStore'
+import { useDiagramState } from '../state/hooks'
 import { useXYStore } from '../xyflow/hooks/useXYFlow'
 import * as css from './DynamicViewWalkthrough.css'
 
@@ -58,6 +58,8 @@ export function DynamicViewWalkthrough() {
   return (
     <Box
       className={clsx('react-flow__panel', css.container)}
+      onClick={(e) => e.stopPropagation()}
+      onDoubleClick={(e) => e.stopPropagation()}
     >
       {isNullish(activeDynamicViewStep)
         && (
@@ -71,7 +73,7 @@ export function DynamicViewWalkthrough() {
           </Button>
         )}
       {isNumber(activeDynamicViewStep) && (
-        <Button.Group className={css.buttons}>
+        <ButtonGroup className={css.buttons}>
           <Button
             {...buttonProps}
             pl={'lg'}
@@ -98,7 +100,7 @@ export function DynamicViewWalkthrough() {
               <IconPlayerSkipForwardFilled />
             </Button>
           )}
-        </Button.Group>
+        </ButtonGroup>
       )}
     </Box>
   )

package/src/ui/OptionsPanel.tsx

@@ -3,27 +3,42 @@ import { useOnSelectionChange } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
 import { AnimatePresence, m } from 'framer-motion'
-import { memo, useState } from 'react'
-import { isNullish } from 'remeda'
-import { useDiagramState } from '../state'
+import { useState } from 'react'
+import { useDiagramState } from '../state/hooks'
 import { NodeOptions } from './options/NodeOptions'
 import * as styles from './OptionsPanel.css'
 
-const OptionsPanelMemo = memo(function OptionsPanel() {
-  const isFocusDisabled = useDiagramState(s => isNullish(s.focusedNodeId))
-  const [selectedNodes, setSelectedNodes] = useState([] as string[])
-
+export default function OptionsPanel() {
+  const { isFocused, viewId } = useDiagramState(s => ({
+    viewId: s.view.id,
+    isFocused: s.focusedNodeId !== null || s.activeDynamicViewStep !== null
+  }))
+  const [selected, setSelected] = useState<{
+    nodes: string[]
+    edges: string[]
+  }>({
+    nodes: [],
+    edges: []
+  })
   useOnSelectionChange({
-    onChange: ({ nodes }) => {
-      const next = nodes.map(n => n.id)
-      setSelectedNodes(prev => eq(prev, next) ? prev : next)
+    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">
-      {isFocusDisabled && selectedNodes.length > 0 && (
+      {hasAnySelection && (
         <m.div
+          key={viewId}
           initial={{ opacity: 0, scale: 0.85 }}
           animate={{ opacity: 1, scale: 1 }}
           exit={{
@@ -33,16 +48,20 @@ const OptionsPanelMemo = memo(function OptionsPanel() {
           transition={{ duration: 0.14 }}
           className={clsx('react-flow__panel', styles.panel)}
           style={{
-            transformOrigin: 'center right'
+            transformOrigin: 'center right',
+            maxWidth: '320px'
           }}
         >
-          <Card shadow="sm">
-            <NodeOptions selectedNodeIds={selectedNodes} />
+          <Card shadow="md">
+            {nodes.length > 0 && <NodeOptions selectedNodeIds={nodes} />}
+            {
+              /* nodes.length === 0 && edges.length > 0 && (
+              <EdgeOptions selectedEdgeIds={edges} />
+            ) */
+            }
           </Card>
         </m.div>
       )}
     </AnimatePresence>
   )
-})
-
-export default OptionsPanelMemo
+}

package/src/ui/options/EdgeOptions.tsx

@@ -0,0 +1,157 @@
+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 } from '../../state/hooks'
+import { useXYEdgesData } from '../../xyflow/hooks/useXYFlow'
+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
+
+  // // 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: Changes.ChangeElementStyle['style']) => {
+  //   const targets = edges.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'}>
+      <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

@@ -17,16 +17,18 @@ import {
   SegmentedControl,
   Select,
   Slider,
+  Space,
   Stack,
   Text,
   Tooltip,
   TooltipGroup
 } from '@mantine/core'
-import { useState } from 'react'
+import { shallowEqual } from 'fast-equals'
+import { memo, useState } from 'react'
 import { hasAtLeast, keys, takeWhile } from 'remeda'
 import { useUpdateEffect } from '../../hooks/useUpdateEffect'
 import type { Changes } from '../../LikeC4Diagram.props'
-import { useDiagramStoreApi } from '../../state'
+import { useDiagramStoreApi } from '../../state/hooks'
 import { useXYNodesData } from '../../xyflow/hooks'
 import { XYFlowNode } from '../../xyflow/types'
 
@@ -43,7 +45,7 @@ export const themedColors = [
   { key: 'muted', value: muted.fill }
 ] satisfies Array<{ key: ThemeColor; value: string }>
 
-export const colors = keys.strict(otherColors).map(key => ({
+export const colors = keys(otherColors).map(key => ({
   key,
   value: defaultTheme.elements[key].fill
 }))
@@ -53,7 +55,7 @@ export type ColorKey = typeof colors[0]['key']
 
 type XYNodesData = Pick<XYFlowNode, 'id' | 'data' | 'type'>
 
-export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] }) {
+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))
@@ -70,7 +72,8 @@ export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] })
   const [firstNode, ...rest] = nodes
 
   // Makes sense to show opacity option only if there is at least one compound node
-  const showOpacityOption = rest.length === 0 && firstNode.type === 'compound'
+  const showOpacityOption = firstNode.type === 'compound'
+    && (rest.length === 0 || rest.every(node => node.type === 'compound'))
 
   const triggerChange = (style: Changes.ChangeElementStyle['style']) => {
     const targets = nodes.map(node => node.data.element.id)
@@ -83,8 +86,11 @@ export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] })
   }
 
   return (
-    <Stack>
+    <Stack gap={'xs'}>
       <div>
+        <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>
@@ -105,11 +111,13 @@ export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] })
       {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) => {
@@ -121,7 +129,7 @@ export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] })
       <NavigateToOption nodes={nodes} />
     </Stack>
   )
-}
+}, (prevProps, nextProps) => shallowEqual(prevProps.selectedNodeIds, nextProps.selectedNodeIds))
 
 function Colors({
   nodes: [firstNode, ...nodes],
@@ -242,26 +250,27 @@ function NavigateToOption({
   return (
     <div>
       <Divider label="navigate to" labelPosition="left" />
-      <Select
-        mt={'xs'}
-        size="xs"
-        variant="filled"
-        value={!isMultiple ? (node.data.element.navigateTo ?? null) : null}
-        disabled={isMultiple}
-        placeholder={isMultiple ? '[ multiple ]' : 'select'}
-        data={node.data.element.navigateTo
-          ? [{ value: node.data.element.navigateTo, label: node.data.element.navigateTo }]
-          : []}
-        // data={ElementShapes}
-        allowDeselect={true}
-        checkIconPosition="right"
-        // onChange={(value) => {
-        //   if (!value || value === selectedShape) {
-        //     return
-        //   }
-        //   onShapeChange(value as ElementShape)
-        // }} />
-      />
+      {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>
   )
 }
@@ -281,7 +290,6 @@ function OpacityOption({
 
   return (
     <Slider
-      mt={'xs'}
       size={'sm'}
       color={'dark'}
       value={value}
@@ -304,7 +312,7 @@ function BorderStyleOption({
   }, [selecteBorderStyle])
 
   return (
-    <Box mt={'md'}>
+    <Box>
       <SegmentedControl
         size="xs"
         fullWidth