maccman/stylo

Spine/CoffeeScript example GUI designer

Stylo

Stylo is a web app designer written in CoffeeScript and Spine. It allows you to manipulate various HTML elements, add styles and edit text.

You can find a demo here (webkit only).

Code examples

The code should provide good examples of how to achieve the following:

• Element snapping, resizing and drag/drop
• Copy/paste, undo/redo & keyboard shortcuts
• Context menus and z-index ordering
• Color picker using canvas
• JSON object instance serialization

More

For more information, please see the blog post.

stylo's Issues

when resizing a box and pressing Shift, cursor no longer touches handle

how to reproduce

• go to http://styloapp.com/
• click the gray rectangle in the top-left to add a gray rectangle to the stage
• Drag the bottom-right resize handle around. The corner sticks to the mouse position; that’s good.
• now try dragging the handle around again, but occasionally tap the Shift key on the keyboard

expected

While dragging while Shift is released, the grabbed corner moves back to right under the mouse cursor

actual

While dragging while Shift is released, the grabbed corner moves around at a position relative to the mouse and not under it. The corner moves as if under an invisible mouse cursor at a position translated from the real position.

comments

Playing around with dragging and Shift should easily show what rules Stylo currently follows for resizing, and what situations will mess up the dragging handle position. What’s left is to change those rules to match the standard and intuitive behavior for similar object-layout apps.

the demo page

"You can find a demo here (webkit only)"

Really weird stuff is happening if I click that link.. Do you own that domain?