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

.env.development

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

src/apis/map/constant.ts

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

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