Skip to content

Commit

Permalink
Add local pointer coords to event handler
Browse files Browse the repository at this point in the history
  • Loading branch information
@erikhaandrikman
erikhaandrikman committed Jun 23, 2023
1 parent c74bd18 commit d8f76b8
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 23 deletions.
29 changes: 19 additions & 10 deletions examples/mouse-pointer/basic-usage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,18 @@

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<script src="../../devtools/lightning-inspect.js"></script>
</head>

<body style="margin: 0; padding: 0">
<script type="module">
import lng from '../../src/lightning.mjs';
//attachInspector(lng)

window.onload = function() {
window.onload = function () {

const ENABLE_POINTER = true;

Expand All @@ -40,15 +42,16 @@
rect: true,
color: 0xffaa7777,
collision: true,
Text: {text: {text: 'Click me!'}, x: 25, y: 50, rotation: 0.5}
Text: { text: { text: 'Click me!' }, x: 25, y: 50, rotation: 0.5 }
}
}

_handleClick() {
_handleClick(el, { x, y }) {
console.log(x, y)
this.animation({
duration: 0.2,
actions: [
{p: 'scale', v: {0: 1.0, 0.5: 1.1, 1: 1.0}}
{ p: 'scale', v: { 0: 1.0, 0.5: 1.1, 1: 1.0 } }
]
}).start();
}
Expand All @@ -60,25 +63,31 @@
_handleUnhover() {
this.setSmooth('color', 0xffaa7777);
}
}



}
class BasicUsageExample extends lng.Application {
static _template() {
return {
Card1: {type: Card, x: 50, y: 50},
Card2: {type: Card, x: 50 + 200 + 25, y: 50},
Card3: {type: Card, x: 50 + 400 + 50, y: 50, collision: false, alpha: 0.5}
Card1: { type: Card, x: 50, y: 50 },
Card2: { type: Card, x: 50 + 200 + 25, y: 50 },
Card3: { type: Card, x: 50 + 400 + 50, y: 50, collision: true, alpha: 0.5 }
}
}

_handleClick() {
console.log('click on app')
}

}

const options = {stage: {w: 1080, h: 720, clearColor: 0xFF000000, canvas2d: false, useImageWorker: false, devicePixelRatio: 2}, debug: true, enablePointer: ENABLE_POINTER}
const options = { stage: { w: 1080, h: 720, clearColor: 0xFF000000, canvas2d: false, useImageWorker: false, devicePixelRatio: 2 }, debug: true, enablePointer: ENABLE_POINTER }
const app = new BasicUsageExample(options);

document.body.appendChild(app.stage.getCanvas());
}
</script>
</body>
</html>

</html>
36 changes: 23 additions & 13 deletions src/application/Application.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ export default class Application extends Component {
}

current = nextFocus;
} while(true);
} while (true);

return path;
}
Expand Down Expand Up @@ -430,7 +430,7 @@ export default class Application extends Component {

_recieveScrollWheel(e) {
const obj = e;
const {clientX, clientY} = obj;
const { clientX, clientY } = obj;

if (clientX <= this.stage.w && clientY <= this.stage.h) {
if (!this.fireTopDownScrollWheelHandler("_captureScroll", obj)) {
Expand All @@ -444,18 +444,18 @@ export default class Application extends Component {
let affected = this._findChildren([], children).reverse();
let n = affected.length;

while(n--) {
while (n--) {
const child = affected[n];
if (child && child[event]) {
child._captureScroll(obj);
return true;
return true;
}
}
return false;
}

fireBottomUpScrollWheelHandler(event, obj) {
const {clientX, clientY} = obj;
const { clientX, clientY } = obj;
const target = this._getTargetChild(clientX, clientY);
let child = target;

Expand All @@ -472,23 +472,33 @@ export default class Application extends Component {

_receiveClick(e) {
const obj = e;
const {clientX, clientY} = obj;
const { clientX, clientY } = obj;

if (clientX <= this.stage.w && clientY <= this.stage.h) {
this.stage.application.fireBottomUpClickHandler(obj);
}
}

fireBottomUpClickHandler(obj) {
const {clientX, clientY} = obj;
const { clientX, clientY } = obj;
const target = this._getTargetChild(clientX, clientY);
const precision = this.stage.getRenderPrecision() / this.stage.getOption('devicePixelRatio');
let child = target;

// Search tree bottom up for a handler
while (child !== null) {
if (child && child["_handleClick"]) {
const returnValue = child._handleClick(target);
if(returnValue !== false){
const { px, py } = child.core._worldContext;
const cx = px * precision;
const cy = py * precision;

const localCoords = {
x: clientX - cx,
y: clientY - cy
}

const returnValue = child._handleClick(target, localCoords);
if (returnValue !== false) {
break;
}
}
Expand All @@ -498,15 +508,15 @@ export default class Application extends Component {

_receiveHover(e) {
const obj = e;
const {clientX, clientY} = obj;
const { clientX, clientY } = obj;

if (clientX <= this.stage.w && clientY <= this.stage.h) {
this.stage.application.fireBottomUpHoverHandler(obj);
}
}

fireBottomUpHoverHandler(obj) {
const {clientX, clientY} = obj;
const { clientX, clientY } = obj;
const target = this._getTargetChild(clientX, clientY);

// Only fire handlers when pointer target changes
Expand Down Expand Up @@ -564,14 +574,14 @@ export default class Application extends Component {
let affected = this._findChildren([], children);
let hoverableChildren = this._withinClickableRange(affected, clientX, clientY);

hoverableChildren.sort((a,b) => {
hoverableChildren.sort((a, b) => {
// Sort by zIndex and then id
if (a.zIndex > b.zIndex) {
return 1;
} else if (a.zIndex < b.zIndex) {
return -1;
} else {
return a.id > b.id ? 1: -1;
return a.id > b.id ? 1 : -1;
}
});

Expand Down

0 comments on commit d8f76b8

Please sign in to comment.