zartui 3.0.2 → 3.0.3

package/es/media-picker/watermark/watermark.d.ts

@@ -0,0 +1,42 @@
+export interface WatermarkContextParams {
+    address: string;
+    watermarkTime: Date;
+    humanName: string;
+    projectName: string;
+    logo: File;
+}
+export declare type WatermarkContext = {
+    address: string;
+    watermarkTime: Date;
+    humanName: string;
+    projectName: string;
+    logo?: File;
+};
+export interface WatermarkOptionsParams {
+    enabled: boolean;
+    watermarkConfigString: string;
+    context: WatermarkContext;
+}
+export declare type WatermarkOptions = {
+    enabled: boolean;
+    watermarkConfigString?: string;
+    context?: WatermarkContext;
+};
+/**
+ * A JavaScript Scanner like Java's
+ * @see java.util.Scanner
+ */
+export declare class TextScanner {
+    private text;
+    private cursor;
+    /**
+     * The content to scan
+     * @param text
+     */
+    constructor(text: string);
+    hasNext(obj?: any): boolean;
+    next(obj?: any): string | RegExpMatchArray | null;
+    skip(obj?: string): TextScanner;
+}
+export declare function renderWatermark(canvas: HTMLCanvasElement, options: WatermarkOptions): Promise<HTMLCanvasElement>;
+export declare function checkWatermarkConfigSupported(watermarkConfigString: string): boolean;

package/es/media-picker/watermark/watermark.mjs

