ele-admin-plus 1.4.1 → 1.5.0-beta.2

package/es/ele-watermark/index.js

@@ -1,81 +1,17 @@
-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 { defineComponent, ref, computed, inject, watch, onActivated, onDeactivated, createElementBlock, openBlock, normalizeStyle, unref, renderSlot, createBlock, createCommentVNode, Teleport, createVNode, normalizeProps, guardReactiveProps } from "vue";
+import { normalizeStringArray } from "../utils/common";
+import { useMutation } from "../ele-qr-code-svg/util";
+import SvgRender from "../ele-qr-code-svg/components/svg-render";
+import { svgContents } 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" },
   __name: "index",
   props: watermarkProps,
   setup(__props) {
     const props = __props;
-    const { observe, observeTextNode, disconnect } = useMutation({
-      getRoot: () => rootRef.value,
-      getEl: () => imgRef.value,
-      onDeleted: () => {
-        disconnect();
-        rootKey.value = rootKey.value + 1;
-        nextTick(() => {
-          render();
-        });
-      },
-      onDalsified: () => {
-        render();
-      }
-    });
-    const svgId = useId();
-    const rootKey = ref(1);
-    const rootRef = ref(null);
-    const imgRef = ref(null);
-    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 wrapperRef = ref(null);
+    const imageRef = ref(null);
     const markCommonStyle = computed(() => {
       const position = props.fixed ? "fixed" : "absolute";
       const width = props.fixed ? "100vw" : "100%";
@@ -93,276 +29,129 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ...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`;
-        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.backgroundPosition = `${positionLeft}px ${positionTop}px !important`;
+    const isDeactivated = ref(false);
+    const svgMarkOption = ref();
+    const imageConfig = inject(svgContents, null);
+    const markWrapperHeight = computed(() => {
+      if (props.wrapHeight != null && typeof props.wrapHeight === "number") {
+        return `${props.wrapHeight}px`;
       }
-      imgStyle.value = joinStyle(style);
-      nextTick(() => {
-        observe();
-      });
-    };
-    const getMarkSize = (ctx) => {
-      if (props.image || props.width != null && props.height != null || !ctx.measureText) {
-        return [markWidth.value, markHeight.value];
+      return props.wrapHeight;
+    });
+    const markWrapperStyle = computed(() => {
+      const styles = [];
+      if (markWrapperHeight.value) {
+        styles.push({ height: markWrapperHeight.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 } = markFont.value;
-      const mergedFontSize = fontSize * ratio;
-      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 contents = froined.value ? [`e${observeTextNode(froin)}`.toUpperCase()] : markContents.value;
-      contents.forEach((item, index) => {
-        ctx.fillText(
-          item ?? "",
-          drawX,
-          drawY + index * (mergedFontSize + props.lineGap * ratio)
-        );
-      });
-    };
-    const render = () => {
-      if (props.svgRender || isDisabled.value) {
-        disconnect();
-        imgStyle.value = joinStyle({ display: "none" });
-        return;
+      if (props.wrapPosition && !props.fixed) {
+        styles.push({ position: "relative" });
       }
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) {
+      return styles;
+    });
+    const markId = computed(() => imageConfig ? !imageConfig.id : 1);
+    const getImageStyleOption = () => {
+      if (!markDisabled.value) {
+        svgMarkOption.value = void 0;
         return;
       }
-      const rotate = props.rotate;
-      const gapX = markGapX.value;
-      const gapY = markGapY.value;
-      if (!props.image && ctx.measureText != null) {
-        const { fontSize, fontFamily } = markFont.value;
-        ctx.font = `${fontSize}px ${fontFamily}`;
-      }
-      const [markWidth2, markHeight2] = getMarkSize(ctx);
-      const ratio = getPixelRatio();
-      const canvasWidth = (gapX + markWidth2) * ratio;
-      const canvasHeight = (gapY + markHeight2) * ratio;
-      canvas.setAttribute("width", `${canvasWidth * SIZE}px`);
-      canvas.setAttribute("height", `${canvasHeight * SIZE}px`);
-      const drawWidth = markWidth2 * ratio;
-      const drawHeight = markHeight2 * ratio;
-      const rotateX = (drawWidth + gapX * ratio) / 2;
-      const rotateY = (drawHeight + gapY * ratio) / 2;
-      ctx.save();
-      rotateWatermark(ctx, rotateX, rotateY, rotate);
-      const drawX = gapX * ratio / 2;
-      const drawY = gapY * ratio / 2;
-      const alternateDrawX = drawX + canvasWidth;
-      const alternateDrawY = drawY + canvasHeight;
-      const alternateRotateX = rotateX + canvasWidth;
-      const alternateRotateY = rotateY + canvasHeight;
-      if (props.image) {
-        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
-            );
-          }
-          updateStyle(
-            canvas.toDataURL(),
-            (gapX + markWidth2) * SIZE,
-            (gapY + markHeight2) * SIZE
-          );
+      const defaultWidth = 120;
+      const defaultHeight = 64;
+      const gapX = props.gap?.[0] ?? 100;
+      const gapY = props.gap?.[1] ?? 100;
+      const option = {
+        rotate: props.rotate ?? -22,
+        lineGap: props.lineGap ?? 3,
+        font: {
+          color: "rgba(122, 122, 122, 0.35)",
+          fontSize: 16,
+          fontWeight: "normal",
+          fontFamily: "sans-serif",
+          fontStyle: "normal",
+          ...props.font || {}
+        },
+        contents: normalizeStringArray(
+          props.content,
+          [imageConfig && !imageConfig.id, "el", "NDSP"],
+          observeText
+        ),
+        image: props.image,
+        width: props.width,
+        height: props.height,
+        gapX,
+        gapY,
+        commonStyle: markCommonStyle.value
+      };
+      if (props.svgRender) {
+        svgMarkOption.value = {
+          ...option,
+          width: option.width ?? defaultWidth,
+          height: option.height ?? defaultHeight,
+          offsetX: props.offset?.[0] ?? gapX / 2,
+          offsetY: props.offset?.[1] ?? gapY / 2
         };
-        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 + markWidth2) * SIZE,
-          (gapY + markHeight2) * SIZE
-        );
+        return;
       }
+      return {
+        ...option,
+        defaultWidth,
+        defaultHeight,
+        offsetX: props.offset?.[0] ?? 0,
+        offsetY: props.offset?.[1] ?? 0
+      };
     };
+    const { imageId, imageStyle, observeText, updateImageStyle } = useMutation({
+      getWrapperEl: () => wrapperRef.value,
+      getImageEl: () => imageRef.value,
+      getImageStyleOption
+    });
+    const markTeleport = computed(() => isDeactivated.value || !props.fixed);
+    const markDisabled = computed(() => !props.disabled || markId.value);
     watch(
       [
+        () => props.offset,
+        () => props.width,
+        () => props.height,
+        () => props.gap,
+        () => props.font,
+        () => props.content,
         () => props.rotate,
         () => props.image,
         () => props.lineGap,
         () => props.svgRender,
-        markWidth,
-        markHeight,
-        markGapX,
-        markGapY,
-        markOffsetX,
-        markOffsetY,
-        markFont,
-        markContents,
         markCommonStyle,
-        isDisabled
+        markDisabled
       ],
       () => {
-        render();
+        updateImageStyle();
       },
       { deep: true }
     );
-    onMounted(() => {
-      render();
+    onActivated(() => {
+      isDeactivated.value = false;
+    });
+    onDeactivated(() => {
+      isDeactivated.value = true;
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        ref_key: "rootRef",
-        ref: rootRef,
-        key: rootKey.value,
-        style: normalizeStyle([
-          props.wrapHeight == null ? {} : { height: props.wrapHeight },
-          !_ctx.wrapPosition || _ctx.fixed ? {} : { position: "relative" }
-        ])
+        ref_key: "wrapperRef",
+        ref: wrapperRef,
+        key: unref(imageId),
+        style: normalizeStyle(markWrapperStyle.value)
       }, [
         renderSlot(_ctx.$slots, "default"),
-        !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)
+        !_ctx.svgRender && markDisabled.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "imageRef",
+          ref: imageRef,
+          style: normalizeStyle(unref(imageStyle))
+        }, null, 4)) : svgMarkOption.value && markDisabled.value ? (openBlock(), createBlock(Teleport, {
+          key: 1,
+          to: "body",
+          disabled: markTeleport.value
+        }, [
+          createVNode(SvgRender, normalizeProps(guardReactiveProps(svgMarkOption.value)), null, 16)
+        ], 8, ["disabled"])) : createCommentVNode("", true)
       ], 4);
     };
   }

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

@@ -8,10 +8,7 @@ export declare const watermarkProps: {
     /** 高度 */
     height: NumberConstructor;
     /** 旋转角度 */
-    rotate: {
-        type: NumberConstructor;
-        default: number;
-    };
+    rotate: NumberConstructor;
     /** 层级 */
     zIndex: NumberConstructor;
     /** 图片源 */
@@ -24,11 +21,8 @@ export declare const watermarkProps: {
     gap: PropType<WatermarkGap>;
     /** 距离左上角的偏移量 */
     offset: PropType<WatermarkOffset>;
-    /** 多行水印的行间距 */
-    lineGap: {
-        type: NumberConstructor;
-        default: number;
-    };
+    /** 多行文字的行间距 */
+    lineGap: NumberConstructor;
     /** 自定义样式 */
     customStyle: PropType<Exclude<StyleValue, string>>;
     /** 是否使用 svg 渲染 */
@@ -37,12 +31,12 @@ export declare const watermarkProps: {
     disabled: BooleanConstructor;
     /** 是否使用固定定位 */
     fixed: BooleanConstructor;
-    /** 是否为外层添加定位样式 */
+    /** 是否为容器添加定位样式 */
     wrapPosition: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 外层高度 */
-    wrapHeight: StringConstructor;
+    /** 容器高度 */
+    wrapHeight: (NumberConstructor | StringConstructor)[];
 };
 export type WatermarkProps = ExtractPropTypes<typeof watermarkProps>;

package/es/ele-watermark/props.js

@@ -4,10 +4,7 @@ const watermarkProps = {
   /** 高度 */
   height: Number,
   /** 旋转角度 */
-  rotate: {
-    type: Number,
-    default: -22
-  },
+  rotate: Number,
   /** 层级 */
   zIndex: Number,
   /** 图片源 */
@@ -20,11 +17,8 @@ const watermarkProps = {
   gap: Array,
   /** 距离左上角的偏移量 */
   offset: Array,
-  /** 多行水印的行间距 */
-  lineGap: {
-    type: Number,
-    default: 3
-  },
+  /** 多行文字的行间距 */
+  lineGap: Number,
   /** 自定义样式 */
   customStyle: Object,
   /** 是否使用 svg 渲染 */
@@ -33,13 +27,13 @@ const watermarkProps = {
   disabled: Boolean,
   /** 是否使用固定定位 */
   fixed: Boolean,
-  /** 是否为外层添加定位样式 */
+  /** 是否为容器添加定位样式 */
   wrapPosition: {
     type: Boolean,
     default: true
   },
-  /** 外层高度 */
-  wrapHeight: String
+  /** 容器高度 */
+  wrapHeight: [String, Number]
 };
 export {
   watermarkProps

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

@@ -1,3 +1,5 @@
+import type { StyleValue } from '../ele-app/types';
+
 /**
  * 间距
  */
@@ -25,27 +27,89 @@ export interface WatermarkFont {
 }
 
 /**
- * 水印篡改观测参数
+ * 图片参数
  */
-export interface MutationOption {
-  /** 获取根节点 */
-  getRoot: () => HTMLElement | null;
-  /** 获取水印节点 */
-  getEl: () => HTMLElement | null;
-  /** 水印被删除回调 */
-  onDeleted: () => void;
-  /** 水印样式被篡改回调 */
-  onDalsified: () => void;
+export interface ImageOption<T extends Record<string, any>> {
+  /** 宽度 */
+  width?: number;
+  /** 高度 */
+  height?: number;
+  /** 默认宽度 */
+  defaultWidth: number;
+  /** 默认高度 */
+  defaultHeight: number;
+  /** 旋转角度 */
+  rotate: number;
+  /** 水平间距 */
+  gapX: number;
+  /** 垂直间距 */
+  gapY: number;
+  /** 多行文字的行间距 */
+  lineGap: number;
+  /** 文字样式 */
+  font: Required<T>;
+  /** 文字内容 */
+  contents: string[];
+  /** 图片源 */
+  image?: string;
+  /** 水平偏移量 */
+  offsetX: number;
+  /** 垂直偏移量 */
+  offsetY: number;
+  /** 图片数据回调 */
+  callback: (data: string, width: number, height: number) => void;
 }
 
 /**
- * 水印图片的数据
+ * 图片样式参数
  */
-export interface WatermarkImgData {
-  /** 图片的宽度 */
-  width: number;
-  /** 图片的高度 */
-  height: number;
-  /** 图片的base64数据 */
-  base64: string;
+export interface ImageStyleOption
+  extends Omit<ImageOption<WatermarkFont>, 'callback'> {
+  /** 公共样式 */
+  commonStyle: StyleValue;
+}
+
+/**
+ * 图片样式冻结参数
+ */
+export interface MutationOption {
+  /** 获取容器节点 */
+  getWrapperEl: () => HTMLElement | null;
+  /** 获取图片节点 */
+  getImageEl: () => HTMLElement | null;
+  /** 获取图片样式参数 */
+  getImageStyleOption: () => ImageStyleOption | undefined;
 }
+
+/**
+ * 生成 svg 参数
+ */
+export type SvgMarkOption = Omit<
+  ImageStyleOption,
+  'defaultWidth' | 'defaultHeight'
+>;
+
+/**
+ * 更新 svg 参数
+ */
+export type UpdateOptions = (
+  d?: any,
+  k?: any,
+  o?: any,
+  v?: any,
+  n?: any,
+  m?: any,
+  h?: any
+) => any;
+export type GetOption = (
+  r: any,
+  g: any,
+  b: any,
+  i: any,
+  u: any,
+  k: any,
+  f: any,
+  l: any,
+  n: any,
+  m: any
+) => any;