@likec4/diagram 1.31.0 → 1.32.1

package/dist/likec4diagram/ui/search/LikeC4Search.js

@@ -1,267 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { css } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { Portal, Group, ActionIcon, Grid, GridCol, Title, ScrollArea, ScrollAreaAutosize, Stack } from '@mantine/core';
-import { useDisclosure, useHotkeys, useCallbackRef, useWindowEvent, useFocusTrap, useFocusReturn } from '@mantine/hooks';
-import { IconX } from '@tabler/icons-react';
-import { AnimatePresence, m, LayoutGroup } from 'motion/react';
-import { memo, useRef } from 'react';
-import { SearchControl } from '../../../components/SearchControl.js';
-import { ElementsColumn } from './ElementsColumn.js';
-import { backdrop, root, scrollArea, pickviewBackdrop, pickview, pickviewGroup } from './LikeC4Search.css.js';
-import { LikeC4SearchInput } from './SearchInput.js';
-import { LikeC4SearchContext, useCloseSearch, useIsPickViewActive, wasResetPickView, usePickView, setPickView } from './state.js';
-import { stopAndPrevent } from './utils.js';
-import { ViewsColumn, ViewButton } from './ViewsColum.js';
-import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-
-const LikeC4Search = memo(() => {
-  const [searchOpened, searchOps] = useDisclosure(false);
-  useHotkeys([
-    ["mod+k", () => searchOps.toggle(), {
-      preventDefault: true
-    }],
-    ["mod+f", () => searchOps.toggle(), {
-      preventDefault: true
-    }]
-  ]);
-  const afterCloseCbRef = useRef(null);
-  const close = useCallbackRef((cb) => {
-    afterCloseCbRef.current = cb ?? null;
-    searchOps.close();
-  });
-  const onExitComplete = useCallbackRef(() => {
-    if (afterCloseCbRef.current) {
-      afterCloseCbRef.current();
-      afterCloseCbRef.current = null;
-    }
-  });
-  const { portalProps } = useMantinePortalProps();
-  return /* @__PURE__ */ jsxs(LikeC4SearchContext, { value: close, children: [
-    /* @__PURE__ */ jsx(
-      SearchControl,
-      {
-        onClick: (e) => {
-          e.stopPropagation();
-          searchOps.toggle();
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(Portal, { ...portalProps, reuseTargetNode: true, children: /* @__PURE__ */ jsxs(AnimatePresence, { onExitComplete, children: [
-      searchOpened && /* @__PURE__ */ jsx(
-        m.div,
-        {
-          className: backdrop,
-          initial: { opacity: 0.7 },
-          animate: {
-            opacity: 1,
-            transition: {
-              duration: 0.13
-            }
-          },
-          exit: {
-            opacity: 0,
-            transition: {
-              duration: 0.13
-            }
-          }
-        },
-        "backdrop"
-      ),
-      searchOpened && /* @__PURE__ */ jsx(LikeC4SearchOverlay, {}, "overlay")
-    ] }) })
-  ] });
-});
-LikeC4Search.displayName = "LikeC4Search";
-const LikeC4SearchOverlay = () => {
-  const close = useCloseSearch();
-  const pickViewActive = useIsPickViewActive();
-  useWindowEvent(
-    "keydown",
-    (event) => {
-      if (event.key === "Escape") {
-        stopAndPrevent(event);
-        if (!wasResetPickView()) {
-          close();
-        }
-        return;
-      }
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    m.div,
-    {
-      className: root,
-      "data-likec4-search": "true",
-      initial: false,
-      animate: {
-        opacity: 1,
-        scale: 1,
-        translateY: 0
-      },
-      exit: {
-        opacity: 0,
-        scale: 0.9,
-        translateY: -30,
-        transition: {
-          duration: 0.13
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(Box, { flex: 1, px: "sm", children: /* @__PURE__ */ jsx(LikeC4SearchInput, {}) }),
-          /* @__PURE__ */ jsx(Box, { flex: "0 0 auto", children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              size: "lg",
-              variant: "default",
-              onClick: (e) => {
-                e.stopPropagation();
-                close();
-              },
-              children: /* @__PURE__ */ jsx(IconX, {})
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxs(Grid, { children: [
-          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Elements" }) }),
-          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Views" }) })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          Grid,
-          {
-            className: css({
-              containerName: "likec4-search-elements",
-              containerType: "size",
-              overflow: "hidden",
-              flexGrow: 1
-            }),
-            children: [
-              /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
-                ScrollArea,
-                {
-                  type: "hover",
-                  className: scrollArea,
-                  pr: "xs",
-                  scrollbars: "y",
-                  children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-elements", children: /* @__PURE__ */ jsx(ElementsColumn, {}) }) })
-                }
-              ) }),
-              /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
-                ScrollArea,
-                {
-                  type: "hover",
-                  className: scrollArea,
-                  pr: "xs",
-                  scrollbars: "y",
-                  children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-views", children: /* @__PURE__ */ jsx(ViewsColumn, {}) }) })
-                }
-              ) })
-            ]
-          }
-        ),
-        pickViewActive && /* @__PURE__ */ jsx(PickView, {})
-      ]
-    }
-  );
-};
-function PickView() {
-  const pickview$1 = usePickView();
-  const focusTrapRef = useFocusTrap(!!pickview$1);
-  useFocusReturn({
-    opened: !!pickview$1
-  });
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-pickview", children: pickview$1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      m.div,
-      {
-        className: pickviewBackdrop,
-        onClick: (e) => {
-          e.stopPropagation();
-          setPickView(null);
-        }
-      },
-      "backdrop"
-    ),
-    /* @__PURE__ */ jsxs(
-      m.div,
-      {
-        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: pickview,
-        "data-likec4-search-views": true,
-        ref: focusTrapRef,
-        children: [
-          /* @__PURE__ */ jsxs(Group, { px: "sm", py: "md", justify: "space-between", children: [
-            /* @__PURE__ */ jsx(Title, { order: 2, lh: 1, children: "Select view" }),
-            /* @__PURE__ */ jsx(
-              ActionIcon,
-              {
-                size: "md",
-                variant: "default",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setPickView(null);
-                },
-                children: /* @__PURE__ */ jsx(IconX, {})
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs(ScrollAreaAutosize, { mah: "calc(100vh - 8rem - 50px)", type: "never", children: [
-            pickview$1.scoped.length > 0 && /* @__PURE__ */ jsxs(Stack, { gap: "sm", px: "sm", className: pickviewGroup, children: [
-              /* @__PURE__ */ jsx(Title, { order: 6, c: "dimmed", children: "scoped views of the element" }),
-              pickview$1.scoped.map((view, i) => /* @__PURE__ */ jsx(
-                ViewButton,
-                {
-                  view,
-                  search: "",
-                  loop: true,
-                  mod: {
-                    autofocus: i === 0
-                  }
-                },
-                view.id
-              ))
-            ] }),
-            pickview$1.others.length > 0 && /* @__PURE__ */ jsxs(Stack, { gap: "sm", px: "sm", className: pickviewGroup, children: [
-              /* @__PURE__ */ jsx(Title, { order: 6, c: "dimmed", children: "views including this element" }),
-              pickview$1.others.map((view, i) => /* @__PURE__ */ jsx(
-                ViewButton,
-                {
-                  view,
-                  search: "",
-                  loop: true,
-                  mod: {
-                    autofocus: i === 0 && pickview$1.scoped.length === 0
-                  }
-                },
-                view.id
-              ))
-            ] })
-          ] })
-        ]
-      },
-      "pickview"
-    )
-  ] }) }) });
-}
-
-export { LikeC4Search };