@@ -0,0 +1,641 @@
+import {
+  isAndroid,
+  isDef,
+  isIOS,
+  isRegExp,
+  isString,
+  isValidString
+} from "../../utils/index.mjs";
+import { parseDecimal, parseNumber } from "../../utils/parse.mjs";
+import { FORMAT, formatDate } from "../../utils/date.mjs";
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const subString = (str, startIndex, length) => {
+  if (!isDef(length)) {
+    return str.substring(startIndex);
+  }
+  return str.substring(startIndex, startIndex + length);
+};
+var WatermarkPosition = /* @__PURE__ */ ((WatermarkPosition2) => {
+  WatermarkPosition2["LeftTop"] = "lefttop";
+  WatermarkPosition2["CenterTop"] = "centertop";
+  WatermarkPosition2["RightTop"] = "righttop";
+  WatermarkPosition2["LeftCenter"] = "leftcenter";
+  WatermarkPosition2["Center"] = "center";
+  WatermarkPosition2["RightCenter"] = "rightcenter";
+  WatermarkPosition2["LeftBottom"] = "leftbottom";
+  WatermarkPosition2["CenterBottom"] = "centerbottom";
+  WatermarkPosition2["RightBottom"] = "rightbottom";
+  return WatermarkPosition2;
+})(WatermarkPosition || {});
+var WatermarkFontWeight = /* @__PURE__ */ ((WatermarkFontWeight2) => {
+  WatermarkFontWeight2["Normal"] = "normal";
+  WatermarkFontWeight2["Bold"] = "bold";
+  return WatermarkFontWeight2;
+})(WatermarkFontWeight || {});
+var WatermarkContent = /* @__PURE__ */ ((WatermarkContent2) => {
+  WatermarkContent2["Raw"] = "";
+  WatermarkContent2["Date"] = "date{(.*?)}|date";
+  WatermarkContent2["Time"] = "time";
+  WatermarkContent2["Address"] = "address";
+  WatermarkContent2["HumanName"] = "humanname";
+  WatermarkContent2["ProjectName"] = "projectName";
+  WatermarkContent2["Logo"] = "{logo}";
+  return WatermarkContent2;
+})(WatermarkContent || {});
+const ColorMap = {
+  transparent: "#00000000",
+  white: "#FFFFFF",
+  black: "#000000",
+  darkgray: "#444444",
+  gray: "#888888",
+  lightgray: "#CCCCCC",
+  darkgrey: "#444444",
+  grey: "#888888",
+  lightgrey: "#CCCCCC",
+  red: "#FF0000",
+  green: "#00FF00",
+  blue: "#0000FF",
+  yellow: "#FFFF00",
+  cyan: "#00FFFF",
+  magenta: "#FF00FF",
+  aqua: "#00FFFF",
+  fuchsia: "#FF00FF",
+  lime: "#00FF00",
+  maroon: "#800000",
+  navy: "#000080",
+  olive: "#808000",
+  purple: "#800080",
+  silver: "#C0C0C0",
+  teal: "#008080",
+  orange: "#FF9933"
+};
+function getColorValue(key) {
+  for (const k of Object.getOwnPropertyNames(ColorMap)) {
+    if (k === key) {
+      return ColorMap[k];
+    }
+  }
+  return null;
+}
+const CONTENT_PADDING = 10;
+const DEFAULT_PADDING = 2;
+const DEFAULT_FONT_SIZE = 25;
+const DEFAULT_CANVAS_SIZE = 480;
+const DEFAULT_BACKGROUND_OPACITY = 128;
+function getHeitiFontFamily() {
+  if (isAndroid()) {
+    return "'Roboto Black', 'Droid Sans'";
+  } else if (isIOS()) {
+    return "'PingFang SC Medium'";
+  }
+  return '"PingFang SC Medium", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif';
+}
+function parseWatermarkStyle(styleString, canvasSize) {
+  if (!isValidString(styleString)) {
+    return null;
+  }
+  const styleParts = styleString.split("$");
+  if (styleParts.length <= 0) {
+    return null;
+  }
+  const scale = Math.min(canvasSize.width, canvasSize.height) / DEFAULT_CANVAS_SIZE;
+  if (parseNumber(styleParts[0], -1) !== -1) {
+    const fontSize2 = Math.round(
+      parseDecimal(styleParts[0], DEFAULT_FONT_SIZE) * scale
+    );
+    let position2 = "lefttop" /* LeftTop */;
+    if (styleParts[1]) {
+      position2 = styleParts[1];
+    }
+    let paddingTop2 = DEFAULT_PADDING * scale;
+    let paddingBottom2 = DEFAULT_PADDING * scale;
+    if (styleParts[2]) {
+      const paddingParts = styleParts[2].split("_");
+      paddingTop2 = parseNumber(paddingParts[0], DEFAULT_PADDING) * scale;
+      if (paddingParts[1]) {
+        paddingBottom2 = parseNumber(paddingParts[1], DEFAULT_PADDING) * scale;
+      }
+    }
+    const fontName2 = getHeitiFontFamily();
+    const fontWeight2 = "normal" /* Normal */;
+    const fontColor2 = ColorMap.transparent;
+    const backgroundColor2 = ColorMap.transparent;
+    const backgroundOpacity2 = 128;
+    return {
+      fontName: fontName2,
+      fontWeight: fontWeight2,
+      fontColor: fontColor2,
+      fontSize: fontSize2,
+      backgroundColor: backgroundColor2,
+      backgroundOpacity: backgroundOpacity2,
+      paddingTop: paddingTop2,
+      paddingBottom: paddingBottom2,
+      position: position2,
+      scale,
+      simplified: true
+    };
+  }
+  const fontName = styleParts[0] + ", " + getHeitiFontFamily();
+  let fontWeight = "normal" /* Normal */;
+  if (styleParts[1]) {
+    fontWeight = styleParts[1];
+  }
+  let fontColor = ColorMap.white;
+  if (styleParts[2]) {
+    const color = getColorValue(styleParts[2]);
+    if (color) {
+      fontColor = color;
+    }
+  }
+  let fontSize = Math.round(DEFAULT_FONT_SIZE * scale);
+  if (styleParts[3]) {
+    fontSize = Math.round(
+      parseDecimal(styleParts[3], DEFAULT_FONT_SIZE) * scale
+    );
+  }
+  let backgroundColor = ColorMap.blue;
+  if (styleParts[4]) {
+    const color = getColorValue(styleParts[4]);
+    if (color) {
+      backgroundColor = color;
+    }
+  }
+  let position = "lefttop" /* LeftTop */;
+  if (styleParts[5]) {
+    position = styleParts[5];
+  }
+  let backgroundOpacity = 255;
+  if (styleParts[6]) {
+    let opacity = parseNumber(styleParts[6], DEFAULT_BACKGROUND_OPACITY);
+    opacity = clamp(opacity, 0, 255);
+    backgroundOpacity = opacity;
+  }
+  let paddingTop = DEFAULT_PADDING * scale;
+  let paddingBottom = DEFAULT_PADDING * scale;
+  if (styleParts[7]) {
+    const paddingParts = styleParts[7].split("_");
+    paddingTop = parseNumber(paddingParts[0], DEFAULT_PADDING) * scale;
+    if (paddingParts[1]) {
+      paddingBottom = parseNumber(paddingParts[1], DEFAULT_PADDING) * scale;
+    }
+  }
+  return {
+    fontName,
+    fontWeight,
+    fontColor,
+    fontSize,
+    backgroundColor,
+    backgroundOpacity,
+    paddingTop,
+    paddingBottom,
+    position,
+    scale,
+    simplified: false
+  };
+}
+class TextScanner {
+  constructor(text) {
+    this.text = text;
+    this.cursor = 0;
+  }
+  hasNext(obj) {
+    if (!isDef(obj)) {
+      return this.cursor < this.text.length;
+    } else if (isString(obj)) {
+      const str = obj;
+      const current = subString(this.text, this.cursor, str.length);
+      if (current === str) {
+        return true;
+      }
+    } else if (isRegExp(obj)) {
+      const regex = obj;
+      const subText = subString(this.text, this.cursor);
+      const matchResults = subText.match(regex);
+      if (matchResults) {
+        if (matchResults.index === 0) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  next(obj) {
+    if (!isDef(obj)) {
+      return subString(this.text, this.cursor, 1);
+    } else if (isString(obj)) {
+      const str = obj;
+      if (subString(this.text, this.cursor, str.length) === str) {
+        return str;
+      }
+    } else if (isRegExp(obj)) {
+      const regex = obj;
+      const subText = subString(this.text, this.cursor);
+      const matchResults = subText.match(regex);
+      if (matchResults) {
+        if (matchResults.index === 0) {
+          return matchResults;
+        }
+      }
+    }
+    return null;
+  }
+  skip(obj) {
+    if (!isDef(obj)) {
+      this.cursor += 1;
+    } else if (isValidString(obj)) {
+      const str = obj;
+      this.cursor += str.length;
+    }
+    return this;
+  }
+}
+function buildContent(contentConfigString, watermarkContext) {
+  let content = "";
+  const scanner = new TextScanner(contentConfigString);
+  let steps = 0;
+  while (scanner.hasNext() && steps < contentConfigString.length) {
+    const dateRegex = new RegExp("date{(.*?)}|date" /* Date */);
+    if (scanner.hasNext(dateRegex)) {
+      const regexResult = scanner.next(dateRegex);
+      if (regexResult) {
+        const matchResults = regexResult;
+        let format = FORMAT.FORMAT_YMD;
+        if (matchResults && matchResults.length >= 2) {
+          if (isValidString(matchResults[1])) {
+            format = matchResults[1];
+          }
+        }
+        if (watermarkContext) {
+          content += formatDate(watermarkContext.watermarkTime, format);
+        }
+        scanner.skip(matchResults.input);
+      }
+    } else if (scanner.hasNext("time" /* Time */)) {
+      if (watermarkContext) {
+        const value = formatDate(
+          watermarkContext.watermarkTime,
+          FORMAT.FORMAT_HM
+        );
+        content += value;
+      }
+      scanner.skip("time" /* Time */);
+    } else if (scanner.hasNext("address" /* Address */)) {
+      if (watermarkContext) {
+        content += watermarkContext.address;
+      }
+      scanner.skip("address" /* Address */);
+    } else if (scanner.hasNext("humanname" /* HumanName */)) {
+      if (watermarkContext) {
+        content += watermarkContext.humanName;
+      }
+      scanner.skip("humanname" /* HumanName */);
+    } else if (scanner.hasNext("projectName" /* ProjectName */)) {
+      if (watermarkContext) {
+        content += watermarkContext.projectName;
+      }
+      scanner.skip("projectName" /* ProjectName */);
+    } else if (scanner.hasNext("{logo}" /* Logo */)) {
+      console.error("watermark logo ignored");
+      scanner.skip("{logo}" /* Logo */);
+    } else {
+      const nextChar = scanner.next();
+      if (isString(nextChar)) {
+        content += nextChar;
+      }
+      scanner.skip();
+    }
+    steps++;
+  }
+  return content;
+}
+function parseWatermarks(watermarkConfigString, canvasSize, watermarkContext) {
+  const watermarks = [];
+  const configStringArray = watermarkConfigString.split("###");
+  for (let i = 0; i < configStringArray.length; i++) {
+    const configString = configStringArray[i];
+    const configParts = configString.split("*#*");
+    if (configParts.length === 2) {
+      const styleString = configParts[0];
+      const contentString = configParts[1];
+      const style = parseWatermarkStyle(styleString, canvasSize);
+      const content = buildContent(contentString, watermarkContext);
+      if (style && content) {
+        const watermark = {
+          content,
+          style
+        };
+        watermarks.push(watermark);
+      }
+    }
+  }
+  return watermarks;
+}
+function getCanvasScale(canvas, len) {
+  const min = Math.min(canvas.width, canvas.height);
+  return min / DEFAULT_CANVAS_SIZE * len;
+}
+function buildTile(canvas, content, style) {
+  const origin = {
+    x: 0,
+    y: 0
+  };
+  const size = {
+    width: 0,
+    height: 0
+  };
+  const lines = [];
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return null;
+  }
+  ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontName}`;
+  const contentPadding = getCanvasScale(canvas, CONTENT_PADDING);
+  const contentWidth = canvas.width - contentPadding * 2;
+  const lineHeight = ctx.measureText("M").width;
+  const lineWidths = [];
+  let temp = "";
+  let lastWidth = 0;
+  for (let i = 0; i < content.length; i++) {
+    const lineWidth = ctx.measureText(temp).width;
+    if (lineWidth >= contentWidth) {
+      lines.push(temp);
+      lineWidths.push(lineWidth);
+      temp = "";
+    }
+    lastWidth = lineWidth;
+    temp += content[i];
+  }
+  lines.push(temp);
+  lineWidths.push(lastWidth);
+  size.width = contentWidth;
+  size.height = lines.length * lineHeight;
+  return { origin, size, lineHeight, lineWidths, lines, style };
+}
+function getAxisPoint(canvasWidth, origin, style) {
+  const padding = (CONTENT_PADDING + DEFAULT_PADDING) * style.scale;
+  let axisPoint = { x: padding, y: origin.y };
+  if (style.position.startsWith("center")) {
+    axisPoint = { x: canvasWidth / 2, y: origin.y };
+  } else if (style.position.startsWith("right")) {
+    axisPoint = { x: canvasWidth - padding, y: origin.y };
+  }
+  return axisPoint;
+}
+function getTextAlign(style) {
+  let align = "left";
+  if (style.position.startsWith("center")) {
+    align = "center";
+  } else if (style.position.startsWith("right")) {
+    align = "right";
+  }
+  return align;
+}
+function drawLine(canvas, line, origin, style) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  ctx.textBaseline = "top";
+  ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontName}`;
+  const axisPoint = getAxisPoint(canvas.width, origin, style);
+  ctx.textAlign = getTextAlign(style);
+  if (style.simplified) {
+    ctx.shadowBlur = 4;
+    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+    const offset = clamp(style.fontSize / 40, 2, 4);
+    ctx.shadowOffsetY = offset;
+    ctx.shadowOffsetX = offset;
+    ctx.fillStyle = "rgba(255,255,255, 0.5)";
+  } else {
+    ctx.fillStyle = style.fontColor;
+  }
+  ctx.fillText(line, Math.round(axisPoint.x), Math.round(axisPoint.y));
+}
+function hexToRGB(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  if (alpha) {
+    return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
+  }
+  return "rgb(" + r + ", " + g + ", " + b + ")";
+}
+function drawBackground(canvas, tile) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  let { backgroundColor } = tile.style;
+  let backgroundOpacity = parseDecimal(
+    String(tile.style.backgroundOpacity),
+    -1
+  );
+  if (backgroundOpacity > 255) {
+    backgroundOpacity = 255;
+  }
+  const paddingTop = 2;
+  const paddingBottom = 10;
+  if (backgroundColor !== "transparent") {
+    if (backgroundColor.startsWith("#") && backgroundOpacity >= 0) {
+      backgroundColor = hexToRGB(backgroundColor, backgroundOpacity / 255);
+    }
+    ctx.fillStyle = backgroundColor;
+    const { style } = tile;
+    const padding = (CONTENT_PADDING + DEFAULT_PADDING) * style.scale;
+    const paddingScale = tile.style.fontSize / DEFAULT_FONT_SIZE;
+    for (let j = 0; j < tile.lineWidths.length; j++) {
+      const { lineHeight } = tile;
+      const lineWidth = tile.lineWidths[j];
+      let paddingRight = 30 * paddingScale;
+      let paddingLeft = 10 * paddingScale;
+      let axisPoint = {
+        x: padding - paddingLeft,
+        y: tile.origin.y
+      };
+      if (style.position.startsWith("center")) {
+        paddingLeft = 20 * paddingScale;
+        paddingRight = 20 * paddingScale;
+        axisPoint = {
+          x: (canvas.width - lineWidth) / 2 - paddingLeft,
+          y: tile.origin.y
+        };
+      } else if (style.position.startsWith("right")) {
+        paddingLeft = 30 * paddingScale;
+        paddingRight = 10 * paddingScale;
+        axisPoint = {
+          x: canvas.width - lineWidth - padding - paddingLeft,
+          y: tile.origin.y
+        };
+      }
+      if (j === 0) {
+        ctx.fillRect(
+          axisPoint.x,
+          axisPoint.y - paddingTop > 0 ? axisPoint.y - paddingTop : 0,
+          paddingLeft + lineWidth + paddingRight,
+          paddingTop
+        );
+      }
+      ctx.fillRect(
+        axisPoint.x,
+        axisPoint.y + j * lineHeight,
+        paddingLeft + lineWidth + paddingRight,
+        lineHeight
+      );
+      if (j === tile.lineWidths.length - 1) {
+        ctx.fillRect(
+          axisPoint.x,
+          axisPoint.y + (j + 1) * lineHeight,
+          paddingLeft + lineWidth + paddingRight,
+          paddingBottom
+        );
+      }
+    }
+  }
+}
+function drawTile(canvas, tile) {
+  if (!tile.style.simplified) {
+    drawBackground(canvas, tile);
+  }
+  for (let i = 0; i < tile.lines.length; i++) {
+    const origin = {
+      x: tile.origin.x,
+      y: i * tile.lineHeight + tile.origin.y
+    };
+    drawLine(canvas, tile.lines[i], origin, tile.style);
+  }
+}
+var GroupPosition = /* @__PURE__ */ ((GroupPosition2) => {
+  GroupPosition2["Top"] = "top";
+  GroupPosition2["Center"] = "center";
+  GroupPosition2["Bottom"] = "bottom";
+  return GroupPosition2;
+})(GroupPosition || {});
+function drawGroupedWatermarks(canvas, watermarks, groupPosition) {
+  if (!watermarks || watermarks.length === 0) {
+    return;
+  }
+  const tiles = [];
+  let totalHeight = 0;
+  for (let i = 0; i < watermarks.length; i++) {
+    const watermark = watermarks[i];
+    const tile = buildTile(canvas, watermark.content, watermark.style);
+    if (tile) {
+      tiles.push(tile);
+      totalHeight += tile.size.height;
+    }
+  }
+  if (totalHeight <= 0) {
+    console.error("watermarks height " + totalHeight);
+    console.error(JSON.stringify(watermarks));
+    return;
+  }
+  const contentPadding = getCanvasScale(canvas, CONTENT_PADDING);
+  let baseOrigin = { x: contentPadding, y: contentPadding };
+  if (groupPosition === "center" /* Center */) {
+    baseOrigin = {
+      x: contentPadding,
+      y: Math.round((canvas.height - totalHeight) / 2)
+    };
+  } else if (groupPosition === "bottom" /* Bottom */) {
+    baseOrigin = {
+      x: contentPadding,
+      y: canvas.height - totalHeight - contentPadding
+    };
+  } else if (groupPosition === "top" /* Top */) {
+    baseOrigin = { x: contentPadding, y: contentPadding };
+  }
+  let lastMarginTop = 0;
+  for (let i = 0; i < tiles.length; i++) {
+    const tile = tiles[i];
+    lastMarginTop += tile.style.paddingTop;
+    tile.origin = {
+      x: tile.origin.x + baseOrigin.x,
+      y: lastMarginTop + baseOrigin.y
+    };
+    lastMarginTop += tile.size.height;
+    lastMarginTop += tile.style.paddingBottom;
+  }
+  for (let i = 0; i < tiles.length; i++) {
+    const tile = tiles[i];
+    drawTile(canvas, tile);
+  }
+}
+function groupingWatermarks(watermarks) {
+  const topList = [];
+  const centerList = [];
+  const bottomList = [];
+  for (let i = 0; i < watermarks.length; i++) {
+    const watermark = watermarks[i];
+    if (watermark.style.position.endsWith("top")) {
+      topList.push(watermark);
+    } else if (watermark.style.position.endsWith("center")) {
+      centerList.push(watermark);
+    } else if (watermark.style.position.endsWith("bottom")) {
+      bottomList.push(watermark);
+    }
+  }
+  return {
+    ["top" /* Top */]: topList,
+    ["center" /* Center */]: centerList,
+    ["bottom" /* Bottom */]: bottomList
+  };
+}
+function renderWatermark(canvas, options) {
+  if (!options.enabled || options.watermarkConfigString === "no") {
+    return Promise.resolve(canvas);
+  }
+  let { watermarkConfigString } = options;
+  if (!isDef(watermarkConfigString) || watermarkConfigString === "default") {
+    watermarkConfigString = "50$lefttop$50*#*time###25$lefttop*#*date";
+  }
+  const watermarks = parseWatermarks(
+    watermarkConfigString,
+    {
+      width: canvas.width,
+      height: canvas.height
+    },
+    options.context
+  );
+  const groupedWatermarks = groupingWatermarks(watermarks);
+  drawGroupedWatermarks(
+    canvas,
+    groupedWatermarks["top" /* Top */],
+    "top" /* Top */
+  );
+  drawGroupedWatermarks(
+    canvas,
+    groupedWatermarks["center" /* Center */],
+    "center" /* Center */
+  );
+  drawGroupedWatermarks(
+    canvas,
+    groupedWatermarks["bottom" /* Bottom */],
+    "bottom" /* Bottom */
+  );
+  return Promise.resolve(canvas);
+}
+function checkWatermarkConfigSupported(watermarkConfigString) {
+  if (watermarkConfigString.indexOf("{logo}") > -1) {
+    console.error("\u6C34\u5370\u4E0D\u652F\u6301logo");
+    return false;
+  }
+  const configStringArray = watermarkConfigString.split("###");
+  for (let i = 0; i < configStringArray.length; i++) {
+    const configString = configStringArray[i];
+    const configParts = configString.split("*#*");
+    if (configParts.length === 2) {
+      const styleString = configParts[0];
+      const styleParts = styleString.split("$");
+      if (styleParts.length <= 0) {
+        console.error("\u6C34\u5370\u914D\u7F6E\u4E0D\u5408\u6CD5");
+        return false;
+      }
+    }
+  }
+  return true;
+}
+export {
+  TextScanner,
+  checkWatermarkConfigSupported,
+  renderWatermark
+};