@likec4/diagram 1.32.0 → 1.32.1

package/src/LikeC4Diagram.props.ts

@@ -134,7 +134,15 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
    */
   nodesDraggable?: boolean | undefined
 
+  /**
+   * Initial width of the diagram
+   * (supposed to be used during SSR)
+   */
   initialWidth?: number | undefined
+  /**
+   * Initial height of the diagram
+   * (supposed to be used during SSR)
+   */
   initialHeight?: number | undefined
 
   /**
@@ -156,7 +164,9 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
   showNavigationButtons?: undefined | boolean
 
   /**
-   * Display notations of the view
+   * Display notations in the bottom right corner
+   * (Active if only notations are present)
+   *
    * @default true
    */
   showNotations?: boolean | undefined
@@ -200,7 +210,7 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
 
   /**
    * Display element tags in the bottom left corner
-   * @default true
+   * @default false
    */
   enableElementTags?: boolean | undefined
 
@@ -212,8 +222,9 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
 
   /**
    * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+   * Enable it if you have a large or static view
    *
-   * @default 'auto' - will be set to true if view has more then 3000 * 2000 pixels
+   * @default 'auto' - will be `true` if view has more then 3000 * 2000 pixels
    */
   reduceGraphics?: 'auto' | boolean | undefined
 

package/src/LikeC4Diagram.tsx

