@likec4/diagram 1.24.0 → 1.25.0

package/src/LikeC4Diagram.css.ts

@@ -1,5 +1,16 @@
-import { globalStyle, style } from '@vanilla-extract/css'
-import { vars, xyvars } from './theme-vars'
+import { defaultTheme } from '@likec4/core'
+import { createGlobalTheme, globalStyle, style } from '@vanilla-extract/css'
+import { scale, toHex } from 'khroma'
+import { keys, omit } from 'remeda'
+import {
+  mantine,
+  rootClassName,
+  vars,
+  whereDark,
+  whereNotReducedGraphics,
+  whereReducedGraphics,
+  xyvars,
+} from './theme-vars'
 
 export const cssReactFlow = style({
   '@supports': {
@@ -13,6 +24,9 @@ export const cssReactFlow = style({
   },
 })
 
+export const reactFlowReducedGraphics = `${whereReducedGraphics} ${cssReactFlow}`
+export const reactFlow = `${whereNotReducedGraphics} ${cssReactFlow}`
+
 export const notInitialized = style({
   opacity: 0,
 })
@@ -30,11 +44,6 @@ globalStyle(`.react-flow${cssReactFlow}`, {
 globalStyle(`.react-flow${cssReactFlow} .react-flow__pane`, {
   WebkitUserSelect: 'none',
 })
-
-globalStyle(`.react-flow${cssReactFlow} .xyflow__viewport`, {
-  willChange: 'transform',
-})
-
 export const cssDisablePan = style({})
 
 export const cssTransparentBg = style({})
@@ -58,3 +67,132 @@ export const hiddenIfZoomTooSmall = style({
     },
   },
 })
+
+export const hiddenIfReducedGraphics = style({
+  selectors: {
+    [`${reactFlowReducedGraphics} &`]: {
+      visibility: 'hidden',
+    },
+  },
+})
+
+globalStyle(`.${rootClassName}`, {
+  overflow: 'hidden',
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  margin: 0,
+  boxSizing: 'border-box',
+  WebkitFontSmoothing: mantine.webkitFontSmoothing,
+  MozOsxFontSmoothing: mantine.mozFontSmoothing,
+})
+globalStyle(`:where(.${rootClassName}) .mantine-ActionIcon-icon .tabler-icon`, {
+  width: '75%',
+  height: '75%',
+})
+
+createGlobalTheme(`.${rootClassName}`, {
+  ...omit(vars, ['optionsPanel', 'navigationPanel', 'safariAnimationHook', 'default']),
+}, {
+  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"')`,
+    background: {
+      color: mantine.colors.body,
+      pattern: {
+        color: mantine.colors.gray[4],
+      },
+    },
+  },
+  compound: {
+    font: vars.likec4.font,
+    titleColor: vars.element.loContrast,
+  },
+  element: {
+    font: vars.likec4.font,
+    ...defaultTheme.elements.primary,
+  },
+  relation: {
+    ...defaultTheme.relationships.slate,
+  },
+})
+
+createGlobalTheme(`${whereDark} .${rootClassName}`, {
+  likec4: {
+    background: {
+      pattern: {
+        color: vars.likec4.background.pattern.color,
+      },
+    },
+  },
+}, {
+  likec4: {
+    background: {
+      pattern: {
+        color: mantine.colors.dark[5],
+      },
+    },
+  },
+})
+
+for (const color of keys(defaultTheme.elements)) {
+  createGlobalTheme(`:where([data-likec4-color='${color}'])`, {
+    element: {
+      fill: vars.element.fill,
+      stroke: vars.element.stroke,
+      hiContrast: vars.element.hiContrast,
+      loContrast: vars.element.loContrast,
+    },
+    compound: {
+      titleColor: vars.compound.titleColor,
+    },
+    relation: vars.relation,
+  }, {
+    element: defaultTheme.elements[color],
+    compound: {
+      titleColor: defaultTheme.elements[color].loContrast,
+    },
+    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: compoundLightColor(defaultTheme.elements[color].fill, depth),
+        stroke: compoundLightColor(defaultTheme.elements[color].stroke, depth),
+      },
+    )
+
+    createGlobalTheme(
+      `${whereDark} :where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`,
+      compounds,
+      {
+        fill: compoundDarkColor(defaultTheme.elements[color].fill, depth),
+        stroke: compoundDarkColor(defaultTheme.elements[color].stroke, depth),
+      },
+    )
+  }
+}

