likec4 0.41.0 → 0.42.0

package/dist/@likec4/diagrams/diagram/state/atoms.mjs

@@ -1,71 +0,0 @@
-import { atom } from "jotai";
-import { equals } from "rambdax";
-import { selectAtom } from "jotai/utils";
-const currentHoveredNodeAtom = atom(null);
-const nodeTimeoutAtom = atom(void 0);
-export const hoveredNodeAtom = atom(
-  (get) => get(currentHoveredNodeAtom),
-  (get, set, update) => {
-    clearTimeout(get(nodeTimeoutAtom));
-    const _prev = get(currentHoveredNodeAtom);
-    const _next = typeof update === "function" ? update(_prev) : update;
-    if (equals(_prev, _next)) {
-      return false;
-    }
-    if (_next != null && _prev == null) {
-      set(
-        nodeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredNodeAtom, _next);
-        }, 100)
-      );
-      return true;
-    }
-    if (_next == null && _prev != null) {
-      set(
-        nodeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredNodeAtom, null);
-        }, 150)
-      );
-      return true;
-    }
-    set(currentHoveredNodeAtom, _next);
-    return true;
-  }
-);
-export const hoveredNodeIdAtom = selectAtom(hoveredNodeAtom, (node) => node?.id ?? null);
-const currentHoveredEdgeAtom = atom(null);
-const edgeTimeoutAtom = atom(void 0);
-export const hoveredEdgeAtom = atom(
-  (get) => get(currentHoveredEdgeAtom),
-  (get, set, update) => {
-    clearTimeout(get(edgeTimeoutAtom));
-    const _prev = get(currentHoveredEdgeAtom);
-    const _next = typeof update === "function" ? update(_prev) : update;
-    if (equals(_prev, _next)) {
-      return false;
-    }
-    if (_next != null && _prev == null) {
-      set(
-        edgeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredEdgeAtom, _next);
-        }, 100)
-      );
-      return true;
-    }
-    if (_next == null && _prev != null) {
-      set(
-        edgeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredEdgeAtom, null);
-        }, 150)
-      );
-      return true;
-    }
-    set(currentHoveredEdgeAtom, _next);
-    return true;
-  }
-);
-export const hoveredEdgeIdAtom = selectAtom(hoveredEdgeAtom, (edge) => edge?.id ?? null);

package/dist/@likec4/diagrams/diagram/state/gestures.mjs

@@ -1,19 +0,0 @@
-let _isDragging = false;
-let tm;
-export const DiagramGesture = {
-  get isDragging() {
-    return _isDragging;
-  },
-  set isDragging(value) {
-    clearTimeout(tm);
-    if (value) {
-      _isDragging = value;
-      return;
-    }
-    if (_isDragging) {
-      tm = setTimeout(() => {
-        _isDragging = false;
-      }, 100);
-    }
-  }
-};

package/dist/@likec4/diagrams/diagram/state/hooks.mjs

@@ -1,28 +0,0 @@
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { selectAtom } from "jotai/utils";
-import { hoveredEdgeAtom, hoveredEdgeIdAtom, hoveredNodeAtom, hoveredNodeIdAtom } from "./atoms.mjs";
-import { useCallback } from "react";
-export function useHoveredNode() {
-  return useAtom(hoveredNodeAtom);
-}
-export function useHoveredNodeId() {
-  return useAtomValue(hoveredNodeIdAtom);
-}
-export function useSetHoveredNode() {
-  return useSetAtom(hoveredNodeAtom);
-}
-export function useGetNodeState(nodeId) {
-  const isHovered = useAtomValue(
-    selectAtom(
-      hoveredNodeAtom,
-      useCallback((node) => node?.id === nodeId, [nodeId])
-    )
-  );
-  return { isHovered };
-}
-export function useHoveredEdgeId() {
-  return useAtomValue(hoveredEdgeIdAtom);
-}
-export function useSetHoveredEdge() {
-  return useSetAtom(hoveredEdgeAtom);
-}

package/dist/@likec4/diagrams/diagram/state/index.mjs

