@likec4/diagram 1.1.0 → 1.1.1

package/src/ui/DiagramTitlePanel.tsx

@@ -0,0 +1,139 @@
+import { Anchor, Box, Button, CopyButton, Group, Paper, Spoiler, Stack, Text } from '@mantine/core'
+import { useToggle } from '@react-hookz/web'
+import clsx from 'clsx'
+import { AnimatePresence, motion } from 'framer-motion'
+import { type DiagramState, useDiagramState } from '../state'
+import * as css from './DiagramTitlePanel.css'
+import { useLocalStorage } from '@mantine/hooks'
+
+const selector = (s: DiagramState) => ({
+  id: s.view.id,
+  title: s.view.title ?? 'untitled',
+  description: s.view.description,
+  links: s.view.links
+})
+
+export default function DiagramTitlePanel() {
+  const { id, title, description, links } = useDiagramState(selector)
+  const [isCollapsed, setCollapsed] = useLocalStorage({
+    key: 'diagram-title-panel-collapsed',
+    defaultValue: false
+  })
+  const toggle = () => setCollapsed(v => !v)
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={id}
+        initial={{ opacity: 0.05, scale: 0.7 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{
+          opacity: 0.05,
+          scale: 0.6
+        }}
+        className={clsx('react-flow__panel', css.container)}
+        style={{
+          transformOrigin: 'left center'
+        }}
+      >
+        <Paper
+          radius="sm"
+          withBorder={!isCollapsed}
+          className={css.paper}
+          p={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 && (
+                  <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>
+                )}
+              </>
+            )}
+          </Stack>
+        </Paper>
+      </motion.div>
+    </AnimatePresence>
+  )
+}

package/src/ui/OptionsPanel.tsx

@@ -3,11 +3,11 @@ import { useOnSelectionChange } from '@xyflow/react'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
 import { AnimatePresence, motion } from 'framer-motion'
-import { memo, useState } from 'react'
-import { NodeOptions } from './options/NodeOptions'
+import { useState } from 'react'
 import * as styles from './OptionsPanel.css'
+import { NodeOptions } from './options/NodeOptions'
 
-const OptionsPanelMemo = /* @__PURE__ */ memo(function OptionsPanel() {
+export default function OptionsPanel() {
   const [selectedNodes, setSelectedNodes] = useState([] as string[])
 
   useOnSelectionChange({
@@ -16,26 +16,9 @@ const OptionsPanelMemo = /* @__PURE__ */ memo(function OptionsPanel() {
       setSelectedNodes(prev => {
         return shallowEqual(prev, next) ? prev : next
       })
-      // if (nodes.length === 0 && edges.length === 0) {
-      //   setSelectedNodes([])
-      //   // setSelectedEdges([])
-      //   return
-      // }
-      // const selected = new Set([
-      //   ...nodes.map((n) => n.id),
-      //   ...edges.flatMap((edge) => [
-      //     edge.source,
-      //     edge.target
-      //   ])
-      // ])
-      // setSelectedNodes([...selected])
-      // setSelectedEdges(edges.map(e => e.id))
     }
   })
 
-  // useUpdateEffect(() => {
-  //   setSelectedNodes([])
-  // }, [viewId])
 
   return (
     <AnimatePresence mode="wait">
@@ -60,6 +43,4 @@ const OptionsPanelMemo = /* @__PURE__ */ memo(function OptionsPanel() {
       )}
     </AnimatePresence>
   )
-})
-
-export default OptionsPanelMemo
+}

package/src/ui/options/NodeOptions.tsx

@@ -1,8 +1,9 @@
 import {
+  ElementShapes,
   defaultTheme,
+  invariant,
+  type BorderStyle,
   type ElementShape,
-  ElementShapes,
-  type Fqn,
   type NonEmptyArray,
   type ThemeColor
 } from '@likec4/core'
@@ -12,14 +13,18 @@ import {
   ColorSwatch,
   Divider,
   Flex,
-  rem,
+  SegmentedControl,
   Select,
+  Slider,
   Stack,
   Text,
   Tooltip,
-  TooltipGroup
+  TooltipGroup,
+  rem
 } from '@mantine/core'
+import { useEffect, useState } from 'react'
 import { hasAtLeast, keys, takeWhile } from 'remeda'
+import type { Changes } from '../../LikeC4Diagram.props'
 import { useDiagramStoreApi } from '../../state'
 import { useXYNodesData } from '../../xyflow/hooks'
 import { XYFlowNode } from '../../xyflow/types'
@@ -52,15 +57,34 @@ export type ColorKey = typeof colors[0]['key']
 type XYNodesData = Pick<XYFlowNode, 'id' | 'data' | 'type'>
 
 export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] }) {
+// 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
+
+  // Makes sense to show opacity option only if there is at least one compound node
+  const showOpacityOption = rest.length === 0 && firstNode.type === 'compound'
+
+  const triggerChange = (style: Changes.ChangeElementStyle['style']) => {
+    const targets = nodes.map(node => node.data.element.id)
+    invariant(hasAtLeast(targets, 1), 'At least one target is required')
+    diagramApi.getState().triggerOnChange([{
+      op: 'change-element-style',
+      style,
+      targets
+    }])
+  }
+
   return (
     <Stack>
       <Box maw={200}>
@@ -72,39 +96,33 @@ export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] })
         <ShapeOption
           nodes={nodes}
           onShapeChange={(shape: ElementShape) => {
-            const targets = [] as Fqn[]
-            for (const nd of nodes) {
-              if (nd.data.element.shape !== shape) {
-                targets.push(nd.data.element.id)
-              }
-            }
-            if (hasAtLeast(targets, 1)) {
-              diagramApi.getState().triggerOnChange([{
-                op: 'change-shape',
-                shape,
-                targets
-              }])
-            }
+            triggerChange({ shape })
           }} />
       )}
       <Colors
         nodes={nodes}
         onColorChange={(color: ColorKey | ThemeColorKey) => {
-          const targets = [] as Fqn[]
-          for (const nd of nodes) {
-            if (nd.data.element.color !== color) {
-              targets.push(nd.data.element.id)
-            }
-          }
-          if (hasAtLeast(targets, 1)) {
-            diagramApi.getState().triggerOnChange([{
-              op: 'change-color',
-              color,
-              targets
-            }])
-          }
+          triggerChange({ color })
         }} />
       <NavigateToOption nodes={nodes} />
