shineout 3.9.18 → 3.10.0-beta.2

package/dist/shineout.js

@@ -373,6 +373,13 @@ return /******/ (function() { // webpackBootstrap
 
 
 
+/***/ }),
+
+/***/ 6640:
+/***/ (function() {
+
+
+
 /***/ }),
 
 /***/ 4689:
@@ -6401,6 +6408,7 @@ __webpack_require__.d(__webpack_exports__, {
   Tree: function() { return /* reexport */ src_tree_0; },
   TreeSelect: function() { return /* reexport */ src_tree_select_0; },
   Upload: function() { return /* reexport */ src_upload_0; },
+  Watermark: function() { return /* reexport */ src_watermark_0; },
   color: function() { return /* reexport */ color; },
   config: function() { return /* reexport */ src_config_config; },
   "default": function() { return /* binding */ src_0; },
@@ -6678,7 +6686,8 @@ __webpack_require__.d(src_type_namespaceObject, {
   Transfer: function() { return transfer_interface; },
   Tree: function() { return tree_interface; },
   TreeSelect: function() { return tree_select_interface; },
-  Upload: function() { return upload_interface; }
+  Upload: function() { return upload_interface; },
+  Watermark: function() { return watermark_interface; }
 });
 
 // EXTERNAL MODULE: ../../node_modules/.pnpm/@babel+runtime@7.23.6/node_modules/@babel/runtime/helpers/objectSpread2.js
@@ -12327,7 +12336,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.9.18');
+/* harmony default export */ var version = ('3.10.0-beta.2');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -30465,6 +30474,21 @@ var uploadStyle = {
 var useUploadStyle = styled(upload_upload, 'upload');
 
 /* harmony default export */ var shineout_style_src_upload = ((/* unused pure expression or super */ null && (useUploadStyle)));
+;// CONCATENATED MODULE: ../shineout-style/src/watermark/watermark.ts
+var watermarkStyle = {
+  rootClass: {},
+  wrapper: {
+    position: 'relative',
+    overflow: 'hidden'
+  }
+};
+/* harmony default export */ var watermark = (watermarkStyle);
+;// CONCATENATED MODULE: ../shineout-style/src/watermark/index.ts
+
+
+var useWatermarkStyle = styled(watermark, 'watermark');
+
+/* harmony default export */ var src_watermark = ((/* unused pure expression or super */ null && (useWatermarkStyle)));
 ;// CONCATENATED MODULE: ../shineout-style/src/index.ts
 
 
@@ -30520,6 +30544,7 @@ var useUploadStyle = styled(upload_upload, 'upload');
 
 
 
+
 
 
 /* harmony default export */ var shineout_style_src = ({});
@@ -51253,6 +51278,28 @@ var method = function method(type, jssStyle) {
   type: method,
   closeAll: closeAll
 });
+;// CONCATENATED MODULE: ../base/src/watermark/context.ts
+'use client';
+
+
+var context_noop = function noop() {};
+var DisabledWatermarkContext = {
+  add: context_noop,
+  remove: context_noop
+};
+var WatermarkContext = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.createContext)(DisabledWatermarkContext);
+function useWatermarkTarget(getElement) {
+  var context = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(WatermarkContext);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    var element = getElement();
+    if (!element) return undefined;
+    context.add(element);
+    return function () {
+      return context.remove(element);
+    };
+  }, [context, getElement]);
+}
+/* harmony default export */ var watermark_context = (WatermarkContext);
 ;// CONCATENATED MODULE: ../base/src/modal/modal.tsx
 
 
@@ -51263,7 +51310,18 @@ var method = function method(type, jssStyle) {
 
 
 
+
+
+
 var modal_devUseWarning = devUseWarning;
+var WatermarkPortalTarget = function WatermarkPortalTarget(_ref) {
+  var root = _ref.root;
+  var getTarget = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(function () {
+    return root.firstElementChild;
+  }, [root]);
+  useWatermarkTarget(getTarget);
+  return null;
+};
 var modal_Modal = function Modal(props) {
   var _props$jssStyle, _props$jssStyle$modal;
   // inject jssStyle
@@ -51315,7 +51373,11 @@ var modal_Modal = function Modal(props) {
   }));
   var root = getRoot();
   if (!root) return null;
-  return /*#__PURE__*/external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default().createPortal(Content, root);
+  return /*#__PURE__*/external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default().createPortal( /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
+    children: [Content, /*#__PURE__*/(0,jsx_runtime.jsx)(WatermarkPortalTarget, {
+      root: root
+    })]
+  }), root);
 };
 /* harmony default export */ var src_modal_modal = (modal_Modal);
 ;// CONCATENATED MODULE: ./src/modal/modal.tsx
