@glodon-aiot/dataset-annotation 3.9.0-beta.9 → 3.10.0-alpha.11

package/dist/es/components/VLMAnnotation/VLMLabelMaker/index.mjs

@@ -0,0 +1,507 @@
+var be = Object.defineProperty, Pe = Object.defineProperties;
+var Ue = Object.getOwnPropertyDescriptors;
+var de = Object.getOwnPropertySymbols;
+var Xe = Object.prototype.hasOwnProperty, We = Object.prototype.propertyIsEnumerable;
+var ge = (s, f, a) => f in s ? be(s, f, { enumerable: !0, configurable: !0, writable: !0, value: a }) : s[f] = a, q = (s, f) => {
+  for (var a in f || (f = {}))
+    Xe.call(f, a) && ge(s, a, f[a]);
+  if (de)
+    for (var a of de(f))
+      We.call(f, a) && ge(s, a, f[a]);
+  return s;
+}, he = (s, f) => Pe(s, Ue(f));
+import { jsxs as Re, jsx as M } from "react/jsx-runtime";
+import { useRef as g, useState as I, useCallback as _, useEffect as h } from "react";
+import { fabric as b } from "fabric";
+import { useKeyPress as P } from "ahooks";
+import Oe from "classnames";
+import "./style.less.mjs";
+import Fe from "../components/Toolbar.mjs";
+import { useOCRLoadingIcon as Ye } from "./hooks/useOCRLoadingIcon.mjs";
+import { useRegionNameText as je } from "./hooks/useRegionNameText.mjs";
+import { useCropRegionImage as ye } from "./hooks/useCropRegionImage.mjs";
+import { useDrawingMode as ze } from "./hooks/useDrawingMode.mjs";
+import { useRegionLoader as He } from "./hooks/useRegionLoader.mjs";
+import { useCanvasSetup as Ze } from "./hooks/useCanvasSetup.mjs";
+import { useTextLayouts as Ke } from "./hooks/useTextLayouts.mjs";
+import { useRegionUpdate as $e } from "./hooks/useRegionUpdate.mjs";
+import { useCanvasDrag as Be } from "./hooks/useCanvasDrag.mjs";
+import { useRegionSelection as Ge } from "./hooks/useRegionSelection.mjs";
+import { useOCRRecognition as qe } from "./hooks/useOCRRecognition.mjs";
+import { useDeleteRegion as Je } from "./hooks/useDeleteRegion.mjs";
+import { useDeleteControl as Qe } from "./hooks/useDeleteControl.mjs";
+import { useCanvasZoom as Ve } from "./hooks/useCanvasZoom.mjs";
+import { useRegionHover as et } from "./hooks/useRegionHover.mjs";
+import { canvasToImageCoords as tt, imageToCanvasCoords as ot } from "./utils/coordinateUtils.mjs";
+import { REGION_NAME_PREFIX as rt, DEFAULT_REGION_NAME as nt, ZOOM_PRECISION_ERROR as st, TEXT_LAYOUT_RECT_FILL_COLOR as it, TEXT_LAYOUT_RECT_STROKE_COLOR as ct, TRANSPARENT_FILL as at, BASE_STROKE_WIDTH as ft } from "../constants.mjs";
+const Wt = ({
+  sample: s,
+  labelDefinitions: f,
+  labels: a,
+  onImageLoad: pe,
+  onChange: A,
+  onRegionSelect: J,
+  onRegionChange: H,
+  ocrRecognize: ve,
+  activeLabelValue: E,
+  onClearActive: Z,
+  selectedRegion: Q,
+  onAppendTextToActive: Ee,
+  readOnly: c
+}) => {
+  var ue, me;
+  const V = g(null), p = g(null), [Te, Ce] = I(!0), [e, Ne] = I(), [S, Ie] = I(), [R, ee] = I(1), [v, L] = I(c || !1), [T, k] = I(!1), [K, Ae] = I({
+    left: 0,
+    top: 0
+  }), U = g({
+    left: 0,
+    top: 0
+  }), ke = g({
+    width: 0,
+    height: 0
+  }), u = g(/* @__PURE__ */ new Map()), te = g(null), oe = g(void 0), re = g(!1), ne = g(!1), X = g({
+    width: 0,
+    height: 0
+  }), se = g(!1), {
+    updateOCRLoadingIcon: we,
+    ocrLoadingIconMapRef: w
+  } = Ye(e), {
+    updateRegionNameText: W,
+    regionNameTextMapRef: C
+  } = je(e), ie = ye(s == null ? void 0 : s.fileUrl), xe = _((o) => {
+    e && (C.current.forEach((t, r) => {
+      const n = r.left || 0, i = r.top || 0;
+      t.set({
+        left: n,
+        // 与标注框左边对齐
+        top: i,
+        // 下边缘与标注框上边缘对齐（因为 originY 是 'bottom'）
+        scaleX: 1 / o,
+        // 反向缩放，抵消画布缩放
+        scaleY: 1 / o
+        // 反向缩放，抵消画布缩放
+      });
+    }), e.renderAll());
+  }, [e]), {
+    updateCanvas: D
+  } = Ze({
+    sample: s,
+    image: S,
+    onImageLoad: pe,
+    canvasRef: V,
+    containerRef: p,
+    canvasInitializedRef: re,
+    bgImagePositionRef: U,
+    bgImageSizeRef: ke,
+    rectMapRef: u,
+    updateTextLayersRef: te,
+    onRectPositionUpdated: xe,
+    setCanvas: Ne,
+    setImage: Ie,
+    setScale: ee,
+    setBgImagePosition: Ae,
+    setLoading: Ce
+  }), Me = _(() => {
+    const o = Array.from(u.current.values());
+    o.forEach((t, r) => {
+      t.name = `${rt}${r + 1}`;
+    }), u.current.forEach((t, r) => {
+      const n = C.current.get(r);
+      n && (n.set("text", t.name || nt), e == null || e.renderAll());
+    }), A && A(o);
+  }, [A, e]), {
+    zoom: Se
+  } = Ve({
+    canvas: e,
+    setScale: ee,
+    isZoomingRef: se
+  }), O = _(
+    (o, t) => tt(o, t, e, S, U),
+    [e, S, K]
+    // 添加 bgImagePosition 作为依赖，确保在图片位置更新后函数能正确工作
+  ), $ = _(
+    (o, t) => ot(o, t, e, U),
+    [e, K]
+    // 添加 bgImagePosition 作为依赖，确保在图片位置更新后函数能正确工作
+  ), {
+    updateTextLayers: F,
+    textLayersMapRef: l,
+    textLayoutContentMapRef: Y
+  } = Ke({
+    canvas: e,
+    imageToCanvasCoords: $,
+    activeLabelValue: E,
+    onAppendTextToActive: Ee
+  });
+  te.current = F;
+  const {
+    performOCRIfNeeded: ce,
+    ocrRecognizingRef: ut
+  } = qe({
+    ocrRecognize: ve,
+    onChange: A,
+    updateTextLayers: F,
+    canvas: e,
+    updateOCRLoadingIcon: we,
+    rectMapRef: u,
+    textLayersMapRef: l,
+    textLayoutContentMapRef: Y
+  }), {
+    updateRegionShapeAndImage: ae
+  } = $e({
+    canvas: e,
+    image: S,
+    draggable: v,
+    canvasToImageCoords: O,
+    imageToCanvasCoords: $,
+    cropRegionImage: ie,
+    onChange: A,
+    onRegionChange: H,
+    performOCRIfNeeded: ce,
+    updateTextLayers: F,
+    rectMapRef: u,
+    regionNameTextMapRef: C,
+    ocrLoadingIconMapRef: w
+  });
+  h(() => {
+    D();
+  }, [D]), h(() => {
+    e && (l.current.forEach((o) => {
+      o.forEach((t) => {
+        t.off("mousedown"), t.off("mouseover"), t.off("mouseout"), e.remove(t), Y.current.delete(t);
+      });
+    }), l.current.clear(), C.current.forEach((o) => {
+      e.remove(o);
+    }), C.current.clear(), w.current.forEach((o) => {
+      e.remove(o);
+    }), w.current.clear(), u.current.forEach((o, t) => {
+      t.off("modified"), t.off("moved"), e.remove(t);
+    }), u.current.clear(), ne.current = !1, oe.current = void 0, e.renderAll());
+  }, [e, s == null ? void 0 : s.id]), h(() => {
+    if (!p.current)
+      return;
+    X.current = {
+      width: p.current.offsetWidth,
+      height: p.current.offsetHeight
+    };
+    const o = new ResizeObserver(() => {
+      if (!p.current || se.current)
+        return;
+      if (e) {
+        const d = e.getZoom();
+        if (Math.abs(d - R) > st)
+          return;
+      }
+      const t = p.current.offsetWidth, r = p.current.offsetHeight, n = X.current.width, i = X.current.height;
+      (t !== n || r !== i) && (X.current = {
+        width: t,
+        height: r
+      }, D());
+    });
+    return o.observe(p.current), () => {
+      o.disconnect();
+    };
+  }, [D, e, R]), P("ctrl", () => {
+    c || (T && (k(!1), j()), L(!0));
+  }, {
+    events: ["keydown"]
+  }), P("ctrl", () => {
+    c || L(!1);
+  }, {
+    events: ["keyup"]
+  }), h(() => {
+    if (!e)
+      return;
+    const o = ft / R, t = /* @__PURE__ */ new Set();
+    l.current.forEach((r) => {
+      r.forEach((n) => {
+        t.add(n);
+      });
+    }), e.getObjects().forEach((r) => {
+      r instanceof b.Rect && !t.has(r) && r.set({
+        strokeWidth: o,
+        strokeUniform: !0,
+        objectCaching: !1,
+        // 禁用缓存，避免缩放时边框变虚
+        statefullCache: !1,
+        noScaleCache: !1
+      });
+    }), l.current.forEach((r) => {
+      r.forEach((n) => {
+        n.set({
+          fill: it,
+          // 确保填充色被保留
+          stroke: ct,
+          // 确保边框色被保留
+          strokeWidth: o,
+          // 根据缩放调整边框宽度，保持视觉一致
+          strokeUniform: !0,
+          // 确保边框宽度随缩放调整
+          objectCaching: !1,
+          statefullCache: !1,
+          noScaleCache: !1
+        });
+      });
+    }), C.current.forEach((r, n) => {
+      const i = n.left || 0, d = n.top || 0;
+      r.set({
+        left: i,
+        // 与标注框左边对齐
+        top: d,
+        // 下边缘与标注框上边缘对齐（因为 originY 是 'bottom'）
+        scaleX: 1 / R,
+        // 反向缩放，抵消画布缩放
+        scaleY: 1 / R
+        // 反向缩放，抵消画布缩放
+      });
+      const m = w.current.get(n);
+      if (m) {
+        const N = n.getScaledWidth();
+        n.getScaledHeight(), m.set({
+          left: i,
+          // top 位置由动画控制，这里不更新
+          scaleX: 1 / R,
+          // 反向缩放，抵消画布缩放，保持固定视觉粗细
+          scaleY: 1 / R
+          // 反向缩放，抵消画布缩放，保持固定视觉粗细
+        });
+        const x = m.getObjects();
+        if (x && x.length > 0) {
+          const y = N * R;
+          x.forEach((z) => {
+            z instanceof b.Rect && z.set("width", y);
+          });
+        }
+      }
+    }), e.renderAll();
+  }, [e, R]), Be({
+    canvas: e,
+    draggable: v,
+    drawingMode: T
+  });
+  const {
+    performDelete: B
+  } = Je({
+    canvas: e,
+    onRegionChange: H,
+    updateRegionNames: Me,
+    rectMapRef: u,
+    textLayersMapRef: l,
+    textLayoutContentMapRef: Y,
+    regionNameTextMapRef: C,
+    ocrLoadingIconMapRef: w
+  }), {
+    createDeleteControl: G
+  } = Qe({
+    performDelete: B
+  });
+  Ge({
+    canvas: e,
+    onRegionSelect: J,
+    createDeleteControl: G,
+    textLayersMapRef: l,
+    rectMapRef: u
+  });
+  const {
+    stopDraw: j
+  } = ze({
+    canvas: e,
+    drawingMode: T,
+    draggable: v,
+    setDrawingMode: k,
+    canvasToImageCoords: O,
+    labelDefinitions: f,
+    onChange: A,
+    cropRegionImage: ie,
+    updateRegionShapeAndImage: ae,
+    performOCRIfNeeded: ce,
+    createDeleteControl: G,
+    updateRegionNameText: W,
+    onRegionChange: H,
+    onRegionSelect: J,
+    rectMapRef: u
+  });
+  h(() => {
+    c && (L(!0), k(!1), j());
+  }, [c, j]), h(() => {
+    if (!e)
+      return;
+    const o = () => {
+      e.getObjects().forEach((t) => {
+        t instanceof b.Rect && t.selectable && (t.set({
+          lockMovementX: c,
+          lockMovementY: c,
+          lockScalingX: c,
+          lockScalingY: c,
+          hasControls: !c
+          // 在只读模式下，如果有 activeLabelValue，我们可能希望它保持选中状态
+          // 但不允许用户通过点击来取消选中或选中其他（这个由 canvas.selection 控制）
+        }), c && t.controls);
+      }), e.requestRenderAll();
+    };
+    return o(), e.on("object:added", o), () => {
+      e.off("object:added", o);
+    };
+  }, [e, c]), He({
+    canvas: e,
+    sample: s,
+    image: S,
+    bgImagePosition: K,
+    canvasInitializedRef: re,
+    bgImagePositionRef: U,
+    sampleRef: oe,
+    labelsLoadedRef: ne,
+    rectMapRef: u,
+    textLayersMapRef: l,
+    textLayoutContentMapRef: Y,
+    regionNameTextMapRef: C,
+    ocrLoadingIconMapRef: w,
+    imageToCanvasCoords: $,
+    updateRegionShapeAndImage: ae,
+    createDeleteControl: G,
+    updateRegionNameText: W,
+    updateTextLayers: F
+  }), h(() => {
+    if (!a || a.length === 0)
+      return;
+    let o = !1;
+    u.current.forEach((t, r) => {
+      var d, m;
+      const n = a.find((N) => N.id === t.id);
+      if (!n)
+        return;
+      const i = he(q(q({}, t), n), {
+        // Keep shape from canvas to avoid desync
+        shape: t.shape,
+        image: (d = n.image) != null ? d : t.image,
+        textLayouts: (m = n.textLayouts) != null ? m : t.textLayouts
+      });
+      (i.name !== t.name || i.content !== t.content || i.image !== t.image || i.textLayouts !== t.textLayouts) && (u.current.set(r, i), i.name !== t.name && W(r, i), o = !0);
+    }), o && (e == null || e.renderAll());
+  }, [a, e, W]), et({
+    canvas: e,
+    drawingMode: T,
+    draggable: v,
+    textLayersMapRef: l
+  }), h(() => {
+    if (e && Q === null) {
+      const o = /* @__PURE__ */ new Set();
+      l.current.forEach((r) => {
+        r.forEach((n) => {
+          o.add(n);
+        });
+      }), e.getObjects().forEach((r) => {
+        r instanceof b.Rect && !o.has(r) && r.set({
+          fill: at
+          // 移除填充色
+        });
+      }), e.getActiveObject() && (e.discardActiveObject(), e.renderAll());
+    }
+  }, [e, Q]), h(() => {
+    var r;
+    if (!e)
+      return;
+    const o = (r = E == null ? void 0 : E.region) == null ? void 0 : r.id;
+    let t = !1;
+    l.current.forEach((n, i) => {
+      const d = u.current.get(i);
+      if (d && n.length > 0) {
+        const m = o === d.id;
+        n.forEach((N) => {
+          N.visible !== m && (N.set({
+            visible: m
+          }), t = !0);
+        });
+      }
+    }), t && e.renderAll();
+  }, [e, E]), h(() => {
+    if (!e || !E || !Z)
+      return;
+    const o = (t) => {
+      var le;
+      const r = (le = t.e) == null ? void 0 : le.target;
+      if ((r == null ? void 0 : r.tagName) === "INPUT" || (r == null ? void 0 : r.tagName) === "TEXTAREA")
+        return;
+      const n = e.getPointer(t.e), i = n.x, d = n.y, m = O(i, d), N = E.region, {
+        x,
+        y,
+        width: z,
+        height: _e
+      } = N.shape;
+      m.x >= x && m.x <= x + z && m.y >= y && m.y <= y + _e || Z();
+    };
+    return e.on("mouse:down", o), () => {
+      e.off("mouse:down", o);
+    };
+  }, [e, E, Z, O]);
+  const fe = _((o) => {
+    const t = o.target;
+    if ((t == null ? void 0 : t.tagName) === "INPUT" || (t == null ? void 0 : t.tagName) === "TEXTAREA" || !e || c)
+      return;
+    const r = e.getActiveObject();
+    !r || !(r instanceof b.Rect) || B(r);
+  }, [e, B]);
+  P("Delete", fe), P("Backspace", fe), P("r", (o) => {
+    const t = o.target;
+    (t == null ? void 0 : t.tagName) === "INPUT" || (t == null ? void 0 : t.tagName) === "TEXTAREA" || t != null && t.isContentEditable || c || !T && !v && k(!0);
+  }, {
+    exactMatch: !1
+    // 允许大小写
+  });
+  const Le = () => {
+    c || (T && (k(!1), j()), L(!v));
+  }, De = () => {
+    c || (v && L(!1), k(!T));
+  };
+  return h(() => () => {
+    e && e.dispose();
+  }, []), /* @__PURE__ */ Re("div", {
+    style: {
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      position: "relative"
+    },
+    children: [Te && /* @__PURE__ */ M("div", {
+      className: "vlm-loading-overlay",
+      children: /* @__PURE__ */ M("div", {
+        className: "vlm-loading-spinner"
+      })
+    }), /* @__PURE__ */ M("div", {
+      className: "vlm-marker-toolbar",
+      children: /* @__PURE__ */ M(Fe, {
+        drawingMode: T,
+        draggable: v,
+        scale: R,
+        onToggleDrawingMode: De,
+        onToggleDrag: Le,
+        onZoom: Se,
+        onFitToScreen: D,
+        readOnly: c
+      })
+    }), /* @__PURE__ */ Re("div", {
+      ref: p,
+      className: Oe({
+        "vlm-label-maker-wrap": !0,
+        draggable: v
+      }),
+      onContextMenu: (o) => {
+        o.preventDefault();
+      },
+      style: {
+        flex: 1,
+        position: "relative"
+      },
+      children: [(((ue = s == null ? void 0 : s.sampleFileName) == null ? void 0 : ue.originalName) || ((me = s == null ? void 0 : s.sampleFileName) == null ? void 0 : me.name)) && /* @__PURE__ */ M("div", {
+        className: "vlm-image-name",
+        children: s.sampleFileName.originalName || s.sampleFileName.name
+      }), /* @__PURE__ */ M("canvas", {
+        className: "vlm-label-maker-canvas",
+        ref: V
+      })]
+    })]
+  });
+};
+export {
+  Wt as default
+};

