bhd-components 0.9.1 → 0.9.2

package/esm/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) {
+    // 临时坐标
+    var 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: tempStartY,
+                tempWidth: width,
+                tempHeight: tempHeight
+            };
+        case 3:
+            tempHeight = nonNegativeData(currentY - startY);
+            return {
+                tempStartX: startX,
+                tempStartY: startY,
+                tempWidth: width,
+                tempHeight: tempHeight
+            };
+        case 4:
+            tempStartX = currentX - (startX + width) > 0 ? startX + width : currentX;
+            tempWidth = nonNegativeData(width - (currentX - startX));
+            return {
+                tempStartX: tempStartX,
+                tempStartY: startY,
+                tempWidth: tempWidth,
+                tempHeight: height
+            };
+        case 5:
+            tempWidth = nonNegativeData(currentX - startX);
+            return {
+                tempStartX: startX,
+                tempStartY: startY,
+                tempWidth: 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: tempStartX,
+                tempStartY: tempStartY,
+                tempWidth: tempWidth,
+                tempHeight: tempHeight
+            };
+        case 7:
+            tempWidth = nonNegativeData(currentX - startX);
+            tempHeight = nonNegativeData(currentY - startY);
+            return {
+                tempStartX: startX,
+                tempStartY: startY,
+                tempWidth: tempWidth,
+                tempHeight: tempHeight
+            };
+        case 8:
+            tempStartY = currentY - (startY + height) > 0 ? startY + height : currentY;
+            tempWidth = nonNegativeData(currentX - startX);
+            tempHeight = nonNegativeData(height - (currentY - startY));
+            return {
+                tempStartX: startX,
+                tempStartY: tempStartY,
+                tempWidth: tempWidth,
+                tempHeight: tempHeight
+            };
+        case 9:
+            tempStartX = currentX - (startX + width) > 0 ? startX + width : currentX;
+            tempWidth = nonNegativeData(width - (currentX - startX));
+            tempHeight = nonNegativeData(currentY - startY);
+            return {
+                tempStartX: tempStartX,
+                tempStartY: startY,
+                tempWidth: tempWidth,
+                tempHeight: tempHeight
+            };
+    }
+}

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

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

package/esm/customerService/js-screen-shot/lib/config/Toolbar.js

@@ -0,0 +1,46 @@
+export default [
+    {
+        id: 1,
+        title: "square"
+    },
+    {
+        id: 2,
+        title: "round"
+    },
+    {
+        id: 3,
+        title: "right-top"
+    },
+    {
+        id: 4,
+        title: "brush"
+    },
+    {
+        id: 5,
+        title: "mosaicPen"
+    },
+    {
+        id: 6,
+        title: "text"
+    },
+    {
+        id: 7,
+        title: "separateLine"
+    },
+    {
+        id: 8,
+        title: "save"
+    },
+    {
+        id: 9,
+        title: "undo"
+    },
+    {
+        id: 10,
+        title: "close"
+    },
+    {
+        id: 11,
+        title: "confirm"
+    }
+];

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

@@ -0,0 +1,24 @@
+import { screenShotType } from "../type/ComponentType";
+export default class CreateDom {
+    private readonly screenShotController;
+    private readonly toolController;
+    private readonly optionIcoController;
+    private readonly optionController;
+    private readonly textInputController;
+    private readonly completeCallback;
+    private readonly closeCallback;
+    private readonly hiddenIcoArr;
+    private readonly toolbar;
+    private readonly textFontSizeList;
+    constructor(options: screenShotType);
+    private setToolBarIco;
+    private setTextSizeSelectPanel;
+    private setBrushSelectPanel;
+    private setTextInputPanel;
+    private setAllControllerId;
+    private hiddenAllDom;
+    private setDomToBody;
+    private clearBody;
+    private setOptionIcoClassName;
+    private filterHideIcon;
+}

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

