bhd-components 0.9.1 → 0.9.3

package/esm/customerService/js-screen-shot/lib/split-methods/ToolClickEvent.js

@@ -0,0 +1,132 @@
+/**
+ * 裁剪框工具栏点击事件
+ * @param toolName
+ * @param index
+ * @param mouseEvent
+ */ import { setSelectedClassName } from "../common-methods/SetSelectedClassName";
+import { calculateOptionIcoPosition } from "./CalculateOptionIcoPosition";
+import InitData from "../main-entrance/InitData";
+import { getCanvasImgData } from "../common-methods/GetCanvasImgData";
+import { takeOutHistory } from "../common-methods/TakeOutHistory";
+import { drawCutOutBox } from "./DrawCutOutBox";
+import { drawText } from "./DrawText";
+import { addHistory } from "./AddHistoryData";
+import PlugInParameters from "../main-entrance/PlugInParameters";
+export function toolClickEvent(toolName, index, mouseEvent, completeCallback, closeCallback) {
+    var data = new InitData();
+    var plugInParameters = new PlugInParameters();
+    var textInputController = data.getTextInputController();
+    var screenShotController = data.getScreenShotContainer();
+    var ScreenShotImageController = data.getScreenShotImageController();
+    data.setActiveToolName(toolName);
+    if (screenShotController == null || ScreenShotImageController == null) return;
+    // 获取canvas容器
+    var screenShotCanvas = screenShotController.getContext("2d");
+    // 工具栏尚未点击，当前属于首次点击，重新绘制一个无像素点的裁剪框
+    if (!data.getToolClickStatus()) {
+        var _data_getToolPosition, _data_getToolPosition1;
+        var leftValue = ((_data_getToolPosition = data.getToolPosition()) === null || _data_getToolPosition === void 0 ? void 0 : _data_getToolPosition.left) || 0;
+        var topValue = ((_data_getToolPosition1 = data.getToolPosition()) === null || _data_getToolPosition1 === void 0 ? void 0 : _data_getToolPosition1.top) || 0;
+        // 工具栏位置超出时，对其进行修正处理
+        if (topValue && data.getToolPositionStatus()) {
+            // 调整工具栏位置
+            data.setToolInfo(leftValue, topValue - 46);
+        }
+        // data.setToolStatus(true);
+        // 获取裁剪框位置信息
+        var cutBoxPosition = data.getCutOutBoxPosition();
+        // 开始绘制无像素点裁剪框
+        drawCutOutBox(cutBoxPosition.startX, cutBoxPosition.startY, cutBoxPosition.width, cutBoxPosition.height, screenShotCanvas, data.getBorderSize(), screenShotController, ScreenShotImageController, false);
+    }
+    // 更新当前点击的工具栏条目
+    data.setToolName(toolName);
+    // 为当前点击项添加选中时的class名
+    setSelectedClassName(mouseEvent, index, false);
+    if (toolName === "text") {
+        var // 颜色选择容器添加布局兼容样式
+        _data_getColorSelectPanel;
+        // 显示文字选择容器
+        data.setTextSizePanelStatus(true);
+        // 隐藏画笔尺寸选择容器
+        data.setBrushSelectionStatus(false);
+        (_data_getColorSelectPanel = data.getColorSelectPanel()) === null || _data_getColorSelectPanel === void 0 ? void 0 : _data_getColorSelectPanel.classList.add("text-select-status");
+    } else {
+        // 隐藏下拉选择框
+        data.setTextSizePanelStatus(false);
+        // 显示画笔尺寸选择容器
+        data.setBrushSelectionStatus(true);
+    }
+    // 显示选项面板
+    data.setOptionStatus(true);
+    // 设置选项面板位置
+    data.setOptionPosition(calculateOptionIcoPosition(index));
+    data.setRightPanel(true);
+    if (toolName == "mosaicPen") {
+        // 马赛克工具隐藏右侧颜色面板与角标
+        data.setRightPanel(false);
+        data.hiddenOptionIcoStatus();
+    }
+    // 清空文本输入区域的内容并隐藏文本输入框
+    if (textInputController != null && data.getTextStatus() || textInputController != null && toolName !== "text") {
+        var text = textInputController.innerText;
+        if (text && text !== "") {
+            var _data_getTextInfo = data.getTextInfo(), positionX = _data_getTextInfo.positionX, positionY = _data_getTextInfo.positionY, color = _data_getTextInfo.color, size = _data_getTextInfo.size;
+            drawText(text, positionX, positionY, color, size, screenShotCanvas);
+            // 添加历史记录
+            addHistory();
+        }
+        textInputController.innerHTML = "";
+        data.setTextStatus(false);
+    }
+    // 初始化点击状态
+    data.setDragging(false);
+    data.setDraggingTrim(false);
+    // 保存图片
+    if (toolName == "save") {
+        getCanvasImgData(true);
+        var callback = plugInParameters.getSaveCallback();
+        if (callback) {
+            callback(0, "保存成功");
+        }
+        // 销毁组件
+        data.destroyDOM();
+        data.setInitStatus(true);
+    }
+    // 销毁组件
+    if (toolName == "close") {
+        // 触发关闭回调函数
+        if (closeCallback) {
+            closeCallback();
+        }
+        data.destroyDOM();
+        data.setInitStatus(true);
+    }
+    // 确认截图
+    if (toolName == "confirm") {
+        var base64 = getCanvasImgData(false);
+        // 触发回调函数，截图数据回传给插件调用者
+        if (completeCallback) {
+            completeCallback({
+                base64: base64,
+                cutInfo: data.getCutOutBoxPosition()
+            });
+        }
+        if (!plugInParameters.getDestroyContainerState()) {
+            // 隐藏工具栏
+            // data.setToolStatus(false);
+            // data.setOptionStatus(false);
+            return;
+        }
+        // 销毁组件
+        data.destroyDOM();
+        data.setInitStatus(true);
+    }
+    // 撤销
+    if (toolName == "undo") {
+        // 隐藏画笔选项工具栏
+        data.setOptionStatus(false);
+        takeOutHistory();
+    }
+    // 设置裁剪框工具栏为点击状态
+    data.setToolClickStatus(true);
+}

