fix: 旋转缩放后连线端点问题

src/components/webtopo-svgedit/components/center-panel/index.vue

@@ -500,6 +500,12 @@
       console.log(newCenterPoint);
       globalStore.handle_svg_info.info.client = newCenterPoint;
       globalStore.intention = EGlobalStoreIntention.None;
+      setSvgActualInfo(globalStore.done_json[globalStore.handle_svg_info.index]);
+    } else if (
+      globalStore.intention === EGlobalStoreIntention.Rotate &&
+      globalStore.handle_svg_info?.info
+    ) {
+      setSvgActualInfo(globalStore.done_json[globalStore.handle_svg_info.index]);
     } else if (globalStore.intention === EGlobalStoreIntention.Connection) {
       return;
     } else if (globalStore.intention != EGlobalStoreIntention.Select) {

src/components/webtopo-svgedit/composables/index.ts

@@ -1,16 +0,0 @@
-import { IDoneJson } from '@/store/global/types';
-import { calculateRotatedPointCoordinate } from '@/utils';
-
-export const useSetPointCoordinate = (item: IDoneJson) => {
-  item.point_coordinate = {
-    tl: calculateRotatedPointCoordinate(item.point_coordinate.tl, item.client, -item.rotate),
-    tc: calculateRotatedPointCoordinate(item.point_coordinate.tc, item.client, -item.rotate),
-    tr: calculateRotatedPointCoordinate(item.point_coordinate.tr, item.client, -item.rotate),
-    l: calculateRotatedPointCoordinate(item.point_coordinate.l, item.client, -item.rotate),
-    r: calculateRotatedPointCoordinate(item.point_coordinate.r, item.client, -item.rotate),
-    bl: calculateRotatedPointCoordinate(item.point_coordinate.bl, item.client, -item.rotate),
-    bc: calculateRotatedPointCoordinate(item.point_coordinate.bc, item.client, -item.rotate),
-    br: calculateRotatedPointCoordinate(item.point_coordinate.br, item.client, -item.rotate)
-  };
-  console.log(item, 1515);
-};

src/utils/index.ts

@@ -119,47 +119,50 @@ export const objectDeepClone = <T>(object: object, default_val: any = {}) => {
  */
 export const setSvgActualInfo = (done_json: IDoneJson) => {
   const queryBbox = document.querySelector(`#${done_json.id}`);
-  const rectBBox = document.querySelector(`#rect${done_json.id}`);
+  // const rectBBox = document.querySelector(`#rect${done_json.id}`);
-  if (queryBbox && rectBBox) {
+  if (queryBbox) {
     const BBox = (queryBbox as SVGGraphicsElement).getBBox();
     const { x, y, width, height } = BBox;
-    rectBBox.setAttribute('x', x.toString());
+    // rectBBox.setAttribute('x', x.toString());
-    rectBBox.setAttribute('y', y.toString());
+    // rectBBox.setAttribute('y', y.toString());
-    rectBBox.setAttribute('width', width.toString());
+    // rectBBox.setAttribute('width', width.toString());
-    rectBBox.setAttribute('height', height.toString());
+    // rectBBox.setAttribute('height', height.toString());
     done_json.actual_bound = { x, y, width, height };
     done_json.point_coordinate.tl = {
-      x: done_json.x - width / 2,
+      x: done_json.x - (width * done_json.scale_x) / 2,
-      y: done_json.y - height / 2
+      y: done_json.y - (height * done_json.scale_y) / 2
     };
     done_json.point_coordinate.tc = {
       x: done_json.x,
-      y: done_json.y - height / 2
+      y: done_json.y - (height * done_json.scale_y) / 2
     };
     done_json.point_coordinate.tr = {
-      x: done_json.x + width / 2,
+      x: done_json.x + (width * done_json.scale_x) / 2,
-      y: done_json.y - height / 2
+      y: done_json.y - (height * done_json.scale_y) / 2
     };
     done_json.point_coordinate.l = {
-      x: done_json.x - width / 2,
+      x: done_json.x - (width * done_json.scale_x) / 2,
       y: done_json.y
     };
     done_json.point_coordinate.r = {
-      x: done_json.x + width / 2,
+      x: done_json.x + (width * done_json.scale_x) / 2,
       y: done_json.y
     };
     done_json.point_coordinate.bl = {
-      x: done_json.x - width / 2,
+      x: done_json.x - (width * done_json.scale_x) / 2,
-      y: done_json.y + height / 2
+      y: done_json.y + (height * done_json.scale_y) / 2
     };
     done_json.point_coordinate.bc = {
       x: done_json.x,
-      y: done_json.y + height / 2
+      y: done_json.y + (height * done_json.scale_y) / 2
     };
     done_json.point_coordinate.br = {
-      x: done_json.x + width / 2,
+      x: done_json.x + (width * done_json.scale_x) / 2,
-      y: done_json.y + height / 2
+      y: done_json.y + (height * done_json.scale_y) / 2
     };
+    if (done_json.rotate !== 0) {
+      setAfterRotationPointCoordinate(done_json);
+    }
   }
 };
 /**
@@ -179,3 +182,51 @@ export const getAnchorPosByAnchorType = (anchor_type: ELineBindAnchors, done_jso
     return done_json.point_coordinate.tc;
   }
 };
+/**
+ * 旋转之后重新设置组件八点坐标
+ * @param item
+ */
+export const setAfterRotationPointCoordinate = (item: IDoneJson) => {
+  item.point_coordinate = {
+    tl: calculateRotatedPointCoordinate(
+      item.point_coordinate.tl,
+      { x: item.x, y: item.y },
+      item.rotate
+    ),
+    tc: calculateRotatedPointCoordinate(
+      item.point_coordinate.tc,
+      { x: item.x, y: item.y },
+      item.rotate
+    ),
+    tr: calculateRotatedPointCoordinate(
+      item.point_coordinate.tr,
+      { x: item.x, y: item.y },
+      item.rotate
+    ),
+    l: calculateRotatedPointCoordinate(
+      item.point_coordinate.l,
+      { x: item.x, y: item.y },
+      item.rotate
+    ),
+    r: calculateRotatedPointCoordinate(
+      item.point_coordinate.r,
+      { x: item.x, y: item.y },
+      item.rotate
+    ),
+    bl: calculateRotatedPointCoordinate(
+      item.point_coordinate.bl,
+      { x: item.x, y: item.y },
+      item.rotate
+    ),
+    bc: calculateRotatedPointCoordinate(
+      item.point_coordinate.bc,
+      { x: item.x, y: item.y },
+      item.rotate
+    ),
+    br: calculateRotatedPointCoordinate(
+      item.point_coordinate.br,
+      { x: item.x, y: item.y },
+      item.rotate
+    )
+  };
+};