Skip to content

Commit

Permalink
feat: feedback on gestures upon selection
Browse files Browse the repository at this point in the history 
fixes #2
  • Loading branch information
@QuentinRoy
QuentinRoy committed Aug 24, 2018
1 parent b204857 commit 750ecbe
Show file tree
Hide file tree
Showing 7 changed files with 232 additions and 20 deletions.
132 changes: 128 additions & 4 deletions src/layout/__snapshots__/connect.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,22 @@ exports[`connect draws expert strokes on draw notifications 3`] = `
exports[`connect draws expert strokes on draw notifications 4`] = `
<div
style=""
/>
>
<div
class="mock-gesture-feedback"
data-stroke="\\"stroke2\\""
/>
</div>
`;

exports[`connect draws expert strokes on draw notifications 5`] = `
<div
style="cursor: crosshair;"
>
<div
class="mock-gesture-feedback"
data-stroke="\\"stroke2\\""
/>
<div
class="upper-stroke-canvas"
data-points="[]"
Expand All @@ -70,6 +79,10 @@ exports[`connect draws expert strokes on draw notifications 6`] = `
<div
style="cursor: crosshair;"
>
<div
class="mock-gesture-feedback"
data-stroke="\\"stroke2\\""
/>
<div
class="upper-stroke-canvas"
data-points="[]"
Expand All @@ -81,13 +94,30 @@ exports[`connect draws expert strokes on draw notifications 6`] = `
exports[`connect draws expert strokes on draw notifications 7`] = `
<div
style=""
/>
>
<div
class="mock-gesture-feedback"
data-stroke="\\"stroke2\\""
/>
<div
class="mock-gesture-feedback"
data-stroke="\\"stroke3\\""
/>
</div>
`;

exports[`connect draws expert strokes on draw notifications 8`] = `
<div
style="cursor: crosshair;"
>
<div
class="mock-gesture-feedback"
data-stroke="\\"stroke2\\""
/>
<div
class="mock-gesture-feedback"
data-stroke="\\"stroke3\\""
/>
<div
class="upper-stroke-canvas"
data-points="[]"
Expand All @@ -100,6 +130,14 @@ exports[`connect draws expert strokes on draw notifications 9`] = `
<div
style="cursor: crosshair;"
>
<div
class="mock-gesture-feedback"
data-stroke="\\"stroke2\\""
/>
<div
class="mock-gesture-feedback"
data-stroke="\\"stroke3\\""
/>
<div
class="upper-stroke-canvas"
data-points="[]"
Expand Down Expand Up @@ -296,13 +334,22 @@ exports[`connect opens the menu, draws novice stroke, and updates the menu 9`] =
exports[`connect opens the menu, draws novice stroke, and updates the menu 10`] = `
<div
style=""
/>
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
</div>
`;