package/src/LikeC4Diagram.props.ts

@@ -9,6 +9,7 @@ import type {
   WhereOperator,
 } from '@likec4/core'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
+import type { ControlsCustomLayout } from './context/ControlsCustomLayout'
 
 export type { WhereOperator }
 
@@ -172,12 +173,24 @@ export interface LikeC4DiagramProperties {
    */
   experimentalEdgeEditing?: boolean | undefined
 
+  /**
+   * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+   *
+   * @default 'auto' - will be set to true if view has more then 3000 * 2000 pixels
+   */
+  reduceGraphics?: 'auto' | boolean | undefined
+
   /**
    * Render icon for an element, bundled or remote
    * By default, if icon is http:// or https://, it will be rendered as an image
    */
   renderIcon?: ElementIconRenderer | undefined
 
+  /**
+   * Customize layout of the controls on the top left
+   */
+  renderControls?: ControlsCustomLayout | undefined
+
   /**
    * Dynamic filter, applies both to nodes and edges
    */

package/src/LikeC4Diagram.tsx

@@ -1,5 +1,5 @@
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
-import { useRef } from 'react'
+import { type PropsWithChildren, useRef } from 'react'
 import { isEmpty } from 'remeda'
 import {
   DiagramEventHandlers,
@@ -9,6 +9,8 @@ import {
   IconRendererProvider,
   RootContainer,
 } from './context'
+import { ControlsCustomLayoutProvider } from './context/ControlsCustomLayout'
+import { ReducedGraphicsContext } from './hooks/useIsReducedGraphics'
 import { LikeC4CustomColors } from './LikeC4CustomColors'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import type { Types } from './likec4diagram/types'
@@ -17,7 +19,7 @@ import { LikeC4DiagramXYFlow } from './likec4diagram/XYFlow'
 import { useLikeC4Model } from './likec4model'
 import { DiagramActorProvider } from './state/DiagramActorProvider'
 
-export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers
+export type LikeC4DiagramProps = PropsWithChildren<LikeC4DiagramProperties & LikeC4DiagramEventHandlers>
 export function LikeC4Diagram({
   view,
   className,
@@ -41,6 +43,7 @@ export function LikeC4Diagram({
   initialWidth,
   initialHeight,
   experimentalEdgeEditing = false,
+  reduceGraphics = 'auto',
   onCanvasClick,
   onCanvasContextMenu,
   onCanvasDblClick,
@@ -53,8 +56,10 @@ export function LikeC4Diagram({
   onOpenSource,
   onBurgerMenuClick,
   renderIcon,
+  renderControls,
   where,
   showNavigationButtons = !!onNavigateTo,
+  children,
 }: LikeC4DiagramProps) {
   const hasLikec4model = !!useLikeC4Model()
   const initialRef = useRef<{
@@ -81,9 +86,17 @@ export function LikeC4Diagram({
     }
   }
 
+  const isReducedGraphicsMode = reduceGraphics === 'auto'
+    // If view has more then 3000 * 2000 pixels - assume it is a big diagram
+    // Enable reduced graphics mode if diagram is "big" and pannable
+    ? pannable && ((view.bounds?.width ?? 1) * (view.bounds?.height ?? 1) > 6_000_000)
+    : reduceGraphics
+
   return (
     <EnsureMantine>
-      <FramerMotionConfig>
+      <FramerMotionConfig
+        {...isReducedGraphicsMode && { reducedMotion: 'always' }}
+      >
         <IconRendererProvider value={renderIcon ?? null}>
           <DiagramFeatures
             features={{
@@ -119,30 +132,36 @@ export function LikeC4Diagram({
                 onOpenSource,
                 onBurgerMenuClick,
               }}>
-              <RootContainer className={className}>
-                {!isEmpty(view.customColorDefinitions) && (
-                  <LikeC4CustomColors customColors={view.customColorDefinitions} />
-                )}
-                <XYFlowProvider
-                  fitView={fitView}
-                  {...initialRef.current}
-                >
-                  <DiagramActorProvider
-                    input={{
-                      view,
-                      pannable,
-                      zoomable,
-                      fitViewPadding,
-                      ...xyNodesEdges,
-                    }}>
-                    <LikeC4DiagramXYFlow
-                      nodesDraggable={nodesDraggable}
-                      nodesSelectable={nodesSelectable}
-                      background={background}
-                    />
-                  </DiagramActorProvider>
-                </XYFlowProvider>
-              </RootContainer>
+              <ReducedGraphicsContext value={isReducedGraphicsMode}>
+                <RootContainer className={className} reduceGraphics={isReducedGraphicsMode}>
+                  {!isEmpty(view.customColorDefinitions) && (
+                    <LikeC4CustomColors customColors={view.customColorDefinitions} />
+                  )}
+                  <XYFlowProvider
+                    fitView={fitView}
+                    {...initialRef.current}
+                  >
+                    <DiagramActorProvider
+                      input={{
+                        view,
+                        pannable,
+                        zoomable,
+                        fitViewPadding,
+                        ...xyNodesEdges,
+                      }}>
+                      <ControlsCustomLayoutProvider value={renderControls ?? null}>
+                        <LikeC4DiagramXYFlow
+                          nodesDraggable={nodesDraggable}
+                          nodesSelectable={nodesSelectable}
+                          background={background}
+                        >
+                          {children}
+                        </LikeC4DiagramXYFlow>
+                      </ControlsCustomLayoutProvider>
+                    </DiagramActorProvider>
+                  </XYFlowProvider>
+                </RootContainer>
+              </ReducedGraphicsContext>
             </DiagramEventHandlers>
           </DiagramFeatures>
         </IconRendererProvider>

package/src/StaticLikeC4Diagram.tsx

@@ -11,6 +11,7 @@ export type StaticLikeC4DiagramProps = Pick<
   | 'enableElementDetails'
   | 'enableRelationshipDetails'
   | 'enableRelationshipBrowser'
+  | 'reduceGraphics'
   | 'initialWidth'
   | 'initialHeight'
   | 'renderIcon'

package/src/base/BaseXYFlow.tsx

@@ -8,10 +8,12 @@ import {
   useStoreApi,
 } from '@xyflow/react'
 import clsx from 'clsx'
-import { useMemo } from 'react'
+import { shallowEqual } from 'fast-equals'
+import { useEffect, useMemo, useRef } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
-import { useUpdateEffect } from '../hooks'
-import { useIsZoomTooSmall } from '../hooks/useXYFlow'
+import { useIsReducedGraphics } from '../hooks/useIsReducedGraphics'
+import { useUpdateEffect } from '../hooks/useUpdateEffect'
+import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow'
 import * as css from '../LikeC4Diagram.css'
 import { stopPropagation } from '../utils/xyflow'
 import { type XYBackground, Background } from './Background'
@@ -41,10 +43,8 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
       | 'zoomActivationKeyCode'
       | 'zoomOnScroll'
       | 'elementsSelectable'
-      | 'onNodeMouseEnter'
-      | 'onNodeMouseLeave'
-      | 'onEdgeMouseEnter'
-      | 'onEdgeMouseLeave'
+      | 'onNodeDoubleClick'
+      | 'onEdgeDoubleClick'
       | 'fitViewOptions'
     >,
     // Required props
@@ -79,6 +79,18 @@ export const BaseXYFlow = <
 }: BaseXYFlowProps<NodeType, EdgeType>) => {
   const isBgWithPattern = background !== 'transparent' && background !== 'solid'
   const isZoomTooSmall = useIsZoomTooSmall()
+  const reduceGraphics = useIsReducedGraphics()
+
+  const isPanningRef = useRef(false)
+
+  const xystore = useXYStoreApi()
+
+  useEffect(() => {
+    return xystore.subscribe((state) => {
+      isPanningRef.current = state.paneDragging
+    })
+  }, [xystore])
+
   return (
     <ReactFlow<NodeType, EdgeType>
       colorMode={colorMode}
@@ -90,7 +102,12 @@ export const BaseXYFlow = <
         background === 'transparent' && css.cssTransparentBg,
         className,
       )}
-      data-likec4-zoom-small={isZoomTooSmall}
+      {...isZoomTooSmall && {
+        ['data-likec4-zoom-small']: true,
+      }}
+      {...reduceGraphics && {
+        ['data-likec4-reduced-graphics']: true,
+      }}
       zoomOnPinch={zoomable}
       zoomOnScroll={!pannable && zoomable}
       {...(!zoomable && {
@@ -112,11 +129,10 @@ export const BaseXYFlow = <
       noPanClassName="nopan"
       panOnScroll={pannable}
       panOnDrag={pannable}
+      panActivationKeyCode={null}
       {...(!pannable && {
         selectionKeyCode: null,
       })}
-      // TODO: benchmarks first
-      //onlyRenderVisibleElements={nodes.length > 75}
       elementsSelectable={nodesSelectable}
       nodesFocusable={nodesDraggable || nodesSelectable}
       edgesFocusable={false}
@@ -129,6 +145,7 @@ export const BaseXYFlow = <
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onNodeMouseEnter={useCallbackRef((_event, node) => {
+        if (isPanningRef.current) return
         onNodesChange([{
           id: node.id,
           type: 'replace',
@@ -136,6 +153,7 @@ export const BaseXYFlow = <
         }])
       })}
       onNodeMouseLeave={useCallbackRef((_event, node) => {
+        if (node.data.hovered !== true) return
         onNodesChange([{
           id: node.id,
           type: 'replace',
@@ -143,6 +161,7 @@ export const BaseXYFlow = <
         }])
       })}
       onEdgeMouseEnter={useCallbackRef((_event, edge) => {
+        if (isPanningRef.current) return
         onEdgesChange([{
           id: edge.id,
           type: 'replace',
@@ -150,6 +169,7 @@ export const BaseXYFlow = <
         }])
       })}
       onEdgeMouseLeave={useCallbackRef((_event, edge) => {
+        if (edge.data.hovered !== true) return
         onEdgesChange([{
           id: edge.id,
           type: 'replace',
@@ -202,7 +222,7 @@ const ViewportResizeHanlder = ({
 }: {
   onViewportResize: () => void
 }) => {
-  const { width, height } = useStore(selectDimensions)
+  const { width, height } = useStore(selectDimensions, shallowEqual)
   useUpdateEffect(onViewportResize, [width, height])
 
   return <></>

package/src/base/const.ts

@@ -1,9 +1,9 @@
 export const ZIndexes = {
-  Compound: 2,
-  Edge: 4,
-  Element: 6,
+  Compound: 0,
+  Edge: 2,
+  Element: 2,
   Max: 8,
 } as const
 
-export const MinZoom = 0.1
+export const MinZoom = 0.05
 export const MaxZoom = 2

package/src/base/primitives/compound/CompoundActionButton.css.ts

@@ -1,5 +1,6 @@
 import { style } from '@vanilla-extract/css'
-import { transitions, vars } from '../../../theme-vars'
+import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
+import { vars } from '../../../theme-vars'
 
 export const container = style({
   position: 'absolute',
@@ -10,21 +11,12 @@ export const container = style({
   // display: 'flex',
   // justifyContent: 'center',
   // alignItems: 'center',
-  zIndex: 10,
-})
-
-export const actionButton = style({
-  width: 'min-content',
-  height: 'min-content',
-  // display: 'flex',
-  // justifyContent: 'center',
-  // alignItems: 'center',
 })
 
 export const actionIcon = style({
   opacity: 0.45,
   color: `var(--_compound-title-color,${vars.element.loContrast})`,
-  transition: transitions.fast,
+  // transition: transitions.fast,
   'vars': {
     '--ai-color-hover': vars.element.hiContrast,
     '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
@@ -32,7 +24,7 @@ export const actionIcon = style({
     '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
     '--ai-hover': `color-mix(in srgb , ${vars.element.fill} 50%, ${vars.element.stroke})`,
   },
-  background: `var(--ai-bg)`,
+  // background: `var(--ai-bg)`,
   boxShadow: '1px 1px 3px 0px transparent',
   selectors: {
     [`:where([data-mantine-color-scheme='light'] [data-compound-transparent="true"]) &`]: {
@@ -45,11 +37,16 @@ export const actionIcon = style({
     },
     [`:where([data-hovered='true']) &`]: {
       opacity: 1,
+      // transitionDelay: '100ms',
+      // transitionDuration: '300ms',
       // boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
       // color: `var(--ai-color-hover)`,
       // vars: {
       //   '--ai-bg': `var(--ai-bg-hover)`,
       // },
     },
+    [`${reactFlowReducedGraphics} &`]: {
+      boxShadow: 'none',
+    },
   },
 })

package/src/base/primitives/compound/CompoundActionButton.tsx

@@ -21,9 +21,9 @@ export function CompoundActionButton({
 }: CompoundActionButtonProps) {
   return (
     <Box className={clsx(css.container, hiddenIfZoomTooSmall, 'compound-action')}>
-      <Box
-        className={clsx('nodrag nopan', css.actionButton)}
-        component={m.div}
+      <ActionIcon
+        className={clsx('nodrag nopan', css.actionIcon)}
+        component={m.button}
         initial={false}
         animate={{
           scale: isHovered ? 1.2 : 1,
@@ -36,18 +36,14 @@ export function CompoundActionButton({
           // y: 1,
         }}
         whileTap={{ scale: 1 }}
+        size={'md'}
+        radius="md"
+        // Otherwise node receives click event and is selected
+        onClick={onClick}
+        onDoubleClick={stopPropagation}
       >
-        <ActionIcon
-          className={css.actionIcon}
-          size={'md'}
-          radius="md"
-          // Otherwise node receives click event and is selected
-          onClick={onClick}
-          onDoubleClick={stopPropagation}
-        >
-          {icon ?? <IconZoomScan stroke={2} />}
-        </ActionIcon>
-      </Box>
+        {icon ?? <IconZoomScan stroke={2} />}
+      </ActionIcon>
     </Box>
   )
 }

package/src/base/primitives/compound/CompoundDetailsButton.css.ts

@@ -1,11 +1,11 @@
 import { createVar, globalStyle, style } from '@vanilla-extract/css'
+import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
 import { vars } from '../../../theme-vars'
 
 export const container = style({
   position: 'absolute',
   top: 2,
   right: 2,
-  zIndex: 10,
 })
 
 const btnColor = createVar('navigateBtnColor')
@@ -25,7 +25,6 @@ export const actionIcon = style({
   pointerEvents: 'all',
   cursor: 'pointer',
   color: `var(--_compound-title-color,${btnColor})`,
-  backgroundColor: 'var(--ai-bg)',
   'vars': {
     '--ai-color-hover': vars.element.hiContrast,
     '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
@@ -47,6 +46,9 @@ export const actionIcon = style({
         '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
       },
     },
+    [`${reactFlowReducedGraphics} &`]: {
+      boxShadow: 'none',
+    },
   },
 })
 

package/src/base/primitives/compound/CompoundDetailsButton.tsx

@@ -21,9 +21,9 @@ export function CompoundDetailsButton({
 }: CompoundDetailsButtonProps) {
   return (
     <Box className={clsx(css.container, hiddenIfZoomTooSmall, 'details-button')} onClick={stopPropagation}>
-      <Box
+      <ActionIcon
         component={m.div}
-        className={clsx('nodrag nopan', css.actionIconWrapper)}
+        className={clsx('nodrag nopan', css.actionIcon)}
         initial={false}
         style={{
           originX: 0.45,
@@ -40,16 +40,12 @@ export function CompoundDetailsButton({
           scale: 1.42,
         }}
         whileTap={{ scale: 1.15 }}
-      >
-        <ActionIcon
-          className={css.actionIcon}
-          size={'md'}
-          radius="md"
-          onClick={onClick}
-          onDoubleClick={stopPropagation}>
-          {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
-        </ActionIcon>
-      </Box>
+        size={'md'}
+        radius="md"
+        onClick={onClick}
+        onDoubleClick={stopPropagation}>
+        {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
+      </ActionIcon>
     </Box>
   )
 }