feat: change point coordinate to center

README.md

@@ -142,10 +142,7 @@ RobotRealtimeInfo [JSON]
   "y": 500,
   "active": true,
   "angle": -90,
-  "path": [
-    [600, 500],
-    [100, 400]
-  ]
+  "path": []
 }
 ```
 
@@ -397,7 +394,7 @@ export interface RobotRealtimeInfo extends RobotInfo {
   y: number; // 坐标y
   active?: boolean; // 是否运行
   angle?: number; // 旋转角度
-  path?: Array<[number, number]>; // 规划路径
+  path?: Array<{ x: number; y: number }>; // 规划路径
 }
 
 enum RobotBrand {

src/apis/robot/type.ts

@@ -1,3 +1,5 @@
+import type { Point } from '@api/map';
+
 import type { RobotBrand, RobotState, RobotType } from './constant';
 
 export interface RobotGroup {
@@ -38,5 +40,5 @@ export interface RobotRealtimeInfo extends RobotInfo {
   y: number; // 坐标y
   active?: boolean; // 是否运行
   angle?: number; // 旋转角度
-  path?: Array<[number, number]>; // 规划路径
+  path?: Array<Point>; // 规划路径
 }

src/components/card/point-detail-card.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { MapAreaType, type MapPen, type MapPointInfo, MapPointType } from '@api/map';
+import { MapAreaType, type MapPen, type MapPointInfo, MapPointType, type Rect } from '@api/map';
 import type { EditorService } from '@core/editor.service';
 import sTheme from '@core/theme.service';
+import { isNil } from 'lodash-es';
 import { computed, inject, type InjectionKey, type ShallowRef } from 'vue';
 
 type Props = {
@@ -17,6 +18,11 @@ const point = computed<MapPointInfo | null>(() => {
   if (!v?.type) return null;
   return v;
 });
+const rect = computed<Partial<Rect>>(() => {
+  if (isNil(point.value)) return {};
+  const { x, y } = editor.value.getPointRect(pen.value!) ?? {};
+  return { x, y };
+});
 
 const bindRobot = computed<string>(
   () =>
@@ -68,7 +74,7 @@ const coArea2 = computed<string>(() => mapAreas(MapAreaType.互斥区));
       <a-list class="block mt-16">
         <a-list-item>
           <a-typography-text type="secondary">{{ $t('站点坐标') }}</a-typography-text>
-          <a-typography-text>({{ pen.x?.toFixed() }},{{ pen.y?.toFixed() }})</a-typography-text>
+          <a-typography-text>({{ rect.x?.toFixed() }},{{ rect.y?.toFixed() }})</a-typography-text>
         </a-list-item>
         <a-list-item v-if="[MapPointType.充电点, MapPointType.停靠点].includes(point.type)">
           <a-flex :gap="8" vertical>

src/components/card/point-edit-card.vue

@@ -26,10 +26,10 @@ const point = computed<MapPointInfo | null>(() => {
   if (!v?.type) return null;
   return v;
 });
-
-const rect = computed<Rect | null>(() => {
-  if (isNil(pen.value)) return null;
-  return editor.value.getPenRect(pen.value);
+const rect = computed<Partial<Rect>>(() => {
+  if (isNil(point.value)) return {};
+  const { x, y, width, height } = editor.value.getPointRect(pen.value!) ?? {};
+  return { x, y, width, height };
 });
 
 const refBindRobot = shallowRef<RobotBindModalRef>();
@@ -110,7 +110,7 @@ const coArea2 = computed<MapPen[]>(() => editor.value.getBoundAreas(props.id, 'p
               :precision="0"
               :controls="false"
               :value="rect?.x?.toFixed()"
-              @change="editor.updatePen(id, { x: +$event })"
+              @change="editor.updatePen(id, { x: +$event - (rect.width ?? 0) / 2 })"
             />
           </a-space>
         </a-col>
@@ -123,7 +123,7 @@ const coArea2 = computed<MapPen[]>(() => editor.value.getBoundAreas(props.id, 'p
               :precision="0"
               :controls="false"
               :value="rect?.y?.toFixed()"
-              @change="editor.updatePen(id, { y: +$event })"
+              @change="editor.updatePen(id, { y: +$event - (rect.height ?? 0) / 2 })"
             />
           </a-space>
         </a-col>

src/services/editor.service.ts

@@ -9,6 +9,7 @@ import {
   MapRoutePassType,
   MapRouteType,
   type Point,
+  type Rect,
 } from '@api/map';
 import type { RobotGroup, RobotInfo, RobotRealtimeInfo, RobotType } from '@api/robot';
 import type {
@@ -103,7 +104,7 @@ export class EditorService extends Meta2d {
     if (!pen?.id || isEmpty(pen?.point)) return null;
     const { id, label, desc, properties } = pen;
     const { type, robots, actions } = pen.point;
-    const { x, y } = this.getPenRect(pen);
+    const { x = 0, y = 0 } = this.getPointRect(pen) ?? {};
     const point: StandardScenePoint = {
       id: id,
       name: label || id,
@@ -385,8 +386,7 @@ export class EditorService extends Meta2d {
     const x = cx - 37;
     const y = cy - 37;
     const rotate = angle ?? or;
-    const path =
-      points?.map(([px, py]) => [px - cx, py - cy]) ?? robot.path?.map(([ex, ey]) => [ex + ox! - x, ey + oy! - y]);
+    const path = points?.map((p) => [p.x - cx, p.y - cy]) ?? robot.path?.map((d) => [d.x + ox! - x, d.y + oy! - y]);
     const o = { ...robot, ...omitBy({ active, path }, isNil) };
     if (isNil(active)) {
       this.setValue({ id, x, y, rotate, robot: o, visible: true }, { render: true, history: false, doEvent: false });
@@ -419,6 +419,12 @@ export class EditorService extends Meta2d {
     { initialValue: new Array<MapPen>() },
   );
 
+  public getPointRect(pen?: MapPen): Rect | null {
+    if (isNil(pen)) return null;
+    const { x, y, width, height } = this.getPenRect(pen);
+    return { x: x + width / 2, y: y + height / 2, width, height };
+  }
+
   public async addPoint(p: Point, type = MapPointType.普通点, id?: string): Promise<void> {
     id ||= s8();
     const pen: MapPen = {
@@ -431,6 +437,8 @@ export class EditorService extends Meta2d {
       label: `P${id}`,
       point: { type },
     };
+    pen.x! -= pen.width! / 2;
+    pen.y! -= pen.height! / 2;
     await this.addPen(pen, false, true, true);
   }
 
@@ -441,8 +449,19 @@ export class EditorService extends Meta2d {
     this.setValue({ id, point: o }, { render: true, history: true, doEvent: true });
   }
   public changePointType(id: string, type: MapPointType): void {
+    const pen = this.getPenById(id);
+    const rect = this.getPointRect(pen);
+    if (isNil(rect)) return;
+    const point = this.#mapPoint(type);
     this.setValue(
-      { id, ...this.#mapPoint(type), ...this.#mapPointImage(type), point: { type } },
+      {
+        id,
+        x: rect.x - point.width / 2,
+        y: rect.y - point.height / 2,
+        ...point,
+        ...this.#mapPointImage(type),
+        point: { type },
+      },
       { render: true, history: true, doEvent: true },
     );
   }
@@ -537,7 +556,8 @@ export class EditorService extends Meta2d {
     if (w * scale < 50 || h * scale < 60) return;
     const points = new Array<string>();
     const routes = new Array<string>();
-    if (id) {
+    if (!id) {
+      id = s8();
       const selected = <MapPen[]>this.store.active;
       switch (type) {
         case MapAreaType.库区:
@@ -553,8 +573,6 @@ export class EditorService extends Meta2d {
         default:
           break;
       }
-    } else {
-      id = s8();
     }
     const pen: MapPen = {
       id,
@@ -876,10 +894,10 @@ function drawRobot(ctx: CanvasRenderingContext2D, pen: MapPen): void {
     ctx.rotate((-deg * Math.PI) / 180);
     ctx.beginPath();
     ctx.moveTo(0, 0);
-    path.forEach(([ex, ey]) => ctx.lineTo(ex * s, ey * s));
+    path.forEach((d) => ctx.lineTo(d.x * s, d.y * s));
     ctx.stroke();
-    const [ex1 = 0, ey1 = 0] = nth(path, -1) ?? [];
-    const [ex2 = 0, ey2 = 0] = nth(path, -2) ?? [];
+    const { x: ex1 = 0, y: ey1 = 0 } = nth(path, -1) ?? {};
+    const { x: ex2 = 0, y: ey2 = 0 } = nth(path, -2) ?? {};
     const r = Math.atan2(ey1 - ey2, ex1 - ex2) + Math.PI;
     ctx.setLineDash([0]);
     ctx.translate(ex1 * s, ey1 * s);