@likec4/diagram 1.1.0 → 1.1.1

package/dist/xyflow/XYFlowEvents.d.ts

@@ -1,10 +1,11 @@
 import { XYFlowNode } from './types';
 
 export declare function useXYFlowEvents(): {
-    onDoubleClick: import('react').MouseEventHandler<HTMLDivElement> | undefined;
-    onNodeClick: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
-    onNodeContextMenu: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
-    onEdgeClick: (event: import('react').MouseEvent<Element, MouseEvent>, edge: {
+    onDoubleClick: (event: import('react').MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onPaneClick: (event: import('react').MouseEvent<Element, MouseEvent>) => void;
+    onNodeContextMenu: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
+    onPaneContextMenu: (event: MouseEvent | import('react').MouseEvent<Element, MouseEvent>) => void;
+    onEdgeContextMenu: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
         source: string;
         target: string;
         style?: import('react').CSSProperties;
@@ -33,17 +34,19 @@ export declare function useXYFlowEvents(): {
         data: import('./types').RelationshipData;
         type: "relationship";
     }) => void;
-    onEdgeContextMenu: import('@xyflow/react').EdgeMouseHandler<{
+    onNodeClick: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
+    onNodeDoubleClick: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
+    onEdgeClick: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
         source: string;
         target: string;
-        style?: import("react").CSSProperties;
+        style?: import('react').CSSProperties;
         id: string;
         zIndex?: number;
-        markerEnd?: import("@xyflow/react").EdgeMarkerType;
-        markerStart?: import("@xyflow/react").EdgeMarkerType;
+        markerEnd?: import('@xyflow/react').EdgeMarkerType;
+        markerStart?: import('@xyflow/react').EdgeMarkerType;
         hidden?: boolean;
         className?: string;
-        label?: import("react").ReactNode;
+        label?: import('react').ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
@@ -53,30 +56,29 @@ export declare function useXYFlowEvents(): {
         targetHandle?: string | null;
         animated?: boolean;
         interactionWidth?: number;
-        labelStyle?: import("react").CSSProperties;
+        labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
-        labelBgStyle?: import("react").CSSProperties;
+        labelBgStyle?: import('react').CSSProperties;
         labelBgPadding?: [number, number];
         labelBgBorderRadius?: number;
-        updatable?: import("@xyflow/react").EdgeUpdatable;
-        data: import("./types").RelationshipData;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        data: import('./types').RelationshipData;
         type: "relationship";
-    }>;
-    onMoveEnd: import('@xyflow/react').OnMove;
-    onNodeDoubleClick: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
-    onNodeMouseEnter: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
-    onNodeMouseLeave: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
-    onEdgeMouseEnter: import('@xyflow/react').EdgeMouseHandler<{
+    }) => void;
+    onMoveEnd: (event: MouseEvent | TouchEvent | null, _viewport: import('@xyflow/react').Viewport) => void;
+    onNodeMouseEnter: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
+    onNodeMouseLeave: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
+    onEdgeMouseEnter: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
         source: string;
         target: string;
-        style?: import("react").CSSProperties;
+        style?: import('react').CSSProperties;
         id: string;
         zIndex?: number;
-        markerEnd?: import("@xyflow/react").EdgeMarkerType;
-        markerStart?: import("@xyflow/react").EdgeMarkerType;
+        markerEnd?: import('@xyflow/react').EdgeMarkerType;
+        markerStart?: import('@xyflow/react').EdgeMarkerType;
         hidden?: boolean;
         className?: string;
-        label?: import("react").ReactNode;
+        label?: import('react').ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
@@ -86,26 +88,26 @@ export declare function useXYFlowEvents(): {
         targetHandle?: string | null;
         animated?: boolean;
         interactionWidth?: number;
-        labelStyle?: import("react").CSSProperties;
+        labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
-        labelBgStyle?: import("react").CSSProperties;
+        labelBgStyle?: import('react').CSSProperties;
         labelBgPadding?: [number, number];
         labelBgBorderRadius?: number;
-        updatable?: import("@xyflow/react").EdgeUpdatable;
-        data: import("./types").RelationshipData;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        data: import('./types').RelationshipData;
         type: "relationship";
-    }>;
-    onEdgeMouseLeave: import('@xyflow/react').EdgeMouseHandler<{
+    }) => void;
+    onEdgeMouseLeave: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
         source: string;
         target: string;
-        style?: import("react").CSSProperties;
+        style?: import('react').CSSProperties;
         id: string;
         zIndex?: number;
-        markerEnd?: import("@xyflow/react").EdgeMarkerType;
-        markerStart?: import("@xyflow/react").EdgeMarkerType;
+        markerEnd?: import('@xyflow/react').EdgeMarkerType;
+        markerStart?: import('@xyflow/react').EdgeMarkerType;
         hidden?: boolean;
         className?: string;
-        label?: import("react").ReactNode;
+        label?: import('react').ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
@@ -115,15 +117,19 @@ export declare function useXYFlowEvents(): {
         targetHandle?: string | null;
         animated?: boolean;
         interactionWidth?: number;
-        labelStyle?: import("react").CSSProperties;
+        labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
-        labelBgStyle?: import("react").CSSProperties;
+        labelBgStyle?: import('react').CSSProperties;
         labelBgPadding?: [number, number];
         labelBgBorderRadius?: number;
-        updatable?: import("@xyflow/react").EdgeUpdatable;
-        data: import("./types").RelationshipData;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        data: import('./types').RelationshipData;
         type: "relationship";
-    }>;
-    onPaneClick: (event: import('react').MouseEvent<Element, MouseEvent>) => void;
-    onPaneContextMenu: (event: MouseEvent | import('react').MouseEvent<Element, MouseEvent>) => void;
+    }) => void;
+    /**
+     * WOKAROUND:
+     * Viewport transform is not rounded to integers which results in blurry nodes on some resolution
+     * https://github.com/xyflow/xyflow/issues/3282
+     */
+    onViewportChange: ({ x, y, zoom }: import('@xyflow/react').Viewport) => void;
 };

