light9 Changeset - ef7ddef3acb5

Changeset - ef7ddef3acb5

Parent rev.

Child rev.

[Not reviewed]

default

0 3 0

Drew Perttula - 8 years ago 2017-05-29 08:31:26
drewp@bigasterisk.com

clean up Painting & Stroke. hover now shows up. add Clear command
Ignore-this: 96a6b026ac4020d021e622cc6c5afa1f

3 files changed with 42 insertions and 18 deletions:

light9/web/paint/paint-elements.coffee

light9/web/paint/paint-elements.html

light9/web/paint/paint-report-elements.html

0 comments (0 inline, 0 general)

light9/web/paint/paint-elements.coffee

➞

Show inline comments

 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')
@@ @@ -21,6 +36,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
       return
@@ @@ -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

light9/web/paint/paint-elements.html

➞

Show inline comments

@@ @@ -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"

light9/web/paint/paint-report-elements.html

➞

Show inline comments

@@ @@ -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">

0 comments (0 inline, 0 general)