fix: strokeAndFill in checkMode

src/core/render/preset/graphics.ts

@@ -51,6 +51,12 @@ export const enum GraphicMode {
     StrokeAndFill
 }
 
+const enum GraphicModeProp {
+    Fill,
+    Stroke,
+    StrokeAndFill
+}
+
 export interface EGraphicItemEvent extends ERenderItemEvent {}
 
 export abstract class GraphicItemBase
@@ -68,6 +74,11 @@ export abstract class GraphicItemBase
     miterLimit: number = 10;
     fillRule: CanvasFillRule = 'nonzero';
 
+    private propFill: boolean = true;
+    private propStroke: boolean = false;
+    private strokeAndFill: boolean = false;
+    private propFillSet: boolean = false;
+
     /**
      * 设置描边绘制的信息
      * @param options 线的信息
@@ -75,10 +86,12 @@ export abstract class GraphicItemBase
     setLineOption(options: Partial<ILineProperty>) {
         if (!isNil(options.lineWidth)) this.lineWidth = options.lineWidth;
         if (!isNil(options.lineDash)) this.lineDash = options.lineDash;
-        if (!isNil(options.lineDashOffset)) this.lineDashOffset = options.lineDashOffset;
+        if (!isNil(options.lineDashOffset))
+            this.lineDashOffset = options.lineDashOffset;
         if (!isNil(options.lineJoin)) this.lineJoin = options.lineJoin;
         if (!isNil(options.lineCap)) this.lineCap = options.lineCap;
         if (!isNil(options.miterLimit)) this.miterLimit = options.miterLimit;
+        this.update();
     }
 
     /**
@@ -117,6 +130,46 @@ export abstract class GraphicItemBase
         this.update();
     }
 
+    /**
+     * 检查渲染模式，参考 {@link GraphicPropsBase} 中的 fill stroke strokeAndFill 属性
+     */
+    private checkMode(mode: GraphicModeProp, value: boolean) {
+        switch (mode) {
+            case GraphicModeProp.Fill:
+                this.propFill = value;
+                this.propFillSet = true;
+                break;
+            case GraphicModeProp.Stroke:
+                this.propStroke = value;
+                break;
+            case GraphicModeProp.StrokeAndFill:
+                this.strokeAndFill = value;
+                break;
+        }
+        if (this.strokeAndFill) {
+            this.mode = GraphicMode.StrokeAndFill;
+        } else {
+            if (!this.propFillSet) {
+                if (this.propStroke) {
+                    this.mode = GraphicMode.Stroke;
+                } else {
+                    this.mode = GraphicMode.Fill;
+                }
+            } else {
+                if (this.propFill && this.propStroke) {
+                    this.mode = GraphicMode.FillAndStroke;
+                } else if (this.propFill) {
+                    this.mode = GraphicMode.Fill;
+                } else if (this.propStroke) {
+                    this.mode = GraphicMode.Stroke;
+                } else {
+                    this.mode = GraphicMode.Fill;
+                }
+            }
+        }
+        this.update();
+    }
+
     /**
      * 设置画布的渲染状态，在实际渲染前调用
      * @param canvas 要设置的画布
@@ -126,7 +179,7 @@ export abstract class GraphicItemBase
         ctx.fillStyle = this.fill;
         ctx.strokeStyle = this.stroke;
         ctx.lineWidth = this.lineWidth;
-        ctx.setLineDash(this.lineDash)
+        ctx.setLineDash(this.lineDash);
         ctx.lineDashOffset = this.lineDashOffset;
         ctx.lineJoin = this.lineJoin;
         ctx.lineCap = this.lineCap;
@@ -142,7 +195,60 @@ export abstract class GraphicItemBase
         namespace?: ElementNamespace,
         parentComponent?: ComponentInternalInstance | null
     ): void {
+        if (isNil(prevValue) && isNil(nextValue)) return;
         switch (key) {
+            case 'fill':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.checkMode(GraphicModeProp.Fill, nextValue);
+                break;
+            case 'stroke':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.checkMode(GraphicModeProp.Stroke, nextValue);
+                break;
+            case 'strokeAndFill':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.checkMode(GraphicModeProp.StrokeAndFill, nextValue);
+                break;
+            case 'fillRule':
+                if (!this.assertType(nextValue, 'string', key)) return;
+                this.setFillRule(nextValue);
+                break;
+            case 'fillStyle':
+                this.setFillStyle(nextValue);
+                break;
+            case 'strokeStyle':
+                this.setStrokeStyle(nextValue);
+                break;
+            case 'lineWidth':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.lineWidth = nextValue;
+                this.update();
+                break;
+            case 'lineDash':
+                if (!this.assertType(nextValue, Array, key)) return;
+                this.lineDash = nextValue;
+                this.update();
+                break;
+            case 'lineDashOffset':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.lineDashOffset = nextValue;
+                this.update();
+                break;
+            case 'lineJoin':
+                if (!this.assertType(nextValue, 'string', key)) return;
+                this.lineJoin = nextValue;
+                this.update();
+                break;
+            case 'lineCap':
+                if (!this.assertType(nextValue, 'string', key)) return;
+                this.lineCap = nextValue;
+                this.update();
+                break;
+            case 'miterLimit':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.miterLimit = nextValue;
+                this.update();
+                break;
         }
         super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
     }
@@ -189,7 +295,7 @@ export class Circle extends GraphicItemBase {
         const ctx = canvas.ctx;
         this.setCanvasState(canvas);
         ctx.beginPath();
-        ctx.arc(this.x,this.y,this.radius,this.start,this.end);
+        ctx.arc(this.x, this.y, this.radius, this.start, this.end);
 
         switch (this.mode) {
             case GraphicMode.Fill:
@@ -215,7 +321,7 @@ export class Circle extends GraphicItemBase {
      */
     setRadius(radius: number) {
         this.radius = radius;
-        this.size(radius*2,radius*2);
+        this.size(radius * 2, radius * 2);
         this.update();
     }
 
