feat: Support hyperlinks 🔥 (#4620)

* feat: Support hypelinks

* dont show edit when link not present

* auto submit on blur

* Add link button in sidebar and do it react way

* add key to hyperlink to remount when element selection changes

* autofocus input

* remove click handler and use pointerup/down to show /hide popup

* add keydown and support enter/escape to submit

* show extrrnal link icon when element has link

* use icons and open link in new tab

* dnt submit unless link updated

* renamed ffiles

* remove unnecessary changes

* update snap

* hide link popup once user starts interacting with element and show again only if clicked outside and clicked on element again

* render link icon outside the element

* fix hit testing

* rewrite implementation to render hyperlinks outside elements and hide when element selected

* remove

* remove

* tweak icon position and size

* rotate link icon when element rotated, handle zooming and render exactly where ne resize handle is rendered

* no need to create a new reference anymore for element when link added/updated

* rotate the link image as well when rotating element

* calculate hitbox of link icon and show pointer when hovering over link icon

* open link when clicked on link icon

* show tooltip when hovering over link icon

* show link action only when single element selected

* support other protocols

* add shortcut cmd/ctrl+k to edit/update link

* don't hide popup after submit

* renderes decreased woo

* Add context mneu label to add/edit link

* fix tests

* remove tick and show trash when in edit mode

* show edit view when element contains link

* fix snap

* horizontally center the hyperlink container with respect to elemnt

* fix padding

* remove checkcircle

* show popup on hover of selected element and dismiss when outside hitbox

* check if element has link before setting popup state

* move logic of auto hide to hyperlink and dnt hide when editing

* hide popover when drag/resize/rotate

* unmount during autohide

* autohide after 500ms

* fix regression

* prevent cmd/ctrl+k when inside link editor

* submit when input not updated

* allow custom urls

* fix centering of popup when zoomed

* fix hitbox during zoom

* fix

* tweak link normalization

* touch hyperlink tooltip DOM only if needed

* consider 0 if no offsetY

* reduce hitbox of link icon and make sure link icon doesn't show on top of higher z-index elements

* show link tooltip only if element has higher z-index

* dnt show hyperlink popup when selection changes from element with link to element with no link and also hide popover when element type changes from selection to something else

* lint: EOL

* fix link icon tooltip positioning

* open the link only when last pointer down and last pointer up hit the link hitbox

* render tooltip after 300ms delay

* ensure link popup and editor input have same height

* wip: cache the link icon canvas

* fix the image quality after caching using device pixel ratio yay

* some cleanup

* remove unused selectedElementIds from renderConfig

* Update src/renderer/renderElement.ts

* fix `opener` vulnerability

* tweak styling

* decrease padding

* open local links in the same tab

* fix caching

* code style refactor

* remove unnecessary save & restore

* show link shortcut in help dialog

* submit on cmd/ctrl+k

* merge state props

* Add title for link

* update editview if prop changes

* tweak link action logic

* make `Hyperlink` compo editor state fully controlled

* dont show popup when context menu open

* show in contextMenu only for single selection & change pos

* set button `selected` state

* set contextMenuOpen on pointerdown

* set contextMenyOpen to false when action triggered

* don't render link icons on export

* fix tests

* fix buttons wrap

* move focus states to input top-level rule

* fix elements sharing `Hyperlink` state

* fix hitbox for link icon in case of rect

* Early return if hitting link icon

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Aakansha Doshi 2022-02-03 20:34:59 +05:30 committed by GitHub
parent 59cbf5fde5
commit f47ddb988f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 1396 additions and 79 deletions

View file

@ -64,6 +64,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -89,6 +90,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -143,6 +145,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -232,6 +235,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -257,6 +261,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -284,6 +289,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -338,6 +344,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -376,6 +383,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -400,6 +408,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -438,6 +447,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -462,6 +472,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -551,6 +562,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -576,6 +588,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -603,6 +616,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -657,6 +671,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -695,6 +710,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -719,6 +735,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -757,6 +774,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -781,6 +799,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -870,6 +889,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -895,6 +915,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
@ -949,6 +970,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
@ -1036,6 +1058,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -1061,6 +1084,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": true,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -1115,6 +1139,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -1151,6 +1176,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": true,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -1240,6 +1266,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -1265,6 +1292,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -1292,6 +1320,7 @@ Object {
"height": 20,
"id": "id0_copy",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -1346,6 +1375,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -1384,6 +1414,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -1408,6 +1439,7 @@ Object {
"height": 20,
"id": "id0_copy",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -1503,6 +1535,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -1530,6 +1563,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -1559,6 +1593,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -1613,6 +1648,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -1651,6 +1687,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -1675,6 +1712,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -1719,6 +1757,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -1745,6 +1784,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -1834,6 +1874,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -1859,6 +1900,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 60,
"roughness": 2,
"seed": 1278240551,
@ -1886,6 +1928,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 60,
"roughness": 2,
"seed": 400692809,
@ -1940,6 +1983,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -1978,6 +2022,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -2002,6 +2047,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -2040,6 +2086,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -2064,6 +2111,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -2102,6 +2150,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -2126,6 +2175,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -2164,6 +2214,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -2188,6 +2239,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -2226,6 +2278,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -2250,6 +2303,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -2288,6 +2342,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -2312,6 +2367,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -2350,6 +2406,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -2374,6 +2431,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 2,
"seed": 400692809,
@ -2412,6 +2470,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -2436,6 +2495,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 60,
"roughness": 2,
"seed": 400692809,
@ -2474,6 +2534,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 60,
"roughness": 2,
"seed": 1278240551,
@ -2498,6 +2559,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 60,
"roughness": 2,
"seed": 400692809,
@ -2587,6 +2649,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -2612,6 +2675,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -2639,6 +2703,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -2693,6 +2758,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -2731,6 +2797,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -2755,6 +2822,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -2793,6 +2861,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -2817,6 +2886,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -2906,6 +2976,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -2931,6 +3002,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -2958,6 +3030,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -3012,6 +3085,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -3050,6 +3124,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -3074,6 +3149,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -3112,6 +3188,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -3136,6 +3213,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -3229,6 +3307,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -3254,6 +3333,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
@ -3281,6 +3361,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 401146281,
@ -3335,6 +3416,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
@ -3373,6 +3455,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
@ -3397,6 +3480,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 401146281,
@ -3441,6 +3525,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
@ -3467,6 +3552,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 401146281,
@ -3507,6 +3593,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
@ -3531,6 +3618,7 @@ Object {
"height": 20,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 401146281,
@ -3626,6 +3714,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -3651,6 +3740,7 @@ Object {
"height": 10,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -3678,6 +3768,7 @@ Object {
"height": 10,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -3732,6 +3823,7 @@ Object {
"height": 10,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -3770,6 +3862,7 @@ Object {
"height": 10,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -3794,6 +3887,7 @@ Object {
"height": 10,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 453191,
@ -3891,6 +3985,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -3918,6 +4013,7 @@ Object {
"height": 10,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
@ -3947,6 +4043,7 @@ Object {
"height": 10,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 401146281,
@ -4001,6 +4098,7 @@ Object {
"height": 10,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
@ -4039,6 +4137,7 @@ Object {
"height": 10,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
@ -4063,6 +4162,7 @@ Object {
"height": 10,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 401146281,
@ -4108,6 +4208,7 @@ Object {
"height": 10,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
@ -4134,6 +4235,7 @@ Object {
"height": 10,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 401146281,
@ -4221,6 +4323,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -4324,6 +4427,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -4403,6 +4507,7 @@ Object {
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
"startBoundElement": null,
"suggestedBindings": Array [],
@ -4428,6 +4533,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -4455,6 +4561,7 @@ Object {
"height": 200,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 337897,
@ -4482,6 +4589,7 @@ Object {
"height": 200,
"id": "id1",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,
@ -4536,6 +4644,7 @@ Object {
"height": 20,
"id": "id0",
"isDeleted": false,
"link": null,
"opacity": 100,
"roughness": 1,
"seed": 1278240551,