@element-plus/nightly 0.0.20250805 → 0.0.20250807

package/es/components/watermark/src/useClips.mjs

@@ -1,6 +1,13 @@
 import { isArray } from '@vue/shared';
 
 const FontGap = 3;
+const TEXT_ALIGN_RATIO_MAP = {
+  left: [0, 0.5],
+  start: [0, 0.5],
+  center: [0.5, 0],
+  right: [1, -0.5],
+  end: [1, -0.5]
+};
 function prepareCanvas(width, height, ratio = 1) {
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
@@ -12,7 +19,7 @@ function prepareCanvas(width, height, ratio = 1) {
   return [ctx, canvas, realWidth, realHeight];
 }
 function useClips() {
-  function getClips(content, rotate, ratio, width, height, font, gapX, gapY) {
+  function getClips(content, rotate, ratio, width, height, font, gapX, gapY, space) {
     const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(width, height, ratio);
     if (content instanceof HTMLImageElement) {
       ctx.drawImage(content, 0, 0, contentWidth, contentHeight);
@@ -33,7 +40,8 @@ function useClips() {
       ctx.textBaseline = textBaseline;
       const contents = isArray(content) ? content : [content];
       contents == null ? void 0 : contents.forEach((item, index) => {
-        ctx.fillText(item != null ? item : "", contentWidth / 2, index * (mergedFontSize + FontGap * ratio));
+        const [alignRatio, spaceRatio] = TEXT_ALIGN_RATIO_MAP[textAlign];
+        ctx.fillText(item != null ? item : "", contentWidth * alignRatio + space * spaceRatio, index * (mergedFontSize + FontGap * ratio));
       });
     }
     const angle = Math.PI / 180 * Number(rotate);

package/es/components/watermark/src/useClips.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useClips.mjs","sources":["../../../../../../packages/components/watermark/src/useClips.ts"],"sourcesContent":["import { isArray } from '@element-plus/utils'\n\nimport type { WatermarkProps } from './watermark'\n\nexport const FontGap = 3\n\nfunction prepareCanvas(\n  width: number,\n  height: number,\n  ratio = 1\n): [\n  ctx: CanvasRenderingContext2D,\n  canvas: HTMLCanvasElement,\n  realWidth: number,\n  realHeight: number\n] {\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')!\n  const realWidth = width * ratio\n  const realHeight = height * ratio\n  canvas.setAttribute('width', `${realWidth}px`)\n  canvas.setAttribute('height', `${realHeight}px`)\n  ctx.save()\n\n  return [ctx, canvas, realWidth, realHeight]\n}\n\n/**\n * Get the clips of text content.\n * This is a lazy hook function since SSR no need this\n */\nexport default function useClips() {\n  // Get single clips\n  function getClips(\n    content: NonNullable<WatermarkProps['content']> | HTMLImageElement,\n    rotate: number,\n    ratio: number,\n    width: number,\n    height: number,\n    font: Required<NonNullable<WatermarkProps['font']>>,\n    gapX: number,\n    gapY: number\n  ): [dataURL: string, finalWidth: number, finalHeight: number] {\n    // ================= Text / Image =================\n    const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(\n      width,\n      height,\n      ratio\n    )\n\n    if (content instanceof HTMLImageElement) {\n      // Image\n      ctx.drawImage(content, 0, 0, contentWidth, contentHeight)\n    } else {\n      // Text\n      const {\n        color,\n        fontSize,\n        fontStyle,\n        fontWeight,\n        fontFamily,\n        textAlign,\n        textBaseline,\n      } = font\n      const mergedFontSize = Number(fontSize) * ratio\n\n      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`\n      ctx.fillStyle = color\n      ctx.textAlign = textAlign\n      ctx.textBaseline = textBaseline\n      const contents = isArray(content) ? content : [content]\n      contents?.forEach((item, index) => {\n        ctx.fillText(\n          item ?? '',\n          contentWidth / 2,\n          index * (mergedFontSize + FontGap * ratio)\n        )\n      })\n    }\n\n    // ==================== Rotate ====================\n    const angle = (Math.PI / 180) * Number(rotate)\n    const maxSize = Math.max(width, height)\n    const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio)\n\n    // Copy from `ctx` and rotate\n    rCtx.translate(realMaxSize / 2, realMaxSize / 2)\n    rCtx.rotate(angle)\n    if (contentWidth > 0 && contentHeight > 0) {\n      rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2)\n    }\n\n    // Get boundary of rotated text\n    function getRotatePos(x: number, y: number) {\n      const targetX = x * Math.cos(angle) - y * Math.sin(angle)\n      const targetY = x * Math.sin(angle) + y * Math.cos(angle)\n      return [targetX, targetY]\n    }\n\n    let left = 0\n    let right = 0\n    let top = 0\n    let bottom = 0\n\n    const halfWidth = contentWidth / 2\n    const halfHeight = contentHeight / 2\n    const points = [\n      [0 - halfWidth, 0 - halfHeight],\n      [0 + halfWidth, 0 - halfHeight],\n      [0 + halfWidth, 0 + halfHeight],\n      [0 - halfWidth, 0 + halfHeight],\n    ]\n    points.forEach(([x, y]) => {\n      const [targetX, targetY] = getRotatePos(x, y)\n      left = Math.min(left, targetX)\n      right = Math.max(right, targetX)\n      top = Math.min(top, targetY)\n      bottom = Math.max(bottom, targetY)\n    })\n\n    const cutLeft = left + realMaxSize / 2\n    const cutTop = top + realMaxSize / 2\n    const cutWidth = right - left\n    const cutHeight = bottom - top\n\n    // ================ Fill Alternate ================\n    const realGapX = gapX * ratio\n    const realGapY = gapY * ratio\n    const filledWidth = (cutWidth + realGapX) * 2\n    const filledHeight = cutHeight + realGapY\n\n    const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight)\n\n    function drawImg(targetX = 0, targetY = 0) {\n      fCtx.drawImage(\n        rCanvas,\n        cutLeft,\n        cutTop,\n        cutWidth,\n        cutHeight,\n        targetX,\n        targetY,\n        cutWidth,\n        cutHeight\n      )\n    }\n    drawImg()\n    drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2)\n    drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2)\n\n    return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio]\n  }\n\n  return getClips\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useClips.mjs","sources":["../../../../../../packages/components/watermark/src/useClips.ts"],"sourcesContent":["import { isArray } from '@element-plus/utils'\n\nimport type { WatermarkProps } from './watermark'\n\nexport const FontGap = 3\n\n// [alignRatio, spaceRatio]\nconst TEXT_ALIGN_RATIO_MAP = {\n  left: [0, 0.5],\n  start: [0, 0.5],\n  center: [0.5, 0],\n  right: [1, -0.5],\n  end: [1, -0.5],\n} as const\n\nfunction prepareCanvas(\n  width: number,\n  height: number,\n  ratio = 1\n): [\n  ctx: CanvasRenderingContext2D,\n  canvas: HTMLCanvasElement,\n  realWidth: number,\n  realHeight: number\n] {\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')!\n  const realWidth = width * ratio\n  const realHeight = height * ratio\n  canvas.setAttribute('width', `${realWidth}px`)\n  canvas.setAttribute('height', `${realHeight}px`)\n  ctx.save()\n\n  return [ctx, canvas, realWidth, realHeight]\n}\n\n/**\n * Get the clips of text content.\n * This is a lazy hook function since SSR no need this\n */\nexport default function useClips() {\n  // Get single clips\n  function getClips(\n    content: NonNullable<WatermarkProps['content']> | HTMLImageElement,\n    rotate: number,\n    ratio: number,\n    width: number,\n    height: number,\n    font: Required<NonNullable<WatermarkProps['font']>>,\n    gapX: number,\n    gapY: number,\n    space: number\n  ): [dataURL: string, finalWidth: number, finalHeight: number] {\n    // ================= Text / Image =================\n    const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(\n      width,\n      height,\n      ratio\n    )\n\n    if (content instanceof HTMLImageElement) {\n      // Image\n      ctx.drawImage(content, 0, 0, contentWidth, contentHeight)\n    } else {\n      // Text\n      const {\n        color,\n        fontSize,\n        fontStyle,\n        fontWeight,\n        fontFamily,\n        textAlign,\n        textBaseline,\n      } = font\n      const mergedFontSize = Number(fontSize) * ratio\n\n      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`\n      ctx.fillStyle = color\n      ctx.textAlign = textAlign\n      ctx.textBaseline = textBaseline\n      const contents = isArray(content) ? content : [content]\n      contents?.forEach((item, index) => {\n        const [alignRatio, spaceRatio] = TEXT_ALIGN_RATIO_MAP[textAlign]\n        ctx.fillText(\n          item ?? '',\n          contentWidth * alignRatio + space * spaceRatio,\n          index * (mergedFontSize + FontGap * ratio)\n        )\n      })\n    }\n\n    // ==================== Rotate ====================\n    const angle = (Math.PI / 180) * Number(rotate)\n    const maxSize = Math.max(width, height)\n    const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio)\n\n    // Copy from `ctx` and rotate\n    rCtx.translate(realMaxSize / 2, realMaxSize / 2)\n    rCtx.rotate(angle)\n    if (contentWidth > 0 && contentHeight > 0) {\n      rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2)\n    }\n\n    // Get boundary of rotated text\n    function getRotatePos(x: number, y: number) {\n      const targetX = x * Math.cos(angle) - y * Math.sin(angle)\n      const targetY = x * Math.sin(angle) + y * Math.cos(angle)\n      return [targetX, targetY]\n    }\n\n    let left = 0\n    let right = 0\n    let top = 0\n    let bottom = 0\n\n    const halfWidth = contentWidth / 2\n    const halfHeight = contentHeight / 2\n    const points = [\n      [0 - halfWidth, 0 - halfHeight],\n      [0 + halfWidth, 0 - halfHeight],\n      [0 + halfWidth, 0 + halfHeight],\n      [0 - halfWidth, 0 + halfHeight],\n    ]\n    points.forEach(([x, y]) => {\n      const [targetX, targetY] = getRotatePos(x, y)\n      left = Math.min(left, targetX)\n      right = Math.max(right, targetX)\n      top = Math.min(top, targetY)\n      bottom = Math.max(bottom, targetY)\n    })\n\n    const cutLeft = left + realMaxSize / 2\n    const cutTop = top + realMaxSize / 2\n    const cutWidth = right - left\n    const cutHeight = bottom - top\n\n    // ================ Fill Alternate ================\n    const realGapX = gapX * ratio\n    const realGapY = gapY * ratio\n    const filledWidth = (cutWidth + realGapX) * 2\n    const filledHeight = cutHeight + realGapY\n\n    const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight)\n\n    function drawImg(targetX = 0, targetY = 0) {\n      fCtx.drawImage(\n        rCanvas,\n        cutLeft,\n        cutTop,\n        cutWidth,\n        cutHeight,\n        targetX,\n        targetY,\n        cutWidth,\n        cutHeight\n      )\n    }\n    drawImg()\n    drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2)\n    drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2)\n\n    return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio]\n  }\n\n  return getClips\n}\n"],"names":[],"mappings":";;AACY,MAAC,OAAO,GAAG,EAAE;AACzB,MAAM,oBAAoB,GAAG;AAC7B,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC;AAChB,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC;AACjB,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;AAClB,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC;AAClB,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC;AAChB,CAAC,CAAC;AACF,SAAS,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE;AACjD,EAAE,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAClD,EAAE,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AACtC,EAAE,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC;AAClC,EAAE,MAAM,UAAU,GAAG,MAAM,GAAG,KAAK,CAAC;AACpC,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC;AACjD,EAAE,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;AACnD,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC;AACb,EAAE,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;AAC9C,CAAC;AACc,SAAS,QAAQ,GAAG;AACnC,EAAE,SAAS,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE;AACpF,IAAI,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,CAAC,GAAG,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AAC3F,IAAI,IAAI,OAAO,YAAY,gBAAgB,EAAE;AAC7C,MAAM,GAAG,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;AAChE,KAAK,MAAM;AACX,MAAM,MAAM;AACZ,QAAQ,KAAK;AACb,QAAQ,QAAQ;AAChB,QAAQ,SAAS;AACjB,QAAQ,UAAU;AAClB,QAAQ,UAAU;AAClB,QAAQ,SAAS;AACjB,QAAQ,YAAY;AACpB,OAAO,GAAG,IAAI,CAAC;AACf,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;AACtD,MAAM,GAAG,CAAC,IAAI,GAAG,CAAC,EAAE,SAAS,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,EAAE,cAAc,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;AACnG,MAAM,GAAG,CAAC,SAAS,GAAG,KAAK,CAAC;AAC5B,MAAM,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC;AAChC,MAAM,GAAG,CAAC,YAAY,GAAG,YAAY,CAAC;AACtC,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC;AAC9D,MAAM,QAAQ,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK;AACpE,QAAQ,MAAM,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,oBAAoB,CAAC,SAAS,CAAC,CAAC;AACzE,QAAQ,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,IAAI,GAAG,IAAI,GAAG,EAAE,EAAE,YAAY,GAAG,UAAU,GAAG,KAAK,GAAG,UAAU,EAAE,KAAK,IAAI,cAAc,GAAG,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;AAC3I,OAAO,CAAC,CAAC;AACT,KAAK;AACL,IAAI,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;AACjD,IAAI,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAC5C,IAAI,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,CAAC,GAAG,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;AAChF,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,EAAE,WAAW,GAAG,CAAC,CAAC,CAAC;AACrD,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,IAAI,IAAI,YAAY,GAAG,CAAC,IAAI,aAAa,GAAG,CAAC,EAAE;AAC/C,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,YAAY,GAAG,CAAC,EAAE,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;AACpE,KAAK;AACL,IAAI,SAAS,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE;AAChC,MAAM,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAChE,MAAM,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAChE,MAAM,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAChC,KAAK;AACL,IAAI,IAAI,IAAI,GAAG,CAAC,CAAC;AACjB,IAAI,IAAI,KAAK,GAAG,CAAC,CAAC;AAClB,IAAI,IAAI,GAAG,GAAG,CAAC,CAAC;AAChB,IAAI,IAAI,MAAM,GAAG,CAAC,CAAC;AACnB,IAAI,MAAM,SAAS,GAAG,YAAY,GAAG,CAAC,CAAC;AACvC,IAAI,MAAM,UAAU,GAAG,aAAa,GAAG,CAAC,CAAC;AACzC,IAAI,MAAM,MAAM,GAAG;AACnB,MAAM,CAAC,CAAC,GAAG,SAAS,EAAE,CAAC,GAAG,UAAU,CAAC;AACrC,MAAM,CAAC,CAAC,GAAG,SAAS,EAAE,CAAC,GAAG,UAAU,CAAC;AACrC,MAAM,CAAC,CAAC,GAAG,SAAS,EAAE,CAAC,GAAG,UAAU,CAAC;AACrC,MAAM,CAAC,CAAC,GAAG,SAAS,EAAE,CAAC,GAAG,UAAU,CAAC;AACrC,KAAK,CAAC;AACN,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK;AAC/B,MAAM,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACpD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AACrC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACvC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AACnC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACzC,KAAK,CAAC,CAAC;AACP,IAAI,MAAM,OAAO,GAAG,IAAI,GAAG,WAAW,GAAG,CAAC,CAAC;AAC3C,IAAI,MAAM,MAAM,GAAG,GAAG,GAAG,WAAW,GAAG,CAAC,CAAC;AACzC,IAAI,MAAM,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC;AAClC,IAAI,MAAM,SAAS,GAAG,MAAM,GAAG,GAAG,CAAC;AACnC,IAAI,MAAM,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAC;AAClC,IAAI,MAAM,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAC;AAClC,IAAI,MAAM,WAAW,GAAG,CAAC,QAAQ,GAAG,QAAQ,IAAI,CAAC,CAAC;AAClD,IAAI,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC9C,IAAI,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AACrE,IAAI,SAAS,OAAO,CAAC,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE;AAC/C,MAAM,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AAC3G,KAAK;AACL,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,OAAO,CAAC,QAAQ,GAAG,QAAQ,EAAE,CAAC,SAAS,GAAG,CAAC,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAC;AAChE,IAAI,OAAO,CAAC,QAAQ,GAAG,QAAQ,EAAE,CAAC,SAAS,GAAG,CAAC,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAC;AAChE,IAAI,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,WAAW,GAAG,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,CAAC;AAC5E,GAAG;AACH,EAAE,OAAO,QAAQ,CAAC;AAClB;;;;"}

package/es/components/watermark/src/watermark.mjs

@@ -1,225 +1,32 @@
-import { defineComponent, computed, shallowRef, ref, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, renderSlot } from 'vue';
-import { useMutationObserver } from '@vueuse/core';
-import { watermarkProps } from './watermark2.mjs';
-import { reRendering, getStyleStr, getPixelRatio } from './utils.mjs';
-import useClips, { FontGap } from './useClips.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { isArray } from '@vue/shared';
-import { isUndefined } from '../../../utils/types.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
 
-const __default__ = defineComponent({
-  name: "ElWatermark"
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: watermarkProps,
-  setup(__props) {
-    const props = __props;
-    const style = {
-      position: "relative"
-    };
-    const color = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.color) != null ? _b : "rgba(0,0,0,.15)";
-    });
-    const fontSize = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.fontSize) != null ? _b : 16;
-    });
-    const fontWeight = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.fontWeight) != null ? _b : "normal";
-    });
-    const fontStyle = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.fontStyle) != null ? _b : "normal";
-    });
-    const fontFamily = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.fontFamily) != null ? _b : "sans-serif";
-    });
-    const textAlign = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.textAlign) != null ? _b : "center";
-    });
-    const textBaseline = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.textBaseline) != null ? _b : "hanging";
-    });
-    const gapX = computed(() => props.gap[0]);
-    const gapY = computed(() => props.gap[1]);
-    const gapXCenter = computed(() => gapX.value / 2);
-    const gapYCenter = computed(() => gapY.value / 2);
-    const offsetLeft = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.offset) == null ? void 0 : _a[0]) != null ? _b : gapXCenter.value;
-    });
-    const offsetTop = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.offset) == null ? void 0 : _a[1]) != null ? _b : gapYCenter.value;
-    });
-    const getMarkStyle = () => {
-      const markStyle = {
-        zIndex: props.zIndex,
-        position: "absolute",
-        left: 0,
-        top: 0,
-        width: "100%",
-        height: "100%",
-        pointerEvents: "none",
-        backgroundRepeat: "repeat"
-      };
-      let positionLeft = offsetLeft.value - gapXCenter.value;
-      let positionTop = offsetTop.value - gapYCenter.value;
-      if (positionLeft > 0) {
-        markStyle.left = `${positionLeft}px`;
-        markStyle.width = `calc(100% - ${positionLeft}px)`;
-        positionLeft = 0;
-      }
-      if (positionTop > 0) {
-        markStyle.top = `${positionTop}px`;
-        markStyle.height = `calc(100% - ${positionTop}px)`;
-        positionTop = 0;
-      }
-      markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`;
-      return markStyle;
-    };
-    const containerRef = shallowRef(null);
-    const watermarkRef = shallowRef();
-    const stopObservation = ref(false);
-    const destroyWatermark = () => {
-      if (watermarkRef.value) {
-        watermarkRef.value.remove();
-        watermarkRef.value = void 0;
-      }
-    };
-    const appendWatermark = (base64Url, markWidth) => {
-      var _a;
-      if (containerRef.value && watermarkRef.value) {
-        stopObservation.value = true;
-        watermarkRef.value.setAttribute("style", getStyleStr({
-          ...getMarkStyle(),
-          backgroundImage: `url('${base64Url}')`,
-          backgroundSize: `${Math.floor(markWidth)}px`
-        }));
-        (_a = containerRef.value) == null ? void 0 : _a.append(watermarkRef.value);
-        setTimeout(() => {
-          stopObservation.value = false;
-        });
-      }
-    };
-    const getMarkSize = (ctx) => {
-      let defaultWidth = 120;
-      let defaultHeight = 64;
-      const { image, content, width, height, rotate } = props;
-      if (!image && ctx.measureText) {
-        ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`;
-        const contents = isArray(content) ? content : [content];
-        let maxWidth = 0;
-        let maxHeight = 0;
-        contents.forEach((item) => {
-          const {
-            width: width2,
-            fontBoundingBoxAscent,
-            fontBoundingBoxDescent,
-            actualBoundingBoxAscent,
-            actualBoundingBoxDescent
-          } = ctx.measureText(item);
-          const height2 = isUndefined(fontBoundingBoxAscent) ? actualBoundingBoxAscent + actualBoundingBoxDescent : fontBoundingBoxAscent + fontBoundingBoxDescent;
-          if (width2 > maxWidth)
-            maxWidth = Math.ceil(width2);
-          if (height2 > maxHeight)
-            maxHeight = Math.ceil(height2);
-        });
-        defaultWidth = maxWidth;
-        defaultHeight = maxHeight * contents.length + (contents.length - 1) * FontGap;
-        const angle = Math.PI / 180 * Number(rotate);
-        const space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2);
-        defaultWidth += space;
-      }
-      return [width != null ? width : defaultWidth, height != null ? height : defaultHeight];
-    };
-    const getClips = useClips();
-    const renderWatermark = () => {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      const image = props.image;
-      const content = props.content;
-      const rotate = props.rotate;
-      if (ctx) {
-        if (!watermarkRef.value) {
-          watermarkRef.value = document.createElement("div");
-        }
-        const ratio = getPixelRatio();
-        const [markWidth, markHeight] = getMarkSize(ctx);
-        const drawCanvas = (drawContent) => {
-          const [textClips, clipWidth] = getClips(drawContent || "", rotate, ratio, markWidth, markHeight, {
-            color: color.value,
-            fontSize: fontSize.value,
-            fontStyle: fontStyle.value,
-            fontWeight: fontWeight.value,
-            fontFamily: fontFamily.value,
-            textAlign: textAlign.value,
-            textBaseline: textBaseline.value
-          }, gapX.value, gapY.value);
-          appendWatermark(textClips, clipWidth);
-        };
-        if (image) {
-          const img = new Image();
-          img.onload = () => {
-            drawCanvas(img);
-          };
-          img.onerror = () => {
-            drawCanvas(content);
-          };
-          img.crossOrigin = "anonymous";
-          img.referrerPolicy = "no-referrer";
-          img.src = image;
-        } else {
-          drawCanvas(content);
-        }
-      }
-    };
-    onMounted(() => {
-      renderWatermark();
-    });
-    watch(() => props, () => {
-      renderWatermark();
-    }, {
-      deep: true,
-      flush: "post"
-    });
-    onBeforeUnmount(() => {
-      destroyWatermark();
-    });
-    const onMutate = (mutations) => {
-      if (stopObservation.value) {
-        return;
-      }
-      mutations.forEach((mutation) => {
-        if (reRendering(mutation, watermarkRef.value)) {
-          destroyWatermark();
-          renderWatermark();
-        }
-      });
-    };
-    useMutationObserver(containerRef, onMutate, {
-      attributes: true,
-      subtree: true,
-      childList: true
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "containerRef",
-        ref: containerRef,
-        style: normalizeStyle([style])
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 4);
-    };
+const watermarkProps = buildProps({
+  zIndex: {
+    type: Number,
+    default: 9
+  },
+  rotate: {
+    type: Number,
+    default: -22
+  },
+  width: Number,
+  height: Number,
+  image: String,
+  content: {
+    type: definePropType([String, Array]),
+    default: "Element Plus"
+  },
+  font: {
+    type: definePropType(Object)
+  },
+  gap: {
+    type: definePropType(Array),
+    default: () => [100, 100]
+  },
+  offset: {
+    type: definePropType(Array)
   }
 });
