bhd-components 0.9.1 → 0.9.2

package/esm/customerService/js-screen-shot/lib/common-methods/GetCanvasImgData.js

@@ -0,0 +1,25 @@
+import { saveCanvasToImage } from "./SaveCanvasToImage";
+import { saveCanvasToBase64 } from "./SaveCanvasToBase64";
+import InitData from "../main-entrance/InitData";
+import PlugInParameters from "../main-entrance/PlugInParameters";
+/**
+ * 将指定区域的canvas转为图片
+ */ export function getCanvasImgData(isSave) {
+    var _data_getScreenShotContainer;
+    var data = new InitData();
+    var plugInParameters = new PlugInParameters();
+    var screenShotCanvas = (_data_getScreenShotContainer = data.getScreenShotContainer()) === null || _data_getScreenShotContainer === void 0 ? void 0 : _data_getScreenShotContainer.getContext("2d");
+    // 获取裁剪区域位置信息
+    var _data_getCutOutBoxPosition = data.getCutOutBoxPosition(), startX = _data_getCutOutBoxPosition.startX, startY = _data_getCutOutBoxPosition.startY, width = _data_getCutOutBoxPosition.width, height = _data_getCutOutBoxPosition.height;
+    var base64 = "";
+    if (screenShotCanvas) {
+        if (isSave) {
+            // 将canvas转为图片
+            saveCanvasToImage(screenShotCanvas, startX, startY, width, height);
+        } else {
+            // 将canvas转为base64
+            base64 = saveCanvasToBase64(screenShotCanvas, startX, startY, width, height, 0.75, plugInParameters.getWriteImgState());
+        }
+    }
+    return base64;
+}

package/esm/customerService/js-screen-shot/lib/common-methods/GetColor.d.ts

@@ -0,0 +1 @@
+export declare function getColor(index: number): string;

package/esm/customerService/js-screen-shot/lib/common-methods/GetColor.js

@@ -0,0 +1,41 @@
+import InitData from "../main-entrance/InitData";
+export function getColor(index) {
+    var data = new InitData();
+    var currentColor = "#F53440";
+    switch(index){
+        case 1:
+            currentColor = "#F53440";
+            break;
+        case 2:
+            currentColor = "#F65E95";
+            break;
+        case 3:
+            currentColor = "#D254CF";
+            break;
+        case 4:
+            currentColor = "#12A9D7";
+            break;
+        case 5:
+            currentColor = "#30A345";
+            break;
+        case 6:
+            currentColor = "#FACF50";
+            break;
+        case 7:
+            currentColor = "#F66632";
+            break;
+        case 8:
+            currentColor = "#989998";
+            break;
+        case 9:
+            currentColor = "#000000";
+            break;
+        case 10:
+            currentColor = "#FEFFFF";
+            break;
+    }
+    data.setSelectedColor(currentColor);
+    // 隐藏颜色选择面板
+    data.setColorPanelStatus(false);
+    return currentColor;
+}

package/esm/customerService/js-screen-shot/lib/common-methods/GetSelectedCalssName.d.ts

@@ -0,0 +1 @@
+export declare function getSelectedClassName(index: number): string;

package/esm/customerService/js-screen-shot/lib/common-methods/GetSelectedCalssName.js

@@ -0,0 +1,23 @@
+export function getSelectedClassName(index) {
+    var className = "";
+    switch(index){
+        case 1:
+            className = "square-active";
+            break;
+        case 2:
+            className = "round-active";
+            break;
+        case 3:
+            className = "right-top-active";
+            break;
+        case 4:
+            className = "brush-active";
+            break;
+        case 5:
+            className = "mosaicPen-active";
+            break;
+        case 6:
+            className = "text-active";
+    }
+    return className;
+}

package/esm/customerService/js-screen-shot/lib/common-methods/GetToolRelativePosition.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 获取截图工具栏相对于视口的位置
+ */
+export declare function getToolRelativePosition(left?: number, top?: number, dom?: HTMLElement): {
+    left: number;
+    top: number;
+};

package/esm/customerService/js-screen-shot/lib/common-methods/GetToolRelativePosition.js

@@ -0,0 +1,10 @@
+/**
+ * 获取截图工具栏相对于视口的位置
+ */ export function getToolRelativePosition(left, top) {
+    var dom = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : document.body;
+    var rect = dom.getBoundingClientRect();
+    return {
+        left: left || Math.abs(rect.left),
+        top: top || Math.abs(rect.top)
+    };
+}

