@likec4/diagram 1.24.1 → 1.25.0

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

@@ -44,10 +44,10 @@ const Sizes = {
 }
 
 export const ZIndexes = {
-  compound: 2,
-  edge: 3,
-  element: 4,
-
+  compound: 0,
+  // keep edges and elements in the same layer
+  edge: 2,
+  element: 2,
   max: 5,
 }
 

package/src/state/DiagramActorProvider.tsx

@@ -15,7 +15,6 @@ import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
 import type { DiagramActorRef } from './types'
 
 type ActorContextInput = Omit<Input, 'xystore' | 'features'>
-
 export function DiagramActorProvider({ input, children }: PropsWithChildren<{ input: ActorContextInput }>) {
   const handlersRef = useDiagramEventHandlersRef()
   const xystore = useStoreApi<Types.Node, Types.Edge>()

package/src/state/assign.ts

@@ -162,7 +162,21 @@ export function updateNavigationHistory({ context, event }: ActionArg): Partial<
     lastOnNavigate,
     viewport,
   } = context
-  const stepCurrent = nonNullable(history[currentIndex])
+  const stepCurrent = history[currentIndex]
+  if (!stepCurrent) {
+    return {
+      navigationHistory: {
+        currentIndex: 0,
+        history: [
+          {
+            viewId: event.view.id,
+            fromNode: null,
+            viewport: { ...viewport },
+          },
+        ],
+      },
+    }
+  }
   if (stepCurrent.viewId !== event.view.id) {
     // Navigation by browser back/forward ?
     if (!lastOnNavigate) {

package/src/state/diagram-machine.ts

@@ -266,6 +266,24 @@ export const diagramMachine = setup({
       panZoom?.setViewport(viewport, duration > 0 ? { duration } : undefined)
     },
 
+    'xyflow:fitFocusedBounds': ({ context }) => {
+      const { bounds, duration = 450 } = focusedBounds({ context })
+      const { width, height, panZoom, transform } = context.xystore.getState()
+
+      const maxZoom = Math.max(1, transform[2])
+      const viewport = getViewportForBounds(
+        bounds,
+        width,
+        height,
+        MinZoom,
+        maxZoom,
+        context.fitViewPadding,
+      )
+      viewport.x = Math.round(viewport.x)
+      viewport.y = Math.round(viewport.y)
+      panZoom?.setViewport(viewport, duration > 0 ? { duration } : undefined)
+    },
+
     'xyflow:setViewportCenter': ({ context }, params: { x: number; y: number }) => {
       const { x, y } = params
       invariant(context.xyflow, 'xyflow is not initialized')
@@ -487,10 +505,7 @@ export const diagramMachine = setup({
         })),
         'open source of focused or last clicked node',
         spawnChild('hotkeyActorLogic', { id: 'hotkey' }),
-        {
-          type: 'xyflow:fitDiagram',
-          params: focusedBounds,
-        },
+        'xyflow:fitFocusedBounds',
       ],
       exit: enqueueActions(({ enqueue, context }) => {
         enqueue.stopChild('hotkey')
@@ -515,14 +530,11 @@ export const diagramMachine = setup({
             actions: [
               assign({
                 lastClickedNode,
-                focusedNode: ({ event }) => event.node.id as NodeId,
               }),
-              assign(focusNodesEdges),
-              'open source of focused or last clicked node',
-              {
-                type: 'xyflow:fitDiagram',
-                params: focusedBounds,
-              },
+              raise(({ event }) => ({
+                type: 'focus.node',
+                nodeId: event.node.id as NodeId,
+              })),
             ],
           },
         ],
@@ -533,10 +545,7 @@ export const diagramMachine = setup({
             }),
             assign(focusNodesEdges),
             'open source of focused or last clicked node',
-            {
-              type: 'xyflow:fitDiagram',
-              params: focusedBounds,
-            },
+            'xyflow:fitFocusedBounds',
           ],
         },
         'key.esc': {
@@ -631,10 +640,7 @@ export const diagramMachine = setup({
           },
         }),
         assign(updateActiveWalkthrough),
-        {
-          type: 'xyflow:fitDiagram',
-          params: focusedBounds,
-        },
+        'xyflow:fitFocusedBounds',
       ],
       on: {
         'key.esc': {
@@ -665,15 +671,15 @@ export const diagramMachine = setup({
               },
             })
             enqueue.assign(updateActiveWalkthrough)
-            enqueue({
-              type: 'xyflow:fitDiagram',
-              params: focusedBounds,
-            })
+            enqueue('xyflow:fitFocusedBounds')
           }),
         },
         'walkthrough.end': {
           target: 'idle',
         },
