@likec4/diagram 1.27.2 → 1.27.3

package/dist/utils/index.d.ts

@@ -1,4 +1,3 @@
-export type { AddEdgeData, AddNodeData } from './types';
 export { vector, VectorImpl } from './vector';
 export type { Vector } from './vector';
 export { bezierControlPoints, bezierPath, centerXYInternalNode, distance, distanceBetweenPoints, isInside, isSamePoint, nodeToRect, stopPropagation, toDomPrecision, } from './xyflow';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.27.2",
+  "version": "1.27.3",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -63,8 +63,8 @@
     "remeda": "^2.21.2",
     "type-fest": "^4.38.0",
     "xstate": "^5.19.2",
-    "@likec4/core": "1.27.2",
-    "@likec4/styles": "1.27.2"
+    "@likec4/core": "1.27.3",
+    "@likec4/styles": "1.27.3"
   },
   "devDependencies": {
     "@pandacss/dev": "^0.53.3",
@@ -81,7 +81,7 @@
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.9",
     "wireit": "^0.14.11",
-    "@likec4/tsconfig": "1.27.2"
+    "@likec4/tsconfig": "1.27.3"
   },
   "scripts": {
     "generate": "panda codegen",

package/src/base/primitives/edge/EdgeLabelContainer.tsx

@@ -101,14 +101,16 @@ export function EdgeLabelContainer({
         }}
         {...rest}
       >
-        {/* Work around to keep same global selector data-likec4-dimmed */}
         <div
-          className={css({
+          style={{
             display: 'contents',
-          })}
-          {...isDimmed !== false && {
-            'data-likec4-dimmed': isDimmed,
           }}
+          {
+            // Work around to keep same global selector data-likec4-dimmed
+            ...isDimmed !== false && {
+              'data-likec4-dimmed': isDimmed,
+            }
+          }
         >
           {children}
         </div>

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

@@ -63,22 +63,22 @@ export function ElementActionButtons({
         className={cx('nodrag nopan', actionButtons)}
       >
         {buttons.map((button, index) => (
-          <m.div
+          <ActionIcon
+            component={m.button}
+            layout
+            className={actionBtn({})}
             key={`action-button-${id}-${button.key ?? index}`}
             initial={false}
             whileTap={{ scale: 1 }}
             whileHover={{
               scale: 1.3,
             }}
-            onTap={e => button.onClick(e as unknown as React.MouseEvent)}
             // Otherwise node receives click event and is selected
-            onClick={stopPropagation}
+            onClick={button.onClick}
             onDoubleClick={stopPropagation}
           >
-            <ActionIcon className={actionBtn({})}>
-              {button.icon}
-            </ActionIcon>
-          </m.div>
+            {button.icon}
+          </ActionIcon>
         ))}
       </Box>
     </Box>

package/src/hooks/useDiagram.ts

@@ -16,38 +16,27 @@ export { useDiagramActorRef }
 
 export function useDiagram() {
   const actor = useDiagramActorRef()
-  const [, startTransition] = useTransition()
   return useMemo(() => ({
     actor,
     send: actor.send,
     navigateTo: (viewId: ViewId, fromNode?: NodeId) => {
-      startTransition(() => {
-        actor.send({
-          type: 'navigate.to',
-          viewId,
-          ...(fromNode && { fromNode }),
-        })
+      actor.send({
+        type: 'navigate.to',
+        viewId,
+        ...(fromNode && { fromNode }),
       })
     },
     navigate: (direction: 'back' | 'forward') => {
-      startTransition(() => {
-        actor.send({ type: `navigate.${direction}` })
-      })
+      actor.send({ type: `navigate.${direction}` })
     },
     fitDiagram: (duration = 350) => {
-      startTransition(() => {
-        actor.send({ type: 'fitDiagram', duration })
-      })
+      actor.send({ type: 'fitDiagram', duration })
     },
     openRelationshipsBrowser: (fqn: Fqn) => {
-      startTransition(() => {
-        actor.send({ type: 'open.relationshipsBrowser', fqn })
-      })
+      actor.send({ type: 'open.relationshipsBrowser', fqn })
     },
     openSource: (params: OpenSourceParams) => {
-      startTransition(() => {
-        actor.send({ type: 'open.source', ...params })
-      })
+      actor.send({ type: 'open.source', ...params })
     },
     openElementDetails: (fqn: Fqn, fromNode?: NodeId) => {
       actor.send({ type: 'open.elementDetails', fqn, fromNode })

package/src/likec4diagram/DiagramXYFlow.tsx

@@ -91,16 +91,14 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
     layoutConstraints = useLayoutConstraints(),
     $isPanning = usePanningAtom(),
     isPanning = useTimeout(() => {
-      if (!$isPanning.get()) {
-        $isPanning.set(true)
-      }
-    }, isReducedGraphics ? 150 : 350),
+      $isPanning.set(true)
+    }, isReducedGraphics ? 100 : 200),
     notPanning = useDebouncedCallback(() => {
       isPanning.clear()
       if ($isPanning.get()) {
         $isPanning.set(false)
       }
-    }, 120),
+    }, 200),
     onMove: OnMove = useCallbackRef((event) => {
       if (!event) {
         return
@@ -111,7 +109,9 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
       notPanning()
     }),
     onMoveEnd: OnMoveEnd = useCallbackRef((event, viewport) => {
-      notPanning.flush()
+      if (!!event) {
+        notPanning.flush()
+      }
       diagram.send({ type: 'xyflow.viewportMoved', viewport, manually: !!event })
     }),
     onViewportResize = useCallbackRef(() => {

package/src/overlays/Overlays.tsx

@@ -2,7 +2,7 @@ import { nonexhaustive } from '@likec4/core'
 import { Box, Button, Code, Group, Notification, ScrollAreaAutosize } from '@mantine/core'
 import { IconX } from '@tabler/icons-react'
 import { useSelector } from '@xstate/react'
-import { AnimatePresence, LayoutGroup, useReducedMotion, useReducedMotionConfig } from 'framer-motion'
+import { AnimatePresence, LayoutGroup, useReducedMotionConfig } from 'framer-motion'
 import { animate } from 'framer-motion/dom'
 import { memo, useEffect, useMemo } from 'react'
 import { type FallbackProps, ErrorBoundary } from 'react-error-boundary'

package/src/overlays/overlay/Overlay.css.ts

@@ -24,7 +24,7 @@ const dialog = css.raw({
   [backdropBlur]: '0px',
   [level]: '0',
   [offset]: '0px',
-  [inset]: 'calc((1 + var(--_level) * 0.5) * var(--_offset))',
+  [inset]: 'calc((1 + var(--_level) * 0.75) * var(--_offset))',
   [backdropOpacity]: '0%',
   _backdrop: {
     cursor: 'zoom-out',
@@ -45,8 +45,8 @@ const dialog = css.raw({
     height: '100vh',
   },
   sm: {
-    inset: '[var(--_inset) var(--_offset) var(--_offset) var(--_inset)]',
-    width: 'calc(100vw - var(--_offset) - var(--_inset))',
+    inset: '[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]',
+    width: 'calc(100vw - 2 * var(--_inset))',
     height: 'calc(100vh - var(--_offset) - var(--_inset))',
     [borderRadius]: '6px',
     padding: '6px',

package/src/overlays/overlay/Overlay.tsx

@@ -5,7 +5,7 @@ import {
 } from '@mantine/core'
 import { useMergedRef } from '@mantine/hooks'
 import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hookz/web'
-import { type HTMLMotionProps, m, useReducedMotionConfig } from 'framer-motion'
+import { m, useReducedMotionConfig } from 'framer-motion'
 import { type PropsWithChildren, forwardRef, useLayoutEffect, useRef, useState } from 'react'
 import { stopPropagation } from '../../utils'
 import { backdropBlur, backdropOpacity, overlay as overlayCVA } from './Overlay.css'
@@ -84,15 +84,13 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(
               [backdropOpacity]: overlayLevel > 0 ? '50%' : '60%',
               scale: 1,
               opacity: 1,
-              translateY: 0,
               transition: {
                 delay: 0.075,
               },
             },
             exit: {
-              scale: 1.3,
+              scale: 1.2,
               opacity: 0,
-              translateY: -10,
               [backdropBlur]: '0px',
               [backdropOpacity]: '0%',
             },

package/src/overlays/relationship-details/actor.ts

@@ -321,12 +321,7 @@ export const relationshipDetailsLogic = setup({
           actions: [
             'updateLayoutData',
             cancel('fitDiagram'),
-            {
-              type: 'xyflow:fitDiagram',
-              params: {
-                duration: 0,
-              },
-            },
+            raise({ type: 'fitDiagram', duration: 0 }, { id: 'fitDiagram', delay: 50 }),
             raise({ type: 'xyflow.updateNodeInternals' }, { delay: 75 }),
           ],
         },

package/src/overlays/relationship-details/hooks.ts

@@ -2,7 +2,7 @@ import { type EdgeId, type Fqn, nonNullable } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
-import { createContext, useContext, useMemo, useTransition } from 'react'
+import { createContext, useContext, useMemo } from 'react'
 import type { OverlaysActorRef } from '../overlaysActor'
 import type { RelationshipDetailsActorRef, RelationshipDetailsSnapshot } from './actor'
 
@@ -23,7 +23,6 @@ export function useRelationshipDetailsState<T = unknown>(
 
 export function useRelationshipDetails() {
   const actor = useRelationshipDetailsActor()
-  const [, startTransition] = useTransition()
   return useMemo(() => ({
     actor,
     get rootElementId(): string {
@@ -39,9 +38,7 @@ export function useRelationshipDetails() {
       }
     },
     fitDiagram: () => {
-      startTransition(() => {
-        actor.send({ type: 'fitDiagram' })
-      })
+      actor.send({ type: 'fitDiagram' })
     },
     close: () => {
       if (actor._parent) {

package/src/overlays/relationship-details/layout-to-xyflow.ts

@@ -1,35 +1,12 @@
-import dagre, { type GraphLabel, type Label } from '@dagrejs/dagre'
 import {
-  type AbstractRelation,
-  type DiagramEdge,
-  type DiagramView,
-  type EdgeId,
   type Fqn,
-  type LikeC4Model,
-  type XYPoint,
-  compareFqnHierarchically,
-  compareRelations,
-  DiagramNode,
-  invariant,
-  isAncestor,
   nonNullable,
   Queue,
 } from '@likec4/core'
-import { useSelector } from '@xstate/react'
-import { deepEqual } from 'fast-equals'
-import { useMemo } from 'react'
-import { filter, first, forEach, hasAtLeast, isTruthy, map, pipe, prop, reverse, sort, sortBy, takeWhile } from 'remeda'
+import { hasAtLeast } from 'remeda'
 import { ZIndexes } from '../../base/const'
-import { useLikeC4Model } from '../../likec4model'
 import type { RelationshipDetailsTypes } from './_types'
-import type { RelationshipDetailsSnapshot } from './actor'
-import {
-  type RelationshipDetailsViewData,
-  computeEdgeDetailsViewData,
-  computeRelationshipDetailsViewData,
-} from './compute'
-import { useRelationshipDetailsActor, useRelationshipDetailsState } from './hooks'
-import { type LayoutResult, layoutRelationshipDetails } from './layout'
+import { type LayoutResult } from './layout'
 
 // const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
 export function layoutResultToXYFlow(

package/src/overlays/relationships-browser/hooks.ts

@@ -2,7 +2,7 @@ import { type Fqn, nonNullable } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
-import { createContext, useContext, useMemo, useTransition } from 'react'
+import { createContext, useContext, useMemo } from 'react'
 import type { OverlaysActorRef } from '../overlaysActor'
 import type { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot } from './actor'
 import type { LayoutRelationshipsViewResult } from './layout'
@@ -23,7 +23,6 @@ export function useRelationshipsBrowserState<T>(
 
 export function useRelationshipsBrowser() {
   const actor = useRelationshipsBrowserActor()
-  const [, startTransition] = useTransition()
   return useMemo(() => ({
     actor,
     get rootElementId(): string {
@@ -44,12 +43,10 @@ export function useRelationshipsBrowser() {
       })
     },
     navigateTo: (subject: Fqn, fromNode?: string) => {
-      startTransition(() => {
-        actor.send({
-          type: 'navigate.to',
-          subject,
-          fromNode,
-        })
+      actor.send({
+        type: 'navigate.to',
+        subject,
+        fromNode,
       })
     },
     fitDiagram: () => {

package/src/overlays/relationships-browser/layout.ts

@@ -55,7 +55,7 @@ const Sizes = {
     edgesep: 25,
   } satisfies GraphLabel,
   edgeLabel: {
-    width: 120,
+    width: 140,
     height: 10,
     minlen: 1,
     weight: 1,
@@ -97,19 +97,6 @@ function createGraph() {
   g.setDefaultEdgeLabel(() => ({ ...Sizes.edgeLabel }))
   g.setDefaultNodeLabel(() => ({}))
 
-  // columns.reduce((prev, column) => {
-  //   const c = graphColumn(column)
-  //   g.setNode(c.id, {})
-  //   g.setNode(c.anchor, { width: 40, height: 2 })
-  //   g.setParent(c.anchor, c.id)
-  //   if (prev) {
-  //     g.setEdge(prev, c.anchor, {
-  //       width: 0
-  //     })
-  //   }
-  //   return c.anchor
-  // }, null as string | null)
-
   return g
 }
 type G = ReturnType<typeof createGraph>
@@ -212,7 +199,7 @@ export type LayoutRelationshipsViewResult = {
 export namespace LayoutRelationshipsViewResult {
   export const Empty = '@empty' as ElementKind
 
-  export type Node = DiagramNode & {
+  export type Node = Omit<DiagramNode, 'deploymentRef' | 'inEdges' | 'outEdges'> & {
     column: RelationshipsBrowserTypes.Column
     ports: RelationshipsBrowserTypes.Ports
     existsInCurrentView: boolean
@@ -368,7 +355,7 @@ export function layoutRelationshipsView(
     for (const edge of g.edges()) {
       g.setEdge(edge, {
         ...Sizes.edgeLabel,
-        width: edgeCount > 30 ? 800 : 400,
+        width: edgeCount > 25 ? 800 : 400,
       })
     }
   }
@@ -492,8 +479,6 @@ export function layoutRelationshipsView(
           width: width,
           height: height,
         },
-        inEdges: [],
-        outEdges: [],
         children: [],
         width,
         height,
@@ -546,8 +531,6 @@ export function layoutRelationshipsView(
         ...element.$element.style,
       },
       navigateTo,
-      inEdges: [],
-      outEdges: [],
       ...(children.length > 0 && { depth: nodeDepth(id) }),
       children,
       width,

package/src/utils/index.ts

@@ -1,4 +1,3 @@
-export type { AddEdgeData, AddNodeData } from './types'
 export { vector, VectorImpl } from './vector'
 export type { Vector } from './vector'
 export {

package/dist/utils/types.d.ts

@@ -1,8 +0,0 @@
-import { Edge, Node } from '@xyflow/react';
-import { Merge } from 'type-fest';
-export type AddNodeData<T extends Node, Data> = Omit<T, 'data'> & {
-    data: Merge<T['data'], Data>;
-};
-export type AddEdgeData<T extends Edge, Data> = Omit<T, 'data'> & {
-    data: Merge<T['data'], Data>;
-};

package/src/utils/types.ts

@@ -1,6 +0,0 @@
-import type { Edge, Node } from '@xyflow/react'
-import type { Merge } from 'type-fest'
-
-export type AddNodeData<T extends Node, Data> = Omit<T, 'data'> & { data: Merge<T['data'], Data> }
-
-export type AddEdgeData<T extends Edge, Data> = Omit<T, 'data'> & { data: Merge<T['data'], Data> }