@likec4/diagram 1.36.1 → 1.37.0

package/src/state/diagram-machine.ts

@@ -24,6 +24,7 @@ import {
   useStoreApi,
 } from '@xyflow/react'
 import { type EdgeChange, type NodeChange, type Rect, type Viewport, nodeToRect } from '@xyflow/system'
+import type { MouseEvent } from 'react'
 import { clamp, first, hasAtLeast, prop } from 'remeda'
 import type { PartialDeep } from 'type-fest'
 import {
@@ -149,8 +150,9 @@ export type Events =
   | { type: 'xyflow.resized' }
   | { type: 'xyflow.nodeMouseEnter'; node: Types.Node }
   | { type: 'xyflow.nodeMouseLeave'; node: Types.Node }
-  | { type: 'xyflow.edgeMouseEnter'; edge: Types.Edge }
-  | { type: 'xyflow.edgeMouseLeave'; edge: Types.Edge }
+  | { type: 'xyflow.edgeMouseEnter'; edge: Types.Edge; event: MouseEvent }
+  | { type: 'xyflow.edgeMouseLeave'; edge: Types.Edge; event: MouseEvent }
+  | { type: 'xyflow.edgeEditingStarted'; edge: Types.EdgeData }
   | { type: 'update.nodeData'; nodeId: NodeId; data: PartialDeep<Types.NodeData> }
   | { type: 'update.edgeData'; edgeId: EdgeId; data: PartialDeep<Types.EdgeData> }
   | { type: 'update.view'; view: DiagramView; xynodes: Types.Node[]; xyedges: Types.Edge[] }
@@ -184,6 +186,12 @@ export type EmittedEvents =
   | { type: 'navigateTo'; viewId: ViewId }
   | { type: 'viewChange'; change: ViewChange }
   | { type: 'openSource'; params: OpenSourceParams }
+  | { type: 'edgeMouseEnter'; edge: Types.Edge; event: MouseEvent }
+  | { type: 'edgeMouseLeave'; edge: Types.Edge; event: MouseEvent }
+  | { type: 'edgeEditingStarted'; edge: Types.Edge }
+  | { type: 'walkthroughStarted'; edge: Types.Edge }
+  | { type: 'walkthroughStep'; edge: Types.Edge }
+  | { type: 'walkthroughStopped' }
 
 export type ActionArg = { context: Context; event: Events }
 
@@ -417,6 +425,10 @@ const _diagramMachine = setup({
         features: { ...event.features },
       }
     }),
+    'updateInputs': assign(({ event }) => {
+      assertEvent(event, 'update.inputs')
+      return { ...event.inputs }
+    }),
     'closeSearch': sendTo(
       ({ system }) => typedSystem(system).searchActorRef!,
       {
@@ -464,25 +476,41 @@ const _diagramMachine = setup({
         }),
       }
     }),