@@ -1,3 +0,0 @@
-export * from "./hooks.mjs";
-export * from "./gestures.mjs";
-export * from "./provider.mjs";

package/dist/@likec4/diagrams/diagram/state/provider.mjs

@@ -1,7 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Provider, createStore } from "jotai";
-import { useState } from "react";
-export function DiagramStateProvider({ children }) {
-  const [store] = useState(() => createStore());
-  return /* @__PURE__ */ jsx(Provider, { store, children });
-}

package/dist/@likec4/diagrams/esm/components/EmbeddedDiagram.js

@@ -1,77 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { invariant } from "@likec4/core";
-import { forwardRef, useCallback, useState } from "react";
-import { ResponsiveDiagram } from "./primitives/index.js";
-import { FullscreenDiagramBrowser } from "./FullscreenDiagramBrowser.js";
-const EmbeddedPadding = [20, 20, 20, 20];
-const defaultRenderDisclose = ({
-  views,
-  viewId,
-  initialPosition,
-  onClose
-}) => /* @__PURE__ */ jsx(
-  FullscreenDiagramBrowser,
-  {
-    views,
-    initialViewId: viewId,
-    initialPosition,
-    onClose
-  }
-);
-export const EmbeddedDiagram = /* @__PURE__ */ forwardRef(
-  ({
-    animate = false,
-    views,
-    viewId,
-    padding,
-    noBrowser = false,
-    renderDisclose = defaultRenderDisclose,
-    ...props
-  }, ref) => {
-    const diagram = views[viewId];
-    invariant(diagram, `View "${viewId}" not found in views`);
-    const [initialPosition, setBrowserInitialPosition] = useState(
-      null
-    );
-    const isOpened = initialPosition !== null;
-    const openBrowser = (s) => {
-      const rect = s.container().getBoundingClientRect(), scale = s.scaleX(), embeddedX = s.x() - s.offsetX(), embeddedY = s.y() - s.offsetY(), offset = {
-        x: window.innerWidth / 2,
-        y: window.innerHeight / 2
-      };
-      setBrowserInitialPosition({
-        x: Math.ceil(embeddedX + rect.x * scale + offset.x),
-        y: Math.ceil(embeddedY + rect.y * scale + offset.y),
-        scale
-      });
-    };
-    const onNodeEdgeClick = (_node, e) => {
-      const stage = e.target.getStage();
-      if (stage) {
-        e.cancelBubble = true;
-        openBrowser(stage);
-      }
-    };
-    const onClose = useCallback(() => setBrowserInitialPosition(null), []);
-    const enableBrowseClicks = !noBrowser && !isOpened;
-    return /* @__PURE__ */ jsxs("div", { ...props, children: [
-      /* @__PURE__ */ jsx(
-        ResponsiveDiagram,
-        {
-          ref,
-          animate,
-          zoomable: false,
-          pannable: false,
-          diagram,
-          padding: padding ?? EmbeddedPadding,
-          ...enableBrowseClicks && {
-            onStageClick: openBrowser,
-            onEdgeClick: onNodeEdgeClick,
-            onNodeClick: onNodeEdgeClick
-          }
-        }
-      ),
-      isOpened && renderDisclose({ views, viewId, initialPosition, onClose })
-    ] });
-  }
-);

package/dist/@likec4/diagrams/esm/components/FullscreenDiagramBrowser.js

