View Code? Open in Web Editor
NEW
Open source, Web Components-based remake of MS Paint using modern web capabilities. ๐จ๐
Home Page: https://paint.js.org
License: Apache License 2.0
JavaScript 0.50%
HTML 0.86%
CSS 0.16%
TypeScript 97.97%
Shell 0.08%
Dockerfile 0.44%
paint's Introduction
Hi there, Iโm Chris ๐
๐ญ Iโm currently working on a web-based remake of Paint , built with Web Components & powerful web capabilities ๐ก
๐ฑ Iโm currently learning a lot about spec work over at Web App Manifest
๐จ๐ผโ๐ป Consultant at Thinktecture
๐ท Microsoft Most Valuable Professional for Developer Technologies (since 2017)
๐
ฐ๏ธ Google Developer Expert for Angular & Web Capabilities (since 2019)
๐ Participant in the W3C WebApps Working Group
๐ฌ Ask me about all things Angular and Progressive Web Apps
๐ซ How to reach me: @christianliebel & https://christianliebel.com/about-me/
๐ Pronouns: he/him
โก Fun fact: Iโve completed the Pokรฉdex in Pokรฉmon Red.
๐ Countries visited: ๐ฆ๐น ๐ง๐ช ๐จ๐ฆ ๐จ๐ญ ๐จ๐ฟ ๐ฉ๐ช ๐ช๐ช ๐ช๐ธ ๐ซ๐ฎ ๐ซ๐ท ๐ฎ๐ช ๐ฎ๐น ๐ฏ๐ต ๐ฑ๐ฎ ๐ฑ๐น ๐ฑ๐ป ๐ณ๐ฑ ๐ต๐ฑ ๐ต๐น ๐ฌ๐ง ๐บ๐ธ (CA, D.C., DE, MD, NJ, NY, NV, OR, PA, VA, WA) ๐ท๐ด ๐ป๐ฆ (23/195 โ 11.8%)
๐ Iโd love to extend this list. Iโve spoken at many national and international conferences , and if you need experienced speakers for your conference, feel free to reach out to me!
paint's People
paint's Issues
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
Currently, attempting to draw on mobile moves the canvas instead of actually drawing.
Show/hide tool box
Requires checkable menus (#6 )
Implement a themed scrollbar for moving the document instead of using the native one.
For running Paint offline.
Show/hide color box
Requires a template change of color box/status bar
Requires checkable menu items (#6 )
Check if a document is open/has pending changes
Show confirmation box (Save changes to ${DOCUMENT_NAME}? Yes/No/Cancel )
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 )
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.
All colors are read from the CSS variables in app.js
. However, the current variables may not be sufficient.
What happens if the window is too small and the toolbar/statusbar/menubar/menuโฆ overflows?
Tool buttons have a separate style when they are pressed. Currently, only unselected/selected are supported.