fix: make arrow binding area adapt to zoom levels (#8927)

* make binding area adapt to zoom

* revert stroke color

* normalize binding gap

* reduce normalized gap
This commit is contained in:
Ryan Di 2024-12-23 05:55:50 +08:00 committed by GitHub
parent 873698a1a2
commit 1e3399eac8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 247 additions and 119 deletions

View file

@ -197,7 +197,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 99,
"height": 125,
"id": "id166",
"index": "a2",
"isDeleted": false,
@ -211,8 +211,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
"98.20800",
99,
125,
125,
],
],
"roughness": 1,
@ -226,9 +226,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 40,
"width": "98.20800",
"x": 1,
"version": 47,
"width": 125,
"x": 0,
"y": 0,
}
`;
@ -298,7 +298,7 @@ History {
"focus": "0.00990",
"gap": 1,
},
"height": "0.98017",
"height": "0.98000",
"points": [
[
0,
@ -306,7 +306,7 @@ History {
],
[
98,
"-0.98017",
"-0.98000",
],
],
"startBinding": {
@ -320,10 +320,10 @@ History {
"endBinding": {
"elementId": "id165",
"fixedPoint": null,
"focus": "-0.02000",
"focus": "-0.02040",
"gap": 1,
},
"height": "0.00169",
"height": "0.02000",
"points": [
[
0,
@ -331,13 +331,13 @@ History {
],
[
98,
"0.00169",
"0.02000",
],
],
"startBinding": {
"elementId": "id164",
"fixedPoint": null,
"focus": "0.02000",
"focus": "0.01959",
"gap": 1,
},
},
@ -393,18 +393,20 @@ History {
"focus": 0,
"gap": 1,
},
"height": 99,
"height": 125,
"points": [
[
0,
0,
],
[
"98.20800",
99,
125,
125,
],
],
"startBinding": null,
"width": 125,
"x": 0,
"y": 0,
},
"inserted": {
@ -414,7 +416,7 @@ History {
"focus": "0.00990",
"gap": 1,
},
"height": "0.98161",
"height": "0.98000",
"points": [
[
0,
@ -422,7 +424,7 @@ History {
],
[
98,
"-0.98161",
"-0.98000",
],
],
"startBinding": {
@ -431,7 +433,9 @@ History {
"focus": "0.02970",
"gap": 1,
},
"y": "0.99245",
"width": 98,
"x": 1,
"y": "0.99000",
},
},
"id169" => Delta {
@ -823,9 +827,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 30,
"width": 0,
"x": 200,
"version": 37,
"width": 100,
"x": 150,
"y": 0,
}
`;
@ -862,6 +866,8 @@ History {
0,
],
],
"width": 0,
"x": 149,
},
"inserted": {
"points": [
@ -870,10 +876,12 @@ History {
0,
],
[
100,
"98.00000",
0,
],
],
"width": "98.00000",
"x": "1.00000",
},
},
},
@ -930,6 +938,8 @@ History {
],
],
"startBinding": null,
"width": 100,
"x": 150,
},
"inserted": {
"endBinding": {
@ -954,6 +964,8 @@ History {
"focus": 0,
"gap": 1,
},
"width": 0,
"x": 149,
},
},
},
@ -2363,9 +2375,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 10,
"version": 12,
"width": 498,
"x": 1,
"x": "1.00000",
"y": 0,
}
`;
@ -2504,7 +2516,7 @@ History {
0,
],
[
100,
"98.00000",
0,
],
],
@ -2523,8 +2535,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": 100,
"x": 0,
"width": "98.00000",
"x": 1,
"y": 0,
},
"inserted": {
@ -15167,9 +15179,9 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 10,
"version": 12,
"width": "98.00000",
"x": 1,
"x": "1.00000",
"y": 0,
}
`;
@ -15208,7 +15220,7 @@ History {
0,
],
[
100,
"98.00000",
0,
],
],
@ -15221,7 +15233,7 @@ History {
0,
],
[
100,
"98.00000",
0,
],
],
@ -15517,7 +15529,7 @@ History {
0,
],
[
100,
"98.00000",
0,
],
],
@ -15536,8 +15548,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": 100,
"x": 0,
"width": "98.00000",
"x": 1,
"y": 0,
},
"inserted": {
@ -15866,9 +15878,9 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 10,
"version": 12,
"width": "98.00000",
"x": 1,
"x": "1.00000",
"y": 0,
}
`;
@ -16140,7 +16152,7 @@ History {
0,
],
[
100,
"98.00000",
0,
],
],
@ -16159,8 +16171,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": 100,
"x": 0,
"width": "98.00000",
"x": 1,
"y": 0,
},
"inserted": {
@ -16489,9 +16501,9 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 10,
"version": 12,
"width": "98.00000",
"x": 1,
"x": "1.00000",
"y": 0,
}
`;
@ -16763,7 +16775,7 @@ History {
0,
],
[
100,
"98.00000",
0,
],
],
@ -16782,8 +16794,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": 100,
"x": 0,
"width": "98.00000",
"x": 1,
"y": 0,
},
"inserted": {
@ -17110,9 +17122,9 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 10,
"version": 12,
"width": "98.00000",
"x": 1,
"x": "1.00000",
"y": 0,
}
`;
@ -17168,7 +17180,7 @@ History {
0,
],
[
100,
"98.00000",
0,
],
],
@ -17186,7 +17198,7 @@ History {
0,
],
[
100,
"98.00000",
0,
],
],
@ -17455,7 +17467,7 @@ History {
0,
],
[
100,
"98.00000",
0,
],
],
@ -17474,8 +17486,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": 100,
"x": 0,
"width": "98.00000",
"x": 1,
"y": 0,
},
"inserted": {
@ -17828,9 +17840,9 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 11,
"version": 13,
"width": "98.00000",
"x": 1,
"x": "1.00000",
"y": 0,
}
`;
@ -17901,7 +17913,7 @@ History {
0,
],
[
100,
"98.00000",
0,
],
],
@ -17920,7 +17932,7 @@ History {
0,
],
[
100,
"98.00000",
0,
],
],
@ -18189,7 +18201,7 @@ History {
0,
],
[
100,
"98.00000",
0,
],
],
@ -18208,8 +18220,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": 100,
"x": 0,
"width": "98.00000",
"x": 1,
"y": 0,
},
"inserted": {

View file

@ -173,7 +173,7 @@ exports[`move element > rectangles with binding arrow 6`] = `
"type": "rectangle",
"updated": 1,
"version": 7,
"versionNonce": 745419401,
"versionNonce": 2066753033,
"width": 300,
"x": 201,
"y": 2,
@ -232,8 +232,8 @@ exports[`move element > rectangles with binding arrow 7`] = `
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 11,
"versionNonce": 1996028265,
"version": 15,
"versionNonce": 271613161,
"width": 81,
"x": 110,
"y": 50,

View file

@ -4785,21 +4785,17 @@ describe("history", () => {
expect.objectContaining({ id: rect2.id, boundElements: [] }),
expect.objectContaining({
id: arrowId,
points: [
[0, 0],
[100, 0],
],
startBinding: expect.objectContaining({
elementId: rect1.id,
fixedPoint: null,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
focus: 0,
gap: 1,
}),
endBinding: expect.objectContaining({
elementId: rect2.id,
fixedPoint: null,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
focus: 0,
gap: 1,
}),
isDeleted: true,
}),