bhd-components 0.9.1 → 0.9.2

package/es2017/customerService/js-screen-shot/lib/main-entrance/InitData.js

@@ -0,0 +1,538 @@
+import { takeOutHistory } from "../common-methods/TakeOutHistory";
+import { getToolRelativePosition } from "../common-methods/GetToolRelativePosition";
+import PlugInParameters from "./PlugInParameters";
+// 裁剪框修剪状态
+let draggingTrim = false;
+// 裁剪框拖拽状态
+let dragging = false;
+// 截图工具栏点击状态
+let toolClickStatus = false;
+// 当前选择的颜色
+let selectedColor = "#F53340";
+// 当前点击的工具栏名称
+let toolName = "";
+//  当前选择的画笔大小
+let penSize = 2;
+// 马赛克工具的笔触大小
+let mosaicPenSize = 10;
+// 裁剪框顶点边框直径大小
+const borderSize = 10;
+// 撤销点击次数
+let undoClickNum = 0;
+// 画笔历史记录
+let history = [];
+// 文本输入工具栏点击状态
+const textClickStatus = false;
+// 工具栏超出截图容器状态
+let toolPositionStatus = false;
+// 裁剪框位置参数
+let cutOutBoxPosition = {
+    startX: 0,
+    startY: 0,
+    width: 0,
+    height: 0
+};
+// 获取截图容器dom
+let screenShotController = null;
+// 获取截图工具栏容器dom
+let toolController = null;
+// let cutBoxSizeContainer: HTMLDivElement | null = null;
+// 获取文本输入区域dom
+let textInputController = null;
+// 截图工具栏画笔选择dom
+let optionIcoController = null;
+// 截图工具栏文字大小选择dom
+let optionTextSizeController = null;
+let brushSelectionController = null;
+let textSizeContainer = null;
+let fontSize = 17;
+let optionController = null;
+let colorSelectController = null;
+let rightPanel = null;
+let colorSelectPanel = null;
+let undoController = null;
+// 屏幕截图容器
+let screenShotImageController = null;
+// 截图容器是否可滚动
+let noScrollStatus = false;
+// 数据初始化标识
+let initStatus = false;
+// 当前工具栏内选中的工具
+let activeTool = "";
+let textInfo;
+// 是否需要还原页面的滚动条状态
+let resetScrollbarState = false;
+// 当前是否处于文本编辑状态
+let textEditState = false;
+class InitData {
+    // 设置数据初始化标识
+    setInitStatus(status) {
+        initStatus = status;
+    }
+    // 设置截图容器宽高
+    setScreenShotInfo(width, height) {
+        this.getScreenShotContainer();
+        if (screenShotController == null) return;
+        // 增加截图锁屏
+        if (noScrollStatus) {
+            document.body.classList.add("__screenshot-lock-scroll");
+        }
+        screenShotController.width = width;
+        screenShotController.height = height;
+    }
+    // 设置截图容器位置
+    setScreenShotPosition(left, top) {
+        this.getScreenShotContainer();
+        if (screenShotController == null) return;
+        const { left: rLeft , top: rTop  } = getToolRelativePosition(left, top);
+        screenShotController.style.left = rLeft + "px";
+        screenShotController.style.top = rTop + "px";
+    }
+    // 显示截图区域容器
+    showScreenShotPanel() {
+        this.getScreenShotContainer();
+        if (screenShotController == null) return;
+        screenShotController.style.display = "block";
+    }
+    // 获取截图容器dom
+    getScreenShotContainer() {
+        screenShotController = document.getElementById("screenShotContainer");
+        return screenShotController;
+    }
+    // 获取截图工具栏dom
+    getToolController() {
+        toolController = document.getElementById("toolPanel");
+        return toolController;
+    }
+    // // 获取裁剪框尺寸显示容器
+    // public getCutBoxSizeContainer() {
+    //   cutBoxSizeContainer = document.getElementById(
+    //     "cutBoxSizePanel"
+    //   ) as HTMLDivElement | null;
+    //   return cutBoxSizeContainer;
+    // }
+    // 获取文本输入区域dom
+    getTextInputController() {
+        textInputController = document.getElementById("textInputPanel");
+        return textInputController;
+    }
+    // 获取文本输入工具栏展示状态
+    getTextStatus() {
+        return textClickStatus;
+    }
+    // 获取屏幕截图容器
+    getScreenShotImageController() {
+        return screenShotImageController;
+    }
+    // 设置屏幕截图
+    setScreenShotImageController(imageController) {
+        screenShotImageController = imageController;
+    }
+    // 设置截图工具栏展示状态
+    setToolStatus(status) {
+        toolController = this.getToolController();
+        if (status) {
+            toolController.style.display = "block";
+            return;
+        }
+        toolController.style.display = "none";
+    }
+    // // 设置裁剪框尺寸显示容器展示状态
+    // public setCutBoxSizeStatus(status: boolean) {
+    //   if (cutBoxSizeContainer == null) return;
+    //   if (status) {
+    //     cutBoxSizeContainer.style.display = "flex";
+    //     return;
+    //   }
+    //   cutBoxSizeContainer.style.display = "none";
+    // }
+    // // 设置裁剪框尺寸显示容器位置
+    // public setCutBoxSizePosition(x: number, y: number) {
+    //   if (cutBoxSizeContainer == null) return;
+    //   const { left, top } = getToolRelativePosition(x, y);
+    //   cutBoxSizeContainer.style.left = left + "px";
+    //   let sscTop = 0;
+    //   if (screenShotController) {
+    //     sscTop = parseInt(screenShotController.style.top);
+    //   }
+    //   cutBoxSizeContainer.style.top = top + sscTop + "px";
+    // }
+    setTextEditState(state) {
+        textEditState = state;
+    }
+    getTextEditState() {
+        return textEditState;
+    }
+    // // 设置裁剪框尺寸
+    // public setCutBoxSize(width: number, height: number) {
+    //   if (cutBoxSizeContainer == null) return;
+    //   // width和height保留整数
+    //   width = Math.floor(width);
+    //   height = Math.floor(height);
+    //   const childrenPanel = cutBoxSizeContainer.childNodes;
+    //   // p标签已存在直接更改文本值即可
+    //   if (childrenPanel.length > 0) {
+    //     (childrenPanel[0] as HTMLParagraphElement).innerText = `${width} * ${height}`;
+    //     return;
+    //   }
+    //   // 不存在则渲染
+    //   const textPanel = document.createElement("p");
+    //   textPanel.innerText = `${width} * ${height}`;
+    //   cutBoxSizeContainer.appendChild(textPanel);
+    // }
+    // 设置文本输入工具栏展示状态
+    setTextStatus(status) {
+        textInputController = this.getTextInputController();
+        if (textInputController == null) return;
+        if (status) {
+            // 显示文本输入工具
+            textInputController.style.display = "block";
+            return;
+        }
+        textInputController.style.display = "none";
+    }
+    // 设置截图工具位置信息
+    setToolInfo(left, top) {
+        toolController = document.getElementById("toolPanel");
+        const { left: rLeft , top: rTop  } = getToolRelativePosition(left, top);
+        toolController.style.left = rLeft + "px";
+        let sscTop = 0;
+        if (screenShotController) {
+            sscTop = parseInt(screenShotController.style.top);
+        }
+        toolController.style.top = rTop + sscTop + "px";
+    }
+    // 获取截图工具栏点击状态
+    getToolClickStatus() {
+        return toolClickStatus;
+    }
+    // 设置截图工具栏点击状态
+    setToolClickStatus(status) {
+        toolClickStatus = status;
+    }
+    setResetScrollbarState(state) {
+        resetScrollbarState = state;
+    }
+    getResetScrollbarState() {
+        return resetScrollbarState;
+    }
+    // 获取裁剪框位置信息
+    getCutOutBoxPosition() {
+        return cutOutBoxPosition;
+    }
+    getDragging() {
+        return dragging;
+    }
+    setDragging(status) {
+        dragging = status;
+    }
+    getDraggingTrim() {
+        return draggingTrim;
+    }
+    getToolPositionStatus() {
+        return toolPositionStatus;
+    }
+    setToolPositionStatus(status) {
+        toolPositionStatus = status;
+    }
+    setDraggingTrim(status) {
+        draggingTrim = status;
+    }
+    // 设置裁剪框位置信息
+    setCutOutBoxPosition(mouseX, mouseY, width, height) {
+        cutOutBoxPosition.startX = mouseX;
+        cutOutBoxPosition.startY = mouseY;
+        cutOutBoxPosition.width = width;
+        cutOutBoxPosition.height = height;
+    }
+    setFontSize(size) {
+        fontSize = size;
+    }
+    // 设置截图工具栏画笔选择工具展示状态
+    setOptionStatus(status) {
+        // 获取截图工具栏与三角形角标容器
+        optionIcoController = this.getOptionIcoController();
+        optionController = this.getOptionController();
+        if (optionIcoController == null || optionController == null) return;
+        if (status) {
+            optionIcoController.style.display = "block";
+            optionController.style.display = "block";
+            return;
+        }
+        optionIcoController.style.display = "none";
+        optionController.style.display = "none";
+    }
+    getFontSize() {
+        return fontSize;
+    }
+    // 设置截图工具栏文字大小下拉框选项选择工具展示状态
+    setTextSizeOptionStatus(status) {
+        optionTextSizeController = this.getOptionTextSizeController();
+        if (optionTextSizeController == null) return;
+        if (status) {
+            optionTextSizeController.style.display = "flex";
+            return;
+        }
+        optionTextSizeController.style.display = "none";
+    }
+    setTextSizePanelStatus(status) {
+        textSizeContainer = this.getTextSizeContainer();
+        if (textSizeContainer == null) return;
+        if (status) {
+            console.log("显示");
+            textSizeContainer.style.display = "flex";
+            return;
+        }
+        textSizeContainer.style.display = "none";
+    }
+    setBrushSelectionStatus(status) {
+        brushSelectionController = this.getBrushSelectionController();
+        if (brushSelectionController == null) return;
+        if (status) {
+            brushSelectionController.style.display = "block";
+            return;
+        }
+        brushSelectionController.style.display = "none";
+    }
+    // 隐藏画笔工具栏三角形角标
+    hiddenOptionIcoStatus() {
+        optionIcoController = this.getOptionIcoController();
+        if (optionIcoController == null) return;
+        optionIcoController.style.display = "none";
+    }
+    // 获取截图工具栏画笔选择工具dom
+    getOptionIcoController() {
+        optionIcoController = document.getElementById("optionIcoController");
+        return optionIcoController;
+    }
+    getTextSizeContainer() {
+        textSizeContainer = document.getElementById("textSizePanel");
+        return textSizeContainer;
+    }
+    getOptionTextSizeController() {
+        optionTextSizeController = document.getElementById("textSelectPanel");
+        return optionTextSizeController;
+    }
+    getBrushSelectionController() {
+        brushSelectionController = document.getElementById("brushSelectPanel");
+        return brushSelectionController;
+    }
+    getOptionController() {
+        optionController = document.getElementById("optionPanel");
+        return optionController;
+    }
+    // 设置画笔选择工具栏位置
+    setOptionPosition(position) {
+        // 获取截图工具栏与三角形角标容器
+        optionIcoController = this.getOptionIcoController();
+        optionController = this.getOptionController();
+        if (optionIcoController == null || optionController == null) return;
+        // 修改位置
+        const toolPosition = this.getToolPosition();
+        if (toolPosition == null) return;
+        const icoLeft = toolPosition.left + position + "px";
+        const icoTop = toolPosition.top + 44 + "px";
+        const optionLeft = toolPosition.left + "px";
+        const optionTop = toolPosition.top + 44 + 6 + "px";
+        optionIcoController.style.left = icoLeft;
+        optionIcoController.style.top = icoTop;
+        optionController.style.left = optionLeft;
+        optionController.style.top = optionTop;
+    }
+    // 获取工具栏位置
+    getToolPosition() {
+        toolController = this.getToolController();
+        if (toolController == null) return;
+        return {
+            left: toolController.offsetLeft,
+            top: toolController.offsetTop
+        };
+    }
+    // 获取/设置当前选择的颜色
+    getSelectedColor() {
+        return selectedColor;
+    }
+    setSelectedColor(color) {
+        selectedColor = color;
+        colorSelectPanel = this.getColorSelectPanel();
+        if (colorSelectPanel == null) return;
+        colorSelectPanel.style.backgroundColor = selectedColor;
+    }
+    getColorSelectPanel() {
+        colorSelectPanel = document.getElementById("colorSelectPanel");
+        return colorSelectPanel;
+    }
+    // 获取/设置当前点击的工具栏条目名称
+    getToolName() {
+        return toolName;
+    }
+    setToolName(itemName) {
+        toolName = itemName;
+    }
+    // 获取/设置当前画笔大小
+    getPenSize() {
+        return penSize;
+    }
+    setPenSize(size) {
+        penSize = size;
+    }
+    getMosaicPenSize() {
+        return mosaicPenSize;
+    }
+    setMosaicPenSize(size) {
+        mosaicPenSize = size;
+    }
+    getBorderSize() {
+        return borderSize;
+    }
+    getHistory() {
+        return history;
+    }
+    shiftHistory() {
+        return history.shift();
+    }
+    popHistory() {
+        return history.pop();
+    }
+    pushHistory(item) {
+        history.push(item);
+    }
+    getUndoClickNum() {
+        return undoClickNum;
+    }
+    setUndoClickNum(clickNumber) {
+        undoClickNum = clickNumber;
+    }
+    getColorPanel() {
+        colorSelectController = document.getElementById("colorPanel");
+        return colorSelectController;
+    }
+    setColorPanelStatus(status) {
+        colorSelectController = this.getColorPanel();
+        if (colorSelectController == null) return;
+        if (status) {
+            colorSelectController.style.display = "flex";
+            return;
+        }
+        colorSelectController.style.display = "none";
+    }
+    getNoScrollStatus() {
+        return noScrollStatus;
+    }
+    setNoScrollStatus(status) {
+        if (status != null) {
+            noScrollStatus = status;
+        }
+    }
+    setActiveToolName(toolName) {
+        activeTool = toolName;
+    }
+    getActiveToolName() {
+        return activeTool;
+    }
+    setTextInfo(info) {
+        textInfo = info;
+    }
+    getTextInfo() {
+        return textInfo;
+    }
+    getRightPanel() {
+        rightPanel = document.getElementById("rightPanel");
+        return rightPanel;
+    }
+    setRightPanel(status) {
+        rightPanel = this.getRightPanel();
+        if (rightPanel == null) return;
+        if (status) {
+            rightPanel.style.display = "flex";
+            return;
+        }
+        rightPanel.style.display = "none";
+    }
+    setUndoStatus(status) {
+        undoController = this.getUndoController();
+        if (undoController == null) return;
+        if (status) {
+            // 启用撤销按钮
+            undoController.classList.add("undo");
+            undoController.classList.remove("undo-disabled");
+            undoController.addEventListener("click", this.cancelEvent);
+            return;
+        }
+        // 禁用撤销按钮
+        undoController.classList.add("undo-disabled");
+        undoController.classList.remove("undo");
+        undoController.removeEventListener("click", this.cancelEvent);
+    }
+    cancelEvent() {
+        takeOutHistory();
+    }
+    getUndoController() {
+        undoController = document.getElementById("undoPanel");
+        return undoController;
+    }
+    // 销毁截图容器
+    destroyDOM() {
+        if (screenShotController == null || toolController == null || optionIcoController == null || optionController == null || textInputController == null) return;
+        const plugInParameters = new PlugInParameters();
+        // 销毁dom
+        if (noScrollStatus) {
+            document.body.classList.remove("__screenshot-lock-scroll");
+        }
+        document.body.removeChild(screenShotController);
+        document.body.removeChild(toolController);
+        document.body.removeChild(optionIcoController);
+        document.body.removeChild(optionController);
+        document.body.removeChild(textInputController);
+        // document.body.removeChild(cutBoxSizeContainer);
+        if (document.body.classList.contains("no-cursor")) {
+            document.body.classList.remove("no-cursor");
+        }
+        if (resetScrollbarState) {
+            // 还原滚动条状态
+            document.documentElement.classList.remove("hidden-screen-shot-scroll");
+            document.body.classList.remove("hidden-screen-shot-scroll");
+        }
+        // 重置插件全局参数状态
+        plugInParameters.setInitStatus(true);
+    }
+    constructor(){
+        // 标识为true时则初始化数据
+        if (initStatus) {
+            // 初始化完成设置其值为false
+            initStatus = false;
+            screenShotController = null;
+            dragging = false;
+            toolController = null;
+            textInputController = null;
+            optionController = null;
+            optionIcoController = null;
+            optionTextSizeController = null;
+            brushSelectionController = null;
+            textSizeContainer = null;
+            // cutBoxSizeContainer = null;
+            cutOutBoxPosition = {
+                startX: 0,
+                startY: 0,
+                width: 0,
+                height: 0
+            };
+            toolClickStatus = false;
+            resetScrollbarState = false;
+            textEditState = false;
+            toolPositionStatus = false;
+            selectedColor = "#F53340";
+            toolName = "";
+            penSize = 2;
+            fontSize = 17;
+            mosaicPenSize = 10;
+            history = [];
+            undoClickNum = 0;
+            colorSelectController = null;
+            rightPanel = null;
+            colorSelectPanel = null;
+            undoController = null;
+        }
+    }
+}
+export { InitData as default };

