From 3223e8e16f4808b3597f9631bb39edf75d5606a0 Mon Sep 17 00:00:00 2001 From: xudan Date: Tue, 9 Sep 2025 15:16:31 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=BA=93=E4=BD=8D?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=80=BB=E8=BE=91=EF=BC=8C=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=BB=B6=E8=BF=9F=E6=B8=B2=E6=9F=93=E4=BB=A5=E9=98=B2=E6=AD=A2?= =?UTF-8?q?=E7=82=B9=E4=BD=8D=E5=A4=B1=E7=84=A6=EF=BC=8C=E5=B9=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E5=BA=93=E4=BD=8Dpen=E5=AF=B9=E8=B1=A1=E5=88=9B?= =?UTF-8?q?=E5=BB=BA=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 2 +- src/components/card/point-edit-card.vue | 51 ++++++++++++++++++++---- src/services/editor.service.ts | 11 ++++- src/services/storage-location.service.ts | 10 ++++- 4 files changed, 61 insertions(+), 13 deletions(-) diff --git a/.env.development b/.env.development index 8d42708..3986f08 100644 --- a/.env.development +++ b/.env.development @@ -4,5 +4,5 @@ ENV_WEBSOCKET_BASE=/ws ENV_STORAGE_WEBSOCKET_BASE=/vwedWs # 开发环境token配置 - 可以手动设置或从另一个项目获取后填入 -ENV_DEV_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NTc0NDc3NzMsInVzZXJuYW1lIjoiYWRtaW4ifQ.kCwSuHfYWZS5uVZLL912gTT2OrCEO4dyHJAjkDz7hE0 +ENV_DEV_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NTc1Mjc0NTksInVzZXJuYW1lIjoiYWRtaW4ifQ.MionV2RtdoIm085NYLRQxCNHxmgB9HGCvYXlsAERkG4 ENV_DEV_TENANT_ID=1000 diff --git a/src/components/card/point-edit-card.vue b/src/components/card/point-edit-card.vue index 9716612..0b43a87 100644 --- a/src/components/card/point-edit-card.vue +++ b/src/components/card/point-edit-card.vue @@ -72,6 +72,9 @@ function onAddLocation() { const p = point.value!; if (!p.associatedStorageLocations) p.associatedStorageLocations = []; + // 保存当前选中的点位ID，防止失焦 + const currentPointId = props.id!; + // 获取动作点名称（去掉前缀，如 "AP1" -> "AP1"） const pointName = pen.value?.label || ''; @@ -105,12 +108,21 @@ function onAddLocation() { p.associatedStorageLocations.push(defaultName); editor.value.updatePen(props.id!, { point: { ...p } }, false); - // 重新创建库位pen对象以反映最新的库位列表 - editor.value.createStorageLocationPens(props.id!, p.associatedStorageLocations); + // 重新创建库位pen对象以反映最新的库位列表，但不立即渲染 + editor.value.createStorageLocationPens(props.id!, p.associatedStorageLocations, false); + + // 延迟渲染并重新选中点位，避免失焦 + requestAnimationFrame(() => { + editor.value.render(); + // 确保点位保持选中状态 + editor.value.active(currentPointId); + }); } function onRemoveLocation(i: number) { const p = point.value!; if (p.associatedStorageLocations) { + // 保存当前选中的点位ID，防止失焦 + const currentPointId = props.id!; const removedLocationName = p.associatedStorageLocations[i]; const pointName = pen.value?.label || pen.value?.id || ''; @@ -131,13 +143,20 @@ function onRemoveLocation(i: number) { p.associatedStorageLocations.splice(i, 1); editor.value.updatePen(props.id!, { point: { ...p } }, false); - // 重新创建库位pen对象以反映最新的库位列表 - editor.value.createStorageLocationPens(props.id!, p.associatedStorageLocations); + // 重新创建库位pen对象以反映最新的库位列表，但不立即渲染 + editor.value.createStorageLocationPens(props.id!, p.associatedStorageLocations, false); // 同步更新地图文件中的binLocationList（删除库位） if (pointName && removedLocationName) { editor.value.removeBinLocation(pointName, removedLocationName); } + + // 延迟渲染并重新选中点位，避免失焦 + requestAnimationFrame(() => { + editor.value.render(); + // 确保点位保持选中状态 + editor.value.active(currentPointId); + }); } }, }); @@ -147,13 +166,20 @@ function onRemoveLocation(i: number) { p.associatedStorageLocations.splice(i, 1); editor.value.updatePen(props.id!, { point: { ...p } }, false); - // 重新创建库位pen对象以反映最新的库位列表 - editor.value.createStorageLocationPens(props.id!, p.associatedStorageLocations); + // 重新创建库位pen对象以反映最新的库位列表，但不立即渲染 + editor.value.createStorageLocationPens(props.id!, p.associatedStorageLocations, false); // 同步更新地图文件中的binLocationList（删除库位） if (pointName && removedLocationName) { editor.value.removeBinLocation(pointName, removedLocationName); } + + // 延迟渲染并重新选中点位，避免失焦 + requestAnimationFrame(() => { + editor.value.render(); + // 确保点位保持选中状态 + editor.value.active(currentPointId); + }); } } } @@ -161,6 +187,8 @@ function onRemoveLocation(i: number) { function onChangeLocation(i: number, v: string) { const p = point.value!; if (p.associatedStorageLocations) { + // 保存当前选中的点位ID，防止失焦 + const currentPointId = props.id!; const oldLocationName = p.associatedStorageLocations[i]; const newLocationName = v; @@ -168,14 +196,21 @@ function onChangeLocation(i: number, v: string) { p.associatedStorageLocations[i] = newLocationName; editor.value.updatePen(props.id!, { point: { ...p } }, false); - // 重新创建库位pen对象以反映最新的库位列表 - editor.value.createStorageLocationPens(props.id!, p.associatedStorageLocations); + // 重新创建库位pen对象以反映最新的库位列表，但不立即渲染 + editor.value.createStorageLocationPens(props.id!, p.associatedStorageLocations, false); // 同步更新地图文件中的binLocationList const pointName = pen.value?.label || pen.value?.id || ''; if (pointName && oldLocationName !== newLocationName) { editor.value.updateBinLocationName(pointName, oldLocationName, newLocationName); } + + // 延迟渲染并重新选中点位，避免失焦 + requestAnimationFrame(() => { + editor.value.render(); + // 确保点位保持选中状态 + editor.value.active(currentPointId); + }); } } diff --git a/src/services/editor.service.ts b/src/services/editor.service.ts index 26fdcaa..21fd996 100644 --- a/src/services/editor.service.ts +++ b/src/services/editor.service.ts @@ -892,9 +892,10 @@ export class EditorService extends Meta2d { * 为动作点创建库位pen对象 * @param pointId 动作点ID * @param storageLocations 库位名称列表 + * @param render 是否立即渲染，默认为true */ - public createStorageLocationPens(pointId: string, storageLocations: string[]): void { - this.storageLocationService?.create(pointId, storageLocations); + public createStorageLocationPens(pointId: string, storageLocations: string[], render = true): void { + this.storageLocationService?.create(pointId, storageLocations, render); } /** @@ -1263,6 +1264,12 @@ export class EditorService extends Meta2d { const pen = this.getPenById(id); const rect = this.getPointRect(pen); if (isNil(rect)) return; + + // 如果原点位是动作点，需要先删除相关的库位元素 + if (pen?.point?.type === MapPointType.动作点) { + this.removeStorageLocationPens(id); + } + const point = this.#mapPoint(type); const pointInfo: MapPointInfo = { type }; diff --git a/src/services/storage-location.service.ts b/src/services/storage-location.service.ts index 08d4854..68aeb59 100644 --- a/src/services/storage-location.service.ts +++ b/src/services/storage-location.service.ts @@ -508,8 +508,9 @@ export class StorageLocationService { * 创建库位（为动作点创建库位pen对象） * @param pointId 动作点ID * @param storageLocations 库位名称列表 + * @param render 是否立即渲染，默认为true */ - public create(pointId: string, storageLocations: string[]): void { + public create(pointId: string, storageLocations: string[], render = true): void { if (!this.editor) return; const pointPen = this.editor.getPenById(pointId); @@ -525,10 +526,15 @@ export class StorageLocationService { const pointRect = this.editor.getPointRect(pointPen) ?? { x: 0, y: 0, width: 0, height: 0 }; const pens = createStorageLocationPens(pointId, storageLocations, pointRect, storageStateMap); - // 添加所有pen对象到编辑器 + // 添加所有pen对象到编辑器，但不立即渲染 pens.forEach(pen => { this.editor!.addPen(pen, false, true, true); }); + + // 如果需要渲染，统一渲染一次 + if (render) { + this.editor!.render(); + } } /**