@likec4/diagram 1.4.0 → 1.5.0

package/src/xyflow/nodes/element/element.css.ts

@@ -1,5 +1,6 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
+import { calc } from '@vanilla-extract/css-utils'
 import { mantine } from '../../../mantine.css'
 import { vars } from '../../../theme.css'
 
@@ -27,6 +28,12 @@ export const container = style({
   }
 })
 
+export const handleCenter = style({
+  top: '50%',
+  left: '50%',
+  visibility: 'hidden'
+})
+
 export const containerAnimated = style({
   willChange: 'transform'
 })
@@ -56,8 +63,11 @@ const outlineColor = fallbackVar(
   vars.element.stroke
 )
 
+const indicatorStroke = createVar('indicator-stroke')
+
 export const indicator = style({
-  stroke: vars.element.loContrast,
+  stroke: indicatorStroke,
+  fill: 'none',
   transformOrigin: 'center center',
   strokeWidth: 6,
   animationDuration: '800ms',
@@ -65,6 +75,9 @@ export const indicator = style({
   animationDirection: 'alternate',
   opacity: 0.6,
   visibility: 'hidden',
+  vars: {
+    [indicatorStroke]: vars.element.loContrast
+  },
   selectors: {
     ':where(.react-flow__node.selected) &': {
       visibility: 'visible',
@@ -78,6 +91,11 @@ export const indicator = style({
     ':where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
       strokeWidth: 10
     },
+    [`:where([data-mantine-color-scheme='light']) &`]: {
+      vars: {
+        [indicatorStroke]: `color-mix(in srgb, ${vars.element.fill} 60%, ${vars.element.loContrast})`
+      }
+    },
     [`${dimmed} &`]: {
       visibility: 'hidden',
       display: 'none'
@@ -104,7 +122,7 @@ export const title = style({
   fontStyle: 'normal',
   textAlign: 'center',
   fontWeight: 500,
-  fontSize: rem(19),
+  fontSize: rem(19.5),
   lineHeight: 1.2,
   textWrap: 'balance',
   color: vars.element.hiContrast
@@ -175,34 +193,34 @@ export const element = style({
   }
 })
 
-export const iconMaxH = createVar('max-h')
+export const iconOffsetY = createVar('offset-y')
+
+const iconMaxH = createVar('max-h')
 
 export const elementIcon = style({
   flex: `0 1 ${iconMaxH}`,
   maxHeight: iconMaxH,
-  marginTop: -8,
   position: 'relative',
   userSelect: 'none',
   pointerEvents: 'none',
   overflow: 'visible',
   mixBlendMode: 'hard-light',
   'vars': {
-    [iconMaxH]: '30px'
+    [iconMaxH]: calc(iconOffsetY).subtract('12px').toString()
   }
 })
 
 globalStyle(`${elementIcon} img`, {
   position: 'absolute',
   left: 0,
-  bottom: 0,
+  bottom: 4,
   width: '100%',
   height: 'auto',
   objectFit: 'contain',
-  maxHeight: `calc(${iconMaxH} + 16px)`
+  maxHeight: iconOffsetY
 })
 
 const filterShadow = createVar('filter-shadow')
-const filterShadowHovered = createVar('filter-shadow-hovered')
 
 export const cssShapeSvg = style({
   top: '0px',
@@ -212,7 +230,7 @@ export const cssShapeSvg = style({
   fill: vars.element.fill,
   stroke: vars.element.stroke,
   overflow: 'visible',
-  filter: fallbackVar(filterShadowHovered, filterShadow),
+  filter: filterShadow,
   transition: 'filter 300ms ease-out',
   transitionDelay: '0ms',
   zIndex: -1,
@@ -225,7 +243,9 @@ export const cssShapeSvg = style({
   },
   selectors: {
     [`:where(.react-flow__node.selected, .react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
-      filter: 'none'
+      vars: {
+        [filterShadow]: `none`
+      }
     }
   }
 })

package/src/xyflow/nodes/shared/NavigateToBtn.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon } from '@mantine/core'
 import { IconZoomScan } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { useDiagramStoreApi } from '../../../state'
+import { useDiagramStoreApi } from '../../../state/hooks'
 
 export type NavigateToBtnProps = {
   xynodeId: string

package/src/xyflow/types.ts

@@ -1,4 +1,4 @@
-import type { BBox, DiagramEdge, DiagramNode, Fqn, Point, ViewID, XYPosition } from '@likec4/core'
+import type { BBox, DiagramEdge, DiagramNode, Fqn, XYPosition } from '@likec4/core'
 import type {
   Edge,
   EdgeMouseHandler,
@@ -13,7 +13,7 @@ import type {
 import { isNode } from '@xyflow/react'
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import { isTruthy } from 'remeda'
-import type { SetReadonly, SetRequired, Simplify } from 'type-fest'
+import type { SetReadonly, SetRequired } from 'type-fest'
 
 export type ElementNodeData = {
   fqn: Fqn
@@ -61,8 +61,6 @@ export type RelationshipData = {
   // viewId: ViewID
   // if set - edge was changed by user
   controlPoints: XYPosition[] | null
-  headPoint: Point | null
-  tailPoint: Point | null
   type: 'bezier' | 'poly'
   // if dynamic view
   stepNum: number | null

package/src/xyflow/utils.ts

@@ -1,5 +1,5 @@
 import { hasAtLeast, invariant } from '@likec4/core'
-import type { DiagramEdge, NonEmptyArray, Point } from '@likec4/core/types'
+import type { DiagramEdge, Point } from '@likec4/core/types'
 import type { XYPosition } from '@xyflow/react'
 import { Bezier } from 'bezier-js'
 import { isArray } from 'remeda'
@@ -33,17 +33,14 @@ export function bezierControlPoints(diagramEdge: DiagramEdge) {
     inflections.forEach(t => {
       const { x, y } = bezier.get(t)
       handles.push({
-        x: toDomPrecision(x),
-        y: toDomPrecision(y)
+        x: Math.round(x),
+        y: Math.round(y)
       })
     })
     bezierPoints = rest
     start = end
   }
   invariant(bezierPoints.length === 0, 'all points should be consumed')
-  if (diagramEdge.dir === 'back' && handles.length > 0) {
-    handles.reverse()
-  }
 
   return handles
 }

package/dist/KeepAspectRatioContainer.d.ts

@@ -1,9 +0,0 @@
-import { HTMLAttributes } from 'react';
-
-type KeepAspectRatioContainerProps = HTMLAttributes<HTMLDivElement> & {
-    enabled: boolean;
-    width: number;
-    height: number;
-};
-export declare function KeepAspectRatioContainer({ children, width, height, enabled, className, style, ...rest }: KeepAspectRatioContainerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/icons/Clipboard.d.ts

@@ -1,3 +0,0 @@
-import { SVGProps } from 'react';
-
-export declare const ClipboardCopy: import('react').ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

package/dist/icons/Link.d.ts

@@ -1,3 +0,0 @@
-import { SVGProps } from 'react';
-
-export declare const Link: import('react').ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

package/dist/icons/ZoomIn.d.ts

@@ -1,3 +0,0 @@
-import { SVGProps } from 'react';
-
-export declare const ZoomIn: import('react').ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

package/dist/icons/index.d.ts

@@ -1,3 +0,0 @@
-export * from './Clipboard';
-export * from './Link';
-export * from './ZoomIn';

package/dist/mantine/theme.d.ts

@@ -1,3 +0,0 @@
-import { MantineTheme } from '@mantine/core';
-
-export declare const theme: MantineTheme;

package/dist/state/WhenInitialized.d.ts

@@ -1,3 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-export declare function WhenInitialized({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/Camera.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const CameraMemo: import('react').NamedExoticComponent<object>;
-export default CameraMemo;

package/src/KeepAspectRatioContainer.tsx

@@ -1,36 +0,0 @@
-import { Box } from '@mantine/core'
-import clsx from 'clsx'
-import { type HTMLAttributes, useId } from 'react'
-import * as css from './LikeC4Diagram.css'
-
-type KeepAspectRatioContainerProps = HTMLAttributes<HTMLDivElement> & {
-  // Whether to keep the aspect ratio
-  enabled: boolean
-  width: number
-  height: number
-}
-
-export function KeepAspectRatioContainer({
-  children,
-  width,
-  height,
-  enabled,
-  className,
-  style,
-  ...rest
-}: KeepAspectRatioContainerProps) {
-  return (
-    <Box
-      {...rest}
-      className={clsx(css.keepAspectRatioContainer, className)}
-      style={enabled
-        ? {
-          ...style,
-          aspectRatio: `${Math.ceil(width)}/${Math.ceil(height)}`,
-          maxHeight: `var(--likec4-view-max-height, ${Math.ceil(height)}px)`
-        }
-        : style}>
-      {children}
-    </Box>
-  )
-}

package/src/icons/Clipboard.tsx

@@ -1,24 +0,0 @@
-import clsx from 'clsx'
-import { forwardRef, type SVGProps } from 'react'
-
-export const ClipboardCopy = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(({ className, ...props }, ref) => (
-  <svg
-    ref={ref}
-    xmlns="http://www.w3.org/2000/svg"
-    className={clsx('icon icon-tabler icon-tabler-zoom-in', className)}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    strokeWidth="1.5"
-    stroke="currentColor"
-    fill="none"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...props}
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h3m9 -9v-5a2 2 0 0 0 -2 -2h-2" />
-    <path d="M13 17v-1a1 1 0 0 1 1 -1h1m3 0h1a1 1 0 0 1 1 1v1m0 3v1a1 1 0 0 1 -1 1h-1m-3 0h-1a1 1 0 0 1 -1 -1v-1" />
-    <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
-  </svg>
-))

package/src/icons/Link.tsx

@@ -1,23 +0,0 @@
-import clsx from 'clsx'
-import { forwardRef, type SVGProps } from 'react'
-
-export const Link = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(({ className, ...props }, ref) => (
-  <svg
-    ref={ref}
-    className={clsx('icon icon-tabler', className)}
-    stroke="currentColor"
-    fill="currentColor"
-    strokeWidth="0"
-    viewBox="0 0 20 20"
-    height="20"
-    width="20"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      fillRule="evenodd"
-      d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z"
-      clipRule="evenodd">
-    </path>
-  </svg>
-))

package/src/icons/ZoomIn.tsx

@@ -1,25 +0,0 @@
-import clsx from 'clsx'
-import { forwardRef, type SVGProps } from 'react'
-
-export const ZoomIn = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(({ className, ...props }, ref) => (
-  <svg
-    ref={ref}
-    xmlns="http://www.w3.org/2000/svg"
-    className={clsx('icon icon-tabler icon-tabler-zoom-in', className)}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    strokeWidth="1.5"
-    stroke="currentColor"
-    fill="none"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...props}
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
-    <path d="M7 10l6 0" />
-    <path d="M10 7l0 6" />
-    <path d="M21 21l-6 -6" />
-  </svg>
-))

package/src/icons/index.ts

@@ -1,3 +0,0 @@
-export * from './Clipboard'
-export * from './Link'
-export * from './ZoomIn'

package/src/mantine/theme.ts

@@ -1,20 +0,0 @@
-import { createTheme, type MantineTheme } from '@mantine/core'
-
-export const theme = createTheme({
-  primaryColor: 'indigo',
-  cursorType: 'pointer',
-  defaultRadius: 'sm',
-  respectReducedMotion: true,
-  headings: {
-    fontWeight: '500',
-    sizes: {
-      h1: {
-        // fontSize: '2rem',
-        fontWeight: '600'
-      },
-      h2: {
-        // fontSize: '1.85rem',
-      }
-    }
-  }
-}) as MantineTheme

package/src/state/WhenInitialized.tsx

@@ -1,24 +0,0 @@
-import { type PropsWithChildren, useEffect, useState } from 'react'
-import { useDiagramStoreApi } from './useDiagramStore'
-
-export function WhenInitialized({ children }: PropsWithChildren) {
-  const diagramApi = useDiagramStoreApi()
-
-  const [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized)
-
-  useEffect(() => {
-    if (isInitialized) {
-      return
-    }
-    return diagramApi.subscribe(
-      s => s.initialized,
-      setIsInitialized
-    )
-  }, [isInitialized])
-
-  if (!isInitialized) {
-    return null
-  }
-
-  return <>{children}</>
-}

package/src/ui/Camera.tsx

@@ -1,174 +0,0 @@
-import { shallowEqual } from '@mantine/hooks'
-import { useDebouncedEffect, useIsMounted } from '@react-hookz/web'
-import {
-  type ReactFlowState,
-  useOnSelectionChange,
-  useOnViewportChange,
-  useStore,
-  useUpdateNodeInternals,
-  type Viewport
-} from '@xyflow/react'
-import { memo, useEffect, useRef, useState } from 'react'
-import { uniq } from 'remeda'
-import { useXYFlow } from '../xyflow/hooks'
-import type { XYFlowNode } from '../xyflow/types'
-import { distance } from '../xyflow/utils'
-
-const selector = (state: ReactFlowState) => {
-  return {
-    isUserSelectionActive: state.userSelectionActive,
-    isDragging: state.paneDragging || state.nodes.some(n => n.dragging ?? false)
-  }
-}
-
-const CameraMemo = /* @__PURE__ */ memo(function Camera() {
-  const isMounted = useIsMounted()
-  // const isUserSelectionActive = useStore(selectUserSelectionActive)
-  const {
-    isUserSelectionActive,
-    isDragging
-  } = useStore(selector, shallowEqual)
-  const reactflow = useXYFlow()
-  const updateNd = useUpdateNodeInternals()
-
-  const padding = 0 // editor.fitViewPadding
-  const viewId = '' // editor.viewId
-  const fitOnSelect: boolean = false // editor.fitOnSelect
-
-  const previousViewport = useRef<Viewport | null>(null)
-  const isZoomPendingRef = useRef(false)
-
-  const viewportChangeStart = useRef<Viewport | null>(null)
-  const prevViewId = useRef(viewId)
-  const isReady = reactflow.viewportInitialized
-  const selectedNodesRef = useRef([] as string[])
-
-  const [selectedNodes, setSelectedNodes] = useState([] as XYFlowNode[])
-
-  // WORKAROUND
-
-  useOnViewportChange({
-    onStart: (viewport) => {
-      viewportChangeStart.current = { ...viewport }
-    },
-    onEnd: (end) => {
-      if (!previousViewport.current) {
-        viewportChangeStart.current = null
-      }
-      if (!viewportChangeStart.current) {
-        return
-      }
-      const start = {
-        ...viewportChangeStart.current
-      }
-      const d = distance(start, end)
-      if (d > 15) {
-        previousViewport.current = null
-      }
-      viewportChangeStart.current = null
-    }
-  })
-
-  const fixUseOnViewportChange = () => {
-    // WORKAROUND:
-    // react-flow triggers useOnViewportChange
-    // We reset the viewportChangeStart, before useOnViewportChange.onEnd called
-    setTimeout(() => {
-      viewportChangeStart.current = null
-    }, 50)
-  }
-
-  useOnSelectionChange({
-    onChange: ({ nodes, edges }) => {
-      if (!isMounted() || fitOnSelect === false) {
-        return
-      }
-      if (nodes.length === 0 && edges.length === 0) {
-        setSelectedNodes([])
-        return
-      }
-      const selected = new Set([
-        ...nodes.map(({ id }) => reactflow.getNode(id)),
-        ...edges.flatMap((edge) => [
-          reactflow.getNode(edge.source),
-          reactflow.getNode(edge.target)
-        ])
-      ].filter(Boolean))
-      setSelectedNodes([...selected])
-    }
-  })
-
-  const selectedNodesHash = selectedNodes.map((node) => node.id).sort().join('\n')
-  useEffect(() => {
-    isZoomPendingRef.current = selectedNodesHash !== ''
-  }, [selectedNodesHash])
-
-  useDebouncedEffect(
-    () => {
-      if (isUserSelectionActive || isDragging || !isReady) {
-        return
-      }
-      if (selectedNodes.length === 0) {
-        if (previousViewport.current) {
-          console.log(`Camera: revert viewport`)
-          reactflow.setViewport(previousViewport.current, {
-            duration: 300
-          })
-          previousViewport.current = null
-        }
-        return
-      }
-      if (!isZoomPendingRef.current) {
-        return
-      }
-      isZoomPendingRef.current = false
-      previousViewport.current ??= { ...reactflow.getViewport() }
-      const zoom = previousViewport.current.zoom
-      reactflow.fitView({
-        duration: 350,
-        maxZoom: Math.max(1, zoom),
-        padding,
-        nodes: selectedNodes
-      })
-      fixUseOnViewportChange()
-    },
-    [selectedNodesHash, isReady, isDragging, isUserSelectionActive],
-    previousViewport.current ? 100 : 1500
-    // previousViewport.current ? 200 : 2500
-  )
-
-  useEffect(() => {
-    const ids = selectedNodes.map((node) => node.id)
-    for (const id of uniq([...selectedNodesRef.current, ...ids])) {
-      try {
-        updateNd(id)
-      } catch (e) {
-        console.warn(`Camera: failed useUpdateNodeInternals`, e)
-      }
-    }
-    selectedNodesRef.current = ids
-  }, [selectedNodesHash, updateNd])
-
-  useDebouncedEffect(
-    () => {
-      if (!isReady || prevViewId.current === viewId) {
-        return
-      }
-      const zoom = previousViewport.current?.zoom ?? reactflow.getZoom()
-      reactflow.fitView({
-        duration: 400,
-        maxZoom: Math.max(1, zoom),
-        padding
-      })
-      previousViewport.current = null
-      prevViewId.current = viewId
-    },
-    [isReady, viewId],
-    50,
-    500
-  )
-
-  return null
-})
-
-export default CameraMemo