bhd-components 0.9.0 → 0.9.2

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

@@ -0,0 +1,758 @@
+import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
+import { _ as _create_class } from "@swc/helpers/_/_create_class";
+import { takeOutHistory } from "../common-methods/TakeOutHistory";
+import { getToolRelativePosition } from "../common-methods/GetToolRelativePosition";
+import PlugInParameters from "./PlugInParameters";
+// 裁剪框修剪状态
+var draggingTrim = false;
+// 裁剪框拖拽状态
+var dragging = false;
+// 截图工具栏点击状态
+var toolClickStatus = false;
+// 当前选择的颜色
+var selectedColor = "#F53340";
+// 当前点击的工具栏名称
+var toolName = "";
+//  当前选择的画笔大小
+var penSize = 2;
+// 马赛克工具的笔触大小
+var mosaicPenSize = 10;
+// 裁剪框顶点边框直径大小
+var borderSize = 10;
+// 撤销点击次数
+var undoClickNum = 0;
+// 画笔历史记录
+var history = [];
+// 文本输入工具栏点击状态
+var textClickStatus = false;
+// 工具栏超出截图容器状态
+var toolPositionStatus = false;
+// 裁剪框位置参数
+var cutOutBoxPosition = {
+    startX: 0,
+    startY: 0,
+    width: 0,
+    height: 0
+};
+// 获取截图容器dom
+var screenShotController = null;
+// 获取截图工具栏容器dom
+var toolController = null;
+// let cutBoxSizeContainer: HTMLDivElement | null = null;
+// 获取文本输入区域dom
+var textInputController = null;
+// 截图工具栏画笔选择dom
+var optionIcoController = null;
+// 截图工具栏文字大小选择dom
+var optionTextSizeController = null;
+var brushSelectionController = null;
+var textSizeContainer = null;
+var fontSize = 17;
+var optionController = null;
+var colorSelectController = null;
+var rightPanel = null;
+var colorSelectPanel = null;
+var undoController = null;
+// 屏幕截图容器
+var screenShotImageController = null;
+// 截图容器是否可滚动
+var noScrollStatus = false;
+// 数据初始化标识
+var initStatus = false;
+// 当前工具栏内选中的工具
+var activeTool = "";
+var textInfo;
+// 是否需要还原页面的滚动条状态
+var resetScrollbarState = false;
+// 当前是否处于文本编辑状态
+var textEditState = false;
+var InitData = /*#__PURE__*/ function() {
+    "use strict";
+    function InitData() {
+        _class_call_check(this, InitData);
+        // 标识为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;
+        }
+    }
+    _create_class(InitData, [
+        {
+            key: "setInitStatus",
+            value: // 设置数据初始化标识
+            function setInitStatus(status) {
+                initStatus = status;
+            }
+        },
+        {
+            key: "setScreenShotInfo",
+            value: // 设置截图容器宽高
+            function setScreenShotInfo(width, height) {
+                this.getScreenShotContainer();
+                if (screenShotController == null) return;
+                // 增加截图锁屏
+                if (noScrollStatus) {
+                    document.body.classList.add("__screenshot-lock-scroll");
+                }
+                screenShotController.width = width;
+                screenShotController.height = height;
+            }
+        },
+        {
+            key: "setScreenShotPosition",
+            value: // 设置截图容器位置
+            function setScreenShotPosition(left, top) {
+                this.getScreenShotContainer();
+                if (screenShotController == null) return;
+                var _getToolRelativePosition = getToolRelativePosition(left, top), rLeft = _getToolRelativePosition.left, rTop = _getToolRelativePosition.top;
+                screenShotController.style.left = rLeft + "px";
+                screenShotController.style.top = rTop + "px";
+            }
+        },
+        {
+            key: "showScreenShotPanel",
+            value: // 显示截图区域容器
+            function showScreenShotPanel() {
+                this.getScreenShotContainer();
+                if (screenShotController == null) return;
+                screenShotController.style.display = "block";
+            }
+        },
+        {
+            key: "getScreenShotContainer",
+            value: // 获取截图容器dom
+            function getScreenShotContainer() {
+                screenShotController = document.getElementById("screenShotContainer");
+                return screenShotController;
+            }
+        },
+        {
+            key: "getToolController",
+            value: // 获取截图工具栏dom
+            function getToolController() {
+                toolController = document.getElementById("toolPanel");
+                return toolController;
+            }
+        },
+        {
+            key: "getTextInputController",
+            value: // // 获取裁剪框尺寸显示容器
+            // public getCutBoxSizeContainer() {
+            //   cutBoxSizeContainer = document.getElementById(
+            //     "cutBoxSizePanel"
+            //   ) as HTMLDivElement | null;
+            //   return cutBoxSizeContainer;
+            // }
+            // 获取文本输入区域dom
+            function getTextInputController() {
+                textInputController = document.getElementById("textInputPanel");
+                return textInputController;
+            }
+        },
+        {
+            key: "getTextStatus",
+            value: // 获取文本输入工具栏展示状态
+            function getTextStatus() {
+                return textClickStatus;
+            }
+        },
+        {
+            key: "getScreenShotImageController",
+            value: // 获取屏幕截图容器
+            function getScreenShotImageController() {
+                return screenShotImageController;
+            }
+        },
+        {
+            key: "setScreenShotImageController",
+            value: // 设置屏幕截图
+            function setScreenShotImageController(imageController) {
+                screenShotImageController = imageController;
+            }
+        },
+        {
+            key: "setToolStatus",
+            value: // 设置截图工具栏展示状态
+            function setToolStatus(status) {
+                toolController = this.getToolController();
+                if (status) {
+                    toolController.style.display = "block";
+                    return;
+                }
+                toolController.style.display = "none";
+            }
+        },
+        {
+            key: "setTextEditState",
+            value: // // 设置裁剪框尺寸显示容器展示状态
+            // 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";
+            // }
+            function setTextEditState(state) {
+                textEditState = state;
+            }
+        },
+        {
+            key: "getTextEditState",
+            value: function getTextEditState() {
+                return textEditState;
+            }
+        },
+        {
+            key: "setTextStatus",
+            value: // // 设置裁剪框尺寸
+            // 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);
+            // }
+            // 设置文本输入工具栏展示状态
+            function setTextStatus(status) {
+                textInputController = this.getTextInputController();
+                if (textInputController == null) return;
+                if (status) {
+                    // 显示文本输入工具
+                    textInputController.style.display = "block";
+                    return;
+                }
+                textInputController.style.display = "none";
+            }
+        },
+        {
+            key: "setToolInfo",
+            value: // 设置截图工具位置信息
+            function setToolInfo(left, top) {
+                toolController = document.getElementById("toolPanel");
+                var _getToolRelativePosition = getToolRelativePosition(left, top), rLeft = _getToolRelativePosition.left, rTop = _getToolRelativePosition.top;
+                toolController.style.left = rLeft + "px";
+                var sscTop = 0;
+                if (screenShotController) {
+                    sscTop = parseInt(screenShotController.style.top);
+                }
+                toolController.style.top = rTop + sscTop + "px";
+            }
+        },
+        {
+            key: "getToolClickStatus",
+            value: // 获取截图工具栏点击状态
+            function getToolClickStatus() {
+                return toolClickStatus;
+            }
+        },
+        {
+            key: "setToolClickStatus",
+            value: // 设置截图工具栏点击状态
+            function setToolClickStatus(status) {
+                toolClickStatus = status;
+            }
+        },
+        {
+            key: "setResetScrollbarState",
+            value: function setResetScrollbarState(state) {
+                resetScrollbarState = state;
+            }
+        },
+        {
+            key: "getResetScrollbarState",
+            value: function getResetScrollbarState() {
+                return resetScrollbarState;
+            }
+        },
+        {
+            key: "getCutOutBoxPosition",
+            value: // 获取裁剪框位置信息
+            function getCutOutBoxPosition() {
+                return cutOutBoxPosition;
+            }
+        },
+        {
+            key: "getDragging",
+            value: function getDragging() {
+                return dragging;
+            }
+        },
+        {
+            key: "setDragging",
+            value: function setDragging(status) {
+                dragging = status;
+            }
+        },
+        {
+            key: "getDraggingTrim",
+            value: function getDraggingTrim() {
+                return draggingTrim;
+            }
+        },
+        {
+            key: "getToolPositionStatus",
+            value: function getToolPositionStatus() {
+                return toolPositionStatus;
+            }
+        },
+        {
+            key: "setToolPositionStatus",
+            value: function setToolPositionStatus(status) {
+                toolPositionStatus = status;
+            }
+        },
+        {
+            key: "setDraggingTrim",
+            value: function setDraggingTrim(status) {
+                draggingTrim = status;
+            }
+        },
+        {
+            key: "setCutOutBoxPosition",
+            value: // 设置裁剪框位置信息
+            function setCutOutBoxPosition(mouseX, mouseY, width, height) {
+                cutOutBoxPosition.startX = mouseX;
+                cutOutBoxPosition.startY = mouseY;
+                cutOutBoxPosition.width = width;
+                cutOutBoxPosition.height = height;
+            }
+        },
+        {
+            key: "setFontSize",
+            value: function setFontSize(size) {
+                fontSize = size;
+            }
+        },
+        {
+            key: "setOptionStatus",
+            value: // 设置截图工具栏画笔选择工具展示状态
+            function 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";
+            }
+        },
+        {
+            key: "getFontSize",
+            value: function getFontSize() {
+                return fontSize;
+            }
+        },
+        {
+            key: "setTextSizeOptionStatus",
+            value: // 设置截图工具栏文字大小下拉框选项选择工具展示状态
+            function setTextSizeOptionStatus(status) {
+                optionTextSizeController = this.getOptionTextSizeController();
+                if (optionTextSizeController == null) return;
+                if (status) {
+                    optionTextSizeController.style.display = "flex";
+                    return;
+                }
+                optionTextSizeController.style.display = "none";
+            }
+        },
+        {
+            key: "setTextSizePanelStatus",
+            value: function setTextSizePanelStatus(status) {
+                textSizeContainer = this.getTextSizeContainer();
+                if (textSizeContainer == null) return;
+                if (status) {
+                    console.log("显示");
+                    textSizeContainer.style.display = "flex";
+                    return;
+                }
+                textSizeContainer.style.display = "none";
+            }
+        },
+        {
+            key: "setBrushSelectionStatus",
+            value: function setBrushSelectionStatus(status) {
+                brushSelectionController = this.getBrushSelectionController();
+                if (brushSelectionController == null) return;
+                if (status) {
+                    brushSelectionController.style.display = "block";
+                    return;
+                }
+                brushSelectionController.style.display = "none";
+            }
+        },
+        {
+            key: "hiddenOptionIcoStatus",
+            value: // 隐藏画笔工具栏三角形角标
+            function hiddenOptionIcoStatus() {
+                optionIcoController = this.getOptionIcoController();
+                if (optionIcoController == null) return;
+                optionIcoController.style.display = "none";
+            }
+        },
+        {
+            key: "getOptionIcoController",
+            value: // 获取截图工具栏画笔选择工具dom
+            function getOptionIcoController() {
+                optionIcoController = document.getElementById("optionIcoController");
+                return optionIcoController;
+            }
+        },
+        {
+            key: "getTextSizeContainer",
+            value: function getTextSizeContainer() {
+                textSizeContainer = document.getElementById("textSizePanel");
+                return textSizeContainer;
+            }
+        },
+        {
+            key: "getOptionTextSizeController",
+            value: function getOptionTextSizeController() {
+                optionTextSizeController = document.getElementById("textSelectPanel");
+                return optionTextSizeController;
+            }
+        },
+        {
+            key: "getBrushSelectionController",
+            value: function getBrushSelectionController() {
+                brushSelectionController = document.getElementById("brushSelectPanel");
+                return brushSelectionController;
+            }
+        },
+        {
+            key: "getOptionController",
+            value: function getOptionController() {
+                optionController = document.getElementById("optionPanel");
+                return optionController;
+            }
+        },
+        {
+            key: "setOptionPosition",
+            value: // 设置画笔选择工具栏位置
+            function setOptionPosition(position) {
+                // 获取截图工具栏与三角形角标容器
+                optionIcoController = this.getOptionIcoController();
+                optionController = this.getOptionController();
+                if (optionIcoController == null || optionController == null) return;
+                // 修改位置
+                var toolPosition = this.getToolPosition();
+                if (toolPosition == null) return;
+                var icoLeft = toolPosition.left + position + "px";
+                var icoTop = toolPosition.top + 44 + "px";
+                var optionLeft = toolPosition.left + "px";
+                var optionTop = toolPosition.top + 44 + 6 + "px";
+                optionIcoController.style.left = icoLeft;
+                optionIcoController.style.top = icoTop;
+                optionController.style.left = optionLeft;
+                optionController.style.top = optionTop;
+            }
+        },
+        {
+            key: "getToolPosition",
+            value: // 获取工具栏位置
+            function getToolPosition() {
+                toolController = this.getToolController();
+                if (toolController == null) return;
+                return {
+                    left: toolController.offsetLeft,
+                    top: toolController.offsetTop
+                };
+            }
+        },
+        {
+            key: "getSelectedColor",
+            value: // 获取/设置当前选择的颜色
+            function getSelectedColor() {
+                return selectedColor;
+            }
+        },
+        {
+            key: "setSelectedColor",
+            value: function setSelectedColor(color) {
+                selectedColor = color;
+                colorSelectPanel = this.getColorSelectPanel();
+                if (colorSelectPanel == null) return;
+                colorSelectPanel.style.backgroundColor = selectedColor;
+            }
+        },
+        {
+            key: "getColorSelectPanel",
+            value: function getColorSelectPanel() {
+                colorSelectPanel = document.getElementById("colorSelectPanel");
+                return colorSelectPanel;
+            }
+        },
+        {
+            key: "getToolName",
+            value: // 获取/设置当前点击的工具栏条目名称
+            function getToolName() {
+                return toolName;
+            }
+        },
+        {
+            key: "setToolName",
+            value: function setToolName(itemName) {
+                toolName = itemName;
+            }
+        },
+        {
+            key: "getPenSize",
+            value: // 获取/设置当前画笔大小
+            function getPenSize() {
+                return penSize;
+            }
+        },
+        {
+            key: "setPenSize",
+            value: function setPenSize(size) {
+                penSize = size;
+            }
+        },
+        {
+            key: "getMosaicPenSize",
+            value: function getMosaicPenSize() {
+                return mosaicPenSize;
+            }
+        },
+        {
+            key: "setMosaicPenSize",
+            value: function setMosaicPenSize(size) {
+                mosaicPenSize = size;
+            }
+        },
+        {
+            key: "getBorderSize",
+            value: function getBorderSize() {
+                return borderSize;
+            }
+        },
+        {
+            key: "getHistory",
+            value: function getHistory() {
+                return history;
+            }
+        },
+        {
+            key: "shiftHistory",
+            value: function shiftHistory() {
+                return history.shift();
+            }
+        },
+        {
+            key: "popHistory",
+            value: function popHistory() {
+                return history.pop();
+            }
+        },
+        {
+            key: "pushHistory",
+            value: function pushHistory(item) {
+                history.push(item);
+            }
+        },
+        {
+            key: "getUndoClickNum",
+            value: function getUndoClickNum() {
+                return undoClickNum;
+            }
+        },
+        {
+            key: "setUndoClickNum",
+            value: function setUndoClickNum(clickNumber) {
+                undoClickNum = clickNumber;
+            }
+        },
+        {
+            key: "getColorPanel",
+            value: function getColorPanel() {
+                colorSelectController = document.getElementById("colorPanel");
+                return colorSelectController;
+            }
+        },
+        {
+            key: "setColorPanelStatus",
+            value: function setColorPanelStatus(status) {
+                colorSelectController = this.getColorPanel();
+                if (colorSelectController == null) return;
+                if (status) {
+                    colorSelectController.style.display = "flex";
+                    return;
+                }
+                colorSelectController.style.display = "none";
+            }
+        },
+        {
+            key: "getNoScrollStatus",
+            value: function getNoScrollStatus() {
+                return noScrollStatus;
+            }
+        },
+        {
+            key: "setNoScrollStatus",
+            value: function setNoScrollStatus(status) {
+                if (status != null) {
+                    noScrollStatus = status;
+                }
+            }
+        },
+        {
+            key: "setActiveToolName",
+            value: function setActiveToolName(toolName) {
+                activeTool = toolName;
+            }
+        },
+        {
+            key: "getActiveToolName",
+            value: function getActiveToolName() {
+                return activeTool;
+            }
+        },
+        {
+            key: "setTextInfo",
+            value: function setTextInfo(info) {
+                textInfo = info;
+            }
+        },
+        {
+            key: "getTextInfo",
+            value: function getTextInfo() {
+                return textInfo;
+            }
+        },
+        {
+            key: "getRightPanel",
+            value: function getRightPanel() {
+                rightPanel = document.getElementById("rightPanel");
+                return rightPanel;
+            }
+        },
+        {
+            key: "setRightPanel",
+            value: function setRightPanel(status) {
+                rightPanel = this.getRightPanel();
+                if (rightPanel == null) return;
+                if (status) {
+                    rightPanel.style.display = "flex";
+                    return;
+                }
+                rightPanel.style.display = "none";
+            }
+        },
+        {
+            key: "setUndoStatus",
+            value: function 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);
+            }
+        },
+        {
+            key: "cancelEvent",
+            value: function cancelEvent() {
+                takeOutHistory();
+            }
+        },
+        {
+            key: "getUndoController",
+            value: function getUndoController() {
+                undoController = document.getElementById("undoPanel");
+                return undoController;
+            }
+        },
+        {
+            key: "destroyDOM",
+            value: // 销毁截图容器
+            function destroyDOM() {
+                if (screenShotController == null || toolController == null || optionIcoController == null || optionController == null || textInputController == null) return;
+                var 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);
+            }
+        }
+    ]);
+    return InitData;
+}();
+export { InitData as default };