package/dist/likec4diagram/ui/search/SearchInput.d.ts

@@ -1 +0,0 @@
-export declare function LikeC4SearchInput(): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/ui/search/state.d.ts

@@ -1,19 +0,0 @@
-import { Fqn, LikeC4Model, ViewId } from '@likec4/core';
-export declare function setSearch(term: string): void;
-export declare function useSearch(): string;
-export declare function useNormalizedSearch(): string;
-export declare const LikeC4SearchContext: ({ children, value }: {
-    value: (cb?: () => void) => void;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useCloseSearch: () => (cb?: () => void) => void;
-type PickView = {
-    elementFqn: Fqn;
-    scoped: LikeC4Model.View[];
-    others: LikeC4Model.View[];
-};
-export declare function usePickView(): PickView | null;
-export declare function setPickView(data: PickView | null): void;
-export declare function wasResetPickView(): boolean;
-export declare function useIsPickViewActive(): boolean;
-export declare function useCloseSearchAndNavigateTo(): (viewId: ViewId, fromElementFqn?: Fqn) => void;
-export {};

package/dist/likec4diagram/ui/search/state.js

@@ -1,63 +0,0 @@
-import { DiagramNode } from '@likec4/core';
-import { createSafeContext } from '@mantine/core';
-import { useStore } from '@nanostores/react';
-import { computed, atom, onMount } from 'nanostores';
-import { useDeferredValue, useCallback } from 'react';
-import { useDiagram } from '../../../hooks/useDiagram.js';
-
-const $search = atom("");
-function setSearch(term) {
-  $search.set(term);
-}
-function useSearch() {
-  return useStore($search);
-}
-const $normalizedSearch = computed($search, (search) => {
-  const v = search.trim().toLowerCase();
-  return v.length > 1 ? v : "";
-});
-function useNormalizedSearch() {
-  return useDeferredValue(useStore($normalizedSearch));
-}
-const [LikeC4SearchContext, useCloseSearch] = createSafeContext("LikeC4Search");
-const $pickView = atom(null);
-onMount($search, () => {
-  $pickView.set(null);
-});
-function usePickView() {
-  return useStore($pickView);
-}
-function setPickView(data) {
-  $pickView.set(data);
-}
-function wasResetPickView() {
-  if ($pickView.get() !== null) {
-    $pickView.set(null);
-    return true;
-  }
-  return false;
-}
-const $pickViewActive = computed($pickView, (pickView) => pickView !== null);
-function useIsPickViewActive() {
-  return useStore($pickViewActive);
-}
-function useCloseSearchAndNavigateTo() {
-  const diagram = useDiagram();
-  const close = useCloseSearch();
-  return useCallback((viewId, fromElementFqn) => {
-    close(() => {
-      fromElementFqn ??= $pickView.get()?.elementFqn;
-      setPickView(null);
-      const fromNode = fromElementFqn ? diagram.getContext().view.nodes.find((n) => DiagramNode.modelRef(n) === fromElementFqn)?.id : void 0;
-      if (diagram.currentView.id !== viewId) {
-        diagram.navigateTo(viewId, fromNode);
-        return;
-      }
-      if (fromNode) {
-        diagram.focusNode(fromNode);
-      }
-    });
-  }, [close, diagram]);
-}
-
-export { LikeC4SearchContext, setPickView, setSearch, useCloseSearch, useCloseSearchAndNavigateTo, useIsPickViewActive, useNormalizedSearch, usePickView, useSearch, wasResetPickView };

package/dist/likec4diagram/ui/search/utils.d.ts

@@ -1,3 +0,0 @@
-export declare function stopAndPrevent(e: React.KeyboardEvent | KeyboardEvent): void;
-export declare function centerY(element: HTMLElement): number;
-export declare function moveFocusToSearchInput(): void;

package/dist/likec4diagram/ui/search/utils.js

@@ -1,20 +0,0 @@
-function stopAndPrevent(e) {
-  e.stopPropagation();
-  e.preventDefault();
-  return;
-}
-function centerY(element) {
-  const rect = element.getBoundingClientRect();
-  const y = rect.y + Math.floor(rect.height / 2);
-  return y;
-}
-function moveFocusToSearchInput() {
-  const input = document.getElementById("likec4searchinput");
-  if (input) {
-    const length = input.value.length;
-    input.focus();
-    input.setSelectionRange(length, length);
-  }
-}
-
-export { centerY, moveFocusToSearchInput, stopAndPrevent };

package/src/likec4diagram/ui/search/LikeC4Search.tsx

@@ -1,301 +0,0 @@
-import { css } from '@likec4/styles/css'
-import { Box } from '@likec4/styles/jsx'
-import {
-  ActionIcon,
-  Grid,
-  GridCol,
-  Group,
-  Portal,
-  ScrollArea,
-  ScrollAreaAutosize,
-  Stack,
-  Title,
-} from '@mantine/core'
-import {
-  useCallbackRef,
-  useDisclosure,
-  useFocusReturn,
-  useFocusTrap,
-  useHotkeys,
-  useWindowEvent,
-} from '@mantine/hooks'
-import { IconX } from '@tabler/icons-react'
-import { AnimatePresence, LayoutGroup, m } from 'motion/react'
-import { memo, useRef } from 'react'
-import { SearchControl } from '../../../components/SearchControl'
-import { useMantinePortalProps } from '../../../hooks'
-import { ElementsColumn } from './ElementsColumn'
-import * as styles from './LikeC4Search.css'
-import { LikeC4SearchInput } from './SearchInput'
-import {
-  LikeC4SearchContext,
-  setPickView,
-  useCloseSearch,
-  useIsPickViewActive,
-  usePickView,
-  wasResetPickView,
-} from './state'
-import { stopAndPrevent } from './utils'
-import { ViewButton, ViewsColumn } from './ViewsColum'
-
-export const LikeC4Search = memo(() => {
-  const [searchOpened, searchOps] = useDisclosure(false)
-  useHotkeys([
-    ['mod+k', () => searchOps.toggle(), {
-      preventDefault: true,
-    }],
-    ['mod+f', () => searchOps.toggle(), {
-      preventDefault: true,
-    }],
-  ])
-
-  const afterCloseCbRef = useRef<(() => void)>(null)
-  const close = useCallbackRef((cb?: () => void) => {
-    afterCloseCbRef.current = cb ?? null
-    searchOps.close()
-  })
-  const onExitComplete = useCallbackRef(() => {
-    if (afterCloseCbRef.current) {
-      afterCloseCbRef.current()
-      afterCloseCbRef.current = null
-    }
-  })
-
-  const { portalProps } = useMantinePortalProps()
-
-  return (
-    <LikeC4SearchContext value={close}>
-      <SearchControl
-        onClick={e => {
-          e.stopPropagation()
-          searchOps.toggle()
-        }} />
-      <Portal {...portalProps} reuseTargetNode>
-        <AnimatePresence onExitComplete={onExitComplete}>
-          {searchOpened && (
-            <m.div
-              key={'backdrop'}
-              className={styles.backdrop}
-              initial={{ opacity: 0.7 }}
-              animate={{
-                opacity: 1,
-                transition: {
-                  duration: 0.13,
-                },
-              }}
-              exit={{
-                opacity: 0,
-                transition: {
-                  duration: 0.13,
-                },
-              }}>
-            </m.div>
-          )}
-          {searchOpened && <LikeC4SearchOverlay key="overlay" />}
-        </AnimatePresence>
-      </Portal>
-    </LikeC4SearchContext>
-  )
-})
-LikeC4Search.displayName = 'LikeC4Search'
-
-const LikeC4SearchOverlay = () => {
-  const close = useCloseSearch()
-  const pickViewActive = useIsPickViewActive()
-
-  useWindowEvent(
-    'keydown',
-    (event) => {
-      if (event.key === 'Escape') {
-        stopAndPrevent(event)
-        if (!wasResetPickView()) {
-          close()
-        }
-        return
-      }
-    },
-  )
-
-  return (
-    <m.div
-      className={styles.root}
-      data-likec4-search="true"
-      initial={false}
-      animate={{
-        opacity: 1,
-        scale: 1,
-        translateY: 0,
-      }}
-      exit={{
-        opacity: 0,
-        scale: 0.9,
-        translateY: -30,
-        transition: {
-          duration: 0.13,
-        },
-      }}
-    >
-      <Group wrap="nowrap">
-        <Box flex={1} px={'sm'}>
-          <LikeC4SearchInput />
-        </Box>
-        <Box flex={'0 0 auto'}>
-          <ActionIcon
-            size={'lg'}
-            variant="default"
-            onClick={(e) => {
-              e.stopPropagation()
-              close()
-            }}>
-            <IconX />
-          </ActionIcon>
-        </Box>
-      </Group>
-      <Grid>
-        <GridCol span={6}>
-          <Title component={'div'} order={6} c="dimmed" pl="sm">Elements</Title>
-        </GridCol>
-        <GridCol span={6}>
-          <Title component={'div'} order={6} c="dimmed" pl="sm">Views</Title>
-        </GridCol>
-      </Grid>
-      <Grid
-        className={css({
-          containerName: 'likec4-search-elements',
-          containerType: 'size',
-          overflow: 'hidden',
-          flexGrow: 1,
-        })}>
-        <GridCol span={6}>
-          <ScrollArea
-            type="hover"
-            className={styles.scrollArea}
-            pr="xs"
-            scrollbars="y">
-            <AnimatePresence>
-              <LayoutGroup id="likec4-search-elements">
-                <ElementsColumn />
-              </LayoutGroup>
-            </AnimatePresence>
-          </ScrollArea>
-        </GridCol>
-        <GridCol span={6}>
-          <ScrollArea
-            type="hover"
-            className={styles.scrollArea}
-            pr="xs"
-            scrollbars="y">
-            <AnimatePresence>
-              <LayoutGroup id="likec4-search-views">
-                <ViewsColumn />
-              </LayoutGroup>
-            </AnimatePresence>
-          </ScrollArea>
-        </GridCol>
-      </Grid>
-      {pickViewActive && <PickView />}
-    </m.div>
-  )
-}
-
-function PickView() {
-  const pickview = usePickView()
-  // const navigateTo = useCloseSearchAndNavigateTo()
-  const focusTrapRef = useFocusTrap(!!pickview)
-  useFocusReturn({
-    opened: !!pickview,
-  })
-
-  return (
-    <AnimatePresence>
-      <LayoutGroup id="likec4-search-pickview">
-        {pickview && (
-          <>
-            <m.div
-              key="backdrop"
-              className={styles.pickviewBackdrop}
-              onClick={e => {
-                e.stopPropagation()
-                setPickView(null)
-              }}>
-            </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
-              ref={focusTrapRef}>
-              <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()
-                    setPickView(null)
-                  }}>
-                  <IconX />
-                </ActionIcon>
-              </Group>
-
-              <ScrollAreaAutosize mah={'calc(100vh - 8rem - 50px)'} type="never">
-                {pickview.scoped.length > 0 && (
-                  <Stack gap={'sm'} px={'sm'} className={styles.pickviewGroup}>
-                    <Title order={6} c={'dimmed'}>scoped views of the element</Title>
-                    {pickview.scoped.map((view, i) => (
-                      <ViewButton
-                        key={view.id}
-                        view={view}
-                        search={''}
-                        loop
-                        mod={{
-                          autofocus: i === 0,
-                        }}
-                      />
-                    ))}
-                  </Stack>
-                )}
-
-                {pickview.others.length > 0 && (
-                  <Stack gap={'sm'} px={'sm'} className={styles.pickviewGroup}>
-                    <Title order={6} c={'dimmed'}>views including this element</Title>
-                    {pickview.others.map((view, i) => (
-                      <ViewButton
-                        key={view.id}
-                        view={view}
-                        search={''}
-                        loop
-                        mod={{
-                          autofocus: i === 0 && pickview.scoped.length === 0,
-                        }}
-                      />
-                    ))}
-                  </Stack>
-                )}
-              </ScrollAreaAutosize>
-            </m.div>
-          </>
-        )}
-      </LayoutGroup>
-    </AnimatePresence>
-  )
-}