Fill color support for rect, ellipse (fix #83) (#35)

edemaine · Aug 27, 2020 · 3933781 · 3933781
1 parent e55572b
commit 3933781
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 19 deletions.
diff --git a/client/lib/icons.coffee b/client/lib/icons.coffee
@@ -42,6 +42,8 @@ icons =
     '<path d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"/>'
   spinner:
     '<path d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"/>'
+  tint:
+    '<path d="M285.2,22.1c-7.9-28.8-49.4-30.1-58.4,0C180,179.9,80,222.7,80,333.9C80,432.4,158.7,512,256,512s176-79.6,176-178.1C432,222.2,332.2,180.6,285.2,22.1z M256,448c-61.8,0-112-50.3-112-112c0-8.8,7.2-16,16-16s16,7.2,16,16c0,44.1,35.9,80,80,80c8.8,0,16,7.2,16,16S264.8,448,256,448z"/>'
   undo:
     '<path d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"/>'
 
@@ -68,6 +70,9 @@ icons =
     '<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"/>'
   text: # combination of font and i-cursor (with 16px offset subtracted)
     '<path d="M514,52V12c0-6.6-5.3-11.9-11.8-12C469.6-0.3,424.5,0,386,38C348.3,0.7,305-0.1,269.9,0.1c-6.6,0-11.9,5.4-11.9,12v39.6c0,6.7,5.5,12.1,12.1,12c26-0.3,83.9,3.5,83.9,48.4V224h-36c-6.6,0-12,5.4-12,12v40c0,6.6,5.4,12,12,12h36v112c0,44.9-56.1,48-84,48c-6.6,0-12,5.3-12,12v40c0,6.6,5.3,11.9,11.8,12c32.5,0.4,77.7,0.1,116.2-37.9c37.7,37.2,81,38.1,116.1,37.8c6.6,0,11.9-5.4,11.9-12v-39.6c0-6.7-5.5-12.1-12.1-12c-26,0.3-83.9-3.3-83.9-48.2V288h36c6.6,0,12-5.4,12-12v-40c0-6.6-5.4-12-12-12h-36V112.2c0-44.9,56.1-48.2,84-48.1C508.6,64.1,514,58.7,514,52z M310.2,410.9l-129-357.5C176.9,40.6,164.9,32,151.3,32h-46.6c-13.5,0-25.6,8.6-29.9,21.4L0,260.9v213.2h49.1c8.7,0,15.8-7.1,15.8-15.8v-31.6c0-8.7-7.1-15.8-15.8-15.8H29.8l23-63.2h150.6l23,63.2H207c-8.7,0-15.8,7.1-15.8,15.8v31.6c0,8.7,7.1,15.8,15.8,15.8h39V460c0-13.2,10.8-24,24-24c49.4,0,64.9-12.8,69.8-23.6c-2-0.9-4.2-1.4-6.5-1.4H310.2z M81.6,268.8L128,141l46.5,127.8H81.6z"/>'
+  'tint-slash': # modification to tilt-slash to fit in 512x512,
+                # with 45-degree slash taken from fill icon
+    '<path d="M118,221.8c-22.1,34.2-38,67.7-38,112.1C80,432.3,158.7,512,256,512c42.5,0,81.4-15.2,111.7-40.5L118,221.8z M256,448c-61.8,0-112-50.3-112-112c0-8.8,7.2-16,16-16c8.8,0,16,7.2,16,16c0,44.1,35.9,80,80,80c8.8,0,16,7.2,16,16C272,440.8,264.8,448,256,448z M503,471c-12.5,12.5-32.8,12.5-45.2,0l-48.8-48.8l0,0L36.7,50c-6.2-6.3-6.2-16.4,0-22.6L59.3,4.8c6.2-6.3,16.4-6.3,22.6,0l107.5,107.5c14-25.7,27-55.1,37.4-90.1c9-30.1,50.5-28.8,58.4,0C332.2,180.6,432,222.2,432,333.9c0,6.7-0.4,13.3-1.1,19.8l72.1,72.1C515.5,438.3,515.5,458.5,503,471z"/>'
 
 export viewSize = 512
 

diff --git a/client/main.coffee b/client/main.coffee
@@ -228,16 +228,17 @@ tools =
     down: (e) ->
       return if pointers[e.pointerId]
       origin = eventToPoint e
+      object =
+        room: currentRoom
+        page: currentPage
+        type: 'rect'
+        pts: [origin, origin]
+        color: currentColor
+        width: currentWidth
+      object.fill = currentFill if currentFillOn
       pointers[e.pointerId] =
         origin: origin
-        id: Meteor.apply 'objectNew', [
-          room: currentRoom
-          page: currentPage
-          type: 'rect'
-          pts: [origin, origin]
-          color: currentColor
-          width: currentWidth
-        ], returnStubValue: true
+        id: Meteor.apply 'objectNew', [object], returnStubValue: true
     up: (e) ->
       return unless pointers[e.pointerId]
       undoableOp
@@ -268,16 +269,17 @@ tools =
     down: (e) ->
       return if pointers[e.pointerId]
       origin = eventToPoint e
+      object =
+        room: currentRoom
+        page: currentPage
+        type: 'ellipse'
+        pts: [origin, origin]
+        color: currentColor
+        width: currentWidth
+      object.fill = currentFill if currentFillOn
       pointers[e.pointerId] =
         origin: origin
-        id: Meteor.apply 'objectNew', [
-          room: currentRoom
-          page: currentPage
-          type: 'ellipse'
-          pts: [origin, origin]
-          color: currentColor
-          width: currentWidth
-        ], returnStubValue: true
+        id: Meteor.apply 'objectNew', [object], returnStubValue: true
     up: (e) ->
       return unless pointers[e.pointerId]
       undoableOp
@@ -722,6 +724,8 @@ colors = [
   '#eced00' # custom yellow
 ]
 currentColor = 'black'
+currentFill = 'white'
+currentFillOn = false
 
 widths = [
   1
@@ -1131,7 +1135,7 @@ class Render
       stroke: obj.color
       'stroke-width': obj.width
       'stroke-linejoin': 'round'
-      fill: 'none'
+      fill: obj.fill or 'none'
     rect
   renderEllipse: (obj) ->
     id = @id obj
@@ -1149,7 +1153,7 @@ class Render
       ry: (yMax - yMin) / 2
       stroke: obj.color
       'stroke-width': obj.width
-      fill: 'none'
+      fill: obj.fill or 'none'
     ellipse
   renderText: (obj, options) ->
     id = @id obj
@@ -1764,6 +1768,23 @@ selectDrawingTool = ->
   unless currentTool of drawingTools
     selectTool lastDrawingTool
 
+paletteFill = ->
+  document.getElementById('fillOn').innerHTML =
+    icons.svgIcon icons.modIcon 'tint', fill: 'currentColor'
+  document.getElementById('fillOff').innerHTML =
+    icons.svgIcon icons.modIcon 'tint-slash', fill: 'currentColor'
+  dom.listen document.getElementById('fillTool'),
+    click: (e) ->
+      currentFillOn = not currentFillOn
+      updateFill()
+  updateFill()
+updateFill = ->
+  document.getElementById('fillOn').style.display =
+    if currentFillOn then 'block' else 'none'
+  document.getElementById('fillOff').style.display =
+    if currentFillOn then 'none' else 'block'
+  document.getElementById('fillTool').style.color = currentFill
+
 paletteColors = ->
   colorsDiv = document.getElementById 'colors'
   for color in colors
@@ -1772,7 +1793,9 @@ paletteColors = ->
       style: backgroundColor: color
       dataset: color: color
     ,
-      click: (e) -> selectColor e.currentTarget.dataset.color
+      click: (e) ->
+        (if e.shiftKey then selectFill else selectColor) \
+          e.currentTarget.dataset.color
 
 widthSize = 22
 paletteWidths = ->
@@ -1854,6 +1877,15 @@ selectColor = (color, keepTool) ->
   if currentTool == 'pen'
     icons.setCursor board.svg, penIcon(currentColor), ...tools[currentTool].hotspot
 
+selectFill = (color) ->
+  currentFill = color
+  currentFillOn = true
+  updateFill()
+  if selection.nonempty()
+    selection.edit 'fill', currentFill
+    keepTool = true
+  selectDrawingTool() unless keepTool
+
 selectWidth = (width, keepTool) ->
   currentWidth = parseFloat width if width?
   if selection.nonempty()
@@ -1896,6 +1928,7 @@ Meteor.startup ->
   paletteTools()
   paletteWidths()
   paletteFontSizes()
+  paletteFill()
   paletteColors()
   selectTool()
   selectColor null, true

diff --git a/client/main.pug b/client/main.pug
@@ -25,6 +25,9 @@ body
   #attribs.bottom.horizontal.palette.historyHide
     #widths.subpalette.textHide
     #fontSizes.subpalette.textShow
+    #fillTool.subpalette
+      #fillOn.attrib.active
+      #fillOff.attrib
     #colors.subpalette
   #history.bottom.horizontal.palette.historyShow
     input#historyRange.history(type="range", min="0", max="0", title="Drag to time travel through history")

diff --git a/lib/objects.coffee b/lib/objects.coffee
@@ -47,6 +47,7 @@ Meteor.methods
             check pts, [xyType]
             pts.length == 2
           color: String
+          fill: Match.Optional String
           width: Number
       when 'text'
         Object.assign pattern,