package/dist/es/components/VLMAnnotation/VLMLabelMaker/style.less.mjs

@@ -0,0 +1,4 @@
+const t = "";
+export {
+  t as default
+};

package/dist/es/components/VLMAnnotation/VLMLabelMaker/utils/coordinateUtils.mjs

@@ -0,0 +1,33 @@
+const u = (c, e, o, r, n) => {
+  if (!o || !r)
+    return {
+      x: 0,
+      y: 0
+    };
+  const t = r.getElement();
+  if (!(t != null && t.width) || !(t != null && t.height))
+    return {
+      x: 0,
+      y: 0
+    };
+  const s = c - n.current.left, a = e - n.current.top;
+  return {
+    x: s,
+    y: a
+  };
+}, x = (c, e, o, r) => {
+  if (!o)
+    return {
+      x: 0,
+      y: 0
+    };
+  const n = c + r.current.left, t = e + r.current.top;
+  return {
+    x: n,
+    y: t
+  };
+};
+export {
+  u as canvasToImageCoords,
+  x as imageToCanvasCoords
+};

package/dist/es/components/VLMAnnotation/components/DragButton.mjs

@@ -0,0 +1,18 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Tooltip as e, Button as i } from "antd";
+import { DragOutlined as a } from "@ant-design/icons";
+const c = ({
+  active: r,
+  onClick: o
+}) => /* @__PURE__ */ t(e, {
+  title: "拖动-按住ctrl",
+  placement: "right",
+  children: /* @__PURE__ */ t(i, {
+    icon: /* @__PURE__ */ t(a, {}),
+    className: r ? "active" : "",
+    onClick: o
+  })
+});
+export {
+  c as default
+};

