fix: draw area under zooming

.env.development

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

src/apis/map/constant.ts

@@ -74,4 +74,5 @@ export const EDITOR_CONFIG: Options = {
   textRotate: false,
   textAlign: 'center',
   textBaseline: 'top',
+  rule: true,
 };

src/components/pen-groups.vue

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

src/services/editor.service.ts

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