Implement rulers / guides in Remotion Studio

[JonnyBurger]

Use Case

See this feature from After Effects:

https://github.com/remotion-dev/remotion/assets/1629785/294fd6be-1c5c-4241-96be-43f9d80bfce6

• In the "View" menu at the top, you have two togglable items:
  • Show rulers (disabled by default)
  • Show guides (enabled by default)
• The "rulers" are bars on the side that decrease the canvas size. So if the size is set to "Fit", enabling the rulers will make the canvas slightly smaller.
• The rulers are adaptive:
  • when the content is zoomed out, there is one label approximately every 50px.
  • When zoomed in, there is one label for every 2px:
• The labels of the ruler have horizontal text for the X axis and vertical text for the Y axes:
• The labels follow a coordinate system where the top pixel of the video is (0, 0) and the bottom right pixel is (width, height).
• The labels also go into the negative (and overflow the width), which I don't think we need to have as well
• If you drag over the horizontal ruler, the cursor changes to ns-resize. If you drag the vertical ruler, it changes to ew-resize.
• If you drag from the ruler into the canvas, you can place a "guide".
• A guide is 1px line colored line that is fixed to a certain X or Y position.
• If the canvas is resized, the line stays fixed to that X/Y ordinate of the video.
• If the canvas is panned away from the initial position (two fingers on the trackpad, or zooming with Cmd+scroll wheel), the line and moves as well to stay fixed to the ordinate of the video.
• You can have multiple guides.
• You can drag and re-position a guide.
• If you drag a guide back to the ruler, you delete it.
• The rulers and guides are persisted per-composition.
• Rulers and guides can be individually toggled via the "View menu"

Acceptance criteria

• Implement this feature according to the above specification for the Remotion Studio.
• It should have reasonable performance and be implemented using pointerdown / pointerup / pointermove listeners.
• No external dependencies.
• The drag event listeners should be cleaned up.
• The canvas should not be covered by this new feature (if there is a text in the composition, it should still be selectable)

Bounty

💎 This issue is part of Hacktoberfest and has a bounty on it!

• General Rules: https://www.remotion.dev/bounties
• How to contribute: https://www.remotion.dev/docs/contributing/
• Implementing a new feature: https://www.remotion.dev/docs/contributing/feature
• Implementing a new option: https://www.remotion.dev/docs/contributing/option
• Write documentation: https://www.remotion.dev/docs/contributing/docs

🎃 Hacktoberfest rules

• You can only work on 1 issue at a time.
• Only 1 person can work on the same issue.
• We explicitly assign a developer. Don’t work on an issue if we do not assign you.
• First-time contributors will get preferential treatment.
• Only take an issue if you have an approximate idea on how to solve the issue.
• You must set up the Remotion repository locally and test your changes. Contributing to Remotion
• Your PR must fulfill the acceptance criteria.
• If you use AI, you must verify that the output is correct.
• All tests (functionality and formatting) must pass.

Issue already taken? Find more issues under https://remotion.dev/bounties

---

Special mode: We are looking for a detail-caring developer to work on this issue. Not the first person commenting will get this issue, but we will leave the issue open for a few days and will assign it to the person we think has the most fitting skills.

/bounty 600

[algora-pbc[bot]]

💎 $600 bounty created by remotion 🙋 If you'd like to work on this issue, comment /attempt below to get assigned 👉 Once assigned, you can claim the bounty by using the /claim #3076 command in the PR body 📝 Before proceeding, please make sure you can receive payouts in your country 💵 Payment arrives in your account 2-5 days after the bounty is rewarded 💯 You keep 100% of the bounty award 🙏 Thank you for contributing to remotion-dev/remotion!

[ChetanKarwa]

/attempt

[algora-pbc[bot]]

@ChetanKarwa: The Remotion team prefers to assign a single contributor to the issue rather than let anyone attempt it right away. We recommend waiting for a confirmation from a member before getting started.

[ChetanKarwa]

Yes, I am working on it

[algora-pbc[bot]]

💡 @ChetanKarwa submitted a pull request that claims the bounty. You can visit your bounty board to reward.

[algora-pbc[bot]]

🎉🎈 @ChetanKarwa has been awarded $600! 🎈🎊