-var Watermark = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "watermark.vue"]]);
 
-export { Watermark as default };
+export { watermarkProps };
 //# sourceMappingURL=watermark.mjs.map

package/es/components/watermark/src/watermark.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"watermark.mjs","sources":["../../../../../../packages/components/watermark/src/watermark.vue"],"sourcesContent":["<template>\n  <div ref=\"containerRef\" :style=\"[style]\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { useMutationObserver } from '@vueuse/core'\nimport { isArray, isUndefined } from '@element-plus/utils'\nimport { watermarkProps } from './watermark'\nimport { getPixelRatio, getStyleStr, reRendering } from './utils'\nimport useClips, { FontGap } from './useClips'\n\nimport type { WatermarkProps } from './watermark'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElWatermark',\n})\n\nconst style: CSSProperties = {\n  position: 'relative',\n}\n\nconst props = defineProps(watermarkProps)\nconst color = computed(() => props.font?.color ?? 'rgba(0,0,0,.15)')\nconst fontSize = computed(() => props.font?.fontSize ?? 16)\nconst fontWeight = computed(() => props.font?.fontWeight ?? 'normal')\nconst fontStyle = computed(() => props.font?.fontStyle ?? 'normal')\nconst fontFamily = computed(() => props.font?.fontFamily ?? 'sans-serif')\nconst textAlign = computed(() => props.font?.textAlign ?? 'center')\nconst textBaseline = computed(() => props.font?.textBaseline ?? 'hanging')\n\nconst gapX = computed(() => props.gap[0])\nconst gapY = computed(() => props.gap[1])\nconst gapXCenter = computed(() => gapX.value / 2)\nconst gapYCenter = computed(() => gapY.value / 2)\nconst offsetLeft = computed(() => props.offset?.[0] ?? gapXCenter.value)\nconst offsetTop = computed(() => props.offset?.[1] ?? gapYCenter.value)\n\nconst getMarkStyle = () => {\n  const markStyle: CSSProperties = {\n    zIndex: props.zIndex,\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none',\n    backgroundRepeat: 'repeat',\n  }\n\n  /** Calculate the style of the offset */\n  let positionLeft = offsetLeft.value - gapXCenter.value\n  let positionTop = offsetTop.value - gapYCenter.value\n  if (positionLeft > 0) {\n    markStyle.left = `${positionLeft}px`\n    markStyle.width = `calc(100% - ${positionLeft}px)`\n    positionLeft = 0\n  }\n  if (positionTop > 0) {\n    markStyle.top = `${positionTop}px`\n    markStyle.height = `calc(100% - ${positionTop}px)`\n    positionTop = 0\n  }\n  markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`\n\n  return markStyle\n}\n\nconst containerRef = shallowRef<HTMLDivElement | null>(null)\nconst watermarkRef = shallowRef<HTMLDivElement>()\nconst stopObservation = ref(false)\n\nconst destroyWatermark = () => {\n  if (watermarkRef.value) {\n    watermarkRef.value.remove()\n    watermarkRef.value = undefined\n  }\n}\nconst appendWatermark = (base64Url: string, markWidth: number) => {\n  if (containerRef.value && watermarkRef.value) {\n    stopObservation.value = true\n    watermarkRef.value.setAttribute(\n      'style',\n      getStyleStr({\n        ...getMarkStyle(),\n        backgroundImage: `url('${base64Url}')`,\n        backgroundSize: `${Math.floor(markWidth)}px`,\n      })\n    )\n    containerRef.value?.append(watermarkRef.value)\n    // Delayed execution\n    setTimeout(() => {\n      stopObservation.value = false\n    })\n  }\n}\n\n/**\n * Get the width and height of the watermark. The default values are as follows\n * Image: [120, 64]; Content: It's calculated by content;\n */\nconst getMarkSize = (ctx: CanvasRenderingContext2D) => {\n  let defaultWidth = 120\n  let defaultHeight = 64\n\n  const { image, content, width, height, rotate } = props\n\n  if (!image && ctx.measureText) {\n    ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`\n\n    const contents = isArray(content) ? content : [content]\n    let maxWidth = 0\n    let maxHeight = 0\n\n    contents.forEach((item) => {\n      const {\n        width,\n        fontBoundingBoxAscent,\n        fontBoundingBoxDescent,\n        actualBoundingBoxAscent,\n        actualBoundingBoxDescent,\n      } = ctx.measureText(item!)\n      // Using `actualBoundingBoxAscent` to be compatible with lower version browsers (eg: Firefox < 116)\n      const height = isUndefined(fontBoundingBoxAscent)\n        ? actualBoundingBoxAscent + actualBoundingBoxDescent\n        : fontBoundingBoxAscent + fontBoundingBoxDescent\n\n      if (width > maxWidth) maxWidth = Math.ceil(width)\n      if (height > maxHeight) maxHeight = Math.ceil(height)\n    })\n\n    defaultWidth = maxWidth\n    defaultHeight =\n      maxHeight * contents.length + (contents.length - 1) * FontGap\n\n    const angle = (Math.PI / 180) * Number(rotate)\n    const space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2)\n\n    defaultWidth += space\n  }\n\n  return [width ?? defaultWidth, height ?? defaultHeight] as const\n}\n\nconst getClips = useClips()\n\nconst renderWatermark = () => {\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n  const image = props.image\n  const content = props.content\n  const rotate = props.rotate\n\n  if (ctx) {\n    if (!watermarkRef.value) {\n      watermarkRef.value = document.createElement('div')\n    }\n\n    const ratio = getPixelRatio()\n    const [markWidth, markHeight] = getMarkSize(ctx)\n\n    const drawCanvas = (\n      drawContent?: NonNullable<WatermarkProps['content']> | HTMLImageElement\n    ) => {\n      const [textClips, clipWidth] = getClips(\n        drawContent || '',\n        rotate,\n        ratio,\n        markWidth,\n        markHeight,\n        {\n          color: color.value,\n          fontSize: fontSize.value,\n          fontStyle: fontStyle.value,\n          fontWeight: fontWeight.value,\n          fontFamily: fontFamily.value,\n          textAlign: textAlign.value,\n          textBaseline: textBaseline.value,\n        },\n        gapX.value,\n        gapY.value\n      )\n\n      appendWatermark(textClips, clipWidth)\n    }\n\n    if (image) {\n      const img = new Image()\n      img.onload = () => {\n        drawCanvas(img)\n      }\n      img.onerror = () => {\n        drawCanvas(content)\n      }\n      img.crossOrigin = 'anonymous'\n      img.referrerPolicy = 'no-referrer'\n      img.src = image\n    } else {\n      drawCanvas(content)\n    }\n  }\n}\n\nonMounted(() => {\n  renderWatermark()\n})\n\nwatch(\n  () => props,\n  () => {\n    renderWatermark()\n  },\n  {\n    deep: true,\n    flush: 'post',\n  }\n)\n\nonBeforeUnmount(() => {\n  destroyWatermark()\n})\n\nconst onMutate = (mutations: MutationRecord[]) => {\n  if (stopObservation.value) {\n    return\n  }\n  mutations.forEach((mutation) => {\n    if (reRendering(mutation, watermarkRef.value)) {\n      destroyWatermark()\n      renderWatermark()\n    }\n  })\n}\n\nuseMutationObserver(containerRef, onMutate, {\n  attributes: true,\n  subtree: true,\n  childList: true,\n})\n</script>\n"],"names":["width","height"],"mappings":"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"}
+{"version":3,"file":"watermark.mjs","sources":["../../../../../../packages/components/watermark/src/watermark.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\nimport type Watermark from './watermark.vue'\n\nexport interface WatermarkFontType {\n  color?: string\n  fontSize?: number | string\n  fontWeight?: 'normal' | 'light' | 'weight' | number\n  fontStyle?: 'none' | 'normal' | 'italic' | 'oblique'\n  fontFamily?: string\n  textAlign?: 'start' | 'end' | 'left' | 'right' | 'center'\n  textBaseline?:\n    | 'top'\n    | 'hanging'\n    | 'middle'\n    | 'alphabetic'\n    | 'ideographic'\n    | 'bottom'\n}\n\nexport const watermarkProps = buildProps({\n  /**\n   * @description The z-index of the appended watermark element\n   */\n  zIndex: {\n    type: Number,\n    default: 9,\n  },\n  /**\n   * @description The rotation angle of the watermark\n   */\n  rotate: {\n    type: Number,\n    default: -22,\n  },\n  /**\n   * @description The width of the watermark\n   */\n  width: Number,\n  /**\n   * @description The height of the watermark\n   */\n  height: Number,\n  /**\n   * @description Image source, it is recommended to export 2x or 3x image, high priority (support base64 format)\n   */\n  image: String,\n  /**\n   * @description Watermark text content\n   */\n  content: {\n    type: definePropType<string | string[]>([String, Array]),\n    default: 'Element Plus',\n  },\n  /**\n   * @description Text style\n   */\n  font: {\n    type: definePropType<WatermarkFontType>(Object),\n  },\n  /**\n   * @description The spacing between watermarks\n   */\n  gap: {\n    type: definePropType<[number, number]>(Array),\n    default: () => [100, 100],\n  },\n  /**\n   * @description The offset of the watermark from the upper left corner of the container. The default is gap/2\n   */\n  offset: {\n    type: definePropType<[number, number]>(Array),\n  },\n} as const)\n\nexport type WatermarkProps = ExtractPropTypes<typeof watermarkProps>\nexport type WatermarkPropsPublic = __ExtractPublicPropTypes<\n  typeof watermarkProps\n>\nexport type WatermarkInstance = InstanceType<typeof Watermark> & unknown\n"],"names":[],"mappings":";;AACY,MAAC,cAAc,GAAG,UAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC,EAAE;AAChB,GAAG;AACH,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACzC,IAAI,OAAO,EAAE,cAAc;AAC3B,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC;AAC7B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,GAAG;AACH,CAAC;;;;"}

