bhd-components 0.9.1 → 0.9.2

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;

package/es2017/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/es2017/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/es2017/customerService/js-screen-shot/lib/main-entrance/CreateDom.js

@@ -0,0 +1,304 @@
+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";
+class CreateDom {
+    // 渲染截图工具栏图标
+    setToolBarIco() {
+        for(let i = 0; i < this.toolbar.length; i++){
+            const item = this.toolbar[i];
+            // 判断是否有需要隐藏的图标
+            let icoHiddenStatus = false;
+            for(let j = 0; j < this.hiddenIcoArr.length; j++){
+                if (this.hiddenIcoArr[j] === item.title) {
+                    icoHiddenStatus = true;
+                    break;
+                }
+            }
+            // 图标隐藏状态为true则直接跳过本次循环
+            if (icoHiddenStatus) continue;
+            const itemPanel = document.createElement("div");
+            // 撤销按钮单独处理
+            if (item.title == "undo") {
+                itemPanel.className = `item-panel undo-disabled`;
+                itemPanel.id = "undoPanel";
+            } else {
+                itemPanel.className = `item-panel ${item.title}`;
+                itemPanel.addEventListener("click", (e)=>{
+                    toolClickEvent(item.title, item.id, e, this.completeCallback, this.closeCallback);
+                });
+            }
+            itemPanel.setAttribute("data-title", item.title);
+            itemPanel.setAttribute("data-id", item.id + "");
+            this.toolController.appendChild(itemPanel);
+        }
+        // 有需要隐藏的截图工具栏时，则修改其最小宽度
+        if (this.hiddenIcoArr.length > 0) {
+            this.toolController.style.minWidth = "24px";
+        }
+    }
+    // 渲染文字大小选择容器
+    setTextSizeSelectPanel() {
+        // 创建文字展示容器
+        const textSizePanel = document.createElement("div");
+        textSizePanel.className = "text-size-panel";
+        textSizePanel.innerText = `${getTextSize()} px`;
+        textSizePanel.id = "textSizePanel";
+        // 创建文字大小选择容器
+        const textSelectPanel = document.createElement("div");
+        textSelectPanel.className = "text-select-panel";
+        textSelectPanel.id = "textSelectPanel";
+        // 创建文字选择下拉
+        for(let i = 0; i < this.textFontSizeList.length; i++){
+            const itemPanel = document.createElement("div");
+            const size = this.textFontSizeList[i];
+            itemPanel.className = "text-item";
+            itemPanel.setAttribute("data-value", `${size}`);
+            itemPanel.innerText = `${size} px`;
+            // 添加点击监听
+            itemPanel.addEventListener("click", ()=>{
+                // 隐藏容器
+                textSelectPanel.style.display = "none";
+                const currentTextSize = itemPanel.getAttribute("data-value");
+                // 容器赋值
+                textSizePanel.innerText = `${currentTextSize} px`;
+                if (currentTextSize) {
+                    setTextSize(+currentTextSize);
+                }
+            });
+            textSelectPanel.appendChild(itemPanel);
+        }
+        textSizePanel.style.display = "none";
+        textSelectPanel.style.display = "none";
+        // 容器点击时，展示文字大小选择容器
+        textSizePanel.addEventListener("click", ()=>{
+            selectTextSize();
+        });
+        this.optionController.appendChild(textSizePanel);
+        this.optionController.appendChild(textSelectPanel);
+    }
+    // 渲染画笔大小选择图标与颜色选择容器
+    setBrushSelectPanel() {
+        // 创建画笔选择容器
+        const brushSelectPanel = document.createElement("div");
+        brushSelectPanel.id = "brushSelectPanel";
+        brushSelectPanel.className = "brush-select-panel";
+        for(let i = 0; i < 3; i++){
+            // 创建画笔图标容器
+            const 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", (e)=>{
+                        setBrushSize("small", 1, e);
+                        setMosaicPenSize("small", 1, e);
+                    });
+                    break;
+                case 1:
+                    itemPanel.classList.add("brush-medium");
+                    itemPanel.addEventListener("click", (e)=>{
+                        setBrushSize("medium", 2, e);
+                        setMosaicPenSize("medium", 2, e);
+                    });
+                    break;
+                case 2:
+                    itemPanel.classList.add("brush-big");
+                    itemPanel.addEventListener("click", (e)=>{
+                        setBrushSize("big", 3, e);
+                        setMosaicPenSize("big", 3, e);
+                    });
+                    break;
+            }
+            brushSelectPanel.appendChild(itemPanel);
+        }
+        // 右侧颜色选择容器
+        const rightPanel = document.createElement("div");
+        rightPanel.className = "right-panel";
+        // 创建颜色选择容器
+        const colorSelectPanel = document.createElement("div");
+        colorSelectPanel.className = "color-select-panel";
+        colorSelectPanel.id = "colorSelectPanel";
+        colorSelectPanel.addEventListener("click", ()=>{
+            selectColor();
+        });
+        // 创建颜色显示容器
+        const colorPanel = document.createElement("div");
+        colorPanel.id = "colorPanel";
+        colorPanel.className = "color-panel";
+        colorPanel.style.display = "none";
+        for(let i = 0; i < 10; i++){
+            const colorItem = document.createElement("div");
+            colorItem.className = "color-item";
+            colorItem.addEventListener("click", ()=>{
+                getColor(i + 1);
+            });
+            colorItem.setAttribute("data-index", i + "");
+            colorPanel.appendChild(colorItem);
+        }
+        rightPanel.appendChild(colorPanel);
+        rightPanel.appendChild(colorSelectPanel);
+        rightPanel.id = "rightPanel";
+        // 创建颜色下拉箭头选择容器
+        const pullDownArrow = document.createElement("div");
+        pullDownArrow.className = "pull-down-arrow";
+        pullDownArrow.addEventListener("click", ()=>{
+            selectColor();
+        });
+        rightPanel.appendChild(pullDownArrow);
+        // 向画笔绘制选项容器追加画笔选择和颜色显示容器
+        this.optionController.appendChild(brushSelectPanel);
+        this.optionController.appendChild(rightPanel);
+    }
+    // 渲染文本输入区域容器
+    setTextInputPanel() {
+        // 让div可编辑
+        this.textInputController.contentEditable = "true";
+        // 关闭拼写检查
+        this.textInputController.spellcheck = false;
+    }
+    // 为所有Dom设置id
+    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";
+    }
+    // 隐藏所有dom
+    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";
+    }
+    // 将截图相关dom渲染至body
+    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);
+    }
+    // 清除截图相关dom
+    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();
+    }
+    // 设置画笔绘制选项顶部ico样式
+    setOptionIcoClassName() {
+        this.optionIcoController.className = "ico-panel";
+    }
+    // 将需要隐藏的图标放入对应的数组中
+    filterHideIcon(icons) {
+        switch(icons){
+            case "rightTop":
+                this.hiddenIcoArr.push("right-top");
+                break;
+            default:
+                this.hiddenIcoArr.push(icons);
+                break;
+        }
+    }
+    constructor(options){
+        // 截图区域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", (evt)=>{
+            const target = evt.target;
+            if (target.id === "colorSelectPanel" || target.id === "textSizePanel") {
+                return;
+            }
+            // 点击工具栏的其他位置则隐藏文字大小选择面板与颜色选择面板
+            hiddenTextSizeOptionStatus();
+            hiddenColorPanelStatus();
+        });
+        // 成功回调函数不存在则设置一个默认的
+        if (!options || !Object.prototype.hasOwnProperty.call(options, "completeCallback")) {
+            this.completeCallback = (imgInfo)=>{
+                sessionStorage.setItem("screenShotImg", JSON.stringify(imgInfo));
+            };
+        }
+        // 筛选需要隐藏的图标
+        if (options === null || options === void 0 ? void 0 : options.hiddenToolIco) {
+            for(const 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();
+    }
+}
+export { CreateDom as default };

package/es2017/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;
+}