From a41c92ccd432689f2204a2b65f11ce989c3dc94a Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Tue, 4 Mar 2025 00:33:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=93=E5=8B=BE=E6=98=BE=E9=9A=90=E9=80=89?=
 =?UTF-8?q?=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Spray.vue | 20 ++++++++++++++++----
 src/views/SprayView.vue  |  4 ++++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/Spray.vue b/src/components/Spray.vue
index 134879a..e834046 100644
--- a/src/components/Spray.vue
+++ b/src/components/Spray.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, useTemplateRef } from "vue";
+import { onMounted, useTemplateRef, watch } from "vue";
 import { BehaviorSubject, distinctUntilChanged, skip } from "rxjs";
 import gripper from "@/assets/gripper.png";
 
@@ -36,12 +36,19 @@ const props = defineProps<{
 	columns: number;
 	rows: number;
 	cellNum: number;
+	hideGripper?: boolean;
 }>();
 
 const emit = defineEmits<{
 	(e: "selectArea", area: GridArea): void;
 }>();
 
+watch(
+	() => props.hideGripper,
+	val => {
+		draw(selectArea);
+	}
+);
 const canvas = useTemplateRef("cnv");
 const primaryLineColor = "rgb(203,213,245)";
 const subLineColor = "rgb(226,231,232)";
@@ -80,7 +87,7 @@ moveSubject
 		} else if (touchedElem === "Gripper") {
 			newArea = applyIncrement(val, selectArea);
 		}
-        newArea && emit("selectArea", newArea);
+		newArea && emit("selectArea", newArea);
 		newArea && draw(newArea);
 	});
 
@@ -204,6 +211,7 @@ function drawDragLayer(ctx: CanvasRenderingContext2D, area: GridArea) {
 
 function handleStart(event: MouseEvent | TouchEvent) {
 	event.stopPropagation();
+	if (!!props.hideGripper) return;
 	if ("touches" in event) {
 		const touchEvent = event.touches[0];
 		touchPoint.x = touchEvent.pageX - canvas.value!.offsetLeft;
@@ -268,10 +276,14 @@ function draw(area: GridArea) {
 		if (!imgLoaded) {
 			gripperImg.onload = () => {
 				imgLoaded = true;
-				drawDragLayer(ctx, area);
+				if (!props.hideGripper) {
+					drawDragLayer(ctx, area);
+				}
 			};
 		} else {
-			drawDragLayer(ctx, area);
+			if (!props.hideGripper) {
+				drawDragLayer(ctx, area);
+			}
 		}
 	}
 }
diff --git a/src/views/SprayView.vue b/src/views/SprayView.vue
index 45e8aa7..1370ce0 100644
--- a/src/views/SprayView.vue
+++ b/src/views/SprayView.vue
@@ -63,6 +63,7 @@
 						:columns="1"
 						:rows="3"
 						:cell-num="25"
+						:hideGripper="!checked.find(c => c === '0')"
 						@select-area="area => onSelectArea(area, 0)" />
 					<Spray
 						:width="210"
@@ -74,6 +75,7 @@
 						:columns="1"
 						:rows="3"
 						:cell-num="25"
+						:hideGripper="!checked.find(c => c === '1')"
 						@select-area="area => onSelectArea(area, 1)" />
 					<Spray
 						:width="210"
@@ -85,6 +87,7 @@
 						:columns="1"
 						:rows="3"
 						:cell-num="25"
+						:hideGripper="!checked.find(c => c === '2')"
 						@select-area="area => onSelectArea(area, 2)" />
 					<Spray
 						:width="210"
@@ -96,6 +99,7 @@
 						:columns="1"
 						:rows="3"
 						:cell-num="25"
+						:hideGripper="!checked.find(c => c === '3')"
 						@select-area="area => onSelectArea(area, 3)" />
 				</section>