package/es/components/watermark/src/watermark2.mjs

@@ -1,32 +1,226 @@
-import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
+import { defineComponent, computed, shallowRef, ref, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, renderSlot } from 'vue';
+import { useMutationObserver } from '@vueuse/core';
+import { watermarkProps } from './watermark.mjs';
+import { reRendering, getStyleStr, getPixelRatio } from './utils.mjs';
+import useClips, { FontGap } from './useClips.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { isArray } from '@vue/shared';
+import { isUndefined } from '../../../utils/types.mjs';
 
-const watermarkProps = buildProps({
-  zIndex: {
-    type: Number,
-    default: 9
-  },
-  rotate: {
-    type: Number,
-    default: -22
-  },
-  width: Number,
-  height: Number,
-  image: String,
-  content: {
-    type: definePropType([String, Array]),
-    default: "Element Plus"
-  },
-  font: {
-    type: definePropType(Object)
-  },
-  gap: {
-    type: definePropType(Array),
-    default: () => [100, 100]
-  },
-  offset: {
-    type: definePropType(Array)
+const __default__ = defineComponent({
+  name: "ElWatermark"
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: watermarkProps,
+  setup(__props) {
+    const props = __props;
+    const style = {
+      position: "relative"
+    };
+    const color = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.color) != null ? _b : "rgba(0,0,0,.15)";
+    });
+    const fontSize = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.fontSize) != null ? _b : 16;
+    });
+    const fontWeight = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.fontWeight) != null ? _b : "normal";
+    });
+    const fontStyle = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.fontStyle) != null ? _b : "normal";
+    });
+    const fontFamily = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.fontFamily) != null ? _b : "sans-serif";
+    });
+    const textAlign = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.textAlign) != null ? _b : "center";
+    });
+    const textBaseline = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.textBaseline) != null ? _b : "hanging";
+    });
+    const gapX = computed(() => props.gap[0]);
+    const gapY = computed(() => props.gap[1]);
+    const gapXCenter = computed(() => gapX.value / 2);
+    const gapYCenter = computed(() => gapY.value / 2);
+    const offsetLeft = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.offset) == null ? void 0 : _a[0]) != null ? _b : gapXCenter.value;
+    });
+    const offsetTop = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.offset) == null ? void 0 : _a[1]) != null ? _b : gapYCenter.value;
+    });
+    const getMarkStyle = () => {
+      const markStyle = {
+        zIndex: props.zIndex,
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        backgroundRepeat: "repeat"
+      };
+      let positionLeft = offsetLeft.value - gapXCenter.value;
+      let positionTop = offsetTop.value - gapYCenter.value;
+      if (positionLeft > 0) {
+        markStyle.left = `${positionLeft}px`;
+        markStyle.width = `calc(100% - ${positionLeft}px)`;
+        positionLeft = 0;
+      }
+      if (positionTop > 0) {
+        markStyle.top = `${positionTop}px`;
+        markStyle.height = `calc(100% - ${positionTop}px)`;
+        positionTop = 0;
+      }
+      markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`;
+      return markStyle;
+    };
+    const containerRef = shallowRef(null);
+    const watermarkRef = shallowRef();
+    const stopObservation = ref(false);
+    const destroyWatermark = () => {
+      if (watermarkRef.value) {
+        watermarkRef.value.remove();
+        watermarkRef.value = void 0;
+      }
+    };
+    const appendWatermark = (base64Url, markWidth) => {
+      var _a;
+      if (containerRef.value && watermarkRef.value) {
+        stopObservation.value = true;
+        watermarkRef.value.setAttribute("style", getStyleStr({
+          ...getMarkStyle(),
+          backgroundImage: `url('${base64Url}')`,
+          backgroundSize: `${Math.floor(markWidth)}px`
+        }));
+        (_a = containerRef.value) == null ? void 0 : _a.append(watermarkRef.value);
+        setTimeout(() => {
+          stopObservation.value = false;
+        });
+      }
+    };
+    const getMarkSize = (ctx) => {
+      let defaultWidth = 120;
+      let defaultHeight = 64;
+      let space = 0;
+      const { image, content, width, height, rotate } = props;
+      if (!image && ctx.measureText) {
+        ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`;
+        const contents = isArray(content) ? content : [content];
+        let maxWidth = 0;
+        let maxHeight = 0;
+        contents.forEach((item) => {
+          const {
+            width: width2,
+            fontBoundingBoxAscent,
+            fontBoundingBoxDescent,
+            actualBoundingBoxAscent,
+            actualBoundingBoxDescent
+          } = ctx.measureText(item);
+          const height2 = isUndefined(fontBoundingBoxAscent) ? actualBoundingBoxAscent + actualBoundingBoxDescent : fontBoundingBoxAscent + fontBoundingBoxDescent;
+          if (width2 > maxWidth)
+            maxWidth = Math.ceil(width2);
+          if (height2 > maxHeight)
+            maxHeight = Math.ceil(height2);
+        });
+        defaultWidth = maxWidth;
+        defaultHeight = maxHeight * contents.length + (contents.length - 1) * FontGap;
+        const angle = Math.PI / 180 * Number(rotate);
+        space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2);
+        defaultWidth += space;
+      }
+      return [width != null ? width : defaultWidth, height != null ? height : defaultHeight, space];
+    };
+    const getClips = useClips();
+    const renderWatermark = () => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      const image = props.image;
+      const content = props.content;
+      const rotate = props.rotate;
+      if (ctx) {
+        if (!watermarkRef.value) {
+          watermarkRef.value = document.createElement("div");
+        }
+        const ratio = getPixelRatio();
+        const [markWidth, markHeight, space] = getMarkSize(ctx);
+        const drawCanvas = (drawContent) => {
+          const [textClips, clipWidth] = getClips(drawContent || "", rotate, ratio, markWidth, markHeight, {
+            color: color.value,
+            fontSize: fontSize.value,
+            fontStyle: fontStyle.value,
+            fontWeight: fontWeight.value,
+            fontFamily: fontFamily.value,
+            textAlign: textAlign.value,
+            textBaseline: textBaseline.value
+          }, gapX.value, gapY.value, space);
+          appendWatermark(textClips, clipWidth);
+        };
+        if (image) {
+          const img = new Image();
+          img.onload = () => {
+            drawCanvas(img);
+          };
+          img.onerror = () => {
+            drawCanvas(content);
+          };
+          img.crossOrigin = "anonymous";
+          img.referrerPolicy = "no-referrer";
+          img.src = image;
+        } else {
+          drawCanvas(content);
+        }
+      }
+    };
+    onMounted(() => {
+      renderWatermark();
+    });
+    watch(() => props, () => {
+      renderWatermark();
+    }, {
+      deep: true,
+      flush: "post"
+    });
+    onBeforeUnmount(() => {
+      destroyWatermark();
+    });
+    const onMutate = (mutations) => {
+      if (stopObservation.value) {
+        return;
+      }
+      mutations.forEach((mutation) => {
+        if (reRendering(mutation, watermarkRef.value)) {
+          destroyWatermark();
+          renderWatermark();
+        }
+      });
+    };
+    useMutationObserver(containerRef, onMutate, {
+      attributes: true,
+      subtree: true,
+      childList: true
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        style: normalizeStyle([style])
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 4);
+    };
   }
 });
+var Watermark = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "watermark.vue"]]);
 
-export { watermarkProps };
+export { Watermark as default };
 //# sourceMappingURL=watermark2.mjs.map