UI widgets/enhancements

[dzungvpham]

For future development:

1. Editor:

• When an object is DMed, the editor should jump to the place where the code is being modified. Currently it pops back to the beginning.
• Column number of where the cursor is should be displayed somewhere to aid error message
• Hovering over certain keywords/built-in functions should display information about them
• Indicators of where an error begins (e.g: warning sign on the line) to help students find errors quickly. Should be very visible.
• Add syntax highlighting. Best solution is to turn the language into a subset of JavaScript and then use the syntax highlighting of CodeMirror for JavaScript
• Fixes tabbing issues
• Add a Save code button that saves the code in local storage. When users open SWELL, check in local storage to see if there's any saved code and load it in the editor. (auto-saving on should also be considered)

2. Error message:

• Should be helpful and fun for students to read, not technical.
• Use an avatar (cow?) that tells the students where the error is and how to fix them (lol). Look at Khan Academy javascript lesson for inspiration.

3. Lessons:

• The lessons toolbar need to be fixed so that students' current progress is more visible.
• Consider displaying the toolbar as a roadmap (make clever use of html/css)

4. DM and Effects:

• Use arrow keys to move objects around more finely
• Dragging while holding shift will snap objects to the direction they are being moved in
• Rotate: Example: Look in Word, PowerPoint, etc.
• For objects with rectangle bound, instead of modifying guides on the sides, allow for DM on the sides themselves. For Text effects, modification using the sides should keep the object centered horizontally/vertically.
• Color Picker: To allow students to change object's color quickly without having to code
• Undoable/Redoable DM: Need to add a stack (or two) to support this feature. Should only undo/redo from the start of a DM.
• More objects: Star, Arrow, Image (lot of them, should generalize Emoji), etc. Should extend from appropriate base class, don't copy and paste...
• More object properties: shadow, thickness, alpha, hsv, ... Put them all in the almighty print(). Caution: If you introduce something, it should be discoverable by the students. For each property, think of a way to use DM to change them.
• Change the right-side toolbar into a sleeker bar as we add more and more objects. The bar will include categories of object (i.e. shapes, lines, pictures), and clicking on them will open up a menu to the left that includes more specific options (e.g: shapes: rect, ellipse, start; lines: plain, arrow; emoji: happy, sad). Should use pictures for the icon with tooltip on mouse hover.
• Hovering over objects should change the cursor to a hand. This is trickier than it seems. Take a look at how z-dimension is being handled for some hacky inspiration.