Add free draw mode (#1570)

This commit is contained in:
Kostas Bariotis 2020-05-12 20:10:11 +01:00 committed by GitHub
parent 36e0c439fb
commit 9ec43d2626
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 344 additions and 49 deletions

View file

@ -16,31 +16,44 @@ export const actionFinalize = register({
if (window.document.activeElement instanceof HTMLElement) {
window.document.activeElement.blur();
}
if (appState.multiElement) {
const multiPointElement = appState.multiElement
? appState.multiElement
: appState.editingElement?.type === "draw"
? appState.editingElement
: null;
if (multiPointElement) {
// pen and mouse have hover
if (appState.lastPointerDownWith !== "touch") {
const { points, lastCommittedPoint } = appState.multiElement;
if (
multiPointElement.type !== "draw" &&
appState.lastPointerDownWith !== "touch"
) {
const { points, lastCommittedPoint } = multiPointElement;
if (
!lastCommittedPoint ||
points[points.length - 1] !== lastCommittedPoint
) {
mutateElement(appState.multiElement, {
points: appState.multiElement.points.slice(0, -1),
mutateElement(multiPointElement, {
points: multiPointElement.points.slice(0, -1),
});
}
}
if (isInvisiblySmallElement(appState.multiElement)) {
if (isInvisiblySmallElement(multiPointElement)) {
newElements = newElements.slice(0, -1);
}
// If the multi point line closes the loop,
// set the last point to first point.
// This ensures that loop remains closed at different scales.
if (appState.multiElement.type === "line") {
if (isPathALoop(appState.multiElement.points)) {
const linePoints = appState.multiElement.points;
if (
multiPointElement.type === "line" ||
multiPointElement.type === "draw"
) {
if (isPathALoop(multiPointElement.points)) {
const linePoints = multiPointElement.points;
const firstPoint = linePoints[0];
mutateElement(appState.multiElement, {
mutateElement(multiPointElement, {
points: linePoints.map((point, i) =>
i === linePoints.length - 1
? ([firstPoint[0], firstPoint[1]] as const)
@ -51,10 +64,10 @@ export const actionFinalize = register({
}
if (!appState.elementLocked) {
appState.selectedElementIds[appState.multiElement.id] = true;
appState.selectedElementIds[multiPointElement.id] = true;
}
}
if (!appState.elementLocked || !appState.multiElement) {
if (!appState.elementLocked || !multiPointElement) {
resetCursor();
}
return {
@ -62,13 +75,19 @@ export const actionFinalize = register({
appState: {
...appState,
elementType:
appState.elementLocked && appState.multiElement
appState.elementLocked && multiPointElement
? appState.elementType
: "selection",
draggingElement: null,
multiElement: null,
editingElement: null,
selectedElementIds: {},
selectedElementIds:
multiPointElement && !appState.elementLocked
? {
...appState.selectedElementIds,
[multiPointElement.id]: true,
}
: appState.selectedElementIds,
},
commitToHistory: false,
};