ele-admin-plus 1.4.0 → 1.4.1

package/es/ele-watermark/index.js

@@ -1,6 +1,17 @@
-import { defineComponent, ref, nextTick, onMounted, watch, createElementBlock, openBlock, normalizeStyle, renderSlot, createCommentVNode } from "vue";
-import { useMutation, getFont, getPixelRatio, getGap, rotateWatermark, joinStyle } from "./util";
+import { defineComponent, ref, nextTick, useId, computed, inject, watch, onMounted, createElementBlock, openBlock, normalizeStyle, renderSlot, createCommentVNode, Fragment, createElementVNode, unref, renderList, toDisplayString } from "vue";
+import { useMutation, joinStyle, INFO_LOG_KEY, getPixelRatio, rotateWatermark } from "./util";
 import { watermarkProps } from "./props";
+const _hoisted_1 = ["id", "width", "height"];
+const _hoisted_2 = ["transform"];
+const _hoisted_3 = ["href", "width", "height", "x", "y"];
+const _hoisted_4 = ["transform"];
+const _hoisted_5 = ["href", "width", "height", "x", "y"];
+const _hoisted_6 = ["id", "width", "height"];
+const _hoisted_7 = ["transform"];
+const _hoisted_8 = ["x", "y", "fill", "font-size", "font-weight", "font-family", "font-style"];
+const _hoisted_9 = ["transform"];
+const _hoisted_10 = ["x", "y", "fill", "font-size", "font-weight", "font-family", "font-style"];
+const _hoisted_11 = ["fill", "transform"];
 const SIZE = 2;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "EleWatermark" },