@@ -238,6 +344,18 @@ export class Circle extends GraphicItemBase {
         parentComponent?: ComponentInternalInstance | null
     ): void {
         switch (key) {
+            case 'radius':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setRadius(nextValue);
+                return;
+            case 'start':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setAngle(nextValue, this.end);
+                return;
+            case 'end':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setAngle(this.start, nextValue);
+                return;
         }
         super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
     }
@@ -256,7 +374,15 @@ export class Ellipse extends GraphicItemBase {
         const ctx = canvas.ctx;
         this.setCanvasState(canvas);
         ctx.beginPath();
-        ctx.ellipse(this.x,this.y,this.radiusX,this.radiusY,0,this.start,this.end);
+        ctx.ellipse(
+            this.x,
+            this.y,
+            this.radiusX,
+            this.radiusY,
+            0,
+            this.start,
+            this.end
+        );
 
         switch (this.mode) {
             case GraphicMode.Fill:
@@ -287,7 +413,6 @@ export class Ellipse extends GraphicItemBase {
         this.update();
     }
 
-
     /**
      * 设置椭圆的起始与终止角度
      * @param start 起始角度
@@ -307,6 +432,22 @@ export class Ellipse extends GraphicItemBase {
         parentComponent?: ComponentInternalInstance | null
     ): void {
         switch (key) {
+            case 'radiusX':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setRadius(nextValue, this.radiusY);
+                return;
+            case 'radiusY':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setRadius(this.radiusY, nextValue);
+                return;
+            case 'start':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setAngle(nextValue, this.end);
+                return;
+            case 'end':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setAngle(this.start, nextValue);
+                return;
         }
         super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
     }
@@ -325,10 +466,9 @@ export class Line extends GraphicItemBase {
         const ctx = canvas.ctx;
         this.setCanvasState(canvas);
         ctx.beginPath();
-        ctx.moveTo(this.x1,this.y1)
-        ctx.lineTo(this.x2,this.y2);
+        ctx.moveTo(this.x1, this.y1);
+        ctx.lineTo(this.x2, this.y2);
         ctx.stroke();
-           
     }
 
     /**
@@ -357,6 +497,22 @@ export class Line extends GraphicItemBase {
         parentComponent?: ComponentInternalInstance | null
     ): void {
         switch (key) {
+            case 'x1':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setPoint1(nextValue, this.y1);
+                return;
+            case 'y1':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setPoint1(this.x1, nextValue);
+                return;
+            case 'x2':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setPoint2(nextValue, this.y2);
+                return;
+            case 'y2':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setPoint2(this.x2, nextValue);
+                return;
         }
         super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
     }
@@ -379,8 +535,15 @@ export class BezierCurve extends GraphicItemBase {
         const ctx = canvas.ctx;
         this.setCanvasState(canvas);
         ctx.beginPath();
-        ctx.moveTo(this.sx,this.sy)
-        ctx.bezierCurveTo(this.cp1x,this.cp1y,this.cp2x,this.cp2y,this.ex,this.ey);
+        ctx.moveTo(this.sx, this.sy);
+        ctx.bezierCurveTo(
+            this.cp1x,
+            this.cp1y,
+            this.cp2x,
+            this.cp2y,
+            this.ex,
+            this.ey
+        );
         ctx.stroke();
     }
 
@@ -428,6 +591,38 @@ export class BezierCurve extends GraphicItemBase {
         parentComponent?: ComponentInternalInstance | null
     ): void {
         switch (key) {
+            case 'sx':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setStart(nextValue, this.sy);
+                return;
+            case 'sy':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setStart(this.sx, nextValue);
+                return;
+            case 'cp1x':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setControl1(nextValue, this.cp1y);
+                return;
+            case 'cp1y':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setControl1(this.cp1x, nextValue);
+                return;
+            case 'cp2x':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setControl2(nextValue, this.cp2y);
+                return;
+            case 'cp2y':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setControl2(this.cp2x, nextValue);
+                return;
+            case 'ex':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setEnd(nextValue, this.ey);
+                return;
+            case 'ey':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setEnd(this.ex, nextValue);
+                return;
         }
         super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
     }
@@ -448,8 +643,8 @@ export class QuadraticCurve extends GraphicItemBase {
         const ctx = canvas.ctx;
         this.setCanvasState(canvas);
         ctx.beginPath();
-        ctx.moveTo(this.sx,this.sy)
-        ctx.quadraticCurveTo(this.cpx,this.cpy,this.ex,this.ey);
+        ctx.moveTo(this.sx, this.sy);
+        ctx.quadraticCurveTo(this.cpx, this.cpy, this.ex, this.ey);
         ctx.stroke();
     }
 
@@ -488,6 +683,30 @@ export class QuadraticCurve extends GraphicItemBase {
         parentComponent?: ComponentInternalInstance | null
     ): void {
         switch (key) {
+            case 'sx':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setStart(nextValue, this.sy);
+                return;
+            case 'sy':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setStart(this.sx, nextValue);
+                return;
+            case 'cpx':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setControl(nextValue, this.cpy);
+                return;
+            case 'cpy':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setControl(this.cpx, nextValue);
+                return;
+            case 'ex':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setEnd(nextValue, this.ey);
+                return;
+            case 'ey':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setEnd(this.ex, nextValue);
+                return;
         }
         super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
     }
@@ -505,18 +724,18 @@ export class Path extends GraphicItemBase {
         this.setCanvasState(canvas);
         switch (this.mode) {
             case GraphicMode.Fill:
-                ctx.fill(this.path,this.fillRule);
+                ctx.fill(this.path, this.fillRule);
                 break;
             case GraphicMode.Stroke:
                 ctx.stroke(this.path);
                 break;
             case GraphicMode.FillAndStroke:
-                ctx.fill(this.path,this.fillRule);
+                ctx.fill(this.path, this.fillRule);
                 ctx.stroke(this.path);
                 break;
             case GraphicMode.StrokeAndFill:
                 ctx.stroke(this.path);
-                ctx.fill(this.path,this.fillRule);
+                ctx.fill(this.path, this.fillRule);
                 break;
         }
     }
@@ -545,6 +764,11 @@ export class Path extends GraphicItemBase {
         parentComponent?: ComponentInternalInstance | null
     ): void {
         switch (key) {
+            case 'path':
+                if (!this.assertType(nextValue, Path2D, key)) return;
+                this.path = nextValue;
+                this.update();
+                return;
         }
         super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
     }

src/core/render/renderer/props.ts

@@ -108,17 +108,49 @@ export interface GraphicPropsBase extends BaseProps, Partial<ILineProperty> {
 
 export interface RectProps extends GraphicPropsBase {}
 
-export interface CirclesProps extends GraphicPropsBase {}
+export interface CirclesProps extends GraphicPropsBase {
+    radius?: number;
+    start?: number;
+    end?: number;
+}
 
-export interface EllipseProps extends GraphicPropsBase {}
+export interface EllipseProps extends GraphicPropsBase {
+    radiusX?: number;
+    radiusY?: number;
+    start?: number;
+    end?: number;
+}
 
-export interface LineProps extends GraphicPropsBase {}
+export interface LineProps extends GraphicPropsBase {
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+}
 
-export interface BezierProps extends GraphicPropsBase {}
+export interface BezierProps extends GraphicPropsBase {
+    sx?: number;
+    sy?: number;
+    cp1x?: number;
+    cp1y?: number;
+    cp2x?: number;
+    cp2y?: number;
+    ex?: number;
+    ey?: number;
+}
 
-export interface QuadraticProps extends GraphicPropsBase {}
+export interface QuadraticProps extends GraphicPropsBase {
+    sx?: number;
+    sy?: number;
+    cpx?: number;
+    cpy?: number;
+    ex?: number;
+    ey?: number;
+}
 
-export interface PathProps extends GraphicPropsBase {}
+export interface PathProps extends GraphicPropsBase {
+    path?: Path2D;
+}
 
 export interface IconProps extends BaseProps {}