# HG changeset patch
# User Drew Perttula <drewp@bigasterisk.com>
# Date 2017-05-28 09:05:37
# Node ID 20f48a0e71359b1e897ceecfc6db36cbe8bff2f3
# Parent  9be85c08a69fbee95218a8841691ad8617a093cc

hover mode shows best match
Ignore-this: 3b25ed8ebb8e6be38a3afa0d077e78ba

diff --git a/light9/web/lib/bower.json b/light9/web/lib/bower.json
--- a/light9/web/lib/bower.json
+++ b/light9/web/lib/bower.json
@@ -16,11 +16,15 @@
     "N3.js": "https://github.com/RubenVerborgh/N3.js.git#04f4e21f4ccb351587dc00a3f26340b28d4bb10f",
     "shortcut": "http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js",
     "async": "https://github.com/caolan/async.git#^1.5.2",
-    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.3"
+    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.3",
+    "paper-radio-button": "PolymerElements/paper-radio-button#^1.2.2",
+    "paper-radio-group": "PolymerElements/paper-radio-group#^1.2.2"
   },
   "resolutions": {
     "paper-styles": "^1.1.4",
     "rdflib.js": "920e59fe37",
-    "d3": "e7194db33090a0afc06c77a959594361ffb949df"
+    "d3": "e7194db33090a0afc06c77a959594361ffb949df",
+    "webcomponentsjs": "^0.7.24",
+    "polymer": "^1.2.1"
   }
 }
diff --git a/light9/web/paint/index.html b/light9/web/paint/index.html
--- a/light9/web/paint/index.html
+++ b/light9/web/paint/index.html
@@ -5,7 +5,6 @@
     <meta charset="utf-8" />
     <script src="/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="stylesheet"  href="/style.css">
-
     <link rel="import" href="paint-elements.html">
     <meta name="viewport" content="user-scalable=no, width=1000, initial-scale=.5" />
     <style>
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
@@ -5,6 +5,9 @@ class Painting
   addStroke: (pts, color) ->
     @strokes.push({pts: pts, color: color})
 
+  hover: (pos) ->
+    @strokes = [{pts: [pos, [pos[0], pos[1] + .01]], color: "#ffffff"}]
+
   getDoc: ->
     {strokes: @strokes}
 
@@ -31,6 +34,7 @@ Polymer
   listeners: 'iron-resize': 'onResize'
   properties: {
     bg: { type: String },
+    tool: { type: String },
     painting: { type: Object } # output
   }
   ready: ->
@@ -43,21 +47,36 @@ Polymer
     @$.paint.addEventListener('touchmove', @onMove.bind(@))
     @$.paint.addEventListener('touchend', @onUp.bind(@))
 
+    @hover = _.throttle((ev) =>
+          @painting.hover(@evPos(ev))
+          @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]]
 
   onDown: (ev) ->
-    # if it's on an existing one, do selection
-    @stroke = new Stroke(@evPos(ev), '#aaaaaa', @size)
-    @stroke.appendElem(@$.paint)
+    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)
     @scopeSubtree(@$.paint)
 
   onMove: (ev) ->
-    # ..or move selection
-    return unless @stroke
-    @stroke.move(@evPos(ev))
+    switch @tool
+      when "hover"
+        @hover(ev)
+
+      when "paint"
+        # ..or move selection
+        return unless @stroke
+        @stroke.move(@evPos(ev))
 
   onUp: (ev) ->
     return unless @stroke
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
@@ -1,8 +1,12 @@
+<script src="/lib/underscore/underscore-min.js"></script>
 <link rel="import" href="/lib/polymer/polymer.html">
 <link rel="import" href="/lib/iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="/lib/iron-ajax/iron-ajax.html">
+<link rel="import" href="/lib/paper-radio-group/paper-radio-group.html">
+<link rel="import" href="/lib/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="paint-report-elements.html">
 
+
 <dom-module id="light9-paint-canvas">
   <template>
     <style>
@@ -20,6 +24,9 @@
          width: 100%;
          height: 500px;
      }
+     #toolbar {
+         background: #a7a7a7;
+     }
      svg > path {
          fill:none;
          stroke:rgba(255, 255, 255, 0.66);
@@ -31,11 +38,12 @@
      }
     </style>
 
-    <div>
-      tools:
-      - hover spot
-      - paint
-      - erase
+    <div id="toolbar">
+      <paper-radio-group selected="{{tool}}">
+        <paper-radio-button name="hover">hover spot</paper-radio-button>
+        <paper-radio-button name="paint">paint</paper-radio-button>
+        <paper-radio-button name="erase">erase</paper-radio-button>
+      </paper-radio-group>
     </div>
     
     <div id="parent">