package/dist/es/components/VLMAnnotation/components/FitToScreenButton.mjs

@@ -0,0 +1,16 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Tooltip as r, Button as e } from "antd";
+import { ExpandOutlined as i } from "@ant-design/icons";
+const l = ({
+  onClick: o
+}) => /* @__PURE__ */ t(r, {
+  title: "适应屏幕",
+  placement: "right",
+  children: /* @__PURE__ */ t(e, {
+    icon: /* @__PURE__ */ t(i, {}),
+    onClick: o
+  })
+});
+export {
+  l as default
+};

package/dist/es/components/VLMAnnotation/components/RectangleButton.mjs

@@ -0,0 +1,30 @@
+import { jsx as t, jsxs as i, Fragment as n } from "react/jsx-runtime";
+import { Tooltip as r, Button as c } from "antd";
+import l from "../../Iconfont/index.mjs";
+const s = ({
+  active: o,
+  onClick: e
+}) => /* @__PURE__ */ t(r, {
+  title: /* @__PURE__ */ i(n, {
+    children: [/* @__PURE__ */ t("div", {
+      children: "画矩形-按R键"
+    }), /* @__PURE__ */ t("div", {
+      style: {
+        fontSize: 14,
+        color: "#ff9326"
+      },
+      children: "预标注服务会按需计费！"
+    })]
+  }),
+  placement: "right",
+  children: /* @__PURE__ */ t(c, {
+    icon: /* @__PURE__ */ t(l, {
+      type: "icon-biaozhu-juxingkuang"
+    }),
+    className: o ? "active" : "",
+    onClick: e
+  })
+});
+export {
+  s as default
+};

