Mercurial > code > home > repos > light9
changeset 1519:a225c32bd9c8
new svg paint UI
Ignore-this: 11ce16de596585c08f9de5d2107c0eeb
| author | Drew Perttula <drewp@bigasterisk.com> |
|---|---|
| date | Wed, 12 Apr 2017 09:07:49 +0000 |
| parents | 7480e26c75ed |
| children | e77b063c0bde |
| files | light9/web/paint/bg1.jpg light9/web/paint/index.html light9/web/paint/paint-elements.coffee makefile |
| diffstat | 4 files changed, 70 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/light9/web/paint/index.html Wed Apr 12 09:07:49 2017 +0000 @@ -0,0 +1,20 @@ +<!doctype html> +<html> + <head> + <title>paint</title> + <meta charset="utf-8" /> + <script src="/lib/webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="paint-elements.html"> + <meta name="viewport" content="user-scalable=no, width=1000, initial-scale=.5" /> + <style> + body { + position: relative; + height: 500px; + } + </style> + </head> + <body> + <light9-paint style="position: absolute; left: 0px; top: 0px; width: 1000px; height: 500px"> + </light9-paint> + </body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/light9/web/paint/paint-elements.coffee Wed Apr 12 09:07:49 2017 +0000 @@ -0,0 +1,49 @@ +class Stroke + constructor: (pos) -> + @path = document.createElementNS('http://www.w3.org/2000/svg', 'path') + @path.setAttributeNS(null, 'd', "M #{pos[0]} #{pos[1]}") + @lastPos = pos + + appendElem: (parent) -> + parent.appendChild(@path) + + move: (pos) -> + if Math.hypot(pos[0] - @lastPos[0], pos[1] - @lastPos[1]) < 30 + return + @path.attributes.d.value += " L #{pos[0]} #{pos[1]}" + @lastPos = pos + +Polymer + is: "light9-paint" + behaviors: [ Polymer.IronResizableBehavior ] + listeners: 'iron-resize': 'onResize' + properties: { + } + ready: -> + @$.paint.addEventListener('mousedown', @onDown.bind(@)) + @$.paint.addEventListener('mousemove', @onMove.bind(@)) + @$.paint.addEventListener('mouseup', @onUp.bind(@)) + @$.paint.addEventListener('touchstart', @onDown.bind(@)) + @$.paint.addEventListener('touchmove', @onMove.bind(@)) + @$.paint.addEventListener('touchend', @onUp.bind(@)) + + evPos: (ev) -> + return (if ev.touches?.length? then [Math.round(ev.touches[0].clientX), Math.round(ev.touches[0].clientY)] else [ev.x, ev.y]) + + onDown: (ev) -> + # if it's on an existing one, do selection + @stroke = new Stroke(@evPos(ev)) + @stroke.appendElem(@$.paint) + @scopeSubtree(@$.paint) + + onMove: (ev) -> + # ..or move selection + return unless @stroke + @stroke.move(@evPos(ev)) + + onUp: (ev) -> + @stroke = null + + onResize: (ev) -> + @$.paint.attributes.viewBox.value = "0 0 #{ev.target.offsetWidth} 500" + \ No newline at end of file
--- a/makefile Wed Apr 12 06:17:34 2017 +0000 +++ b/makefile Wed Apr 12 09:07:49 2017 +0000 @@ -100,7 +100,7 @@ effect_node_setup: create_virtualenv packages binexec install_python_deps coffee: - zsh -c 'coffee -cw light9/web/{.,live,timeline}/*.coffee' + zsh -c 'coffee -cw light9/web/{.,live,timeline,paint}/*.coffee' env-mypy/bin/mypy: mkdir -p env-mypy