@likec4/diagram 1.4.0 → 1.5.0

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

package/src/xyflow/EdgeMarkers.tsx

@@ -0,0 +1,148 @@
+import type { SVGProps } from 'react'
+
+const Open = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="-4 -4 14 16"
+    refX={5}
+    refY={4}
+    markerWidth="7"
+    markerHeight="8"
+    preserveAspectRatio="xMaxYMid meet"
+    orient="auto-start-reverse"
+    {...props}
+  >
+    <path
+      d="M0,0 L7,4 L0,8 L4,4 Z"
+      stroke="context-stroke"
+      fill="context-stroke"
+      strokeDasharray={0}
+      strokeWidth={1}
+      strokeLinecap={'round'} />
+  </marker>
+)
+
+const Arrow = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="-1 -1 12 10"
+    refX={4}
+    refY={3}
+    markerWidth="8"
+    markerHeight="6"
+    preserveAspectRatio="xMaxYMid meet"
+    orient="auto-start-reverse"
+    {...props}>
+    <path
+      d="M 0 0 L 8 3 L 0 6 L 1 3 z"
+      fill="context-stroke"
+      strokeWidth={0}
+    />
+  </marker>
+)
+
+const OArrow = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="-1 -1 12 10"
+    refX={4}
+    refY={3}
+    markerWidth="8"
+    markerHeight="6"
+    preserveAspectRatio="xMaxYMid meet"
+    orient="auto-start-reverse"
+    {...props}>
+    <path
+      d="M 0 0 L 8 3 L 0 6 L 1 3 z"
+      stroke="context-stroke"
+      fill="var(--likec4-background-color)"
+      strokeWidth={1.25}
+      strokeLinejoin="miter"
+      strokeLinecap={'square'}
+    />
+  </marker>
+)
+
+const Diamond = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="-4 -4 16 14"
+    refX={5}
+    refY={4}
+    markerWidth="10"
+    markerHeight="8"
+    preserveAspectRatio="xMaxYMid meet"
+    orient="auto-start-reverse"
+    {...props}
+  >
+    <path
+      d="M5,0 L10,4 L5,8 L0,4 Z"
+      fill="context-stroke"
+      strokeWidth={0}
+      strokeLinecap={'round'}
+    />
+  </marker>
+)
+
+const ODiamond = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="-4 -4 16 14"
+    refX={6}
+    refY={4}
+    markerWidth="10"
+    markerHeight="8"
+    preserveAspectRatio="xMaxYMid meet"
+    orient="auto-start-reverse"
+    {...props}>
+    <path
+      d="M5,0 L10,4 L5,8 L0,4 Z"
+      stroke="context-stroke"
+      fill="var(--likec4-background-color)"
+      strokeWidth={1.25}
+      strokeLinecap={'round'}
+    />
+  </marker>
+)
+
+const Dot = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="0 0 10 10"
+    refX={4}
+    refY={4}
+    markerWidth="6"
+    markerHeight="6"
+    {...props}>
+    <circle
+      strokeWidth={0}
+      fill="context-stroke"
+      cx={4}
+      cy={4}
+      r={3}
+    />
+  </marker>
+)
+
+const ODot = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="0 0 10 10"
+    refX={4}
+    refY={4}
+    markerWidth="6"
+    markerHeight="6"
+    {...props}>
+    <circle
+      strokeWidth={1.25}
+      stroke="context-stroke"
+      fill="var(--likec4-background-color)"
+      cx={4}
+      cy={4}
+      r={3}
+    />
+  </marker>
+)
+
+export const EdgeMarkers = {
+  Arrow,
+  OArrow,
+  Open,
+  Diamond,
+  ODiamond,
+  Dot,
+  ODot
+}

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -2,7 +2,7 @@ import { invariant } from '@likec4/core'
 import { useDebouncedEffect } from '@react-hookz/web'
 import { shallowEqual } from 'fast-equals'
 import { useEffect, useRef } from 'react'
-import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../state'
+import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../state/hooks'
 import { useXYStore, useXYStoreApi, type XYStoreApi } from './hooks'
 import type { XYFlowState } from './types'
 import { toDomPrecision } from './utils'
@@ -24,11 +24,11 @@ function FitViewOnViewportResize({ diagramApi, xyflowApi }: {
       if (focusedNodeId || prevDimensionsRef.current === dimensions) {
         return
       }
-      fitDiagram(xyflowApi)
+      fitDiagram(300)
       prevDimensionsRef.current = dimensions
     },
     [dimensions, diagramApi, xyflowApi],
-    250,
+    300,
     1000
   )
 
@@ -77,6 +77,7 @@ export function FitViewOnDiagramChange() {
   } = useDiagramState(selector, shallowEqual)
   const diagramApi = useDiagramStoreApi()
   const processedRef = useRef(pendingViewId)