package/dist/es/components/VLMAnnotation/components/Toolbar.mjs

@@ -0,0 +1,40 @@
+import { jsxs as t, Fragment as f, jsx as o } from "react/jsx-runtime";
+import { Space as s, Divider as u } from "antd";
+import d from "./RectangleButton.mjs";
+import v from "./DragButton.mjs";
+import C from "./ZoomControls.mjs";
+import g from "./FitToScreenButton.mjs";
+import { ZOOM_STEP as i } from "../constants.mjs";
+const Z = ({
+  drawingMode: e,
+  draggable: n,
+  scale: m,
+  onToggleDrawingMode: c,
+  onToggleDrag: a,
+  onZoom: r,
+  onFitToScreen: l,
+  readOnly: p
+}) => /* @__PURE__ */ t(s, {
+  direction: "vertical",
+  size: 16,
+  children: [!p && /* @__PURE__ */ t(f, {
+    children: [/* @__PURE__ */ o(d, {
+      active: e,
+      onClick: c
+    }), /* @__PURE__ */ o(v, {
+      active: n,
+      onClick: a
+    }), /* @__PURE__ */ o(u, {
+      type: "horizontal"
+    })]
+  }), /* @__PURE__ */ o(C, {
+    scale: m,
+    onZoomIn: () => r(-i),
+    onZoomOut: () => r(i)
+  }), /* @__PURE__ */ o(g, {
+    onClick: l
+  })]
+});
+export {
+  Z as default
+};

