Merge pull request #58 from STRd6/brush-options

brush options

Author: STRd6

actions.coffee.md

@@ -188,7 +188,7 @@ Actions
                 image: blob
                 state: JSON.stringify(editor.saveState())
               , "*"
-    
+
         icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAC4klEQVQ4T32T70tTURjHv8fpppuaQkuhlgU2f4wCs6b4QpxLod9BJSaYEOS7+gOiF/VCYvjKepf0IsFfU6wxUSNFiALJ9NWi7AelbmbX2qZzv9zdvT3nSOAMei6Xe++55/mc7/N9zmGgGBsb06Wnp19QVfVaMpkspaEjynZ4aOwLPZ8kEomppqamJJ+/Mxgll2s0mv6CgoJjhYWFMBgM0Ov1oESsr68jFAphcXERkiS9prFmgvhSABMTE9NlZWV1JpMJjLHdC4hvWZbh8XiwsLDQ09zc3JYCGB8fl2w2m1Gr1f4XEAgEMDk5udbS0rJvdwkCEAwGkZmZCZ1Oh4yMDFFCJBKB3++H1+tFcXExpqam1lpbW1MBo6OjUn19vTEcDot6Y7GYSOayuQfxeBxkMMxms1DQ1taWCnC73QLAJ/JknsgTHjz3I0cHRLZk5GdrsSJFwdKAbL0GisoQ2Iji5exSFXO5XJLdbjdyudFoVAC4H/cHf+KsrQSXjmfDPePF+eoDKQY/nV7D9NtvYCMjI1JDQ4Nxc3NT1MwB3Ic7vT9grynFjbo83H40h4e3KgUgJgNbtBsej/nw/vMy2PDwsNTY2ChM5ADaSAJwb+gXTlWVoKU2F4yuNOqwSgBFUalbgGPoO+Y/EMDpdAoAd5sDaNchKysLDlcAJyyH4PsdEslyUoFCN4dwk/mLb2UFbGBgQLJarUYKrK6uCh84oOOZHxXlJjKLNNNsWU4KOFegqAp9J6i9BOjt7T1DP5wWi8VQVFQk5PMdeb1zHvaTJbhSmwVZ2SIItYAvzBRkpmvR2beEWc8nKo6iu7v7MLXuLoEu07nYw89Cn6cQp6uO4mJtAt2z7dhrOMidwFp4Ge3WLnT1xzE9924bsDMcDkcOlVD8Klg5f/NcORor/JgJDCJPu1+ICMYkVOdfRUdPEi9m5v4F/IVVtE+8MZv0NXm6fJKcS2UkwMgDppIXLIKPS18hbSTwB3tLeq03+hLeAAAAAElFTkSuQmCC"
 
 

brushes.coffee.md

@@ -1,17 +1,62 @@
 Brushes
 =======
 
+    require "./util"
+
 A brush takes a point and returns a list of points.
 
+    tiny = """
+      1
+    """
+
+    small = """
+      010
+      111
+      010
+    """
+
+    big = """
+      01110
+      11111
+      11111
+      11111
+      01110
+    """
+
+    bigger = """
+      0011100
+      0111110
+      1111111
+      1111111
+      1111111
+      0111110
+      0011100
+    """
+
+    sizes = [tiny, small, big, bigger].map (data) ->
+      rows = data.split('\n')
+
+      offset = Math.floor rows[0].length / 2
+
+      points = rows.reduce (array, row, y) ->
+        y -= offset
+        row.split('').forEach (c, x) ->
+          x -= offset
+          if c is '1'
+            array.push Point(x, y)
+
+        return array
+      , []
+
+      (point) ->
+        points.map (brushPoint) ->
+          brushPoint.add(point)
+
+    # TODO: use these arrays as sizes
+
     module.exports =
-      pencil: (point) ->
-        [point]
-
-      brush: ({x, y}) ->
-        [
-          Point x, y - 1
-          Point x - 1, y
-          Point x, y
-          Point x + 1, y
-          Point x, y + 1
-        ]
+      pencil: sizes[0]
+
+      brush: sizes[1]
+
+      sizes: sizes

editor.coffee.md

@@ -466,4 +466,10 @@ Editor
 
       initialState = self.getSnapshot()
 
+      document.addEventListener "mousedown", (e) ->
+        return if e.path.some (node) ->
+          node.classList?.contains "panel"
+        
+        self.detailTool null
+
       return self

presenters/tool.coffee

