修复撤回bug

src/component/modules/generalMiniCanvas.vue

@@ -36,8 +36,8 @@
 					<!-- <div @click="setOperation('')" class="generalMiniCanvas_btn_item">
 						<div>新增</div>
 					</div> -->
-					<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
-					<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+					<i class="icon iconfont icon-chehui" @click="canvasGeneral.historyState('')"></i>
+					<i class="icon iconfont icon-fanchehui" @click="canvasGeneral.historyState('reverse')"></i>
 					<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasState == 'movePosition'}"></i>
 					<!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
 					<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
@@ -167,7 +167,7 @@ export default defineComponent({
 				document.removeEventListener('touchmove', touchmove);
 
 				let img = new Image();
-				img.onload = function(){
+				img.onload = async function(){
 					loadingShow.value = true
 					let height = canvasBox.offsetHeight;
 					canvasWH.value = height
@@ -195,7 +195,7 @@ export default defineComponent({
 					
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
-					fabric.Image.fromURL(props.imgUrl, function(img) {
+					await fabric.Image.fromURL(props.imgUrl, async function(img) {
 						// 设置背景图对象的宽度和高度与 canvas 相同
 						img.scaleToWidth(canvas.width);
 						img.scaleToHeight(canvas.height);
@@ -204,19 +204,19 @@ export default defineComponent({
 							scaleY: canvas.height / img.height
 						});
 						// 将背景图添加到 canvas 的底层
-						canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
+						await canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
 						if(!fabric.Object.prototype.controls.deleteControl){
 							JSSetRemoveImage(deleteObj)
 						}else{
 							fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
 						}
 						setPencilWidth()
-						updateCanvasState()
+						canvasGeneral.updateCanvasState()
 					},{ crossOrigin: "Anonymous" });
 					// 鼠标抬起事件
 					canvas.on('mouse:up', function(event) {
 						if(isMovePostion)isMovePostion = false
-						if(canvasBtn.canvasState != 'move')updateCanvasState('mouseUp')
+						// if(canvasBtn.canvasState != 'move')canvasGeneral.updateCanvasState('mouseUp')
 					});
 					canvas.on("mouse:down", event=>setCanvasDown(event));
 					canvas.on('mouse:wheel', opt => {
@@ -248,28 +248,10 @@ export default defineComponent({
 				
 			})
         }
-		let canvasKeyDown = (event) => {
-			if(keyDown.indexOf(event.key)>-1){
-			}else{
-				keyDown.push(event.code)
-				if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
-					historyState('reverse')
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
-					historyState('')
-				}
-			}
-		}
-		let canvasKeyUp = (event) =>{
-				keyDown = keyDown.filter(function(item) {
-					return event.code !== item;
-				})
-				
-			}
 		let clearCanvas = ()=>{
 		    canvasBtn.canvasState = 'move'
 		    canvasBtn.spreadState = false
-			document.removeEventListener("keydown", canvasKeyDown);
-			document.removeEventListener("keyup", canvasKeyUp);
+			canvasGeneral.canvasClear()
 		}
 		let mouseMove = (event)=>{
 			let e = getMousePosition(event,false)
@@ -526,28 +508,6 @@ export default defineComponent({
 				canvasBtn.canvasPencilWidth[str] = 100; // 设置为最大值
 			}
 		}
-		let updateCanvasState = (str) =>{
-			if(str != 'mouseUp'){
-			}
-			const canvasAsJson = JSON.stringify(canvas.toJSON());
-			normalCanvasState.value.push(canvasAsJson);
-		}
-		//撤回
-		let historyState = (str)=> {
-			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
-				let obj = reverseCanvasState.value.pop()
-				// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
-				canvasState.value = obj 
-				normalCanvasState.value.push(obj);
-			}else if(str == '' && normalCanvasState.value.length > 1){
-				let obj = normalCanvasState.value.pop()
-				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
-				reverseCanvasState.value.push(obj);
-			}else{
-				return
-			}
-			canvas.loadFromJSON(canvasState.value, () => {});
-		}
 		let setSubmit = (liquefation)=>{
 			return new Promise((resolve,reject)=>{
 				var allObjects = canvas.getObjects();
@@ -625,8 +585,6 @@ export default defineComponent({
 			
 		}
 		let cancelDsign = ()=>{
-			document.removeEventListener('keydown',canvasKeyDown);
-			document.removeEventListener('keyup', canvasKeyUp);
 			showPayOrder.value = false
 		}
 		let liquefactionData = ref(null)
@@ -651,7 +609,7 @@ export default defineComponent({
 					fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
 				}
 				setPencilWidth()
-				updateCanvasState()
+				canvasGeneral.updateCanvasState()
 			},{ crossOrigin: "Anonymous" });
 		}
 		let setLiquefaction =async ()=>{
@@ -681,7 +639,6 @@ export default defineComponent({
 			setOperation,
 			setPencilWidth,
 			setPencilColor,
-			historyState,
 			setSubmit,
 			cancelDsign,
 			submitLiquefaction,
@@ -690,6 +647,7 @@ export default defineComponent({
 			brushList,
 			brushworkValue,
 			brushworkChange,
+			canvasGeneral,
         };
     },
     data() {

src/tool/canvasGeneral.js

@@ -103,7 +103,9 @@ class myCanvas {
 		document.addEventListener("keyup", this.canvasKeyUp);
 		initAligningGuidelines(this.canvas,true)
 		JSchangeType(this.canvas,'init')
-		this.updateCanvasState('')
+		// this.canvas.on('mouse:up', function(event) {
+		// 	if(this.canvasState != 'move')this.updateCanvasState('')
+		// });
 		this.canvas.on("object:added", (event)=>{
 			if(!this.isLoadCanvas)this.updateCanvasState('')
 		});
@@ -234,7 +236,8 @@ class myCanvas {
 		}else{
 			return
 		}
-		this.canvas.loadFromJSON(this.canvasState, () => {});
+		this.canvas.loadFromJSON(this.canvasState, () => {this.isLoadCanvas = false;});
+		
 	}
 }