@lobehub/ui 1.165.8 → 1.166.1

package/es/Mermaid/Controls.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Controls: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export default Controls;

package/es/Mermaid/Controls.js

@@ -0,0 +1,49 @@
+import { AlignVerticalSpaceAroundIcon, MinusIcon, PlusIcon } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { useControls } from 'react-zoom-pan-pinch';
+import ActionIcon from "../ActionIcon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Controls = /*#__PURE__*/memo(function () {
+  var _useControls = useControls(),
+    zoomIn = _useControls.zoomIn,
+    zoomOut = _useControls.zoomOut,
+    resetTransform = _useControls.resetTransform;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    gap: 4,
+    horizontal: true,
+    style: {
+      bottom: 8,
+      position: 'absolute',
+      right: 8,
+      zIndex: 1
+    },
+    children: [/*#__PURE__*/_jsx(ActionIcon, {
+      active: true,
+      glass: true,
+      icon: PlusIcon,
+      onClick: function onClick() {
+        return zoomIn();
+      },
+      size: 'small'
+    }), /*#__PURE__*/_jsx(ActionIcon, {
+      active: true,
+      glass: true,
+      icon: MinusIcon,
+      onClick: function onClick() {
+        return zoomOut();
+      },
+      size: 'small'
+    }), /*#__PURE__*/_jsx(ActionIcon, {
+      active: true,
+      glass: true,
+      icon: AlignVerticalSpaceAroundIcon,
+      onClick: function onClick() {
+        return resetTransform();
+      },
+      size: 'small'
+    })]
+  });
+});
+export default Controls;

package/es/Mermaid/FullFeatured.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 import { MermaidProps } from './type';
-export declare const MermaidFullFeatured: import("react").NamedExoticComponent<Omit<MermaidProps, "children"> & {
+export interface MermaidFullFeaturedProps extends Omit<MermaidProps, 'children'> {
     children: ReactNode;
     content: string;
-}>;
+}
+export declare const MermaidFullFeatured: import("react").NamedExoticComponent<MermaidFullFeaturedProps>;
 export default MermaidFullFeatured;

