light9 Changeset - 20f48a0e7135

Changeset - 20f48a0e7135

Parent rev.

Child rev.

[Not reviewed]

default

0 4 0

Drew Perttula - 8 years ago 2017-05-28 09:05:37
drewp@bigasterisk.com

hover mode shows best match
Ignore-this: 3b25ed8ebb8e6be38a3afa0d077e78ba

4 files changed with 38 insertions and 8 deletions:

light9/web/lib/bower.json

light9/web/paint/index.html

light9/web/paint/paint-elements.coffee

light9/web/paint/paint-elements.html

0 comments (0 inline, 0 general)

light9/web/lib/bower.json

➞

Show inline comments

+{
   "name": "3rd-party libs",
   "dependencies": {
     "polymer": "~1.4.0",
     "paper-slider": "PolymerElements/paper-slider#~1.0.11",
     "iron-ajax": "PolymerElements/iron-ajax#~1.2.0",
     "jquery": "~2.2.4",
     "underscore": "~1.8.3",
     "jquery-ui": "~1.11.4",
     "QueryString": "http://unixpapa.com/js/QueryString.js",
     "knockout": "knockoutjs#^3.4.0",
     "sylvester": "~0.1.3",
     "d3": "https://github.com/d3/d3.git#e7194db33090a0afc06c77a959594361ffb949df",
     "rdflib.js": "https://github.com/linkeddata/rdflib.js.git#920e59fe37",
     "rdfstore": "https://github.com/antoniogarrote/rdfstore-js.git#b3f7c0c9c1da9b26261af0d4858722fa982411bb",
     "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"
+  }
+}

light9/web/paint/index.html

➞

Show inline comments

 <!doctype html>
 <html>
   <head>
     <title>paint</title>
     <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>
      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>

light9/web/paint/paint-elements.coffee

➞

Show inline comments

 class Painting
   constructor: ->
     @strokes = []
   addStroke: (pts, color) ->
     @strokes.push({pts: pts, color: color})
   hover: (pos) ->
     @strokes = [{pts: [pos, [pos[0], pos[1] + .01]], color: "#ffffff"}]
   getDoc: ->
     {strokes: @strokes}
 class Stroke
   constructor: (pos, @color, @size) ->
     @path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
     @path.setAttributeNS(null, 'd', "M #{pos[0]*@size[0]} #{pos[1]*@size[1]}")
     @pts = [pos]
     @lastPos = pos
   appendElem: (parent) ->
     parent.appendChild(@path)
   move: (pos) ->
     if Math.hypot(pos[0] - @lastPos[0], pos[1] - @lastPos[1]) < .02
       return
     @path.attributes.d.value += " L #{pos[0]*@size[0]} #{pos[1]*@size[1]}"
     @pts.push(pos)
     @lastPos = pos
 Polymer
   is: "light9-paint-canvas"
   behaviors: [ Polymer.IronResizableBehavior ]
   listeners: 'iron-resize': 'onResize'
   properties: {
     bg: { type: String },
     tool: { type: String },
     painting: { type: Object } # output
+  }
   ready: ->
     @onResize()
     @painting = new Painting()
     @$.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(@))
     @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) ->
     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) ->
     switch @tool
       when "hover"
         @hover(ev)
       when "paint"
     # ..or move selection
     return unless @stroke
     @stroke.move(@evPos(ev))
   onUp: (ev) ->
     return unless @stroke
     @painting.addStroke(@stroke.pts, @stroke.color)
     @stroke = null
     @notifyPath('painting.strokes.length') # not working
     @fire('paintingChanged', @painting)
   onResize: (ev) ->
     @size = [@$.parent.offsetWidth, @$.parent.offsetHeight]
     @$.paint.attributes.viewBox.value = "0 0 #{@size[0]} #{@size[1]}"
 Polymer
   is: "light9-simulation"
   properties: {
     layers: { type: Object }
     solution: { type: Object }
+  }
   listeners: [

light9/web/paint/paint-elements.html

➞

Show inline comments

 <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>
      :host {
          display: block;
+     }
      #parent {
          position: relative;
          height: 500px;
+     }
      #parent > * {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 500px;
+     }
      #toolbar {
          background: #a7a7a7;
+     }
      svg > path {
          fill:none;
          stroke:rgba(255, 255, 255, 0.66);
          stroke-width:80;
          filter:url(#blur);
          stroke-linecap:butt;
          stroke-linejoin:miter;
          stroke-miterlimit:4;
+     }
     </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">
       <img src="{{bg}}">
       <svg id="paint" viewBox="0 0 500 221">
         <defs id="defs12751">
           <filter
               style="color-interpolation-filters:sRGB"
               id="blur"
               x="-1.0"
               y="-1.0"
               width="3.0"
               height="3.0"
+          >
             <feGaussianBlur
                 stdDeviation="20"
                 k2="1.01"
                 result="result1"
             ></feGaussianBlur>
             <!--   <feMorphology
                  in="result1"
                  operator="dilate"
                  radius="3.39"
                  result="result3"

0 comments (0 inline, 0 general)