Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Dec 5, 2018. It is now read-only.

Commit92680ca

Browse files
froggPomax
authored andcommitted
Fixes Issues#222 and#99 (#277)
* Issue#99 : withTouch() touchstart event was relying on direct access to theeventHandlers array within the Processing module to remove any existing mouseevent handlers.Instead of exposing the eventHandlers array directly, this change exposes amethod called detachEventHandlersByTypeMatch() which takes a regex of eventtypes, iterates through the list of existing event handlers, and detaches thehandlers that match.
1 parent983b698 commit92680ca

File tree

6 files changed

+129
-18
lines changed

6 files changed

+129
-18
lines changed

‎processing.js‎

100644100755
File mode changed.

‎processing.min.js‎

100644100755
File mode changed.

‎src/P5Functions/touchmouse.js‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
/**
22
* Touch and Mouse event handling
33
*/
4-
module.exports=functionwithTouch(p,curElement,attachEventHandler,document,PConstants,undef){
4+
module.exports=functionwithTouch(p,curElement,attachEventHandler,detachEventHandlersByType,document,PConstants,undef){
5+
6+
// List of mouse event types
7+
varmouseTypes=['mouseout','mousemove','mousedown','mouseup','DOMMouseScroll','mousewheel','touchstart'];
58

69
/**
710
* Determine the location of the (mouse) pointer.
@@ -96,16 +99,9 @@ module.exports = function withTouch(p, curElement, attachEventHandler, document,
9699
curElement.setAttribute("style","-webkit-user-select: none");
97100
curElement.setAttribute("onclick","void(0)");
98101
curElement.setAttribute("style","-webkit-tap-highlight-color:rgba(0,0,0,0)");
99-
// Loop though eventHandlers and remove mouse listeners
100-
for(vari=0,ehl=eventHandlers.length;i<ehl;i++){
101-
vartype=eventHandlers[i].type;
102-
// Have this function remove itself from the eventHandlers list too
103-
if(type==="mouseout"||type==="mousemove"||
104-
type==="mousedown"||type==="mouseup"||
105-
type==="DOMMouseScroll"||type==="mousewheel"||type==="touchstart"){
106-
detachEventHandler(eventHandlers[i]);
107-
}
108-
}
102+
103+
// Remove mouse-type event listeners
104+
detachEventHandlersByType(curElement,mouseTypes);
109105

110106
// If there are any native touch events defined in the sketch, connect all of them
111107
// Otherwise, connect all of the emulated mouse events
@@ -181,9 +177,6 @@ module.exports = function withTouch(p, curElement, attachEventHandler, document,
181177
}
182178
});
183179
}
184-
185-
// Refire the touch start event we consumed in this function
186-
curElement.dispatchEvent(t);
187180
});
188181

189182
/**

‎src/Processing.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -126,9 +126,7 @@
126126
////////////////////////////////////////////////////////////////////////////
127127
// JavaScript event binding and releasing
128128
////////////////////////////////////////////////////////////////////////////
129-
130-
vareventHandlers=[];
131-
129+
vareventHandlers=[];
132130
functionattachEventHandler(elem,type,fn){
133131
if(elem.addEventListener){
134132
elem.addEventListener(type,fn,false);
@@ -149,6 +147,14 @@
149147
}
150148
}
151149

150+
functiondetachEventHandlersByType(element,types){
151+
Object.keys(eventHandlers).forEach(function(eventHandler){
152+
if(types.indexOf(eventHandler.type)>-1&&(eventHandler.elem==element)){
153+
detachEventHandler(eventHandler.type);
154+
}
155+
});
156+
}
157+
152158
functionremoveFirstArgument(args){
153159
returnArray.prototype.slice.call(args,1);
154160
}
@@ -160,10 +166,11 @@
160166
p.Char=p.Character=Char;
161167

162168
// add in the Processing API functions
169+
eventHandlers=[];
163170
extend.withCommonFunctions(p);
164171
extend.withMath(p);
165172
extend.withProxyFunctions(p,removeFirstArgument);
166-
extend.withTouch(p,curElement,attachEventHandler,document,PConstants);
173+
extend.withTouch(p,curElement,attachEventHandler,detachEventHandlersByType,document,PConstants);
167174

168175
// custom functions and properties are added here
169176
if(aFunctions){

‎test/manual/test-issue-99.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ProcessingJS.org :: Manual Test for Issue #99</title>
5+
6+
<scriptsrc="../../processing.min.js"></script>
7+
</head>
8+
<body>
9+
10+
<h1>Manual Test for Issue #99</h1>
11+
<p>Manual test verify the fix for
12+
<ahref="https://github.com/processing-js/processing-js/issues/99">Issue #99 : touch events not working after v1.4.1</a>.</p>
13+
14+
<div>
15+
<canvasid="canvas-issue-99"data-processing-sources="test-issue-99.pde"></canvas>
16+
<labelfor="canvas-issue-99">Use this canvas to test the actions below.</label>
17+
</div>
18+
19+
<div>
20+
<ol>
21+
<li>
22+
<imgid="test-image-1"
23+
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAA/ElEQVRoQ+2Zyw3EIAwFSSO0RxGcKYL2aIT9nFbay3OwophMpNyeBJ7nySVHSmm+38c8BwNv3jUNb15womEa3owAK71ZoX/j0DANb0aAld6sUN+PVq115pw/W3LpM8aYrbVT5y6tdO/90kF/DyulnDqbgS3YaNhCazHLSosAcVgE9Y3hsIXWYhaHRYA4LILCYQsojywOixRxWASFwxZQHlkcFinisAgKhy2gPLI4LFLEYREUDltAeWRxWKSIwyIoHLaA8sjisEhxyeHH/T0Uod4qttTwrSYRL8PAIqiwMRoOW514cRoWQYWN0XDY6sSL07AIKmyMhsNWJ178BS6PowGvTKIgAAAAAElFTkSuQmCC"
24+
alt="1. initial drawing: grey square centred on black background"/>
25+
<labelfor="test-image-1">initial drawing, no interaction</label>
26+
</li>
27+
<li>
28+
<imgid="test-image-2"
29+
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAA90lEQVRoQ+2ZwQ2EMAwEnaaSjiiKjkhTueN9r8EnRMIg8VuJeMaLkCgRMb73a67iwIu71vDigkPDGl6MgCu9mNCfcTSs4cUIuNKLCf3vS+s4jlFrPbfk1qv3Plprl56bWukxRuz7fuuw58O2bYtSLs2b+5Z24JtcaxiAtsMAVthhQiuRtcMAnh0GsOwwgZXJ2mFAzw4DWHaYwMpk7TCgZ4cBLDtMYGWydhjQs8MAlh0msDJZOwzo2WEAyw4TWJmsHQb07DCAFa/7e0jgPCWbWumnDEHO4cCE1oxZDc9ojZxZw4TWjFkNz2iNnFnDhNaMWQ3PaI2c+QOamvoB9sdZgwAAAABJRU5ErkJggg=="
30+
alt="2. on hover: grey square with white outline centred on black background"/>
31+
<labelfor="test-image-2">on (mouse) hover, center square gets a white outline.</label>
32+
</li>
33+
<li>
34+
<imgid="test-image-3"
35+
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAA9klEQVRoQ+2ZQQ6EIBAE4Ufw/0fAj3DX6166ZeIKlom3TpapntpozCml8blfc2UG3rxrGt684ETDNLwZAVZ6s0J/xqFhGt6MACu9WaGxf1qttVFK+W7JrVfvfdRaL/3u1EqP8b9X6ZwvzTv3LM3ANy42DYuwcVgEdcZw2KE1mcVhESAOi6Bw2AEVkcVhkSIOi6Bw2AEVkcVhkSIOi6Bw2AEVkcVhkSIOi6Bw2AEVkcVhkSIOi6Bw2AEVkcVhkSIOi6DO2Ou+HjpwnpKdWumnDOGcg4EdWitmaXjF1pwz07BDa8UsDa/YmnNmGnZorZil4RVbc858AB8FowGbPuplAAAAAElFTkSuQmCC"
36+
alt="3. on mousedown : white square centred on black background"/>
37+
<labelfor="test-image-3">on mousedown/touchstart, center square turns white</label>
38+
</li>
39+
<li>
40+
<imgid="test-image-4"
41+
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAsUlEQVRoQ+3ZsQ3DMBAEwVdH7L8JlkRbsWOfgNMQUAG/u7hE18yc7/eadzm43DXD5YKHYYbLCEi6TOjPOQwzXEZA0mVCjZakJV1GQNJlQq20pCVdRkDSZUKttKQl/ScCe++z1roLi77Hkj7nmb+0Dk71xXCItKRDoEfSIdKSDoGWdAq0pFOkrXSItKRDoK10CrSkU6StdIi0pEOgrXQKtKRTpK10iLSkQ6CtdAr065L+AOhylqdVdx+2AAAAAElFTkSuQmCC"
42+
alt="4. on mouse move: white square moved to bottom corner of black background"/>
43+
<labelfor="test-image-4">on mousemove/touchmove, white square moves</label>
44+
</li>
45+
</ol>
46+
</div>
47+
48+
</body>
49+
</html>
50+

‎test/manual/test-issue-99.pde‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
// https://processing.org/examples/mousefunctions.html
2+
float bx;
3+
float by;
4+
int boxSize=15;
5+
boolean overBox=false;
6+
boolean locked=false;
7+
float xOffset=0.0;
8+
float yOffset=0.0;
9+
10+
voidsetup()
11+
{
12+
size(60,60);
13+
bx=width/2.0;
14+
by=height/2.0;
15+
rectMode(RADIUS);
16+
}
17+
18+
voiddraw()
19+
{
20+
background(0);
21+
22+
// Test if the cursor is over the box
23+
if (mouseX> bx-boxSize&&mouseX< bx+boxSize&&
24+
mouseY> by-boxSize&&mouseY< by+boxSize) {
25+
overBox=true;
26+
if(!locked) {
27+
stroke(255);
28+
fill(153);
29+
}
30+
}else {
31+
stroke(153);
32+
fill(153);
33+
overBox=false;
34+
}
35+
36+
// Draw the box
37+
rect(bx, by, boxSize, boxSize);
38+
}
39+
40+
voidmousePressed() {
41+
if(overBox) {
42+
locked=true;
43+
fill(255,255,255);
44+
}else {
45+
locked=false;
46+
}
47+
xOffset=mouseX-bx;
48+
yOffset=mouseY-by;
49+
50+
}
51+
52+
voidmouseDragged() {
53+
if(locked) {
54+
bx=mouseX-xOffset;
55+
by=mouseY-yOffset;
56+
}
57+
}
58+
59+
voidmouseReleased() {
60+
locked=false;
61+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp