@lingxiteam/ebe-utils 0.0.4 → 0.0.5

package/es/index.d.ts

@@ -24,6 +24,9 @@ interface CodeServices {
     findApplication: (params: {
         appId: string;
     }) => Promise<any>;
+    getWaterMarkByAppId: (params: {
+        appId: string;
+    }) => Promise<any>;
 }
 interface CodeOptions {
     appId: string;
@@ -52,6 +55,7 @@ export declare const fetchData: ({ appId, services, platform, baseUrl, onProgres
         themeCss: any;
         models: Record<string, any>;
         appInfo: Record<string, any>;
+        waterMark: any;
     };
     cleanedTree: any;
 }>;

package/es/index.js

@@ -266,7 +266,7 @@ export var init = /*#__PURE__*/function () {
 }();
 export var fetchData = /*#__PURE__*/function () {
   var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref4) {
-    var appId, services, platform, baseUrl, onProgress, appInfo, attrSpecPage, resultObject, frontendHookList, themeCss, temCompAssetList, compAssetList, globalDataInfo, dataSourceList, globalDataMap, pageIdMapping, appPageList, lastPageId, data, pages, itemHash, itemLists, busiData, busiCompMapping, busiPages, pageDSLS, options, cleanedTree;
+    var appId, services, platform, baseUrl, onProgress, appInfo, attrSpecPage, resultObject, frontendHookList, themeCss, temCompAssetList, compAssetList, globalDataInfo, dataSourceList, globalDataMap, pageIdMapping, appPageList, lastPageId, data, pages, itemHash, itemLists, busiData, busiCompMapping, busiPages, pageDSLS, waterMark, options, cleanedTree;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
@@ -427,6 +427,17 @@ export var fetchData = /*#__PURE__*/function () {
             return busiData;
           }); // 合并页面，生成器那边支持页面类型和业务组件类型
           pageDSLS = [].concat(_toConsumableArray(pages), _toConsumableArray(busiPages));
+          onProgress({
+            log: '查询水印配置信息',
+            progress: 7
+          });
+          // 获取水印
+          _context2.next = 60;
+          return services.getWaterMarkByAppId({
+            appId: appId
+          });
+        case 60:
+          waterMark = _context2.sent;
           options = {
             platform: platform,
             appId: appId,
@@ -442,11 +453,12 @@ export var fetchData = /*#__PURE__*/function () {
             }),
             themeCss: themeCss,
             models: globalDataMap,
-            appInfo: clearAppInfo(appInfo)
+            appInfo: clearAppInfo(appInfo),
+            waterMark: waterMark
           };
           onProgress({
             log: '清理无用数据',
-            progress: 7
+            progress: 8
           });
           cleanedTree = cleanTree(pageDSLS, ['path']); // 清理字段'b'和字段'e'
           cleanedTree = clearLXPagesDSL(cleanedTree);
@@ -454,7 +466,7 @@ export var fetchData = /*#__PURE__*/function () {
             options: options,
             cleanedTree: cleanedTree
           });
-        case 62:
+        case 66:
         case "end":
           return _context2.stop();
       }

package/lib/public/src/components/WaterMark/generatorImage.ts

@@ -0,0 +1,183 @@
+/**
+ * 将角度转成弧度
+ * @param degrees 角度
+ * @returns 弧度
+ */
+const degreesToRadians = (degrees: number) => {
+  return (degrees * Math.PI) / 180;
+};
+
+/**
+ * 计算原始矩形旋转后占用的面积
+ * @param sourceWidth 原始宽度
+ * @param sourceHeight 原始高度
+ * @param degrees 旋转角度逆时针 0 - 360°
+ */
+const calculateRotateSize = (
+  _sourceWidth: number,
+  _sourceHeight: number,
+  _degrees: number,
+): {
+  width: number;
+  height: number;
+} => {
+  switch (_degrees) {
+    case 0:
+    case 180:
+    case 360:
+      return { width: _sourceWidth, height: _sourceHeight };
+    case 90:
+    case 270:
+      return { width: _sourceHeight, height: _sourceWidth };
+    default:
+      break;
+  }
+
+  let sourceWidth = _sourceWidth;
+  let sourceHeight = _sourceHeight;
+  let degrees = _degrees;
+
+  if (degrees > 90 && degrees < 180) {
+    degrees = 180 - degrees;
+    sourceWidth = _sourceHeight;
+    sourceHeight = _sourceWidth;
+  } else if (degrees > 180 && degrees < 270) {
+    degrees = 270 - degrees;
+    // sourceWidth = _sourceHeight;
+    // sourceHeight = _sourceWidth;
+  } else if (degrees > 270 && degrees < 360) {
+    degrees = 360 - degrees;
+    sourceWidth = _sourceHeight;
+    sourceHeight = _sourceWidth;
+  }
+
+  // 旋转弧度
+  const radians = degreesToRadians(degrees);
+
+  const widthA = sourceWidth * Math.cos(radians);
+
+  const heightA = sourceWidth * Math.sin(radians);
+
+  const widthB = sourceHeight * Math.sin(radians);
+
+  const heightB = sourceHeight * Math.cos(radians);
+
+  const res = {
+    width: Math.ceil(widthA + widthB),
+    height: Math.ceil(heightA + heightB),
+  };
+
+  return res;
+};
+
+const laodImage = (baseData: string): Promise<HTMLImageElement> =>
+  new Promise((resolve) => {
+    const img = new Image();
+    img.src = baseData;
+    img.onload = () => {
+      resolve(img);
+    };
+  });
+
+/**
+ * 生成水印图片
+ * @param content 水印内容
+ * @param width 宽度
+ * @param height 高度
+ * @param fontSize 字号大小
+ * @param fontColor 字体颜色
+ * @param alpha 透明度
+ * @param angle 旋转角度
+ */
+const generatorImage = async (
+  content: string,
+  width: number,
+  height: number,
+  fontSize: number,
+  fontColor: string,
+  alpha: number,
+  angle: number,
+): Promise<string | null> => {
+  // 文字行高
+  const lineHeight = fontSize + 2;
+
+  const sourceCanvas = document.createElement('canvas');
+  const sourceCtx = sourceCanvas.getContext('2d') as CanvasRenderingContext2D;
+
+  sourceCanvas.width = width;
+  sourceCanvas.height = height;
+  sourceCtx.font = `300 ${fontSize}px Microsoft YaHei`;
+  sourceCtx.globalAlpha = alpha;
+  sourceCtx.fillStyle = fontColor;
+
+  const strList = [];
+
+  const measureTextWidth = (str: string) => {
+    return sourceCtx.measureText(str).width;
+  };
+
+  // 回车替换成空格 多个空格合并成一个
+  const nextStr = content.replace(/\n/g, ' ').replace(/\s{2,}/, ' ');
+  let length = 0;
+  let currentLine = '';
+  while (length < nextStr.length) {
+    const char = nextStr[length];
+    const newLine = currentLine + char;
+    if (measureTextWidth(newLine) < 300) {
+      currentLine = newLine;
+    } else {
+      currentLine = '';
+      strList.push({
+        x: 0,
+        content: newLine,
+      });
+    }
+    length += 1;
+  }
+
+  // 最后一行文字没有填充满 计算居中偏移量
+  if (currentLine) {
+    strList.push({
+      x: (width - measureTextWidth(currentLine)) / 2,
+      content: currentLine,
+    });
+  }
+
+  // 根据行数计算起始位置
+  const contentHeight = strList.length * 26;
+  let offsetY = (height - contentHeight) / 2;
+  offsetY = offsetY < 0 ? 0 : offsetY;
+
+  // 逐行添加文字
+  for (let i = 0; i < strList.length; i += 1) {
+    const { x, content } = strList[i];
+    const y = (i + 1) * lineHeight + offsetY;
+    sourceCtx.fillText(content, x, y);
+  }
+
+  // 图片base64
+  let imgBase64 = sourceCanvas.toDataURL('image/png');
+
+  // 存在角度旋转
+  if (angle > 0) {
+    const nextCanvas = document.createElement('canvas');
+    const nextCtx = nextCanvas.getContext('2d') as CanvasRenderingContext2D;
+    const { width: nextWidth, height: nextHeight } = calculateRotateSize(
+      width,
+      height,
+      angle,
+    );
+    nextCanvas.width = nextWidth;
+    nextCanvas.height = nextHeight;
+    const img = await laodImage(imgBase64);
+    const _offsetX = -img.width / 2;
+    const _offsetY = -img.height / 2;
+    nextCtx.translate(nextWidth / 2, nextHeight / 2);
+    nextCtx.rotate(-degreesToRadians(angle));
+    nextCtx.drawImage(img, _offsetX, _offsetY, img.width, img.height);
+    imgBase64 = nextCanvas.toDataURL('image/png');
+  }
+  return imgBase64;
+};
+
+export default generatorImage;

package/lib/public/src/components/WaterMark/index.less

@@ -0,0 +1,10 @@
+@prefix: engine;
+.@{prefix}-watermark {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    z-index: 10000;
+    top: 0;
+    left:0;
+    pointer-events: none;
+}

package/lib/public/src/components/WaterMark/index.tsx

@@ -0,0 +1,58 @@
+import { FC, useEffect, useRef, useState } from 'react';
+import generatorImage from './generatorImage';
+import './index.less';
+
+/**
+ * 水印配置
+ */
+interface AppWaterMarkCfgType {
+  fontColor: string;
+  fontSize: string;
+  tiltAngle?: string;
+  waterMarkInfoResultValue: string;
+  isEnable: string;
+  fontTransparency: number;
+  blockWidth?: number;
+  blockHeight?: number;
+}
+
+interface WatermarkProps {
+  config: AppWaterMarkCfgType;
+}
+
+const Watermark: FC<WatermarkProps> = (props) => {
+  const watermarkInfo = props.config || {};
+  const [previewURL, setPreviewURL] = useState<string>();
+  const watermarkRef = useRef<HTMLDivElement>(null);
+  const getWaterMark = () => {
+    // 如果存在水印就不需要展示，不然弹窗等会叠加水印
+    generatorImage(
+      watermarkInfo.waterMarkInfoResultValue,
+      watermarkInfo.blockWidth || 200,
+      watermarkInfo.blockHeight || 200,
+      Number(watermarkInfo.fontSize || 16),
+      watermarkInfo.fontColor || '#000',
+      (watermarkInfo.fontTransparency || 50) / 100,
+      Number(watermarkInfo.tiltAngle) || 0,
+    ).then((res) => {
+      if (res) {
+        setPreviewURL(res);
+      }
+    });
+  };
+  useEffect(() => {
+    getWaterMark();
+  }, [watermarkInfo]);
+
+  return previewURL ? (
+    <div
+      ref={watermarkRef}
+      className="engine-watermark"
+      style={{ background: previewURL ? `url(${previewURL})` : '#FFFFFF' }}
+    />
+  ) : (
+    <></>
+  );
+};
+
+export default Watermark;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxiteam/ebe-utils",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "",
   "keywords": [],
   "author": "",
@@ -17,7 +17,7 @@
     "@babel/parser": "^7.12.12",
     "@babel/traverse": "^7.12.12",
     "@babel/types": "^7.12.12",
-    "@lingxiteam/ebe": "0.0.4",
+    "@lingxiteam/ebe": "0.0.5",
     "cac": "^6.7.14",
     "fs-extra": "9.x"
   },