@@ -1,52 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { invariant } from "@likec4/core";
-import { useSyncedRef } from "@react-hookz/web/esm";
-import { useCallback } from "react";
-import { createPortal } from "react-dom";
-import { useViewIdFromHash } from "../hooks/useViewIdFromHash.js";
-import { FullscreenDiagram, FullscreenDiagramTitle } from "./primitives/index.js";
-export function FullscreenDiagramBrowser({
-  initialViewId,
-  views,
-  initialPosition,
-  onClose,
-  closeOnEsc,
-  closeOnOutsideClick,
-  ...props
-}) {
-  const viewsRef = useSyncedRef(views);
-  const [viewId, setViewId] = useViewIdFromHash({
-    initialViewId,
-    onReturnToInitial: () => {
-      onClose?.();
-    }
-  });
-  const diagram = views[viewId];
-  invariant(diagram, `View "${viewId}" not found in views`);
-  const onNodeClick = useCallback(
-    (node) => {
-      if (node.navigateTo && node.navigateTo in viewsRef.current) {
-        setViewId(node.navigateTo);
-      }
-    },
-    [viewsRef, setViewId]
-  );
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      FullscreenDiagram,
-      {
-        diagram,
-        initialPosition,
-        closeOnEsc: true,
-        closeOnOutsideClick: true,
-        onNodeClick,
-        onClose,
-        ...props,
-        children: /* @__PURE__ */ jsx(FullscreenDiagramTitle, { children: diagram.title })
-      }
-    ),
-    document.body,
-    "FullscreenDiagramBrowser"
-  );
-}
-FullscreenDiagramBrowser.displayName = "FullscreenDiagramBrowser";

package/dist/@likec4/diagrams/esm/components/index.js

@@ -1,4 +0,0 @@
-export * from "./FullscreenDiagramBrowser.js";
-export * from "./EmbeddedDiagram.js";
-export * from "./primitives/index.js";
-export * from "./types.js";

package/dist/@likec4/diagrams/esm/components/primitives/fullscreen/CloseButton.js

@@ -1,43 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const CrossIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    ref,
-    width: "15",
-    height: "15",
-    viewBox: "0 0 15 15",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
-        fill: "currentColor",
-        fillRule: "evenodd",
-        clipRule: "evenodd"
-      }
-    )
-  }
-));
-export const CloseButton = ({
-  style,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ...props,
-    style: {
-      position: "absolute",
-      top: "1rem",
-      right: "1rem",
-      width: 24,
-      height: 24,
-      cursor: "pointer",
-      color: "var(--likec4-browser-close-btn-color, rgba(200,200,200,0.8))",
-      ...style
-    },
-    children: /* @__PURE__ */ jsx(CrossIcon, { width: 24, height: 24 })
-  }
-);

package/dist/@likec4/diagrams/esm/components/primitives/fullscreen/FullscreenDiagram.js

@@ -1,116 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { invariant } from "@likec4/core";
-import { useKeyboardEvent, useMeasure } from "@react-hookz/web/esm";
-import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock-upgrade";
-import { useEffect, useRef } from "react";
-import { Diagram } from "../../../diagram/Diagram.js";
-import { CloseButton } from "./CloseButton.js";
-const DefaultPadding = [30, 30, 30, 30];
-const StyleOverlay = {
-  position: "fixed",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  backgroundColor: "var(--likec4-browser-overlay-bg, rgba(18,18,18,0.8))",
-  backdropFilter: "var(--likec4-browser-backdrop, blur(4px))",
-  zIndex: "var(--likec4-overlay-z-index, 100)",
-  display: "flex",
-  placeContent: "strech",
-  placeItems: "strech",
-  touchAction: "pan-x pan-y pinch-zoom",
-  boxSizing: "border-box",
-  margin: 0,
-  padding: 0,
-  border: "0 solid transparent"
-};
-const StyleContainer = {
-  margin: 0,
-  padding: 0,
-  flex: "1 1 100%",
-  overflow: "hidden"
-};
-export function FullscreenDiagram({
-  diagram,
-  initialPosition,
-  padding,
-  style,
-  styleDiagram,
-  closeOnEsc = true,
-  closeOnOutsideClick,
-  onNodeClick,
-  onEdgeClick,
-  onStageClick,
-  onClose,
-  children,
-  ...props
-}) {
-  if (onStageClick && closeOnOutsideClick === true) {
-    throw new Error("onStageClick cannot be used with closeOnOutsideClick");
-  }
-  if (closeOnEsc || closeOnOutsideClick) {
-    invariant(onClose, "onClose is required when closeOnEsc or closeOnOutsideClick");
-  }
-  const overlayRef = useRef(null);
-  const [measures, containerRef] = useMeasure();
-  useEffect(() => {
-    const target = overlayRef.current;
-    if (!target) {
-      return;
-    }
-    disableBodyScroll(target);
-    return () => {
-      enableBodyScroll(target);
-    };
-  }, []);
-  useKeyboardEvent(
-    closeOnEsc && "Escape",
-    () => {
-      onClose?.();
-    },
-    [],
-    { eventOptions: { passive: true } }
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: overlayRef,
-      style: {
-        ...StyleOverlay,
-        ...style
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: containerRef,
-            style: {
-              ...StyleContainer
-            },
-            children: measures && /* @__PURE__ */ jsx(
-              Diagram,
-              {
-                animate: true,
-                pannable: true,
-                zoomable: true,
-                diagram,
-                width: measures.width,
-                height: measures.height,
-                initialPosition,
-                padding: padding ?? DefaultPadding,
-                style: styleDiagram,
-                onNodeClick,
-                onEdgeClick,
-                onStageClick: onStageClick ?? (closeOnOutsideClick ? onClose : void 0)
-              }
-            )
-          }
-        ),
-        children,
-        onClose && /* @__PURE__ */ jsx(CloseButton, { onClick: () => onClose() })
-      ]
-    }
-  );
-}
-FullscreenDiagram.displayName = "FullscreenDiagram";

