From 5814aa37a7683a7a1e58cad5ad3b9ff780926609 Mon Sep 17 00:00:00 2001 From: miyanokomiya Date: Mon, 16 Sep 2024 22:11:10 +0900 Subject: [PATCH] feat: Show bezier controls while moving vertices --- .../states/appCanvas/lines/movingLineVertexState.ts | 3 ++- .../states/appCanvas/lines/movingNewVertexState.ts | 7 ++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/composables/states/appCanvas/lines/movingLineVertexState.ts b/src/composables/states/appCanvas/lines/movingLineVertexState.ts index 6a3e5a8c..33aeaa7f 100644 --- 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 index cb0d8c67..63651a31 100644 --- 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();