smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: better default radius sizes for rectangles (#5553)

Browse source 
Co-authored-by: Ryan <diweihao@bytedance.com>
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Ryan Di 2022-12-08 23:48:49 +08:00 • committed by GitHub
parent 65d84a5d5a
commit 5854ac3eed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
39 changed files with 1861 additions and 818 deletions
Download patch file Download diff file Expand all files Collapse all files

431
src/tests/__snapshots__/contextmenu.test.tsx.snap
View file

File diff suppressed because it is too large Load diff

20
src/tests/__snapshots__/dragCreate.test.tsx.snap
View file

@ -29,11 +29,13 @@ Object {
],
],
"roughness": 1,
"roundness": Object {
"type": 2,
},
"seed": 337897,
"startArrowhead": null,
"startBinding": null,
"strokeColor": "#000000",
"strokeSharpness": "round",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "arrow",
@ -62,9 +64,11 @@ Object {
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": Object {
"type": 2,
},
"seed": 337897,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "diamond",
@ -93,9 +97,11 @@ Object {
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": Object {
"type": 2,
},
"seed": 337897,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "ellipse",
@ -135,11 +141,13 @@ Object {
],
],
"roughness": 1,
"roundness": Object {
"type": 2,
},
"seed": 337897,
"startArrowhead": null,
"startBinding": null,
"strokeColor": "#000000",
"strokeSharpness": "round",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "line",
@ -168,9 +176,11 @@ Object {
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": Object {
"type": 3,
},
"seed": 337897,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",

24
src/tests/__snapshots__/move.test.tsx.snap
View file

@ -14,9 +14,11 @@ Object {
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": Object {
"type": 3,
},
"seed": 401146281,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
@ -43,9 +45,11 @@ Object {
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": Object {
"type": 3,
},
"seed": 337897,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
@ -72,9 +76,11 @@ Object {
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": Object {
"type": 3,
},
"seed": 337897,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
@ -106,9 +112,11 @@ Object {
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": Object {
"type": 3,
},
"seed": 337897,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
@ -140,9 +148,11 @@ Object {
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": Object {
"type": 3,
},
"seed": 449462985,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
@ -186,6 +196,9 @@ Object {
],
],
"roughness": 1,
"roundness": Object {
"type": 2,
},
"seed": 401146281,
"startArrowhead": null,
"startBinding": Object {
@ -194,7 +207,6 @@ Object {
"gap": 10,
},
"strokeColor": "#000000",
"strokeSharpness": "round",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "line",

8
src/tests/__snapshots__/multiPointCreate.test.tsx.snap
View file

@ -34,11 +34,13 @@ Object {
],
],
"roughness": 1,
"roundness": Object {
"type": 2,
},
"seed": 337897,
"startArrowhead": null,
"startBinding": null,
"strokeColor": "#000000",
"strokeSharpness": "round",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "arrow",
@ -85,11 +87,13 @@ Object {
],
],
"roughness": 1,
"roundness": Object {
"type": 2,
},
"seed": 337897,
"startArrowhead": null,
"startBinding": null,
"strokeColor": "#000000",
"strokeSharpness": "round",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "line",

1651
src/tests/__snapshots__/regressionTests.test.tsx.snap
View file

File diff suppressed because it is too large Load diff

20
src/tests/__snapshots__/selection.test.tsx.snap
View file

@ -27,11 +27,13 @@ Object {
],
],
"roughness": 1,
"roundness": Object {
"type": 2,
},
"seed": 337897,
"startArrowhead": null,
"startBinding": null,
"strokeColor": "#000000",
"strokeSharpness": "round",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "arrow",
@ -71,11 +73,13 @@ Object {
],
],
"roughness": 1,
"roundness": Object {
"type": 2,
},
"seed": 337897,
"startArrowhead": null,
"startBinding": null,
"strokeColor": "#000000",
"strokeSharpness": "round",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "line",
@ -102,9 +106,11 @@ Object {
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": Object {
"type": 2,
},
"seed": 337897,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "diamond",
@ -131,9 +137,11 @@ Object {
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": Object {
"type": 2,
},
"seed": 337897,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "ellipse",
@ -160,9 +168,11 @@ Object {
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": Object {
"type": 3,
},
"seed": 337897,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",