package/esm/customerService/js-screen-shot/lib/common-methods/ImgScaling.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 等比例缩放图片
+ * @param imgWidth
+ * @param imgHeight
+ * @param containerWidth
+ * @param containerHeight
+ */
+export declare function imgScaling(imgWidth: number, imgHeight: number, containerWidth: number, containerHeight: number): {
+    tempWidth: number;
+    tempHeight: number;
+};

package/esm/customerService/js-screen-shot/lib/common-methods/ImgScaling.js

@@ -0,0 +1,38 @@
+/**
+ * 等比例缩放图片
+ * @param imgWidth
+ * @param imgHeight
+ * @param containerWidth
+ * @param containerHeight
+ */ export function imgScaling(imgWidth, imgHeight, containerWidth, containerHeight) {
+    var tempWidth = 0, tempHeight = 0;
+    if (imgWidth > 0 && imgHeight > 0) {
+        // 原图片宽高比例 大于 指定的宽高比例，这就说明了原图片的宽度必然 > 高度
+        if (imgWidth / imgHeight >= containerWidth / containerHeight) {
+            if (imgWidth > containerWidth) {
+                tempWidth = containerWidth;
+                // 按原图片的比例进行缩放
+                tempHeight = imgHeight * containerWidth / imgWidth;
+            } else {
+                // 按照图片的大小进行缩放
+                tempWidth = imgWidth;
+                tempHeight = imgHeight;
+            }
+        } else {
+            // 原图片的高度必然 > 宽度
+            if (imgHeight > containerHeight) {
+                tempHeight = containerHeight;
+                // 按原图片的比例进行缩放
+                tempWidth = imgWidth * containerHeight / imgHeight;
+            } else {
+                // 按原图片的大小进行缩放
+                tempWidth = imgWidth;
+                tempHeight = imgHeight;
+            }
+        }
+    }
+    return {
+        tempWidth: tempWidth,
+        tempHeight: tempHeight
+    };
+}

package/esm/customerService/js-screen-shot/lib/common-methods/SaveBorderArrInfo.d.ts

@@ -0,0 +1,8 @@
+import { cutOutBoxBorder, positionInfoType } from "../type/ComponentType";
+/**
+ * 保存边框节点的相关信息
+ * @param borderSize 边框节点直径大小
+ * @param positionInfo 裁剪框位置信息
+ * @private
+ */
+export declare function saveBorderArrInfo(borderSize: number, positionInfo: positionInfoType): cutOutBoxBorder[];

package/esm/customerService/js-screen-shot/lib/common-methods/SaveBorderArrInfo.js

@@ -0,0 +1,125 @@
+/**
+ * 保存边框节点的相关信息
+ * @param borderSize 边框节点直径大小
+ * @param positionInfo 裁剪框位置信息
+ * @private
+ */ export function saveBorderArrInfo(borderSize, positionInfo) {
+    // 获取裁剪框位置信息
+    var startX = positionInfo.startX, startY = positionInfo.startY, width = positionInfo.width, height = positionInfo.height;
+    var halfBorderSize = borderSize / 2;
+    var borderArr = [];
+    // 移动, n北s南e东w西
+    borderArr[0] = {
+        x: startX + halfBorderSize,
+        y: startY + halfBorderSize,
+        width: width - borderSize,
+        height: height - borderSize,
+        index: 1,
+        option: 1
+    };
+    // n
+    borderArr[1] = {
+        x: startX + halfBorderSize,
+        y: startY,
+        width: width - borderSize,
+        height: halfBorderSize,
+        index: 2,
+        option: 2
+    };
+    borderArr[2] = {
+        x: startX - halfBorderSize + width / 2,
+        y: startY - halfBorderSize,
+        width: borderSize,
+        height: halfBorderSize,
+        index: 2,
+        option: 2
+    };
+    // s
+    borderArr[3] = {
+        x: startX + halfBorderSize,
+        y: startY - halfBorderSize + height,
+        width: width - borderSize,
+        height: halfBorderSize,
+        index: 2,
+        option: 3
+    };
+    borderArr[4] = {
+        x: startX - halfBorderSize + width / 2,
+        y: startY + height,
+        width: borderSize,
+        height: halfBorderSize,
+        index: 2,
+        option: 3
+    };
+    // w
+    borderArr[5] = {
+        x: startX,
+        y: startY + halfBorderSize,
+        width: halfBorderSize,
+        height: height - borderSize,
+        index: 3,
+        option: 4
+    };
+    borderArr[6] = {
+        x: startX - halfBorderSize,
+        y: startY - halfBorderSize + height / 2,
+        width: halfBorderSize,
+        height: borderSize,
+        index: 3,
+        option: 4
+    };
+    // e
+    borderArr[7] = {
+        x: startX - halfBorderSize + width,
+        y: startY + halfBorderSize,
+        width: halfBorderSize,
+        height: height - borderSize,
+        index: 3,
+        option: 5
+    };
+    borderArr[8] = {
+        x: startX + width,
+        y: startY - halfBorderSize + height / 2,
+        width: halfBorderSize,
+        height: borderSize,
+        index: 3,
+        option: 5
+    };
+    // nw
+    borderArr[9] = {
+        x: startX - halfBorderSize,
+        y: startY - halfBorderSize,
+        width: borderSize,
+        height: borderSize,
+        index: 4,
+        option: 6
+    };
+    // se
+    borderArr[10] = {
+        x: startX - halfBorderSize + width,
+        y: startY - halfBorderSize + height,
+        width: borderSize,
+        height: borderSize,
+        index: 4,
+        option: 7
+    };
+    // ne
+    borderArr[11] = {
+        x: startX - halfBorderSize + width,
+        y: startY - halfBorderSize,
+        width: borderSize,
+        height: borderSize,
+        index: 5,
+        option: 8
+    };
+    // sw
+    borderArr[12] = {
+        x: startX - halfBorderSize,
+        y: startY - halfBorderSize + height,
+        width: borderSize,
+        height: borderSize,
+        index: 5,
+        option: 9
+    };
+    return borderArr;
+}

