feat: sharpness (#1931)

* feat: sharpness

* feat: fill sharp lines, et al.

* fix: rotated positioning

* chore: simplify path with Q

* fix: hit test inside sharp elements

* make sharp / round buttons work properly

* fix tsc tests

* update snapshots

* update snapshots

* fix: sharp arrow creation error

* fix merge and test

* avoid type assertion

* remove duplicate helper

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Daishi Kato 2020-08-15 00:59:43 +09:00 committed by GitHub
parent 930813387b
commit 41cb1fbeba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 841 additions and 42 deletions

View file

@ -267,7 +267,7 @@ const hitTestLinear = (args: HitTestArgs): boolean => {
if (args.check === isInsideCheck) {
const hit = shape.some((subshape) =>
hitTestCurveInside(subshape, relX, relY),
hitTestCurveInside(subshape, relX, relY, element.strokeSharpness),
);
if (hit) {
return true;
@ -688,22 +688,33 @@ const pointInBezierEquation = (
return false;
};
const hitTestCurveInside = (drawable: Drawable, x: number, y: number) => {
const hitTestCurveInside = (
drawable: Drawable,
x: number,
y: number,
sharpness: ExcalidrawElement["strokeSharpness"],
) => {
const ops = getCurvePathOps(drawable);
const points: Point[] = [];
let odd = false; // select one line out of double lines
for (const operation of ops) {
if (operation.op === "move") {
if (points.length) {
break;
odd = !odd;
if (odd) {
points.push([operation.data[0], operation.data[1]]);
}
points.push([operation.data[0], operation.data[1]]);
} else if (operation.op === "bcurveTo") {
points.push([operation.data[0], operation.data[1]]);
points.push([operation.data[2], operation.data[3]]);
points.push([operation.data[4], operation.data[5]]);
if (odd) {
points.push([operation.data[0], operation.data[1]]);
points.push([operation.data[2], operation.data[3]]);
points.push([operation.data[4], operation.data[5]]);
}
}
}
if (points.length >= 4) {
if (sharpness === "sharp") {
return isPointInPolygon(points, x, y);
}
const polygonPoints = pointsOnBezierCurves(points as any, 10, 5);
return isPointInPolygon(polygonPoints, x, y);
}