@likec4/diagram 1.3.0 → 1.5.0

package/src/xyflow/nodes/element/ElementLink.tsx

@@ -7,14 +7,16 @@ import {
   Group,
   HoverCard,
   HoverCardDropdown,
+  type HoverCardProps,
   HoverCardTarget,
   Stack,
   UnstyledButton
 } from '@mantine/core'
+import { IconLink } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { useId } from 'react'
 import { clamp } from 'remeda'
-import { Link } from '../../../icons'
+import { type DiagramState, useDiagramState } from '../../../state/hooks'
 import type { XYFlowNode } from '../../types'
 import { elementLink, trigger } from './ElementLink.css'
 
@@ -22,23 +24,17 @@ type ElementLinkProps = {
   element: XYFlowNode['data']['element']
 }
 
+const selector = (s: DiagramState) => {
+  const target = s.getContainer()
+  return target ? { target } : null
+}
+
 export function ElementLink({
   element
 }: ElementLinkProps) {
   invariant(element.links, 'ElementLink: links are required')
   const id = useId()
-  // const mantineCtx = useMantineContext()
-  // const root = mantineCtx.getRootElement()
-
-  // const targetSelector = `.react-flow:has([data-likec4-linkid="${id}"])`
-  // // const target = root?.querySelector<HTMLDivElement>(targetSelector) ?? targetSelector
-
-  // const portalProps = useMemo(() => ({
-  //   get target(): HTMLElement | string {
-  //     const root = mantineCtx.getRootElement()
-  //     return root?.querySelector<HTMLDivElement>(targetSelector) ?? targetSelector
-  //   }
-  // }), [targetSelector])
+  const portalProps = useDiagramState(selector)
   return (
     <div className={elementLink} data-likec4-linkid={id}>
       <HoverCard
@@ -51,8 +47,7 @@ export function ElementLink({
         transitionProps={{
           transition: 'pop'
         }}
-        // portalProps={portalProps}
-        withinPortal={false}
+        {...(portalProps ? { portalProps } : { withinPortal: false })}
         floatingStrategy={'fixed'}
         openDelay={350}
         closeDelay={800}
@@ -64,7 +59,7 @@ export function ElementLink({
           <UnstyledButton
             className={clsx('nodrag nopan', trigger)}
             autoFocus={false}>
-            <Link />
+            <IconLink size={12} />
             <span>links</span>
           </UnstyledButton>
         </HoverCardTarget>

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -1,13 +1,11 @@
 import { Text } from '@mantine/core'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
-import { DEV } from 'esm-env'
 import { deepEqual as eq } from 'fast-equals'
 import { m, type Variants } from 'framer-motion'
 import { memo } from 'react'
 import { isNumber } from 'remeda'
-import useTilg from 'tilg'
-import { useDiagramState } from '../../../state'
+import { useDiagramState } from '../../../state/hooks'
 import type { ElementXYFlowNode } from '../../types'
 import { toDomPrecision } from '../../utils'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
@@ -24,13 +22,13 @@ const variants = {
   idle: (_, { scale }) => ({
     scale: 1,
     transition: {
-      delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
+      delay: isNumber(scale) && scale > selectedScale ? 0.09 : 0
     }
   }),
   selected: (_, { scale }) => ({
     scale: selectedScale,
     transition: {
-      delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
+      delay: isNumber(scale) && scale > selectedScale ? 0.09 : 0
     }
   }),
   // dimmed: {
@@ -54,12 +52,9 @@ const variants = {
   //     delay: 1
   //   }
   // }),
-  hovered: (_, { scale }) => ({
-    scale: 1.06,
-    transition: {
-      delay: isNumber(scale) && scale !== 1 && scale !== selectedScale ? 0 : 0.15
-    }
-  }),
+  hovered: {
+    scale: 1.06
+  },
   tap: {
     scale: 0.975
   }
@@ -72,6 +67,7 @@ const isEqualProps = (prev: ElementNodeProps, next: ElementNodeProps) => (
   prev.id === next.id
   && eq(prev.selected ?? false, next.selected ?? false)
   && eq(prev.dragging ?? false, next.dragging ?? false)
+  && eq(prev.draggable ?? false, next.draggable ?? false)
   && eq(prev.width ?? 0, next.width ?? 0)
   && eq(prev.height ?? 0, next.height ?? 0)
   && eq(prev.data.element, next.data.element)
@@ -83,11 +79,11 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     element
   },
   dragging,
+  // draggable = false,
   selected = false,
   width,
   height
 }) {
-  DEV && useTilg()
   const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
@@ -123,122 +119,81 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   // useTilg(animate, isHovered, isInteractive)
 
   return (
-    <m.div
-      id={id}
-      className={clsx([
-        css.container,
-        isDimmed && css.dimmed,
-        'likec4-element-node'
-      ])}
-      data-likec4-color={element.color}
-      data-likec4-shape={element.shape}
-      variants={variants}
-      initial={false}
-      animate={animate}
-      {...(isInteractive && {
-        whileTap: dragging ? animate : 'tap'
-      })}
-    >
-      {
-        /* <NodeToolbar
-        position={Position.Bottom}
-        align={'start'}
-        offset={-10}
-        isVisible={selected || isHovered}>
-<Button>editggg</Button>
-      </NodeToolbar> */
-      }
-      {
-        /* <NodeResizer minWidth={100} minHeight={30} />
-      <NodeToolbar
-        position={Position.Right}
-        align={'start'}
-        style={{
-          background: 'blue'
-        }}>
-        <Stack>
-          <Button>edit</Button>
-
-        </Stack>
-      </NodeToolbar>*/
-      }
-      {
-        /* {element.inEdges.map((edge) => (
-        <Handle
-          key={edge}
-          id={edge}
-          type="target"
-          position={Position.Top}
-          style={{ visibility: 'hidden' }}
-        />
-      ))} */
-      }
+    <>
       <Handle
         type="target"
         position={Position.Top}
-        style={{ visibility: 'hidden' }}
+        className={css.handleCenter}
       />
-      <svg
-        className={clsx(
-          css.cssShapeSvg
-        )}
-        viewBox={`0 0 ${w} ${h}`}
-        width={w}
-        height={h}
+      <m.div
+        id={id}
+        className={clsx([
+          css.container,
+          isDimmed && css.dimmed,
+          animate !== 'idle' && css.containerAnimated,
+          'likec4-element-node'
+        ])}
+        data-hovered={!dragging && isHovered}
+        data-likec4-color={element.color}
+        data-likec4-shape={element.shape}
+        variants={variants}
+        initial={false}
+        animate={animate}
+        {...(isInteractive && {
+          whileTap: dragging ? animate : 'tap'
+        })}
       >
-        <g className={css.indicator}>
-          <SelectedIndicator
+        <svg
+          className={clsx(
+            css.cssShapeSvg
+          )}
+          viewBox={`0 0 ${w} ${h}`}
+          width={w}
+          height={h}
+        >
+          <g className={css.indicator}>
+            <SelectedIndicator
+              shape={element.shape}
+              w={w}
+              h={h}
+            />
+          </g>
+          <ElementShapeSvg
             shape={element.shape}
             w={w}
             h={h}
           />
-        </g>
-        <ElementShapeSvg
-          shape={element.shape}
-          w={w}
-          h={h}
-        />
-      </svg>
-      <div className={clsx(css.element, 'likec4-element')}>
-        {element.icon && <ElementIcon node={element} />}
-        <Text
-          component="div"
-          className={clsx(css.title, 'likec4-element-title')}>
-          {element.title}
-        </Text>
-        {element.technology && (
+        </svg>
+        <div className={clsx(css.element, 'likec4-element')}>
+          <ElementIcon node={element} />
           <Text
             component="div"
-            className={clsx(css.technology, 'likec4-element-technology')}>
-            {element.technology}
+            className={clsx(css.title, 'likec4-element-title')}>
+            {element.title}
           </Text>
-        )}
-        {element.description && (
-          <Text
-            component="div"
-            className={clsx(css.description, 'likec4-element-description')}>
-            {element.description}
-          </Text>
-        )}
-      </div>
+          {element.technology && (
+            <Text
+              component="div"
+              className={clsx(css.technology, 'likec4-element-technology')}>
+              {element.technology}
+            </Text>
+          )}
+          {element.description && (
+            <Text
+              component="div"
+              className={clsx(css.description, 'likec4-element-description')}>
+              {element.description}
+            </Text>
+          )}
+        </div>
+        {isHovercards && element.links && <ElementLink element={element} />}
+        {isNavigable && <NavigateToBtn xynodeId={id} className={css.cssNavigateBtn} />}
+      </m.div>
       <Handle
         type="source"
-        position={Position.Bottom}
-        style={{ visibility: 'hidden' }}
+        position={Position.Top}
+        className={css.handleCenter}
       />
-      {
-        /* {element.outEdges.map((edge) => (
-        <Handle
-        key={edge}
-          id={edge}
-          type="source"
-          position={Position.Bottom}
-          style={{ visibility: 'hidden' }}
-        />
-      ))} */
-      }
-      {isHovercards && element.links && <ElementLink element={element} />}
-      {isNavigable && <NavigateToBtn xynodeId={id} className={css.cssNavigateBtn} />}
-    </m.div>
+    </>
   )
 }, isEqualProps)

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'
 
@@ -16,16 +17,34 @@ export const container = style({
   alignItems: 'stretch',
   vars: {
     [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
+  },
+  selectors: {
+    ':where(.react-flow__node.selected) &': {
+      willChange: 'transform'
+    },
+    '&[data-hovered="true"]': {
+      willChange: 'transform'
+    }
   }
 })
 
+export const handleCenter = style({
+  top: '50%',
+  left: '50%',
+  visibility: 'hidden'
+})
+
+export const containerAnimated = style({
+  willChange: 'transform'
+})
+
 export const dimmed = style({})
 
 globalStyle(`.react-flow__node-element:has(${dimmed})`, {
   opacity: 0.25,
   transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
   transitionDelay: '200ms',
-  filter: 'grayscale(0.85) blur(2px)',
+  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
   willChange: 'opacity, filter'
 })
 
@@ -44,21 +63,27 @@ 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',
-  animationName: indicatorKeyframes,
   animationIterationCount: 'infinite',
   animationDirection: 'alternate',
+  opacity: 0.6,
   visibility: 'hidden',
+  vars: {
+    [indicatorStroke]: vars.element.loContrast
+  },
   selectors: {
     ':where(.react-flow__node.selected) &': {
-      visibility: 'visible'
+      visibility: 'visible',
+      animationName: fallbackVar(vars.safariAnimationHook, indicatorKeyframes)
     },
     [`:where(.react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
-      animationName: 'none',
       strokeWidth: 10,
       stroke: outlineColor,
       visibility: 'visible'
@@ -66,8 +91,14 @@ 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'
+      visibility: 'hidden',
+      display: 'none'
     }
   }
 })
@@ -91,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
@@ -162,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',
@@ -199,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,
@@ -212,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>
-))