Rectangle drawing support (#35)

client/lib/dom.coffee

@@ -5,6 +5,7 @@ svgTags =
   g: true
   line: true
   polyline: true
+  rect: true
   circle: true
 
 export create = (tag, attrs, props, events, children) ->

client/lib/icons.coffee

@@ -39,8 +39,9 @@ icons =
   'download-svg': # heavily edited file-download-solid plus "SVG" in Impact font
     '<path d="M424,0h-97.9H320h-32H88C74.7,0,64,10.7,64,24v159v305c0,13.3,10.7,24,24,24h336c13.3,0,24-10.7,24-24V183v-23v-32v-6.1V24 C448,10.7,437.3,0,424,0z M364.5,377.4L268,473.1c-6.7,6.6-17.4,6.6-24,0l-96.4-95.7c-10.2-10.1-3-27.4,11.3-27.4H224v-80 c0-8.8,7.2-16,16-16h32c8.8,0,16,7.2,16,16v80h65.2C367.5,350,374.6,367.3,364.5,377.4z M192,101h-38.3V88.2c0-6-0.5-9.8-1.5-11.4 c-1-1.6-2.6-2.5-4.9-2.5c-2.5,0-4.4,1.1-5.6,3.3c-1.3,2.2-1.9,5.6-1.9,10.1c0,5.8,0.7,10.1,2.1,13.1c1.4,2.9,5.2,6.5,11.6,10.6 c18.3,11.9,29.9,21.7,34.7,29.3c4.8,7.6,7.1,19.9,7.1,36.9c0,12.3-1.3,21.4-4,27.3c-2.6,5.8-7.7,10.7-15.3,14.7 c-7.6,4-16.4,5.9-26.4,5.9c-11,0-20.4-2.3-28.2-6.8c-7.8-4.6-12.9-10.4-15.3-17.4c-2.4-7.1-3.6-17.1-3.6-30v-11.3h38.3v21.1 c0,6.5,0.5,10.7,1.6,12.5c1.1,1.9,3,2.8,5.7,2.8c2.7,0,4.8-1.2,6.1-3.5c1.3-2.4,2-5.8,2-10.5c0-10.2-1.3-16.9-3.8-20 c-2.6-3.1-9-8.4-19.3-15.7c-10.2-7.4-17-12.8-20.4-16.1c-3.3-3.4-6.1-8-8.3-13.9c-2.2-5.9-3.3-13.5-3.3-22.7c0-13.3,1.5-23,4.6-29.1 c3.1-6.1,8.1-10.9,15-14.4c6.9-3.5,15.3-5.2,25.1-5.2c10.7,0,19.8,1.9,27.4,5.7c7.5,3.8,12.5,8.5,15,14.3c2.4,5.7,3.7,15.5,3.7,29.2 V101z M306.3,48.6l-21,173.1h-62.6L198.9,48.6h43.5c5.1,47.7,8.7,88,10.8,121c2.1-33.4,4.4-63,6.8-88.9l2.9-32.2H306.3z M407.8,112.3h-41.2V96.6c0-9.9-0.4-16.1-1.2-18.6c-0.8-2.5-2.6-3.7-5.6-3.7c-2.5,0-4.3,1.1-5.2,3.2c-0.9,2.1-1.4,7.6-1.4,16.5V177 c0,7.8,0.5,12.9,1.4,15.3c0.9,2.5,2.7,3.7,5.5,3.7c3,0,5-1.4,6.1-4.2c1.1-2.8,1.6-8.2,1.6-16.3v-20.5h-8.3v-26.3h48.3v92.9h-25.9 l-3.8-12.4c-2.8,5.3-6.4,9.4-10.6,12c-4.3,2.7-9.3,4-15.1,4c-6.9,0-13.4-1.8-19.4-5.5c-6-3.7-10.6-8.2-13.8-13.6 c-3.1-5.4-5.1-11.1-5.9-17.1c-0.8-6-1.2-14.9-1.2-26.8v-51.4c0-16.5,0.8-28.5,2.4-36c1.6-7.5,6.3-14.3,14-20.6 c7.7-6.2,17.7-9.4,30-9.4c12.1,0,22.1,2.7,30,8.1c8,5.4,13.1,11.9,15.6,19.3c2.4,7.4,3.6,18.3,3.6,32.5V112.3z"/>'
   grid: # edited border-all to extend (more) beyond square
-    #'<rect x="32" width="64" height="512"/><rect x="224" width="64" height="512"/><rect x="416" width="64" height="512"/><rect y="32" width="512" height="64"/><rect y="224" width="512" height="64"/><rect y="416" width="512" height="64"/>'
     '<rect x="52" width="64" height="512"/><rect x="224" width="64" height="512"/><rect x="396" width="64" height="512"/><rect y="52" width="512" height="64"/><rect y="224" width="512" height="64"/><rect y="396" width="512" height="64"/>'
+  rect: # edited square to have wider aspect ratio
+    '<path d="M462,52H50C23.5,52,2,73.5,2,100v312c0,26.5,21.5,48,48,48h412c26.5,0,48-21.5,48-48V100C510,73.5,488.5,52,462,52zM456,412H56c-3.3,0-6-2.7-6-6V106c0-3.3,2.7-6,6-6h400c3.3,0,6,2.7,6,6v300C462,409.3,459.3,412,456,412z"/>'
   segment: # based on line thickness from grid / border-all
     '<path d="M32,512c-8.2,0-16.4-3.1-22.6-9.4c-12.5-12.5-12.5-32.8,0-45.3l448-448c12.5-12.5,32.8-12.5,45.3,0c12.5,12.5,12.5,32.8,0,45.3l-448,448C48.4,508.9,40.2,512,32,512z"/>'
 

client/main.coffee

@@ -112,6 +112,33 @@ tools =
       pointers.throttle
         id: pointers[e.pointerId]
         pts: 1: eventToPoint e
+  rect:
+    icon: 'rect'
+    hotspot: [0.05664, 0.841796875]
+    title: 'Draw axis-aligned rectangles between endpoints (drag)'
+    start: ->
+      pointers.throttle = throttle.method 'objectEdit'
+    down: (e) ->
+      return if pointers[e.pointerId]
+      pt = eventToPoint e
+      pointers[e.pointerId] = Meteor.apply 'objectNew', [
+        room: currentRoom
+        type: 'rect'
+        pts: [pt, pt]
+        color: currentColor
+        width: currentWidth
+      ], returnStubValue: true
+    up: (e) ->
+      return unless pointers[e.pointerId]
+      undoableOp
+        type: 'new'
+        obj: Objects.findOne pointers[e.pointerId]
+      delete pointers[e.pointerId]
+    move: (e) ->
+      return unless pointers[e.pointerId]
+      pointers.throttle
+        id: pointers[e.pointerId]
+        pts: 1: eventToPoint e
   eraser:
     icon: 'eraser'
     hotspot: [0.35, 1]
@@ -199,7 +226,7 @@ tools =
           count++
           break if count > target
           switch diff.type
-            when 'pen', 'poly'
+            when 'pen', 'poly', 'rect'
               obj = diff
               historyObjects[obj.id] = obj
               historyRender.render obj
@@ -492,12 +519,32 @@ class Render
       'stroke-linecap': 'round'
       'stroke-linejoin': 'round'
       fill: 'none'
+  renderRect: (obj) ->
+    id = @id obj
+    unless (poly = @dom[id])?
+      @root.appendChild @dom[id] = poly =
+        dom.create 'rect', null, dataset: id: id
+    xMin = Math.min obj.pts[0].x, obj.pts[1].x
+    xMax = Math.max obj.pts[0].x, obj.pts[1].x
+    yMin = Math.min obj.pts[0].y, obj.pts[1].y
+    yMax = Math.max obj.pts[0].y, obj.pts[1].y
+    dom.attr poly,
+      x: xMin
+      y: yMin
+      width: xMax - xMin
+      height: yMax - yMin
+      stroke: obj.color
+      'stroke-width': obj.width
+      'stroke-linejoin': 'round'
+      fill: 'none'
   render: (obj, ...args) ->
     switch obj.type
       when 'pen'
         @renderPen obj, ...args
       when 'poly'
         @renderPoly obj, ...args
+      when 'rect'
+        @renderRect obj, ...args
   delete: (obj) ->
     id = @id obj
     unless @dom[id]?

lib/objects.coffee

@@ -40,6 +40,18 @@ Meteor.methods
           pts: [xyType]
           color: String
           width: Number
+      when 'rect'
+        check obj,
+          _id: Match.Optional String
+          created: Match.Optional Date
+          updated: Match.Optional Date
+          room: String
+          type: 'rect'
+          pts: Match.Where (pts) ->
+            check pts, [xyType]
+            pts.length == 2
+          color: String
+          width: Number
       else
         throw new Error "Invalid type #{obj?.type} for object"
     unless @isSimulation