Add boolean operations (#1759)

This commit is contained in:
Keavon Chambers
2024-05-25 22:02:00 -07:00
committed by GitHub
parent c80de41d28
commit d40fb6caad
19 changed files with 409 additions and 55 deletions

View File

@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<rect x="4" y="4" width="8" height="8" />
<polygon points="13 4 13 12 13 13 12 13 4 13 4 16 16 16 16 4 13 4" />
<polygon points="3 3 4 3 12 3 12 0 0 0 0 12 3 12 3 4 3 3" />
</svg>

After

Width:  |  Height:  |  Size: 244 B

View File

@@ -10,6 +10,7 @@
"@tauri-apps/api": "^1.5.3",
"class-transformer": "^0.5.1",
"idb-keyval": "^6.2.1",
"paper": "^0.12.17",
"reflect-metadata": "^0.2.1"
},
"devDependencies": {
@@ -3952,6 +3953,14 @@
"url": "https://github.com/sponsors/dword-design"
}
},
"node_modules/paper": {
"version": "0.12.17",
"resolved": "https://registry.npmjs.org/paper/-/paper-0.12.17.tgz",
"integrity": "sha512-oCe+e1C2w8hKIcGoAqUjD0GGxGPv+itrRXlEFUmp3H8tY/NTnHOkYgpJFPGw6OJ8Q1Wa6+RgzlY7Dx/2WWHtkA==",
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -8224,6 +8233,11 @@
"integrity": "sha512-gFL35q7kbE/zBaPA3UKhp2vSzcPYx2ecbYuwv1ucE9Il6IIgBDweBlH8D68UFGZic2MkllKa2KHCfC1IQBQUYA==",
"dev": true
},
"paper": {
"version": "0.12.17",
"resolved": "https://registry.npmjs.org/paper/-/paper-0.12.17.tgz",
"integrity": "sha512-oCe+e1C2w8hKIcGoAqUjD0GGxGPv+itrRXlEFUmp3H8tY/NTnHOkYgpJFPGw6OJ8Q1Wa6+RgzlY7Dx/2WWHtkA=="
},
"parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",

View File

@@ -28,6 +28,7 @@
"@tauri-apps/api": "^1.5.3",
"class-transformer": "^0.5.1",
"idb-keyval": "^6.2.1",
"paper": "^0.12.17",
"reflect-metadata": "^0.2.1"
},
"devDependencies": {

View File

@@ -0,0 +1,34 @@
import paper from "paper/dist/paper-core";
// Required setup to be used headlessly
paper.setup(new paper.Size(1, 1));
paper.view.autoUpdate = false;
export function booleanUnion(path1: string, path2: string): string {
return booleanOperation(path1, path2, "unite");
}
export function booleanSubtract(path1: string, path2: string): string {
return booleanOperation(path1, path2, "subtract");
}
export function booleanIntersect(path1: string, path2: string): string {
return booleanOperation(path1, path2, "intersect");
}
export function booleanDifference(path1: string, path2: string): string {
return booleanOperation(path1, path2, "exclude");
}
export function booleanDivide(path1: string, path2: string): string {
return booleanOperation(path1, path2, "intersect") + booleanOperation(path1, path2, "exclude");
}
function booleanOperation(path1: string, path2: string, operation: "unite" | "subtract" | "intersect" | "exclude"): string {
const paperPath1 = new paper.Path(path1);
const paperPath2 = new paper.Path(path2);
const result = paperPath1[operation](paperPath2);
paperPath1.remove();
paperPath2.remove();
return result.pathData;
}

View File

@@ -97,6 +97,7 @@ import AlignTop from "@graphite-frontend/assets/icon-16px-solid/align-top.svg";
import AlignVerticalCenter from "@graphite-frontend/assets/icon-16px-solid/align-vertical-center.svg";
import Artboard from "@graphite-frontend/assets/icon-16px-solid/artboard.svg";
import BooleanDifference from "@graphite-frontend/assets/icon-16px-solid/boolean-difference.svg";
import BooleanDivide from "@graphite-frontend/assets/icon-16px-solid/boolean-divide.svg";
import BooleanIntersect from "@graphite-frontend/assets/icon-16px-solid/boolean-intersect.svg";
import BooleanSubtractBack from "@graphite-frontend/assets/icon-16px-solid/boolean-subtract-back.svg";
import BooleanSubtractFront from "@graphite-frontend/assets/icon-16px-solid/boolean-subtract-front.svg";
@@ -171,6 +172,7 @@ const SOLID_16PX = {
AlignVerticalCenter: { svg: AlignVerticalCenter, size: 16 },
Artboard: { svg: Artboard, size: 16 },
BooleanDifference: { svg: BooleanDifference, size: 16 },
BooleanDivide: { svg: BooleanDivide, size: 16 },
BooleanIntersect: { svg: BooleanIntersect, size: 16 },
BooleanSubtractBack: { svg: BooleanSubtractBack, size: 16 },
BooleanSubtractFront: { svg: BooleanSubtractFront, size: 16 },