Skip to content

Node graph-based viewport overlays system #99

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

Closed
Keavon opened this issue May 4, 2021 · 1 comment
Closed

Node graph-based viewport overlays system #99

Keavon opened this issue May 4, 2021 · 1 comment

Comments

@Keavon
Copy link
Member

Keavon commented May 4, 2021

Tools need a way of supplying overlays to be drawn on top of the canvas. These can be globally or selectively disabled with the Overlays button:

(Overlays are globally disabled by clicking the checkbox area, selectively disabled by clicking the popover dropdown arrow and clicking on various types of specific overlays to disable)

Various types of overlays will come from:

  • The bounding box around the selected objects when using the Select Tool:
  • Similar to above, subtle bounding boxes indicating which which layers are being hovered over (which clicking at that moment would then select) when using the Select Tool
  • The points used to connect and control the flow of gradients in the Gradient Tool (example in Illustrator:)
  • All the vector shape points and handles when using the Path Tool and Pen Tool
  • Spline points when using the Spline Tool

There is similar concept related to overlays which always appear and don't get affected by the Overlays toggle. These are fundamental visualizations provided by the tools for their own interactivity, such as:

  • A box selection with the Select Tool
  • The window, rule-of-thirds, handles, and peripheral darkening of the Crop Tool
  • Floating interactive mouse-centric UI widgets like color sample preview from the Eyedropper Tool
  • In the Brush Tool, some sort of brush preview showing the angles of the bristles or the size and shape of the textured brush pattern
  • In the Clone Tool, it would show the corresponding area of the canvas being actively sampled from while drawing

These would be drawn on a layer above the overlays you can enable/disable with the setting described earlier. However they will probably use the same overlay system code.

Overlays will be rendered as an SVG string over the top of the document viewport.

Complexity: 5
Involves: Frontend (JS), Editor (Rust), Document (Rust)

@Keavon
Copy link
Member Author

Keavon commented May 26, 2021

A recent note on the cursory plans for this:

add to document like the "working folder", tools still need some sort of API to draw real time shapes

@Keavon Keavon changed the title Overlays system Viewport overlays system May 27, 2021
@TrueDoctor TrueDoctor self-assigned this May 28, 2021
@Keavon Keavon removed the Available label May 28, 2021
@Keavon Keavon added Rust Web Involves web programming (TypeScript, Svelte, CSS) labels Jun 10, 2021
@Keavon Keavon changed the title Viewport overlays system Node graph-based viewport overlays system Aug 12, 2021
@Keavon Keavon added Blocked and removed Available labels Aug 12, 2021
@Keavon Keavon removed this from the Sprint 7 (upcoming) milestone Aug 12, 2021
@Keavon Keavon removed Feature Web Involves web programming (TypeScript, Svelte, CSS) labels Jan 30, 2022
@Keavon Keavon closed this as completed Jan 30, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants