feat: 修正圆形修改不生效问题

src/core/components/circle/index.ts

@@ -17,13 +17,13 @@ export { default as TempComponent } from "./temp-circle.vue";
 export const shapeName = "圆形";
 export const defaultStyle = {
   dash: [30, 0],
-  stroke: '#000000',
+  stroke: "#000000",
   strokeWidth: 5,
   fontSize: 22,
   align: "center",
   fontStyle: "normal",
-  fontColor: '#000000',
-  padding: 8
+  fontColor: "#000000",
+  padding: 8,
 };
 
 export const addMode = "area";
@@ -31,13 +31,25 @@ export const addMode = "area";
 export const getMouseStyle = (data: CircleData) => {
   const fillStatus = data.fill && getMouseColors(data.fill);
   const strokeStatus = data.stroke && getMouseColors(data.stroke);
-  const strokeWidth = data.strokeWidth
+  const strokeWidth = data.strokeWidth;
   return {
-    default: {  stroke: data.stroke, strokeWidth },
-    hover: { fill: fillStatus && fillStatus.hover, stroke: strokeStatus && strokeStatus.hover },
-    select: { fill: fillStatus && fillStatus.select, stroke: strokeStatus && strokeStatus.select  },
-    focus: { fill: fillStatus && fillStatus.hover, stroke: strokeStatus && strokeStatus.hover },
-    press: { fill: fillStatus && fillStatus.press, stroke: strokeStatus && strokeStatus.press },
+    default: { stroke: data.stroke, strokeWidth, fill: data.fill },
+    hover: {
+      fill: fillStatus && fillStatus.hover,
+      stroke: strokeStatus && strokeStatus.hover,
+    },
+    select: {
+      fill: fillStatus && fillStatus.select,
+      stroke: strokeStatus && strokeStatus.select,
+    },
+    focus: {
+      fill: fillStatus && fillStatus.hover,
+      stroke: strokeStatus && strokeStatus.hover,
+    },
+    press: {
+      fill: fillStatus && fillStatus.press,
+      stroke: strokeStatus && strokeStatus.press,
+    },
   };
 };
 
@@ -46,24 +58,26 @@ export const getSnapInfos = (data: CircleData) => {
 };
 
 export const getSnapPoints = (data: CircleData) => {
-  const dec = new Transform(data.mat).decompose()
-  const points = getRectSnapPoints(data.radiusX * 2, data.radiusY * 2).map((v) => ({
-    x: v.x + dec.x,
-    y: v.y + dec.y,
-  }));
+  const dec = new Transform(data.mat).decompose();
+  const points = getRectSnapPoints(data.radiusX * 2, data.radiusY * 2).map(
+    (v) => ({
+      x: v.x + dec.x,
+      y: v.y + dec.y,
+    })
+  );
   // const size = data.radius * 2;
-  return points
-}
+  return points;
+};
 
 export type CircleData = Partial<typeof defaultStyle> &
   BaseItem & {
-    opacity?: number,
-    fill?: string
+    opacity?: number;
+    fill?: string;
     mat: number[];
-    radiusX: number
-    radiusY: number
+    radiusX: number;
+    radiusY: number;
     content?: string;
-    padding?: number
+    padding?: number;
   };
 
 export const dataToConfig = (data: CircleData): CircleConfig => ({
@@ -71,8 +85,7 @@ export const dataToConfig = (data: CircleData): CircleConfig => ({
   ...data,
 });
 
-
-export const interactiveToData: InteractiveTo<'circle'> = ({
+export const interactiveToData: InteractiveTo<"circle"> = ({
   info,
   preset = {},
   ...args
@@ -88,46 +101,48 @@ export const interactiveToData: InteractiveTo<'circle'> = ({
   }
 };
 
-export const interactiveFixData: InteractiveFix<'circle'> = ({
+export const interactiveFixData: InteractiveFix<"circle"> = ({
   data,
   info,
 }) => {
   const area = info.cur!;
-  const sx = Math.abs((area[1].x - area[0].x)) / 2
-  const sy = Math.abs((area[1].y - area[0].y)) / 2
-  const center = lineCenter(area)
+  const sx = Math.abs(area[1].x - area[0].x) / 2;
+  const sy = Math.abs(area[1].y - area[0].y) / 2;
+  const center = lineCenter(area);
 
-  data.mat = new Transform().translate(center.x, center.y).m
-  data.radiusX = sx
-  data.radiusY = sy
+  data.mat = new Transform().translate(center.x, center.y).m;
+  data.radiusX = sx;
+  data.radiusY = sy;
   return data;
 };
 
-
-export const matResponse = ({data, mat, increment}: MatResponseProps<'circle'>, initRadius?: Pos) => {
-if (!initRadius) {
+export const matResponse = (
+  { data, mat, increment }: MatResponseProps<"circle">,
+  initRadius?: Pos
+) => {
+  if (!initRadius) {
     initRadius = {
       x: data.radiusX,
       y: data.radiusY,
     };
   }
   if (increment) {
-    mat = mat.copy().multiply(new Transform(data.mat))
+    mat = mat.copy().multiply(new Transform(data.mat));
   }
   const dec = mat.decompose();
   data.radiusY = dec.scaleY * initRadius.y;
   data.radiusX = dec.scaleX * initRadius.x;
-  
+
   data.mat = new Transform()
     .translate(dec.x, dec.y)
     .rotate(MathUtils.degToRad(dec.rotation)).m;
   return data;
-}
+};
 
 export const getPredefine = (key: keyof CircleData) => {
-  if (['fill', 'stroke'].includes(key)) {
-    return { canun: true }
-  } else if (key === 'strokeWidth') {
-    return { proportion: true }
+  if (["fill", "stroke"].includes(key)) {
+    return { canun: true };
+  } else if (key === "strokeWidth") {
+    return { proportion: true };
   }
-}
+};