Use Case

See this feature from After Effects:

• 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