package/es2017/customerService/js-screen-shot/lib/main-entrance/PlugInParameters.d.ts

@@ -0,0 +1,46 @@
+export default class PlugInParameters {
+    constructor();
+    setInitStatus(status: boolean): void;
+    getInitStatus(): boolean;
+    getWebRtcStatus(): boolean;
+    setWebRtcStatus(status: boolean): void;
+    setScreenShotDom(dom: HTMLElement): void;
+    getCutBoxBdColor(): string;
+    setCutBoxBdColor(color: string): void;
+    getScreenShotDom(): HTMLElement;
+    getScreenFlow(): MediaStream;
+    setScreenFlow(stream: MediaStream): void;
+    getCanvasSize(): {
+        canvasWidth: number;
+        canvasHeight: number;
+    };
+    setCanvasSize(width: number, height: number): void;
+    getShowScreenDataStatus(): boolean;
+    setShowScreenDataStatus(status: boolean): void;
+    setMaskColor(color: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    }): void;
+    getMaskColor(): {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    setWriteImgState(state: boolean): void;
+    getWriteImgState(): boolean;
+    setSaveCallback(saveFn: (code: number, msg: string) => void): void;
+    getSaveCallback(): (code: number, msg: string) => void;
+    setMaxUndoNum(num: number): void;
+    getMaxUndoNum(): number;
+    setRatioArrow(state: boolean): void;
+    getRatioArrow(): boolean;
+    setImgAutoFit(state: boolean): void;
+    getImgAutoFit(): boolean;
+    setSaveImgTitle(title: string): void;
+    getSaveImgTitle(): string;
+    setDestroyContainerState(state: boolean): void;
+    getDestroyContainerState(): boolean;
+}