diff --git a/light9/web/paint/paint-elements.coffee b/light9/web/paint/paint-elements.coffee --- a/light9/web/paint/paint-elements.coffee +++ b/light9/web/paint/paint-elements.coffee @@ -1,16 +1,31 @@ class Painting - constructor: -> + constructor: (@svg) -> @strokes = [] - addStroke: (pts, color) -> - @strokes.push({pts: pts, color: color}) + setSize: (@size) -> + + startStroke: (pos, color) -> + stroke = new Stroke(pos, color, @size) + stroke.appendElem(@svg) + @strokes.push(stroke) + return stroke hover: (pos) -> - @strokes = [{pts: [pos, [pos[0], pos[1] + .01]], color: "#ffffff"}] + @clear() + s = @startStroke(pos, '#ffffff', @size) + r = .02 + steps = 5 + for ang in [0..steps] + ang = 6.28 * ang / steps + s.move([pos[0] + r * Math.sin(ang), pos[1] + 1.5 * r * Math.cos(ang)]) getDoc: -> {strokes: @strokes} + clear: -> + s.removeElem() for s in @strokes + @strokes = [] + class Stroke constructor: (pos, @color, @size) -> @path = document.createElementNS('http://www.w3.org/2000/svg', 'path') @@ -20,6 +35,9 @@ class Stroke appendElem: (parent) -> parent.appendChild(@path) + + removeElem: -> + @path.remove() move: (pos) -> if Math.hypot(pos[0] - @lastPos[0], pos[1] - @lastPos[1]) < .02 @@ -28,18 +46,20 @@ class Stroke @pts.push(pos) @lastPos = pos + finish: () -> + Polymer is: "light9-paint-canvas" behaviors: [ Polymer.IronResizableBehavior ] listeners: 'iron-resize': 'onResize' properties: { bg: { type: String }, - tool: { type: String }, + tool: { type: String, value: 'hover' }, painting: { type: Object } # output } ready: -> + @painting = new Painting(@$.paint) @onResize() - @painting = new Painting() @$.paint.addEventListener('mousedown', @onDown.bind(@)) @$.paint.addEventListener('mousemove', @onMove.bind(@)) @$.paint.addEventListener('mouseup', @onUp.bind(@)) @@ -49,23 +69,26 @@ Polymer @hover = _.throttle((ev) => @painting.hover(@evPos(ev)) + @scopeSubtree(@$.paint) @fire('paintingChanged', @painting) , 100) - evPos: (ev) -> px = (if ev.touches?.length? then [Math.round(ev.touches[0].clientX), Math.round(ev.touches[0].clientY)] else [ev.x, ev.y]) return [px[0] / @size[0], px[1] / @size[1]] + onClear: () -> + @painting.clear() + @fire('paintingChanged', @painting) + onDown: (ev) -> switch @tool when "hover" @onMove(ev) when "paint" # if it's on an existing one, do selection - @stroke = new Stroke(@evPos(ev), '#aaaaaa', @size) - @stroke.appendElem(@$.paint) + @currentStroke = @painting.startStroke(@evPos(ev), '#aaaaaa') @scopeSubtree(@$.paint) onMove: (ev) -> @@ -75,13 +98,13 @@ Polymer when "paint" # ..or move selection - return unless @stroke - @stroke.move(@evPos(ev)) + return unless @currentStroke + @currentStroke.move(@evPos(ev)) onUp: (ev) -> - return unless @stroke - @painting.addStroke(@stroke.pts, @stroke.color) - @stroke = null + return unless @currentStroke + @currentStroke.finish() + @currentStroke = null @notifyPath('painting.strokes.length') # not working @fire('paintingChanged', @painting) @@ -89,6 +112,7 @@ Polymer onResize: (ev) -> @size = [@$.parent.offsetWidth, @$.parent.offsetHeight] @$.paint.attributes.viewBox.value = "0 0 #{@size[0]} #{@size[1]}" + @painting.setSize(@size) Polymer diff --git a/light9/web/paint/paint-elements.html b/light9/web/paint/paint-elements.html --- a/light9/web/paint/paint-elements.html +++ b/light9/web/paint/paint-elements.html @@ -44,6 +44,7 @@ paint erase +
@@ -53,10 +54,8 @@