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

feat: enhance pen selection functionality and improve editor service with gotoById method

Browse Source
This commit is contained in:
徐旦 2025-06-29 14:19:29 +08:00
commit 042c797421
4 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -4,4 +4,4 @@ ENV_WEBSOCKET_BASE=/ws
# 开发环境token配置 - 可以手动设置或从另一个项目获取后填入
ENV_DEV_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NTAzMzkwMTcsInVzZXJuYW1lIjoiYWRtaW4ifQ.uGWMIPH9-sdyEwr0bQBMKQSTAjYBZhlIVDRHGtheENE
ENV_DEV_TENANT_ID=1000
ENV_DEV_TENANT_ID=1000

1
src/apis/map/constant.ts
View File

@ -157,4 +157,5 @@ export const EDITOR_CONFIG: Options = {
textAlign: 'center',
/** 文本垂直基线 - 顶部对齐 */
textBaseline: 'top',
rule: true,
};

25
src/components/pen-groups.vue
View File

@ -28,6 +28,11 @@ const routes = computed<MapPen[]>(() =>
//#region 区域列表
const areas = computed<MapPen[]>(() => editor.value.areas.value.filter(({ label }) => label?.includes(keyword.value)));
//#endregion
const select = (id: string) => {
editor.value.active(id);
editor.value.gotoById(id);
};
</script>
<template>
@ -50,7 +55,7 @@ const areas = computed<MapPen[]>(() => editor.value.areas.value.filter(({ label
class="ph-16"
:class="{ selected: item.id === current }"
style="height: 36px"
@click="editor.active(item.id)"
@click="select(item.id)"
>
<a-typography-text type="secondary">{{ item.label }}</a-typography-text>
</a-list-item>
@ -65,7 +70,7 @@ const areas = computed<MapPen[]>(() => editor.value.areas.value.filter(({ label
class="ph-16"
:class="{ selected: item.id === current }"
style="height: 36px"
@click="editor.active(item.id)"
@click="select(item.id)"
>
<a-typography-text type="secondary">{{ item.label }}</a-typography-text>
</a-list-item>
@ -80,7 +85,7 @@ const areas = computed<MapPen[]>(() => editor.value.areas.value.filter(({ label
class="ph-16"
:class="{ selected: item.id === current }"
style="height: 36px"
@click="editor.active(item.id)"
@click="select(item.id)"
>
<a-typography-text type="secondary">{{ item.label }}</a-typography-text>
</a-list-item>
@ -98,7 +103,7 @@ const areas = computed<MapPen[]>(() => editor.value.areas.value.filter(({ label
class="ph-16"
:class="{ selected: item.id === current }"
style="height: 36px"
@click="editor.active(item.id)"
@click="select(item.id)"
>
<a-typography-text type="secondary">{{ item.label }}</a-typography-text>
</a-list-item>
@ -116,7 +121,7 @@ const areas = computed<MapPen[]>(() => editor.value.areas.value.filter(({ label
class="ph-16"
:class="{ selected: item.id === current }"
style="height: 36px"
@click="editor.active(item.id)"
@click="select(item.id)"
>
<a-typography-text type="secondary">{{ item.label }}</a-typography-text>
</a-list-item>
@ -131,7 +136,7 @@ const areas = computed<MapPen[]>(() => editor.value.areas.value.filter(({ label
class="ph-16"
:class="{ selected: item.id === current }"
style="height: 36px"
@click="editor.active(item.id)"
@click="select(item.id)"
>
<a-typography-text type="secondary">{{ item.label }}</a-typography-text>
</a-list-item>
@ -146,7 +151,7 @@ const areas = computed<MapPen[]>(() => editor.value.areas.value.filter(({ label
class="ph-16"
:class="{ selected: item.id === current }"
style="height: 36px"
@click="editor.active(item.id)"
@click="select(item.id)"
>
<a-typography-text type="secondary">{{ item.label }}</a-typography-text>
</a-list-item>
@ -161,7 +166,7 @@ const areas = computed<MapPen[]>(() => editor.value.areas.value.filter(({ label
class="ph-16"
:class="{ selected: item.id === current }"
style="height: 36px"
@click="editor.active(item.id)"
@click="select(item.id)"
>
<a-typography-text type="secondary">{{ item.label }}</a-typography-text>
</a-list-item>
@ -176,7 +181,7 @@ const areas = computed<MapPen[]>(() => editor.value.areas.value.filter(({ label
class="ph-16"
:class="{ selected: item.id === current }"
style="height: 36px"
@click="editor.active(item.id)"
@click="select(item.id)"
>
<a-typography-text type="secondary">{{ item.label }}</a-typography-text>
</a-list-item>
@ -191,7 +196,7 @@ const areas = computed<MapPen[]>(() => editor.value.areas.value.filter(({ label
class="ph-16"
:class="{ selected: item.id === current }"
style="height: 36px"
@click="editor.active(item.id)"
@click="select(item.id)"
>
<a-typography-text type="secondary">{{ item.label }}</a-typography-text>
</a-list-item>

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

@ -423,6 +423,12 @@ export class EditorService extends Meta2d {
this.render();
}
public gotoById(id: string): void {
const pen = this.getPenById(id);
if (isNil(pen)) return;
this.gotoView(pen);
}
public deleteById(id?: string): void {
const pen = this.getPenById(id);
if (pen?.name !== 'area') return;
@ -657,10 +663,9 @@ export class EditorService extends Meta2d {
* @param id 区域ID，未指定则自动生成
*/
public async addArea(p1: Point, p2: Point, type = MapAreaType.库区, id?: string) {
const scale = this.data().scale ?? 1;
const w = Math.abs(p1.x - p2.x);
const h = Math.abs(p1.y - p2.y);
if (w * scale < 50 || h * scale < 60) return;
if (w < 50 || h < 60) return;
const points = new Array<string>();
const routes = new Array<string>();
if (!id) {
@ -786,7 +791,7 @@ export class EditorService extends Meta2d {
case 'click':
case 'mousedown':
case 'mouseup':
this.#mouse$$.next({ type: e, value: pick(v, 'x', 'y') });
this.#mouse$$.next({ type: e, value: pick(this.getPenRect(v), 'x', 'y') });
break;
default:
@ -1111,7 +1116,7 @@ function calcBezierCenter(bezierFn: (t: number) => Point): Point & { t: number }
return { ...point, t };
});
const target = length / 2;
const target = length * 0.45;
let accumulated = 0;
for (let i = 0; i < samples.length - 1; i++) {
const p1 = samples[i];