Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove unused props from default templates and save requests #13221

Merged
merged 32 commits into from
May 11, 2023

Conversation

ayushnirwal
Copy link
Contributor

@ayushnirwal ayushnirwal commented Apr 18, 2023

Context

Summary

  • Removes current, selection and story props from default template.
  • Updates getStoryPropsToSave to ignore basedOn property in elements.
  • Updates type StorySaveData.
  • Adds migration for removing basedOn property.

Relevant Technical Choices

To-do

  • Use selected element list to derive offset for staggering effect.
    • Update related tests.
  • remove basedOn from the types.
  • changegetStroryPropsToSave to not delete basedOn attribute.

User-facing changes

Testing Instructions

  • This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

Reviews

Does this PR have a security-related impact?

Does this PR change what data or activity we track or use?

Does this PR have a legal-related impact?

Checklist

  • This PR addresses an existing issue and I have linked this PR to it in ZenHub
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #12262

@ayushnirwal ayushnirwal changed the title remove current and selection from default templates and remove basedOn prop remove current and selection props from default templates and remove basedOn prop from save requests Apr 18, 2023
@ayushnirwal ayushnirwal changed the title remove current and selection props from default templates and remove basedOn prop from save requests Remove unused props from default templates and remove basedOn prop from save requests Apr 18, 2023
@ayushnirwal ayushnirwal marked this pull request as ready for review April 20, 2023 04:14
@github-actions
Copy link
Contributor

github-actions bot commented Apr 20, 2023

Size Change: -23.4 kB (-1%)

Total Size: 2.71 MB

