christianliebel / paint Goto Github PK

For copy/paste scenarios

• Visual regression?

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.

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

+lines for ellipses

For running Paint offline.

For opening/saving/pasting from images.

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

For installing Paint.

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

Requires floating windows (#30)

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

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

• Stroke
• Stroke/Fill
• Fill

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

• Basic implementation
• Selection context

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 Behavior
• Support larger line widths + rounded lines

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

• Implement brush tool pane
• Draw like the selected brush

• Eraser
• Color Eraser

Respond to selection

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

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

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)

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

• 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

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

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

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

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

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

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

• "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

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