christianliebel / paint Goto Github PK

Currently, primary/secondary color selections are separate events. Tool selection is not implemented yet. It may make sense to use a single paint-context instance that is shared across components.

• Tools API
• Tool instance
• Color determination

• Basic implementation
• Actual selection context (move selection around, …)

For installing Paint.

• Simple menu
• Disabled items
• Checked items (consider dark mode, #13)
• Sub menus (draft implemented, no delay yet, consider dark mode, #13)
• Mnemonics (correctly shown in menus, but don't work currently and not shown in top-level menu)
• Status bar texts (first draft implemented, should set helpText to empty when hovering a menu)
• Keyboard support (up/down/left/right, return, esc, mnemonics)
• Shortcuts
• Touch support

Currently, attempting to draw on mobile moves the canvas instead of actually drawing.

• Show/hide tool box
• Requires checkable menus (#6)

+lines for ellipses

Implement a themed scrollbar for moving the document instead of using the native one.

• Basic implementation
• Pasted contents should be moveable
• Resize canvas?

• Basic implementation
• Selection context

https://www.npmjs.com/package/floodfill ?

• Eraser
• Color Eraser

For running Paint offline.

• Show/hide color box
• Requires a template change of color box/status bar
• Requires checkable menu items (#6)

• Implement brush tool pane
• Draw like the selected brush

• Visual regression?

• Check if a document is open/has pending changes
• Show confirmation box (Save changes to ${DOCUMENT_NAME}? Yes/No/Cancel)

• "normal" windows required for About, Attributes etc.
• tool windows required for color box, tool box, and text toolbar
• mobile capable
• don't drag windows outside of viewport

• Stroke
• Stroke/Fill
• Fill

For opening/saving/pasting from images.

https://github.com/GoogleChromeLabs/browser-nativefs

Currently, the document area (toolbars + canvas) lives inside the app. The document area should be extracted to an own component to declutter the app element.

The color and tool boxes can be detached from their respective bars.

Requires floating windows (#30)

For copy/paste scenarios

Implementing an nested div in all components is cumbersome. Introduce a 3D border component.

Please note all graphics must be recreated. Assets may not be copied 1:1.

• Show/hide status bar
• Requires a template change of color box/status bar
• Requires checkable menu items (#6)

The position in the status bar can show -1px or a floating value when zoomed in.

• Basic Behavior
• Support larger line widths + rounded lines

All colors are read from the CSS variables in app.js. However, the current variables may not be sufficient.

Respond to selection

What happens if the window is too small and the toolbar/statusbar/menubar/menu… overflows?

• Implement resizing
• Store the new canvas size & use this size from now on

Tool buttons have a separate style when they are pressed. Currently, only unselected/selected are supported.

• Support stroke drawing without anti-alias issues
• Support filled drawing
• Support stroke + fill drawing
• …also if rectangle is really small