Skip to content

Commit fdfcaf9

Browse files
triniwiztriniwiz
committed
chore: updates
1 parent 73bdce2 commit fdfcaf9

File tree

6 files changed

+203
-14
lines changed

6 files changed

+203
-14
lines changed

‎napi/canvas-napi/canvas.ts

+45-10
Original file line numberDiff line numberDiff line change
@@ -469,14 +469,13 @@ export class NSCCanvas extends NSView {
469469
(mtlView.layer as CAMetalLayer).isOpaque = false;
470470
}
471471

472-
previousEvent: NSEvent;
472+
previousEvent;
473473

474474
mouseDown(event: NSEvent) {
475475
const canvas = this._canvas?.deref?.();
476476
if (!canvas) {
477477
return;
478478
}
479-
this.previousEvent = event;
480479

481480
const eventData = buildMouseEvent(this as never, event);
482481
const pointerDown = new PointerEvent('pointerdown', {
@@ -487,6 +486,8 @@ export class NSCCanvas extends NSView {
487486
...eventData,
488487
});
489488

489+
this.previousEvent = { ...eventData };
490+
490491
canvas.dispatchEvent(pointerDown);
491492

492493
if (pointerDown[isCancelled_]) {
@@ -503,9 +504,8 @@ export class NSCCanvas extends NSView {
503504
if (!canvas) {
504505
return;
505506
}
506-
this.previousEvent = event;
507507

508-
const eventData = buildMouseEvent(this, event);
508+
const eventData = buildMouseEvent(this as never, event);
509509
const pointerDown = new PointerEvent('pointerup', {
510510
pointerId: 1,
511511
pointerType: 'mouse',
@@ -514,6 +514,8 @@ export class NSCCanvas extends NSView {
514514
...eventData,
515515
});
516516

517+
this.previousEvent = { ...eventData };
518+
517519
canvas.dispatchEvent(pointerDown);
518520

519521
if (pointerDown[isCancelled_]) {
@@ -526,7 +528,28 @@ export class NSCCanvas extends NSView {
526528
}
527529

528530
mouseDragged(event: NSEvent) {
529-
this.previousEvent = event;
531+
const canvas = this._canvas?.deref?.();
532+
if (!canvas) {
533+
return;
534+
}
535+
if (!canvas._pointerCapture.get(1)) {
536+
return;
537+
}
538+
const eventData = buildMouseEvent(this as never, event);
539+
540+
const pointerDown = new PointerEvent('pointermove', {
541+
pointerId: 1,
542+
pointerType: 'mouse',
543+
isPrimary: true,
544+
cancelable: true,
545+
...eventData,
546+
movementX: eventData.clientX - this.previousEvent.clientX ?? 0,
547+
movementY: eventData.clientY - this.previousEvent.clientY ?? 0,
548+
});
549+
550+
this.previousEvent = eventData;
551+
552+
canvas.dispatchEvent(pointerDown);
530553
}
531554

532555
scrollWheel(event: NSEvent) {
@@ -602,7 +625,10 @@ export class NSCCanvas extends NSView {
602625
if (!canvas) {
603626
return;
604627
}
605-
const eventData = buildMouseEvent(this, event);
628+
if (canvas._pointerCapture.get(1)) {
629+
return;
630+
}
631+
const eventData = buildMouseEvent(this as never, event);
606632

607633
// movementX: pointer.x - previousEvent.x,
608634
// movementY: pointer.y - previousEvent.y,
@@ -968,12 +994,19 @@ export class Canvas extends ViewBase {
968994
}
969995

970996
getRootNode() {
971-
return this.parentNode;
997+
return this.parentNode as never;
972998
}
973999

974-
setPointerCapture() {}
1000+
_pointerCapture: Map<number, boolean> = new Map();
1001+
_lastMoved?: NSEvent;
9751002

976-
releasePointerCapture() {}
1003+
setPointerCapture(pointerId: number) {
1004+
this._pointerCapture.set(pointerId, true);
1005+
}
1006+
1007+
releasePointerCapture(pointerId: number) {
1008+
this._pointerCapture.set(pointerId, false);
1009+
}
9771010

9781011
get lang(): string {
9791012
return NSLocale.currentLocale.languageCode;
@@ -1059,7 +1092,9 @@ export class Canvas extends ViewBase {
10591092
return new DOMRect(layout.left, layout.top, layout.width, layout.height) as never;
10601093
}
10611094

1062-
focus(options) {}
1095+
focus(options) {
1096+
this._canvas.becomeFirstResponder();
1097+
}
10631098

10641099
/**
10651100
*

‎napi/canvas-napi/examples/node/main.mts

+3-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {run as tiny_poly_world} from './threejs/tiny_poly_world';
1818
import {run as tsl_galaxy} from './threejs/tsl_galaxy';
1919
const { webgpuCube, cube } = three;
2020
import { run as damagedHelmet } from './threejs/damaged_helmet';
21+
import { run as simplePixi } from './pixijs/simple';
2122
// @ts-ignore
2223
const require = createRequire(import.meta.url);
2324

@@ -1545,7 +1546,8 @@ canvas.addEventListener('ready', (event) => {
15451546
// the_frantic_run_of_the_valorous_rabbit(canvas, windowDoc);
15461547
//tiny_poly_world(canvas);
15471548
// damagedHelmet(canvas);
1548-
tsl_galaxy(canvas);
1549+
// tsl_galaxy(canvas);
1550+
simplePixi(canvas);
15491551
});
15501552

15511553
windowDoc.setAttribute('styleMask', (

‎napi/canvas-napi/examples/node/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"teapot": "~1.0.0",
1313
"wgpu-matrix": "~3.3.0",
1414
"three": "~0.171.0",
15-
"xhr": "~2.6.0"
15+
"xhr": "~2.6.0",
16+
"pixi.js": "8.6.4"
1617
},
1718
"devDependencies": {
1819
"tsx": "^4.19.2"

‎napi/canvas-napi/examples/node/pixijs/adapter.ts

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import * as Pixii from 'pixi.js';
2+
import { Canvas } from '../../../canvas';
3+
4+
const NSCAdapter: Pixii.Adapter = {
5+
createCanvas(width?: number, height?: number) {
6+
const canvas = new Canvas();
7+
canvas.width = width;
8+
canvas.height = height;
9+
return canvas as never;
10+
},
11+
getCanvasRenderingContext2D() {
12+
return CanvasRenderingContext2D as never;
13+
},
14+
getWebGLRenderingContext() {
15+
return WebGLRenderingContext as never;
16+
},
17+
getNavigator() {
18+
return {
19+
userAgent: '',
20+
gpu: global.navigator.gpu,
21+
};
22+
},
23+
getBaseUrl() {
24+
return import.meta.url;
25+
},
26+
getFontFaceSet() {
27+
return null; //document.fonts;
28+
},
29+
fetch(url: RequestInfo, options?: RequestInit) {
30+
return fetch(url, options);
31+
},
32+
parseXML(xml: string) {
33+
const parser = new DOMParser();
34+
return parser.parseFromString(xml, 'text/xml');
35+
},
36+
};
37+
38+
Pixii.DOMAdapter.set(NSCAdapter);
39+
40+
Pixii.Assets.setPreferences({ preferWorkers: false });
41+
42+
(global as any).PIXI = (global as any).window.PIXI = (global as any).PIXI || Pixii;

‎napi/canvas-napi/examples/node/pixijs/simple.ts

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import './adapter';
2+
import type { Application } from 'pixi.js';
3+
import * as PIXI from 'pixi.js';
4+
5+
export async function run(canvas) {
6+
const app = new PIXI.Application() as Application;
7+
canvas.width = canvas.clientWidth * window.devicePixelRatio;
8+
canvas.height = canvas.clientHeight * window.devicePixelRatio;
9+
10+
try {
11+
await app.init();
12+
console.log('done');
13+
} catch (e) {
14+
console.log(e);
15+
}
16+
/*
17+
console.log(app);
18+
19+
// grab context to present
20+
// const ctx = canvas.getContext('webgpu');
21+
22+
app.ticker.add((delta) => {
23+
//if (ctx) {
24+
// ctx.presentSurface();
25+
//}
26+
});
27+
28+
const graphics = new PIXI.Graphics();
29+
30+
// Rectangle
31+
graphics.rect(50, 50, 100, 100);
32+
graphics.fill(0xde3249);
33+
34+
// Rectangle + line style 1
35+
graphics.rect(200, 50, 100, 100);
36+
graphics.fill(0x650a5a);
37+
graphics.stroke({ width: 2, color: 0xfeeb77 });
38+
39+
// Rectangle + line style 2
40+
graphics.rect(350, 50, 100, 100);
41+
graphics.fill(0xc34288);
42+
graphics.stroke({ width: 10, color: 0xffbd01 });
43+
44+
// Rectangle 2
45+
graphics.rect(530, 50, 140, 100);
46+
graphics.fill(0xaa4f08);
47+
graphics.stroke({ width: 2, color: 0xffffff });
48+
49+
// Circle
50+
graphics.circle(100, 250, 50);
51+
graphics.fill(0xde3249, 1);
52+
53+
// Circle + line style 1
54+
graphics.circle(250, 250, 50);
55+
graphics.fill(0x650a5a, 1);
56+
graphics.stroke({ width: 2, color: 0xfeeb77 });
57+
58+
// Circle + line style 2
59+
graphics.circle(400, 250, 50);
60+
graphics.fill(0xc34288, 1);
61+
graphics.stroke({ width: 10, color: 0xffbd01 });
62+
63+
// Ellipse + line style 2
64+
graphics.ellipse(600, 250, 80, 50);
65+
graphics.fill(0xaa4f08, 1);
66+
graphics.stroke({ width: 2, color: 0xffffff });
67+
68+
// Draw a shape
69+
graphics.moveTo(50, 350);
70+
graphics.lineTo(250, 350);
71+
graphics.lineTo(100, 400);
72+
graphics.lineTo(50, 350);
73+
graphics.fill(0xff3300);
74+
graphics.stroke({ width: 4, color: 0xffd900 });
75+
76+
// Draw a rounded rectangle
77+
graphics.roundRect(50, 440, 100, 100, 16);
78+
graphics.fill({
79+
color: 0x650a5a,
80+
alpha: 0.25
81+
});
82+
graphics.stroke({ width: 2, color: 0xff00ff });
83+
84+
// Draw star
85+
graphics.star(360, 370, 5, 50);
86+
graphics.fill(0x35cc5a);
87+
graphics.stroke({ width: 2, color: 0xffffff });
88+
89+
// Draw star 2
90+
graphics.star(280, 510, 7, 50);
91+
graphics.fill(0xffcc5a);
92+
graphics.stroke({ width: 2, color: 0xfffffd });
93+
94+
// Draw star 3
95+
graphics.star(470, 450, 4, 50);
96+
graphics.fill(0x55335a);
97+
graphics.stroke({ width: 4, color: 0xffffff });
98+
99+
// Draw polygon
100+
const path = [600, 370, 700, 460, 780, 420, 730, 570, 590, 520];
101+
102+
graphics.poly(path);
103+
graphics.fill(0x3500fa);
104+
105+
app.stage.addChild(graphics);
106+
*/
107+
}

‎napi/canvas-napi/polyfill.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Event } from '@nativescript/foundation/dom/dom-utils.js';
66
// @ts-ignore
77
const require = createRequire(import.meta.url);
88

9-
const { GPU, GPUDevice, GPUAdapter, GPUTextureUsage, GPUBufferUsage } = require('./canvas-napi.darwin-arm64.node');
9+
const { GPU, GPUDevice, GPUAdapter, GPUTextureUsage, GPUBufferUsage, CanvasRenderingContext2D, WebGLRenderingContext } = require('./canvas-napi.darwin-arm64.node');
1010

1111
const { requestAnimationFrame, cancelAnimationFrame } = utils;
1212

@@ -32,7 +32,7 @@ export class ProgressEvent extends Event {
3232
}
3333

3434
function installPolyfills(window) {
35-
window.addEventListener = () => {};
35+
globalThis.addEventListener = window.addEventListener = () => {};
3636
Object.defineProperty(window, 'devicePixelRatio', {
3737
value: NSScreen.mainScreen.backingScaleFactor,
3838
writable: true,
@@ -54,6 +54,8 @@ function installPolyfills(window) {
5454
globalThis.GPUTextureUsage = GPUTextureUsage;
5555
globalThis.GPUBufferUsage = GPUBufferUsage;
5656
globalThis.ProgressEvent = ProgressEvent;
57+
globalThis.CanvasRenderingContext2D = CanvasRenderingContext2D;
58+
globalThis.WebGLRenderingContext = WebGLRenderingContext;
5759
}
5860

5961
installPolyfills(globalThis.window);

0 commit comments

Comments
 (0)