+      <Box key={firstNode.id}>
+        {showOpacityOption && (
+          <>
+            <Divider label="opacity and border" labelPosition="left" />
+            <OpacityOption
+              node={firstNode}
+              onOpacityChange={(opacity: number) => {
+                triggerChange({ opacity })
+              }} />
+            <BorderStyleOption
+              node={firstNode}
+              onChange={(border: BorderStyle) => {
+                triggerChange({ border })
+              }}
+            />
+          </>
+        )}
+      </Box>
     </Stack>
   )
 }
@@ -251,3 +269,62 @@ function NavigateToOption({
     </Box>
   )
 }
+
+function OpacityOption({
+  node,
+  onOpacityChange
+}: {
+  node: XYNodesData
+  onOpacityChange: (opacity: number) => void
+}) {
+  let selectedOpacity = node.data.element.style.opacity ?? 100
+  const [value, setValue] = useState(selectedOpacity)
+  useEffect(() => {
+    setValue(selectedOpacity)
+  }, [selectedOpacity])
+
+  return (
+    <Slider
+      mt={'xs'}
+      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)
+  useEffect(() => {
+    setValue(selecteBorderStyle)
+  }, [selecteBorderStyle])
+
+  return (
+    <Box mt={'md'}>
+      <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/FitviewOnDiagramChange.tsx

@@ -66,7 +66,7 @@ function FitViewOnDiagramChanges() {
         s => s.viewportChanged,
         setViewportMoved
       ),
-    [diagramApi]
+    [diagramApi, setViewportMoved]
   )
 
   useRafEffect(
@@ -77,7 +77,7 @@ function FitViewOnDiagramChanges() {
       diagramApi.getState().fitDiagram()
       setProcessed(pendingChangeId)
     },
-    [isReady, processedChangeId, pendingChangeId]
+    [isReady, processedChangeId, pendingChangeId, diagramApi]
   )
 
   if (!viewportMoved && isReady) {

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -0,0 +1,57 @@
+import type { EdgeChange, NodeChange } from '@xyflow/react'
+import { useUpdateEffect } from '../hooks'
+import { useDiagramState } from '../state/useDiagramStore'
+import { useXYStoreApi } from './hooks/useXYFlow'
+import type { XYFlowEdge, XYFlowNode } from './types'
+
+export function SelectEdgesOnNodeFocus() {
+  const focusedNodeId = useDiagramState(s => s.focusedNodeId)
+  const xyflowApi = useXYStoreApi()
+
+  useUpdateEffect(() => {
+    const edgeChanges = [] as EdgeChange<XYFlowEdge>[]
+    const nodeChanges = [] as NodeChange<XYFlowNode>[]
+    const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState()
+    if (focusedNodeId) {
+      for (const edge of edges) {
+        if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
+          edgeChanges.push({
+            id: edge.id,
+            type: 'select',
+            selected: true
+          })
+        } else if (edge.selected) {
+          edgeChanges.push({
+            id: edge.id,
+            type: 'select',
+            selected: false
+          })
+        }
+      }
+      for (const node of nodes) {
+        if (node.selected && node.id !== focusedNodeId) {
+          nodeChanges.push({
+            id: node.id,
+            type: 'select',
+            selected: false
+          })
+        }
+      }
+      nodeChanges.push({
+        id: focusedNodeId,
+        type: 'select',
+        selected: true
+      })
+      if (edgeChanges.length > 0) {
+        triggerEdgeChanges(edgeChanges)
+      }
+      if (nodeChanges.length > 0) {
+        triggerNodeChanges(nodeChanges)
+      }
+    } else {
+      xyflowApi.getState().resetSelectedElements()
+    }
+  }, [focusedNodeId])
+
+  return null
+}

package/src/xyflow/SyncWithDiagram.tsx

@@ -27,14 +27,20 @@ export const SyncWithDiagram = memo(() => {
       state => ({
         viewId: state.view.id,
         nodes: state.view.nodes,
-        edges: state.view.edges,
-        draggable: state.nodesDraggable,
-        selectable: state.nodesSelectable
+        edges: state.view.edges
       }),
       // listener
-      ({ viewId, nodes, edges, ...opts }) => {
-        const { lastOnNavigate } = diagramStoreApi.getState()
-        const updates = diagramViewToXYFlowData({ nodes, edges }, opts)
+      ({ viewId, nodes, edges }) => {
+        const {
+          lastOnNavigate,
+          nodesDraggable,
+          nodesSelectable,
+          focusedNodeId
+        } = diagramStoreApi.getState()
+        const updates = diagramViewToXYFlowData({ nodes, edges }, {
+          draggable: nodesDraggable,
+          selectable: nodesSelectable || focusedNodeId !== null
+        })
 
         xyflowRef.current.setNodes(prev =>
           updates.nodes.map(update => {

package/src/xyflow/XYFlow.tsx

@@ -1,5 +1,6 @@
 import { useMantineColorScheme } from '@mantine/core'
-import { Controls, ReactFlow } from '@xyflow/react'
+import { Controls, PanOnScrollMode, ReactFlow } from '@xyflow/react'
+import { DEV } from 'esm-env'
 import { type CSSProperties, memo, type PropsWithChildren } from 'react'
 import type { SetNonNullable, Simplify } from 'type-fest'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
@@ -9,6 +10,7 @@ import { RelationshipEdge } from './edges/RelationshipEdge'
 import { useLayoutConstraints } from './hooks/useLayoutConstraints'
 import { CompoundNode } from './nodes/compound'
 import { ElementNode } from './nodes/element'
+import { SelectEdgesOnNodeFocus } from './SelectEdgesOnNodeFocus'
 import { XYFlowEdge, XYFlowNode } from './types'
 import { XYFlowBackground } from './XYFlowBackground'
 import { useXYFlowEvents } from './XYFlowEvents'
@@ -41,7 +43,7 @@ type XYFlowWrapperProps = Simplify<
 >
 
 const selector = (s: DiagramState) => ({
-  nodesSelectable: s.nodesSelectable,
+  nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
   nodesDraggable: s.nodesDraggable,
   fitView: s.fitViewEnabled,
   fitViewPadding: s.fitViewPadding,
@@ -137,6 +139,7 @@ function XYFlowWrapper({
       onNodeClick={handlers.onNodeClick}
       onNodeDoubleClick={handlers.onNodeDoubleClick}
       onEdgeClick={handlers.onEdgeClick}
+      onViewportChange={handlers.onViewportChange}
       onInit={() => {
         diagramApi.setState({ initialized: true }, false, 'initialized')
       }}
@@ -150,7 +153,8 @@ function XYFlowWrapper({
         onPaneContextMenu: handlers.onPaneContextMenu
       })}>
       {isBgWithPattern && <XYFlowBackground background={background} />}
-      {controls && <Controls />}
+      {controls && <Controls position={'bottom-right'} />}
+      {zoomable && !editor.hasOnNodeClick && <SelectEdgesOnNodeFocus />}
       {children}
     </ReactFlow>
   )