package/esm/customerService/js-screen-shot/lib/split-methods/drawCrossImg.d.ts

@@ -0,0 +1 @@
+export declare function drawCrossImg(html: Document): Promise<string[]>;

package/esm/customerService/js-screen-shot/lib/split-methods/drawCrossImg.js

@@ -0,0 +1,33 @@
+export function drawCrossImg(html) {
+    var promises = [];
+    var imageNodes = html.querySelectorAll("img");
+    imageNodes.forEach(function(element) {
+        var href = element.getAttribute("src");
+        if (!href) return;
+        if (href && href.startsWith("base64")) return;
+        var promise = new Promise(function(resolve, reject) {
+            var img = new Image();
+            img.crossOrigin = "anonymous";
+            img.src = "".concat(href, "&time=").concat(+new Date().getTime());
+            img.onload = function() {
+                var _canvas;
+                var width = element.width;
+                var height = element.height;
+                var canvas = document.createElement("canvas");
+                canvas.width = width;
+                canvas.height = height;
+                var ctx = canvas.getContext("2d");
+                ctx.drawImage(img, 0, 0, width, height);
+                var base64 = (_canvas = canvas) === null || _canvas === void 0 ? void 0 : _canvas.toDataURL();
+                element.setAttribute("src", base64);
+                resolve("转换成功");
+            };
+            img.onerror = reject;
+            if (href !== null) {
+                img.src = href;
+            }
+        });
+        promises.push(promise);
+    });
+    return Promise.all(promises);
+}

package/esm/customerService/js-screen-shot/lib/type/ComponentType.d.ts

@@ -0,0 +1,133 @@
+export type cutOutBoxBorder = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    index: number;
+    option: number;
+};
+export type movePositionType = {
+    moveStartX: number;
+    moveStartY: number;
+};
+export type positionInfoType = {
+    startX: number;
+    startY: number;
+    width: number;
+    height: number;
+};
+export type textInfoType = {
+    positionX: number;
+    positionY: number;
+    color: string;
+    size: number;
+};
+export type zoomCutOutBoxReturnType = {
+    tempStartX: number;
+    tempStartY: number;
+    tempWidth: number;
+    tempHeight: number;
+};
+export type toolPositionValType = "left" | "right" | "center";
+export type hideBarInfoType = {
+    state: boolean;
+    color?: string;
+    fillWidth?: number;
+    fillHeight?: number;
+    fillState?: boolean;
+};
+export type drawCutOutBoxReturnType = {
+    startX: number;
+    startY: number;
+    width: number;
+    height: number;
+};
+export type toolIcoType = {
+    [key: string]: boolean | undefined;
+    square?: boolean;
+    round?: boolean;
+    rightTop?: boolean;
+    brush?: boolean;
+    mosaicPen?: boolean;
+    text?: boolean;
+    separateLine?: boolean;
+    save?: boolean;
+    undo?: boolean;
+    confirm?: boolean;
+};
+export type toolbarType = {
+    id: number;
+    title: string;
+};
+export type crcEventType = {
+    state: boolean;
+    handleFn?: () => void;
+};
+export type screenShotType = {
+    enableWebRtc?: boolean;
+    screenFlow?: MediaStream;
+    level?: number;
+    canvasWidth?: number;
+    canvasHeight?: number;
+    completeCallback?: (imgInfo: {
+        base64: string;
+        cutInfo: positionInfoType;
+    }) => void;
+    closeCallback?: () => void;
+    triggerCallback?: (res: {
+        code: number;
+        msg: string;
+        displaySurface: string | null;
+        displayLabel: string | null;
+    }) => void;
+    cancelCallback?: (res: {
+        code: number;
+        msg: string;
+        errorInfo: string;
+    }) => void;
+    saveCallback?: (code: number, msg: string) => void;
+    position?: {
+        top?: number;
+        left?: number;
+    };
+    clickCutFullScreen?: boolean;
+    hiddenToolIco?: toolIcoType;
+    showScreenData?: boolean;
+    imgSrc?: string;
+    loadCrossImg?: boolean;
+    proxyUrl?: string;
+    useCORS?: boolean;
+    screenShotDom?: HTMLElement | HTMLDivElement | HTMLCanvasElement;
+    cropBoxInfo?: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    wrcReplyTime?: number;
+    wrcImgPosition?: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    noScroll?: boolean;
+    maskColor?: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    toolPosition?: toolPositionValType;
+    writeBase64?: boolean;
+    hiddenScrollBar?: hideBarInfoType;
+    wrcWindowMode?: boolean;
+    curTabState?: boolean;
+    customRightClickEvent?: crcEventType;
+    cutBoxBdColor?: string;
+    maxUndoNum?: number;
+    useRatioArrow?: boolean;
+    imgAutoFit?: boolean;
+    saveImgTitle?: string;
+    destroyContainer?: boolean;
+};