Filename Size Change
assets/js/chunk-web-stories-template-0.js 11 kB -392 B (-3%)
assets/js/chunk-web-stories-template-1.js 9.27 kB -299 B (-3%)
assets/js/chunk-web-stories-template-10.js 7.23 kB -102 B (-1%)
assets/js/chunk-web-stories-template-11.js 8.87 kB -145 B (-2%)
assets/js/chunk-web-stories-template-12.js 8.67 kB -987 B (-10%) 👏
assets/js/chunk-web-stories-template-13.js 6.9 kB -445 B (-6%)
assets/js/chunk-web-stories-template-15.js 8.77 kB -218 B (-2%)
assets/js/chunk-web-stories-template-16.js 10.5 kB -269 B (-2%)
assets/js/chunk-web-stories-template-17.js 9.05 kB -116 B (-1%)
assets/js/chunk-web-stories-template-18.js 9.31 kB -538 B (-5%)
assets/js/chunk-web-stories-template-19.js 9.17 kB -242 B (-3%)
assets/js/chunk-web-stories-template-2.js 9.02 kB -211 B (-2%)
assets/js/chunk-web-stories-template-20.js 8.72 kB -236 B (-3%)
assets/js/chunk-web-stories-template-21.js 9.48 kB -345 B (-4%)
assets/js/chunk-web-stories-template-22.js 7.44 kB -333 B (-4%)
assets/js/chunk-web-stories-template-23.js 6.95 kB -475 B (-6%)
assets/js/chunk-web-stories-template-24.js 11.2 kB -348 B (-3%)
assets/js/chunk-web-stories-template-25.js 6.79 kB -236 B (-3%)
assets/js/chunk-web-stories-template-26.js 6.97 kB -272 B (-4%)
assets/js/chunk-web-stories-template-27.js 7.66 kB -108 B (-1%)
assets/js/chunk-web-stories-template-28.js 8.76 kB -225 B (-3%)
assets/js/chunk-web-stories-template-29.js 8.94 kB -289 B (-3%)
assets/js/chunk-web-stories-template-3.js 8.24 kB -116 B (-1%)
assets/js/chunk-web-stories-template-30.js 7.43 kB -413 B (-5%)
assets/js/chunk-web-stories-template-31.js 9.93 kB -315 B (-3%)
assets/js/chunk-web-stories-template-32.js 12.3 kB -720 B (-6%)
assets/js/chunk-web-stories-template-33.js 8.9 kB -128 B (-1%)
assets/js/chunk-web-stories-template-34.js 7.43 kB -112 B (-1%)
assets/js/chunk-web-stories-template-35.js 8.7 kB -164 B (-2%)
assets/js/chunk-web-stories-template-36.js 12.1 kB -526 B (-4%)
assets/js/chunk-web-stories-template-37.js 6.13 kB -134 B (-2%)
assets/js/chunk-web-stories-template-38.js 7.63 kB -261 B (-3%)
assets/js/chunk-web-stories-template-39.js 7.79 kB -240 B (-3%)
assets/js/chunk-web-stories-template-4.js 11.8 kB -767 B (-6%)
assets/js/chunk-web-stories-template-40.js 9.85 kB -283 B (-3%)
assets/js/chunk-web-stories-template-41.js 7.45 kB -250 B (-3%)
assets/js/chunk-web-stories-template-42.js 6.82 kB -138 B (-2%)
assets/js/chunk-web-stories-template-43.js 8.49 kB -192 B (-2%)
assets/js/chunk-web-stories-template-44.js 10.8 kB -224 B (-2%)
assets/js/chunk-web-stories-template-45.js 7.15 kB -328 B (-4%)
assets/js/chunk-web-stories-template-47.js 8.97 kB -399 B (-4%)
assets/js/chunk-web-stories-template-48.js 8.79 kB -228 B (-3%)
assets/js/chunk-web-stories-template-49.js 8.58 kB -1.04 kB (-11%) 👏
assets/js/chunk-web-stories-template-5.js 9.53 kB -320 B (-3%)
assets/js/chunk-web-stories-template-50.js 8.93 kB -133 B (-1%)
assets/js/chunk-web-stories-template-51.js 10.1 kB -220 B (-2%)
assets/js/chunk-web-stories-template-52.js 9.97 kB -323 B (-3%)
assets/js/chunk-web-stories-template-53.js 5.65 kB -110 B (-2%)
assets/js/chunk-web-stories-template-54.js 7.46 kB -145 B (-2%)
assets/js/chunk-web-stories-template-55.js 6.95 kB -131 B (-2%)
assets/js/chunk-web-stories-template-56.js 9.54 kB -260 B (-3%)
assets/js/chunk-web-stories-template-57.js 14.5 kB -329 B (-2%)
assets/js/chunk-web-stories-template-58.js 5.43 kB -274 B (-5%)
assets/js/chunk-web-stories-template-59.js 8.73 kB -158 B (-2%)
assets/js/chunk-web-stories-template-6.js 6.93 kB -101 B (-1%)
assets/js/chunk-web-stories-template-60.js 8.94 kB -446 B (-5%)
assets/js/chunk-web-stories-template-7.js 7.15 kB -279 B (-4%)
assets/js/chunk-web-stories-template-8.js 8.34 kB -512 B (-6%)
assets/js/chunk-web-stories-template-9.js 8.25 kB -134 B (-2%)
assets/js/chunk-web-stories-textset-0.js 4.6 kB -398 B (-8%)
assets/js/chunk-web-stories-textset-1.js 5.61 kB -954 B (-15%) 👏
assets/js/chunk-web-stories-textset-2.js 6.83 kB -733 B (-10%) 👏
assets/js/chunk-web-stories-textset-3.js 12.8 kB -1.83 kB (-12%) 👏
assets/js/chunk-web-stories-textset-4.js 3.92 kB -175 B (-4%)
assets/js/chunk-web-stories-textset-5.js 5.27 kB -140 B (-3%)
assets/js/chunk-web-stories-textset-6.js 4.98 kB -227 B (-4%)
assets/js/chunk-web-stories-textset-7.js 8.89 kB -1.13 kB (-11%) 👏
ℹ️ View Unchanged
Filename Size Change
assets/css/web-stories-block-rtl.css 4.6 kB 0 B
assets/css/web-stories-block.css 4.64 kB 0 B
assets/css/web-stories-carousel-rtl.css 702 B 0 B
assets/css/web-stories-carousel.css 701 B 0 B
assets/css/web-stories-dashboard-rtl.css 657 B 0 B
assets/css/web-stories-dashboard.css 659 B 0 B
assets/css/web-stories-editor-rtl.css 769 B 0 B
assets/css/web-stories-editor.css 771 B 0 B
assets/css/web-stories-embed-rtl.css 655 B 0 B
assets/css/web-stories-embed.css 656 B 0 B
assets/css/web-stories-list-styles-rtl.css 2.39 kB 0 B
assets/css/web-stories-list-styles.css 2.42 kB 0 B
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B 0 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B 0 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 251 B 0 B
assets/css/web-stories-theme-style-twentyfifteen.css 251 B 0 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 287 B 0 B
assets/css/web-stories-theme-style-twentyfourteen.css 287 B 0 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 288 B 0 B
assets/css/web-stories-theme-style-twentyseventeen.css 288 B 0 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 224 B 0 B
assets/css/web-stories-theme-style-twentysixteen.css 224 B 0 B
assets/css/web-stories-theme-style-twentyten-rtl.css 143 B 0 B
assets/css/web-stories-theme-style-twentyten.css 143 B 0 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 256 B 0 B
assets/css/web-stories-theme-style-twentytwelve.css 256 B 0 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 326 B 0 B
assets/css/web-stories-theme-style-twentytwentyone.css 326 B 0 B
assets/css/web-stories-widget-rtl.css 482 B 0 B
assets/css/web-stories-widget.css 482 B 0 B
assets/js/3248.js 38.3 kB 0 B
assets/js/3780.js 12.9 kB 0 B
assets/js/4422.js 49.3 kB 0 B
assets/js/4652.js 92.7 kB 0 B
assets/js/7357.js 92 B 0 B
assets/js/7418.js 7.97 kB 0 B
assets/js/83.js 4.59 kB 0 B
assets/js/9084.js 196 kB 0 B
assets/js/9750.js 12.8 kB 0 B
assets/js/chunk-colorthief.js 2.62 kB 0 B
assets/js/chunk-ffmpeg.js 5.98 kB 0 B
assets/js/chunk-html-to-image.js 4.51 kB 0 B
assets/js/chunk-media-gallery.js 6.18 kB 0 B
assets/js/chunk-mediainfo.js 96 B 0 B
assets/js/chunk-opentype.js 96 B 0 B
assets/js/chunk-react-calendar.js 11.6 kB 0 B
assets/js/chunk-react-color.js 26 kB 0 B
assets/js/chunk-selfie-segmentation.js 16.3 kB 0 B
assets/js/chunk-web-stories-template-0-metaData.js 546 B 0 B
assets/js/chunk-web-stories-template-1-metaData.js 540 B 0 B
assets/js/chunk-web-stories-template-10-metaData.js 532 B 0 B
assets/js/chunk-web-stories-template-11-metaData.js 539 B 0 B
assets/js/chunk-web-stories-template-12-metaData.js 496 B 0 B
assets/js/chunk-web-stories-template-13-metaData.js 525 B 0 B
assets/js/chunk-web-stories-template-14-metaData.js 582 B 0 B
assets/js/chunk-web-stories-template-14.js 7.26 kB -80 B (-1%)
assets/js/chunk-web-stories-template-15-metaData.js 544 B 0 B
assets/js/chunk-web-stories-template-16-metaData.js 588 B 0 B
assets/js/chunk-web-stories-template-17-metaData.js 540 B 0 B
assets/js/chunk-web-stories-template-18-metaData.js 587 B 0 B
assets/js/chunk-web-stories-template-19-metaData.js 501 B 0 B
assets/js/chunk-web-stories-template-2-metaData.js 586 B 0 B
assets/js/chunk-web-stories-template-20-metaData.js 548 B 0 B
assets/js/chunk-web-stories-template-21-metaData.js 536 B 0 B
assets/js/chunk-web-stories-template-22-metaData.js 525 B 0 B
assets/js/chunk-web-stories-template-23-metaData.js 604 B 0 B
assets/js/chunk-web-stories-template-24-metaData.js 517 B 0 B
assets/js/chunk-web-stories-template-25-metaData.js 543 B 0 B
assets/js/chunk-web-stories-template-26-metaData.js 600 B 0 B
assets/js/chunk-web-stories-template-27-metaData.js 542 B 0 B
assets/js/chunk-web-stories-template-28-metaData.js 532 B 0 B
assets/js/chunk-web-stories-template-29-metaData.js 561 B 0 B
assets/js/chunk-web-stories-template-3-metaData.js 539 B 0 B
assets/js/chunk-web-stories-template-30-metaData.js 576 B 0 B
assets/js/chunk-web-stories-template-31-metaData.js 503 B 0 B
assets/js/chunk-web-stories-template-32-metaData.js 552 B 0 B
assets/js/chunk-web-stories-template-33-metaData.js 491 B 0 B
assets/js/chunk-web-stories-template-34-metaData.js 570 B 0 B
assets/js/chunk-web-stories-template-35-metaData.js 565 B 0 B
assets/js/chunk-web-stories-template-36-metaData.js 575 B 0 B
assets/js/chunk-web-stories-template-37-metaData.js 529 B 0 B
assets/js/chunk-web-stories-template-38-metaData.js 572 B 0 B
assets/js/chunk-web-stories-template-39-metaData.js 589 B 0 B
assets/js/chunk-web-stories-template-4-metaData.js 564 B 0 B
assets/js/chunk-web-stories-template-40-metaData.js 556 B 0 B
assets/js/chunk-web-stories-template-41-metaData.js 573 B 0 B
assets/js/chunk-web-stories-template-42-metaData.js 521 B 0 B
assets/js/chunk-web-stories-template-43-metaData.js 557 B 0 B
assets/js/chunk-web-stories-template-44-metaData.js 583 B 0 B
assets/js/chunk-web-stories-template-45-metaData.js 565 B 0 B
assets/js/chunk-web-stories-template-46-metaData.js 531 B 0 B
assets/js/chunk-web-stories-template-46.js 5.1 kB -89 B (-2%)
assets/js/chunk-web-stories-template-47-metaData.js 591 B 0 B
assets/js/chunk-web-stories-template-48-metaData.js 556 B 0 B
assets/js/chunk-web-stories-template-49-metaData.js 518 B 0 B
assets/js/chunk-web-stories-template-5-metaData.js 556 B 0 B
assets/js/chunk-web-stories-template-50-metaData.js 503 B 0 B
assets/js/chunk-web-stories-template-51-metaData.js 526 B 0 B
assets/js/chunk-web-stories-template-52-metaData.js 601 B 0 B
assets/js/chunk-web-stories-template-53-metaData.js 551 B 0 B
assets/js/chunk-web-stories-template-54-metaData.js 547 B 0 B
assets/js/chunk-web-stories-template-55-metaData.js 574 B 0 B
assets/js/chunk-web-stories-template-56-metaData.js 542 B 0 B
assets/js/chunk-web-stories-template-57-metaData.js 528 B 0 B
assets/js/chunk-web-stories-template-58-metaData.js 554 B 0 B
assets/js/chunk-web-stories-template-59-metaData.js 590 B 0 B
assets/js/chunk-web-stories-template-6-metaData.js 568 B 0 B
assets/js/chunk-web-stories-template-60-metaData.js 509 B 0 B
assets/js/chunk-web-stories-template-7-metaData.js 569 B 0 B
assets/js/chunk-web-stories-template-8-metaData.js 569 B 0 B
assets/js/chunk-web-stories-template-9-metaData.js 580 B 0 B
assets/js/chunk-web-stories-templates.js 1.16 kB 0 B
assets/js/generateBlurhash.worker.worker.js 1.1 kB 0 B
assets/js/imgareaselect.js 3.77 kB 0 B
assets/js/web-stories-activation-notice.js 26.9 kB 0 B
assets/js/web-stories-block.js 23.8 kB 0 B
assets/js/web-stories-carousel.js 3.5 kB 0 B
assets/js/web-stories-dashboard.js 61.8 kB +2 B (0%)
assets/js/web-stories-editor.js 1.46 MB -11 B (0%)
assets/js/web-stories-embed.js 20 B 0 B
assets/js/web-stories-lightbox.js 751 B 0 B
assets/js/web-stories-tinymce-button.js 2.85 kB 0 B
assets/js/web-stories-widget.js 587 B 0 B

