From e9cf7d4dae16d33a2112858cad994abbd2754848 Mon Sep 17 00:00:00 2001
From: vincentlu <t1341870251@gmail.com>
Date: 星期五, 12 十二月 2025 15:23:21 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/tool.js |   75 +++++++++++++++++++++++++------------
 1 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js
index d10ce0c..371e60e 100644
--- a/zy-acs-flow/src/map/tool.js
+++ b/zy-acs-flow/src/map/tool.js
@@ -31,7 +31,7 @@
 import ctuLoadedFullBattery from '/map/agv/ctuLoadedFullBattery.svg';
 
 let app, mapContainer, themeMode;
-let selectedSprite, effectCircle, effectTicker;
+let selectedSprite, effectOverlay, effectTicker;
 let tooltip;
 
 export function getApp() {
@@ -422,6 +422,38 @@
 }
 
 export const showSelectedEffect = (sprite) => {
+    if (!sprite) {
+        return;
+    }
+    // area
+    if (sprite.data?.type === DEVICE_TYPE.AREA) {
+        const { start, end } = sprite.data || {};
+        const hasBounds = start && end;
+        const minX = hasBounds ? Math.min(start.x, end.x) : 0;
+        const maxX = hasBounds ? Math.max(start.x, end.x) : 0;
+        const minY = hasBounds ? Math.min(start.y, end.y) : 0;
+        const maxY = hasBounds ? Math.max(start.y, end.y) : 0;
+        const width = hasBounds ? Math.abs(maxX - minX) : Math.abs(sprite.width);
+        const height = hasBounds ? Math.abs(maxY - minY) : Math.abs(sprite.height);
+        const centerX = hasBounds ? (minX + maxX) / 2 : sprite.x;
+        const centerY = hasBounds ? (minY + maxY) / 2 : sprite.y;
+        const color = DEVICE_SELECTED_EFFECT_COLOR[DEVICE_TYPE.AREA] || (themeMode === 'light' ? '#747d8c' : '#718093');
+        const lineWidth = Math.max(2, 4 / Math.abs(mapContainer.scale.x || 1));
+
+        effectOverlay = new PIXI.Graphics();
+        effectOverlay.lineStyle(lineWidth, color, 1);
+        effectOverlay.drawRect(-width / 2, -height / 2, width, height);
+        effectOverlay.position.set(centerX, centerY);
+        effectOverlay.zIndex = sprite.zIndex + 1;
+        effectOverlay.blendMode = PIXI.BLEND_MODES.NORMAL;
+        mapContainer.addChild(effectOverlay);
+
+        selectedSprite = sprite;
+        effectTicker = null;
+        return;
+    }
+
+    // others
     if (!sprite?.texture || !sprite?.texture?.valid) {
         return;
     }
@@ -440,15 +472,15 @@
 
     const alpha = 1;
 
-    effectCircle = new PIXI.Graphics();
-    effectCircle.beginFill(color, alpha);
-    effectCircle.drawCircle(0, 0, radius);
-    effectCircle.endFill();
-    effectCircle.position.set(sprite.x, sprite.y);
-    effectCircle.zIndex = -1;
-    effectCircle.blendMode = PIXI.BLEND_MODES.NORMAL;
+    effectOverlay = new PIXI.Graphics();
+    effectOverlay.beginFill(color, alpha);
+    effectOverlay.drawCircle(0, 0, radius);
+    effectOverlay.endFill();
+    effectOverlay.position.set(sprite.x, sprite.y);
+    effectOverlay.zIndex = -1;
+    effectOverlay.blendMode = PIXI.BLEND_MODES.NORMAL;
 
-    mapContainer.addChild(effectCircle);
+    mapContainer.addChild(effectOverlay);
 
     selectedSprite = sprite;
 
@@ -467,8 +499,8 @@
                 scalingUp = true;
             }
         }
-        effectCircle.scale.set(pulseScale);
-        effectCircle.position.set(sprite.x, sprite.y);
+        effectOverlay.scale.set(pulseScale);
+        effectOverlay.position.set(sprite.x, sprite.y);
     };
 
     app.ticker.add(effectTicker);
@@ -479,18 +511,11 @@
         app.ticker.remove(effectTicker);
         effectTicker = null;
     }
-    if (effectCircle) {
-        mapContainer?.removeChild(effectCircle);
-        effectCircle = null;
+    if (effectOverlay) {
+        mapContainer?.removeChild(effectOverlay);
+        effectOverlay = null;
     }
     selectedSprite = null;
-};
-
-export const updateEffect = () => {
-    if (!selectedSprite || !effectCircle) {
-        return;
-    }
-    effectCircle.position.set(selectedSprite.x, selectedSprite.y);
 };
 
 export const showRoutes = (curZone, setShowRoutes, setLoading) => {
@@ -936,7 +961,7 @@
     const draft = new PIXI.Graphics();
     draft.name = id ? `area_${id}` : 'area_' + generateID();
     draft.zIndex = DEVICE_Z_INDEX.AREA;
-    draft.lineStyle(4 / Math.abs(mapContainer.scale.x || 1), areaColor, 0.8);
+    draft.lineStyle(2 / Math.abs(mapContainer.scale.x || 1), 0x6c7a89, 0.9);
     draft.beginFill(areaColor, 0.18);
     draft.drawRect(
         Math.min(from.x, to.x),
@@ -946,7 +971,7 @@
     );
     draft.endFill();
     addAreaLabel(draft, name, from, to);
-    draft.data = { ...(draft.data || {}), type: DEVICE_TYPE.AREA, name, color: areaColor, id };
+    draft.data = { ...(draft.data || {}), type: DEVICE_TYPE.AREA, name, color: areaColor, id, start: from, end: to };
     draft.eventMode = 'static';
     draft.cursor = 'pointer';
     if (setCurSprite) {
@@ -979,7 +1004,7 @@
     const drawRect = (from, to) => {
         draft.clear();
         const strokeColor = areaColor;
-        draft.lineStyle(4 / Math.abs(mapContainer.scale.x || 1), strokeColor, 0.8);
+        draft.lineStyle(2 / Math.abs(mapContainer.scale.x || 1), 0x6c7a89, 0.9);
         draft.beginFill(strokeColor, 0.18);
         draft.drawRect(
             Math.min(from.x, to.x),
@@ -1036,7 +1061,7 @@
         }
 
         addAreaLabel(draft, areaName, startPoint, endPoint);
-        draft.data = { ...(draft.data || {}), type: DEVICE_TYPE.AREA, name: areaName, color: areaColor };
+        draft.data = { ...(draft.data || {}), type: DEVICE_TYPE.AREA, name: areaName, color: areaColor, start: startPoint, end: endPoint };
         draft.eventMode = 'static';
         draft.cursor = 'pointer';
         if (setCurSprite) {

--
Gitblit v1.9.1