@@ -0,0 +1,345 @@
+import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
+import { _ as _create_class } from "@swc/helpers/_/_create_class";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import toolbar from "../config/Toolbar";
+import { toolClickEvent } from "../split-methods/ToolClickEvent";
+import { setBrushSize, setMosaicPenSize } from "../common-methods/SetBrushSize";
+import { selectColor } from "../common-methods/SelectColor";
+import { getColor } from "../common-methods/GetColor";
+import { getTextSize, hiddenColorPanelStatus, hiddenTextSizeOptionStatus, selectTextSize, setTextSize } from "../common-methods/SelectTextSize";
+var CreateDom = /*#__PURE__*/ function() {
+    "use strict";
+    function CreateDom(options) {
+        _class_call_check(this, CreateDom);
+        // 截图区域canvas容器
+        _define_property(this, "screenShotController", void 0);
+        // 截图工具栏容器
+        _define_property(this, "toolController", void 0);
+        // 绘制选项顶部ico容器
+        _define_property(this, "optionIcoController", void 0);
+        // 画笔绘制选项容器
+        _define_property(this, "optionController", void 0);
+        // 裁剪框大小显示容器
+        // private readonly cutBoxSizeContainer: HTMLDivElement;
+        // 文字工具输入容器
+        _define_property(this, "textInputController", void 0);
+        // 截图完成回调函数
+        _define_property(this, "completeCallback", void 0);
+        // 截图关闭毁掉函数
+        _define_property(this, "closeCallback", void 0);
+        // 需要隐藏的图标
+        _define_property(this, "hiddenIcoArr", void 0);
+        // 截图工具栏图标
+        _define_property(this, "toolbar", void 0);
+        _define_property(this, "textFontSizeList", [
+            12,
+            13,
+            14,
+            15,
+            16,
+            17,
+            20,
+            24,
+            36,
+            48,
+            64,
+            72,
+            96
+        ]);
+        this.screenShotController = document.createElement("canvas");
+        this.toolController = document.createElement("div");
+        this.optionIcoController = document.createElement("div");
+        this.optionController = document.createElement("div");
+        // this.cutBoxSizeContainer = document.createElement("div");
+        this.textInputController = document.createElement("div");
+        this.completeCallback = options === null || options === void 0 ? void 0 : options.completeCallback;
+        this.closeCallback = options === null || options === void 0 ? void 0 : options.closeCallback;
+        this.hiddenIcoArr = [];
+        this.optionController.addEventListener("click", function(evt) {
+            var target = evt.target;
+            if (target.id === "colorSelectPanel" || target.id === "textSizePanel") {
+                return;
+            }
+            // 点击工具栏的其他位置则隐藏文字大小选择面板与颜色选择面板
+            hiddenTextSizeOptionStatus();
+            hiddenColorPanelStatus();
+        });
+        // 成功回调函数不存在则设置一个默认的
+        if (!options || !Object.prototype.hasOwnProperty.call(options, "completeCallback")) {
+            this.completeCallback = function(imgInfo) {
+                sessionStorage.setItem("screenShotImg", JSON.stringify(imgInfo));
+            };
+        }
+        // 筛选需要隐藏的图标
+        if (options === null || options === void 0 ? void 0 : options.hiddenToolIco) {
+            for(var iconKey in options.hiddenToolIco){
+                if (options.hiddenToolIco[iconKey]) {
+                    this.filterHideIcon(iconKey);
+                }
+            }
+        }
+        // 为所有dom设置id
+        this.setAllControllerId();
+        // 为画笔绘制选项角标设置class
+        this.setOptionIcoClassName();
+        this.toolbar = toolbar;
+        // 渲染工具栏
+        this.setToolBarIco();
+        // 渲染文字大小选择容器
+        this.setTextSizeSelectPanel();
+        // 渲染画笔相关选项
+        this.setBrushSelectPanel();
+        // 渲染文本输入
+        this.setTextInputPanel();
+        // 渲染页面
+        this.setDomToBody();
+        // 隐藏所有dom
+        this.hiddenAllDom();
+    }
+    _create_class(CreateDom, [
+        {
+            key: "setToolBarIco",
+            value: // 渲染截图工具栏图标
+            function setToolBarIco() {
+                var _this = this, _loop = function(i) {
+                    var item = _this.toolbar[i];
+                    // 判断是否有需要隐藏的图标
+                    var icoHiddenStatus = false;
+                    for(var j = 0; j < _this.hiddenIcoArr.length; j++){
+                        if (_this.hiddenIcoArr[j] === item.title) {
+                            icoHiddenStatus = true;
+                            break;
+                        }
+                    }
+                    // 图标隐藏状态为true则直接跳过本次循环
+                    if (icoHiddenStatus) return "continue";
+                    var itemPanel = document.createElement("div");
+                    // 撤销按钮单独处理
+                    if (item.title == "undo") {
+                        itemPanel.className = "item-panel undo-disabled";
+                        itemPanel.id = "undoPanel";
+                    } else {
+                        itemPanel.className = "item-panel ".concat(item.title);
+                        itemPanel.addEventListener("click", function(e) {
+                            toolClickEvent(item.title, item.id, e, _this1.completeCallback, _this1.closeCallback);
+                        });
+                    }
+                    itemPanel.setAttribute("data-title", item.title);
+                    itemPanel.setAttribute("data-id", item.id + "");
+                    _this.toolController.appendChild(itemPanel);
+                };
+                var _this1 = this;
+                for(var i = 0; i < this.toolbar.length; i++)_loop(i);
+                // 有需要隐藏的截图工具栏时，则修改其最小宽度
+                if (this.hiddenIcoArr.length > 0) {
+                    this.toolController.style.minWidth = "24px";
+                }
+            }
+        },
+        {
+            key: "setTextSizeSelectPanel",
+            value: // 渲染文字大小选择容器
+            function setTextSizeSelectPanel() {
+                var _this = this, _loop = function(i) {
+                    var itemPanel = document.createElement("div");
+                    var size = _this.textFontSizeList[i];
+                    itemPanel.className = "text-item";
+                    itemPanel.setAttribute("data-value", "".concat(size));
+                    itemPanel.innerText = "".concat(size, " px");
+                    // 添加点击监听
+                    itemPanel.addEventListener("click", function() {
+                        // 隐藏容器
+                        textSelectPanel.style.display = "none";
+                        var currentTextSize = itemPanel.getAttribute("data-value");
+                        // 容器赋值
+                        textSizePanel.innerText = "".concat(currentTextSize, " px");
+                        if (currentTextSize) {
+                            setTextSize(+currentTextSize);
+                        }
+                    });
+                    textSelectPanel.appendChild(itemPanel);
+                };
+                // 创建文字展示容器
+                var textSizePanel = document.createElement("div");
+                textSizePanel.className = "text-size-panel";
+                textSizePanel.innerText = "".concat(getTextSize(), " px");
+                textSizePanel.id = "textSizePanel";
+                // 创建文字大小选择容器
+                var textSelectPanel = document.createElement("div");
+                textSelectPanel.className = "text-select-panel";
+                textSelectPanel.id = "textSelectPanel";
+                // 创建文字选择下拉
+                for(var i = 0; i < this.textFontSizeList.length; i++)_loop(i);
+                textSizePanel.style.display = "none";
+                textSelectPanel.style.display = "none";
+                // 容器点击时，展示文字大小选择容器
+                textSizePanel.addEventListener("click", function() {
+                    selectTextSize();
+                });
+                this.optionController.appendChild(textSizePanel);
+                this.optionController.appendChild(textSelectPanel);
+            }
+        },
+        {
+            key: "setBrushSelectPanel",
+            value: // 渲染画笔大小选择图标与颜色选择容器
+            function setBrushSelectPanel() {
+                var _loop = function(i1) {
+                    var colorItem = document.createElement("div");
+                    colorItem.className = "color-item";
+                    colorItem.addEventListener("click", function() {
+                        getColor(i1 + 1);
+                    });
+                    colorItem.setAttribute("data-index", i1 + "");
+                    colorPanel.appendChild(colorItem);
+                };
+                // 创建画笔选择容器
+                var brushSelectPanel = document.createElement("div");
+                brushSelectPanel.id = "brushSelectPanel";
+                brushSelectPanel.className = "brush-select-panel";
+                for(var i = 0; i < 3; i++){
+                    // 创建画笔图标容器
+                    var itemPanel = document.createElement("div");
+                    itemPanel.className = "item-panel";
+                    switch(i){
+                        case 0:
+                            itemPanel.classList.add("brush-small");
+                            itemPanel.classList.add("brush-small-active");
+                            itemPanel.addEventListener("click", function(e) {
+                                setBrushSize("small", 1, e);
+                                setMosaicPenSize("small", 1, e);
+                            });
+                            break;
+                        case 1:
+                            itemPanel.classList.add("brush-medium");
+                            itemPanel.addEventListener("click", function(e) {
+                                setBrushSize("medium", 2, e);
+                                setMosaicPenSize("medium", 2, e);
+                            });
+                            break;
+                        case 2:
+                            itemPanel.classList.add("brush-big");
+                            itemPanel.addEventListener("click", function(e) {
+                                setBrushSize("big", 3, e);
+                                setMosaicPenSize("big", 3, e);
+                            });
+                            break;
+                    }
+                    brushSelectPanel.appendChild(itemPanel);
+                }
+                // 右侧颜色选择容器
+                var rightPanel = document.createElement("div");
+                rightPanel.className = "right-panel";
+                // 创建颜色选择容器
+                var colorSelectPanel = document.createElement("div");
+                colorSelectPanel.className = "color-select-panel";
+                colorSelectPanel.id = "colorSelectPanel";
+                colorSelectPanel.addEventListener("click", function() {
+                    selectColor();
+                });
+                // 创建颜色显示容器
+                var colorPanel = document.createElement("div");
+                colorPanel.id = "colorPanel";
+                colorPanel.className = "color-panel";
+                colorPanel.style.display = "none";
+                for(var i1 = 0; i1 < 10; i1++)_loop(i1);
+                rightPanel.appendChild(colorPanel);
+                rightPanel.appendChild(colorSelectPanel);
+                rightPanel.id = "rightPanel";
+                // 创建颜色下拉箭头选择容器
+                var pullDownArrow = document.createElement("div");
+                pullDownArrow.className = "pull-down-arrow";
+                pullDownArrow.addEventListener("click", function() {
+                    selectColor();
+                });
+                rightPanel.appendChild(pullDownArrow);
+                // 向画笔绘制选项容器追加画笔选择和颜色显示容器
+                this.optionController.appendChild(brushSelectPanel);
+                this.optionController.appendChild(rightPanel);
+            }
+        },
+        {
+            key: "setTextInputPanel",
+            value: // 渲染文本输入区域容器
+            function setTextInputPanel() {
+                // 让div可编辑
+                this.textInputController.contentEditable = "true";
+                // 关闭拼写检查
+                this.textInputController.spellcheck = false;
+            }
+        },
+        {
+            key: "setAllControllerId",
+            value: // 为所有Dom设置id
+            function setAllControllerId() {
+                this.screenShotController.id = "screenShotContainer";
+                this.toolController.id = "toolPanel";
+                this.optionIcoController.id = "optionIcoController";
+                this.optionController.id = "optionPanel";
+                // this.cutBoxSizeContainer.id = "cutBoxSizePanel";
+                this.textInputController.id = "textInputPanel";
+            }
+        },
+        {
+            key: "hiddenAllDom",
+            value: // 隐藏所有dom
+            function hiddenAllDom() {
+                this.screenShotController.style.display = "none";
+                this.toolController.style.display = "none";
+                this.optionIcoController.style.display = "none";
+                this.optionController.style.display = "none";
+                // this.cutBoxSizeContainer.style.display = "none";
+                this.textInputController.style.display = "none";
+            }
+        },
+        {
+            key: "setDomToBody",
+            value: // 将截图相关dom渲染至body
+            function setDomToBody() {
+                this.clearBody();
+                document.body.appendChild(this.screenShotController);
+                document.body.appendChild(this.toolController);
+                document.body.appendChild(this.optionIcoController);
+                document.body.appendChild(this.optionController);
+                // document.body.appendChild(this.cutBoxSizeContainer);
+                document.body.appendChild(this.textInputController);
+            }
+        },
+        {
+            key: "clearBody",
+            value: // 清除截图相关dom
+            function clearBody() {
+                var _document_getElementById, _document_getElementById1, _document_getElementById2, _document_getElementById3, // document.getElementById("cutBoxSizePanel")?.remove();
+                _document_getElementById4;
+                (_document_getElementById = document.getElementById("screenShotContainer")) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.remove();
+                (_document_getElementById1 = document.getElementById("toolPanel")) === null || _document_getElementById1 === void 0 ? void 0 : _document_getElementById1.remove();
+                (_document_getElementById2 = document.getElementById("optionIcoController")) === null || _document_getElementById2 === void 0 ? void 0 : _document_getElementById2.remove();
+                (_document_getElementById3 = document.getElementById("optionPanel")) === null || _document_getElementById3 === void 0 ? void 0 : _document_getElementById3.remove();
+                (_document_getElementById4 = document.getElementById("textInputPanel")) === null || _document_getElementById4 === void 0 ? void 0 : _document_getElementById4.remove();
+            }
+        },
+        {
+            key: "setOptionIcoClassName",
+            value: // 设置画笔绘制选项顶部ico样式
+            function setOptionIcoClassName() {
+                this.optionIcoController.className = "ico-panel";
+            }
+        },
+        {
+            key: "filterHideIcon",
+            value: // 将需要隐藏的图标放入对应的数组中
+            function filterHideIcon(icons) {
+                switch(icons){
+                    case "rightTop":
+                        this.hiddenIcoArr.push("right-top");
+                        break;
+                    default:
+                        this.hiddenIcoArr.push(icons);
+                        break;
+                }
+            }
+        }
+    ]);
+    return CreateDom;
+}();
+export { CreateDom as default };

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