-    'onEdgeMouseEnter': assign(({ context }, params: { edge: Types.Edge }) => {
-      return {
+    'onEdgeMouseEnter': enqueueActions(({ enqueue, context, event }) => {
+      assertEvent(event, 'xyflow.edgeMouseEnter')
+      let edge = event.edge
+      enqueue.assign({
         xyedges: context.xyedges.map(e => {
-          if (e.id === params.edge.id) {
-            return Base.setHovered(e, true)
+          if (e.id === event.edge.id) {
+            edge = Base.setHovered(e, true)
+            return edge
           }
           return e
         }),
-      }
+      })
+      enqueue.emit({
+        type: 'edgeMouseEnter',
+        edge,
+        event: event.event,
+      })
     }),
-    'onEdgeMouseLeave': assign(({ context }, params: { edge: Types.Edge }) => {
-      return {
+    'onEdgeMouseLeave': enqueueActions(({ enqueue, context, event }) => {
+      assertEvent(event, 'xyflow.edgeMouseLeave')
+      let edge = event.edge
+      enqueue.assign({
         xyedges: context.xyedges.map(e => {
-          if (e.id === params.edge.id) {
-            return Base.setHovered(e, false)
+          if (e.id === event.edge.id) {
+            edge = Base.setHovered(e, false)
+            return edge
           }
           return e
         }),
-      }
+      })
+      enqueue.emit({
+        type: 'edgeMouseLeave',
+        edge,
+        event: event.event,
+      })
     }),
     'focus on nodes and edges': assign(focusNodesEdges),
     'notations.highlight': assign(({ context }, params: { notation: ElementNotation; kind?: string }) => {
@@ -524,6 +552,33 @@ const _diagramMachine = setup({
       })),
     })),
     'update active walkthrough': assign(updateActiveWalkthrough),
+    'emit: walkthroughStarted': emit(({ context }) => {
+      const edge = context.xyedges.find(x => x.id === context.activeWalkthrough?.stepId)
+      invariant(edge, 'Invalid walkthrough state')
+      return {
+        type: 'walkthroughStarted',
+        edge,
+      }
+    }),
+    'emit: walkthroughStep': emit(({ context }) => {
+      const edge = context.xyedges.find(x => x.id === context.activeWalkthrough?.stepId)
+      invariant(edge, 'Invalid walkthrough state')
+      return {
+        type: 'walkthroughStep',
+        edge,
+      }
+    }),
+    'emit: walkthroughStopped': emit(() => ({
+      type: 'walkthroughStopped',
+    })),
+    'emit: edgeEditingStarted': emit(({ context, event }) => {
+      assertEvent(event, 'xyflow.edgeEditingStarted')
+      const edge = nonNullable(context.xyedges.find(x => x.id === event.edge.id), `Edge ${event.edge.id} not found`)
+      return ({
+        type: 'edgeEditingStarted',
+        edge,
+      })
+    }),
   },
 }).createMachine({
   initial: 'initializing',
@@ -739,16 +794,10 @@ const _diagramMachine = setup({
           },
         },
         'xyflow.edgeMouseEnter': {
-          actions: {
-            type: 'onEdgeMouseEnter',
-            params: prop('event'),
-          },
+          actions: 'onEdgeMouseEnter',
         },
         'xyflow.edgeMouseLeave': {
-          actions: {
-            type: 'onEdgeMouseLeave',
-            params: prop('event'),
-          },
+          actions: 'onEdgeMouseLeave',
         },
         'notations.highlight': {
           actions: {
@@ -838,7 +887,7 @@ const _diagramMachine = setup({
               }),
               target: 'focused',
             },
-            'xyflow.edgeClick': [{
+            'xyflow.edgeClick': {
               guard: and([
                 'is dynamic view',
                 'click: selected edge',
@@ -847,17 +896,7 @@ const _diagramMachine = setup({
                 type: 'walkthrough.start',
                 stepId: event.edge.id as StepEdgeId,
               })),
-            }, {
-              guard: and([
-                'enabled: RelationshipDetails',
-                'click: selected edge',
-              ]) as any,
-              actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => ({
-                type: 'open.relationshipDetails',
-                viewId: context.view.id,
-                edgeId: event.edge.id as EdgeId,
-              })),
-            }],
+            },
           },
         },
         focused: {
@@ -944,6 +983,7 @@ const _diagramMachine = setup({
             }),
             'update active walkthrough',
             'xyflow:fitFocusedBounds',
+            'emit: walkthroughStarted',
           ],
           on: {
             'key.esc': {
@@ -956,26 +996,29 @@ const _diagramMachine = setup({
               actions: raise({ type: 'walkthrough.step', direction: 'next' }),
             },
             'walkthrough.step': {
-              actions: enqueueActions(({ enqueue, context, event }) => {
-                const { stepId } = context.activeWalkthrough!
-                const stepIndex = context.xyedges.findIndex(e => e.id === stepId)
-                const nextStepIndex = clamp(event.direction === 'next' ? stepIndex + 1 : stepIndex - 1, {
-                  min: 0,
-                  max: context.xyedges.length - 1,
-                })
-                if (nextStepIndex === stepIndex) {
-                  return
-                }
-                const nextStepId = context.xyedges[nextStepIndex]!.id as StepEdgeId
-                enqueue.assign({
-                  activeWalkthrough: {
-                    stepId: nextStepId,
-                    parallelPrefix: getParallelStepsPrefix(nextStepId),
-                  },
-                })
-                enqueue('update active walkthrough')
-                enqueue('xyflow:fitFocusedBounds')
-              }),
+              actions: [
+                assign(({ context, event }) => {
+                  const { stepId } = context.activeWalkthrough!
+                  const stepIndex = context.xyedges.findIndex(e => e.id === stepId)
+                  const nextStepIndex = clamp(event.direction === 'next' ? stepIndex + 1 : stepIndex - 1, {
+                    min: 0,
+                    max: context.xyedges.length - 1,
+                  })
+                  if (nextStepIndex === stepIndex) {
+                    return {}
+                  }
+                  const nextStepId = context.xyedges[nextStepIndex]!.id as StepEdgeId
+                  return {
+                    activeWalkthrough: {
+                      stepId: nextStepId,
+                      parallelPrefix: getParallelStepsPrefix(nextStepId),
+                    },
+                  }
+                }),
+                'update active walkthrough',
+                'xyflow:fitFocusedBounds',
+                'emit: walkthroughStep',
+              ],
             },
             'xyflow.edgeClick': {
               actions: [
@@ -992,6 +1035,7 @@ const _diagramMachine = setup({
                 }),
                 'update active walkthrough',
                 'xyflow:fitFocusedBounds',
+                'emit: walkthroughStep',
               ],
             },
             'notations.unhighlight': {
@@ -1025,6 +1069,7 @@ const _diagramMachine = setup({
               activeWalkthrough: null,
               viewportBeforeFocus: null,
             })
+            enqueue('emit: walkthroughStopped')
           }),
         },
       },
@@ -1089,6 +1134,9 @@ const _diagramMachine = setup({
         viewport: (({ event }) => event.viewport),
       }),
     },
+    'xyflow.edgeEditingStarted': {
+      actions: 'emit: edgeEditingStarted',
+    },
     'fitDiagram': {
       guard: 'enabled: FitView',
       actions: {
@@ -1151,7 +1199,7 @@ const _diagramMachine = setup({
       ],
     },
     'update.inputs': {
-      actions: assign(({ event }) => ({ ...event.inputs })),
+      actions: 'updateInputs',
     },
     'update.features': {
       actions: [

package/src/state/types.ts

@@ -23,7 +23,10 @@ export type DiagramActorSnapshot = SnapshotFrom<DiagramMachineLogic>
 
 export type DiagramActorEvent = EventFromLogic<DiagramMachineLogic>
 
-export type { Context as DiagramContext } from './diagram-machine'
+export type {
+  Context as DiagramContext,
+  EmittedEvents as DiagramEmittedEvents,
+} from './diagram-machine'
 
 export type SyncLayoutActorRef = Omit<ActorRefFromLogic<SyncLayoutActorLogic>, 'system'> & {
   system: System

package/src/utils/index.ts

@@ -10,5 +10,6 @@ export {
   isSamePoint,
   nodeToRect,
   stopPropagation,
-  toDomPrecision,
 } from './xyflow'
+
+export { roundDpr } from './roundDpr'

package/src/utils/roundDpr.ts

@@ -0,0 +1,27 @@
+import { clamp } from 'remeda'
+
+/**
+ * Returns the current device pixel ratio (DPR) given the passed options
+ *
+ * @param options
+ * @returns current device pixel ratio
+ */
+function getDevicePixelRatio(): number {
+  const hasDprProp = typeof window !== 'undefined' && typeof window.devicePixelRatio === 'number'
+  const dpr = hasDprProp ? window.devicePixelRatio : 1
+  return clamp(Math.floor(dpr), {
+    min: 1,
+    max: 4,
+  })
+}
+
+let knownDpr: number | undefined
+
+export function roundDpr(v: number) {
+  knownDpr ??= getDevicePixelRatio()
+  if (knownDpr < 2) {
+    return Math.round(v)
+  }
+  // https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
+  return Math.round(v * knownDpr) / knownDpr
+}

package/src/utils/xyflow.ts

@@ -5,13 +5,6 @@ import { getNodeDimensions } from '@xyflow/system'
 import { Bezier } from 'bezier-js'
 import { isArray } from 'remeda'
 
-export function toDomPrecision(v: number | null) {
-  if (v === null) {
-    return 0.01
-  }
-  return Math.round(v * 100) / 100
-}
-
 export function distance(a: XYPosition, b: XYPosition) {
   return Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2))
 }

package/dist/base/primitives/compound/CompoundNodeContainer.css.d.ts

@@ -1,35 +0,0 @@
-import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
-export declare const borderWidth: {
-    readonly var: "--_border-width";
-    readonly ref: "var(--_border-width, 2px)";
-};
-export declare const borderRadius: {
-    readonly var: "--_border-radius";
-    readonly ref: "var(--_border-radius, 4px)";
-};
-export declare const compoundOpacity: {
-    readonly var: "--_compound-opacity";
-    readonly ref: "var(--_compound-opacity, 1)";
-};
-export declare const borderOpacityPercent: {
-    readonly var: "--_border-opacity-percent";
-    readonly ref: "var(--_border-opacity-percent, 100%)";
-};
-export declare const compound: SlotRecipeRuntimeFn<"root" | "compoundBorder" | "indicatorSvg" | "indicatorRect", {
-    isTransparent: {
-        false: {
-            root: {
-                _before: {
-                    boxShadow: {
-                        _noReduceGraphics: "0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)";
-                        _whenSelected: "none";
-                        _whenPanning: "none !important";
-                    };
-                };
-            };
-        };
-        true: {
-            root: {};
-        };
-    };
-}>;

package/dist/base/primitives/compound/CompoundNodeContainer.css.js

@@ -1,132 +0,0 @@
-import { sva, css } from '@likec4/styles/css';
-
-const borderWidth = {
-  var: "--_border-width",
-  ref: "var(--_border-width, 2px)"
-};
-const borderRadius = {
-  var: "--_border-radius",
-  ref: "var(--_border-radius, 4px)"
-};
-const compoundOpacity = {
-  var: "--_compound-opacity",
-  ref: "var(--_compound-opacity, 1)"
-};
-const borderOpacityPercent = {
-  var: "--_border-opacity-percent",
-  ref: "var(--_border-opacity-percent, 100%)"
-};
-const root = css.raw({
-  position: "relative",
-  width: "100%",
-  height: "100%",
-  padding: "0",
-  margin: "0",
-  border: "transparent",
-  pointerEvents: "none",
-  _before: {
-    borderRadius: borderRadius.ref,
-    content: '" "',
-    position: "absolute",
-    top: "0",
-    left: "0",
-    width: "100%",
-    height: "100%",
-    border: "transparent",
-    background: "var(--likec4-palette-fill)",
-    backgroundClip: "padding-box",
-    transitionDelay: ".075ms"
-  },
-  _noReduceGraphics: {
-    _before: {
-      transition: `all {durations.slow} {easings.inOut}`
-    },
-    "&[data-likec4-hovered='true']": {
-      _before: {
-        transitionDelay: ".2s",
-        transitionTimingFunction: "in"
-      }
-    }
-  },
-  "&:is([data-compound-transparent])": {
-    _before: {
-      opacity: compoundOpacity.ref,
-      borderWidth: `calc(${borderWidth.ref} - 1px)`
-    }
-  }
-});
-const compoundBorder = css.raw({
-  borderRadius: borderRadius.ref,
-  padding: "0",
-  margin: "0",
-  transition: `all 250ms {easings.inOut}`,
-  cursor: "default",
-  position: "absolute",
-  top: "0",
-  left: "0",
-  width: "100%",
-  height: "100%",
-  pointerEvents: "none",
-  background: "transparent",
-  borderStyle: "dashed",
-  borderWidth: `[${borderWidth.ref}]`,
-  borderColor: `[color-mix(in srgb, var(--likec4-palette-stroke) ${borderOpacityPercent.ref}, transparent)]`
-});
-const indicatorSvg = css.raw({
-  position: "absolute",
-  top: "0",
-  left: "0",
-  width: "100%",
-  height: "100%",
-  pointerEvents: "none",
-  overflow: "visible",
-  visibility: "hidden",
-  _whenFocused: {
-    visibility: "visible"
-  },
-  _whenSelected: {
-    visibility: "visible"
-  },
-  _whenPanning: {
-    display: "none"
-  }
-});
-const indicatorRect = css.raw({
-  stroke: `[color-mix(in srgb, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast))]`,
-  strokeWidth: "4",
-  fill: "[none]",
-  animationStyle: "indicator",
-  _light: {
-    stroke: `[color-mix(in srgb, var(--likec4-palette-stroke) 80%, var(--likec4-palette-hiContrast))]`
-  }
-});
-const compound = sva({
-  slots: ["root", "compoundBorder", "indicatorSvg", "indicatorRect"],
-  className: "compound-container",
-  base: {
-    root,
-    compoundBorder,
-    indicatorSvg,
-    indicatorRect
-  },
-  variants: {
-    isTransparent: {
-      false: {
-        root: {
-          _before: {
-            boxShadow: {
-              _noReduceGraphics: "0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)",
-              _whenSelected: "none",
-              _whenPanning: "none !important"
-            }
-          }
-        }
-      },
-      true: {
-        root: {}
-      }
-    }
-  }
-});
-
-export { borderOpacityPercent, borderRadius, borderWidth, compound, compoundOpacity };

package/dist/base/primitives/edge/EdgeLabel.css.d.ts

@@ -1,7 +0,0 @@
-export declare const edgeNoteCloseButton: string;
-export declare const edgeNoteText: string;
-export declare const translate: {
-    readonly var: "--edge-translate";
-    readonly ref: "var(--edge-translate)";
-};
-export declare const edgeLabelContainer: string;

package/dist/base/primitives/edge/EdgeLabel.css.js

@@ -1,57 +0,0 @@
-import { css } from '@likec4/styles/css';
-
-const labelBorderRadius = "4px";
-css({
-  position: "absolute",
-  top: "1",
-  right: "1"
-});
-css({
-  userSelect: "all",
-  textAlign: "left",
-  whiteSpaceCollapse: "preserve-breaks",
-  textWrap: "pretty",
-  lineHeight: "1.25",
-  "--text-fz": "{fontSizes.sm}",
-  md: {
-    "--text-fz": "{fontSizes.md}"
-  }
-});
-const translate = {
-  var: "--edge-translate",
-  ref: `var(--edge-translate)`
-};
-const edgeLabelContainer = css({
-  top: "0",
-  left: "0",
-  position: "absolute",
-  pointerEvents: "all",
-  cursor: "pointer",
-  width: "auto",
-  height: "auto",
-  background: "[var(--xy-edge-label-background-color)]",
-  color: "[var(--xy-edge-label-color)]",
-  border: "0px solid transparent",
-  borderRadius: labelBorderRadius,
-  transform: `${translate.ref}`,
-  transition: "fast",
-  "&:is([data-likec4-hovered='true'])": {
-    transition: `all 190ms {easings.inOut}`,
-    transform: `var(--edge-translate, translate(0px, 0px)) scale(1.12)`,
-    transitionDelay: "100ms"
-  },
-  _noReduceGraphics: {
-    mixBlendMode: {
-      _dark: "plus-lighter",
-      _light: "screen"
-    }
-  },
-  _smallZoom: {
-    display: "none"
-  },
-  _reduceGraphicsOnPan: {
-    display: "none"
-  }
-});
-
-export { edgeLabelContainer, translate };

package/dist/base/primitives/element/ElementShape.css.d.ts

@@ -1,6 +0,0 @@
-export declare const indicator: string;
-export declare const fillElementFill: string;
-export declare const fillElementStroke: string;
-export declare const fillMixStroke: string;
-export declare const shapeSvgMultiple: string;
-export declare const shapeSvg: string;

package/dist/base/primitives/element/ElementShape.css.js

@@ -1,107 +0,0 @@
-import { cx, css } from '@likec4/styles/css';
-
-const indicator = css({
-  _smallZoom: {
-    visibility: "hidden"
-  },
-  stroke: "var(--likec4-palette-loContrast)",
-  fill: "[none]",
-  strokeWidth: 8,
-  strokeOpacity: 0.8,
-  visibility: "hidden",
-  pointerEvents: "none",
-  _light: {
-    stroke: `[color-mix(in srgb, var(--likec4-palette-fill) 50%,rgb(121, 121, 121))]`
-  },
-  _whenFocused: {
-    visibility: "visible"
-  },
-  _groupFocusVisible: {
-    visibility: "visible"
-  },
-  _whenSelected: {
-    animationStyle: "indicator",
-    visibility: "visible"
-  }
-});
-const fillElementFill = css({
-  fill: "var(--likec4-palette-fill)"
-});
-css({
-  fill: "var(--likec4-palette-stroke)"
-});
-const fillMixStroke = css({
-  fill: "[color-mix(in srgb, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill))]",
-  ".shape-svg-multiple &": {
-    fill: "var(--likec4-palette-fill)"
-  }
-});
-const shapeBase = css.raw({
-  top: "0",
-  left: "0",
-  position: "absolute",
-  width: "100%",
-  height: "100%",
-  pointerEvents: "none",
-  fill: "var(--likec4-palette-fill)",
-  stroke: "var(--likec4-palette-stroke)",
-  overflow: "visible"
-  // zIndex is removed to improve rendering performance
-  // this forces to keep shape in the same layer as the node
-  // zIndex: -1,
-});
-const shapeSvgMultiple = cx(
-  "shape-svg-multiple",
-  css(shapeBase, {
-    transformOrigin: {
-      base: "50% 50%",
-      _shapeQueue: "75% 25%",
-      _shapeCylinder: "50% 100%",
-      _shapeStorage: "50% 100%"
-    },
-    transform: "translate(14px, 14px) perspective(300px) translateZ(-8px)",
-    filter: "brightness(0.65) saturate(0.8)",
-    stroke: "[none]",
-    display: {
-      _smallZoom: "none",
-      _reduceGraphicsOnPan: "none",
-      _whenSelected: "none",
-      _whenFocused: "none"
-    }
-  })
-);
-const shapeSvg = css(shapeBase, {
-  transition: `fill 120ms linear, filter 130ms {easings.inOut}`,
-  transitionDelay: "0ms",
-  filter: `
-      drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
-      drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent))
-      drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))
-    `,
-  _whenHovered: {
-    filter: `
-        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25))
-        drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1))
-        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05))
-        `
-  },
-  [`:where([data-likec4-level='true']) &`]: {
-    filter: `
-        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25))
-        drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1))
-        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05))
-        `
-  },
-  _whenSelected: {
-    filter: "none"
-  },
-  _smallZoom: {
-    filter: "none"
-  },
-  _whenPanning: {
-    transition: "none",
-    filter: "none"
-  }
-});
-
-export { fillElementFill, fillMixStroke, indicator, shapeSvg, shapeSvgMultiple };