exports[`connect opens the menu, draws novice stroke, and updates the menu 11`] = `
<div
style="cursor: crosshair;"
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
<div
class="upper-stroke-canvas"
data-points="[]"
Expand All @@ -315,6 +362,10 @@ exports[`connect opens the menu, draws novice stroke, and updates the menu 12`]
<div
style="cursor: crosshair;"
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
<div
class="upper-stroke-canvas"
data-points="[]"
Expand All @@ -327,6 +378,10 @@ exports[`connect opens the menu, draws novice stroke, and updates the menu 13`]
<div
style="cursor: none;"
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
<div
class="lower-stroke-canvas"
data-points="[]"
Expand All @@ -350,6 +405,10 @@ exports[`connect opens the menu, draws novice stroke, and updates the menu 14`]
<div
style="cursor: none;"
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
<div
class="lower-stroke-canvas"
data-points="[]"
Expand All @@ -373,6 +432,10 @@ exports[`connect opens the menu, draws novice stroke, and updates the menu 15`]
<div
style="cursor: none;"
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
<div
class="lower-stroke-canvas"
data-points="[]"
Expand All @@ -396,6 +459,10 @@ exports[`connect opens the menu, draws novice stroke, and updates the menu 16`]
<div
style="cursor: none;"
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
<div
class="lower-stroke-canvas"
data-points="[]"
Expand All @@ -419,6 +486,10 @@ exports[`connect opens the menu, draws novice stroke, and updates the menu 17`]
<div
style="cursor: none;"
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
<div
class="lower-stroke-canvas"
data-points="[]"
Expand All @@ -442,6 +513,10 @@ exports[`connect opens the menu, draws novice stroke, and updates the menu 18`]
<div
style="cursor: none;"
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
<div
class="lower-stroke-canvas"
data-points="[]"
Expand All @@ -464,13 +539,30 @@ exports[`connect opens the menu, draws novice stroke, and updates the menu 18`]
exports[`connect opens the menu, draws novice stroke, and updates the menu 19`] = `
<div
style=""
/>
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
<div
class="mock-gesture-feedback"
data-stroke="[[1,1],[0,0],[30,40],[200,900],[60,70],[700,100]]"
/>
</div>
`;

exports[`connect opens the menu, draws novice stroke, and updates the menu 20`] = `
<div
style="cursor: crosshair;"
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
<div
class="mock-gesture-feedback"
data-stroke="[[1,1],[0,0],[30,40],[200,900],[60,70],[700,100]]"
/>
<div
class="upper-stroke-canvas"
data-points="[]"
Expand All @@ -483,6 +575,14 @@ exports[`connect opens the menu, draws novice stroke, and updates the menu 21`]
<div
style="cursor: none;"
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
<div
class="mock-gesture-feedback"
data-stroke="[[1,1],[0,0],[30,40],[200,900],[60,70],[700,100]]"
/>
<div
class="lower-stroke-canvas"
data-points="[]"
Expand All @@ -506,6 +606,14 @@ exports[`connect opens the menu, draws novice stroke, and updates the menu 22`]
<div
style="cursor: none;"
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
<div
class="mock-gesture-feedback"
data-stroke="[[1,1],[0,0],[30,40],[200,900],[60,70],[700,100]]"
/>
<div
class="lower-stroke-canvas"
data-points="[]"
Expand All @@ -529,6 +637,14 @@ exports[`connect opens the menu, draws novice stroke, and updates the menu 23`]
<div
style="cursor: none;"
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
<div
class="mock-gesture-feedback"
data-stroke="[[1,1],[0,0],[30,40],[200,900],[60,70],[700,100]]"
/>
<div
class="lower-stroke-canvas"
data-points="[]"
Expand All @@ -552,6 +668,14 @@ exports[`connect opens the menu, draws novice stroke, and updates the menu 24`]
<div
style="cursor: none;"
>
<div
class="mock-gesture-feedback"
data-stroke="[[0,0],[1,1],[10,20],[100,200]]"
/>
<div
class="mock-gesture-feedback"
data-stroke="[[1,1],[0,0],[30,40],[200,900],[60,70],[700,100]]"
/>
<div
class="lower-stroke-canvas"
data-points="[]"
Expand Down
30 changes: 21 additions & 9 deletions src/layout/connect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import rafThrottle from 'raf-throttle';
* @param {Function} createLowerStrokeCanvas - Lower stroke canvas factory. The
* lower stroke is stroke drawn below the menu. It keeps track of the previous
* movements.
* @param {Function} createGestureFeedback - Create gesture feedback.
* @param {{error}} log - Logger.
* @return {Observable} `navigation$` with menu opening and closing side effects.
*/
Expand All @@ -22,6 +23,7 @@ export default (
createMenuLayout,
createUpperStrokeCanvas,
createLowerStrokeCanvas,
createGestureFeedback,
log
) => {
// The menu object.
Expand All @@ -35,6 +37,8 @@ export default (
// The points of the upper stroke.
let upperStroke = null;

const gestureFeedback = createGestureFeedback(parentDOM);

const closeMenu = () => {
menu.remove();
menu = null;
Expand Down Expand Up @@ -99,6 +103,22 @@ export default (
lowerStroke = null;
};

const showGestureFeedback = () => {
gestureFeedback.show(
lowerStroke ? [...lowerStroke, ...upperStroke] : upperStroke
);
};

const cleanUp = () => {
// Make sure everything is cleaned upon completion.
if (menu) closeMenu();
if (upperStrokeCanvas) clearUpperStroke();
if (lowerStrokeCanvas) clearLowerStroke();
gestureFeedback.remove();
// eslint-disable-next-line no-param-reassign
parentDOM.style.cursor = '';
};

const onNotification = notification => {
switch (notification.type) {
case 'open': {
Expand All @@ -120,6 +140,7 @@ export default (
// eslint-disable-next-line no-param-reassign
parentDOM.style.cursor = '';
if (menu) closeMenu();
showGestureFeedback();
clearUpperStroke();
clearLowerStroke();
break;
Expand All @@ -141,15 +162,6 @@ export default (
}
};

const cleanUp = () => {
// Make sure everything is cleaned upon completion.
if (menu) closeMenu();
if (upperStrokeCanvas) clearUpperStroke();
if (lowerStrokeCanvas) clearLowerStroke();
// eslint-disable-next-line no-param-reassign
parentDOM.style.cursor = '';
};

return navigation$.pipe(
tap({
next(notification) {
Expand Down
Loading

0 comments on commit 750ecbe

Please sign in to comment.