dishui 0.0.46 → 0.0.48

package/dist/components/pro/Flow/panels/FlowToolbar.js

@@ -1,274 +1,351 @@
-import eo from "../../../Button/index.js";
-import { useFlowContext as to } from "../context/FlowContext.js";
-import { useFlowUI as no } from "../context/FlowUIContext.js";
-import { downloadDataURL as co, useFlowImportExport as lo } from "../hooks/useFlowImportExport.js";
+import no from "../../../Button/index.js";
+import { useFlowContext as lo } from "../context/FlowContext.js";
+import { useFlowUI as V } from "../context/FlowUIContext.js";
+import co from "./ProjectTitle.js";
+import { downloadDataURL as E, safeFileBaseName as T, useFlowImportExport as ro } from "../hooks/useFlowImportExport.js";
 import { useLayoutActions as so } from "../hooks/useLayoutActions.js";
-import { IconAlign as t, IconAnchorVisible as ro, IconAutoFocus as ao, IconBack as ho, IconExport as po, IconExportImage as mo, IconFitView as uo, IconGeoGroup as wo, IconGrid as fo, IconGroup as ko, IconImport as Io, IconInspector as vo, IconJson as Co, IconMiniMap as bo, IconOutline as No, IconPresent as So, IconPublish as zo, IconRedo as Ao, IconShapes as Oo, IconUndo as yo, IconUngroup as xo, IconZoomIn as Fo, IconZoomOut as go } from "./toolbarIcons.js";
-import { useCallback as b, useRef as Jo } from "react";
-import { Fragment as N, jsx as o, jsxs as d } from "react/jsx-runtime";
-function i({ tip: a, shortcut: h, onClick: u, active: f, disabled: k, children: p }) {
-  const l = h ? `${a} (${h})` : a;
-  return /* @__PURE__ */ d("span", {
+import { IconAI as ao, IconAlign as d, IconAnchorVisible as ho, IconAutoFocus as po, IconBack as mo, IconExportJson as uo, IconExportMarkdown as ko, IconExportPdf as wo, IconExportPng as fo, IconFitView as Io, IconGeoGroup as bo, IconGrid as vo, IconGroup as Co, IconImport as No, IconInspector as go, IconJson as Ao, IconLayer as v, IconMiniMap as xo, IconOutline as Oo, IconPresent as So, IconPublish as zo, IconRedo as yo, IconShapes as Fo, IconUndo as Mo, IconUngroup as jo, IconZoomIn as Ro, IconZoomOut as Jo } from "./toolbarIcons.js";
+import { useCallback as C, useRef as Lo } from "react";
+import { Fragment as N, jsx as o, jsxs as e } from "react/jsx-runtime";
+function Do() {
+  const { viewport: n, setViewport: l, autoFocus: r, setAutoFocus: u } = V(), k = Math.round(n.zoom * 100);
+  return /* @__PURE__ */ e("div", {
+    className: "flow-zoom-controls",
+    children: [
+      /* @__PURE__ */ o(i, {
+        tip: "缩小",
+        onClick: () => {
+          l({
+            ...n,
+            zoom: Math.max(0.1, n.zoom / 1.2)
+          });
+        },
+        children: /* @__PURE__ */ o(Jo, {})
+      }),
+      /* @__PURE__ */ e("span", {
+        className: "flow-zoom-info",
+        children: [k, "%"]
+      }),
+      /* @__PURE__ */ o(i, {
+        tip: "放大",
+        onClick: () => {
+          l({
+            ...n,
+            zoom: Math.min(4, n.zoom * 1.2)
+          });
+        },
+        children: /* @__PURE__ */ o(Ro, {})
+      }),
+      /* @__PURE__ */ o(i, {
+        tip: "适应视图",
+        onClick: () => {
+          l({
+            x: 0,
+            y: 0,
+            zoom: 1
+          });
+        },
+        children: /* @__PURE__ */ o(Io, {})
+      }),
+      /* @__PURE__ */ o(i, {
+        tip: r ? "关闭 Auto Focus" : "开启 Auto Focus",
+        active: r,
+        onClick: () => u(!r),
+        children: /* @__PURE__ */ o(po, {})
+      })
+    ]
+  });
+}
+function i({ tip: n, shortcut: l, onClick: r, active: u, disabled: k, children: p }) {
+  const a = l ? `${n} (${l})` : n;
+  return /* @__PURE__ */ e("span", {
     className: "flow-tip",
-    children: [/* @__PURE__ */ o(eo, {
+    children: [/* @__PURE__ */ o(no, {
       size: "xs",
-      variant: f ? "primary" : "ghost",
-      onClick: u,
+      variant: u ? "primary" : "ghost",
+      onClick: r,
       disabled: k,
       square: !0,
       children: /* @__PURE__ */ o("span", {
-        "aria-label": l,
+        "aria-label": a,
         style: { display: "inline-flex" },
         children: p
       })
     }), /* @__PURE__ */ o("span", {
       className: "flow-tip-label",
       role: "tooltip",
-      children: l
+      children: a
     })]
   });
 }
-function Vo({ onBack: a, onUndo: h, onRedo: u, canUndo: f, canRedo: k, onGroup: p, onGeoGroup: l, onUngroup: I, onExportPNG: S, onPublish: z }) {
-  const { viewport: m, setViewport: v, autoFocus: C, setAutoFocus: P, showGrid: A, setShowGrid: U, showPalette: O, setShowPalette: T, showInspector: y, setShowInspector: V, showOutline: x, setShowOutline: B, showJson: F, setShowJson: E, showMiniMap: g, setShowMiniMap: $, showAnchors: w, setShowAnchors: D, presentation: J, setPresentation: q } = no(), { doc: W, selection: n, currentCanvas: H } = to(), { exportJSON: j, importJSON: M } = lo(), { align: s, distribute: R } = so(), Z = Jo(null), G = n.nodeIds.size + n.lineIds.size, K = n.nodeIds.size > 0 && H.nodes.some((e) => n.nodeIds.has(e.id) && (e.type === "flowGroup" || e.type === "geometryGroup" || e.data.isGroup)), L = Object.values(W.canvases).some((e) => e.nodes.some((r) => r.type === "animAnchor")), Q = Math.round(m.zoom * 100), X = () => {
-    const e = Math.min(4, m.zoom * 1.2);
-    v({
-      ...m,
-      zoom: e
-    });
-  }, Y = () => {
-    const e = Math.max(0.1, m.zoom / 1.2);
-    v({
-      ...m,
-      zoom: e
-    });
-  }, _ = () => {
-    v({
-      x: 0,
-      y: 0,
-      zoom: 1
-    });
-  }, oo = b(() => {
-    const e = j(), r = new Blob([e], { type: "application/json" }), c = URL.createObjectURL(r);
-    co(c, `flowchart-${Date.now()}.json`), URL.revokeObjectURL(c);
-  }, [j]), io = b(() => {
-    Z.current?.click();
+function Wo({ onBack: n, onUndo: l, onRedo: r, canUndo: u, canRedo: k, onGroup: p, onGeoGroup: a, onUngroup: f, onExportPNG: x, onExportPDF: O, onPublish: S }) {
+  const { showGrid: z, setShowGrid: $, showPalette: y, setShowPalette: q, showInspector: F, setShowInspector: D, showOutline: M, setShowOutline: W, showJson: j, setShowJson: H, showAI: R, setShowAI: K, showMiniMap: J, setShowMiniMap: Q, showAnchors: I, setShowAnchors: X, presentation: L, setPresentation: Y } = V(), { doc: w, selection: h, currentCanvas: _ } = lo(), { exportJSON: Z, importJSON: P, exportMarkdown: U } = ro(), { align: m, distribute: G, changeZIndex: b } = so(), B = Lo(null), g = h.nodeIds.size + h.lineIds.size, oo = h.nodeIds.size > 0 && _.nodes.some((t) => h.nodeIds.has(t.id) && (t.type === "flowGroup" || t.type === "geometryGroup" || t.data.isGroup)), A = Object.values(w.canvases).some((t) => t.nodes.some((s) => s.type === "animAnchor")), io = C(() => {
+    const t = Z(), s = new Blob([t], { type: "application/json" }), c = URL.createObjectURL(s);
+    E(c, `${T(w.title)}.json`), URL.revokeObjectURL(c);
+  }, [Z, w.title]), eo = C(() => {
+    const t = U(), s = new Blob([t], { type: "text/markdown" }), c = URL.createObjectURL(s);
+    E(c, `${T(w.title)}.md`), URL.revokeObjectURL(c);
+  }, [U, w.title]), to = C(() => {
+    B.current?.click();
   }, []);
-  return /* @__PURE__ */ d("div", {
+  return /* @__PURE__ */ e("div", {
     className: "flow-toolbar",
     children: [
       /* @__PURE__ */ o("input", {
-        ref: Z,
+        ref: B,
         type: "file",
         accept: ".json",
         style: { display: "none" },
-        onChange: b((e) => {
-          const r = e.target.files?.[0];
-          if (!r) return;
+        onChange: C((t) => {
+          const s = t.target.files?.[0];
+          if (!s) return;
           const c = new FileReader();
           c.onload = () => {
-            typeof c.result == "string" && M(c.result);
-          }, c.readAsText(r), e.target.value = "";
-        }, [M])
+            typeof c.result == "string" && P(c.result);
+          }, c.readAsText(s), t.target.value = "";
+        }, [P])
       }),
-      a && /* @__PURE__ */ d(N, { children: [/* @__PURE__ */ o(i, {
-        tip: "返回列表",
-        onClick: a,
-        children: /* @__PURE__ */ o(ho, {})
+      /* @__PURE__ */ o(co, {}),
+      n && /* @__PURE__ */ e(N, { children: [/* @__PURE__ */ o("div", {
+        className: "flow-toolbar-group",
+        children: /* @__PURE__ */ o(i, {
+          tip: "返回列表",
+          onClick: n,
+          children: /* @__PURE__ */ o(mo, {})
+        })
       }), /* @__PURE__ */ o("div", { className: "flow-toolbar-divider" })] }),
-      h && /* @__PURE__ */ o(i, {
-        tip: "撤销",
-        shortcut: "Ctrl+Z",
-        onClick: h,
-        disabled: !f,
-        children: /* @__PURE__ */ o(yo, {})
-      }),
-      u && /* @__PURE__ */ o(i, {
-        tip: "重做",
-        shortcut: "Ctrl+Shift+Z",
-        onClick: u,
-        disabled: !k,
-        children: /* @__PURE__ */ o(Ao, {})
-      }),
-      (p || l || I) && /* @__PURE__ */ d(N, { children: [
-        /* @__PURE__ */ o("div", { className: "flow-toolbar-divider" }),
-        p && /* @__PURE__ */ o(i, {
-          tip: "成组",
-          shortcut: "⌘G",
-          onClick: p,
-          disabled: G < 2,
-          children: /* @__PURE__ */ o(ko, {})
-        }),
-        l && /* @__PURE__ */ o(i, {
-          tip: "几何分组",
-          shortcut: "⌘⌥G",
+      (l || r) && /* @__PURE__ */ e("div", {
+        className: "flow-toolbar-group",
+        children: [l && /* @__PURE__ */ o(i, {
+          tip: "撤销",
+          shortcut: "Ctrl+Z",
           onClick: l,
-          disabled: G < 2,
-          children: /* @__PURE__ */ o(wo, {})
-        }),
-        I && /* @__PURE__ */ o(i, {
-          tip: "取消成组",
-          shortcut: "⌘⇧G",
-          onClick: I,
-          disabled: !K,
-          children: /* @__PURE__ */ o(xo, {})
-        })
-      ] }),
-      n.nodeIds.size >= 2 && /* @__PURE__ */ d(N, { children: [
-        /* @__PURE__ */ o("div", { className: "flow-toolbar-divider" }),
-        /* @__PURE__ */ o(i, {
-          tip: "居左",
-          onClick: () => s("left"),
-          children: /* @__PURE__ */ o(t, { kind: "left" })
-        }),
-        /* @__PURE__ */ o(i, {
-          tip: "水平居中",
-          onClick: () => s("center-h"),
-          children: /* @__PURE__ */ o(t, { kind: "center-h" })
-        }),
-        /* @__PURE__ */ o(i, {
-          tip: "居右",
-          onClick: () => s("right"),
-          children: /* @__PURE__ */ o(t, { kind: "right" })
-        }),
-        /* @__PURE__ */ o(i, {
-          tip: "居上",
-          onClick: () => s("top"),
-          children: /* @__PURE__ */ o(t, { kind: "top" })
-        }),
-        /* @__PURE__ */ o(i, {
-          tip: "垂直居中",
-          onClick: () => s("center-v"),
-          children: /* @__PURE__ */ o(t, { kind: "center-v" })
-        }),
-        /* @__PURE__ */ o(i, {
-          tip: "居下",
-          onClick: () => s("bottom"),
-          children: /* @__PURE__ */ o(t, { kind: "bottom" })
-        }),
-        /* @__PURE__ */ o(i, {
-          tip: "水平平分",
-          onClick: () => R("horizontal"),
-          disabled: n.nodeIds.size < 3,
-          children: /* @__PURE__ */ o(t, { kind: "distribute-h" })
-        }),
-        /* @__PURE__ */ o(i, {
-          tip: "垂直平分",
-          onClick: () => R("vertical"),
-          disabled: n.nodeIds.size < 3,
-          children: /* @__PURE__ */ o(t, { kind: "distribute-v" })
-        })
-      ] }),
-      /* @__PURE__ */ o("div", { className: "flow-toolbar-divider" }),
-      /* @__PURE__ */ o(i, {
-        tip: "缩小",
-        onClick: Y,
-        children: /* @__PURE__ */ o(go, {})
-      }),
-      /* @__PURE__ */ d("span", {
-        className: "flow-zoom-info",
-        children: [Q, "%"]
-      }),
-      /* @__PURE__ */ o(i, {
-        tip: "放大",
-        onClick: X,
-        children: /* @__PURE__ */ o(Fo, {})
-      }),
-      /* @__PURE__ */ o(i, {
-        tip: "适应视图",
-        onClick: _,
-        children: /* @__PURE__ */ o(uo, {})
-      }),
-      /* @__PURE__ */ o(i, {
-        tip: C ? "关闭 Auto Focus" : "开启 Auto Focus",
-        active: C,
-        onClick: () => P(!C),
-        children: /* @__PURE__ */ o(ao, {})
-      }),
-      /* @__PURE__ */ o("div", { className: "flow-toolbar-divider" }),
-      /* @__PURE__ */ o(i, {
-        tip: "形状面板",
-        active: O,
-        onClick: () => T(!O),
-        children: /* @__PURE__ */ o(Oo, {})
-      }),
-      /* @__PURE__ */ o(i, {
-        tip: "属性面板",
-        active: y,
-        onClick: () => V(!y),
-        children: /* @__PURE__ */ o(vo, {})
-      }),
-      /* @__PURE__ */ o(i, {
-        tip: "大纲",
-        active: x,
-        onClick: () => B(!x),
-        children: /* @__PURE__ */ o(No, {})
-      }),
-      /* @__PURE__ */ o(i, {
-        tip: "JSON",
-        active: F,
-        onClick: () => E(!F),
-        children: /* @__PURE__ */ o(Co, {})
+          disabled: !u,
+          children: /* @__PURE__ */ o(Mo, {})
+        }), r && /* @__PURE__ */ o(i, {
+          tip: "重做",
+          shortcut: "Ctrl+Shift+Z",
+          onClick: r,
+          disabled: !k,
+          children: /* @__PURE__ */ o(yo, {})
+        })]
       }),
+      h.nodeIds.size >= 2 && /* @__PURE__ */ e(N, { children: [/* @__PURE__ */ o("div", { className: "flow-toolbar-divider" }), /* @__PURE__ */ e("div", {
+        className: "flow-toolbar-group",
+        children: [
+          /* @__PURE__ */ o(i, {
+            tip: "居左",
+            onClick: () => m("left"),
+            children: /* @__PURE__ */ o(d, { kind: "left" })
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "水平居中",
+            onClick: () => m("center-h"),
+            children: /* @__PURE__ */ o(d, { kind: "center-h" })
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "居右",
+            onClick: () => m("right"),
+            children: /* @__PURE__ */ o(d, { kind: "right" })
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "居上",
+            onClick: () => m("top"),
+            children: /* @__PURE__ */ o(d, { kind: "top" })
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "垂直居中",
+            onClick: () => m("center-v"),
+            children: /* @__PURE__ */ o(d, { kind: "center-v" })
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "居下",
+            onClick: () => m("bottom"),
+            children: /* @__PURE__ */ o(d, { kind: "bottom" })
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "水平平分",
+            onClick: () => G("horizontal"),
+            disabled: h.nodeIds.size < 3,
+            children: /* @__PURE__ */ o(d, { kind: "distribute-h" })
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "垂直平分",
+            onClick: () => G("vertical"),
+            disabled: h.nodeIds.size < 3,
+            children: /* @__PURE__ */ o(d, { kind: "distribute-v" })
+          })
+        ]
+      })] }),
+      g >= 1 && /* @__PURE__ */ e(N, { children: [/* @__PURE__ */ o("div", { className: "flow-toolbar-divider" }), /* @__PURE__ */ e("div", {
+        className: "flow-toolbar-group",
+        children: [
+          /* @__PURE__ */ o(i, {
+            tip: "置于顶层",
+            onClick: () => b("front"),
+            children: /* @__PURE__ */ o(v, { kind: "front" })
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "上移一层",
+            onClick: () => b("up"),
+            children: /* @__PURE__ */ o(v, { kind: "up" })
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "下移一层",
+            onClick: () => b("down"),
+            children: /* @__PURE__ */ o(v, { kind: "down" })
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "置于底层",
+            onClick: () => b("back"),
+            children: /* @__PURE__ */ o(v, { kind: "back" })
+          })
+        ]
+      })] }),
+      (p || a || f) && /* @__PURE__ */ e(N, { children: [/* @__PURE__ */ o("div", { className: "flow-toolbar-divider" }), /* @__PURE__ */ e("div", {
+        className: "flow-toolbar-group",
+        children: [
+          p && /* @__PURE__ */ o(i, {
+            tip: "成组",
+            shortcut: "⌘G",
+            onClick: p,
+            disabled: g < 2,
+            children: /* @__PURE__ */ o(Co, {})
+          }),
+          a && /* @__PURE__ */ o(i, {
+            tip: "几何分组",
+            shortcut: "⌘⌥G",
+            onClick: a,
+            disabled: g < 2,
+            children: /* @__PURE__ */ o(bo, {})
+          }),
+          f && /* @__PURE__ */ o(i, {
+            tip: "取消成组",
+            shortcut: "⌘⇧G",
+            onClick: f,
+            disabled: !oo,
+            children: /* @__PURE__ */ o(jo, {})
+          })
+        ]
+      })] }),
       /* @__PURE__ */ o("div", { className: "flow-toolbar-divider" }),
-      /* @__PURE__ */ o(i, {
-        tip: "网格",
-        active: A,
-        onClick: () => U(!A),
-        children: /* @__PURE__ */ o(fo, {})
-      }),
-      /* @__PURE__ */ o(i, {
-        tip: "缩略图",
-        active: g,
-        onClick: () => $(!g),
-        children: /* @__PURE__ */ o(bo, {})
-      }),
-      /* @__PURE__ */ o(i, {
-        tip: w ? "隐藏所有 Anchor 对象" : "显示所有 Anchor 对象",
-        active: w,
-        disabled: !L,
-        onClick: () => {
-          L && D(!w);
-        },
-        children: /* @__PURE__ */ o(ro, { visible: w })
+      /* @__PURE__ */ e("div", {
+        className: "flow-toolbar-group",
+        children: [
+          /* @__PURE__ */ o(i, {
+            tip: "网格",
+            active: z,
+            onClick: () => $(!z),
+            children: /* @__PURE__ */ o(vo, {})
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "缩略图",
+            active: J,
+            onClick: () => Q(!J),
+            children: /* @__PURE__ */ o(xo, {})
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: I ? "隐藏所有 Anchor 对象" : "显示所有 Anchor 对象",
+            active: I,
+            disabled: !A,
+            onClick: () => {
+              A && X(!I);
+            },
+            children: /* @__PURE__ */ o(ho, { visible: I })
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "动画预览",
+            active: L !== null,
+            onClick: () => Y(L ? null : {
+              current: 0,
+              showAnchor: !1
+            }),
+            children: /* @__PURE__ */ o(So, {})
+          })
+        ]
       }),
       /* @__PURE__ */ o("div", { className: "flow-toolbar-divider" }),
-      /* @__PURE__ */ o(i, {
-        tip: "动画预览",
-        active: J !== null,
-        onClick: () => q(J ? null : {
-          current: 0,
-          showAnchor: !1
-        }),
-        children: /* @__PURE__ */ o(So, {})
+      /* @__PURE__ */ e("div", {
+        className: "flow-toolbar-group",
+        children: [
+          /* @__PURE__ */ o(i, {
+            tip: "形状面板",
+            active: y,
+            onClick: () => q(!y),
+            children: /* @__PURE__ */ o(Fo, {})
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "属性面板",
+            active: F,
+            onClick: () => D(!F),
+            children: /* @__PURE__ */ o(go, {})
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "大纲",
+            active: M,
+            onClick: () => W(!M),
+            children: /* @__PURE__ */ o(Oo, {})
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "JSON",
+            active: j,
+            onClick: () => H(!j),
+            children: /* @__PURE__ */ o(Ao, {})
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "AI 助手",
+            active: R,
+            onClick: () => K(!R),
+            children: /* @__PURE__ */ o(ao, {})
+          })
+        ]
       }),
       /* @__PURE__ */ o("div", { className: "flow-toolbar-divider" }),
-      /* @__PURE__ */ o(i, {
-        tip: "导入 JSON",
-        onClick: io,
-        children: /* @__PURE__ */ o(Io, {})
-      }),
-      /* @__PURE__ */ o(i, {
-        tip: "导出 JSON",
-        onClick: oo,
-        children: /* @__PURE__ */ o(po, {})
-      }),
-      S && /* @__PURE__ */ o(i, {
-        tip: "导出 PNG",
-        onClick: () => {
-          S();
-        },
-        children: /* @__PURE__ */ o(mo, {})
-      }),
-      z && /* @__PURE__ */ o(i, {
-        tip: "发布与共享",
-        onClick: z,
-        children: /* @__PURE__ */ o(zo, {})
+      /* @__PURE__ */ e("div", {
+        className: "flow-toolbar-group",
+        children: [
+          /* @__PURE__ */ o(i, {
+            tip: "导入 JSON",
+            onClick: to,
+            children: /* @__PURE__ */ o(No, {})
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "导出 JSON",
+            onClick: io,
+            children: /* @__PURE__ */ o(uo, {})
+          }),
+          /* @__PURE__ */ o(i, {
+            tip: "导出 Markdown",
+            onClick: eo,
+            children: /* @__PURE__ */ o(ko, {})
+          }),
+          x && /* @__PURE__ */ o(i, {
+            tip: "导出 PNG",
+            onClick: () => {
+              x();
+            },
+            children: /* @__PURE__ */ o(fo, {})
+          }),
+          O && A && /* @__PURE__ */ o(i, {
+            tip: "导出 PDF（按锦点顺序）",
+            onClick: () => {
+              O();
+            },
+            children: /* @__PURE__ */ o(wo, {})
+          }),
+          S && /* @__PURE__ */ o(i, {
+            tip: "发布与共享",
+            onClick: S,
+            children: /* @__PURE__ */ o(zo, {})
+          })
+        ]
       })
     ]
   });
 }
 export {
-  Vo as default
+  Do as FlowZoomControls,
+  Wo as default
 };
 
 //# sourceMappingURL=FlowToolbar.js.map