compressed-size-action

@googleforcreators-bot
Copy link
Collaborator

googleforcreators-bot commented Apr 20, 2023

Plugin builds for da96b72 are ready 🛎️!

@ayushnirwal ayushnirwal self-assigned this Apr 25, 2023
@swissspidy
Copy link
Collaborator

  • Removes current, selection and story props from default template.

Let's also remove them in packages/story-editor/src/components/devTools/devTools.js when enabling template mode (in prepareTemplate())

  • Updates getStroryPropsToSave to ignore basedOn property in elements.
  • Updates type StorySaveData.
  • Adds migration for removing basedOn property.

With that in place we should properly refactor duplicateElement to not store basedOn persistently. Because if we remove it there, then we don't even need to change getStroryPropsToSave; the migration would be enough.

Thoughts?

@ayushnirwal
Copy link
Contributor Author

With that in place we should properly refactor duplicateElement to not store basedOn persistently. Because if we remove it there, then we don't even need to change getStroryPropsToSave; the migration would be enough.

Is there no use case of saving basedOn in the provider state?

@swissspidy
Copy link
Collaborator

That's what I don't know :-) It's been a while since this was added, so I am lacking the context.

@ayushnirwal
Copy link
Contributor Author

ayushnirwal commented Apr 27, 2023