package/dist/es/components/VLMAnnotation/components/ZoomControls.mjs

@@ -0,0 +1,44 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { Space as m, Tooltip as n, Button as e } from "antd";
+import { ZoomInOutlined as p, ZoomOutOutlined as s } from "@ant-design/icons";
+import { MAX_ZOOM as a, MIN_ZOOM as h } from "../constants.mjs";
+const Z = ({
+  scale: i,
+  onZoomIn: r,
+  onZoomOut: l
+}) => {
+  const c = i >= a, d = i <= h;
+  return /* @__PURE__ */ t(m, {
+    direction: "vertical",
+    size: 16,
+    children: [/* @__PURE__ */ o(n, {
+      title: "放大-鼠标滚轮前滑",
+      placement: "right",
+      children: /* @__PURE__ */ o(e, {
+        icon: /* @__PURE__ */ o(p, {}),
+        onClick: r,
+        disabled: c
+      })
+    }), /* @__PURE__ */ t("div", {
+      style: {
+        textAlign: "center",
+        fontSize: 8,
+        color: "#666",
+        padding: "4px 0",
+        lineHeight: "32px"
+      },
+      children: [Math.round(i * 100), "%"]
+    }), /* @__PURE__ */ o(n, {
+      title: "缩小-鼠标滚轮后滑",
+      placement: "right",
+      children: /* @__PURE__ */ o(e, {
+        icon: /* @__PURE__ */ o(s, {}),
+        onClick: l,
+        disabled: d
+      })
+    })]
+  });
+};
+export {
+  Z as default
+};