@@ -42,7 +42,7 @@ export function LikeC4Diagram<A extends Any = Any>({
   pannable = true,
   zoomable = true,
   background = 'dots',
-  enableElementTags = true,
+  enableElementTags = false,
   enableFocusMode = false,
   enableElementDetails = false,
   enableRelationshipDetails = enableElementDetails,

package/src/bundle/LikeC4View.tsx

@@ -1,4 +1,4 @@
-import type { Any, DiagramView, ViewId } from '@likec4/core/types'
+import type { Any, DiagramView } from '@likec4/core/types'
 import type * as aux from '@likec4/core/types/aux'
 import { cx } from '@likec4/styles/css'
 import { ActionIcon, Box } from '@mantine/core'
@@ -20,27 +20,20 @@ export function LikeC4View<A extends aux.Any = aux.UnknownLayouted>({
   ...props
 }: LikeC4ViewProps<A>) {
   const likec4model = useLikeC4Model()
-  const view = likec4model?.findView(viewId)
+  const view = likec4model.findView(viewId)
 
-  if (!likec4model) {
-    return (
-      <ErrorMessage>
-        LikeC4Model not found. Make sure you have LikeC4ModelProvider.
-      </ErrorMessage>
-    )
+  if (!view) {
+    return <ViewNotFound viewId={viewId} />
   }
-  if (likec4model.stage !== 'layouted') {
+
+  if (!view.isDiagram()) {
     return (
       <ErrorMessage>
-        LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model.
+        LikeC4 View "${viewId}" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.
       </ErrorMessage>
     )
   }
 
-  if (!view || !view.isDiagram()) {
-    return <ViewNotFound viewId={viewId} />
-  }
-
   return <LikeC4ViewInner view={view.$view} {...props} />
 }
 
@@ -57,7 +50,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<aux.Any>>(({
   injectFontCss = true,
   controls = false,
   fitView = true,
-  fitViewPadding = '8px',
+  fitViewPadding = '16px',
   background = 'transparent',
   browser = true,
   showDiagramTitle = false,
@@ -154,11 +147,11 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<aux.Any>>(({
             {...props}
           />
           {browserView && (
-            <Overlay onClose={() => onNavigateTo(null)}>
+            <Overlay openDelay={0} onClose={() => onNavigateTo(null)}>
               <LikeC4Diagram
                 view={browserView}
                 background="dots"
-                onNavigateTo={to => onNavigateTo(to as ViewId)}
+                onNavigateTo={onNavigateTo}
                 enableDynamicViewWalkthrough
                 enableFocusMode
                 enableRelationshipBrowser
@@ -169,12 +162,12 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<aux.Any>>(({
                 controls
                 readonly
                 fitView
-                fitViewPadding={'16px'}
-                renderNodes={renderNodes}
+                fitViewPadding={'32px'}
                 {...props}
                 {...browserProps}
                 showNotations={(browserProps.showNotations ?? true) &&
                   (browserView.notation?.nodes.length ?? 0) > 0}
+                renderNodes={renderNodes}
               />
               <Box pos="absolute" top={'1rem'} right={'1rem'}>
                 <ActionIcon

package/src/bundle/ReactLikeC4.tsx

@@ -47,15 +47,7 @@ export function ReactLikeC4<A extends aux.Any = aux.UnknownLayouted>({
   ...props
 }: ReactLikeC4Props<A>) {
   const likec4model = useLikeC4Model()
-  const view = likec4model?.findView(viewId)
-
-  if (!likec4model) {
-    return (
-      <ErrorMessage>
-        LikeC4Model not found. Make sure you have LikeC4ModelProvider.
-      </ErrorMessage>
-    )
-  }
+  const view = likec4model.findView(viewId)
 
   if (!view) {
     return <ViewNotFound viewId={viewId} />
@@ -64,7 +56,7 @@ export function ReactLikeC4<A extends aux.Any = aux.UnknownLayouted>({
   if (!view.isDiagram()) {
     return (
       <ErrorMessage>
-        LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model.
+        LikeC4 View "${viewId}" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.
       </ErrorMessage>
     )
   }

package/src/custom/customNodes.tsx

@@ -45,15 +45,20 @@ export type CustomElementNodeProps<M extends Any = Any> = {
  *   ElementTitle,
  *   ElementActions,
  *   ElementDetailsButtonWithHandler,
+ *   IfEnabled,
  *   IfNotReadOnly,
  *   ElementToolbar,
  *   DefaultHandles,
+ *   ElementTags
  * } from '@likec4/diagram/custom'
  *
  * const CustomElementNode = elementNode(({ nodeProps, nodeModel }) => (
  *   <ElementNodeContainer nodeProps={nodeProps}>
  *     <ElementShape {...nodeProps} />
  *     <ElementTitle {...nodeProps} />
+ *     <IfEnabled feature="ElementTags">
+ *       <ElementTags {...nodeProps} />
+ *     </IfEnabled>
  *     <ElementActions
  *       {...nodeProps}
  *       extraButtons={[

package/src/custom/hooks.ts

@@ -29,6 +29,7 @@ export {
 export {
   useLikeC4Model,
   useLikeC4Specification,
+  useLikeC4ViewModel,
 } from '../likec4model/useLikeC4Model'
 
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps'

package/src/likec4diagram/DiagramXYFlow.tsx

@@ -92,13 +92,13 @@ export function LikeC4DiagramXYFlow({
     $isPanning = usePanningAtom(),
     isPanning = useTimeout(() => {
       $isPanning.set(true)
-    }, isReducedGraphics ? 100 : 200),
+    }, isReducedGraphics ? 120 : 200),
     notPanning = useDebouncedCallback(() => {
       isPanning.clear()
       if ($isPanning.get()) {
         $isPanning.set(false)
       }
-    }, 200),
+    }, isReducedGraphics ? 350 : 200),
     onMove: OnMove = useCallbackRef((event) => {
       if (!event) {
         return
@@ -109,7 +109,7 @@ export function LikeC4DiagramXYFlow({
       notPanning()
     }),
     onMoveEnd: OnMoveEnd = useCallbackRef((event, viewport) => {
-      if (!!event) {
+      if (!!event && !isReducedGraphics) {
         notPanning.flush()
       }
       diagram.send({ type: 'xyflow.viewportMoved', viewport, manually: !!event })

package/src/likec4model/index.ts

@@ -3,4 +3,6 @@ export {
 } from './useLikeC4ElementsTree'
 export {
   useLikeC4Model,
+  useLikeC4Specification,
+  useLikeC4ViewModel,
 } from './useLikeC4Model'

package/src/likec4model/useLikeC4Model.ts

@@ -1,4 +1,4 @@
-import type { aux, LikeC4Model } from '@likec4/core/model'
+import type { aux, LikeC4Model, LikeC4ViewModel } from '@likec4/core/model'
 import { useContext } from 'react'
 import { isString } from 'remeda'
 import { LikeC4ModelContext } from './LikeC4ModelContext'
@@ -12,7 +12,7 @@ export function useLikeC4Model(type?: 'layouted' | 'computed') {
   const model = useContext(LikeC4ModelContext)
 
   if (!model) {
-    throw new Error('No LikeC4Model found in context')
+    throw new Error('LikeC4Model not found. Make sure you have LikeC4ModelProvider.')
   }
 
   if (isString(type) && model.stage !== type) {
@@ -22,6 +22,20 @@ export function useLikeC4Model(type?: 'layouted' | 'computed') {
   return model
 }
 
+export function useLikeC4ViewModel<A extends aux.Any = aux.Unknown>(
+  viewId: aux.LooseViewId<A>,
+): LikeC4ViewModel<aux.toLayouted<A>> | null {
+  const model = useLikeC4Model<A>('layouted')
+  const view = model.findView(viewId)
+  if (!view) {
+    return null
+  }
+  if (!view.isDiagram()) {
+    throw new Error(`View "${viewId}" is not layouted`)
+  }
+  return view as any
+}
+
 export function useLikeC4Specification() {
   const model = useLikeC4Model()
   return model.$data.specification

package/src/overlays/overlay/Overlay.tsx

@@ -2,7 +2,7 @@ import { cx } from '@likec4/styles/css'
 import {
   RemoveScroll,
 } from '@mantine/core'
-import { useMergedRef } from '@mantine/hooks'
+import { useFocusTrap, useMergedRef } from '@mantine/hooks'
 import { useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web'
 import { m, useReducedMotionConfig } from 'motion/react'
 import { type PropsWithChildren, forwardRef, useLayoutEffect, useRef, useState } from 'react'
@@ -39,6 +39,7 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
   ...rest
 }, ref) => {
   const [opened, setOpened] = useState(openDelay === 0)
+  const focusTrapRef = useFocusTrap(opened)
   const dialogRef = useRef<HTMLDialogElement>(null)
   const isClosingRef = useRef(false)
 
@@ -79,8 +80,17 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
   }
   return (
     <m.dialog
-      ref={useMergedRef(dialogRef, ref)}
-      className={cx(RemoveScroll.classNames.fullWidth, classes?.dialog, className, styles.dialog)}
+      ref={useMergedRef(
+        dialogRef,
+        focusTrapRef,
+        ref,
+      )}
+      className={cx(
+        classes?.dialog,
+        className,
+        styles.dialog,
+        fullscreen && RemoveScroll.classNames.fullWidth,
+      )}
       layout
       style={{
         // @ts-ignore
@@ -143,8 +153,13 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
       }}
       {...rest}
     >
-      <RemoveScroll forwardProps removeScrollBar={false}>
-        <div className={cx(classes?.body, styles.body, 'overlay-body')}>
+      <RemoveScroll forwardProps>
+        <div
+          className={cx(
+            classes?.body,
+            styles.body,
+            'overlay-body',
+          )}>
           {opened && <>{children}</>}
         </div>
       </RemoveScroll>

package/src/search/Search.tsx

@@ -1,6 +1,6 @@
 import { css } from '@likec4/styles/css'
-import { VStack } from '@likec4/styles/jsx'
-import { FocusTrap, Grid, GridCol, Group, ScrollArea, Title } from '@mantine/core'
+import { Box, VStack } from '@likec4/styles/jsx'
+import { Grid, GridCol, Group, ScrollArea, Title } from '@mantine/core'
 import {
   useCallbackRef,
   useHotkeys,
@@ -8,7 +8,7 @@ import {
 import { useTimeoutEffect } from '@react-hookz/web'
 import { useSelector } from '@xstate/react'
 import { AnimatePresence, LayoutGroup } from 'motion/react'
-import { memo, useRef } from 'react'
+import { useRef } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { isTruthy } from 'remeda'
 import { ErrorFallback } from '../components/ErrorFallback'
@@ -63,27 +63,15 @@ const body = css({
 
 const selectIsOpened = (s: SearchActorSnapshot) => !s.matches('inactive')
 
-export const Search = memo<{ searchActorRef: SearchActorRef }>(({ searchActorRef }) => {
+export function Search({ searchActorRef }: { searchActorRef: SearchActorRef }) {
   const isOpened = useSelector(searchActorRef, selectIsOpened)
 
   const openSearch = () => {
     searchActorRef.send({ type: 'open' })
   }
 
-  const sendClose = () => {
+  const close = useCallbackRef(() => {
     searchActorRef.send({ type: 'close' })
-  }
-
-  const afterCloseCbRef = useRef<(() => void)>(null)
-  const close = useCallbackRef((cb?: () => void) => {
-    afterCloseCbRef.current = cb ?? null
-    sendClose()
-  })
-  const onExitComplete = useCallbackRef(() => {
-    if (afterCloseCbRef.current) {
-      afterCloseCbRef.current()
-      afterCloseCbRef.current = null
-    }
   })
 
   useHotkeys([
@@ -96,40 +84,34 @@ export const Search = memo<{ searchActorRef: SearchActorRef }>(({ searchActorRef
   ])
 
   return (
-    <SearchActorContext
-      value={{
-        searchActorRef,
-        close,
-      }}>
+    <SearchActorContext value={searchActorRef}>
       <DiagramFeatures.Overlays>
-        <ErrorBoundary FallbackComponent={ErrorFallback} onReset={sendClose}>
-          <LayoutGroup>
-            <AnimatePresence onExitComplete={onExitComplete}>
-              {isOpened && (
-                <Overlay
-                  fullscreen
-                  withBackdrop={false}
-                  backdrop={{
-                    opacity: 0.9,
-                  }}
-                  classes={{
-                    dialog,
-                    body,
-                  }}
-                  openDelay={0}
-                  onClose={close}
-                  data-likec4-search="true"
-                >
-                  <SearchOverlay close={close} searchActorRef={searchActorRef} />
-                </Overlay>
-              )}
-            </AnimatePresence>
-          </LayoutGroup>
+        <ErrorBoundary FallbackComponent={ErrorFallback} onReset={close}>
+          <AnimatePresence>
+            {isOpened && (
+              <Overlay
+                fullscreen
+                withBackdrop={false}
+                backdrop={{
+                  opacity: 0.9,
+                }}
+                classes={{
+                  dialog,
+                  body,
+                }}
+                openDelay={0}
+                onClose={close}
+                data-likec4-search="true"
+              >
+                <SearchOverlay searchActorRef={searchActorRef} />
+              </Overlay>
+            )}
+          </AnimatePresence>
         </ErrorBoundary>
       </DiagramFeatures.Overlays>
     </SearchActorContext>
   )
-})
+}
 
 const scrollArea = css({
   height: [
@@ -145,23 +127,24 @@ const scrollArea = css({
   },
 })
 
-const SearchOverlay = ({ close, searchActorRef }: { close: () => void; searchActorRef: SearchActorRef }) => {
+const SearchOverlay = ({ searchActorRef }: { searchActorRef: SearchActorRef }) => {
+  const ref = useRef<HTMLDivElement>(null)
   const pickViewFor = usePickViewFor()
 
   useTimeoutEffect(() => {
     if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
-      focusToFirstFoundElement()
+      focusToFirstFoundElement(ref.current)
     }
   }, 150)
 
   return (
-    <FocusTrap>
+    <Box ref={ref} display={'contents'}>
       <Group
         className={'group'}
         wrap="nowrap"
         onClick={e => {
           e.stopPropagation()
-          moveFocusToSearchInput()
+          moveFocusToSearchInput(ref.current)
         }}>
         <VStack flex={1} px={'sm'}>
           <LikeC4SearchInput />
@@ -232,6 +215,6 @@ const SearchOverlay = ({ close, searchActorRef }: { close: () => void; searchAct
         </GridCol>
       </Grid>
       {pickViewFor && <PickView elementFqn={pickViewFor} />}
-    </FocusTrap>
+    </Box>
   )
 }

package/src/search/components/ElementsColumn.tsx

@@ -22,7 +22,7 @@ import {
 import { useCallbackRef } from '@mantine/hooks'
 import { IconChevronRight } from '@tabler/icons-react'
 import * as m from 'motion/react-m'
-import { type KeyboardEventHandler, memo, useCallback, useEffect, useMemo } from 'react'
+import { type KeyboardEventHandler, memo, useEffect, useMemo } from 'react'
 import { first, isEmpty, only, pipe, reduce } from 'remeda'
 import { IconOrShapeRenderer } from '../../context/IconRenderer'
 import { useDiagram } from '../../hooks/useDiagram'
@@ -31,7 +31,7 @@ import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
 import { useNormalizedSearch, useSearchActor } from '../hooks'
 import { buttonsva } from './_shared.css'
 import * as styles from './ElementsColumn.css'
-import { centerY, moveFocusToSearchInput, stopAndPrevent } from './utils'
+import { centerY, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent } from './utils'
 import { NothingFound } from './ViewsColum'
 
 interface LikeC4ModelTreeNodeData {
@@ -161,7 +161,7 @@ function ElementsTree({
     if (e.key === 'ArrowUp') {
       if (id === roots[0]?.value) {
         stopAndPrevent(e)
-        moveFocusToSearchInput()
+        moveFocusToSearchInput(target)
       }
       return
     }
@@ -172,9 +172,7 @@ function ElementsTree({
       }
       const label = (e.target as HTMLLIElement).querySelector<HTMLLIElement>('.mantine-Tree-label') ?? target
       const maxY = label.getBoundingClientRect().y
-      const viewButtons = [...document.querySelectorAll<HTMLButtonElement>(
-        `[data-likec4-search-views] .${styles.focusable}`,
-      )]
+      const viewButtons = queryAllFocusable(target, 'views')
       let view = viewButtons.length > 1
         ? viewButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1)
         : null
@@ -299,23 +297,22 @@ function ElementTreeNode(
 
 function useHandleElementSelection() {
   const diagram = useDiagram()
-  const { searchActorRef } = useSearchActor()
-  // const naviconst { searchActorRef } = useSearchActor(gateTo = useCloseSearchAndNavigateTo()
-
-  return useCallback((element: LikeC4Model.Element) => {
+  const searchActorRef = useSearchActor()
+  return useCallbackRef((element: LikeC4Model.Element) => {
     const views = [...element.views()]
     if (views.length === 0) {
       return
     }
     const singleView = only(views)
     if (singleView) {
-      if (singleView.id === diagram.currentView.id) {
-        searchActorRef.send({ type: 'close' })
-      } else {
-        diagram.navigateTo(singleView.id)
+      searchActorRef.send({ type: 'close' })
+      if (singleView.id !== diagram.currentView.id) {
+        setTimeout(() => {
+          diagram.navigateTo(singleView.id)
+        }, 100)
       }
       return
     }
     searchActorRef.send({ type: 'pickview.open', elementFqn: element.id })
-  }, [])
+  })
 }

package/src/search/components/PickView.tsx

@@ -10,14 +10,8 @@ import * as styles from './styles.css'
 import { ViewButton } from './ViewsColum'
 
 export function PickView({ elementFqn }: { elementFqn: Fqn }) {
-  const { searchActorRef } = useSearchActor()
+  const searchActorRef = useSearchActor()
   const element = useLikeC4Model().element(elementFqn)
-  // const pickview = usePickView()
-  // const navigateTo = useCloseSearchAndNavigateTo()
-  // const focusTrapRef = useFocusTrap(!!pickview)
-  // useFocusReturn({
-  //   opened: !!pickview,
-  // })
   const scoped = [] as LikeC4ViewModel[]
   const others = [] as LikeC4ViewModel[]
 
@@ -61,44 +55,44 @@ export function PickView({ elementFqn }: { elementFqn: Fqn }) {
           closePickView()
         }}>
       </m.div>
-      <m.div
-        key="pickview"
-        initial={{
-          opacity: 0,
-          scale: 0.95,
-          originY: 0,
-          translateX: '-50%',
-          translateY: -20,
-        }}
-        animate={{
-          opacity: 1,
-          scale: 1,
-          translateY: 0,
-        }}
-        exit={{
-          opacity: 0,
-          scale: 0.98,
-          translateY: -20,
-          transition: {
-            duration: 0.1,
-          },
-        }}
-        className={styles.pickview}
-        data-likec4-search-views>
-        <Group px="sm" py="md" justify="space-between">
-          <Title order={2} lh={1}>Select view</Title>
-          <ActionIcon
-            size={'md'}
-            variant="default"
-            onClick={(e) => {
-              e.stopPropagation()
-              closePickView()
-            }}>
-            <IconX />
-          </ActionIcon>
-        </Group>
-        <FocusTrap>
-          <ScrollAreaAutosize mah={'calc(100vh - 8rem - 50px)'} type="never">
+      <FocusTrap>
+        <m.div
+          key="pickview"
+          initial={{
+            opacity: 0,
+            scale: 0.95,
+            originY: 0,
+            translateX: '-50%',
+            translateY: -20,
+          }}
+          animate={{
+            opacity: 1,
+            scale: 1,
+            translateY: 0,
+          }}
+          exit={{
+            opacity: 0,
+            scale: 0.98,
+            translateY: -20,
+            transition: {
+              duration: 0.1,
+            },
+          }}
+          className={styles.pickview}
+          data-likec4-search-views>
+          <Group px="sm" py="md" justify="space-between">
+            <Title order={2} lh={1}>Select view</Title>
+            <ActionIcon
+              size={'md'}
+              variant="default"
+              onClick={(e) => {
+                e.stopPropagation()
+                closePickView()
+              }}>
+              <IconX />
+            </ActionIcon>
+          </Group>
+          <ScrollAreaAutosize mah={'calc(100vh - 110px)'} type="never">
             {scoped.length > 0 && (
               <Stack gap={'sm'} px={'sm'} className={styles.pickviewGroup}>
                 <Title order={6} c={'dimmed'}>scoped views of the element</Title>
@@ -133,8 +127,8 @@ export function PickView({ elementFqn }: { elementFqn: Fqn }) {
               </Stack>
             )}
           </ScrollAreaAutosize>
-        </FocusTrap>
-      </m.div>
+        </m.div>
+      </FocusTrap>
     </>
   )
 }