Implement Bezier curve reduce function (#711)

* fixed extrema bug and added reduce impl

Co-authored-by: Rob Nadal <RobNadal@users.noreply.github.com>
Co-authored-by: Linda Zheng <ll2zheng@uwaterloo.ca>
Co-authored-by: Hannah Li <hannahli2010@gmail.com>

* Stylistic changes related to reduce

* Fixed reduce splitting bug causing panic

* Added shortcuts and simplified reduce

* Stylistic changes per review

* address comments

* Removed color gradient function and added consts

* Tweaks

* Change colors faster

* Don't drop on mouseout

Co-authored-by: Thomas Cheng <contact.chengthomas@gmail.com>
Co-authored-by: Rob Nadal <RobNadal@users.noreply.github.com>
Co-authored-by: Linda Zheng <ll2zheng@uwaterloo.ca>
Co-authored-by: Hannah Li <hannahli2010@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Rob Nadal
2022-07-06 11:20:28 -07:00
committed by GitHub
co-authored by Rob Nadal Linda Zheng Hannah Li Thomas Cheng Keavon Chambers
parent f3d5028107
commit b4ada6affd
7 changed files with 142 additions and 18 deletions
@@ -70,9 +70,10 @@ export const drawBezier = (ctx: CanvasRenderingContext2D, points: Point[], dragI
handleStrokeColor: COLORS.INTERACTIVE.STROKE_1,
handleLineStrokeColor: COLORS.INTERACTIVE.STROKE_1,
radius: DEFAULT_ENDPOINT_RADIUS,
drawHandles: true,
...bezierStyleConfig,
};
// if the handle or handle line colors are not specified, use the same colour as the rest of the curve
// If the handle or handle line colors are not specified, use the same color as the rest of the curve
if (bezierStyleConfig.curveStrokeColor) {
if (!bezierStyleConfig.handleStrokeColor) {
styleConfig.handleStrokeColor = bezierStyleConfig.curveStrokeColor;
@@ -112,11 +113,15 @@ export const drawBezier = (ctx: CanvasRenderingContext2D, points: Point[], dragI
}
ctx.stroke();
drawLine(ctx, start, handleStart, styleConfig.handleLineStrokeColor);
drawLine(ctx, end, handleEnd, styleConfig.handleLineStrokeColor);
if (styleConfig.drawHandles) {
drawLine(ctx, start, handleStart, styleConfig.handleLineStrokeColor);
drawLine(ctx, end, handleEnd, styleConfig.handleLineStrokeColor);
}
points.forEach((point, index) => {
const strokeColor = isIndexFirstOrLast(index, points.length) ? styleConfig.curveStrokeColor : styleConfig.handleStrokeColor;
drawPoint(ctx, point, getPointSizeByIndex(index, points.length, styleConfig.radius), index === dragIndex ? COLORS.INTERACTIVE.SELECTED : strokeColor);
if (styleConfig.drawHandles || isIndexFirstOrLast(index, points.length)) {
const strokeColor = isIndexFirstOrLast(index, points.length) ? styleConfig.curveStrokeColor : styleConfig.handleStrokeColor;
drawPoint(ctx, point, getPointSizeByIndex(index, points.length, styleConfig.radius), index === dragIndex ? COLORS.INTERACTIVE.SELECTED : strokeColor);
}
});
};
@@ -33,4 +33,5 @@ export type BezierStyleConfig = {
handleStrokeColor: string;
handleLineStrokeColor: string;
radius: number;
drawHandles: boolean;
};