36
src/tests/data/__snapshots__/restore.test.ts.snap
View file

@ -27,11 +27,13 @@ Object {
],
],
"roughness": 1,
"roundness": Object {
"type": 2,
},
"seed": Any<Number>,
"startArrowhead": null,
"startBinding": null,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "arrow",
@ -62,9 +64,11 @@ Object {
"locked": false,
"opacity": 10,
"roughness": 2,
"roundness": Object {
"type": 3,
},
"seed": Any<Number>,
"strokeColor": "red",
"strokeSharpness": "round",
"strokeStyle": "dashed",
"strokeWidth": 2,
"type": "rectangle",
@ -95,9 +99,11 @@ Object {
"locked": false,
"opacity": 10,
"roughness": 2,
"roundness": Object {
"type": 3,
},
"seed": Any<Number>,
"strokeColor": "red",
"strokeSharpness": "round",
"strokeStyle": "dashed",
"strokeWidth": 2,
"type": "ellipse",
@ -128,9 +134,11 @@ Object {
"locked": false,
"opacity": 10,
"roughness": 2,
"roundness": Object {
"type": 3,
},
"seed": Any<Number>,
"strokeColor": "red",
"strokeSharpness": "round",
"strokeStyle": "dashed",
"strokeWidth": 2,
"type": "diamond",
@ -160,10 +168,12 @@ Object {
"points": Array [],
"pressures": Array [],
"roughness": 1,
"roundness": Object {
"type": 3,
},
"seed": Any<Number>,
"simulatePressure": true,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "freedraw",
@ -203,11 +213,13 @@ Object {
],
],
"roughness": 1,
"roundness": Object {
"type": 2,
},
"seed": Any<Number>,
"startArrowhead": null,
"startBinding": null,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "line",
@ -247,11 +259,13 @@ Object {
],
],
"roughness": 1,
"roundness": Object {
"type": 2,
},
"seed": Any<Number>,
"startArrowhead": null,
"startBinding": null,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "line",
@ -283,9 +297,11 @@ Object {
"opacity": 100,
"originalText": "text",
"roughness": 1,
"roundness": Object {
"type": 3,
},
"seed": Any<Number>,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"text": "text",
@ -320,9 +336,11 @@ Object {
"opacity": 100,
"originalText": "test",
"roughness": 1,
"roundness": Object {
"type": 3,
},
"seed": Any<Number>,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"text": "",

4
src/tests/data/restore.test.ts
View file

@ -10,7 +10,7 @@ import { API } from "../helpers/api";
import { getDefaultAppState } from "../../appState";
import { ImportedDataState } from "../../data/types";
import { NormalizedZoomValue } from "../../types";
import { FONT_FAMILY } from "../../constants";
import { FONT_FAMILY, ROUNDNESS } from "../../constants";
import { newElementWith } from "../../element/mutateElement";
const mockSizeHelper = jest.spyOn(sizeHelpers, "isInvisiblySmallElement");
@ -255,7 +255,7 @@ describe("restoreElements", () => {
width: 100,
height: 200,
groupIds: ["1", "2", "3"],
strokeSharpness: "round",
roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
});
elements.push(element);

2
src/tests/fixtures/elementFixture.ts vendored
View file

@ -15,7 +15,7 @@ const elementBase: Omit<ExcalidrawElement, "type"> = {
roughness: 1,
opacity: 100,
groupIds: [],
strokeSharpness: "sharp",
roundness: null,
seed: 1041657908,
version: 120,
versionNonce: 1188004276,

33
src/tests/helpers/api.ts
View file

@ -8,7 +8,7 @@ import {
FileId,
} from "../../element/types";
import { newElement, newTextElement, newLinearElement } from "../../element";
import { DEFAULT_VERTICAL_ALIGN } from "../../constants";
import { DEFAULT_VERTICAL_ALIGN, ROUNDNESS } from "../../constants";
import { getDefaultAppState } from "../../appState";
import { GlobalTestState, createEvent, fireEvent } from "../test-utils";
import fs from "fs";
@ -18,6 +18,7 @@ import { getMimeType } from "../../data/blob";
import { newFreeDrawElement, newImageElement } from "../../element/newElement";
import { Point } from "../../types";
import { getSelectedElements } from "../../scene/selection";
import { isLinearElementType } from "../../element/typeChecks";
const readFile = util.promisify(fs.readFile);
@ -89,7 +90,7 @@ export class API {
fillStyle?: ExcalidrawGenericElement["fillStyle"];
strokeWidth?: ExcalidrawGenericElement["strokeWidth"];
strokeStyle?: ExcalidrawGenericElement["strokeStyle"];
strokeSharpness?: ExcalidrawGenericElement["strokeSharpness"];
roundness?: ExcalidrawGenericElement["roundness"];
roughness?: ExcalidrawGenericElement["roughness"];
opacity?: ExcalidrawGenericElement["opacity"];
// text props
@ -125,7 +126,20 @@ export class API {
const appState = h?.state || getDefaultAppState();
const base = {
const base: Omit<
ExcalidrawGenericElement,
| "id"
| "width"
| "height"
| "type"
| "seed"
| "version"
| "versionNonce"
| "isDeleted"
| "groupIds"
| "link"
| "updated"
> = {
x,
y,
angle: rest.angle ?? 0,
@ -135,8 +149,17 @@ export class API {
fillStyle: rest.fillStyle ?? appState.currentItemFillStyle,
strokeWidth: rest.strokeWidth ?? appState.currentItemStrokeWidth,
strokeStyle: rest.strokeStyle ?? appState.currentItemStrokeStyle,
strokeSharpness:
rest.strokeSharpness ?? appState.currentItemStrokeSharpness,
roundness: (
rest.roundness === undefined
? appState.currentItemRoundness === "round"
: rest.roundness
)
? {
type: isLinearElementType(type)
? ROUNDNESS.PROPORTIONAL_RADIUS
: ROUNDNESS.ADAPTIVE_RADIUS,
}
: null,
roughness: rest.roughness ?? appState.currentItemRoughness,
opacity: rest.opacity ?? appState.currentItemOpacity,
boundElements: rest.boundElements ?? null,

41
src/tests/linearElementEditor.test.tsx
View file

@ -20,6 +20,7 @@ import { resize, rotate } from "./utils";
import { getBoundTextElementPosition, wrapText } from "../element/textElement";
import { getMaxContainerWidth } from "../element/newElement";
import * as textElementUtils from "../element/textElement";
import { ROUNDNESS } from "../constants";
const renderScene = jest.spyOn(Renderer, "renderScene");
@ -51,7 +52,7 @@ describe("Test Linear Elements", () => {
const createTwoPointerLinearElement = (
type: ExcalidrawLinearElement["type"],
strokeSharpness: ExcalidrawLinearElement["strokeSharpness"] = "sharp",
roundness: ExcalidrawElement["roundness"] = null,
roughness: ExcalidrawLinearElement["roughness"] = 0,
) => {
const line = API.createElement({
@ -65,7 +66,7 @@ describe("Test Linear Elements", () => {
[0, 0],
[p2[0] - p1[0], p2[1] - p1[1]],
],
strokeSharpness,
roundness,
});
h.elements = [line];
@ -75,7 +76,7 @@ describe("Test Linear Elements", () => {
const createThreePointerLinearElement = (
type: ExcalidrawLinearElement["type"],
strokeSharpness: ExcalidrawLinearElement["strokeSharpness"] = "sharp",
roundness: ExcalidrawElement["roundness"] = null,
roughness: ExcalidrawLinearElement["roughness"] = 0,
) => {
//dragging line from midpoint
@ -92,7 +93,7 @@ describe("Test Linear Elements", () => {
[p3[0], p3[1]],
[p2[0] - p1[0], p2[1] - p1[1]],
],
strokeSharpness,
roundness,
});
h.elements = [line];
mouse.clickAt(p1[0], p1[1]);
@ -286,7 +287,7 @@ describe("Test Linear Elements", () => {
`);
});
it("should update the midpoints when element sharpness changed", async () => {
it("should update the midpoints when element roundness changed", async () => {
createThreePointerLinearElement("line");
const line = h.elements[0] as ExcalidrawLinearElement;
@ -299,7 +300,7 @@ describe("Test Linear Elements", () => {
h.state,
);
// update sharpness
// update roundness
fireEvent.click(screen.getByTitle("Round"));
expect(renderScene).toHaveBeenCalledTimes(12);
@ -325,7 +326,9 @@ describe("Test Linear Elements", () => {
});
it("should update all the midpoints when element position changed", async () => {
createThreePointerLinearElement("line", "round");
createThreePointerLinearElement("line", {
type: ROUNDNESS.PROPORTIONAL_RADIUS,
});
const line = h.elements[0] as ExcalidrawLinearElement;
expect(line.points.length).toEqual(3);
@ -370,8 +373,8 @@ describe("Test Linear Elements", () => {
`);
});
describe("When edges are sharp", () => {
// This is the expected midpoint for line with sharp edge
describe("When edges are round", () => {
// This is the expected midpoint for line with round edge
// hence hardcoding it so if later some bug is introduced
// this will fail and we can fix it
const firstSegmentMidpoint: Point = [55, 45];
@ -525,7 +528,9 @@ describe("Test Linear Elements", () => {
let line: ExcalidrawLinearElement;
beforeEach(() => {
line = createThreePointerLinearElement("line", "round");
line = createThreePointerLinearElement("line", {
type: ROUNDNESS.PROPORTIONAL_RADIUS,
});
expect(line.points.length).toEqual(3);
enterLineEditingMode(line);
@ -768,7 +773,9 @@ describe("Test Linear Elements", () => {
});
it("should return correct position for arrow with odd points", () => {
createThreePointerLinearElement("arrow", "round");
createThreePointerLinearElement("arrow", {
type: ROUNDNESS.PROPORTIONAL_RADIUS,
});
const arrow = h.elements[0] as ExcalidrawLinearElement;
const { textElement, container } = createBoundTextElement(
DEFAULT_TEXT,
@ -788,7 +795,9 @@ describe("Test Linear Elements", () => {
});
it("should return correct position for arrow with even points", () => {
createThreePointerLinearElement("arrow", "round");
createThreePointerLinearElement("arrow", {
type: ROUNDNESS.PROPORTIONAL_RADIUS,
});
const arrow = h.elements[0] as ExcalidrawLinearElement;
const { textElement, container } = createBoundTextElement(
DEFAULT_TEXT,
@ -903,7 +912,9 @@ describe("Test Linear Elements", () => {
});
it("should not rotate the bound text and update position of bound text and bounding box correctly when arrow rotated", () => {
createThreePointerLinearElement("arrow", "round");
createThreePointerLinearElement("arrow", {
type: ROUNDNESS.PROPORTIONAL_RADIUS,
});
const arrow = h.elements[0] as ExcalidrawLinearElement;
@ -967,7 +978,9 @@ describe("Test Linear Elements", () => {
});
it("should resize and position the bound text and bounding box correctly when 3 pointer arrow element resized", () => {
createThreePointerLinearElement("arrow", "round");
createThreePointerLinearElement("arrow", {
type: ROUNDNESS.PROPORTIONAL_RADIUS,
});
const arrow = h.elements[0] as ExcalidrawLinearElement;

3
src/tests/packages/__snapshots__/utils.test.ts.snap
View file

@ -15,12 +15,11 @@ Object {
"currentItemFillStyle": "hachure",
"currentItemFontFamily": 1,
"currentItemFontSize": 20,
"currentItemLinearStrokeSharpness": "round",
"currentItemOpacity": 100,
"currentItemRoughness": 1,
"currentItemRoundness": "round",
"currentItemStartArrowhead": null,
"currentItemStrokeColor": "#000000",
"currentItemStrokeSharpness": "sharp",
"currentItemStrokeStyle": "solid",
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",

2
src/tests/scene/__snapshots__/export.test.ts.snap
View file

@ -95,7 +95,7 @@ exports[`exportToSvg with elements that have a link 1`] = `
exports[`exportToSvg with exportEmbedScene 1`] = `
"
<!-- svg-source:excalidraw -->
<!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1SPW/CMFx1MDAxMN35XHUwMDE1kbtcIpGk4aNstFRVpapcdTAwMWRcdTAwMTiQWnUw8YVYMbaxXHUwMDFkPoT477VccsRtxNpcclx1MDAwZpbu+b278907dKJcYpm9XHUwMDA0NI5cdTAwMTDscswoUXiLulx1MDAwZd+A0lRw+5T6WIta5Z5ZXHUwMDFhI8e9XHUwMDFlXHUwMDEzVlBcbm1OfGCwXHUwMDAybrRlfNk4ilx1MDAwZf62L5Q41Wau1lx1MDAxZpOiopyk63w1fJtOXj691JN2lpMlWVx1MDAxM+9d4fthXHUwMDEzbykxpcWSOG6wXHUwMDEy6LI0LVx1MDAxMPMlc21cdTAwMDZEXHUwMDFiJSp4XHUwMDEyTCjXyF3sTyi9wHm1VKLmJHCSPsaLXCJwXG7K2Mzs2WlcdTAwMDA4L2tcdTAwMDWoVWF+abGFNzot7ICDypZcXJZcdTAwMWO0/qNcdTAwMTFcdTAwMTLn1Oxbv3L9yVfip/vdzl9iJc95kHbBr85cdTAwMDCIT5Ulg/7wIVx1MDAxZTUvYb9JXHUwMDFht9F3wf2uk2Q0iuMsXHUwMDFkXHUwMDBlXHUwMDFhXHUwMDA21VO7auPTXHUwMDE2mGlcYnN0I3xcdTAwMGU24DVjzWMtXHQ+icJXXHUwMDE55VWbZ11VXcl9cSmheCU4QVx1MDAxZT92b0a7XHUwMDE57X+MXHUwMDA2jFGp4Ww0e/thICzlzNj8lnKyXHUwMDFk2lDYPl5ZbOGP03ubusWCa/Zw7Fx1MDAxY39cdTAwMDCLqmbvIn0=<!-- payload-end -->
<!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1SsW7CMFx1MDAxMN35iihdkUjSQChcdTAwMWItVVWpalx1MDAwN1x1MDAwNqRWXHUwMDFkTHxJrFx1MDAxONvEXHUwMDBlXHUwMDEwIf69tlx1MDAwM3GJXHUwMDE4O9aDpXt+7+58945cdTAwMDPP81UjwJ95Plx1MDAxY1JEXHSu0N5cdTAwMWZcdTAwMWF8XHUwMDA3lSSc6afIxpLXVWqZhVJiNlx1MDAxYVGuXHUwMDA1XHUwMDA1l6rlXHUwMDAzhVxyMCU140vHnne0t34h2Kh2q2r7Mc9KwnC0TTfJ22L+8mmllnTQnDiMu7gxhe+TLt5cdTAwMTOsXG6NhUHQYVx1MDAwNZC8UD1cdTAwMTCxnJo2XHUwMDFkXCJVxUt44pRXppG7wFx1MDAxZVd6jdIyr3jNsOOEY4TWmeNkhNKlamg7XHUwMDAwlFx1MDAxNnVcdTAwMDV+r8Lq0mJcdTAwMGbvdJLrXHUwMDAxO5UumVx1MDAxN1xmpLzScIFSoprer0x/4lx1MDAxNdvpfv/OwPA5XHUwMDAzqyl1hVx1MDAwMbDNXHUwMDEwh5Nx8lx1MDAxMEy7XHUwMDE3t9YwXG766DtndsVhOJ1cdTAwMDZBXHUwMDFjJZOOQeRCb1jZtFx1MDAxOaJcdTAwMTLc+ExcdTAwMTPPbvtXjdRcdTAwMDKjVuR+SFx0K/s8babyRu6LOTFBXHUwMDFizrBv8dPw31///vpTf1x1MDAwMaVESDj7S992XHUwMDA2Plx1MDAxMmKpdH5Nad3m71xi7Fx1MDAxZm/sM7PH6K07zT7BNHs8XHJOP7VXYMUifQ==<!-- payload-end -->
<defs>
<style class=\\"style-fonts\\">
@font-face {