package/esm/customerService/js-screen-shot/lib/common-methods/SaveCanvasToBase64.d.ts

@@ -0,0 +1 @@
+export declare function saveCanvasToBase64(context: CanvasRenderingContext2D, startX: number, startY: number, width: number, height: number, quality?: number, writeBase64?: boolean): string;

package/esm/customerService/js-screen-shot/lib/common-methods/SaveCanvasToBase64.js

@@ -0,0 +1,37 @@
+/**
+ * 将指定区域的canvas转换为base64格式的图片
+ */ import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { getCanvas2dCtx } from "./CanvasPatch";
+export function saveCanvasToBase64(context, startX, startY, width, height) {
+    var quality = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : 0.75, writeBase64 = arguments.length > 6 && arguments[6] !== void 0 ? arguments[6] : true;
+    // 获取设备像素比
+    var dpr = window.devicePixelRatio || 1;
+    // 获取裁剪框区域图片信息
+    var img = context.getImageData(startX * dpr, startY * dpr, width * dpr, height * dpr);
+    // 创建canvas标签，用于存放裁剪区域的图片
+    var canvas = document.createElement("canvas");
+    // 获取裁剪框区域画布
+    var imgContext = getCanvas2dCtx(canvas, width, height);
+    if (imgContext) {
+        // 将图片放进canvas中
+        imgContext.putImageData(img, 0, 0);
+        if (writeBase64) {
+            // 将图片自动添加至剪贴板中
+            canvas === null || canvas === void 0 ? void 0 : canvas.toBlob(function(blob) {
+                var _navigator_clipboard;
+                if (blob == null) return;
+                var Clipboard = window.ClipboardItem;
+                // 浏览器不支持Clipboard
+                if (Clipboard == null) return canvas.toDataURL("png");
+                var clipboardItem = new Clipboard(_define_property({}, blob.type, blob));
+                (_navigator_clipboard = navigator.clipboard) === null || _navigator_clipboard === void 0 ? void 0 : _navigator_clipboard.write([
+                    clipboardItem
+                ]).then(function() {
+                    return "写入成功";
+                });
+            }, "image/png", quality);
+        }
+        return canvas.toDataURL("png");
+    }
+    return "";
+}

package/esm/customerService/js-screen-shot/lib/common-methods/SaveCanvasToImage.d.ts

@@ -0,0 +1 @@
+export declare function saveCanvasToImage(context: CanvasRenderingContext2D, startX: number, startY: number, width: number, height: number): void;

package/esm/customerService/js-screen-shot/lib/common-methods/SaveCanvasToImage.js