@@ -55704,7 +55766,7 @@ var image_PLACEHOLDER = 0;
 var image_SRC = 1;
 var image_ALT = 2;
 var image_ERROR = 3;
-var Image = function Image(props) {
+var image_Image = function Image(props) {
   var _jssStyle$image;
   var fit = props.fit,
     alt = props.alt,
@@ -55910,8 +55972,8 @@ var Image = function Image(props) {
     }))
   );
 };
-Image.Group = image_group;
-/* harmony default export */ var base_src_image_image = (Image);
+image_Image.Group = image_group;
+/* harmony default export */ var base_src_image_image = (image_Image);
 ;// CONCATENATED MODULE: ./src/image/image.tsx
 
 
@@ -55922,12 +55984,12 @@ var image_jssStyle = {
   image: useImageStyle,
   spin: useSpinStyle
 };
-var image_Image = function Image(props) {
+var image_image_Image = function Image(props) {
   return /*#__PURE__*/(0,jsx_runtime.jsx)(base_src_image_image, objectSpread2_default()(objectSpread2_default()({}, props), {}, {
     jssStyle: image_jssStyle
   }));
 };
-/* harmony default export */ var src_image_image_0 = (image_Image);
+/* harmony default export */ var src_image_image_0 = (image_image_Image);
 ;// CONCATENATED MODULE: ./src/image/group.tsx
 
 
@@ -59752,8 +59814,9 @@ function Select(props0) {
     var isEmpty = !(filterData !== null && filterData !== void 0 && filterData.length);
     var options = 'treeData' in props ? renderTreeList() : renderList();
     if (renderOptionList) {
-      return renderOptionList(isEmpty ? renderEmpty() : options, {
-        loading: loading
+      return renderOptionList(isEmpty ? null : options, {
+        loading: loading,
+        empty: isEmpty
       });
     }
     if (isEmpty) return renderEmpty();
@@ -72110,7 +72173,9 @@ var TreeSelect = function TreeSelect(props0) {
       }))
     });
     if (renderOptionList) {
-      return renderOptionList(isEmpty ? renderEmpty() : tree);
+      return renderOptionList(isEmpty ? null : tree, {
+        empty: isEmpty
+      });
     }
     if (isEmpty) return renderEmpty();
     return tree;
@@ -74807,6 +74872,699 @@ UploadComp.Image = UploadImageComp;
 UploadComp.Button = UploadButtonComp;
 UploadComp.Dragger = UploadDraggerComp;
 /* harmony default export */ var src_upload_0 = (UploadComp);
