feat: different feedback on cancel (#41)

Fixes #32

src/layout/connect.js

@@ -103,9 +103,10 @@ export default (
     lowerStroke = null;
   };
 
-  const showGestureFeedback = () => {
+  const showGestureFeedback = isCanceled => {
     gestureFeedback.show(
-      lowerStroke ? [...lowerStroke, ...upperStroke] : upperStroke
+      lowerStroke ? [...lowerStroke, ...upperStroke] : upperStroke,
+      isCanceled
     );
   };
 
@@ -140,7 +141,7 @@ export default (
         // eslint-disable-next-line no-param-reassign
         parentDOM.style.cursor = '';
         if (menu) closeMenu();
-        showGestureFeedback();
+        showGestureFeedback(notification.type === 'cancel');
         clearUpperStroke();
         clearLowerStroke();
         break;

src/layout/gesture-feedback.js

@@ -1,10 +1,16 @@
 import createStrokeCanvas from './stroke';
 
-export default (parentDOM, { duration, ...strokeOptions }) => {
+export default (
+  parentDOM,
+  { duration, strokeOptions = {}, canceledStrokeOptions = {} }
+) => {
   let strokeTimeoutEntries = [];
 
-  const show = stroke => {
-    const canvas = createStrokeCanvas(parentDOM, strokeOptions);
+  const show = (stroke, isCanceled = false) => {
+    const canvas = createStrokeCanvas(parentDOM, {
+      ...strokeOptions,
+      ...(isCanceled ? canceledStrokeOptions : {})
+    });
     canvas.drawStroke(stroke);
     const timeoutEntry = {
       canvas,

src/layout/gesture-feedback.test.js

@@ -26,25 +26,46 @@ describe('createGestureFeedback#draw', () => {
     // Create the stroke canvas and show a stroke for 50ms.
     gs = createGestureFeedback('mock-div', {
       duration: 50,
-      strokeArg1: 'foo',
-      strokeArg2: 'bar'
+      strokeOptions: {
+        strokeArg1: 'arg1',
+        strokeArg2: 'arg2'
+      },
+      canceledStrokeOptions: {
+        strokeArg1: 'canceledArg1',
+        canceledStrokeArg3: 'canceledArg3'
+      }
     });
-    gs.show('mock-stroke');
   });
 
   it('draw a stroke', () => {
+    gs.show('mock-stroke');
     // Expect the stroke canvas to have been properly created.
     expect(createStrokeCanvas).toHaveBeenCalledTimes(1);
     expect(createStrokeCanvas).toHaveBeenCalledWith('mock-div', {
-      strokeArg1: 'foo',
-      strokeArg2: 'bar'
+      strokeArg1: 'arg1',
+      strokeArg2: 'arg2'
     });
     const sc = createStrokeCanvas.mock.results[0].value;
     expect(sc.drawStroke).toHaveBeenCalledTimes(1);
     expect(sc.drawStroke).toHaveBeenCalledWith('mock-stroke');
   });
 
+  it('draw a canceled stroke', () => {
+    gs.show('mock-canceled-stroke', true);
+    // Expect the stroke canvas to have been properly created.
+    expect(createStrokeCanvas).toHaveBeenCalledTimes(1);
+    expect(createStrokeCanvas).toHaveBeenCalledWith('mock-div', {
+      strokeArg1: 'canceledArg1',
+      strokeArg2: 'arg2',
+      canceledStrokeArg3: 'canceledArg3'
+    });
+    const sc = createStrokeCanvas.mock.results[0].value;
+    expect(sc.drawStroke).toHaveBeenCalledTimes(1);
+    expect(sc.drawStroke).toHaveBeenCalledWith('mock-canceled-stroke');
+  });
+
   it('removes the stroke after the given duration', () => {
+    gs.show('mock-stroke');
     const sc = createStrokeCanvas.mock.results[0].value;
     // Expect the stroke canvas not to have been removed yet.
     expect(sc.remove).not.toHaveBeenCalled();

src/layout/stroke.js

@@ -2,8 +2,8 @@
  * @param {HTMLElement} parent - The parent node.
  * @param {Document} options - Options.
  * @param {Document} [options.doc=document] - The root document. Mostly useful for testing purposes.
- * @param {number} options.lineWidth - The width of the stroke.
- * @param {string} options.lineColor - CSS representation of the stroke color.
+ * @param {number} [options.lineWidth=2] - The width of the stroke.
+ * @param {string} [options.lineColor='black'] - CSS representation of the stroke color.
  * @param {number} [options.startPointRadius=0] - The radius of the start point.
  * @param {number} [options.startPointColor=options.lineColor] - CSS representation of the start
  *                                                               point color.
@@ -16,7 +16,7 @@ export default (
   {
     doc = document,
     lineWidth = 2,
-    lineColor = 'blue',
+    lineColor = 'black',
     pointRadius = 0,
     pointColor = lineColor,
     ptSize = window.devicePixelRatio ? 1 / window.devicePixelRatio : 1

src/main.js

@@ -51,6 +51,9 @@ export const exportNotification = n => ({
  *                                                        feedback.
  * @param {number} [options.gestureFeedbackStrokeColor] - The color of the stroke of the gesture
  *                                                        feedback.
+ * @param {number} [options.gestureFeedbackCanceledStrokeColor] - The color of the stroke of the
+ *                                                        gesture feedback when the selection is
+ *                                                        canceled.
  * @param {number} [options.gestureFeedbackDuration] - The duration of the gesture feedback.
  * @param {boolean} [options.notifySteps] - If true, every steps of the marking menu (include move)
  *                                          events, will be notified. Useful for logging.
@@ -74,6 +77,7 @@ export default (
     lowerStrokeStartPointRadius = lowerStrokeWidth,
     gestureFeedbackDuration = 1000,
     gestureFeedbackStrokeWidth = strokeWidth,
+    gestureFeedbackCanceledStrokeColor = '#DE6C52',
     gestureFeedbackStrokeColor = strokeColor,
     notifySteps = false,
     log = {
@@ -101,8 +105,13 @@ export default (
   };
   const gestureFeedbackOptions = {
     duration: gestureFeedbackDuration,
-    lineColor: gestureFeedbackStrokeColor,
-    lineWidth: gestureFeedbackStrokeWidth
+    strokeOptions: {
+      lineColor: gestureFeedbackStrokeColor,
+      lineWidth: gestureFeedbackStrokeWidth
+    },
+    canceledStrokeOptions: {
+      lineColor: gestureFeedbackCanceledStrokeColor
+    }
   };
 
   // Create model and navigation observable.

src/main.test.js

@@ -102,6 +102,8 @@ describe('main', () => {
           gestureFeedbackDuration: 'mock-gestureFeedbackDuration',
           gestureFeedbackStrokeWidth: 'mock-gestureFeedbackStrokeWidth',
           gestureFeedbackStrokeColor: 'mock-gestureFeedbackStrokeColor',
+          gestureFeedbackCanceledStrokeColor:
+            'mock-gestureFeedbackCanceledStrokeColor',
           notifySteps: true,
           log: 'mock-log',
           ...opts
@@ -224,8 +226,13 @@ describe('main', () => {
         'mock-parent-5',
         {
           duration: 'mock-gestureFeedbackDuration',
-          lineColor: 'mock-gestureFeedbackStrokeColor',
-          lineWidth: 'mock-gestureFeedbackStrokeWidth'
+          strokeOptions: {
+            lineColor: 'mock-gestureFeedbackStrokeColor',
+            lineWidth: 'mock-gestureFeedbackStrokeWidth'
+          },
+          canceledStrokeOptions: {
+            lineColor: 'mock-gestureFeedbackCanceledStrokeColor'
+          }
         }
       ]
     ]);