@@ -0,0 +1,26 @@
+import { getCanvas2dCtx } from "./CanvasPatch";
+import PlugInParameters from "../main-entrance/PlugInParameters";
+export function saveCanvasToImage(context, startX, startY, width, height) {
+    var plugInParameters = new PlugInParameters();
+    // 获取设备像素比
+    var dpr = window.devicePixelRatio || 1;
+    // 获取裁剪框区域图片信息
+    // 获取裁剪框区域图片信息
+    var img = context.getImageData(startX * dpr, startY * dpr, width * dpr, height * dpr);
+    // 创建canvas标签，用于存放裁剪区域的图片
+    var canvas = document.createElement("canvas");
+    // 获取裁剪框区域画布
+    var imgContext = getCanvas2dCtx(canvas, width, height);
+    if (imgContext) {
+        // 将图片放进裁剪框内
+        imgContext.putImageData(img, 0, 0);
+        var a = document.createElement("a");
+        // 获取图片
+        a.href = canvas.toDataURL("png");
+        // 获取用户传入的文件名
+        var imgName = (plugInParameters === null || plugInParameters === void 0 ? void 0 : plugInParameters.getSaveImgTitle()) || new Date().getTime();
+        // 下载图片
+        a.download = "".concat(imgName, ".png");
+        a.click();
+    }
+}

package/esm/customerService/js-screen-shot/lib/common-methods/SelectColor.d.ts

@@ -0,0 +1 @@
+export declare function selectColor(): void;

package/esm/customerService/js-screen-shot/lib/common-methods/SelectColor.js

@@ -0,0 +1,6 @@
+import InitData from "../main-entrance/InitData";
+export function selectColor() {
+    var data = new InitData();
+    // 显示颜色选择面板
+    data.setColorPanelStatus(true);
+}

package/esm/customerService/js-screen-shot/lib/common-methods/SelectTextSize.d.ts

@@ -0,0 +1,5 @@
+export declare function selectTextSize(): void;
+export declare function setTextSize(size: number): void;
+export declare function getTextSize(): number;
+export declare function hiddenTextSizeOptionStatus(): void;
+export declare function hiddenColorPanelStatus(): void;

package/esm/customerService/js-screen-shot/lib/common-methods/SelectTextSize.js

@@ -0,0 +1,26 @@
+import InitData from "../main-entrance/InitData";
+export function selectTextSize() {
+    var data = new InitData();
+    // 显示文字大小选择面板
+    data.setTextSizeOptionStatus(true);
+}
+export function setTextSize(size) {
+    var data = new InitData();
+    // 设置字体大小
+    data.setFontSize(size);
+}
+export function getTextSize() {
+    var data = new InitData();
+    // 获取字体大小
+    return data.getFontSize();
+}
+export function hiddenTextSizeOptionStatus() {
+    var data = new InitData();
+    // 隐藏文字大小选择面板
+    data.setTextSizeOptionStatus(false);
+}
+export function hiddenColorPanelStatus() {
+    var data = new InitData();
+    // 隐藏颜色选择面板
+    data.setColorPanelStatus(false);
+}

package/esm/customerService/js-screen-shot/lib/common-methods/SetBrushSize.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 设置画笔大小
+ * @param size
+ * @param index
+ * @param mouseEvent
+ */
+export declare function setBrushSize(size: string, index: number, mouseEvent: MouseEvent): number;
+/**
+ * 设置马赛克工具的笔触大小
+ * @param size
+ * @param index
+ * @param mouseEvent
+ */
+export declare function setMosaicPenSize(size: string, index: number, mouseEvent: MouseEvent): number;

package/esm/customerService/js-screen-shot/lib/common-methods/SetBrushSize.js

@@ -0,0 +1,50 @@
+import InitData from "../main-entrance/InitData";
+import { setSelectedClassName } from "./SetSelectedClassName";
+/**
+ * 设置画笔大小
+ * @param size
+ * @param index
+ * @param mouseEvent
+ */ export function setBrushSize(size, index, mouseEvent) {
+    var data = new InitData();
+    // 为当前点击项添加选中时的class名
+    setSelectedClassName(mouseEvent, index, true);
+    var sizeNum = 2;
+    switch(size){
+        case "small":
+            sizeNum = 2;
+            break;
+        case "medium":
+            sizeNum = 5;
+            break;
+        case "big":
+            sizeNum = 10;
+            break;
+    }
+    data.setPenSize(sizeNum);
+    return sizeNum;
+}
+/**
+ * 设置马赛克工具的笔触大小
+ * @param size
+ * @param index
+ * @param mouseEvent
+ */ export function setMosaicPenSize(size, index, mouseEvent) {
+    var data = new InitData();
+    // 为当前点击项添加选中时的class名
+    setSelectedClassName(mouseEvent, index, true);
+    var sizeNum = 10;
+    switch(size){
+        case "small":
+            sizeNum = 10;
+            break;
+        case "medium":
+            sizeNum = 20;
+            break;
+        case "big":
+            sizeNum = 40;
+            break;
+    }
+    data.setMosaicPenSize(sizeNum);
+    return sizeNum;
+}

