fix: Render donut arc in border-box way

src/shapes/line.ts

@@ -651,7 +651,7 @@ export function deleteVertex(shape: LineShape, index: number): Partial<LineShape
         if (!isBezieirControl(c)) {
           part.curves!.push(c);
         } else if (i === index - 1) {
-          // Second bezier constrol of the target vertex should be preserved.
+          // Preserve second bezier constrol of the target vertex when the former edge is also bezier.
           part.curves!.push({ c1: c.c1, c2: targetC.c2 });
         } else if (i !== index) {
           part.curves!.push(c);

src/utils/renderer.ts

@@ -161,22 +161,23 @@ export function renderOutlinedDonutArc(
   holeRate: number,
   fillColor: Color,
 ) {
-  ctx.fillStyle = "#000";
+  ctx.save();
+  const region = new Path2D();
+  region.arc(p.x, p.y, r, from, to);
+  region.arc(p.x, p.y, r * holeRate, to, from, true);
+  region.closePath();
+  ctx.clip(region);
+
+  applyFillStyle(ctx, { color: fillColor });
+  applyStrokeStyle(ctx, { color: COLORS.BLACK, width: r * 0.1 });
   ctx.beginPath();
   ctx.arc(p.x, p.y, r, from, to);
   ctx.arc(p.x, p.y, r * holeRate, to, from, true);
   ctx.closePath();
   ctx.fill();
+  ctx.stroke();
 
-  applyFillStyle(ctx, { color: fillColor });
-  const cr = (from + to) / 2;
-  const cv = rotate({ x: r * 0.1, y: 0 }, cr);
-  const cp = add(p, cv);
-  ctx.beginPath();
-  ctx.arc(cp.x, cp.y, r * 0.8, from, to);
-  ctx.arc(cp.x, cp.y, r * 0.8 * holeRate, to, from, true);
-  ctx.closePath();
-  ctx.fill();
+  ctx.restore();
 }
 
 export function renderArrow(ctx: CanvasRenderingContext2D, [a, b]: ISegment, size: number) {