@likec4/diagram 1.25.0 → 1.25.1

package/src/base/primitives/edge/edge.css.ts

@@ -2,7 +2,15 @@ import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-
 import {
   reactFlow,
 } from '../../../LikeC4Diagram.css'
-import { vars, whereDark, whereLight, whereNotReducedGraphics, xyvars } from '../../../theme-vars'
+import {
+  vars,
+  whereDark,
+  whereLight,
+  whereNotReducedGraphics,
+  whereReducedGraphics,
+  whereSmallZoom,
+  xyvars,
+} from '../../../theme-vars'
 
 export const mixColor = createVar('mix-color')
 
@@ -48,6 +56,9 @@ export const edgeContainer = style([edgeVars, {
       transition: 'opacity 100ms ease-in-out, filter 100ms ease-in-out',
       filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
     },
+    [`${whereReducedGraphics} &`]: {
+      transition: 'none',
+    },
   },
 }])
 const isSelected = '.react-flow__edge.selected'
@@ -115,29 +126,35 @@ const strokeKeyframes = keyframes({
 })
 
 export const cssEdgePath = style({
+  animationDuration: '800ms',
+  animationIterationCount: 'infinite',
+  animationTimingFunction: 'linear',
+  animationFillMode: 'both',
+  strokeDashoffset: 10,
   selectors: {
     [`${whereNotReducedGraphics} &`]: {
-      animationDuration: '800ms',
-      animationIterationCount: 'infinite',
-      animationTimingFunction: 'linear',
-      animationFillMode: 'both',
-      strokeDashoffset: 10,
+      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
     },
-    [`${reactFlow} :where([data-edge-hovered='true']) &`]: {
+    [`:where([data-edge-hovered='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '450ms',
-      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
     },
-    [`${reactFlow} :where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
+    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '0ms',
-      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
     },
-    [`${reactFlow} :where([data-edge-dir='back']) &`]: {
+    [`:where([data-edge-dir='back']) &`]: {
       animationDirection: 'reverse',
     },
     [`:where([data-edge-dimmed]) &`]: {
       animationPlayState: 'paused',
     },
+    [`${whereSmallZoom} &`]: {
+      animationName: 'none',
+    },
   },
 })
+
+export const looseReduce = style({
+  animationName: 'none',
+})

package/src/base/primitives/element/ElementActionButtons.tsx

@@ -2,7 +2,6 @@ import { ActionIcon, Box } from '@mantine/core'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
-import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 import * as css from './ElementActionButtons.css'

package/src/base/primitives/element/ElementNodeContainer.tsx

@@ -9,7 +9,6 @@ import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import { type PropsWithChildren, forwardRef } from 'react'
-import { useIsReducedGraphics } from '../../../hooks/useIsReducedGraphics'
 import type { NodeProps } from '../../types'
 import * as css from './ElementNodeContainer.css'
 

package/src/base/primitives/element/ElementShape.css.ts

@@ -149,6 +149,7 @@ export const shapeSvg = style([shapeBase, {
       filter: 'none',
     },
     [`${reactFlowReducedGraphics} &`]: {
+      transition: 'none',
       filter: 'none',
     },
   },

package/src/context/DiagramFeatures.tsx

@@ -1,8 +1,7 @@
 import type { ExclusiveUnion, NonEmptyArray } from '@likec4/core'
-import { useCustomCompareEffect } from '@react-hookz/web'
-import { type PropsWithChildren, createContext, useContext, useState } from 'react'
+import { shallowEqual } from 'fast-equals'
+import { type PropsWithChildren, createContext, useContext, useEffect, useState } from 'react'
 import { map, mapToObj, pick } from 'remeda'
-import { depsShallowEqual } from '../hooks/useUpdateEffect'
 
 const FeatureNames = [
   'Controls',
@@ -87,23 +86,25 @@ export function DiagramFeatures({
     }
   }>
 >) {
-  const scope = useContext(DiagramFeaturesContext)
-  const [enabled, setFeatures] = useState(scope)
+  const outerScope = useContext(DiagramFeaturesContext)
+  const [scope, setScope] = useState(outerScope)
 
-  useCustomCompareEffect(
+  useEffect(
     () => {
-      setFeatures(validate({
-        ...scope,
-        ...features,
-        ...overrides,
-      }))
+      setScope(current => {
+        const next = validate({
+          ...outerScope,
+          ...features,
+          ...overrides,
+        })
+        return shallowEqual(current, next) ? current : next
+      })
     },
-    [scope, features, overrides],
-    depsShallowEqual,
+    [outerScope, features, overrides],
   )
 
   return (
-    <DiagramFeaturesContext.Provider value={enabled}>
+    <DiagramFeaturesContext.Provider value={scope}>
       {children}
     </DiagramFeaturesContext.Provider>
   )

package/src/context/ReduceGraphics.tsx

@@ -0,0 +1,80 @@
+import { createOptionalContext, createSafeContext } from '@mantine/core'
+import { useDebouncedCallback, useTimeout } from '@mantine/hooks'
+import { useStore } from '@nanostores/react'
+import { useStoreApi } from '@xyflow/react'
+import { type Atom, type WritableAtom, atom } from 'nanostores'
+import { type PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+
+const [ReduceGraphicsModeCtx, useReducedGraphics] = createOptionalContext<boolean>()
+/**
+ * Hook to determine if reduced graphics mode is enabled.
+ */
+export function useIsReducedGraphics() {
+  const isReduced = useReducedGraphics()
+  if (isReduced === null) {
+    console.warn('ReduceGraphicsMode is not provided')
+  }
+  return isReduced ?? false
+}
+
+const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext<WritableAtom<boolean>>(
+  'PanningAtomSafeCtx is not provided',
+)
+const [LooseReduceGraphicsAtomCtx, useLooseReduceGraphicsAtom] = createOptionalContext<Atom<boolean>>()
+
+const $defaultLooseReduceGraphics = atom(false)
+/**
+ * Reduce graphics when reduced mode is enabled and pan/zoom is active.
+ */
+export function useLooseReducedGraphics() {
+  const $isPanning = useLooseReduceGraphicsAtom() ?? $defaultLooseReduceGraphics
+  return useStore($isPanning)
+}
+
+export function ReduceGraphicsContext({ reduceGraphics, children }: PropsWithChildren<{ reduceGraphics: boolean }>) {
+  // const isEnabledRef = useSyncedRef(reduceGraphics)
+
+  const $isPanningRef = useRef<WritableAtom<boolean>>(null)
+  if (!$isPanningRef.current) {
+    $isPanningRef.current = atom(reduceGraphics)
+  }
+
+  const looseReduceGraphics = useMemo(() => {
+    return reduceGraphics ? $isPanningRef.current! : atom(false)
+  }, [reduceGraphics, $isPanningRef.current])
+
+  return (
+    <PanningAtomSafeCtx value={$isPanningRef.current}>
+      <LooseReduceGraphicsAtomCtx value={looseReduceGraphics}>
+        <ReduceGraphicsModeCtx value={reduceGraphics}>
+          {children}
+        </ReduceGraphicsModeCtx>
+      </LooseReduceGraphicsAtomCtx>
+    </PanningAtomSafeCtx>
+  )
+}
+
+export function ReduceGraphicsViewportListener() {
+  const store = useStoreApi()
+  const $isPanning = usePanningAtom()
+
+  const notPanning = useTimeout(() => {
+    $isPanning.set(false)
+  }, 150)
+
+  useEffect(() => {
+    store.setState({
+      onViewportChangeStart: () => {
+        notPanning.clear()
+      },
+      onViewportChange: () => {
+        $isPanning.set(true)
+      },
+      onViewportChangeEnd: () => {
+        notPanning.start()
+      },
+    })
+  }, [$isPanning, store])
+
+  return null
+}

package/src/hooks/useReducedGraphics.ts

@@ -0,0 +1 @@
+export { useIsReducedGraphics, useLooseReducedGraphics } from '../context/ReduceGraphics'

package/src/likec4diagram/{XYFlow.tsx → DiagramXYFlow.tsx}

@@ -6,6 +6,7 @@ import { type PropsWithChildren, memo } from 'react'
 import type { EnforceOptional } from 'type-fest/source/enforce-optional'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
+import { ReduceGraphicsViewportListener } from '../context/ReduceGraphics'
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import type { DiagramContext } from '../state/types'
@@ -154,6 +155,7 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
       nodesSelectable={nodesSelectable}
       {...(notReadOnly && nodesDraggable && layoutConstraints)}
       {...props}>
+      <ReduceGraphicsViewportListener />
       <DiagramUI />
       {children}
     </BaseXYFlow>

package/src/likec4diagram/custom/edges/RelationshipEdge.tsx

@@ -14,7 +14,7 @@ import { customEdge, EdgeActionButton, EdgeContainer, EdgeLabel, EdgePath } from
 import { useEnabledFeature } from '../../../context'
 import { useXYFlow, useXYInternalNode, useXYStoreApi } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
-import { useIsReducedGraphics } from '../../../hooks/useIsReducedGraphics'
+import { useLooseReducedGraphics } from '../../../hooks/useReducedGraphics'
 import { vector, VectorImpl } from '../../../utils/vector'
 import { bezierControlPoints, bezierPath, isSamePoint } from '../../../utils/xyflow'
 import type { Types } from '../../types'
@@ -29,7 +29,7 @@ const curve = d3line<XYPosition>()
   .y(d => d.y)
 
 export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) => {
-  const isReducedGraphicsMode = useIsReducedGraphics()
+  const isReducedGraphicsMode = useLooseReducedGraphics()
   const [isControlPointDragging, setIsControlPointDragging] = useState(false)
   const xyflowStore = useXYStoreApi()
   const xyflow = useXYFlow()

package/src/theme-vars.ts

@@ -8,6 +8,7 @@ export {
 export const rootClassName = 'likec4-diagram-root'
 export const whereNotReducedGraphics = `:where(.${rootClassName}:not([data-likec4-reduced-graphics]))`
 export const whereReducedGraphics = `:where(.${rootClassName}:is([data-likec4-reduced-graphics="true"]))`
+export const whereSmallZoom = `:where([data-likec4-zoom-small="true"])`
 
 export const whereLight = ':where([data-mantine-color-scheme="light"])'
 export const whereDark = ':where([data-mantine-color-scheme="dark"])'

package/dist/hooks/useIsReducedGraphics.d.ts

@@ -1,4 +0,0 @@
-export declare const ReducedGraphicsContext: ({ children, value }: {
-    value: boolean;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useIsReducedGraphics: () => boolean;

package/dist/hooks/useIsReducedGraphics.js

@@ -1,8 +0,0 @@
-import { createSafeContext } from "@mantine/core";
-const [ReducedGraphicsContext, useIsReducedGraphics] = createSafeContext(
-  "ReducedGraphicsContext is not provided"
-);
-export {
-  ReducedGraphicsContext,
-  useIsReducedGraphics
-};

package/src/hooks/useIsReducedGraphics.ts

@@ -1,5 +0,0 @@
-import { createSafeContext } from '@mantine/core'
-
-export const [ReducedGraphicsContext, useIsReducedGraphics] = createSafeContext<boolean>(
-  'ReducedGraphicsContext is not provided',
-)