Skip to content

Added support for pen eraser button press(experimental) #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rongxin-liu wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Added support for pen eraser button press(experimental) #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a6a59ac
no message
Dec 7, 2018
a082ef2
Merge branch 'master' into dev_rongxin
rongxin-liu Aug 23, 2019
5e4f979
middle mouse button erase functionality added (experimental)
rongxin-liu Aug 23, 2019
367ef62
added support for surface pen erase (experimental)
rongxin-liu Aug 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ package-lock.json
*.DS*
tmp/*
# node_modules
db
63 changes: 47 additions & 16 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@

<script type="text/javascript" canvas="touch-me">
// defaults

var path;
var hidden = [];
var undoAll = false;
Expand Down Expand Up @@ -68,13 +68,31 @@
// prevent right click to avoid pop-up menu
document.addEventListener('contextmenu', event => event.preventDefault());

// // detect pointer type (for debugging)
// document.addEventListener('pointerdown', function(event) {
// // Call the appropriate pointer type handler
// switch (event.pointerType) {
// case 'mouse':
// console.log("mouse")
// break;
// case 'pen':
// console.log("pen")
// break;
// case 'touch':
// console.log("touch")
// break;
// default:
// console.log(`pointerType ${event.pointerType} is not suported`);
// }
// }, false);

function undo(fromSocket = false) {
// stop if there is nothing left to undo
if (paper.project.layers[defaultLayer].children.length < 1) {
return;
}


if (socketsActive && !fromSocket) {
socket.emit('undo', paper.project.layers[defaultLayer].children.length - 1, function(success) {
if (success) {
Expand Down Expand Up @@ -336,7 +354,7 @@
});

function drawPathFromData(index, json_string){

paper.project.layers[defaultLayer].insertChild(index, paper.importJSON(json_string));
}

Expand Down Expand Up @@ -388,7 +406,7 @@
paper.view.draw();
})


};

// display default size/color of the stroke in the menu
Expand Down Expand Up @@ -443,14 +461,14 @@

// setup hammer.js for the main canvas
mc = new Hammer.Manager(canvas);

// add listener (else we won't get nearly as many events)
var pan = new Hammer.Pan({ pointers: 1 });
mc.add(pan);


/*
* ACTIONS RELATED TO DRAWING
* ACTIONS RELATED TO DRAWING
*/


Expand Down Expand Up @@ -493,7 +511,7 @@
// console.log("middleDraw", lastIndex, paper.project.layers[defaultLayer].children[lastIndex]);
// console.log("start middle draw");
}
console.log("middleDraw " + lastIndex, ev.center);
// console.log("middleDraw " + lastIndex, ev.center);
// take action on the pointer moving

// wait to get our index before touching anything
Expand Down Expand Up @@ -539,9 +557,9 @@
}

/*
* ACTIONS RELATED TO ERASING
* ACTIONS RELATED TO ERASING
*/

function startErase(ev, bigErase = false) {
if (debug) {
console.log("startErase", bigErase);
Expand All @@ -560,7 +578,7 @@
strokeCap: 'round',
fullySelected: false
});

} else {
// remember that this is the last action that we started
lastAction = 'bigErase';
Expand Down Expand Up @@ -615,15 +633,15 @@
}
}

function endErase(ev, bigErase = false) {
function endErase(ev, bigErase = false) {
if (debug) {
console.log("endErase " + lastIndex + " isLastIndex+end(Draw)");
}
}

// wait to get our index before touching anything
if (lastIndex == -1) {
return;
}
}

if (socketsActive) {
socket.emit('endDraw', lastIndex, paper.project.layers[defaultLayer].children[lastIndex], true);
Expand All @@ -637,11 +655,11 @@
finishErase(lastIndex);
}




/*
* ACTIONS RELATED TO PANNING
* ACTIONS RELATED TO PANNING
*/

function startPan(ev) {
Expand Down Expand Up @@ -721,9 +739,16 @@
});

function startFirstAction(ev) {

evMaxPointers = ev.maxPointers;
lastNumPointers = ev.maxPointers;

switch (ev.maxPointers) {
// override evMaxPointers for surface pen erase event
if (ev.srcEvent.buttons === 32) {
evMaxPointers = 2
}

switch (evMaxPointers) {
case 1:
startDraw(ev);
break;
Expand All @@ -750,13 +775,19 @@
return;
}

// override lastAction for surface pen erase event
if (ev.srcEvent.buttons === 32) {
lastAction = "erase"
}

switch (lastAction) {
case 'draw':
middleDraw(ev);
break;

case 'bigErase':
case 'erase':

middleErase(ev);
break;

Expand Down
8 changes: 8 additions & 0 deletions public/js/hammer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -894,6 +894,14 @@ inherit(PointerEventInput, Input, {
store.push(ev);
storeIndex = store.length - 1;
}
} else if (eventType & INPUT_START && (ev.buttons === 32 || isTouch)) {
// accepting alternative input method
// e.g., ev.buttons === 32 will be true if surface pen erase detected
console.log("simulating erase action")
if (storeIndex < 0) {
store.push(ev);
storeIndex = store.length - 1;
}
} else if (eventType & (INPUT_END | INPUT_CANCEL)) {
removePointer = true;
}
Expand Down