Skip to content

Commit

Permalink
Rectangle drawing support (#35)
Browse files Browse the repository at this point in the history
  • Loading branch information
edemaine committed Jun 10, 2020
1 parent 340bce9 commit d518afd
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 2 deletions.
1 change: 1 addition & 0 deletions client/lib/dom.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ svgTags =
g: true
line: true
polyline: true
rect: true
circle: true

export create = (tag, attrs, props, events, children) ->
Expand Down
3 changes: 2 additions & 1 deletion client/lib/icons.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>'

Expand Down
49 changes: 48 additions & 1 deletion client/main.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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]?
Expand Down
12 changes: 12 additions & 0 deletions lib/objects.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit d518afd

Please sign in to comment.