mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
feat: improved freedraw (#3512)
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
parent
198800136e
commit
49c6bdd520
66 changed files with 786 additions and 247 deletions
|
@ -6280,7 +6280,7 @@ Object {
|
|||
"editingGroupId": null,
|
||||
"editingLinearElement": null,
|
||||
"elementLocked": false,
|
||||
"elementType": "draw",
|
||||
"elementType": "freedraw",
|
||||
"errorMessage": null,
|
||||
"exportBackground": true,
|
||||
"exportEmbedScene": false,
|
||||
|
@ -6596,8 +6596,6 @@ Object {
|
|||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
"boundElementIds": null,
|
||||
"endArrowhead": null,
|
||||
"endBinding": null,
|
||||
"fillStyle": "hachure",
|
||||
"groupIds": Array [],
|
||||
"height": 10,
|
||||
|
@ -6614,18 +6612,26 @@ Object {
|
|||
50,
|
||||
10,
|
||||
],
|
||||
Array [
|
||||
50,
|
||||
10,
|
||||
],
|
||||
],
|
||||
"pressures": Array [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"roughness": 1,
|
||||
"seed": 941653321,
|
||||
"startArrowhead": null,
|
||||
"startBinding": null,
|
||||
"simulatePressure": false,
|
||||
"strokeColor": "#000000",
|
||||
"strokeSharpness": "round",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 1,
|
||||
"type": "draw",
|
||||
"version": 3,
|
||||
"versionNonce": 1402203177,
|
||||
"type": "freedraw",
|
||||
"version": 4,
|
||||
"versionNonce": 1359939303,
|
||||
"width": 50,
|
||||
"x": 550,
|
||||
"y": -10,
|
||||
|
@ -8246,8 +8252,6 @@ Object {
|
|||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
"boundElementIds": null,
|
||||
"endArrowhead": null,
|
||||
"endBinding": null,
|
||||
"fillStyle": "hachure",
|
||||
"groupIds": Array [],
|
||||
"height": 10,
|
||||
|
@ -8264,18 +8268,26 @@ Object {
|
|||
50,
|
||||
10,
|
||||
],
|
||||
Array [
|
||||
50,
|
||||
10,
|
||||
],
|
||||
],
|
||||
"pressures": Array [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"roughness": 1,
|
||||
"seed": 941653321,
|
||||
"startArrowhead": null,
|
||||
"startBinding": null,
|
||||
"simulatePressure": false,
|
||||
"strokeColor": "#000000",
|
||||
"strokeSharpness": "round",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 1,
|
||||
"type": "draw",
|
||||
"version": 3,
|
||||
"versionNonce": 1402203177,
|
||||
"type": "freedraw",
|
||||
"version": 4,
|
||||
"versionNonce": 1359939303,
|
||||
"width": 50,
|
||||
"x": 550,
|
||||
"y": -10,
|
||||
|
@ -10355,7 +10367,7 @@ exports[`regression tests key 6 selects line tool: [end of test] number of eleme
|
|||
|
||||
exports[`regression tests key 6 selects line tool: [end of test] number of renders 1`] = `8`;
|
||||
|
||||
exports[`regression tests key 7 selects draw tool: [end of test] appState 1`] = `
|
||||
exports[`regression tests key 7 selects freedraw tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
"collaborators": Map {},
|
||||
"currentChartType": "bar",
|
||||
|
@ -10379,7 +10391,7 @@ Object {
|
|||
"editingGroupId": null,
|
||||
"editingLinearElement": null,
|
||||
"elementLocked": false,
|
||||
"elementType": "draw",
|
||||
"elementType": "freedraw",
|
||||
"errorMessage": null,
|
||||
"exportBackground": true,
|
||||
"exportEmbedScene": false,
|
||||
|
@ -10434,13 +10446,11 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests key 7 selects draw tool: [end of test] element 0 1`] = `
|
||||
exports[`regression tests key 7 selects freedraw tool: [end of test] element 0 1`] = `
|
||||
Object {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
"boundElementIds": null,
|
||||
"endArrowhead": null,
|
||||
"endBinding": null,
|
||||
"fillStyle": "hachure",
|
||||
"groupIds": Array [],
|
||||
"height": 10,
|
||||
|
@ -10457,25 +10467,33 @@ Object {
|
|||
10,
|
||||
10,
|
||||
],
|
||||
Array [
|
||||
10,
|
||||
10,
|
||||
],
|
||||
],
|
||||
"pressures": Array [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"roughness": 1,
|
||||
"seed": 337897,
|
||||
"startArrowhead": null,
|
||||
"startBinding": null,
|
||||
"simulatePressure": false,
|
||||
"strokeColor": "#000000",
|
||||
"strokeSharpness": "round",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 1,
|
||||
"type": "draw",
|
||||
"version": 3,
|
||||
"versionNonce": 449462985,
|
||||
"type": "freedraw",
|
||||
"version": 4,
|
||||
"versionNonce": 453191,
|
||||
"width": 10,
|
||||
"x": 10,
|
||||
"y": 10,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests key 7 selects draw tool: [end of test] history 1`] = `
|
||||
exports[`regression tests key 7 selects freedraw tool: [end of test] history 1`] = `
|
||||
Object {
|
||||
"recording": false,
|
||||
"redoStack": Array [],
|
||||
|
@ -10505,8 +10523,6 @@ Object {
|
|||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
"boundElementIds": null,
|
||||
"endArrowhead": null,
|
||||
"endBinding": null,
|
||||
"fillStyle": "hachure",
|
||||
"groupIds": Array [],
|
||||
"height": 10,
|
||||
|
@ -10523,18 +10539,26 @@ Object {
|
|||
10,
|
||||
10,
|
||||
],
|
||||
Array [
|
||||
10,
|
||||
10,
|
||||
],
|
||||
],
|
||||
"pressures": Array [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"roughness": 1,
|
||||
"seed": 337897,
|
||||
"startArrowhead": null,
|
||||
"startBinding": null,
|
||||
"simulatePressure": false,
|
||||
"strokeColor": "#000000",
|
||||
"strokeSharpness": "round",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 1,
|
||||
"type": "draw",
|
||||
"version": 3,
|
||||
"versionNonce": 449462985,
|
||||
"type": "freedraw",
|
||||
"version": 4,
|
||||
"versionNonce": 453191,
|
||||
"width": 10,
|
||||
"x": 10,
|
||||
"y": 10,
|
||||
|
@ -10545,9 +10569,9 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests key 7 selects draw tool: [end of test] number of elements 1`] = `1`;
|
||||
exports[`regression tests key 7 selects freedraw tool: [end of test] number of elements 1`] = `1`;
|
||||
|
||||
exports[`regression tests key 7 selects draw tool: [end of test] number of renders 1`] = `8`;
|
||||
exports[`regression tests key 7 selects freedraw tool: [end of test] number of renders 1`] = `8`;
|
||||
|
||||
exports[`regression tests key a selects arrow tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
|
@ -11429,7 +11453,7 @@ exports[`regression tests key r selects rectangle tool: [end of test] number of
|
|||
|
||||
exports[`regression tests key r selects rectangle tool: [end of test] number of renders 1`] = `8`;
|
||||
|
||||
exports[`regression tests key x selects draw tool: [end of test] appState 1`] = `
|
||||
exports[`regression tests key x selects freedraw tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
"collaborators": Map {},
|
||||
"currentChartType": "bar",
|
||||
|
@ -11453,7 +11477,7 @@ Object {
|
|||
"editingGroupId": null,
|
||||
"editingLinearElement": null,
|
||||
"elementLocked": false,
|
||||
"elementType": "draw",
|
||||
"elementType": "freedraw",
|
||||
"errorMessage": null,
|
||||
"exportBackground": true,
|
||||
"exportEmbedScene": false,
|
||||
|
@ -11508,13 +11532,11 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests key x selects draw tool: [end of test] element 0 1`] = `
|
||||
exports[`regression tests key x selects freedraw tool: [end of test] element 0 1`] = `
|
||||
Object {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
"boundElementIds": null,
|
||||
"endArrowhead": null,
|
||||
"endBinding": null,
|
||||
"fillStyle": "hachure",
|
||||
"groupIds": Array [],
|
||||
"height": 10,
|
||||
|
@ -11531,25 +11553,33 @@ Object {
|
|||
10,
|
||||
10,
|
||||
],
|
||||
Array [
|
||||
10,
|
||||
10,
|
||||
],
|
||||
],
|
||||
"pressures": Array [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"roughness": 1,
|
||||
"seed": 337897,
|
||||
"startArrowhead": null,
|
||||
"startBinding": null,
|
||||
"simulatePressure": false,
|
||||
"strokeColor": "#000000",
|
||||
"strokeSharpness": "round",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 1,
|
||||
"type": "draw",
|
||||
"version": 3,
|
||||
"versionNonce": 449462985,
|
||||
"type": "freedraw",
|
||||
"version": 4,
|
||||
"versionNonce": 453191,
|
||||
"width": 10,
|
||||
"x": 10,
|
||||
"y": 10,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests key x selects draw tool: [end of test] history 1`] = `
|
||||
exports[`regression tests key x selects freedraw tool: [end of test] history 1`] = `
|
||||
Object {
|
||||
"recording": false,
|
||||
"redoStack": Array [],
|
||||
|
@ -11579,8 +11609,6 @@ Object {
|
|||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
"boundElementIds": null,
|
||||
"endArrowhead": null,
|
||||
"endBinding": null,
|
||||
"fillStyle": "hachure",
|
||||
"groupIds": Array [],
|
||||
"height": 10,
|
||||
|
@ -11597,18 +11625,26 @@ Object {
|
|||
10,
|
||||
10,
|
||||
],
|
||||
Array [
|
||||
10,
|
||||
10,
|
||||
],
|
||||
],
|
||||
"pressures": Array [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"roughness": 1,
|
||||
"seed": 337897,
|
||||
"startArrowhead": null,
|
||||
"startBinding": null,
|
||||
"simulatePressure": false,
|
||||
"strokeColor": "#000000",
|
||||
"strokeSharpness": "round",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 1,
|
||||
"type": "draw",
|
||||
"version": 3,
|
||||
"versionNonce": 449462985,
|
||||
"type": "freedraw",
|
||||
"version": 4,
|
||||
"versionNonce": 453191,
|
||||
"width": 10,
|
||||
"x": 10,
|
||||
"y": 10,
|
||||
|
@ -11619,9 +11655,9 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests key x selects draw tool: [end of test] number of elements 1`] = `1`;
|
||||
exports[`regression tests key x selects freedraw tool: [end of test] number of elements 1`] = `1`;
|
||||
|
||||
exports[`regression tests key x selects draw tool: [end of test] number of renders 1`] = `8`;
|
||||
exports[`regression tests key x selects freedraw tool: [end of test] number of renders 1`] = `8`;
|
||||
|
||||
exports[`regression tests make a group and duplicate it: [end of test] appState 1`] = `
|
||||
Object {
|
||||
|
|
|
@ -71,7 +71,7 @@ const createAndSelectOneLine = (angle: number = 0) => {
|
|||
};
|
||||
|
||||
const createAndReturnOneDraw = (angle: number = 0) => {
|
||||
return UI.createElement("draw", {
|
||||
return UI.createElement("freedraw", {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 50,
|
||||
|
|
|
@ -3,6 +3,7 @@ import {
|
|||
ExcalidrawGenericElement,
|
||||
ExcalidrawTextElement,
|
||||
ExcalidrawLinearElement,
|
||||
ExcalidrawFreeDrawElement,
|
||||
} from "../../element/types";
|
||||
import { newElement, newTextElement, newLinearElement } from "../../element";
|
||||
import { DEFAULT_VERTICAL_ALIGN } from "../../constants";
|
||||
|
@ -12,6 +13,7 @@ import fs from "fs";
|
|||
import util from "util";
|
||||
import path from "path";
|
||||
import { getMimeType } from "../../data/blob";
|
||||
import { newFreeDrawElement } from "../../element/newElement";
|
||||
|
||||
const readFile = util.promisify(fs.readFile);
|
||||
|
||||
|
@ -81,8 +83,10 @@ export class API {
|
|||
verticalAlign?: T extends "text"
|
||||
? ExcalidrawTextElement["verticalAlign"]
|
||||
: never;
|
||||
}): T extends "arrow" | "line" | "draw"
|
||||
}): T extends "arrow" | "line"
|
||||
? ExcalidrawLinearElement
|
||||
: T extends "freedraw"
|
||||
? ExcalidrawFreeDrawElement
|
||||
: T extends "text"
|
||||
? ExcalidrawTextElement
|
||||
: ExcalidrawGenericElement => {
|
||||
|
@ -125,11 +129,17 @@ export class API {
|
|||
verticalAlign: rest.verticalAlign ?? DEFAULT_VERTICAL_ALIGN,
|
||||
});
|
||||
break;
|
||||
case "freedraw":
|
||||
element = newFreeDrawElement({
|
||||
type: type as "freedraw",
|
||||
simulatePressure: true,
|
||||
...base,
|
||||
});
|
||||
break;
|
||||
case "arrow":
|
||||
case "line":
|
||||
case "draw":
|
||||
element = newLinearElement({
|
||||
type: type as "arrow" | "line" | "draw",
|
||||
type: type as "arrow" | "line",
|
||||
startArrowhead: null,
|
||||
endArrowhead: null,
|
||||
...base,
|
||||
|
|
|
@ -213,14 +213,14 @@ export class UI {
|
|||
height?: number;
|
||||
angle?: number;
|
||||
} = {},
|
||||
): (T extends "arrow" | "line" | "draw"
|
||||
): (T extends "arrow" | "line" | "freedraw"
|
||||
? ExcalidrawLinearElement
|
||||
: T extends "text"
|
||||
? ExcalidrawTextElement
|
||||
: ExcalidrawElement) & {
|
||||
/** Returns the actual, current element from the elements array, instead
|
||||
of the proxy */
|
||||
get(): T extends "arrow" | "line" | "draw"
|
||||
get(): T extends "arrow" | "line" | "freedraw"
|
||||
? ExcalidrawLinearElement
|
||||
: T extends "text"
|
||||
? ExcalidrawTextElement
|
||||
|
|
|
@ -7,7 +7,7 @@ const toolMap = {
|
|||
ellipse: "ellipse",
|
||||
arrow: "arrow",
|
||||
line: "line",
|
||||
draw: "draw",
|
||||
freedraw: "freedraw",
|
||||
text: "text",
|
||||
};
|
||||
|
||||
|
|
|
@ -106,7 +106,7 @@ describe("regression tests", () => {
|
|||
mouse.click(30, 10);
|
||||
Keyboard.keyPress(KEYS.ENTER);
|
||||
|
||||
UI.clickTool("draw");
|
||||
UI.clickTool("freedraw");
|
||||
mouse.down(40, -20);
|
||||
mouse.up(50, 10);
|
||||
|
||||
|
@ -118,7 +118,7 @@ describe("regression tests", () => {
|
|||
"line",
|
||||
"arrow",
|
||||
"line",
|
||||
"draw",
|
||||
"freedraw",
|
||||
]);
|
||||
});
|
||||
|
||||
|
@ -146,7 +146,7 @@ describe("regression tests", () => {
|
|||
[`4${KEYS.E}`, "ellipse", true],
|
||||
[`5${KEYS.A}`, "arrow", true],
|
||||
[`6${KEYS.L}`, "line", true],
|
||||
[`7${KEYS.X}`, "draw", false],
|
||||
[`7${KEYS.X}`, "freedraw", false],
|
||||
] as [string, ExcalidrawElement["type"], boolean][]) {
|
||||
for (const key of keys) {
|
||||
it(`key ${key} selects ${shape} tool`, () => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue