@likec4/diagram 1.7.3 → 1.8.0

package/dist/ui/notation/NotationPanel.css.d.ts

@@ -0,0 +1,6 @@
+export declare const container: string;
+export declare const card: string;
+export declare const tabPanel: string;
+export declare const elementNotation: string;
+export declare const shapeSvg: string;
+export declare const shapeBadge: string;

package/dist/ui/notation/NotationPanel.d.ts

@@ -0,0 +1 @@
+export declare function NotationPanel(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/notation/index.d.ts

@@ -0,0 +1 @@
+export { NotationPanel as default } from './NotationPanel';

package/dist/xyflow/const.d.ts

@@ -4,3 +4,4 @@ export declare const ZIndexes: {
     readonly Element: 6;
 };
 export declare const MinZoom = 0.1;
+export declare const MaxZoom = 2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -50,31 +50,31 @@
   "dependencies": {
     "@lume/kiwi": "^0.4.3",
     "@react-hookz/web": "^24.0.4",
-    "@tabler/icons-react": "^3.11.0",
+    "@tabler/icons-react": "^3.12.0",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.1",
-    "@xyflow/react": "12.0.4",
-    "@xyflow/system": "0.0.37",
+    "@xyflow/react": "12.1.1",
+    "@xyflow/system": "0.0.39",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.3.24",
-    "remeda": "^2.3.0",
-    "zustand": "^4.5.4"
+    "framer-motion": "^11.3.28",
+    "remeda": "^2.11.0",
+    "zustand": "^4.5.5"
   },
   "peerDependencies": {
-    "@likec4/core": "1.7.3",
+    "@likec4/core": "1.8.0",
     "@mantine/core": "^7.11.2",
     "@mantine/hooks": "^7.11.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/core": "1.7.3",
-    "@likec4/tsconfig": "1.7.3",
+    "@likec4/core": "1.8.0",
+    "@likec4/tsconfig": "1.8.0",
     "@mantine/core": "7.11.2",
     "@mantine/hooks": "7.11.2",
     "@mantine/vanilla-extract": "7.11.2",
@@ -85,7 +85,7 @@
     "@types/react-dom": "^18.3.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.8",
     "@vitejs/plugin-react": "^4.3.1",
-    "execa": "^9.3.0",
+    "execa": "^9.3.1",
     "khroma": "^2.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/src/LikeC4Diagram.props.ts

@@ -203,6 +203,12 @@ export interface LikeC4DiagramProperties {
    */
   showNavigationButtons?: undefined | boolean
 
+  /**
+   * Display notations of the view
+   * @default true
+   */
+  showNotations?: boolean | undefined
+
   /**
    * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
    * @default true

package/src/LikeC4Diagram.tsx

@@ -30,6 +30,7 @@ export function LikeC4Diagram({
   controls = false,
   showElementLinks = true,
   showDiagramTitle = true,
+  showNotations = true,
   enableDynamicViewWalkthrough = false,
   enableFocusMode = false,
   initialWidth,
@@ -80,6 +81,7 @@ export function LikeC4Diagram({
             fitViewPadding={fitViewPadding}
             showElementLinks={showElementLinks}
             showNavigationButtons={showNavigationButtons}
+            showNotations={showNotations}
             nodesDraggable={nodesDraggable}
             nodesSelectable={nodesSelectable}
             experimentalEdgeEditing={experimentalEdgeEditing}

package/src/StaticLikeC4Diagram.tsx

@@ -34,6 +34,7 @@ export function StaticLikeC4Diagram({
       background={background}
       showElementLinks
       showDiagramTitle={false}
+      showNotations={false}
       enableDynamicViewWalkthrough={false}
       enableFocusMode={false}
       nodesSelectable={false}

package/src/globals.css.ts

@@ -2,7 +2,7 @@ import { defaultTheme } from '@likec4/core'
 import { createGlobalTheme, globalStyle } from '@vanilla-extract/css'
 import { scale, toHex } from 'khroma'
 import { keys, omit } from 'remeda'
-import { mantine } from './mantine.css'
+import { mantine, whereDark } from './mantine.css'
 import { vars } from './theme.css'
 
 export const rootClassName = 'likec4-diagram-root'
@@ -18,6 +18,10 @@ globalStyle(`.${rootClassName}`, {
   WebkitFontSmoothing: mantine.webkitFontSmoothing,
   MozOsxFontSmoothing: mantine.mozFontSmoothing
 })
+globalStyle(`.${rootClassName} .mantine-ActionIcon-icon .tabler-icon`, {
+  width: '75%',
+  height: '75%'
+})
 
 createGlobalTheme(`.${rootClassName}`, {
   ...omit(vars, ['optionsPanel', 'navigationPanel', 'safariAnimationHook', 'default'])
@@ -28,7 +32,7 @@ createGlobalTheme(`.${rootClassName}`, {
     background: {
       color: mantine.colors.body,
       pattern: {
-        color: mantine.colors.dark[3]
+        color: mantine.colors.gray[4]
       }
     }
   },
@@ -43,33 +47,9 @@ createGlobalTheme(`.${rootClassName}`, {
   relation: {
     ...defaultTheme.relationships.slate
   }
-  // likec4: {
-  //   font: `var(--likec4-font-family,'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"')`,
-  //   backgroundColor: fallbackVar(globalvars.likec4.backgroundColor, mantine.colors.body)
-  // },
-  // compound: {
-  //   font: fallbackVar(vars.compound.font, vars.likec4.font),
-  //   titleColor: fallbackVar(globalvars.compound.titleColor, globalvars.element.loContrast),
-  // },
-  // element: {
-  //   font: fallbackVar(globalvars.element.font, vars.likec4.font),
-  //   fill: fallbackVar(globalvars.element.fill, defaultTheme.elements.primary.fill),
-  //   stroke: fallbackVar(globalvars.element.stroke, defaultTheme.elements.primary.stroke),
-  //   hiContrast: fallbackVar(globalvars.element.hiContrast, defaultTheme.elements.primary.hiContrast),
-  //   loContrast: fallbackVar(globalvars.element.loContrast, defaultTheme.elements.primary.loContrast),
-  // },
-  // relation: {
-  //   lineColor: fallbackVar(globalvars.relation.lineColor, defaultTheme.relationships.slate.lineColor),
-  //   labelColor: fallbackVar(globalvars.relation.labelColor, defaultTheme.relationships.slate.labelColor),
-  //   labelBgColor: fallbackVar(globalvars.relation.labelBgColor, defaultTheme.relationships.slate.labelBgColor),
-  // },
-  // optionsPanel: {
-  //   top: globalvars.optionsPanel.top,
-  //   right: globalvars.optionsPanel.right
-  // }
 })
 
-createGlobalTheme(`:where([data-mantine-color-scheme='light']) .${rootClassName}`, {
+createGlobalTheme(`${whereDark} .${rootClassName}`, {
   likec4: {
     background: {
       pattern: {
@@ -81,7 +61,7 @@ createGlobalTheme(`:where([data-mantine-color-scheme='light']) .${rootClassName}
   likec4: {
     background: {
       pattern: {
-        color: mantine.colors.gray[6]
+        color: mantine.colors.dark[5]
       }
     }
   }
@@ -138,7 +118,7 @@ for (const color of keys(defaultTheme.elements)) {
     )
 
     createGlobalTheme(
-      `:where([data-mantine-color-scheme='dark']) :where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`,
+      `${whereDark} :where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`,
       compounds,
       {
         fill: compoundDarkColor(defaultTheme.elements[color].fill, depth),

package/src/mantine.css.ts

@@ -1,4 +1,7 @@
 import { themeToVars } from '@mantine/vanilla-extract'
 
+export const whereLight = ':where([data-mantine-color-scheme="light"])'
+export const whereDark = ':where([data-mantine-color-scheme="dark"])'
+
 // we need only variables names
 export const mantine = themeToVars({})

package/src/state/diagram-to-xyflow.ts

@@ -55,10 +55,11 @@ export function diagramViewToXYFlowData(
   let next: typeof traverse[0] | undefined
   while ((next = traverse.shift())) {
     const { node, parent } = next
-    if (node.children.length > 0) {
+    const isCompound = hasAtLeast(node.children, 1)
+    if (isCompound) {
       traverse.push(...node.children.map(child => ({ node: nodeById(child), parent: node })))
     }
-    const isCompound = hasAtLeast(node.children, 1)
+
     const position = {
       x: node.position[0],
       y: node.position[1]
@@ -82,6 +83,7 @@ export function diagramViewToXYFlowData(
       },
       draggable,
       selectable: opts.selectable,
+      focusable: opts.selectable && !isCompound,
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
@@ -102,18 +104,11 @@ export function diagramViewToXYFlowData(
     const source = edge.source
     const target = edge.target
     const id = ns + edge.id
-    // const points = isElkEdge(edge) ? edge.points : deriveEdgePoints(edge.points)
-    // const controlPoints = deriveEdgePoints(edge.points)
-    // if (edge.tailArrowPoint) {
-    //   controlPoints.unshift([...edge.tailArrowPoint])
-    // }
-    // if (edge.headArrowPoint) {
-    //   controlPoints.push([...edge.headArrowPoint])
-    // }
-    invariant(hasAtLeast(edge.points, 2), 'edge should have at least 2 points')
-    // invariant(hasAtLeast(controlPoints, 2), 'edge controlPoints should have at least 2 points')
 
-    // const level = Math.max(nodeZIndex(nodeById(source)), nodeZIndex(nodeById(target)))
+    if (!hasAtLeast(edge.points, 2)) {
+      console.error('edge should have at least 2 points', edge)
+      continue
+    }
 
     xyedges.push({
       id,

package/src/state/diagramStore.ts

@@ -1,4 +1,13 @@
-import type { DiagramNode, DiagramView, Fqn, NodeId, ViewChange, ViewID } from '@likec4/core'
+import type {
+  DiagramNode,
+  DiagramView,
+  ElementKind,
+  ElementNotation,
+  Fqn,
+  NodeId,
+  ViewChange,
+  ViewID
+} from '@likec4/core'
 import { getBBoxCenter, invariant, nonexhaustive, nonNullable, StepEdgeId } from '@likec4/core'
 import {
   applyEdgeChanges,
@@ -11,8 +20,8 @@ import { boxToRect, getBoundsOfRects, getNodeDimensions } from '@xyflow/system'
 import { DEV } from 'esm-env'
 import { deepEqual as eq, shallowEqual } from 'fast-equals'
 import type { MouseEvent as ReactMouseEvent } from 'react'
-import { entries, hasAtLeast, isNullish, reduce } from 'remeda'
-import type { ConditionalKeys, Exact, Except, RequiredKeysOf, Simplify } from 'type-fest'
+import { entries, hasAtLeast, isNullish, map, prop, reduce } from 'remeda'
+import type { ConditionalKeys, Except, RequiredKeysOf, Simplify } from 'type-fest'
 import { devtools, subscribeWithSelector } from 'zustand/middleware'
 import { shallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
@@ -37,6 +46,7 @@ export type DiagramInitialState = {
   readonly: boolean
   showElementLinks: boolean
   showNavigationButtons: boolean
+  showNotations: boolean
   fitViewEnabled: boolean
   fitViewPadding: number
   zoomable: boolean
@@ -132,6 +142,8 @@ export type DiagramState = Simplify<
     onInit: (xyflow: XYFlowInstance) => void
     onNodesChange: OnNodesChange<XYFlowNode>
     onEdgesChange: OnEdgesChange<XYFlowEdge>
+
+    highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void
   }
 >
 
@@ -162,7 +174,7 @@ let StoreDevId = 1
 
 const EmptyStringSet: ReadonlySet<string> = new StringSet()
 
-export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(props: T) {
+export function createDiagramStore(props: DiagramInitialState) {
   const storeDevId = 'DiagramStore' + String(StoreDevId++).padStart(2, '0')
   const {
     xynodes,
@@ -878,6 +890,21 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
                 'onInit'
               )
             }
+          },
+
+          highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => {
+            const { xynodes, xyedges } = get()
+            const dimmed = new StringSet(map(xyedges, prop('id')))
+            xynodes.forEach(({ id, data }) => {
+              const node = data.element
+              if (
+                node.shape !== notation.shape || node.color !== notation.color || !notation.kinds.includes(node.kind)
+                || (onlyOfKind && node.kind !== onlyOfKind)
+              ) {
+                dimmed.add(id)
+              }
+            })
+            set({ dimmed }, noReplace, 'highlightByElementNotation')
           }
         }),
         {

package/src/ui/DiagramTitlePanel.css.ts

@@ -1,5 +1,5 @@
 import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../mantine.css'
+import { mantine, whereDark } from '../mantine.css'
 import { vars } from '../theme.css'
 
 export const container = style({
@@ -18,16 +18,16 @@ export const card = style({
   backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   '@media': {
     [mantine.largerThan('sm')]: {
-      minWidth: 300,
+      minWidth: 250,
       maxWidth: '90vw'
     },
     [mantine.largerThan('md')]: {
-      minWidth: 400,
+      minWidth: 350,
       maxWidth: '70vw'
     }
   },
   selectors: {
-    [`:where([data-mantine-color-scheme='dark']) &`]: {
+    [`${whereDark} &`]: {
       backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`
     }
   }
@@ -37,8 +37,10 @@ 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]
+  color: mantine.colors.gray[7],
+  selectors: {
+    [`${whereDark} &`]: {
+      color: mantine.colors.gray[5]
+    }
+  }
 })

package/src/ui/DiagramTitlePanel.tsx

@@ -39,53 +39,70 @@ export default function DiagramTitlePanel() {
         <Card
           radius="sm"
           className={css.card}
-          withBorder
-          p={'md'}
-          pb={isCollapsed ? 'sm' : 'md'}
+          withBorder={!isCollapsed}
+          p={isCollapsed ? 'sm' : 'md'}
           onDoubleClick={e => e.stopPropagation()}>
-          <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 && (
+            <CardSection>
+              <Button
+                fullWidth
+                justify="stretch"
+                size="md"
+                radius={'0'}
+                variant={'subtle'}
+                color="gray"
+                onClick={toggle}
+                fw={500}
+                fz={'sm'}
+              >
+                {title}
+              </Button>
+            </CardSection>
+          )}
           {!isCollapsed && (
             <>
+              <CardSection mb={'xs'}>
+                <Button
+                  fullWidth
+                  size="xs"
+                  h={'sm'}
+                  py={2}
+                  radius={'0'}
+                  variant={'subtle'}
+                  color="gray"
+                  onClick={toggle}
+                >
+                  <IconMenu size={11} opacity={0.7} />
+                </Button>
+              </CardSection>
+
+              <Group justify="stretch" wrap="nowrap" mb={'sm'}>
+                <Text
+                  component={'div'}
+                  flex={'1'}
+                  size={'md'}
+                  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>
               {description && (
                 <Spoiler
                   maxHeight={42}
@@ -113,19 +130,19 @@ export default function DiagramTitlePanel() {
                   justify="stretch"
                   align="stretch">
                   {links.map((link) => (
-                    <Group key={link} wrap="nowrap" align="center" gap={'sm'}>
+                    <Group key={link.url} wrap="nowrap" align="center" gap={'sm'}>
                       <Box flex={'1'} style={{ overflow: 'hidden' }}>
                         <Anchor
-                          href={link}
+                          href={link.url}
                           target="_blank"
                           fz="xs"
                           truncate="end"
                           display={'inline-block'}
                           w={'100%'}>
-                          {link}
+                          {link.title || link.url}
                         </Anchor>
                       </Box>
-                      <CopyButton value={link}>
+                      <CopyButton value={link.url}>
                         {({ copied, copy }) => (
                           <Button
                             size="compact-xs"

package/src/ui/notation/NotationPanel.css.ts

@@ -0,0 +1,103 @@
+import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { calc } from '@vanilla-extract/css-utils'
+import { mantine, whereDark } from '../../mantine.css'
+import { vars } from '../../theme.css'
+import { stokeFillMix } from '../../xyflow/nodes/element/element.css'
+
+export const container = style({
+  bottom: 0,
+  right: 0,
+  padding: 8,
+  margin: 0
+})
+
+export const card = style({
+  cursor: 'default',
+  userSelect: 'none',
+  minWidth: 200,
+  maxWidth: 'calc(100vw - 20px)',
+  backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent 20%)`,
+  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  '@media': {
+    [mantine.largerThan('sm')]: {
+      minWidth: 300,
+      maxWidth: `65vw`
+    },
+    [mantine.largerThan('md')]: {
+      // minWidth: 350,
+      maxWidth: `40vw`
+    }
+  },
+  selectors: {
+    [`${whereDark} &`]: {
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`
+    }
+  }
+})
+
+export const tabPanel = style({
+  padding: calc(mantine.spacing.xs).divide(2).toString()
+})
+
+// export const description = style({
+//   whiteSpaceCollapse: 'preserve-breaks',
+//   color: mantine.colors.gray[7],
+//   selectors: {
+//     [`${whereDark} &`]: {
+//       color: mantine.colors.gray[5]
+//     }
+//   }
+// })
+
+export const elementNotation = style({
+  backgroundColor: 'transparent',
+  transition: 'all 100ms ease-in',
+  // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  vars: {
+    [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
+  },
+  ':hover': {
+    transition: 'all 120ms ease-out',
+    // backgroundColor:
+    backgroundColor: `color-mix(in srgb, ${mantine.colors.primaryColors[2]}, transparent 50%)`
+  },
+  selectors: {
+    [`${whereDark} &:hover`]: {
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[3]}, transparent 60%)`
+    }
+  }
+})
+
+export const shapeSvg = style({
+  fill: vars.element.fill,
+  stroke: vars.element.stroke,
+  strokeWidth: 1,
+  overflow: 'visible',
+  width: '100%',
+  height: 'auto',
+  filter: `
+    drop-shadow(0 2px 3px rgb(0 0 0 / 22%))
+    drop-shadow(0 1px 8px rgb(0 0 0 / 10%))
+  `
+})
+
+export const shapeBadge = style({
+  fontWeight: 500,
+  letterSpacing: '0.2px',
+  paddingTop: 0,
+  paddingBottom: 0,
+  textTransform: 'lowercase',
+  transition: 'all 150ms ease-in-out',
+  cursor: 'pointer',
+  vars: {
+    ['--badge-radius']: '2px',
+    ['--badge-fz']: '9.5px',
+    ['--badge-padding-x']: '3px',
+    ['--badge-height']: '13.5px',
+    ['--badge-lh']: '1'
+    // ['--badge-bg']: vars.element.fill,
+    // ['--badge-color']: vars.element.hiContrast
+  }
+})