@@ -8,7 +19,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: watermarkProps,
   setup(__props) {
     const props = __props;
-    const { observe, disconnect } = useMutation({
+    const { observe, observeTextNode, disconnect } = useMutation({
       getRoot: () => rootRef.value,
       getEl: () => imgRef.value,
       onDeleted: () => {
@@ -22,92 +33,121 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         render();
       }
     });
+    const svgId = useId();
     const rootKey = ref(1);
     const rootRef = ref(null);
     const imgRef = ref(null);
-    const imgStyle = ref({ display: "none" });
-    const updateStyle = (base64, size) => {
+    const imgStyle = ref(joinStyle({ display: "none" }));
+    const markWidth = computed(() => {
+      return props.width ?? 120;
+    });
+    const markHeight = computed(() => {
+      return props.height ?? 64;
+    });
+    const markGapX = computed(() => {
+      var _a;
+      return ((_a = props.gap) == null ? void 0 : _a[0]) ?? 100;
+    });
+    const markGapY = computed(() => {
+      var _a;
+      return ((_a = props.gap) == null ? void 0 : _a[1]) ?? 100;
+    });
+    const markOffsetX = computed(() => {
+      var _a;
+      return ((_a = props.offset) == null ? void 0 : _a[0]) ?? markGapX.value / 2;
+    });
+    const markOffsetY = computed(() => {
+      var _a;
+      return ((_a = props.offset) == null ? void 0 : _a[1]) ?? markGapY.value / 2;
+    });
+    const markFont = computed(() => {
+      return {
+        color: "rgba(122, 122, 122, 0.35)",
+        fontSize: 16,
+        fontWeight: "normal",
+        fontFamily: "sans-serif",
+        fontStyle: "normal",
+        ...props.font || {}
+      };
+    });
+    const markContents = computed(() => {
+      if (typeof props.content === "string") {
+        return [props.content];
+      }
+      return props.content || [];
+    });
+    const markCommonStyle = computed(() => {
       const position = props.fixed ? "fixed" : "absolute";
       const width = props.fixed ? "100vw" : "100%";
       const height = props.fixed ? "100vh" : "100%";
-      const style = {
+      return {
         position: `${position} !important`,
         top: "0 !important",
         left: "0 !important",
-        right: "auto !important",
-        bottom: "auto !important",
+        right: "0 !important",
+        bottom: "0 !important",
         width: `${width} !important`,
         height: `${height} !important`,
+        zIndex: `${props.zIndex ?? 2147483647} !important`,
         pointerEvents: "none !important",
-        backgroundRepeat: "repeat !important",
-        opacity: "1 !important",
-        transform: "none !important",
-        filter: "none !important",
-        visibility: "visible !important",
-        transition: "none !important",
-        maxWidth: "none !important",
-        maxHeight: "none !important",
-        zoom: "1 !important",
-        mask: "none !important",
-        clipPath: "none !important",
-        display: "block !important",
         ...props.customStyle || {}
       };
+    });
+    const infoLog = inject(INFO_LOG_KEY, void 0);
+    const svgStyle = computed(() => joinStyle(markCommonStyle.value));
+    const updateStyle = (base64, imgWidth, imgHeight) => {
+      disconnect();
+      const style = { ...markCommonStyle.value };
       if (!base64) {
         style.display = "none !important";
       } else {
         style.backgroundImage = `url('${base64}') !important`;
-        if (size) {
-          style.backgroundSize = `${size} !important`;
+        style.backgroundSize = `${imgWidth}px ${imgHeight}px !important`;
+        let positionLeft = markOffsetX.value - markGapX.value / 2;
+        let positionTop = markOffsetY.value - markGapY.value / 2;
+        if (positionLeft > 0) {
+          style.left = `${positionLeft}px !important`;
+          style.width = `calc(100% - ${positionLeft}px) !important`;
+          positionLeft = 0;
+        }
+        if (positionTop > 0) {
+          style.top = `${positionTop}px !important`;
+          style.height = `calc(100% - ${positionTop}px) !important`;
+          positionTop = 0;
         }
-        style.zIndex = `${props.zIndex ?? 2147483647} !important`;
+        style.backgroundPosition = `${positionLeft}px ${positionTop}px !important`;
       }
-      disconnect();
-      if (imgRef.value && imgRef.value.style && imgRef.value.style.cssText) {
-        imgRef.value.style.cssText = joinStyle(style);
+      imgStyle.value = joinStyle(style);
+      nextTick(() => {
         observe();
-      } else {
-        imgStyle.value = style;
-        nextTick(() => {
-          observe();
-        });
-      }
-    };
-    const getDefaultWidth = (ctx) => {
-      if (props.image || !ctx.measureText) {
-        return 120;
-      }
-      const content = props.content;
-      const contents = Array.isArray(content) ? content : [content];
-      const widths = contents.map((item) => ctx.measureText(item).width);
-      return Math.ceil(Math.max(...widths));
-    };
-    const getDefaultHeight = (ctx) => {
-      if (props.image || !ctx.measureText) {
-        return 64;
-      }
-      const lines = Array.isArray(props.content) ? props.content.length : 1;
-      const { fontSize } = getFont(props.font);
-      return fontSize * lines + (lines - 1) * props.lineGap;
+      });
     };
     const getMarkSize = (ctx) => {
-      const width = props.width;
-      const height = props.height;
-      return [width ?? getDefaultWidth(ctx), height ?? getDefaultHeight(ctx)];
+      if (props.image || props.width != null && props.height != null || !ctx.measureText) {
+        return [markWidth.value, markHeight.value];
+      }
+      const widths = markContents.value.map(
+        (text) => ctx.measureText(text).width
+      );
+      const textWidth = Math.ceil(Math.max(...widths));
+      const lines = markContents.value.length;
+      const { fontSize } = markFont.value;
+      const textHeight = fontSize * lines + (lines - 1) * props.lineGap;
+      return [props.width ?? textWidth, props.height ?? textHeight];
     };
+    const froined = computed(() => !!(infoLog && !infoLog.froined));
+    const isDisabled = computed(() => !(!props.disabled || froined.value));
     const fillTexts = (ctx, drawX, drawY, drawWidth, drawHeight) => {
       const ratio = getPixelRatio();
-      const { color, fontSize, fontStyle, fontWeight, fontFamily } = getFont(
-        props.font
-      );
+      const { color, fontSize, fontStyle, fontWeight, fontFamily } = markFont.value;
       const mergedFontSize = fontSize * ratio;
-      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${drawHeight}px ${fontFamily}`;
       ctx.fillStyle = color;
+      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${drawHeight}px ${fontFamily}`;
+      const froin = "el-n-d-s-p";
       ctx.textAlign = "center";
       ctx.textBaseline = "top";
       ctx.translate(drawWidth / 2, 0);
-      const content = props.content;
-      const contents = Array.isArray(content) ? content : [content];
+      const contents = froined.value ? [`e${observeTextNode(froin)}`.toUpperCase()] : markContents.value;
       contents.forEach((item, index) => {
         ctx.fillText(
           item ?? "",
@@ -117,9 +157,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     };
     const render = () => {
-      if (props.disabled) {
+      if (props.svgRender || isDisabled.value) {
         disconnect();
-        imgStyle.value = { display: "none" };
+        imgStyle.value = joinStyle({ display: "none" });
         return;
       }
       const canvas = document.createElement("canvas");
@@ -127,20 +167,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!ctx) {
         return;
       }
-      const rotate = props.rotate ?? -22;
+      const rotate = props.rotate;
+      const gapX = markGapX.value;
+      const gapY = markGapY.value;
       if (!props.image && ctx.measureText != null) {
-        const { fontSize, fontFamily } = getFont(props.font);
+        const { fontSize, fontFamily } = markFont.value;
         ctx.font = `${fontSize}px ${fontFamily}`;
       }
-      const [markWidth, markHeight] = getMarkSize(ctx);
+      const [markWidth2, markHeight2] = getMarkSize(ctx);
       const ratio = getPixelRatio();
-      const [gapX, gapY] = getGap(props.gap);
-      const canvasWidth = (gapX + markWidth) * ratio;
-      const canvasHeight = (gapY + markHeight) * ratio;
+      const canvasWidth = (gapX + markWidth2) * ratio;
+      const canvasHeight = (gapY + markHeight2) * ratio;
       canvas.setAttribute("width", `${canvasWidth * SIZE}px`);
       canvas.setAttribute("height", `${canvasHeight * SIZE}px`);
-      const drawWidth = markWidth * ratio;
-      const drawHeight = markHeight * ratio;
+      const drawWidth = markWidth2 * ratio;
+      const drawHeight = markHeight2 * ratio;
       const rotateX = (drawWidth + gapX * ratio) / 2;
       const rotateY = (drawHeight + gapY * ratio) / 2;
       ctx.save();
@@ -155,52 +196,173 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const img = new Image();
         img.onload = () => {
           ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
-          ctx.restore();
-          rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
-          ctx.drawImage(
-            img,
-            alternateDrawX,
-            alternateDrawY,
-            drawWidth,
-            drawHeight
+          {
+            ctx.restore();
+            rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
+            ctx.drawImage(
+              img,
+              alternateDrawX,
+              alternateDrawY,
+              drawWidth,
+              drawHeight
+            );
+          }
+          updateStyle(
+            canvas.toDataURL(),
+            (gapX + markWidth2) * SIZE,
+            (gapY + markHeight2) * SIZE
           );
-          updateStyle(canvas.toDataURL(), `${(gapX + markWidth) * SIZE}px`);
         };
         img.crossOrigin = "anonymous";
         img.referrerPolicy = "no-referrer";
         img.src = props.image;
       } else {
         fillTexts(ctx, drawX, drawY, drawWidth, drawHeight);
-        ctx.restore();
-        rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
-        fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight);
-        updateStyle(canvas.toDataURL(), `${(gapX + markWidth) * SIZE}px`);
+        {
+          ctx.restore();
+          rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
+          fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight);
+        }
+        updateStyle(
+          canvas.toDataURL(),
+          (gapX + markWidth2) * SIZE,
+          (gapY + markHeight2) * SIZE
+        );
       }
     };
-    onMounted(() => {
-      render();
-    });
     watch(
-      () => props,
+      [
+        () => props.rotate,
+        () => props.image,
+        () => props.lineGap,
+        () => props.svgRender,
+        markWidth,
+        markHeight,
+        markGapX,
+        markGapY,
+        markOffsetX,
+        markOffsetY,
+        markFont,
+        markContents,
+        markCommonStyle,
+        isDisabled
+      ],
       () => {
         render();
       },
       { deep: true }
     );
+    onMounted(() => {
+      render();
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "rootRef",
         ref: rootRef,
         key: rootKey.value,
-        style: normalizeStyle(!_ctx.wrapPosition || _ctx.fixed ? void 0 : { position: "relative" })
+        style: normalizeStyle([
+          props.wrapHeight == null ? {} : { height: props.wrapHeight },
+          !_ctx.wrapPosition || _ctx.fixed ? {} : { position: "relative" }
+        ])
       }, [
         renderSlot(_ctx.$slots, "default"),
-        !_ctx.disabled ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          ref_key: "imgRef",
-          ref: imgRef,
-          style: normalizeStyle(imgStyle.value)
-        }, null, 4)) : createCommentVNode("", true)
+        !isDisabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          _ctx.svgRender ? (openBlock(), createElementBlock("svg", {
+            key: 0,
+            style: normalizeStyle(svgStyle.value)
+          }, [
+            createElementVNode("defs", null, [
+              _ctx.image ? (openBlock(), createElementBlock("pattern", {
+                key: 0,
+                id: `imgPattern-${unref(svgId)}`,
+                patternUnits: "userSpaceOnUse",
+                width: (markWidth.value + markGapX.value) * SIZE,
+                height: (markHeight.value + markGapY.value) * SIZE
+              }, [
+                createElementVNode("g", {
+                  transform: `rotate(${_ctx.rotate}, ${(markWidth.value + markGapX.value) / 2}, ${(markHeight.value + markGapY.value) / 2})`
+                }, [
+                  createElementVNode("image", {
+                    href: _ctx.image,
+                    width: markWidth.value,
+                    height: markHeight.value,
+                    x: markGapX.value / 2,
+                    y: markGapY.value / 2
+                  }, null, 8, _hoisted_3)
+                ], 8, _hoisted_2),
+                (openBlock(), createElementBlock("g", {
+                  key: 0,
+                  transform: `rotate(${_ctx.rotate}, ${(markWidth.value + markGapX.value) / 2 + markWidth.value + markGapX.value}, ${(markHeight.value + markGapY.value) / 2 + markHeight.value + markGapY.value})`
+                }, [
+                  createElementVNode("image", {
+                    href: _ctx.image,
+                    width: markWidth.value,
+                    height: markHeight.value,
+                    x: markGapX.value / 2 + markWidth.value + markGapX.value,
+                    y: markGapY.value / 2 + markHeight.value + markGapY.value
+                  }, null, 8, _hoisted_5)
+                ], 8, _hoisted_4))
+              ], 8, _hoisted_1)) : (openBlock(), createElementBlock("pattern", {
+                key: 1,
+                id: `textPattern-${unref(svgId)}`,
+                patternUnits: "userSpaceOnUse",
+                width: (markWidth.value + markGapX.value) * SIZE,
+                height: (markHeight.value + markGapY.value) * SIZE
+              }, [
+                createElementVNode("g", {
+                  transform: `rotate(${_ctx.rotate}, ${(markWidth.value + markGapX.value) / 2}, ${(markHeight.value + markGapY.value) / 2})`
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(markContents.value, (text, index) => {
+                    return openBlock(), createElementBlock("text", {
+                      key: index,
+                      x: (markWidth.value + markGapX.value) / 2,
+                      y: markGapY.value / 2 + index * (markFont.value.fontSize + _ctx.lineGap),
+                      fill: markFont.value.color,
+                      "font-size": markFont.value.fontSize,
+                      "font-weight": markFont.value.fontWeight,
+                      "font-family": markFont.value.fontFamily,
+                      "font-style": markFont.value.fontStyle,
+                      "text-anchor": "middle",
+                      "alignment-baseline": "hanging",
+                      "vector-effect": "non-scaling-stroke"
+                    }, toDisplayString(text), 9, _hoisted_8);
+                  }), 128))
+                ], 8, _hoisted_7),
+                (openBlock(), createElementBlock("g", {
+                  key: 0,
+                  transform: `rotate(${_ctx.rotate}, ${(markWidth.value + markGapX.value) / 2 + markWidth.value + markGapX.value}, ${(markHeight.value + markGapY.value) / 2 + markHeight.value + markGapY.value})`
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(markContents.value, (text, index) => {
+                    return openBlock(), createElementBlock("text", {
+                      key: index,
+                      x: (markWidth.value + markGapX.value) / 2 + markWidth.value + markGapX.value,
+                      y: markGapY.value / 2 + index * (markFont.value.fontSize + _ctx.lineGap) + markHeight.value + markGapY.value,
+                      fill: markFont.value.color,
+                      "font-size": markFont.value.fontSize,
+                      "font-weight": markFont.value.fontWeight,
+                      "font-family": markFont.value.fontFamily,
+                      "font-style": markFont.value.fontStyle,
+                      "text-anchor": "middle",
+                      "alignment-baseline": "hanging",
+                      "vector-effect": "non-scaling-stroke"
+                    }, toDisplayString(text), 9, _hoisted_10);
+                  }), 128))
+                ], 8, _hoisted_9))
+              ], 8, _hoisted_6))
+            ]),
+            createElementVNode("rect", {
+              width: "100%",
+              height: "100%",
+              fill: `url(#${_ctx.image ? "img" : "text"}Pattern-${unref(svgId)})`,
+              transform: `translate(${markOffsetX.value - markGapX.value / 2}, ${markOffsetY.value - markGapY.value / 2})`
+            }, null, 8, _hoisted_11)
+          ], 4)) : (openBlock(), createElementBlock("div", {
+            key: 1,
+            ref_key: "imgRef",
+            ref: imgRef,
+            style: normalizeStyle(imgStyle.value)
+          }, null, 4))
+        ], 64)) : createCommentVNode("", true)
       ], 4);
     };
   }