+;// CONCATENATED MODULE: ../base/src/watermark/utils.ts
+
+
+
+
+
+var FontGap = 3;
+var DefaultImageWidth = 120;
+var DefaultImageHeight = 64;
+function getCanvasFont(font) {
+  var ratio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var fontStyle = font.fontStyle === 'none' ? 'normal' : font.fontStyle;
+  return "".concat(fontStyle, " normal ").concat(font.fontWeight, " ").concat(font.fontSize * ratio, "px ").concat(font.fontFamily);
+}
+function measureLine(context, line) {
+  var ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  context.font = getCanvasFont(line.font, ratio);
+  var textMetrics = context.measureText(line.text);
+  var measuredHeight = textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent;
+  var fallbackHeight = line.font.fontSize * ratio;
+  return {
+    width: Number.isFinite(textMetrics.width) && textMetrics.width > 0 ? textMetrics.width : 0,
+    height: Number.isFinite(measuredHeight) && measuredHeight > 0 ? measuredHeight : Number.isFinite(fallbackHeight) && fallbackHeight > 0 ? fallbackHeight : 0
+  };
+}
+function mergeFont(font, customFont) {
+  if (!customFont) return font;
+  return Object.entries(customFont).reduce(function (merged, _ref) {
+    var _ref2 = slicedToArray_default()(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return value === undefined ? merged : objectSpread2_default()(objectSpread2_default()({}, merged), {}, defineProperty_default()({}, key, value));
+  }, objectSpread2_default()({}, font));
+}
+function getContentLines(content, font) {
+  if (content === undefined || content === null) return [];
+  var lines = Array.isArray(content) ? content : [content];
+  return lines.map(function (line) {
+    if (typeof line === 'string') return {
+      text: line,
+      font: font
+    };
+    if (!line || typeof_default()(line) !== 'object') return {
+      text: '',
+      font: font
+    };
+    return {
+      text: typeof line.text === 'string' ? line.text : '',
+      font: mergeFont(font, line.font)
+    };
+  });
+}
+function getMarkSize(context, content, image, width, height) {
+  if (image) {
+    return [width !== null && width !== void 0 ? width : DefaultImageWidth, height !== null && height !== void 0 ? height : DefaultImageHeight];
+  }
+  var metrics = content.map(function (line) {
+    return measureLine(context, line);
+  });
+  var measuredWidth = metrics.reduce(function (max, metric) {
+    return Math.max(max, metric.width);
+  }, 0);
+  var measuredHeight = metrics.reduce(function (total, metric, index) {
+    return total + metric.height + (index === 0 ? 0 : FontGap);
+  }, 0);
+  return [width !== null && width !== void 0 ? width : measuredWidth, height !== null && height !== void 0 ? height : measuredHeight];
+}
+var GeometryEpsilon = 1e-10;
+function prepareCanvas(width, height) {
+  var ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var realWidth = Math.ceil(width * ratio);
+  var realHeight = Math.ceil(height * ratio);
+  if (!Number.isFinite(realWidth) || !Number.isFinite(realHeight) || realWidth <= 0 || realHeight <= 0) {
+    return null;
+  }
+  var canvas = document.createElement('canvas');
+  canvas.width = realWidth;
+  canvas.height = realHeight;
+  var context = canvas.getContext('2d');
+  context === null || context === void 0 || context.save();
+  return {
+    canvas: canvas,
+    context: context,
+    realWidth: realWidth,
+    realHeight: realHeight
+  };
+}
+function snapToInteger(value) {
+  var integer = Math.round(value);
+  return Math.abs(value - integer) < GeometryEpsilon ? integer : value;
+}
+function getRotatePosition(x, y, angle) {
+  return [snapToInteger(x * Math.cos(angle) - y * Math.sin(angle)), snapToInteger(x * Math.sin(angle) + y * Math.cos(angle))];
+}
+function getRotatedSize(width, height, angle) {
+  var halfWidth = width / 2;
+  var halfHeight = height / 2;
+  var points = [getRotatePosition(-halfWidth, -halfHeight, angle), getRotatePosition(halfWidth, -halfHeight, angle), getRotatePosition(halfWidth, halfHeight, angle), getRotatePosition(-halfWidth, halfHeight, angle)];
+  var xCoordinates = points.map(function (_ref3) {
+    var _ref4 = slicedToArray_default()(_ref3, 1),
+      x = _ref4[0];
+    return x;
+  });
+  var yCoordinates = points.map(function (_ref5) {
+    var _ref6 = slicedToArray_default()(_ref5, 2),
+      y = _ref6[1];
+    return y;
+  });
+  return [snapToInteger(Math.max.apply(Math, toConsumableArray_default()(xCoordinates)) - Math.min.apply(Math, toConsumableArray_default()(xCoordinates))), snapToInteger(Math.max.apply(Math, toConsumableArray_default()(yCoordinates)) - Math.min.apply(Math, toConsumableArray_default()(yCoordinates)))];
+}
+function drawWatermark(content, rotate, ratio, width, height, gapX, gapY) {
+  if (![rotate, ratio, width, height, gapX, gapY].every(Number.isFinite)) return null;
+  if (ratio <= 0 || width <= 0 || height <= 0) return null;
+  var contentCanvas = prepareCanvas(width, height, ratio);
+  if (!(contentCanvas !== null && contentCanvas !== void 0 && contentCanvas.context)) return null;
+  var canvas = contentCanvas.canvas,
+    context = contentCanvas.context,
+    realWidth = contentCanvas.realWidth,
+    realHeight = contentCanvas.realHeight;
+  if (Array.isArray(content)) {
+    context.textBaseline = 'top';
+    var top = 0;
+    content.forEach(function (line) {
+      var lineSize = measureLine(context, line, ratio);
+      context.fillStyle = line.font.color;
+      context.textAlign = line.font.textAlign;
+      var textLeft = realWidth / 2;
+      if (line.font.textAlign === 'left' || line.font.textAlign === 'start') textLeft = 0;
+      if (line.font.textAlign === 'right' || line.font.textAlign === 'end') {
+        textLeft = realWidth;
+      }
+      context.fillText(line.text, textLeft, top);
+      top += lineSize.height + FontGap * ratio;
+    });
+  } else {
+    context.drawImage(content, 0, 0, realWidth, realHeight);
+  }
+  var angle = Math.PI * rotate / 180;
+  var _getRotatedSize = getRotatedSize(realWidth, realHeight, angle),
+    _getRotatedSize2 = slicedToArray_default()(_getRotatedSize, 2),
+    rotatedWidth = _getRotatedSize2[0],
+    rotatedHeight = _getRotatedSize2[1];
+  var rotatedCanvas = prepareCanvas(rotatedWidth, rotatedHeight);
+  if (!(rotatedCanvas !== null && rotatedCanvas !== void 0 && rotatedCanvas.context)) return null;
+  var markCanvas = rotatedCanvas.canvas,
+    markContext = rotatedCanvas.context,
+    markWidth = rotatedCanvas.realWidth,
+    markHeight = rotatedCanvas.realHeight;
+  markContext.translate(markWidth / 2, markHeight / 2);
+  markContext.rotate(angle);
+  markContext.drawImage(canvas, 0, 0, realWidth, realHeight, -realWidth / 2, -realHeight / 2, realWidth, realHeight);
+  var realGapX = gapX * ratio;
+  var realGapY = gapY * ratio;
+  var tileWidth = (markWidth + realGapX) * 2;
+  var tileHeight = markHeight + realGapY;
+  if (!Number.isFinite(tileWidth) || !Number.isFinite(tileHeight) || tileWidth <= 0 || tileHeight <= 0) {
+    return null;
+  }
+  var tileCanvas = prepareCanvas(tileWidth, tileHeight);
+  if (!(tileCanvas !== null && tileCanvas !== void 0 && tileCanvas.context)) return null;
+  var drawMark = function drawMark(targetX, targetY) {
+    tileCanvas.context.drawImage(markCanvas, 0, 0, markWidth, markHeight, targetX, targetY, markWidth, markHeight);
+  };
+  var markLeft = (tileCanvas.realWidth / 2 - markWidth) / 2;
+  var markTop = (tileCanvas.realHeight - markHeight) / 2;
+  var secondColumnLeft = markLeft + tileCanvas.realWidth / 2;
+  drawMark(markLeft, markTop);
+  drawMark(secondColumnLeft, markTop - tileCanvas.realHeight / 2);
+  drawMark(secondColumnLeft, markTop + tileCanvas.realHeight / 2);
+  return {
+    dataURL: tileCanvas.canvas.toDataURL(),
+    width: tileCanvas.realWidth / ratio,
+    height: tileCanvas.realHeight / ratio
+  };
+}
+function getStyleString(style) {
+  return Object.entries(style).map(function (_ref7) {
+    var _ref8 = slicedToArray_default()(_ref7, 2),
+      key = _ref8[0],
+      value = _ref8[1];
+    var property = key.replace(/[A-Z]/g, function (character) {
+      return "-".concat(character.toLowerCase());
+    });
+    if (property.startsWith('ms-')) property = "-".concat(property);
+    return "".concat(property, ": ").concat(value, ";");
+  }).join(' ');
+}
+;// CONCATENATED MODULE: ../base/src/watermark/watermark.tsx
+'use client';
+
+
+
+
+
+
+
+
+var DefaultFont = {
+  color: 'rgba(0, 0, 0, 0.15)',
+  fontSize: 16,
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  fontFamily: 'sans-serif',
+  textAlign: 'center'
+};
+var DefaultGap = [100, 100];
+var DefaultRotate = -22;
+var DefaultZIndex = 999;
+var ObserverOptions = {
+  attributes: true,
+  childList: true,
+  subtree: true,
+  attributeFilter: ['style', 'class', 'hidden', 'aria-hidden']
+};
+function normalizeDpr() {
+  var ratio = window.devicePixelRatio;
+  return Number.isFinite(ratio) && ratio > 0 ? ratio : 1;
+}
+function createDrawingSignature(props, ratio) {
+  var gap = props.gap || DefaultGap;
+  var font = mergeFont(DefaultFont, props.font);
+  var content = getContentLines(props.content, font);
+  var signature = [props.image, props.rotate, props.width, props.height, gap[0], gap[1], ratio, content.length];
+  content.forEach(function (line) {
+    signature.push(line.text, line.font.color, line.font.fontSize, line.font.fontWeight, line.font.fontStyle, line.font.fontFamily, line.font.textAlign);
+  });
+  return signature;
+}
+function createStyleSignature(props) {
+  var gap = props.gap || DefaultGap;
+  var offset = props.offset || [gap[0] / 2, gap[1] / 2];
+  return [gap[0], gap[1], offset[0], offset[1], props.zIndex];
+}
+function signaturesEqual(first, second) {
+  if (!first || first.length !== second.length) return false;
+  return first.every(function (value, index) {
+    return value === second[index] || Number.isNaN(value) && Number.isNaN(second[index]);
+  });
+}
+function restoreAttribute(element, name, value) {
+  if (value === null) {
+    if (element.hasAttribute(name)) element.removeAttribute(name);
+    return;
+  }
+  if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+}
+function createOverlayStyle(props, tile) {
+  var gap = props.gap || DefaultGap;
+  var offset = props.offset || [gap[0] / 2, gap[1] / 2];
+  var horizontalOffset = offset[0] - gap[0] / 2;
+  var verticalOffset = offset[1] - gap[1] / 2;
+  if (![gap[0], gap[1], offset[0], offset[1], horizontalOffset, verticalOffset, tile.width, tile.height].every(Number.isFinite)) {
+    return null;
+  }
+  return {
+    position: 'absolute',
+    left: "".concat(Math.max(horizontalOffset, 0), "px"),
+    top: "".concat(Math.max(verticalOffset, 0), "px"),
+    width: horizontalOffset > 0 ? "calc(100% - ".concat(horizontalOffset, "px)") : '100%',
+    height: verticalOffset > 0 ? "calc(100% - ".concat(verticalOffset, "px)") : '100%',
+    zIndex: props.zIndex,
+    pointerEvents: 'none',
+    backgroundImage: "url(\"".concat(tile.dataURL, "\")"),
+    backgroundRepeat: 'repeat',
+    backgroundSize: "".concat(tile.width, "px ").concat(tile.height, "px"),
+    backgroundPosition: "".concat(Math.min(horizontalOffset, 0), "px ").concat(Math.min(verticalOffset, 0), "px"),
+    visibility: 'visible !important'
+  };
+}
+var Watermark = function Watermark(props) {
+  var _props$rotate, _props$jssStyle, _props$inherit;
+  var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var rootAttributeBaselineRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var targetsRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(new Set());
+  var targetRegistrationCountsRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(new Map());
+  var overlaysRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(new Map());
+  var latestTileRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var latestStyleRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var requestedDrawingSignatureRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var renderedDrawingSignatureRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var styleSignatureRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var renderTokenRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);
+  var imageTokenRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);
+  var pendingFrameRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var pendingImageRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var observerRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var observerPauseDepthRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);
+  var repairMutationsRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(function () {
+    return undefined;
+  });
+  var mountedRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
+  var latestProps = useLatestObj({
+    content: props.content,
+    font: props.font,
+    gap: props.gap,
+    height: props.height,
+    image: props.image,
+    offset: props.offset,
+    onRemove: props.onRemove,
+    rotate: (_props$rotate = props.rotate) !== null && _props$rotate !== void 0 ? _props$rotate : DefaultRotate,
+    width: props.width,
+    zIndex: typeof props.zIndex === 'number' && Number.isFinite(props.zIndex) ? props.zIndex : DefaultZIndex
+  });
+  var withObserverPaused = usePersistFn(function (callback) {
+    var ignoreRootAttributeRecords = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var observer = observerRef.current;
+    var ownsPause = Boolean(observer && observerPauseDepthRef.current === 0);
+    var pendingRecords = ownsPause ? (observer === null || observer === void 0 ? void 0 : observer.takeRecords()) || [] : [];
+    if (ownsPause) observer === null || observer === void 0 || observer.disconnect();
+    observerPauseDepthRef.current += 1;
+    try {
+      var root = rootRef.current;
+      var records = ignoreRootAttributeRecords ? pendingRecords.filter(function (record) {
+        return !(record.type === 'attributes' && record.target === root && (record.attributeName === 'class' || record.attributeName === 'style'));
+      }) : pendingRecords;
+      if (records.length) repairMutationsRef.current(records);
+      callback();
+    } finally {
+      observerPauseDepthRef.current -= 1;
+      if (ownsPause && mountedRef.current && observerRef.current === observer) {
+        targetsRef.current.forEach(function (target) {
+          return observer === null || observer === void 0 ? void 0 : observer.observe(target, ObserverOptions);
+        });
+      }
+    }
+  });
+  var clearOverlays = usePersistFn(function () {
+    withObserverPaused(function () {
+      overlaysRef.current.forEach(function (overlay) {
+        return overlay.remove();
+      });
+    });
+  });
+  var releasePendingImage = usePersistFn(function () {
+    var cancelRequest = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var image = pendingImageRef.current;
+    if (!image) return;
+    pendingImageRef.current = null;
+    image.onload = null;
+    image.onerror = null;
+    if (cancelRequest) {
+      try {
+        image.src = '';
+      } catch (_error) {
+        // Ignore a source implementation that rejects cancellation.
+      }
+    }
+  });
+  var writeOverlay = usePersistFn(function (target, style) {
+    var overlay = overlaysRef.current.get(target);
+    if (!overlay) {
+      overlay = document.createElement('div');
+      overlaysRef.current.set(target, overlay);
+    }
+    overlay.removeAttribute('class');
+    overlay.removeAttribute('hidden');
+    overlay.setAttribute('aria-hidden', 'true');
+    overlay.setAttribute('style', getStyleString(style));
+    while (overlay.firstChild) overlay.removeChild(overlay.firstChild);
+    if (overlay.parentElement !== target) target.appendChild(overlay);
+  });
+  var applyLatestStyle = usePersistFn(function () {
+    var tile = latestTileRef.current;
+    if (!tile) return;
+    var style = createOverlayStyle(latestProps, tile);
+    latestStyleRef.current = style;
+    if (!style) {
+      clearOverlays();
+      return;
+    }
+    withObserverPaused(function () {
+      targetsRef.current.forEach(function (target) {
+        return writeOverlay(target, style);
+      });
+    });
+  });
+  var drawLatest = usePersistFn(function () {
+    var ratio = normalizeDpr();
+    var drawingSignature = createDrawingSignature(latestProps, ratio);
+    var gap = latestProps.gap || DefaultGap;
+    var font = mergeFont(DefaultFont, latestProps.font);
+    var content = getContentLines(latestProps.content, font);
+    var isEmptyContent = !latestProps.image && (content.length === 0 || content.every(function (line) {
+      return line.text.length === 0;
+    }));
+    if (signaturesEqual(renderedDrawingSignatureRef.current, drawingSignature) && (latestTileRef.current || isEmptyContent)) {
+      applyLatestStyle();
+      return;
+    }
+    if (isEmptyContent) {
+      latestTileRef.current = null;
+      latestStyleRef.current = null;
+      clearOverlays();
+      renderedDrawingSignatureRef.current = drawingSignature;
+      return;
+    }
+    var imageToken = ++imageTokenRef.current;
+    var isCurrentDrawing = function isCurrentDrawing() {
+      return mountedRef.current && imageToken === imageTokenRef.current;
+    };
+    var clearFailedDrawing = function clearFailedDrawing() {
+      if (!isCurrentDrawing()) return;
+      requestedDrawingSignatureRef.current = null;
+      latestTileRef.current = null;
+      latestStyleRef.current = null;
+      clearOverlays();
+    };
+    try {
+      var measureCanvas = document.createElement('canvas');
+      var context = measureCanvas.getContext('2d');
+      if (!context) {
+        clearFailedDrawing();
+        return;
+      }
+      var image = latestProps.image;
+      var rotate = latestProps.rotate;
+      var _getMarkSize = getMarkSize(context, content, image, latestProps.width, latestProps.height),
+        _getMarkSize2 = slicedToArray_default()(_getMarkSize, 2),
+        width = _getMarkSize2[0],
+        height = _getMarkSize2[1];
+      var drawContent = function drawContent(drawnContent) {
+        if (!isCurrentDrawing()) return false;
+        try {
+          var tile = drawWatermark(drawnContent, rotate, ratio, width, height, gap[0], gap[1]);
+          if (!tile || !isCurrentDrawing()) return false;
+          latestTileRef.current = tile;
+          renderedDrawingSignatureRef.current = drawingSignature;
+          applyLatestStyle();
+          return true;
+        } catch (_error) {
+          return false;
+        }
+      };
+      var drawFallback = function drawFallback() {
+        if (!isCurrentDrawing()) return;
+        var isEmptyFallback = content.length === 0 || content.every(function (line) {
+          return line.text.length === 0;
+        });
+        if (isEmptyFallback || !drawContent(content)) clearFailedDrawing();
+      };
+      if (!image) {
+        if (!drawContent(content)) clearFailedDrawing();
+        return;
+      }
+      if (typeof Image === 'undefined') {
+        drawFallback();
+        return;
+      }
+      try {
+        var imageElement = new Image();
+        pendingImageRef.current = imageElement;
+        var releaseImage = function releaseImage() {
+          imageElement.onload = null;
+          imageElement.onerror = null;
+          if (pendingImageRef.current === imageElement) pendingImageRef.current = null;
+        };
+        imageElement.onload = function () {
+          if (!isCurrentDrawing()) {
+            releaseImage();
+            return;
+          }
+          var drawn = drawContent(imageElement);
+          releaseImage();
+          if (!drawn) drawFallback();
+        };
+        imageElement.onerror = function () {
+          if (!isCurrentDrawing()) {
+            releaseImage();
+            return;
+          }
+          releaseImage();
+          drawFallback();
+        };
+        imageElement.crossOrigin = 'anonymous';
+        imageElement.referrerPolicy = 'no-referrer';
+        imageElement.src = image;
+      } catch (_error) {
+        releasePendingImage();
+        drawFallback();
+      }
+    } catch (_error) {
+      clearFailedDrawing();
+    }
+  });
+  var cancelPendingFrame = usePersistFn(function () {
+    var pendingFrame = pendingFrameRef.current;
+    renderTokenRef.current += 1;
+    pendingFrameRef.current = null;
+    if (!pendingFrame) return;
+    if (pendingFrame.type === 'animation-frame') {
+      if (typeof window.cancelAnimationFrame === 'function') {
+        window.cancelAnimationFrame(pendingFrame.id);
+      }
+      return;
+    }
+    window.clearTimeout(pendingFrame.id);
+  });
+  var scheduleRender = usePersistFn(function () {
+    if (!mountedRef.current || pendingFrameRef.current) return;
+    var token = ++renderTokenRef.current;
+    var run = function run() {
+      pendingFrameRef.current = null;
+      if (!mountedRef.current || token !== renderTokenRef.current) return;
+      drawLatest();
+    };
+    if (typeof window.requestAnimationFrame === 'function') {
+      var _id = window.requestAnimationFrame(run);
+      pendingFrameRef.current = {
+        id: _id,
+        token: token,
+        type: 'animation-frame'
+      };
+      return;
+    }
+    var id = window.setTimeout(run, 16);
+    pendingFrameRef.current = {
+      id: id,
+      token: token,
+      type: 'timeout'
+    };
+  });
+  var addTarget = usePersistFn(function (target) {
+    var registrations = targetRegistrationCountsRef.current;
+    registrations.set(target, (registrations.get(target) || 0) + 1);
+    targetsRef.current.add(target);
+    var tile = latestTileRef.current;
+    var style = latestStyleRef.current;
+    if (tile && style) {
+      withObserverPaused(function () {
+        return writeOverlay(target, style);
+      });
+    } else if (observerRef.current && mountedRef.current) {
+      withObserverPaused(function () {
+        return undefined;
+      });
+    }
+  });
+  var removeTarget = usePersistFn(function (target) {
+    var registrations = targetRegistrationCountsRef.current;
+    var count = registrations.get(target) || 0;
+    if (count > 1) {
+      registrations.set(target, count - 1);
+      return;
+    }
+    registrations.delete(target);
+    if (target === rootRef.current) return;
+    withObserverPaused(function () {
+      targetsRef.current.delete(target);
+      var overlay = overlaysRef.current.get(target);
+      overlay === null || overlay === void 0 || overlay.remove();
+      overlaysRef.current.delete(target);
+    });
+  });
+  var handleMutations = usePersistFn(function (mutations) {
+    var _latestProps$onRemove;
+    var root = rootRef.current;
+    var restoreTargets = new Set();
+    var restoreRoot = false;
+    var removedOverlay = false;
+    mutations.forEach(function (mutation) {
+      if (mutation.type === 'attributes' && mutation.target === root && (mutation.attributeName === 'class' || mutation.attributeName === 'style')) {
+        restoreRoot = true;
+      }
+      overlaysRef.current.forEach(function (overlay, target) {
+        if ((mutation.type === 'attributes' || mutation.type === 'childList') && mutation.target === overlay) {
+          restoreTargets.add(target);
+        }
+        if (mutation.type === 'childList' && Array.from(mutation.removedNodes).includes(overlay)) {
+          restoreTargets.add(target);
+          removedOverlay = true;
+        }
+      });
+    });
+    withObserverPaused(function () {
+      var baseline = rootAttributeBaselineRef.current;
+      if (restoreRoot && root && baseline) {
+        restoreAttribute(root, 'class', baseline.className);
+        restoreAttribute(root, 'style', baseline.style);
+      }
+      var style = latestStyleRef.current;
+      if (style) restoreTargets.forEach(function (target) {
+        return writeOverlay(target, style);
+      });
+    });
+    if (removedOverlay) (_latestProps$onRemove = latestProps.onRemove) === null || _latestProps$onRemove === void 0 || _latestProps$onRemove.call(latestProps);
+  });
+  repairMutationsRef.current = handleMutations;
+  var contextValue = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
+    return {
+      add: addTarget,
+      remove: removeTarget
+    };
+  }, [addTarget, removeTarget]);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    mountedRef.current = true;
+    if (rootRef.current) targetsRef.current.add(rootRef.current);
+    if (typeof MutationObserver !== 'undefined') {
+      try {
+        observerRef.current = new MutationObserver(handleMutations);
+        targetsRef.current.forEach(function (target) {
+          var _observerRef$current;
+          return (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 ? void 0 : _observerRef$current.observe(target, ObserverOptions);
+        });
+      } catch (_error) {
+        observerRef.current = null;
+      }
+    }
+    return function () {
+      var _observerRef$current2;
+      mountedRef.current = false;
+      imageTokenRef.current += 1;
+      releasePendingImage(true);
+      (_observerRef$current2 = observerRef.current) === null || _observerRef$current2 === void 0 || _observerRef$current2.disconnect();
+      observerRef.current = null;
+      cancelPendingFrame();
+      overlaysRef.current.forEach(function (overlay) {
+        return overlay.remove();
+      });
+      targetsRef.current.clear();
+      targetRegistrationCountsRef.current.clear();
+      overlaysRef.current.clear();
+      latestTileRef.current = null;
+      latestStyleRef.current = null;
+      requestedDrawingSignatureRef.current = null;
+      renderedDrawingSignatureRef.current = null;
+      styleSignatureRef.current = null;
+    };
+  }, [cancelPendingFrame, handleMutations, releasePendingImage]);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    var drawingSignature = createDrawingSignature(latestProps, normalizeDpr());
+    var styleSignature = createStyleSignature(latestProps);
+    var drawingChanged = !signaturesEqual(requestedDrawingSignatureRef.current, drawingSignature);
+    var styleChanged = !signaturesEqual(styleSignatureRef.current, styleSignature);
+    requestedDrawingSignatureRef.current = drawingSignature;
+    styleSignatureRef.current = styleSignature;
+    if (drawingChanged) {
+      imageTokenRef.current += 1;
+      releasePendingImage(true);
+      scheduleRender();
+    } else if (styleChanged) {
+      applyLatestStyle();
+    }
+  });
+  var watermarkClasses = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 ? void 0 : _props$jssStyle.watermark();
+  var providerValue = ((_props$inherit = props.inherit) !== null && _props$inherit !== void 0 ? _props$inherit : true) ? contextValue : DisabledWatermarkContext;
+  var rootClassName = classnames_default()(watermarkClasses === null || watermarkClasses === void 0 ? void 0 : watermarkClasses.rootClass, watermarkClasses === null || watermarkClasses === void 0 ? void 0 : watermarkClasses.wrapper, props.className);
+  var rootAttributeSignature = "".concat(rootClassName, "\0").concat(getStyleString(props.style || {}));
+  var saveRoot = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(function (root) {
+    if (!root) {
+      if (rootRef.current) withObserverPaused(function () {
+        return undefined;
+      });
+      rootRef.current = null;
+      return;
+    }
+    rootRef.current = root;
+    withObserverPaused(function () {
+      rootAttributeBaselineRef.current = {
+        className: root.getAttribute('class'),
+        style: root.getAttribute('style')
+      };
+    }, true);
+  }, [rootAttributeSignature, withObserverPaused]);
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    ref: saveRoot,
+    className: rootClassName,
+    style: props.style,
+    children: /*#__PURE__*/(0,jsx_runtime.jsx)(watermark_context.Provider, {
+      value: providerValue,
+      children: props.children
+    })
+  });
+};
+/* harmony default export */ var watermark_watermark = (Watermark);
+;// CONCATENATED MODULE: ./src/watermark/watermark.tsx
+
+
+
+
+
+var watermark_jssStyle = {
+  watermark: useWatermarkStyle
+};
+/* harmony default export */ var src_watermark_watermark = (function (props) {
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(watermark_watermark, objectSpread2_default()(objectSpread2_default()({}, props), {}, {
+    jssStyle: watermark_jssStyle
+  }));
+});
+;// CONCATENATED MODULE: ./src/watermark/index.ts
+
+var WatermarkComp = src_watermark_watermark;
+WatermarkComp.displayName = 'ShineoutWatermark';
+/* harmony default export */ var src_watermark_0 = (WatermarkComp);
 ;// CONCATENATED MODULE: ../theme/src/hooks/useToken/use-token.ts
 
 
@@ -76973,6 +77731,8 @@ var tree_interface = __webpack_require__(8517);
 var tree_select_interface = __webpack_require__(3347);
 // EXTERNAL MODULE: ./src/upload/interface.ts
 var upload_interface = __webpack_require__(8821);
+// EXTERNAL MODULE: ./src/watermark/interface.ts
+var watermark_interface = __webpack_require__(6640);
 ;// CONCATENATED MODULE: ./src/type.ts
 
 
@@ -77073,6 +77833,8 @@ var upload_interface = __webpack_require__(8821);
 
 
 
+
+
 
 
 
@@ -77138,10 +77900,11 @@ var upload_interface = __webpack_require__(8821);
 
 
 
+
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.9.18'
+  version: '3.10.0-beta.2'
 });
 }();
 /******/ 	return __webpack_exports__;