Is there no use case of saving basedOn in the provider state?

Found one use case here.

existingElements.forEach((existingElement) => {
if (
existingElement.id === duplicatedElement.basedOn ||
existingElement.basedOn === duplicatedElement.basedOn
) {
const pastedXY = getOffsetCoordinates(
duplicatedElement.x,
duplicatedElement.y
);
duplicatedElement.x = pastedXY.x;
duplicatedElement.y = pastedXY.y;
}
});

These lines of code are responsible for calculating the positional offset based on the number of duplicates.

I think getStoryPropsToSave should be then one cleaning basedOn property since duplicateElement need it to calculate offset.

@swissspidy
Copy link
Collaborator

These lines of code are responsible for calculating the positional offset based on the number of duplicates how many duplicates an element already has.

So the more duplicates an element has, the bigger is the offset 🤔 Interesting way to achieve this effect:

Screen.Recording.2023-04-27.at.11.36.25.mov

Especially since it doesn't really account for the positions of all the existing elements, leading to unexpected offsets like this:

Screen.Recording.2023-04-27.at.11.37.38.mov

I think in the end it comes all back to #1206, where we originally envisioned nice staggering behavior when inserting multiple elements, leading to solutions like this and also #4218

Can we maybe find a simpler staggering behavior for duplicating elements without having to use basedOn?

