@likec4/diagram 1.21.1 → 1.22.1

package/src/overlays/overlay/Overlay.tsx

@@ -2,27 +2,28 @@ import {
   Box,
   RemoveScroll,
 } from '@mantine/core'
-import { useMergedRef } from '@mantine/hooks'
-import { useDebouncedCallback, useSyncedRef } from '@react-hookz/web'
+import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hookz/web'
 import clsx from 'clsx'
 import { type HTMLMotionProps, m } from 'framer-motion'
-import { type PropsWithChildren, forwardRef, useLayoutEffect, useRef, useState } from 'react'
+import { type PropsWithChildren, useRef, useState } from 'react'
 import * as css from './Overlay.css'
 
 type OverlayProps = PropsWithChildren<
   HTMLMotionProps<'dialog'> & {
+    classes?: {
+      dialog?: string
+      body?: string
+    }
     onClose: () => void
     onClick?: never
   }
 >
 
-export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({ children, onClose, className, ...rest }, ref) => {
+export function Overlay({ children, onClose, className, classes, ...rest }: OverlayProps) {
   const [opened, setOpened] = useState(false)
   const dialogRef = useRef<HTMLDialogElement>(null)
 
   // Move dialog to the top of the DOM
-  // useLayoutEffect(() => dialogRef.current?.showModal(), [])
-
   const onCloseRef = useSyncedRef(onClose)
   const close = useDebouncedCallback(
     () => {
@@ -31,22 +32,37 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({ children,
     [],
     50,
   )
+  // const close = useCallbackRef(() => {
+  //   if (isOpenedRef.current) {
+  //     isOpenedRef.current = false
+  //     requestAnimationFrame(() => {
+  //       onClose()
+  //     })
+  //   }
+  // })
 
-  useLayoutEffect(() => {
-    const cancel = (e: Event) => {
-      e.preventDefault()
-      onCloseRef.current()
-    }
-    dialogRef.current?.addEventListener('cancel', cancel, { capture: true })
-    return () => {
-      dialogRef.current?.removeEventListener('cancel', cancel, { capture: true })
+  // useLayoutEffect(() => {
+  //   const cancel = (e: Event) => {
+  //     e.preventDefault()
+  //     close()
+  //   }
+  //   dialogRef.current?.addEventListener('cancel', cancel, { capture: true })
+  //   return () => {
+  //     dialogRef.current?.removeEventListener('cancel', cancel, { capture: true })
+  //   }
+  // }, [])
+
+  useTimeoutEffect(() => {
+    if (!dialogRef.current?.open) {
+      dialogRef.current?.showModal()
     }
-  }, [])
+    setOpened(true)
+  }, 30)
 
   return (
     <m.dialog
-      ref={useMergedRef(ref, dialogRef)}
-      className={clsx(css.dialog, className)}
+      ref={dialogRef}
+      className={clsx(css.dialog, classes?.dialog, className)}
       initial={{
         '--backdrop-blur': '0px',
         '--backdrop-opacity': '5%',
@@ -63,12 +79,8 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({ children,
         //   delay: 0.25,
         // }
       }}
-      onAnimationStart={() => {
-        dialogRef.current?.showModal()
-        setOpened(true)
-      }}
       exit={{
-        opacity: 0.1,
+        opacity: 0,
         translateY: -10,
         '--backdrop-blur': '0px',
         '--backdrop-opacity': '0%',
@@ -79,21 +91,21 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({ children,
       onClick={e => {
         if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
           e.stopPropagation()
-          close()
+          dialogRef.current?.close()
+          return
         }
       }}
       onClose={e => {
-        e.preventDefault()
         e.stopPropagation()
         close()
       }}
       {...rest}
     >
       <RemoveScroll forwardProps>
-        <Box className={css.body}>
+        <Box className={clsx(css.body, classes?.body)}>
           {opened && <>{children}</>}
         </Box>
       </RemoveScroll>
     </m.dialog>
   )
-})
+}

package/src/overlays/relationship-details/SelectEdge.css.ts

@@ -32,6 +32,7 @@ export const edgeLabel = style({
   borderBottom: `1px solid ${mantine.colors.defaultBorder}`,
   marginBottom: '0px',
   padding: '0 4px 5px 4px',
+  width: '100%',
   // gridArea: '2 / 1 / 3 / 3',
   // selectors: {
   //   '&:last-child': {

package/src/overlays/relationship-details/SelectEdge.tsx

@@ -104,9 +104,9 @@ export const SelectEdge = ({
           </Box>
         </Button>
       </PopoverTarget>
-      <PopoverDropdown p={0} miw={250} maw={420}>
+      <PopoverDropdown p={0} miw={250} maw={400}>
         <ScrollAreaAutosize className={css.scrollArea} scrollbars="y" type="never" viewportRef={viewport}>
-          <Box className={css.edgeGrid} p="xs">
+          <Box className={css.edgeGrid} p="xs" maw={400}>
             {edges.map(e => (
               <div
                 key={e.id}
@@ -118,7 +118,6 @@ export const SelectEdge = ({
                 }}>
                 <Box
                   className={css.edgeSource}
-                  maw={160}
                   mod={{
                     'edge-id': e.id,
                     'likec4-color': e.source.color,
@@ -133,7 +132,6 @@ export const SelectEdge = ({
                 </Box>
                 <Box
                   className={css.edgeTarget}
-                  maw={160}
                   mod={{
                     'likec4-color': e.target.color,
                   }}

package/src/overlays/relationships-browser/RelationshipsBrowser.tsx

@@ -5,8 +5,8 @@ import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
 import { Panel, ReactFlowProvider, useStoreApi } from '@xyflow/react'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
-import { AnimatePresence, m } from 'framer-motion'
-import { memo, useEffect, useRef } from 'react'
+import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
+import { memo, useEffect, useId, useRef } from 'react'
 import type { SnapshotFrom } from 'xstate'
 import { BaseXYFlow } from '../../base/BaseXYFlow'
 import { useRelationshipsView } from './-useRelationshipsView'
@@ -26,6 +26,7 @@ export type RelationshipsBrowserProps = {
   actorRef: RelationshipsBrowserActorRef
 }
 export function RelationshipsBrowser({ actorRef }: RelationshipsBrowserProps) {
+  const id = useId()
   // const actorRef = useDiagramActorState(s => s.children.relationshipsBrowser)
   // if (actorRef == null) {
   //   return null
@@ -45,7 +46,11 @@ export function RelationshipsBrowser({ actorRef }: RelationshipsBrowserProps) {
   return (
     <RelationshipsBrowserActorContext.Provider value={actorRef}>
       <ReactFlowProvider {...initialRef.current}>
-        <RelationshipsBrowserXYFlow />
+        <AnimatePresence>
+          <LayoutGroup id={id}>
+            <RelationshipsBrowserXYFlow />
+          </LayoutGroup>
+        </AnimatePresence>
       </ReactFlowProvider>
     </RelationshipsBrowserActorContext.Provider>
   )
@@ -114,10 +119,10 @@ const RelationshipsBrowserXYFlow = memo(() => {
         browser.send({ type: 'xyflow.resized' })
       })}
       onNodesChange={useCallbackRef((changes) => {
-        browser.send({ type: 'xyflow.applyNodeChages', changes })
+        browser.send({ type: 'xyflow.applyNodeChanges', changes })
       })}
       onEdgesChange={useCallbackRef((changes) => {
-        browser.send({ type: 'xyflow.applyEdgeChages', changes })
+        browser.send({ type: 'xyflow.applyEdgeChanges', changes })
       })}
       nodesDraggable={false}
       fitView={false}

package/src/overlays/relationships-browser/SelectElement.tsx

@@ -47,88 +47,94 @@ export const SelectElement = ({
   const theme = useComputedColorScheme()
 
   return (
-    <Popover
-      position="bottom"
-      shadow="md"
-      keepMounted
-      withinPortal={false}
-      closeOnClickOutside
-      clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
-      onOpen={() => {
-        setTimeout(() => {
-          const item = viewport.current?.querySelector(`[data-value="${subjectId}"]`)
-          item?.scrollIntoView({ behavior: 'instant', block: 'nearest' })
-        }, 100)
-      }}
-    >
-      <PopoverTarget>
-        <Button
-          size="xs"
-          variant="light"
-          color={theme === 'light' ? 'dark' : 'gray'}
-          fw={'500'}
-          maw={250}
-          style={{ padding: '0.25rem 0.75rem' }}
-          rightSection={<IconSelector size={16} />}
-        >
-          {subject?.title ?? '???'}
-        </Button>
-      </PopoverTarget>
-      <PopoverDropdown p={0} miw={250} maw={400}>
-        <ScrollAreaAutosize scrollbars="y" type="never" viewportRef={viewport} className={classes.scrollArea}>
-          <Tree
-            allowRangeSelection={false}
-            selectOnClick={false}
-            tree={tree}
-            data={data}
-            classNames={classes}
-            levelOffset={8}
-            styles={{
-              label: {
-                paddingTop: 5,
-                paddingBottom: 6,
-              },
-            }}
-            renderNode={({ node, selected, expanded, elementProps, hasChildren }) => (
-              <Group gap={2} wrap="nowrap" {...elementProps} py="3">
-                <ActionIcon
-                  variant="subtle"
-                  size={18}
-                  // color={theme === 'light' ? 'gray' : 'gray'}
-                  c={'dimmed'}
-                  style={{
-                    visibility: hasChildren ? 'visible' : 'hidden',
-                  }}>
-                  <IconChevronRight
-                    stroke={3.5}
+    <Box pos={'relative'}>
+      <Popover
+        position="bottom-start"
+        shadow="md"
+        keepMounted={false}
+        withinPortal={false}
+        closeOnClickOutside
+        clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
+        onOpen={() => {
+          setTimeout(() => {
+            const item = viewport.current?.querySelector(`[data-value="${subjectId}"]`)
+            item?.scrollIntoView({ behavior: 'instant', block: 'nearest' })
+          }, 100)
+        }}
+      >
+        <PopoverTarget>
+          <Button
+            size="xs"
+            variant="light"
+            color={theme === 'light' ? 'dark' : 'gray'}
+            fw={'500'}
+            maw={250}
+            style={{ padding: '0.25rem 0.75rem' }}
+            rightSection={<IconSelector size={16} />}
+          >
+            {subject?.title ?? '???'}
+          </Button>
+        </PopoverTarget>
+        <PopoverDropdown p={0} miw={250} maw={400}>
+          <ScrollAreaAutosize scrollbars="y" type="never" viewportRef={viewport} className={classes.scrollArea}>
+            <Tree
+              allowRangeSelection={false}
+              selectOnClick={false}
+              tree={tree}
+              data={data}
+              classNames={classes}
+              levelOffset={8}
+              styles={{
+                root: {
+                  maxWidth: 400,
+                  overflow: 'hidden',
+                },
+                label: {
+                  paddingTop: 5,
+                  paddingBottom: 6,
+                },
+              }}
+              renderNode={({ node, selected, expanded, elementProps, hasChildren }) => (
+                <Group gap={2} wrap="nowrap" {...elementProps} py="3">
+                  <ActionIcon
+                    variant="subtle"
+                    size={18}
+                    // color={theme === 'light' ? 'gray' : 'gray'}
+                    c={'dimmed'}
                     style={{
-                      transition: 'transform 150ms ease',
-                      transform: `rotate(${expanded ? '90deg' : '0'})`,
-                      width: '80%',
-                    }} />
-                </ActionIcon>
-                <Box
-                  flex={'1 1 100%'}
-                  w={'100%'}
-                  // gap={3}
-                  onClick={e => {
-                    e.stopPropagation()
-                    onSelect(node.value as Fqn)
-                    tree.select(node.value)
-                    tree.expand(node.value)
-                  }}>
-                  <Text
-                    fz="sm"
-                    fw={selected ? '600' : '400'}
-                    truncate="end">
-                    {node.label}
-                  </Text>
-                </Box>
-              </Group>
-            )}
-          />
-        </ScrollAreaAutosize>
-      </PopoverDropdown>
-    </Popover>
+                      visibility: hasChildren ? 'visible' : 'hidden',
+                    }}>
+                    <IconChevronRight
+                      stroke={3.5}
+                      style={{
+                        transition: 'transform 150ms ease',
+                        transform: `rotate(${expanded ? '90deg' : '0'})`,
+                        width: '80%',
+                      }} />
+                  </ActionIcon>
+                  <Box
+                    flex={'1 1 100%'}
+                    w={'100%'}
+                    // gap={3}
+                    onClick={e => {
+                      e.stopPropagation()
+                      onSelect(node.value as Fqn)
+                      tree.select(node.value)
+                      tree.expand(node.value)
+                    }}>
+                    <Text
+                      fz="sm"
+                      fw={selected ? '600' : '400'}
+                      truncate="end">
+                      {node.label}
+                    </Text>
+                  </Box>
+                </Group>
+              )}
+            />
+          </ScrollAreaAutosize>
+        </PopoverDropdown>
+      </Popover>
+    </Box>
   )
 }

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

@@ -72,8 +72,8 @@ export type Events =
   | { type: 'xyflow.init'; instance: XYFLowInstance; store: XYStoreApi }
   | { type: 'xyflow.nodeClick'; node: RelationshipsBrowserTypes.Node }
   | { type: 'xyflow.edgeClick'; edge: RelationshipsBrowserTypes.Edge }
-  | { type: 'xyflow.applyNodeChages'; changes: NodeChange<RelationshipsBrowserTypes.Node>[] }
-  | { type: 'xyflow.applyEdgeChages'; changes: EdgeChange<RelationshipsBrowserTypes.Edge>[] }
+  | { type: 'xyflow.applyNodeChanges'; changes: NodeChange<RelationshipsBrowserTypes.Node>[] }
+  | { type: 'xyflow.applyEdgeChanges'; changes: EdgeChange<RelationshipsBrowserTypes.Edge>[] }
   | { type: 'xyflow.paneClick' }
   | { type: 'xyflow.paneDblClick' }
   | { type: 'xyflow.resized' }
@@ -198,7 +198,7 @@ export const relationshipsBrowserActor = setup({
         !nextSubjectNode || !existingNode || nextSubjectNode.type === 'empty' || !currentSubjectNode ||
         nextSubjectNode.data.fqn === currentSubjectNode.data.fqn
       ) {
-        xyflow.setViewport(nextviewport)
+        await xyflow.setViewport(nextviewport)
         return updateXYData()
       }
 
@@ -280,7 +280,7 @@ export const relationshipsBrowserActor = setup({
         return updateXYData()
       }
       await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 350 })
-      xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom })
+      await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom })
       return updateXYData()
     }),
   },
@@ -372,11 +372,11 @@ export const relationshipsBrowserActor = setup({
                 xyedges: ({ event }) => event.xyedges,
               }),
             },
-            'xyflow.applyEdgeChages': {
-              // actions: log('layouting: ignore xyflow.applyEdgeChages'),
+            'xyflow.applyEdgeChanges': {
+              // actions: log('layouting: ignore xyflow.applyEdgeChanges'),
             },
-            'xyflow.applyNodeChages': {
-              // actions: log('layouting: ignore xyflow.applyNodeChages'),
+            'xyflow.applyNodeChanges': {
+              // actions: log('layouting: ignore xyflow.applyNodeChanges'),
             },
           },
         },
@@ -447,14 +447,14 @@ export const relationshipsBrowserActor = setup({
     },
   },
   on: {
-    'xyflow.applyNodeChages': {
+    'xyflow.applyNodeChanges': {
       actions: assign({
         xynodes: ({ context, event }) => {
           return applyNodeChanges(event.changes, context.xynodes)
         },
       }),
     },
-    'xyflow.applyEdgeChages': {
+    'xyflow.applyEdgeChanges': {
       actions: assign({
         xyedges: ({ context, event }) => {
           return applyEdgeChanges(event.changes, context.xyedges)

package/src/overlays/relationships-browser/custom/nodeTypes.tsx

@@ -17,7 +17,7 @@ import { EmptyNode } from './EmptyNode'
 export const nodeTypes = {
   element: customNode<RelationshipsBrowserTypes.ElementNodeData>((props) => {
     return (
-      <ElementNodeContainer component={m.div} layoutId={props.id} nodeProps={props}>
+      <ElementNodeContainer key={props.id} component={m.div} layoutId={props.id} nodeProps={props}>
         <ElementShape {...props} />
         <ElementTitle {...props} iconSize={40} />
         <ElementActions {...props} />
@@ -28,7 +28,7 @@ export const nodeTypes = {
 
   compound: customNode<RelationshipsBrowserTypes.CompoundNodeData>((props) => {
     return (
-      <CompoundNodeContainer component={m.div} layoutId={props.id} nodeProps={props}>
+      <CompoundNodeContainer key={props.id} component={m.div} layoutId={props.id} nodeProps={props}>
         <CompoundTitle {...props} />
         <CompoundPorts {...props} />
       </CompoundNodeContainer>

package/dist/LikeC4Search.css.d.ts

@@ -1 +0,0 @@
-export declare const actionSection: string;

package/dist/LikeC4Search.css.js

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

package/dist/LikeC4Search.d.ts

@@ -1,2 +0,0 @@
-import { MemoExoticComponent } from 'react';
-export declare const LikeC4Search: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/LikeC4Search.js

@@ -1,88 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { rem } from "@mantine/core";
-import { Spotlight } from "@mantine/spotlight";
-import { IconSearch, IconRectangularPrism, IconStack2, IconSitemap } from "@tabler/icons-react";
-import { memo, useMemo } from "react";
-import { pipe, filter, map } from "remeda";
-import { useDiagram } from "./hooks/useDiagram.js";
-import { useDiagramContext } from "./hooks/useDiagramContext.js";
-import { actionSection } from "./LikeC4Search.css.js";
-import { useLikeC4Model } from "./likec4model/useLikeC4Model.js";
-import { useMantinePortalProps } from "./hooks/useMantinePortalProps.js";
-const LikeC4Search = memo(() => {
-  const view = useDiagramContext((s) => s.view);
-  const model = useLikeC4Model(true);
-  const diagram = useDiagram();
-  const getNodeActionsData = () => {
-    return pipe(
-      view.nodes,
-      filter((n) => !!n.title),
-      map((n) => ({
-        id: n.id,
-        label: n.title,
-        ...n.description && {
-          description: n.description
-        },
-        keywords: [
-          n.title,
-          ...(n.tags ?? []).map((t) => `#${t}`),
-          ...n.description ? [n.description] : []
-        ].filter((k) => k.toLowerCase()),
-        onClick: () => diagram.focusNode(n.id),
-        leftSection: /* @__PURE__ */ jsx(IconRectangularPrism, {})
-      }))
-    );
-  };
-  const getViewActionsData = () => {
-    const views = [...model.views()];
-    return map(views, (v) => ({
-      id: v.id,
-      label: v.title ?? v.id,
-      ...v.$view.description && {
-        description: v.$view.description
-      },
-      keywords: [
-        v.title ?? v.id,
-        ...v.tags ?? [],
-        ...v.$view.description ? [v.$view.description] : []
-      ],
-      onClick: () => {
-        diagram.navigateTo(v.id);
-      },
-      leftSection: v.isDeploymentView() ? /* @__PURE__ */ jsx(IconStack2, {}) : /* @__PURE__ */ jsx(IconSitemap, {})
-    }));
-  };
-  const actions = useMemo(() => [
-    {
-      group: "Elements",
-      actions: getNodeActionsData()
-    },
-    {
-      group: "Views",
-      actions: getViewActionsData()
-    }
-  ], [model, diagram, view]);
-  const portalProps = useMantinePortalProps();
-  return /* @__PURE__ */ jsx(
-    Spotlight,
-    {
-      ...portalProps,
-      actions,
-      nothingFound: "Nothing found...",
-      shortcut: ["mod + f", "mod + k"],
-      scrollable: true,
-      highlightQuery: true,
-      maxHeight: 350,
-      classNames: {
-        actionSection
-      },
-      searchProps: {
-        leftSection: /* @__PURE__ */ jsx(IconSearch, { style: { width: rem(18), height: rem(18) }, stroke: 1.5 }),
-        placeholder: "Search elements and views..."
-      }
-    }
-  );
-});
-export {
-  LikeC4Search
-};

package/src/LikeC4Search.css.ts

@@ -1,12 +0,0 @@
-import { rem } from '@mantine/core'
-import { globalStyle, style } from '@vanilla-extract/css'
-
-export const actionSection = style({
-  marginInlineEnd: 4
-})
-
-globalStyle(`:where(${actionSection}) .tabler-icon`, {
-  opacity: 0.8,
-  width: '70%',
-  height: '70%'
-})