feat: Show bezier controls while moving vertices

miyanokomiya · Sep 16, 2024 · 5814aa3 · 5814aa3
1 parent 9408d98
commit 5814aa3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/composables/states/appCanvas/lines/movingLineVertexState.ts b/src/composables/states/appCanvas/lines/movingLineVertexState.ts
@@ -119,8 +119,8 @@ export function newMovingLineVertexState(option: Option): AppCanvasState {
       const scale = ctx.getScale();
       const style = ctx.getStyleScheme();
       const vertexSize = 8 * scale;
-      applyFillStyle(renderCtx, { color: style.selectionPrimary });
 
+      applyFillStyle(renderCtx, { color: style.selectionPrimary });
       scaleGlobalAlpha(renderCtx, 0.5, () => {
         renderCtx.beginPath();
         renderCtx.arc(origin.x, origin.y, vertexSize, 0, TAU);
@@ -130,6 +130,7 @@ export function newMovingLineVertexState(option: Option): AppCanvasState {
       const line = ctx.getShapeComposite().mergedShapeMap[option.lineShape.id] as LineShape;
       renderBezierControls(renderCtx, style, scale, line);
 
+      applyFillStyle(renderCtx, { color: style.selectionPrimary });
       renderCtx.beginPath();
       renderCtx.arc(vertex.x, vertex.y, vertexSize, 0, TAU);
       renderCtx.fill();

diff --git a/src/composables/states/appCanvas/lines/movingNewVertexState.ts b/src/composables/states/appCanvas/lines/movingNewVertexState.ts
@@ -13,6 +13,7 @@ import { COMMAND_EXAM_SRC } from "../commandExams";
 import { ShapeSnapping, SnappingResult, newShapeSnapping, renderSnappingResult } from "../../../shapeSnapping";
 import { TAU } from "../../../../utils/geometry";
 import { getPatchAfterLayouts } from "../../../shapeLayoutHandler";
+import { renderBezierControls } from "../../../lineBounding";
 
 interface Option {
   lineShape: LineShape;
@@ -103,8 +104,12 @@ export function newMovingNewVertexState(option: Option): AppCanvasState {
     render(ctx, renderCtx) {
       const scale = ctx.getScale();
       const style = ctx.getStyleScheme();
-      const vertexSize = 8 * scale;
+
+      const line = ctx.getShapeComposite().mergedShapeMap[option.lineShape.id] as LineShape;
+      renderBezierControls(renderCtx, style, scale, line);
+
       applyFillStyle(renderCtx, { color: style.selectionPrimary });
+      const vertexSize = 8 * scale;
       renderCtx.beginPath();
       renderCtx.ellipse(vertex.x, vertex.y, vertexSize, vertexSize, 0, 0, TAU);
       renderCtx.fill();