+  const durationRef = useRef(300)
 
   useEffect(() => {
     if (!xyflowSynced || pendingViewId === processedRef.current) {
@@ -97,11 +98,14 @@ export function FitViewOnDiagramChange() {
           y: toDomPrecision(fromPos.y - toPos.y)
         }
       xyflowApi.getState().panBy(diff)
+      durationRef.current = 500
       diagramApi.setState({ lastOnNavigate: null })
       return
     }
     processedRef.current = pendingViewId
-    diagramApi.getState().fitDiagram(xyflowApi)
+    diagramApi.getState().fitDiagram(durationRef.current)
+    // Reset duration
+    durationRef.current = 300
   }, [pendingViewId, xyflowSynced, waitCorrection])
 
   if (!viewportChanged && xyflowSynced) {

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -1,72 +1,76 @@
 import { nonNullable } from '@likec4/core'
 import type { EdgeChange, NodeChange } from '@xyflow/react'
-import { useUpdateEffect } from '../hooks/useUpdateEffect'
-import { useDiagramState, useDiagramStoreApi } from '../state/useDiagramStore'
+import { getBoundsOfRects, getViewportForBounds, nodeToRect } from '@xyflow/system'
+import { useEffect } from 'react'
+import { useDiagramStoreApi } from '../state/hooks'
 import { MinZoom } from './const'
-import { useXYStoreApi } from './hooks/useXYFlow'
 import type { XYFlowEdge, XYFlowNode } from './types'
 
 export function SelectEdgesOnNodeFocus() {
-  const focusedNodeId = useDiagramState(s => s.focusedNodeId)
   const diagramStore = useDiagramStoreApi()
-  const xyflowApi = useXYStoreApi()
 
-  useUpdateEffect(() => {
-    if (!focusedNodeId) {
-      xyflowApi.getState().resetSelectedElements()
-      return
-    }
+  useEffect(
+    () =>
+      diagramStore.subscribe(s => s.focusedNodeId, focusedNodeId => {
+        if (!focusedNodeId) {
+          return
+        }
 
-    const edgeChanges = [] as EdgeChange<XYFlowEdge>[]
-    const nodeChanges = [] as NodeChange<XYFlowNode>[]
-    const { edgeLookup, nodeLookup, transform, triggerNodeChanges, fitView, triggerEdgeChanges } = xyflowApi.getState()
-    const fitViewNodes = new Set<XYFlowNode>()
-    fitViewNodes.add(nonNullable(nodeLookup.get(focusedNodeId)))
+        const edgeChanges = [] as EdgeChange<XYFlowEdge>[]
+        const nodeChanges = [] as NodeChange<XYFlowNode>[]
+        const {
+          edgeLookup,
+          nodeLookup,
+          width,
+          height,
+          panZoom,
+          transform,
+          triggerNodeChanges,
+          triggerEdgeChanges
+        } = diagramStore.getState().xystore.getState()
+        let focusBounds = nodeToRect(nonNullable(nodeLookup.get(focusedNodeId)))
 
-    for (const [, edge] of edgeLookup) {
-      if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
-        edgeChanges.push({
-          id: edge.id,
-          type: 'select',
-          selected: true
-        })
-        const anotherNode = nonNullable(nodeLookup.get(edge.source === focusedNodeId ? edge.target : edge.source))
-        fitViewNodes.add(anotherNode)
-      } else if (edge.selected) {
-        edgeChanges.push({
-          id: edge.id,
-          type: 'select',
-          selected: false
-        })
-      }
-    }
-    for (const [, node] of nodeLookup) {
-      if (node.selected && node.id !== focusedNodeId) {
+        for (const [, edge] of edgeLookup) {
+          if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
+            const anotherNodeId = edge.source === focusedNodeId ? edge.target : edge.source
+            const nd = nodeToRect(nonNullable(nodeLookup.get(anotherNodeId)))
+            focusBounds = getBoundsOfRects(focusBounds, nd)
+          }
+          if (edge.selected) {
+            edgeChanges.push({
+              id: edge.id,
+              type: 'select',
+              selected: false
+            })
+          }
+        }
+        for (const [, node] of nodeLookup) {
+          if (node.selected && node.id !== focusedNodeId) {
+            nodeChanges.push({
+              id: node.id,
+              type: 'select',
+              selected: false
+            })
+          }
+        }
         nodeChanges.push({
-          id: node.id,
+          id: focusedNodeId,
           type: 'select',
-          selected: false
+          selected: true
         })
-      }
-    }
-    nodeChanges.push({
-      id: focusedNodeId,
-      type: 'select',
-      selected: true
-    })
-    if (edgeChanges.length > 0) {
-      triggerEdgeChanges(edgeChanges)
-    }
-    triggerNodeChanges(nodeChanges)
+        if (edgeChanges.length > 0) {
+          triggerEdgeChanges(edgeChanges)
+        }
+        triggerNodeChanges(nodeChanges)
 
-    fitView({
-      duration: 350,
-      padding: 0.1,
-      minZoom: MinZoom,
-      maxZoom: Math.max(1, transform[2]),
-      nodes: Array.from(fitViewNodes)
-    })
-  }, [diagramStore, xyflowApi, focusedNodeId])
+        const maxZoom = Math.max(1, transform[2])
+        const viewport = getViewportForBounds(focusBounds, width, height, MinZoom, maxZoom, 0.2)
+        panZoom?.setViewport(viewport, {
+          duration: 350
+        })
+      }),
+    [diagramStore]
+  )
 
   return null
 }