package/es/ele-watermark/props.d.ts

@@ -8,7 +8,10 @@ export declare const watermarkProps: {
     /** 高度 */
     height: NumberConstructor;
     /** 旋转角度 */
-    rotate: NumberConstructor;
+    rotate: {
+        type: NumberConstructor;
+        default: number;
+    };
     /** 层级 */
     zIndex: NumberConstructor;
     /** 图片源 */
@@ -28,6 +31,10 @@ export declare const watermarkProps: {
     };
     /** 自定义样式 */
     customStyle: PropType<Exclude<StyleValue, string>>;
+    /** 是否使用 svg 渲染 */
+    svgRender: BooleanConstructor;
+    /** 是否禁用 */
+    disabled: BooleanConstructor;
     /** 是否使用固定定位 */
     fixed: BooleanConstructor;
     /** 是否为外层添加定位样式 */
@@ -35,7 +42,7 @@ export declare const watermarkProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 是否禁用 */
-    disabled: BooleanConstructor;
+    /** 外层高度 */
+    wrapHeight: StringConstructor;
 };
 export type WatermarkProps = ExtractPropTypes<typeof watermarkProps>;

package/es/ele-watermark/props.js

@@ -4,7 +4,10 @@ const watermarkProps = {
   /** 高度 */
   height: Number,
   /** 旋转角度 */
-  rotate: Number,
+  rotate: {
+    type: Number,
+    default: -22
+  },
   /** 层级 */
   zIndex: Number,
   /** 图片源 */
@@ -24,6 +27,10 @@ const watermarkProps = {
   },
   /** 自定义样式 */
   customStyle: Object,
+  /** 是否使用 svg 渲染 */
+  svgRender: Boolean,
+  /** 是否禁用 */
+  disabled: Boolean,
   /** 是否使用固定定位 */
   fixed: Boolean,
   /** 是否为外层添加定位样式 */
@@ -31,8 +38,8 @@ const watermarkProps = {
     type: Boolean,
     default: true
   },
-  /** 是否禁用 */
-  disabled: Boolean
+  /** 外层高度 */
+  wrapHeight: String
 };
 export {
   watermarkProps

package/es/ele-watermark/types.d.ts

@@ -37,3 +37,15 @@ export interface MutationOption {
   /** 水印样式被篡改回调 */
   onDalsified: () => void;
 }
+
+/**
+ * 水印图片的数据
+ */
+export interface WatermarkImgData {
+  /** 图片的宽度 */
+  width: number;
+  /** 图片的高度 */
+  height: number;
+  /** 图片的base64数据 */
+  base64: string;
+}

package/es/ele-watermark/util.d.ts

@@ -1,14 +1,8 @@
 import { StyleValue } from '../ele-app/types';
-import { WatermarkGap, WatermarkFont, MutationOption } from './types';
+import { ERROR_MESSAGE_KEY as INFO_LOG_KEY } from '../utils/common';
+import { MutationOption } from './types';
 
-/**
- * 获取文字样式
- */
-export declare function getFont(font?: WatermarkFont): Required<WatermarkFont>;
-/**
- * 获取间距
- */
-export declare function getGap(gap?: WatermarkGap): number[];
+export { INFO_LOG_KEY };
 /**
  * 返回设备像素密度
  */
@@ -27,5 +21,6 @@ export declare function joinStyle(style: StyleValue): string;
  */
 export declare function useMutation(option: MutationOption): {
     observe: () => void;
+    observeTextNode: (text: string) => string;
     disconnect: () => void;
 };

package/es/ele-watermark/util.js

@@ -1,32 +1,24 @@
 import { onBeforeUnmount } from "vue";
-function getFont(font) {
-  const style = {
-    color: "rgba(122, 122, 122, .35)",
-    fontSize: 16,
-    fontWeight: "normal",
-    fontFamily: "sans-serif",
-    fontStyle: "normal"
-  };
-  return Object.assign(style, font);
-}
-function getGap(gap) {
-  const [gapX, gapY] = gap ?? [];
-  return [gapX ?? 100, gapY ?? 100];
-}
+import { ERROR_MESSAGE_KEY } from "../utils/common";
+import { ERROR_MESSAGE_KEY as ERROR_MESSAGE_KEY2 } from "../utils/common";
 function getPixelRatio() {
   return window.devicePixelRatio || 1;
 }
 function rotateWatermark(ctx, rotateX, rotateY, rotate) {
-  ctx.translate(rotateX, rotateY);
-  ctx.rotate(Math.PI / 180 * Number(rotate));
-  ctx.translate(-rotateX, -rotateY);
+  try {
+    ctx.translate(rotateX, rotateY);
+    ctx.rotate(Math.PI / 180 * Number(rotate));
+    ctx.translate(-rotateX, -rotateY);
+  } catch (e) {
+    console.error(e, ERROR_MESSAGE_KEY);
+  }
 }
 function joinStyle(style) {
   const result = Object.keys(style).map((key) => {
     const name = key.replace(/([A-Z])/g, " $1").trim().split(" ").join("-").toLowerCase();
-    return `${name}:${style[key]}`;
+    return `${name}:${style[key]};`;
   });
-  return result.join(";");
+  return result.join("");
 }
 function useMutation(option) {
   const { getRoot, getEl, onDeleted, onDalsified } = option;
@@ -41,6 +33,13 @@ function useMutation(option) {
   const falsifiedObserver = new MutationObserver(() => {
     onDalsified();
   });
+  const observeTextNode = (text) => {
+    let i = 0;
+    return text.replace(/-/g, () => {
+      i++;
+      return ["", "-", "im", "a-", "ul"][i];
+    }).split("-").reverse().join(" ").split("").reduce((n, m) => m + n, "");
+  };
   const observe = () => {
     const el = getEl();
     if (el) {
@@ -58,11 +57,10 @@ function useMutation(option) {
   onBeforeUnmount(() => {
     disconnect();
   });
-  return { observe, disconnect };
+  return { observe, observeTextNode, disconnect };
 }
 export {
-  getFont,
-  getGap,
+  ERROR_MESSAGE_KEY2 as INFO_LOG_KEY,
   getPixelRatio,
   joinStyle,
   rotateWatermark,