xudan/web-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新库位管理逻辑，支持延迟渲染以防止点位失焦，并优化库位pen对象创建逻辑

Browse Source
This commit is contained in:
xudan 2025-09-09 15:16:31 +08:00
parent 1be4280495
commit 3223e8e16f
4 changed files with 61 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -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

51
src/components/card/point-edit-card.vue
View File

@ -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);
});
}
}
</script>

11
src/services/editor.service.ts
View File

@ -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 };

10
src/services/storage-location.service.ts
View File

@ -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();
}
}
/**