package/esm/customerService/js-screen-shot/lib/common-methods/SetSelectedClassName.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 为当前点击项添加选中时的class，移除其兄弟元素选中时的class
+ * @param mouseEvent 需要进行操作的元素
+ * @param index 当前点击项
+ * @param isOption 是否为画笔选项
+ */
+export declare function setSelectedClassName(mouseEvent: any, index: number, isOption: boolean): void;

package/esm/customerService/js-screen-shot/lib/common-methods/SetSelectedClassName.js

@@ -0,0 +1,28 @@
+import { getSelectedClassName } from "./GetSelectedCalssName";
+import { getBrushSelectedName } from "./GetBrushSelectedName";
+/**
+ * 为当前点击项添加选中时的class，移除其兄弟元素选中时的class
+ * @param mouseEvent 需要进行操作的元素
+ * @param index 当前点击项
+ * @param isOption 是否为画笔选项
+ */ export function setSelectedClassName(mouseEvent, index, isOption) {
+    // 获取当前点击项选中时的class名
+    var className = getSelectedClassName(index);
+    if (isOption) {
+        // 获取画笔选项选中时的对应的class
+        className = getBrushSelectedName(index);
+    }
+    // 解决event 在火狐和Safari浏览上的兼容性问题
+    var path = mouseEvent.path || mouseEvent.composedPath && mouseEvent.composedPath();
+    // 获取div下的所有子元素
+    var nodes = path[1].children;
+    for(var i = 0; i < nodes.length; i++){
+        var item = nodes[i];
+        // 如果工具栏中已经有选中的class则将其移除
+        if (item.className.includes("active")) {
+            item.classList.remove(item.classList[2]);
+        }
+    }
+    // 给当前点击项添加选中时的class
+    mouseEvent.target.className += " " + className;
+}

package/esm/customerService/js-screen-shot/lib/common-methods/TakeOutHistory.d.ts

@@ -0,0 +1 @@
+export declare function takeOutHistory(): void;

package/esm/customerService/js-screen-shot/lib/common-methods/TakeOutHistory.js

@@ -0,0 +1,20 @@
+/**
+ * 取出一条历史记录
+ */ import InitData from "../main-entrance/InitData";
+export function takeOutHistory() {
+    var _data_getScreenShotContainer;
+    var data = new InitData();
+    data.popHistory();
+    var screenShortCanvas = (_data_getScreenShotContainer = data.getScreenShotContainer()) === null || _data_getScreenShotContainer === void 0 ? void 0 : _data_getScreenShotContainer.getContext("2d");
+    if (screenShortCanvas != null) {
+        if (data.getHistory().length > 0) {
+            screenShortCanvas.putImageData(data.getHistory()[data.getHistory().length - 1]["data"], 0, 0);
+        }
+    }
+    data.setUndoClickNum(data.getUndoClickNum() + 1);
+    // 历史记录已取完，禁用撤回按钮点击
+    if (data.getHistory().length - 1 <= 0) {
+        data.setUndoClickNum(0);
+        data.setUndoStatus(false);
+    }
+}

package/esm/customerService/js-screen-shot/lib/common-methods/UpdateContainerMouseStyle.d.ts

@@ -0,0 +1 @@
+export declare function updateContainerMouseStyle(container: HTMLCanvasElement, toolName: string): void;

package/esm/customerService/js-screen-shot/lib/common-methods/UpdateContainerMouseStyle.js

@@ -0,0 +1,10 @@
+export function updateContainerMouseStyle(container, toolName) {
+    switch(toolName){
+        case "text":
+            container.style.cursor = "text";
+            break;
+        default:
+            container.style.cursor = "default";
+            break;
+    }
+}

package/esm/customerService/js-screen-shot/lib/common-methods/ZoomCutOutBoxPosition.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 缩放裁剪框
+ * @param currentX 当前鼠标X轴坐标
+ * @param currentY 当前鼠标Y轴坐标
+ * @param startX 裁剪框当前X轴坐标
+ * @param startY 裁剪框当前Y轴坐标
+ * @param width 裁剪框宽度
+ * @param height 裁剪框高度
+ * @param option 当前操作的节点
+ * @private
+ */
+export declare function zoomCutOutBoxPosition(currentX: number, currentY: number, startX: number, startY: number, width: number, height: number, option: number): {
+    tempStartX: any;
+    tempStartY: any;
+    tempWidth: any;
+    tempHeight: number;
+};