Skip to content

Commit

Permalink
device size and touch position
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sesena0u0
Sesena0u0 committed Jul 24, 2024
1 parent 4685548 commit 62753ab
Showing 1 changed file with 166 additions and 62 deletions.
228 changes: 166 additions & 62 deletions extensions/sesena0u0/mobile_events.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@
color2: "#50aa50",
color3: "#50aa50",
menuIconURI,
menus: {
xOrY: [
{ text: "x", value: "x" },
{ text: "y", value: "y" },
],
},
blocks: [
{
opcode: "checkSwipe",
Expand All @@ -46,30 +52,62 @@
blockType: Scratch.BlockType.BOOLEAN,
text: "is pinch close detected?",
},
{
opcode: "getTouchCount",
blockType: Scratch.BlockType.REPORTER,
text: "number of touches",
},
{
opcode: "isLandscape",
blockType: Scratch.BlockType.BOOLEAN,
text: "is landscape?",
},
{
opcode: "getSwipeDirection",
opcode: "isMobile",
blockType: Scratch.BlockType.BOOLEAN,
text: "is mobile device?",
},
{
opcode: "isTouchSupported",
blockType: Scratch.BlockType.BOOLEAN,
text: "is touchscreen supported?",
},
"---",
{
opcode: "getScreenWidth",
blockType: Scratch.BlockType.REPORTER,
text: "swipe direction",
text: "screen width",
},
{
opcode: "getScreenHeight",
blockType: Scratch.BlockType.REPORTER,
text: "screen height",
},
{
opcode: "getOrientation",
blockType: Scratch.BlockType.REPORTER,
text: "device orientation",
},
{
opcode: "isMobile",
blockType: Scratch.BlockType.BOOLEAN,
text: "is mobile device?",
opcode: "getTouchCount",
blockType: Scratch.BlockType.REPORTER,
text: "number of touches",
},
{
opcode: "getTouchPosition",
blockType: Scratch.BlockType.REPORTER,
text: "position [XY] of touch [T]",
arguments: {
T: {
type: Scratch.ArgumentType.NUMBER,
defaultValue: 1,
},
XY: {
type: Scratch.ArgumentType.STRING,
menu: "xOrY",
defaultValue: "x",
},
},
},
{
opcode: "getSwipeDirection",
blockType: Scratch.BlockType.REPORTER,
text: "swipe direction",
},
"---",
{
Expand Down Expand Up @@ -114,9 +152,9 @@
this.currentDistances = [];
this.touchThreshold = 50;
this.timeThreshold = 300;
this.longPressThreshold = 500; // Temps en ms pour considérer un long press
this.longPressThreshold = 500;
this.touchCount = 0;
this.swipeDirection = 0; // Direction du swipe en degrés
this.swipeDirection = 0;

document.addEventListener(
"touchstart",
Expand All @@ -142,6 +180,7 @@

handleTouchStart(e) {
this.touchCount = e.touches.length;
this.touchPositions = Array.from(e.touches);
const touch = e.touches[0];
this.startX = touch.screenX;
this.startY = touch.screenY;
Expand All @@ -155,72 +194,72 @@
this.isLongPress = true;
}, this.longPressThreshold);

// Stocker les distances initiales pour les pincements
if (this.touchCount >= 2) {
this.startDistances = [this.getDistance(e.touches)];
}
}

handleTouchMove(e) {
const touch = e.touches[0];
const diffX = touch.screenX - this.startX;
const diffY = touch.screenY - this.startY;
const diffTime = new Date().getTime() - this.startTime;

if (diffTime >= this.longPressThreshold) {
clearTimeout(this.longPressTimeout);
this.isLongPress = true;
} else if (
Math.abs(diffX) > this.touchThreshold ||
Math.abs(diffY) > this.touchThreshold
) {
clearTimeout(this.longPressTimeout);
}
this.touchPositions = Array.from(e.touches);

if (e.touches.length > 0) {
const touch = e.touches[0];
const diffX = touch.screenX - this.startX;
const diffY = touch.screenY - this.startY;
const diffTime = new Date().getTime() - this.startTime;

if (diffTime >= this.longPressThreshold) {
clearTimeout(this.longPressTimeout);
this.isLongPress = true;
} else if (
Math.abs(diffX) > this.touchThreshold ||
Math.abs(diffY) > this.touchThreshold
) {
clearTimeout(this.longPressTimeout);
}

// Détecter les pincements
if (e.touches.length >= 2) {
this.currentDistances = [this.getDistance(e.touches)];
const distanceDiff = this.currentDistances[0] - this.startDistances[0];
if (e.touches.length >= 2) {
this.currentDistances = [this.getDistance(e.touches)];
const distanceDiff =
this.currentDistances[0] - this.startDistances[0];

if (distanceDiff > this.touchThreshold) {
this.isPinchOpen = true;
} else if (distanceDiff < -this.touchThreshold) {
this.isPinchClose = true;
if (distanceDiff > this.touchThreshold) {
this.isPinchOpen = true;
} else if (distanceDiff < -this.touchThreshold) {
this.isPinchClose = true;
}
}
}
}

handleTouchEnd(e) {
clearTimeout(this.longPressTimeout);
this.touchCount = e.touches.length;

if (this.touchCount > 0) {
// Si d'autres touches sont encore présentes, ne pas réinitialiser isLongPress
return;
}

const touch = e.changedTouches[0];
const diffX = touch.screenX - this.startX;
const diffY = touch.screenY - this.startY;
const diffTime = new Date().getTime() - this.startTime;

if (diffTime < this.timeThreshold) {
if (
Math.abs(diffX) > this.touchThreshold ||
Math.abs(diffY) > this.touchThreshold
) {
this.isSwipe = true;
this.calculateSwipeDirection(diffX, diffY);
this.touchPositions = Array.from(e.touches);

if (this.touchCount === 0) {
const touch = e.changedTouches[0];
const diffX = touch.screenX - this.startX;
const diffY = touch.screenY - this.startY;
const diffTime = new Date().getTime() - this.startTime;

if (diffTime < this.timeThreshold) {
if (
Math.abs(diffX) > this.touchThreshold ||
Math.abs(diffY) > this.touchThreshold
) {
this.isSwipe = true;
this.calculateSwipeDirection(diffX, diffY);
} else {
this.isTap = true;
}
} else {
this.isTap = true;
this.isLongPress = false;
}
} else {
this.isLongPress = false;
}

// Réinitialiser les distances de pincement après la fin de l'événement tactile
this.startDistances = [];
this.currentDistances = [];
this.startDistances = [];
this.currentDistances = [];
}
}

handleOrientation(e) {
Expand All @@ -246,7 +285,7 @@
angle += 360;
}

this.swipeDirection = angle;
this.swipeDirection = Math.round(angle);
}

checkSwipe() {
Expand Down Expand Up @@ -280,7 +319,11 @@
}

isMobile() {
return /Mobi|Android/i.test(navigator.userAgent);
return /Mobi|Android|iPad|iPhone/i.test(navigator.userAgent);
}

isTouchSupported() {
return "ontouchstart" in window || navigator.maxTouchPoints > 0;
}

getTouchCount() {
Expand Down Expand Up @@ -318,6 +361,67 @@
whenPinchClose() {
return this.isPinchClose;
}

getScreenWidth() {
return window.innerWidth;
}

getScreenHeight() {
return window.innerHeight;
}

boundToProjectX(clientX) {
const bounds = this.getCanvasBounds();
const min = -Scratch.vm.runtime.stageWidth / 2;
const max = Scratch.vm.runtime.stageWidth / 2;
return this.specifiPlace(
min,
this.map(clientX, bounds.left, bounds.right, min, max),
max
);
}

boundToProjectY(clientY) {
const bounds = this.getCanvasBounds();
const min = -Scratch.vm.runtime.stageHeight / 2;
const max = Scratch.vm.runtime.stageHeight / 2;
return this.specifiPlace(
min,
this.map(clientY, bounds.bottom, bounds.top, min, max),
max
);
}

getCanvasBounds() {
return document.querySelector("canvas").getBoundingClientRect();
}

map(value, inMin, inMax, outMin, outMax) {
return ((value - inMin) / (inMax - inMin)) * (outMax - outMin) + outMin;
}

specifiPlace(value, min, max) {
return Math.max(min, Math.min(max, value));
}

getTouchPosition(args) {
const touchIndex = parseInt(args.T) - 1;
const coordinate = args.XY;

if (touchIndex < 0 || touchIndex >= this.touchCount) {
return 0;
}

const touch = this.touchPositions[touchIndex];

if (coordinate === "x") {
return touch ? Math.round(this.boundToProjectX(touch.clientX)) : 0;
} else if (coordinate === "y") {
return touch ? Math.round(this.boundToProjectY(touch.clientY)) : 0;
}

return 0;
}
}

Scratch.extensions.register(new MobileEvent());
Expand Down

0 comments on commit 62753ab

Please sign in to comment.