radex
/
jspaint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
jspaint/TODO.md

10 KiB
Raw Blame History

JS Paint Todo

Help

  • Resizable window

  • Link-esque things

    • Popups (I'd probably make the text within the popups selectable)
    • Related topics (I'd probably make this a heading with links instead of the weird context menu thing)

  • Add topics

    • In "Tips and Tricks" (which is just a lame section)
    • Transparency
    • Multi-user / collaboration / "To share the document On-Line" or whatever

  • Index

  • Search

  • Keyboard support

  • Interactive tutorials?

    • Possibly hosted by Clippy, with ClippyJS
    • Links the cat has a good "GetArtsy" animation, which would be good to use especially if talking about stamping and smearing selections
    • Highlight elements on the page
    • Be sure to cover undo/redo, and file saving

Visual

  • Warning sign for "Save changes to X?" dialog
  • Error symbol for error message dialogs
  • Menu separator spacing
  • I want to give most things a revisit later on for Pixel Perfection
  • Fill bucket and airbrush cursors are supposed to invert the background in parts
  • Custom cursors in Edge; apparently they require .cur files? ugh
  • The canvas-area's border is different in Firefox and Edge from Chrome

Menus

  • Bug on mobile: If you click on a menu item (up/down) and then move over to a menu item and click (up/down) it does nothing (and you can repeat this)
  • Keyboard navigation of submenus
  • Alt (by itself)?

Extended editing

  • Optional fill tolerance (slider that you enable from a settings menu?)

  • Transparency

    • Color opacity slider
    • Toggle between blend and copy (overwrite) modes
    • Maybe equivalize any rgba(X, X, X, 0) in fill algorithm? There'd still be the possibility of 1/255th opacity pixels, but if you're creating colors from the combination of a color picker and an opacity slider, you might naturally introduce differing zero-opacity color values a lot.

  • Documents with multiple sub-images

    • Component to switch between sub-images
    • Deal with undo/redo for sub-images
    • Animated GIFs
    • Animated Transparent APNGs
    • Multi-size Icons
    • Layered images?
    • Paged Images?
      • PDF (via pdf.js) (single page already supported)
      • DjVu (via djvu.js)
      • TIFF (via utif.js) (single page/frame already supported)

  • Online (multi-user) and local (single-user) sessions

    • See sessions.js
    • Issues
      • There's no conflict resolution; user edits revert other user edits
      • It's not eventually consistent
      • Cursors from other users that go outside the parent can cause the page to be scrollable

  • Symmetry, tesselation, painting texture on 3D models, and even an infinite canvas, all could be done with a shared system

  • Save text and record transformations so the image can be saved as SVG (or HTML?) with invisible selectable transformed text elements?

    • Every time you move a selection, duplicate the text and create a clip-path for both parts?
      • Make only one of them audible for screen-readers

Device support

  • Prevent text selection in buttons and history entries
  • Enlarge menus on touch devices
  • Enlarge window titlebar close buttons on touch devices
  • Magnifier: on touchscreens, wait until pointerup to zoom
    • To detect touchscreen usage, could keep track of whether the last pointermove had any buttons pressed... or use pointerType, right?
  • Alternative way to access "Color Eraser" feature without a secondary mouse button?
  • Alternative access to functionality that would normally require a keyboard (with a numpad!)
    • Numpad +/-: Increase/Decrease brush size, Double/Halve selection size, ...
    • Shift (toggles; rename contextually?):
      • Proportional Resize
      • Smear / Trail Selection
      • Snap to 8 directions
        • An isometric mode would also be good
    • Ctrl+Select: Crop tool or "Crop to selection" option
  • Don't drag toolbars out into windows with touch
    • Unless with two fingers perhaps
      • I might want to use multitouch on the tool buttons for MultiTools tho...

Tools

  • Select and Free-Form Select

    • Passive: create no undoables until you do something like move or invert the selection
      • You should be able to make a selection, then change the secondary color, then drag the selection cutting it out with the color you selected
      • Select and deselect with no actions in between should create no undoables
    • Proportionally resize selection while holding Shift
      • (or maybe by default? I feel like it should be the default, tbh.)

  • Text

    • If it would go over the edge of the canvas, reject the input (at least, that's what mspaint does)
    • Add padding left to text area when font has glyphs that extend left, like italic 'f' in Times New Roman
      • mspaint has access to font metrics
      • jspaint could render text to see when it would overflow
        • To do it efficiently,
          • Take all glyphs in the text
            • (And maybe a set of common letters like the alphabet)
            • Split with a library to handle Unicode (emojis etc.)
          • Uniquify
          • Place them all on top of each other, positioned absolutely, leaving room to the left of them to detect pixels
          • Scan the pixels at the left to find the maximum extent left
          • Could store, per font, what glyphs have been tested and what's the maximum extent detected, in order to not have to rerender these
            • "What glyphs have been tested" should be specific to font size and attributes, since an italic 'f' may extend more than a normal 'f' for instance
    • Store position of FontBox

  • Shape Styles

    • Shapes: respond to Ctrl (It's complicated)
    • Patterns (black and white mode, winter theme)
      • Check to make sure patterns are aligned properly for all the tools
      • There's supposed to be a mapping between color values and pattern fills, used by the text tool and for the palette when switching between modes (colors should be kept between going to black and white mode and back)

Desktop App (Electron)

Electron boilerplate stuff:

Functionality:

  • A dialog when closing
  • Subwindows as separate windows
  • Document recovery without having to know about File > Manage Storage - pop up contextually with a dialog when you need it
  • Show link URLs when you hover over them, in the status bar (because we have a status bar! haha) (there's this API: event: update-target-url, which gave me the idea, or it could be implemented with mouse events)
  • Recent files (could also be implemented for 98.js.org in the future)
  • Create a landing page / home page for the desktop app (similar to https://desktop.webamp.org/ or https://desktop.github.com/) - (perhaps https://desktop.jspaint.app/) - and/or for JS Paint in general (perhaps https://jspaint.app/about/)
  • macOS: open-file event, setRepresentedFilename, setDocumentEdited etc.
  • Windows: maybe handle session-end event and ask to save?
  • Detect if file changes on disk, ask if you want to reload it?

Also

  • Anything marked @TODO or @FIXME in the source code

  • See Issues on GitHub

  • CSS

    • DRY, especially button styles, with os-gui
    • Clearer z-index handling, maybe with CSS variables?

  • JS

    • Organize things into files better; "functions.js" is like ONE step above saying "code.js"
    • $ToolWindow has a $Button facility; $DialogWindow overrides it with essentially a better one; now there's showMessageBox too! and $ToolWindow is a wrapper for OS-GUI's $Window, and should be removed at some point; btw, should show_error_message functionality be folded into showMessageBox?
    • Make code clearer / improve code quality

  • Images

    • Use a shared sprite sheet per theme (and optimize it I guess)