@@ -0,0 +1,20 @@
+Observable = require "observable"
+
+module.exports = (editor, tool) ->
+  self =
+    activate: -> 
+      editor.activeTool(tool)
+    activeClass: -> 
+      "active" if tool is editor.activeTool()
+    detail: ->
+      editor.detailTool(tool)
+    detailClass: ->
+      "panelOpen" if tool is editor.detailTool()
+
+    style: ->
+      "background-image: url(#{tool.iconUrl})"
+
+    title: ->
+      tool.hotkeys
+
+    settings: tool.settings

shims.coffee

@@ -0,0 +1,13 @@
+
+# Event#path polyfill
+# NOTE: In Chrome this includes `window` but here we only get up to `document`
+unless "path" of Event.prototype
+  Object.defineProperty Event.prototype, "path",
+    get: ->
+      path = []
+      node = @target
+      while node
+         path.push node
+         node = node.parentNode
+
+      return path

style.styl

@@ -125,6 +125,28 @@ body
     border-left: 1px solid rgba(255, 255, 255, 0.5)
     cursor: pointer
 
+    & > .panel
+      background-color: #eee
+      border-bottom: 1px solid rgba(0, 0, 0, 0.5)
+      border-right: 1px solid rgba(0, 0, 0, 0.5)
+      border-top: 1px solid rgba(255, 255, 255, 0.5)
+      display: none
+      margin-top: -1px
+      margin-left: 35px
+      padding: 3px
+      padding-bottom: 4px
+      position: absolute
+      z-index: 10
+
+    &.panelOpen
+      border-right: 1px solid #eee
+
+      &:empty
+        border-right: 1px solid rgba(0, 0, 0, 0.5)
+
+      & > .panel
+        display: inline-block
+
     &:last-child
       border-bottom-right-radius: 2px
 

templates/editor.haml.md

@@ -6,6 +6,8 @@ Editor template
     - editor = this
     - Symmetry = require "../symmetry"
     - Palette = require "./palette"
+    - Tool = require "./tool"
+    - ToolPresenter = require "../presenters/tool"
 
     .editor
 
@@ -14,9 +16,7 @@ The toolbar holds our tools.
       .toolbar
         .tools
           - @tools.each (tool) ->
-            - activeClass = -> "active" if tool is activeTool()
-            - activate = -> activeTool(tool)
-            .tool(style="background-image: url(#{tool.iconUrl})" title=tool.hotkeys class=activeClass click=activate)
+            = Tool ToolPresenter(editor, tool)
         %h2 Symmetry
         .tools
           - symmetryMode = @symmetryMode

templates/tool.jadelet

@@ -0,0 +1,5 @@
+- ToolPanel = require "./tool_panel"
+
+.tool(style=@style title=@title class=@activeClass class=@detailClass click=@activate dblclick=@detail)
+  - if @settings
+    = ToolPanel(@settings)

templates/tool_panel.jadelet

@@ -0,0 +1,3 @@
+.panel
+  - if size = @size
+    input(type=size.type min=size.min max=size.max value=size.value)

tools.coffee.md

@@ -4,10 +4,6 @@ Tools
     Brushes = require "./brushes"
     {circle, line, rect, rectOutline, endDeltoid} = require "./util"
 
