import { ComponentInternalInstance, ref } from "vue"; import { positionInfoType, toolIcoType } from "@/module/type/ComponentType"; // 截图容器宽高 const screenShortWidth = ref(0); const screenShortHeight = ref(0); // 裁剪框拖拽状态 let dragging = false; // 截图工具栏展示状态与位置 const toolStatus = ref(false); const toolLeft = ref(0); const toolTop = ref(0); // 截图工具栏点击状态 const toolClickStatus = ref(false); // 截图工具栏画笔选择显示状态 const optionStatus = ref(false); // 颜色面板展示状态 const colorPanelStatus = ref(false); // 当前选择的颜色 const selectedColor = ref("#F53340"); // 当前点击的工具栏名称 const toolName = ref(""); // 当前选择的画笔大小 const penSize = ref(2); // 文本输入工具栏点击状态 const textClickStatus = ref(false); // 撤销状态 const undoStatus = ref(false); // 裁剪框位置参数 let cutOutBoxPosition: positionInfoType = { startX: 0, startY: 0, width: 0, height: 0 }; // 截图工具栏画笔选择三角形角标位置 const optionIcoPosition = ref(0); // 需要隐藏的工具栏图标 const hiddenToolIco = ref({}); // 获取截图容器dom let screenShortController = ref(null); // 获取截图工具栏容器dom let toolController = ref(null); // 屏幕截图容器 let screenShortImageController: HTMLCanvasElement | null = null; // 获取文本输入区域dom let textInputController = ref(null); // 截图工具栏画笔选择dom let optionIcoController = ref(null); let optionController = ref(null); // 事件处理 let emit: ((event: string, ...args: any[]) => void) | undefined; let currentInstance: ComponentInternalInstance | null | undefined; // 数据初始化标识 let initStatus = false; export default class InitData { constructor() { // 标识为true时则初始化数据 if (initStatus) { // 初始化完成设置其值为false initStatus = false; screenShortWidth.value = 0; screenShortHeight.value = 0; screenShortController = ref(null); toolController = ref(null); textInputController = ref(null); optionController = ref(null); optionIcoController = ref(null); cutOutBoxPosition = { startX: 0, startY: 0, width: 0, height: 0 }; toolStatus.value = false; optionStatus.value = false; colorPanelStatus.value = false; emit = undefined; currentInstance = undefined; toolClickStatus.value = false; optionIcoPosition.value = 0; selectedColor.value = "#F53340"; toolName.value = ""; penSize.value = 2; hiddenToolIco.value = {}; } } // 设置数据初始化标识 public setInitStatus(status: boolean) { initStatus = status; } // 获取数据初始化标识 public getInitStatus() { return initStatus; } // 获取截图容器宽高 public getScreenShortWidth() { return screenShortWidth; } public getScreenShortHeight() { return screenShortHeight; } // 设置截图容器宽高 public setScreenShortInfo(width: number, height: number) { screenShortWidth.value = width; screenShortHeight.value = height; } // 获取截图容器dom public getScreenShortController() { return screenShortController; } // 获取截图工具栏dom public getToolController() { return toolController; } // 获取文本输入区域dom public getTextInputController() { return textInputController; } // 获取截图工具栏展示状态 public getToolStatus() { return toolStatus; } // 获取文本输入工具栏展示状态 public getTextStatus() { return textClickStatus; } // 获取屏幕截图容器 public getScreenShortImageController() { return screenShortImageController; } // 设置屏幕截图 public setScreenShortImageController(imageController: HTMLCanvasElement) { screenShortImageController = imageController; } // 设置截图工具栏展示状态 public setToolStatus(status: boolean) { toolStatus.value = status; } // 设置文本输入工具栏展示状态 public setTextStatus(status: boolean) { textClickStatus.value = status; } // 获取截图工具位置信息 public getToolLeft() { return toolLeft; } public getToolTop() { return toolTop; } // 设置截图工具位置信息 public setToolInfo(left: number, top: number) { toolLeft.value = left; toolTop.value = top; } // 获取截图工具栏点击状态 public getToolClickStatus() { return toolClickStatus; } // 设置截图工具栏点击状态 public setToolClickStatus(status: boolean) { toolClickStatus.value = status; } // 获取裁剪框位置信息 public getCutOutBoxPosition() { return cutOutBoxPosition; } public getDragging() { return dragging; } public setDragging(status: boolean) { dragging = status; } // 设置裁剪框位置信息 public setCutOutBoxPosition( mouseX: number, mouseY: number, width: number, height: number ) { cutOutBoxPosition.startX = mouseX; cutOutBoxPosition.startY = mouseY; cutOutBoxPosition.width = width; cutOutBoxPosition.height = height; } // 获取撤销状态 public getUndoStatus() { return undoStatus; } // 设置撤销状态 public setUndoStatus(status: boolean) { undoStatus.value = status; } // 获取/设置截图工具栏画笔选择工具展示状态 public getOptionStatus() { return optionStatus; } public setOptionStatus(status: boolean) { optionStatus.value = status; } // 获取截图工具栏画笔选择工具dom public getOptionIcoController() { return optionIcoController; } public getOptionController() { return optionController; } // 获取/设置三角形角标位置 public getOptionIcoPosition() { return optionIcoPosition; } public setOptionIcoPosition(position: number) { optionIcoPosition.value = position; } // 获取/设置颜色选择面板显示状态 public getColorPanelStatus() { return colorPanelStatus; } public setColorPanelStatus(status: boolean) { colorPanelStatus.value = status; } // 获取/设置当前选择的颜色 public getSelectedColor() { return selectedColor; } public setSelectedColor(color: string) { selectedColor.value = color; } // 获取/设置当前点击的工具栏条目名称 public getToolName() { return toolName; } public setToolName(itemName: string) { toolName.value = itemName; } // 获取/设置当前画笔大小 public getPenSize() { return penSize; } public setPenSize(size: number) { penSize.value = size; } /** * 设置父组件传递的数据 * @param emitParam */ public setPropsData(emitParam: (event: string, ...args: any[]) => void) { emit = emitParam; } /** * 设置实例属性 * @param instanceParam */ public setProperty(instanceParam: ComponentInternalInstance | null) { currentInstance = instanceParam; } // 获取当前实例 public getCurrentInstance() { return currentInstance; } // 获取当前emit public getEmit() { return emit; } public getHiddenToolIco() { return hiddenToolIco; } public setHiddenToolIco(obj: toolIcoType) { hiddenToolIco.value = obj; } }