package/es/Mermaid/FullFeatured.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["showLanguage", "content", "children", "className", "copyable", "actionsRender", "style"];
+var _excluded = ["showLanguage", "content", "children", "className", "copyable", "actionsRender", "style", "fileName"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -29,6 +29,8 @@ export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
     copyable = _ref.copyable,
     actionsRender = _ref.actionsRender,
     style = _ref.style,
+    _ref$fileName = _ref.fileName,
+    fileName = _ref$fileName === void 0 ? 'Mermaid' : _ref$fileName,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -79,9 +81,7 @@ export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
         gap: 2,
         horizontal: true,
         justify: 'center',
-        children: /*#__PURE__*/_jsx("span", {
-          children: "mermaid"
-        })
+        children: fileName
       }), /*#__PURE__*/_jsx(Flexbox, {
         align: 'center',
         flex: 'none',

package/es/Mermaid/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["children", "copyButtonSize", "fullFeatured", "copyable", "showLanguage", "style", "type", "className", "bodyRender", "actionsRender"];
+var _excluded = ["children", "copyButtonSize", "fullFeatured", "copyable", "showLanguage", "style", "type", "enablePanZoom", "className", "bodyRender", "actionsRender"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -28,6 +28,7 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
     style = _ref.style,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'block' : _ref$type,
+    enablePanZoom = _ref.enablePanZoom,
     className = _ref.className,
     bodyRender = _ref.bodyRender,
     actionsRender = _ref.actionsRender,
@@ -36,7 +37,9 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
     cx = _useStyles.cx,
     styles = _useStyles.styles;
   var tirmedChildren = children.trim();
-  var MermaidRender = useMermaid(tirmedChildren);
+  var MermaidRender = useMermaid(tirmedChildren, {
+    enablePanZoom: fullFeatured ? true : enablePanZoom
+  });
   var originalActions = copyable && /*#__PURE__*/_jsx(CopyButton, {
     content: children,
     placement: "left",
@@ -58,6 +61,7 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
     className: className,
     content: tirmedChildren,
     copyable: copyable,
+    enablePanZoom: enablePanZoom,
     showLanguage: showLanguage,
     style: style,
     type: type
@@ -76,9 +80,9 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
       gap: 4,
       horizontal: true,
       children: actions
-    }), showLanguage && /*#__PURE__*/_jsx(Tag, {
+    }), !enablePanZoom && showLanguage && /*#__PURE__*/_jsx(Tag, {
       className: styles.lang,
-      children: "mermaid"
+      children: "Mermaid"
     }), /*#__PURE__*/_jsx("div", {
       className: styles.scroller,
       children: body

package/es/Mermaid/type.d.ts

@@ -15,6 +15,8 @@ export interface MermaidProps extends DivProps {
     children: string;
     copyButtonSize?: CopyButtonProps['size'];
     copyable?: boolean;
+    enablePanZoom?: boolean;
+    fileName?: string;
     fullFeatured?: boolean;
     showLanguage?: boolean;
     type?: 'ghost' | 'block' | 'pure';

package/es/Mermaid/useMermaid.d.ts

@@ -1 +1,3 @@
-export declare const useMermaid: (content: string) => () => import("react/jsx-runtime").JSX.Element;
+export declare const useMermaid: (content: string, { enablePanZoom }?: {
+    enablePanZoom?: boolean | undefined;
+}) => () => import("react/jsx-runtime").JSX.Element;

package/es/Mermaid/useMermaid.js

@@ -11,8 +11,14 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useTheme } from 'antd-style';
 import mermaid from 'mermaid';
 import { useCallback, useEffect, useState } from 'react';
+import { Center } from 'react-layout-kit';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
+import Controls from "./Controls";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export var useMermaid = function useMermaid(content) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    enablePanZoom = _ref.enablePanZoom;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     mermaidContent = _useState2[0],
@@ -26,23 +32,36 @@ export var useMermaid = function useMermaid(content) {
       },
       securityLevel: 'loose',
       startOnLoad: true,
-      theme: theme.isDarkMode ? 'dark' : 'default',
+      theme: theme.isDarkMode ? 'dark' : 'neutral',
       themeVariables: {
-        errorBkgColor: theme.colorError,
-        errorTextColor: theme.colorText,
+        errorBkgColor: theme.colorTextDescription,
+        errorTextColor: theme.colorTextDescription,
+        fontFamily: theme.fontFamily,
         fontSize: 14,
-        lineColor: theme.colorText,
-        primaryBorderColor: theme.colorPrimaryBorder,
-        primaryColor: theme.colorPrimaryBg,
+        lineColor: theme.colorTextSecondary,
+        mainBkg: theme.colorBgContainer,
+        noteBkgColor: theme.colorInfoBg,
+        noteTextColor: theme.colorInfoText,
+        pie1: theme.geekblue,
+        pie2: theme.colorWarning,
+        pie3: theme.colorSuccess,
+        pie4: theme.colorError,
+        primaryBorderColor: theme.colorBorder,
+        primaryColor: theme.colorBgContainer,
         primaryTextColor: theme.colorText,
-        secondaryColor: theme.colorInfo,
-        tertiaryColor: theme.colorSuccess
+        secondaryBorderColor: theme.colorInfoBorder,
+        secondaryColor: theme.colorInfoBg,
+        secondaryTextColor: theme.colorInfoText,
+        tertiaryBorderColor: theme.colorSuccessBorder,
+        tertiaryColor: theme.colorSuccessBg,
+        tertiaryTextColor: theme.colorSuccessText,
+        textColor: theme.colorText
       }
     });
     mermaid.contentLoaded();
   }, [mermaidContent, theme.isDarkMode]);
   var checkSyntax = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(textStr) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(textStr) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -68,23 +87,33 @@ export var useMermaid = function useMermaid(content) {
       }, _callee, null, [[0, 7]]);
     }));
     return function checkSyntax(_x) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
   useEffect(function () {
     checkSyntax(content);
   }, [content]);
   return useCallback(function () {
-    return /*#__PURE__*/_jsx("pre", {
+    if (enablePanZoom) {
+      return /*#__PURE__*/_jsxs(TransformWrapper, {
+        children: [/*#__PURE__*/_jsx(Controls, {}), /*#__PURE__*/_jsx(TransformComponent, {
+          contentClass: 'mermaid',
+          contentStyle: {
+            padding: 16
+          },
+          wrapperStyle: {
+            minHeight: 240,
+            width: '100%'
+          },
+          children: mermaidContent
+        })]
+      });
+    }
+    return /*#__PURE__*/_jsx(Center, {
+      as: 'pre',
       className: 'mermaid',
-      style: {
-        alignItems: 'center',
-        display: 'flex',
-        fontSize: 14,
-        justifyContent: 'center',
-        overflow: 'auto'
-      },
+      padding: 16,
       children: mermaidContent
     });
-  }, [mermaidContent, theme.isDarkMode]);
+  }, [mermaidContent, theme.isDarkMode, enablePanZoom]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.165.8",
+  "version": "1.166.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -84,6 +84,7 @@
     "react-markdown": "^9.1.0",
     "react-merge-refs": "^2.1.1",
     "react-rnd": "^10.5.2",
+    "react-zoom-pan-pinch": "^3.7.0",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",