package/dist/@likec4/diagrams/esm/components/primitives/fullscreen/FullscreenDiagramTitle.js

@@ -1,32 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-const ContainerStyles = {
-  position: "absolute",
-  pointerEvents: "none",
-  userSelect: "none",
-  top: 0,
-  left: 0,
-  width: "100%",
-  margin: 0,
-  padding: "10px 20px 0 20px",
-  boxSizing: "border-box",
-  color: "rgb(241 245 249 / 95%)",
-  fontFamily: 'ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif',
-  fontSize: "16px",
-  lineHeight: "1.1",
-  fontWeight: "500",
-  textShadow: "4px 4px 5px rgb(17 17 17)"
-};
-export function FullscreenDiagramTitle({ children, style, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        ...ContainerStyles,
-        ...style
-      },
-      ...props,
-      children
-    }
-  );
-}
-FullscreenDiagramTitle.displayName = "FullscreenDiagramTitle";

package/dist/@likec4/diagrams/esm/components/primitives/index.js

@@ -1,3 +0,0 @@
-export * from "./responsive/ResponsiveDiagram.js";
-export * from "./fullscreen/FullscreenDiagram.js";
-export * from "./fullscreen/FullscreenDiagramTitle.js";

package/dist/@likec4/diagrams/esm/components/primitives/responsive/ResponsiveDiagram.js

@@ -1,42 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useMeasure } from "@react-hookz/web/esm";
-import { forwardRef } from "react";
-import { Diagram } from "../../../diagram/index.js";
-export const ResponsiveDiagram = /* @__PURE__ */ forwardRef(
-  ({ diagram, animate = false, className, diagramClassName, style, ...props }, ref) => {
-    const [measures, containerRef] = useMeasure();
-    const w = diagram.width, h = diagram.height;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "relative",
-          display: "flex",
-          aspectRatio: `${w} / ${h}`,
-          width: "100%",
-          height: "auto",
-          marginLeft: "auto",
-          marginRight: "auto",
-          padding: 0,
-          maxWidth: w,
-          boxSizing: "border-box",
-          ...style
-        },
-        className,
-        children: /* @__PURE__ */ jsx("div", { ref: containerRef, style: { flex: "1 1 100%", overflow: "hidden" }, children: measures && /* @__PURE__ */ jsx(
-          Diagram,
-          {
-            ref,
-            width: Math.floor(measures.width),
-            height: Math.floor(measures.height),
-            diagram,
-            className: diagramClassName,
-            animate,
-            ...props
-          }
-        ) })
-      }
-    );
-  }
-);
-ResponsiveDiagram.displayName = "ResponsiveDiagram";