@ayushnirwal
Copy link
Contributor Author

ayushnirwal commented Apr 27, 2023

@swissspidy Since the pasted element/layer/group becomes selected, offset can be calculated off of that.

@ayushnirwal ayushnirwal marked this pull request as draft April 27, 2023 13:43
@ayushnirwal ayushnirwal marked this pull request as ready for review May 3, 2023 13:43
@swissspidy swissspidy added this to the 1.33.0 milestone May 4, 2023
Copy link
Collaborator

@swissspidy swissspidy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works really well! Kudos for making this simplification happen.

Left just a few tiny comments, otherwise LGTM

packages/elements/src/utils/duplicateElement.ts Outdated Show resolved Hide resolved
packages/story-editor/src/types/story.ts Outdated Show resolved Hide resolved
packages/story-editor/src/utils/copyPaste.tsx Outdated Show resolved Hide resolved
@swissspidy swissspidy added Group: Canvas Type: Code Quality Things that need a refactor, rewrite or just some good old developer ❤️ Group: Copy/Paste Clipboard-related functionality labels May 9, 2023
@swissspidy swissspidy changed the title Remove unused props from default templates and remove basedOn prop from save requests Remove unused props from default templates and save requests May 11, 2023
@swissspidy swissspidy merged commit 30f07c2 into main May 11, 2023
@swissspidy swissspidy deleted the code/12262-remove-some-persistant-props branch May 11, 2023 09:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Group: Canvas Group: Copy/Paste Clipboard-related functionality Type: Code Quality Things that need a refactor, rewrite or just some good old developer ❤️
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Avoid persistently storing certain properties
3 participants