-    line2 = (start, end, fn) ->
-      fn start
-      line start, end, fn
-
     neighbors = (point) ->
       [
         {x: point.x, y: point.y-1}
@@ -38,45 +34,50 @@ Tools
         editor.restore()
         fn(editor, editor.canvas, start, end)
 
-    brushTool = (brushName, hotkey, offsetX, offsetY, icon, options) ->
+    sizedTool = (hotkey, offsetX, offsetY, icon, options) ->
       previousPosition = null
-      brush = Brushes[brushName]
 
       OP = (out) ->
         (p) ->
           out(p, options)
 
       paint = (out) ->
-        (x, y) ->
-          brush({x, y}).forEach OP out
+        (p) ->
+          brush = Brushes.sizes[self.settings.size.value()]
 
-      hotkeys: hotkey
-      iconUrl: icon
-      iconOffset:
-        x: offsetX
-        y: offsetY
-      touch: ({position, editor})->
-        paint(editor.draw) position.x, position.y
-        previousPosition = position
-      move: ({editor, position})->
-        line previousPosition, position, paint(editor.draw)
-        previousPosition = position
-      release: ->
-        previousPosition = null
+          brush(p).forEach OP out
+
+      self =
+        hotkeys: hotkey
+        iconUrl: icon
+        iconOffset:
+          x: offsetX
+          y: offsetY
+        touch: ({position, editor})->
+          paint(editor.draw) position
+          previousPosition = position
+        move: ({editor, position})->
+          line previousPosition, position, paint(editor.draw)
+          previousPosition = position
+        release: ->
+          previousPosition = null
+        settings:
+          size:
+            type: 'range'
+            min: 0
+            max: 3
+            value: Observable 0
 
 Default tools.
 
     TOOLS =
 
 Draw a line when moving while touching.
 
-      pencil: brushTool "pencil", "p", 4, 14,
+      pencil: sizedTool "p", 4, 14,
         "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA5klEQVQ4T5VTuw2DMBB9LmkZg54ZGCDpHYkJYBBYATcUSKnSwAy0iDFoKR0fDgiMDc5JLvy59969OzPchzSesP3+sLFgySoMweMYou/xmWe81VKx5d0CyCQBoghoGgiV/JombwDNzjkwjsAw/A8gswwgBWm6VPdU7L4laPa6BsrSyX6oxTBQ7munO1v9LgCv2ldCWxcWgDV4EDjZbQq0dDKv65ytuxokKdtWO08AagkhTr2/BiD2otBv8hyMurCbPHNaTQ8OBjJScZFs9eChTKMwB8byT5ajkwIC8E22AvyY7j7ZJugLVIZ5EV8R1SQAAAAASUVORK5CYII="
 
-      brush: brushTool "brush", "b", 4, 14,
-        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAAKBJREFUeJytkrsRgzAQRFeME6UXXwVUogKoRB2JmAagEEqBcB0ge/Dw0cm2ZpTd7tuTFqg/zBcA0NSKkwg6719G1WJSlUnkI4XZgCGQql+tQKoCbYt+WWrB2SDGA92aYKMD/6dbEjCJAPP8A73wbe5OnAuDYV1LsyfkEMgYi4W5ciW56Zxzt/THBR2YJmAcbXn34s77d+dh6Ps+2tlw8eGedfBU8rnbDOMAAAAASUVORK5CYII="
-
-      eraser: brushTool "pencil", "e", 4, 11,
+      eraser: sizedTool "e", 4, 11,
         "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAAIdJREFUeJzNUsERwCAIw15n031wDt0Hl0s/9VoF9NnmZzRBCERfI2zusdOtDABmopRGVoRCrdviADNMiADM6L873Mql2NYiw3E2WItzVi2dSuw8JBHNvQyegcU4vmjNFesWZrHFTSlYQ/RhRDgatKZFnXPy7zMIoVaYa3fH5i3PTHira4r/gQv1W1E4p9FksQAAAABJRU5ErkJggg==",
         color: "transparent"
 
@@ -194,14 +195,13 @@ Shapes
           circle start, end, (x, y) ->
             editor.draw({x, y})
 
-      line2: shapeTool "l", 0, 0,
+      line: shapeTool "l", 0, 0,
         "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAV0lEQVQ4T6XSyQ0AIAgEQOm/aIWHxoNzJTG+GASk9hnE+Z2P3FDMRBjZK0PI/fQyovVeQqzhpRFv+ikkWl+IRID8DRfJAC6SBUykAqhIFXgQBDgQFFjIAMAADxGQlO+iAAAAAElFTkSuQmCC"
         (editor, canvas, start, end) ->
           color = editor.activeColor()
 
           # Have to draw our own lines if we want them crisp ;_;
-          line start, end, (x, y) ->
-            editor.draw {x, y}
+          line start, end, editor.draw
 
     module.exports = (I={}, self=Core(I)) ->
       self.extend
@@ -213,6 +213,7 @@ Shapes
           self.tools.push tool
 
         activeTool: Observable()
+        detailTool: Observable()
         previousTool: Observable()
 
         tools: Observable []

util.coffee.md

@@ -2,6 +2,7 @@ Util
 ====
 
     require "extensions"
+    require "./shims"
 
     global.Bindable = require "bindable"
     global.Matrix = require "matrix"
@@ -77,7 +78,9 @@ Call an iterator for each integer point on a line between two integer points.
             err += dx
             y0 += sy
 
-          iterator x0, y0
+          iterator
+            x: x0
+            y: y0
 
       rect: (start, end, iterator) ->
         [start.y..end.y].forEach (y) ->