package/esm/customerService/js-screen-shot/lib/type/ComponentType.js

@@ -0,0 +1,2 @@
+// 裁剪框节点事件定义
+export { };

package/esm/customerService/js-screen-shot/main.d.ts

@@ -0,0 +1,110 @@
+import "./assets/less/screen-shot.less";
+import { screenShotType } from "./lib/type/ComponentType";
+export default class ScreenShot {
+    private readonly data;
+    private readonly videoController;
+    private screenShotContainer;
+    private screenShotDom;
+    private toolController;
+    private screenShotImageController;
+    private screenShotCanvas;
+    private textInputController;
+    private optionController;
+    private optionIcoController;
+    private plugInParameters;
+    private wrcReplyTime;
+    private keyboardEventHandle;
+    private drawGraphPosition;
+    private tempGraphPosition;
+    private wrcImgPosition;
+    private hiddenScrollBar;
+    private wrcWindowMode;
+    private curTabState;
+    private cutOutBoxBorderArr;
+    private borderOption;
+    private movePosition;
+    private dragFlag;
+    private clickCutFullScreen;
+    private getFullScreenStatus;
+    private drawGraphPrevX;
+    private drawGraphPrevY;
+    private degreeOfBlur;
+    private dpr;
+    private fullScreenDiffHeight;
+    private position;
+    private imgSrc;
+    private loadCrossImg;
+    private mouseInsideCropBox;
+    private proxyUrl;
+    private useCORS;
+    private drawStatus;
+    private captureStream;
+    private cropBoxInfo;
+    private textInputPosition;
+    private placement;
+    private drawArrow;
+    private customRightClickEvent;
+    constructor(options: screenShotType);
+    getCanvasController(): HTMLCanvasElement | null | undefined;
+    destroyComponents(): void;
+    completeScreenshot(): void;
+    private registerForRightClickEvent;
+    private load;
+    private sendStream;
+    private loadScreenFlowData;
+    private startCapture;
+    private stopCapture;
+    private screenShot;
+    private mouseDownEvent;
+    private mouseMoveEvent;
+    private adjustContainerLevels;
+    private initCropBox;
+    /**
+     * 从窗口数据流中截取页面body内容
+     * @param videoWidth 窗口宽度
+     * @param videoHeight 窗口高度
+     * @param containerWidth body内容宽度
+     * @param containerHeight body内容高度
+     * @private
+     */
+    private getWindowContentData;
+    private registerContainerShortcuts;
+    private showToolBar;
+    private setGlobalParameter;
+    private setOptionalParameter;
+    private mouseUpEvent;
+    /**
+     * 操作裁剪框
+     * @param currentX 裁剪框当前x轴坐标
+     * @param currentY 裁剪框当前y轴坐标
+     * @param startX 鼠标x轴坐标
+     * @param startY 鼠标y轴坐标
+     * @param width 裁剪框宽度
+     * @param height 裁剪框高度
+     * @param context 需要进行绘制的canvas画布
+     * @private
+     */
+    private operatingCutOutBox;
+    /**
+     * 显示最新的画布状态
+     * @private
+     */
+    private showLastHistory;
+    private setScreenShotContainerEventListener;
+    /**
+     * 向截图容器中绘制图片
+     * @param triggerCallback
+     * @param context
+     * @param imgSrc
+     * @private
+     */
+    private drawPictures;
+    /**
+     * 初始化截图容器
+     * @param triggerCallback
+     * @param context
+     * @param screenShotContainer
+     * @private
+     */
+    private initScreenShot;
+}