+        'xyflow.paneDblClick': {
+          target: 'idle',
+        },
         // We received another view, close overlay and process event again
         'update.view': {
           guard: 'is another view',
@@ -681,18 +687,18 @@ export const diagramMachine = setup({
           target: 'idle',
         },
       },
-      exit: enqueueActions(({ enqueue, context }) => {
+      exit: enqueueActions(({ enqueue, context, event }) => {
         enqueue.stopChild('hotkey')
         if (context.viewportBeforeFocus) {
           enqueue({ type: 'xyflow:setViewport', params: { viewport: context.viewportBeforeFocus } })
         } else {
           enqueue({ type: 'xyflow:fitDiagram' })
         }
-        enqueue.assign((s) => ({
+        enqueue.assign({
           activeWalkthrough: null,
-          ...unfocusNodesEdges(s),
+          ...unfocusNodesEdges({ context, event }),
           viewportBeforeFocus: null,
-        }))
+        })
       }),
     },
   },
@@ -722,15 +728,13 @@ export const diagramMachine = setup({
     },
     'navigate.to': {
       guard: 'is another view',
-      actions: [
-        assign({
-          lastOnNavigate: ({ context, event }) => ({
-            fromView: context.view.id,
-            toView: event.viewId,
-            fromNode: event.fromNode ?? null,
-          }),
+      actions: assign({
+        lastOnNavigate: ({ context, event }) => ({
+          fromView: context.view.id,
+          toView: event.viewId,
+          fromNode: event.fromNode ?? null,
         }),
-      ],
+      }),
       target: '.navigating',
     },
     'navigate.back': {
@@ -810,7 +814,10 @@ export const diagramMachine = setup({
     'layout.align': {
       guard: 'not readonly',
       actions: [
-        { type: 'layout.align', params: ({ event }) => ({ mode: event.mode }) },
+        {
+          type: 'layout.align',
+          params: ({ event }) => ({ mode: event.mode }),
+        },
         raise({ type: 'saveManualLayout.schedule' }),
       ],
     },
@@ -829,7 +836,7 @@ export const diagramMachine = setup({
       ],
     },
     'open.elementDetails': {
-      actions: enqueueActions(({ context, enqueue, system, event }) => {
+      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => {
         let initiatedFrom = null as null | {
           node: NodeId
           clientRect: Rect
@@ -850,7 +857,7 @@ export const diagramMachine = setup({
             clientRect,
           }
         }
-        enqueue.sendTo(typedSystem(system).overlaysActorRef!, {
+        return ({
           type: 'open.elementDetails' as const,
           subject: event.fqn,
           currentView: context.view,

package/src/state/persistence.ts

@@ -9,7 +9,7 @@ export const DiagramToggledFeaturesPersistence = {
       if (fromStorage) {
         return JSON.parse(fromStorage) as Partial<EnabledFeatures>
       }
-      throw new Error(`Workspace ${key} not found`)
+      return null
     } catch (e) {
       console.error(`Error reading fromStorage ${key}:`, e)
       return null

package/src/theme-vars.css.ts

@@ -67,15 +67,3 @@ export const xyvars = createGlobalThemeContract({
     borderRadius: 'node-border-radius',
   },
 }, (value) => `xy-${value}`)
-
-export const whereLight = ':where([data-mantine-color-scheme="light"])'
-export const whereDark = ':where([data-mantine-color-scheme="dark"])'
-
-export const easings = {
-  out: 'cubic-bezier(0, 0, 0.40, 1)',
-  inOut: 'cubic-bezier(0.50, 0, 0.2, 1)',
-}
-
-export const transitions = {
-  fast: `all 130ms ${easings.inOut}`,
-}

package/src/theme-vars.ts

@@ -1,12 +1,24 @@
 import { themeToVars } from '@mantine/vanilla-extract'
 
 export {
-  easings,
-  transitions,
   vars,
-  whereDark,
-  whereLight,
   xyvars,
 } from './theme-vars.css'
 
+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 whereLight = ':where([data-mantine-color-scheme="light"])'
+export const whereDark = ':where([data-mantine-color-scheme="dark"])'
+
+export const easings = {
+  out: 'cubic-bezier(0, 0, 0.40, 1)',
+  inOut: 'cubic-bezier(0.50, 0, 0.2, 1)',
+}
+
+export const transitions = {
+  fast: `all 130ms ${easings.inOut}`,
+}
+
 export const mantine = themeToVars({})

package/src/utils/css.ts

@@ -0,0 +1,7 @@
+export function getVarName(variable: string): string {
+  var matches = variable.match(/^var\((.*)\)$/)
+  if (matches) {
+    return matches[1]!
+  }
+  return variable
+}

package/dist/base/primitives/element/styles.css.js

@@ -1,8 +0,0 @@
-/* empty css                                  */
-/* empty css                                        */
-/* empty css                                        */
-/* empty css                          */
-var iconSize = "var(--likec4-icon-size)";
-export {
-  iconSize
-};

package/dist/globals.css.d.ts

@@ -1,3 +0,0 @@
-export declare const rootClassName = "likec4-diagram-root";
-export declare const whereReducedGraphics = ":where(.likec4-diagram-root:is([data-likec4-reduced-graphics=\"true\"]))";
-export declare const whereNotReducedGraphics = ":where(.likec4-diagram-root:not([data-likec4-reduced-graphics]))";

package/dist/globals.css.js

@@ -1,5 +0,0 @@
-/* empty css                           */
-var rootClassName = "likec4-diagram-root";
-export {
-  rootClassName
-};

package/dist/likec4diagram/ui/search/_shared.css.js

@@ -1,5 +0,0 @@
-/* empty css                           */
-var emptyBoX = "_1cfw8gr7";
-export {
-  emptyBoX
-};

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

@@ -1,52 +0,0 @@
-import { defaultTheme } from '@likec4/core'
-import { rem } from '@mantine/core'
-import { createGlobalVar, createVar, globalStyle } from '@vanilla-extract/css'
-import { container } from './ElementNodeContainer.css'
-
-export const textSize = createVar('text-size')
-export const paddingSize = createVar('padding-size')
-export const iconSize = createGlobalVar('likec4-icon-size')
-
-globalStyle(`${container}`, {
-  vars: {
-    [textSize]: rem(defaultTheme.textSizes.md),
-    [paddingSize]: rem(defaultTheme.spacing.md),
-    [iconSize]: '60px',
-  },
-})
-
-globalStyle(`${container}[data-likec4-shape-size="xs"]`, {
-  vars: {
-    [iconSize]: '24px',
-  },
-})
-globalStyle(`${container}[data-likec4-shape-size="sm"]`, {
-  vars: {
-    [iconSize]: '36px',
-  },
-})
-globalStyle(`${container}[data-likec4-shape-size="lg"]`, {
-  vars: {
-    [iconSize]: '82px',
-  },
-})
-globalStyle(`${container}[data-likec4-shape-size="xl"]`, {
-  vars: {
-    [iconSize]: '90px',
-  },
-})
-
-const sizes = ['xs', 'sm', 'lg', 'xl'] as const
-sizes.forEach((size) => {
-  globalStyle(`${container}[data-likec4-text-size="${size}"]`, {
-    vars: {
-      [textSize]: rem(defaultTheme.textSizes[size]),
-    },
-  })
-
-  globalStyle(`${container}[data-likec4-padding="${size}"]`, {
-    vars: {
-      [paddingSize]: rem(defaultTheme.spacing[size]),
-    },
-  })
-})

package/src/globals.css.ts

@@ -1,131 +0,0 @@
-import { defaultTheme } from '@likec4/core'
-import { createGlobalTheme, globalStyle } from '@vanilla-extract/css'
-import { scale, toHex } from 'khroma'
-import { keys, omit } from 'remeda'
-import { mantine, vars, whereDark } from './theme-vars'
-
-export const rootClassName = 'likec4-diagram-root'
-
-export const whereReducedGraphics = `:where(.${rootClassName}:is([data-likec4-reduced-graphics="true"]))`
-export const whereNotReducedGraphics = `:where(.${rootClassName}:not([data-likec4-reduced-graphics]))`
-
-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),
-      },
-    )
-  }
-}