@likec4/diagram 1.0.2 → 1.1.1

package/src/globals.css.ts

@@ -1,12 +1,17 @@
-import type { ThemeColor } from '@likec4/core'
 import { defaultTheme } from '@likec4/core'
-import { createGlobalTheme } from '@vanilla-extract/css'
-import { omit } from 'remeda'
+import { createGlobalTheme, globalStyle } from '@vanilla-extract/css'
+import { scale, toHex } from 'khroma'
+import { keys, omit } from 'remeda'
 import { mantine } from './mantine.css'
 import { vars } from './theme.css'
 
 export const rootClassName = 'likec4-diagram-root'
 
+globalStyle(`.${rootClassName}`, {
+  WebkitFontSmoothing: mantine.webkitFontSmoothing,
+  MozOsxFontSmoothing: mantine.mozFontSmoothing
+})
+
 createGlobalTheme(`.${rootClassName}`, {
   ...omit(vars, ['optionsPanel', 'default'])
 }, {
@@ -75,38 +80,7 @@ createGlobalTheme(`:where([data-mantine-color-scheme='light']) .${rootClassName}
   }
 })
 
-// globalStyle(`${scope} *, ${scope} *::before, ${scope} *::after`, {
-//   boxSizing: 'border-box',
-//   outline: 'none',
-//   borderWidth: 0,
-//   borderStyle: 'solid',
-//   borderColor: 'transparent',
-// })
-
-// createGlobalTheme(':where(.likec4-diagram-root)', {
-//   ...omit(vars, ['optionsPanel', 'defaults']),
-// }, {
-//   likec4: {
-//     font: `var(--likec4-default-font-family,'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"')`,
-//     backgroundColor: mantine.colors.body
-//   },
-//   compound: {
-//     font: vars.likec4.font,
-//     titleColor: vars.element.loContrast
-//   },
-//   element: {
-//     font: vars.likec4.font,
-//     ...defaultTheme.elements.primary
-//   },
-//   relation: {
-//     ...defaultTheme.relationships.slate
-//   }
-// })
-
-for (const color of Object.keys(defaultTheme.elements)) {
-  if (!(color in defaultTheme.elements) || !(color in defaultTheme.relationships)) {
-    continue
-  }
+for (const color of keys.strict(defaultTheme.elements)) {
   createGlobalTheme(`:where([data-likec4-color='${color}'])`, {
     element: {
       fill: vars.element.fill,
@@ -119,10 +93,46 @@ for (const color of Object.keys(defaultTheme.elements)) {
     },
     relation: vars.relation
   }, {
-    element: defaultTheme.elements[color as ThemeColor],
+    element: defaultTheme.elements[color],
     compound: {
-      titleColor: defaultTheme.elements[color as ThemeColor].loContrast
+      titleColor: defaultTheme.elements[color].loContrast
     },
-    relation: defaultTheme.relationships[color as ThemeColor]
+    relation: defaultTheme.relationships[color]
   })
+
+  const compoundDarkColor = (color: string, depth: number) =>
+    toHex(
+      scale(color, {
+        l: -22 - 5 * depth,
+        s: -10 - 6 * depth
+      })
+    )
+  const compoundLightColor = (color: string, depth: number) =>
+    toHex(
+      scale(color, {
+        l: -20 - 3 * depth,
+        s: -3 - 6 * depth
+      })
+    )
+
+  const compounds = {
+    fill: vars.element.fill,
+    stroke: vars.element.stroke
+  }
+
+  for (let depth = 1; depth <= 6; depth++) {
+    createGlobalTheme(`:where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`, compounds, {
+      fill: compoundDarkColor(defaultTheme.elements[color].fill, depth),
+      stroke: compoundDarkColor(defaultTheme.elements[color].stroke, depth)
+    })
+
+    createGlobalTheme(
+      `:where([data-mantine-color-scheme='light']) :where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`,
+      compounds,
+      {
+        fill: compoundLightColor(defaultTheme.elements[color].fill, depth),
+        stroke: compoundLightColor(defaultTheme.elements[color].stroke, depth)
+      }
+    )
+  }
 }

package/src/state/diagramStore.ts

@@ -1,17 +1,27 @@
-import type { DiagramNode, DiagramView, ElementShape, Fqn, NonEmptyArray, ThemeColor, ViewID } from '@likec4/core'
+import type {
+  BorderStyle,
+  DiagramNode,
+  DiagramView,
+  ElementShape,
+  Fqn,
+  NonEmptyArray,
+  ThemeColor,
+  ViewID
+} from '@likec4/core'
 import { invariant, nonexhaustive } from '@likec4/core'
 import type { XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { DEV } from 'esm-env'
 import { shallowEqual } from 'fast-equals'
 import type { MouseEvent as ReactMouseEvent } from 'react'
+import { entries } from 'remeda'
 import type { Exact, Except, RequiredKeysOf, Simplify } from 'type-fest'
 import { devtools, subscribeWithSelector } from 'zustand/middleware'
 import { shallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
 import type { Change, DiagramNodeWithNavigate, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props'
 import { MinZoom } from '../xyflow/const'
-import type { XYFlowInstance } from '../xyflow/types'
+import type { XYFlowInstance, XYFlowNode } from '../xyflow/types'
 
 export type DiagramStore = {
   // Incoming props
@@ -20,6 +30,8 @@ export type DiagramStore = {
   showElementLinks: boolean
   fitViewEnabled: boolean
   fitViewPadding: number
+  zoomable: boolean
+  pannable: boolean
   nodesDraggable: boolean
   nodesSelectable: boolean
 
@@ -30,6 +42,7 @@ export type DiagramStore = {
   // This is XYFlow id's
   lastClickedNodeId: string | null
   lastClickedEdgeId: string | null
+  focusedNodeId: string | null
   hoveredNodeId: string | null
   hoveredEdgeId: string | null
 
@@ -57,6 +70,8 @@ export type DiagramInitialState = // Required properties
     | 'showElementLinks'
     | 'fitViewEnabled'
     | 'fitViewPadding'
+    | 'zoomable'
+    | 'pannable'
     | 'nodesDraggable'
     | 'nodesSelectable'
   >
@@ -78,10 +93,12 @@ interface DiagramStoreActions {
   setLastClickedNode: (nodeId: string | null) => void
   setLastClickedEdge: (edgeId: string | null) => void
 
+  resetLastClicked: () => void
+
   getElement(id: Fqn): DiagramNode | null
   triggerOnChange: (changes: NonEmptyArray<Change>) => void
   triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void
-  fitDiagram: () => void
+  fitDiagram: (centerNode?: XYFlowNode) => void
 }
 
 export type DiagramState = Simplify<DiagramStore & DiagramStoreActions>
@@ -90,6 +107,7 @@ const DEFAULT_PROPS: Except<DiagramStore, RequiredKeysOf<DiagramInitialState> |
   initialized: false,
   previousViews: [],
   viewportChanged: false,
+  focusedNodeId: null,
   hoveredNodeId: null,
   hoveredEdgeId: null,
   lastClickedNodeId: null,
@@ -133,6 +151,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               view: currentView,
               lastOnNavigate,
               previousViews,
+              focusedNodeId,
               lastClickedNodeId,
               lastClickedEdgeId,
               hoveredEdgeId,
@@ -159,6 +178,9 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               if (hoveredNodeId && !containsWithId(view.nodes, hoveredNodeId)) {
                 hoveredNodeId = null
               }
+              if (focusedNodeId && !containsWithId(view.nodes, focusedNodeId)) {
+                focusedNodeId = null
+              }
               if (lastClickedEdgeId && !containsWithId(view.edges, lastClickedEdgeId)) {
                 lastClickedEdgeId = null
               }
@@ -171,6 +193,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               lastClickedNodeId = null
               hoveredEdgeId = null
               hoveredNodeId = null
+              focusedNodeId = null
 
               // Update history stack (back button not implemented yet)
               previousViews = [
@@ -186,6 +209,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
                 previousViews,
                 lastClickedNodeId,
                 lastClickedEdgeId,
+                focusedNodeId,
                 hoveredEdgeId,
                 hoveredNodeId
               },
@@ -218,88 +242,114 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
             }
           },
 
+          resetLastClicked: () => {
+            let {
+              focusedNodeId,
+              lastClickedNodeId,
+              lastClickedEdgeId
+            } = get()
+            if (focusedNodeId || lastClickedNodeId || lastClickedEdgeId) {
+              set(
+                {
+                  focusedNodeId: null,
+                  lastClickedNodeId: null,
+                  lastClickedEdgeId: null
+                },
+                noReplace,
+                'resetLastClicked'
+              )
+            }
+          },
+
           getElement: (fqn) => {
             const { view } = get()
             return view.nodes.find(({ id }) => id === fqn) ?? null
           },
 
           triggerOnChange: (changes: NonEmptyArray<Change>) => {
+            if (DEV) {
+              console.debug('triggerOnChange', changes)
+            }
             const newShapes = new Map<Fqn, ElementShape>()
             const newColor = new Map<Fqn, ThemeColor>()
+            const newOpacity = new Map<Fqn, number>()
+            const newBorder = new Map<Fqn, BorderStyle>()
             for (const change of changes) {
-              if (change.op === 'change-shape') {
-                for (const target of change.targets) {
-                  newShapes.set(target, change.shape)
-                }
-                continue
+              if (change.op !== 'change-element-style') {
+                nonexhaustive(change.op)
               }
-              if (change.op === 'change-color') {
-                for (const target of change.targets) {
-                  newColor.set(target, change.color)
+              for (const target of change.targets) {
+                for (const [key, value] of entries.strict(change.style)) {
+                  switch (key) {
+                    case 'shape':
+                      newShapes.set(target, value)
+                      break
+                    case 'color':
+                      newColor.set(target, value)
+                      break
+                    case 'opacity':
+                      newOpacity.set(target, value)
+                      break
+                    case 'border':
+                      newBorder.set(target, value)
+                      break
+                    default:
+                      nonexhaustive(key)
+                  }
                 }
-                continue
               }
-              nonexhaustive(change)
             }
-            // TODO: Update positions/sizes
-            // const { view, updateView } = get()
-            // let hasChanges = false
-            // const nextNodes = view.nodes.map((node) => {
-            //   const shape = newShapes.get(node.id)
-            //   if (shape && shape !== node.shape) {
-            //     hasChanges = true
-            //     node = {
-            //       ...node,
-            //       shape
-            //     }
-            //   }
-            //   const color = newColor.get(node.id)
-            //   if (color && color !== node.color) {
-            //     hasChanges = true
-            //     node = {
-            //       ...node,
-            //       color
-            //     }
-            //   }
-            //   return node
-            // })
-            // if (hasChanges) {
-            //   updateView({
-            //     ...view,
-            //     nodes: nextNodes
-            //   })
-            // }
+
             get().xyflow.setNodes(nodes =>
               nodes.map(node => {
-                let { data } = node
-                const shape = newShapes.get(data.fqn)
-                if (shape && shape !== data.element.shape) {
-                  node = {
-                    ...node,
-                    data: {
-                      ...data,
-                      element: {
-                        ...data.element,
-                        shape
-                      }
+                let element = node.data.element
+                const shape = newShapes.get(element.id)
+                if (shape && shape !== element.shape) {
+                  element = {
+                    ...element,
+                    shape
+                  }
+                }
+                const color = newColor.get(element.id)
+                if (color && color !== element.color) {
+                  element = {
+                    ...element,
+                    color
+                  }
+                }
+
+                const opacity = newOpacity.get(element.id)
+                if (!!opacity && opacity !== element.style?.opacity) {
+                  element = {
+                    ...element,
+                    style: {
+                      ...element.style,
+                      opacity
                     }
                   }
-                  data = node.data
                 }
-                const color = newColor.get(data.fqn)
-                if (color && color !== data.element.color) {
-                  node = {
-                    ...node,
-                    data: {
-                      ...data,
-                      element: {
-                        ...data.element,
-                        color
-                      }
+
+                const border = newBorder.get(element.id)
+                if (border && border !== element.style?.border) {
+                  element = {
+                    ...element,
+                    style: {
+                      ...element.style,
+                      border
                     }
                   }
                 }
-                return node
+
+                if (element === node.data.element) {
+                  return node
+                }
+                return {
+                  ...node,
+                  data: {
+                    ...node.data,
+                    element
+                  }
+                }
               })
             )
             get().onChange?.({ changes })
@@ -336,15 +386,22 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
             )
           },
 
-          fitDiagram: () => {
-            const { fitViewPadding, xyflow } = get()
+          fitDiagram: (centerNode) => {
+            const { fitViewPadding, xyflow, focusedNodeId } = get()
             xyflow.fitView({
               includeHiddenNodes: true,
-              duration: 400,
+              duration: (centerNode && focusedNodeId) ? 300 : 400,
               padding: fitViewPadding,
               minZoom: MinZoom,
-              maxZoom: 1
+              maxZoom: 1,
+              ...(centerNode && { nodes: [centerNode] })
             })
+            if (centerNode && focusedNodeId !== centerNode.id) {
+              set({ focusedNodeId: centerNode.id }, noReplace, 'focus node')
+            }
+            if (!centerNode && !!focusedNodeId) {
+              set({ focusedNodeId: null }, noReplace, 'unfocus')
+            }
           }
         }),
         {

package/src/ui/DiagramTitlePanel.css.ts

@@ -0,0 +1,32 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../mantine.css'
+
+export const container = style({
+  bottom: 0,
+  left: 0,
+  padding: 8,
+  margin: 0
+})
+
+export const paper = style({
+  cursor: 'default',
+  minWidth: 200,
+  maxWidth: 'calc(100vw - 16px)',
+  backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent 20%)`,
+  backdropFilter: 'blur(8px)',
+  '@media': {
+    [mantine.largerThan('md')]: {
+      maxWidth: '45vw'
+    }
+  }
+})
+
+export const title = style({})
+
+export const description = style({
+  whiteSpaceCollapse: 'preserve-breaks',
+  color: mantine.colors.gray[7]
+})
+globalStyle(`:where([data-mantine-color-scheme="dark"]) ${description}`, {
+  color: mantine.colors.gray[5]
+})

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/index.ts

@@ -1,3 +1,2 @@
 // export { default as Camera } from './Camera'
-export { KeepAspectRatio } from './KeepAspectRatio'
 export { default as OptionsPanel } from './OptionsPanel'