bhd-components 0.9.1 → 0.9.3

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

@@ -0,0 +1,41 @@
+import InitData from "../main-entrance/InitData";
+export function getColor(index) {
+    const data = new InitData();
+    let 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/es2017/customerService/js-screen-shot/lib/common-methods/GetSelectedCalssName.d.ts

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

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

@@ -0,0 +1,23 @@
+export function getSelectedClassName(index) {
+    let 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/es2017/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/es2017/customerService/js-screen-shot/lib/common-methods/GetToolRelativePosition.js

@@ -0,0 +1,9 @@
+/**
+ * 获取截图工具栏相对于视口的位置
+ */ export function getToolRelativePosition(left, top, dom = document.body) {
+    const rect = dom.getBoundingClientRect();
+    return {
+        left: left || Math.abs(rect.left),
+        top: top || Math.abs(rect.top)
+    };
+}

package/es2017/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/es2017/customerService/js-screen-shot/lib/common-methods/ImgScaling.js

@@ -0,0 +1,41 @@
+/**
+ * 等比例缩放图片
+ * @param imgWidth
+ * @param imgHeight
+ * @param containerWidth
+ * @param containerHeight
+ */ export function imgScaling(imgWidth, imgHeight, containerWidth, containerHeight) {
+    let [tempWidth, tempHeight] = [
+        0,
+        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,
+        tempHeight
+    };
+}

package/es2017/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/es2017/customerService/js-screen-shot/lib/common-methods/SaveBorderArrInfo.js

@@ -0,0 +1,125 @@
+/**
+ * 保存边框节点的相关信息
+ * @param borderSize 边框节点直径大小
+ * @param positionInfo 裁剪框位置信息
+ * @private
+ */ export function saveBorderArrInfo(borderSize, positionInfo) {
+    // 获取裁剪框位置信息
+    const { startX, startY, width, height } = positionInfo;
+    const halfBorderSize = borderSize / 2;
+    const 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/es2017/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/es2017/customerService/js-screen-shot/lib/common-methods/SaveCanvasToBase64.js

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

package/es2017/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/es2017/customerService/js-screen-shot/lib/common-methods/SaveCanvasToImage.js

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

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

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

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

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

package/es2017/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/es2017/customerService/js-screen-shot/lib/common-methods/SelectTextSize.js

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

package/es2017/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/es2017/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) {
+    const data = new InitData();
+    // 为当前点击项添加选中时的class名
+    setSelectedClassName(mouseEvent, index, true);
+    let 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) {
+    const data = new InitData();
+    // 为当前点击项添加选中时的class名
+    setSelectedClassName(mouseEvent, index, true);
+    let 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/es2017/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/es2017/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名
+    let className = getSelectedClassName(index);
+    if (isOption) {
+        // 获取画笔选项选中时的对应的class
+        className = getBrushSelectedName(index);
+    }
+    // 解决event 在火狐和Safari浏览上的兼容性问题
+    const path = mouseEvent.path || mouseEvent.composedPath && mouseEvent.composedPath();
+    // 获取div下的所有子元素
+    const nodes = path[1].children;
+    for(let i = 0; i < nodes.length; i++){
+        const item = nodes[i];
+        // 如果工具栏中已经有选中的class则将其移除
+        if (item.className.includes("active")) {
+            item.classList.remove(item.classList[2]);
+        }
+    }
+    // 给当前点击项添加选中时的class
+    mouseEvent.target.className += " " + className;
+}

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

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

package/es2017/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;
+    const data = new InitData();
+    data.popHistory();
+    const 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/es2017/customerService/js-screen-shot/lib/common-methods/UpdateContainerMouseStyle.d.ts

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

package/es2017/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/es2017/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: number;
+    tempStartY: number;
+    tempWidth: number;
+    tempHeight: number;
+};

package/es2017/customerService/js-screen-shot/lib/common-methods/ZoomCutOutBoxPosition.js

@@ -0,0 +1,92 @@
+import { nonNegativeData } from "./FixedData";
+/**
+ * 缩放裁剪框
+ * @param currentX 当前鼠标X轴坐标
+ * @param currentY 当前鼠标Y轴坐标
+ * @param startX 裁剪框当前X轴坐标
+ * @param startY 裁剪框当前Y轴坐标
+ * @param width 裁剪框宽度
+ * @param height 裁剪框高度
+ * @param option 当前操作的节点
+ * @private
+ */ export function zoomCutOutBoxPosition(currentX, currentY, startX, startY, width, height, option) {
+    // 临时坐标
+    let tempStartX, tempStartY, tempWidth, tempHeight = 0;
+    // 判断操作方向
+    switch(option){
+        case 2:
+            tempStartY = currentY - (startY + height) > 0 ? startY + height : currentY;
+            tempHeight = nonNegativeData(height - (currentY - startY));
+            return {
+                tempStartX: startX,
+                tempStartY,
+                tempWidth: width,
+                tempHeight
+            };
+        case 3:
+            tempHeight = nonNegativeData(currentY - startY);
+            return {
+                tempStartX: startX,
+                tempStartY: startY,
+                tempWidth: width,
+                tempHeight
+            };
+        case 4:
+            tempStartX = currentX - (startX + width) > 0 ? startX + width : currentX;
+            tempWidth = nonNegativeData(width - (currentX - startX));
+            return {
+                tempStartX,
+                tempStartY: startY,
+                tempWidth,
+                tempHeight: height
+            };
+        case 5:
+            tempWidth = nonNegativeData(currentX - startX);
+            return {
+                tempStartX: startX,
+                tempStartY: startY,
+                tempWidth,
+                tempHeight: height
+            };
+        case 6:
+            tempStartX = currentX - (startX + width) > 0 ? startX + width : currentX;
+            tempStartY = currentY - (startY + height) > 0 ? startY + height : currentY;
+            tempWidth = nonNegativeData(width - (currentX - startX));
+            tempHeight = nonNegativeData(height - (currentY - startY));
+            return {
+                tempStartX,
+                tempStartY,
+                tempWidth,
+                tempHeight
+            };
+        case 7:
+            tempWidth = nonNegativeData(currentX - startX);
+            tempHeight = nonNegativeData(currentY - startY);
+            return {
+                tempStartX: startX,
+                tempStartY: startY,
+                tempWidth,
+                tempHeight
+            };
+        case 8:
+            tempStartY = currentY - (startY + height) > 0 ? startY + height : currentY;
+            tempWidth = nonNegativeData(currentX - startX);
+            tempHeight = nonNegativeData(height - (currentY - startY));
+            return {
+                tempStartX: startX,
+                tempStartY,
+                tempWidth,
+                tempHeight
+            };
+        case 9:
+            tempStartX = currentX - (startX + width) > 0 ? startX + width : currentX;
+            tempWidth = nonNegativeData(width - (currentX - startX));
+            tempHeight = nonNegativeData(currentY - startY);
+            return {
+                tempStartX,
+                tempStartY: startY,
+                tempWidth,
+                tempHeight
+            };
+    }
+}

package/es2017/customerService/js-screen-shot/lib/config/Toolbar.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    id: number;
+    title: string;
+}[];
+export default _default;