--- a/light9/web/paint/paint-elements.coffee	Mon May 29 07:59:59 2017 +0000
+++ b/light9/web/paint/paint-elements.coffee	Mon May 29 08:31:26 2017 +0000
@@ -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 @@
 
   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 @@
     @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 @@
 
     @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 @@
 
       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 @@
   onResize: (ev) ->
     @size = [@$.parent.offsetWidth, @$.parent.offsetHeight]
     @$.paint.attributes.viewBox.value = "0 0 #{@size[0]} #{@size[1]}"
+    @painting.setSize(@size)
 
 
 Polymer

--- a/light9/web/paint/paint-elements.html	Mon May 29 07:59:59 2017 +0000
+++ b/light9/web/paint/paint-elements.html	Mon May 29 08:31:26 2017 +0000
@@ -44,6 +44,7 @@
         <paper-radio-button name="paint">paint</paper-radio-button>
         <paper-radio-button name="erase">erase</paper-radio-button>
       </paper-radio-group>
+      <button on-click="onClear">clear</button>
     </div>
     
     <div id="parent">
@@ -53,10 +54,8 @@
           <filter
               style="color-interpolation-filters:sRGB"
               id="blur"
-              x="-1.0"
-              y="-1.0"
-              width="3.0"
-              height="3.0"
+              x="-5.0" y="-5.0"
+              width="11.0" height="11.0"
           >
             <feGaussianBlur
                 stdDeviation="20"

--- a/light9/web/paint/paint-report-elements.html	Mon May 29 07:59:59 2017 +0000
+++ b/light9/web/paint/paint-report-elements.html	Mon May 29 08:31:26 2017 +0000
@@ -13,6 +13,7 @@
      #solution { display: flex; margin-top: 80px; }
      #connectors { position: absolute; width: 100%; height: 100%; }
      #connectors path { stroke: #615c54; stroke-width: 3px; }
+ 
     </style>
 
     <div id="solutions">