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

fix: draw area under zooming

Browse Source
This commit is contained in:
chndfang 2025-06-29 14:15:55 +08:00
parent c50cdd9b6f
commit f3e2620744
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

@ -1,2 +1,2 @@
ENV_APP_TITLE=运输控制系统（开发）
# ENV_HTTP_BASE=/mocks
ENV_HTTP_BASE=/mocks

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

@ -74,4 +74,5 @@ export const EDITOR_CONFIG: Options = {
textRotate: false,
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

@ -360,6 +360,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;
@ -572,10 +578,9 @@ export class EditorService extends Meta2d {
}
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) {
@ -693,7 +698,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:
@ -994,7 +999,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];