@@ -0,0 +1,78 @@
+import { positionInfoType, textInfoType } from "../type/ComponentType";
+export default class InitData {
+    constructor();
+    setInitStatus(status: boolean): void;
+    setScreenShotInfo(width: number, height: number): void;
+    setScreenShotPosition(left: number, top: number): void;
+    showScreenShotPanel(): void;
+    getScreenShotContainer(): HTMLCanvasElement;
+    getToolController(): HTMLDivElement;
+    getTextInputController(): HTMLDivElement;
+    getTextStatus(): boolean;
+    getScreenShotImageController(): HTMLCanvasElement;
+    setScreenShotImageController(imageController: HTMLCanvasElement): void;
+    setToolStatus(status: boolean): void;
+    setTextEditState(state: boolean): void;
+    getTextEditState(): boolean;
+    setTextStatus(status: boolean): void;
+    setToolInfo(left: number, top: number): void;
+    getToolClickStatus(): boolean;
+    setToolClickStatus(status: boolean): void;
+    setResetScrollbarState(state: boolean): void;
+    getResetScrollbarState(): boolean;
+    getCutOutBoxPosition(): positionInfoType;
+    getDragging(): boolean;
+    setDragging(status: boolean): void;
+    getDraggingTrim(): boolean;
+    getToolPositionStatus(): boolean;
+    setToolPositionStatus(status: boolean): void;
+    setDraggingTrim(status: boolean): void;
+    setCutOutBoxPosition(mouseX: number, mouseY: number, width: number, height: number): void;
+    setFontSize(size: number): void;
+    setOptionStatus(status: boolean): void;
+    getFontSize(): number;
+    setTextSizeOptionStatus(status: boolean): void;
+    setTextSizePanelStatus(status: boolean): void;
+    setBrushSelectionStatus(status: boolean): void;
+    hiddenOptionIcoStatus(): void;
+    getOptionIcoController(): HTMLDivElement;
+    getTextSizeContainer(): HTMLDivElement;
+    getOptionTextSizeController(): HTMLDivElement;
+    getBrushSelectionController(): HTMLDivElement;
+    getOptionController(): HTMLDivElement;
+    setOptionPosition(position: number): void;
+    getToolPosition(): {
+        left: number;
+        top: number;
+    };
+    getSelectedColor(): string;
+    setSelectedColor(color: string): void;
+    getColorSelectPanel(): HTMLElement;
+    getToolName(): string;
+    setToolName(itemName: string): void;
+    getPenSize(): number;
+    setPenSize(size: number): void;
+    getMosaicPenSize(): number;
+    setMosaicPenSize(size: number): void;
+    getBorderSize(): number;
+    getHistory(): Record<string, any>[];
+    shiftHistory(): Record<string, any>;
+    popHistory(): Record<string, any>;
+    pushHistory(item: Record<string, any>): void;
+    getUndoClickNum(): number;
+    setUndoClickNum(clickNumber: number): void;
+    getColorPanel(): HTMLElement;
+    setColorPanelStatus(status: boolean): void;
+    getNoScrollStatus(): boolean;
+    setNoScrollStatus(status?: boolean): void;
+    setActiveToolName(toolName: string): void;
+    getActiveToolName(): string;
+    setTextInfo(info: textInfoType): void;
+    getTextInfo(): textInfoType;
+    getRightPanel(): HTMLElement;
+    setRightPanel(status: boolean): void;
+    setUndoStatus(status: boolean): void;
+    cancelEvent(): void;
+    getUndoController(): HTMLElement;
+    destroyDOM(): void;
+}