package/dist/xyflow/edges/edges.css.d.ts

@@ -1,6 +1,7 @@
 export declare const container: string;
 export declare const edgePathBg: string;
 export declare const fillStrokeCtx: string;
+export declare const controlPoint: string;
 export declare const cssEdgePath: string;
 export declare const varLabelX: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const varLabelY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -50,8 +50,9 @@
     "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.1.0",
+    "@likec4/core": "1.1.1",
     "@react-hookz/web": "^24.0.4",
+    "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
     "framer-motion": "^11.2.2",
@@ -70,6 +71,7 @@
     "@mantine/hooks": "^7.9.2",
     "@mantine/vanilla-extract": "^7.9.2",
     "@total-typescript/ts-reset": "^0.5.1",
+    "@types/d3-shape": "^3",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.4",
     "@vanilla-extract/css": "^1.15.1",

package/src/LikeC4Diagram.css.ts

@@ -16,7 +16,8 @@ globalStyle(`.react-flow${cssReactFlow}`, {
   }
 })
 globalStyle(`.react-flow${cssReactFlow} .react-flow__viewport`, {
-  willChange: 'transform'
+  // willChange: 'transform'
+  backfaceVisibility: 'hidden'
 })
 
 export const cssDisablePan = style({})

package/src/LikeC4Diagram.props.ts

@@ -1,4 +1,5 @@
 import type {
+  BorderStyle,
   DiagramEdge,
   DiagramNode,
   DiagramView,
@@ -10,8 +11,8 @@ import type {
 } from '@likec4/core'
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
-import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
 import type { XYBackgroundProps } from './xyflow/XYFlowBackground'
+import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
 
 export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigateTo'>>
 
@@ -44,22 +45,20 @@ export type OnEdgeClick = (
 export type OnCanvasClick = (event: ReactMouseEvent) => void
 
 export namespace Changes {
-  export interface ChangeColor {
-    op: 'change-color'
-    color: ThemeColor
-    targets: NonEmptyArray<Fqn>
-  }
-
-  export interface ChangeShape {
-    op: 'change-shape'
-    shape: ElementShape
+  export interface ChangeElementStyle {
+    op: 'change-element-style'
+    style: {
+      border?: BorderStyle
+      opacity?: number
+      shape?: ElementShape
+      color?: ThemeColor
+    }
     targets: NonEmptyArray<Fqn>
   }
 }
 
 export type Change =
-  | Changes.ChangeColor
-  | Changes.ChangeShape
+  | Changes.ChangeElementStyle
 
 export type ChangeEvent = {
   changes: NonEmptyArray<Change>
@@ -139,6 +138,12 @@ export interface LikeC4DiagramProperties {
    * @default true
    */
   showElementLinks?: boolean | undefined
+
+  /**
+   * Display panel with diagram title / description
+   * @default true
+   */
+  showDiagramTitle?: boolean | undefined
 }
 
 export interface LikeC4DiagramEventHandlers {

package/src/LikeC4Diagram.tsx

@@ -8,6 +8,7 @@ import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from '.
 import { EnsureMantine } from './mantine/EnsureMantine'
 import { DiagramContextProvider } from './state/DiagramContext'
 import { WhenInitialized } from './state/WhenInitialized'
+import DiagramTitlePanel from './ui/DiagramTitlePanel'
 import OptionsPanel from './ui/OptionsPanel'
 import { diagramViewToXYFlowData } from './xyflow/diagram-to-xyflow'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
@@ -29,6 +30,7 @@ export function LikeC4Diagram({
   background = 'dots',
   controls = false,
   showElementLinks = true,
+  showDiagramTitle = true,
   initialWidth,
   initialHeight,
   keepAspectRatio = false,
@@ -106,6 +108,7 @@ export function LikeC4Diagram({
               defaultEdges={initialRef.current.defaultEdges}
             >
               {readonly !== true && <OptionsPanel />}
+              {showDiagramTitle === true && <DiagramTitlePanel />}
             </XYFlow>
           </KeepAspectRatioContainer>
           <WhenInitialized>

package/src/StaticLikeC4Diagram.tsx

@@ -31,6 +31,7 @@ export function StaticLikeC4Diagram({
       controls={false}
       background={background}
       showElementLinks
+      showDiagramTitle={false}
       nodesSelectable={false}
       nodesDraggable={false}
       {...rest}

package/src/globals.css.ts

@@ -1,5 +1,5 @@
 import { defaultTheme } from '@likec4/core'
-import { createGlobalTheme } from '@vanilla-extract/css'
+import { createGlobalTheme, globalStyle } from '@vanilla-extract/css'
 import { scale, toHex } from 'khroma'
 import { keys, omit } from 'remeda'
 import { mantine } from './mantine.css'
@@ -7,6 +7,11 @@ 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'])
 }, {

package/src/state/diagramStore.ts

@@ -1,10 +1,20 @@
-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'
@@ -83,6 +93,8 @@ 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
@@ -230,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 })
@@ -353,7 +391,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
             xyflow.fitView({
               includeHiddenNodes: true,
               duration: (centerNode && focusedNodeId) ? 300 : 400,
-              padding: centerNode ? 0 : fitViewPadding,
+              padding: fitViewPadding,
               minZoom: MinZoom,
               maxZoom: 1,
               ...(centerNode && { nodes: [centerNode] })

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]
+})