ilcm 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +133 -0
- package/dist/Camera.d.ts +24 -0
- package/dist/Camera.d.ts.map +1 -0
- package/dist/Camera.js +53 -0
- package/dist/Camera.js.map +1 -0
- package/dist/InputState.d.ts +9 -0
- package/dist/InputState.d.ts.map +1 -0
- package/dist/InputState.js +10 -0
- package/dist/InputState.js.map +1 -0
- package/dist/Loop.d.ts +5 -0
- package/dist/Loop.d.ts.map +1 -0
- package/dist/Loop.js +11 -0
- package/dist/Loop.js.map +1 -0
- package/dist/Mouse.d.ts +28 -0
- package/dist/Mouse.d.ts.map +1 -0
- package/dist/Mouse.js +97 -0
- package/dist/Mouse.js.map +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -0
- package/package.json +43 -0
package/README.md
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
# ilcm
|
|
2
|
+
|
|
3
|
+
A lightweight input and camera library for browser canvas applications.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Camera**: 2D camera system with positioning, scaling, and rotation
|
|
8
|
+
- **Mouse Input**: Easy mouse tracking and button state management
|
|
9
|
+
- **Loop**: Base class for game/animation loops with delta time support
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install ilcm
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
```typescript
|
|
20
|
+
import { Camera, Mouse, Loop } from 'ilcm';
|
|
21
|
+
|
|
22
|
+
// Create a canvas element
|
|
23
|
+
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
|
|
24
|
+
|
|
25
|
+
// Initialize camera
|
|
26
|
+
const camera = new Camera(canvas);
|
|
27
|
+
|
|
28
|
+
// Initialize mouse input
|
|
29
|
+
const mouse = new Mouse(canvas);
|
|
30
|
+
|
|
31
|
+
// Create your game/animation loop
|
|
32
|
+
class MyLoop extends Loop {
|
|
33
|
+
constructor(private camera: Camera, private mouse: Mouse) {
|
|
34
|
+
super();
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
loop(deltaSeconds: number) {
|
|
38
|
+
// Your game logic here
|
|
39
|
+
console.log(`Delta: ${deltaSeconds}s, Mouse: (${this.mouse.x}, ${this.mouse.y})`);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
const myLoop = new MyLoop(camera, mouse);
|
|
44
|
+
myLoop.start();
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## API
|
|
48
|
+
|
|
49
|
+
### Camera
|
|
50
|
+
|
|
51
|
+
```typescript
|
|
52
|
+
new Camera(canvas, width?, height?)
|
|
53
|
+
begin(): void // Start rendering with camera transforms
|
|
54
|
+
end(): void // End rendering with camera transforms
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Properties:
|
|
58
|
+
- `x`, `y`: Camera position
|
|
59
|
+
- `width`, `height`: Camera dimensions
|
|
60
|
+
- `angleDegrees`: Rotation angle
|
|
61
|
+
- `anchorRelX`, `anchorRelY`: Rotation anchor point (0-1)
|
|
62
|
+
- `scale`: Uniform scale factor
|
|
63
|
+
- `scaleX`, `scaleY`: Individual scale factors
|
|
64
|
+
|
|
65
|
+
### Mouse
|
|
66
|
+
|
|
67
|
+
```typescript
|
|
68
|
+
new Mouse(canvas)
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
**Methods:**
|
|
72
|
+
- `update(): void` - Updates button state transitions (pressed/released). Must be called once per frame in your loop
|
|
73
|
+
- `getWorldX(camera: Camera): number` - Get mouse X position in world coordinates
|
|
74
|
+
- `getWorldY(camera: Camera): number` - Get mouse Y position in world coordinates
|
|
75
|
+
|
|
76
|
+
**Properties:**
|
|
77
|
+
- `x`, `y`: Mouse position relative to canvas
|
|
78
|
+
- `wheelDeltaX`, `wheelDeltaY`: Mouse wheel delta values (accumulated per frame)
|
|
79
|
+
|
|
80
|
+
**Button State Methods:**
|
|
81
|
+
- `isDown(button: MouseButton): boolean` - Check if button is currently pressed
|
|
82
|
+
- `isPressed(button: MouseButton): boolean` - Check if button was just pressed (this frame)
|
|
83
|
+
- `isReleased(button: MouseButton): boolean` - Check if button was just released (this frame)
|
|
84
|
+
|
|
85
|
+
**Enums:**
|
|
86
|
+
- `MouseButton.Left` (0)
|
|
87
|
+
- `MouseButton.Middle` (1)
|
|
88
|
+
- `MouseButton.Right` (2)
|
|
89
|
+
|
|
90
|
+
**Example:**
|
|
91
|
+
|
|
92
|
+
```typescript
|
|
93
|
+
class MyLoop extends Loop {
|
|
94
|
+
constructor(private camera: Camera, private mouse: Mouse) {
|
|
95
|
+
super();
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
loop(deltaSeconds: number) {
|
|
99
|
+
this.mouse.update(); // Must call update each frame
|
|
100
|
+
|
|
101
|
+
// Screen coordinates
|
|
102
|
+
console.log(`Mouse screen: (${this.mouse.x}, ${this.mouse.y})`);
|
|
103
|
+
|
|
104
|
+
// World coordinates
|
|
105
|
+
const worldX = this.mouse.getWorldX(this.camera);
|
|
106
|
+
const worldY = this.mouse.getWorldY(this.camera);
|
|
107
|
+
console.log(`Mouse world: (${worldX}, ${worldY})`);
|
|
108
|
+
|
|
109
|
+
// Mouse wheel
|
|
110
|
+
console.log(`Wheel delta: (${this.mouse.wheelDeltaX}, ${this.mouse.wheelDeltaY})`);
|
|
111
|
+
|
|
112
|
+
// Button states
|
|
113
|
+
if (this.mouse.isButtonPressed(MouseButton.Left)) {
|
|
114
|
+
console.log('Left click!');
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### Loop
|
|
121
|
+
|
|
122
|
+
```typescript
|
|
123
|
+
abstract loop(deltaSeconds: number): void
|
|
124
|
+
start(): void // Start the animation loop
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## License
|
|
128
|
+
|
|
129
|
+
ISC
|
|
130
|
+
|
|
131
|
+
## Author
|
|
132
|
+
|
|
133
|
+
Volodymyr Kushnir
|
package/dist/Camera.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export declare class Camera {
|
|
2
|
+
x: number;
|
|
3
|
+
y: number;
|
|
4
|
+
width: number;
|
|
5
|
+
height: number;
|
|
6
|
+
anchorRelX: number;
|
|
7
|
+
anchorRelY: number;
|
|
8
|
+
angleDegrees: number;
|
|
9
|
+
protected canvas: HTMLCanvasElement;
|
|
10
|
+
constructor(canvas: HTMLCanvasElement, width?: number, height?: number);
|
|
11
|
+
begin(): void;
|
|
12
|
+
end(): void;
|
|
13
|
+
get ctx(): CanvasRenderingContext2D;
|
|
14
|
+
set scale(value: number);
|
|
15
|
+
set scaleX(value: number);
|
|
16
|
+
get scaleX(): number;
|
|
17
|
+
set scaleY(value: number);
|
|
18
|
+
get scaleY(): number;
|
|
19
|
+
getCanvasSize(): {
|
|
20
|
+
width: number;
|
|
21
|
+
height: number;
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=Camera.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Camera.d.ts","sourceRoot":"","sources":["../src/Camera.ts"],"names":[],"mappings":"AAAA,qBAAa,MAAM;IACR,CAAC,EAAE,MAAM,CAAK;IACd,CAAC,EAAE,MAAM,CAAK;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAK;IACvB,UAAU,EAAE,MAAM,CAAK;IACvB,YAAY,EAAE,MAAM,CAAK;IAChC,SAAS,CAAC,MAAM,EAAE,iBAAiB,CAAC;gBAExB,MAAM,EAAE,iBAAiB,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM;IAO/D,KAAK,IAAI,IAAI;IAWb,GAAG,IAAI,IAAI;IAIlB,IAAI,GAAG,IAAI,wBAAwB,CAIlC;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAEM,aAAa,IAAI;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;CAO5D"}
|
package/dist/Camera.js
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
export class Camera {
|
|
2
|
+
constructor(canvas, width, height) {
|
|
3
|
+
this.x = 0;
|
|
4
|
+
this.y = 0;
|
|
5
|
+
this.anchorRelX = 0;
|
|
6
|
+
this.anchorRelY = 0;
|
|
7
|
+
this.angleDegrees = 0;
|
|
8
|
+
this.canvas = canvas;
|
|
9
|
+
const canvasSize = this.getCanvasSize();
|
|
10
|
+
this.width = width ?? canvasSize.width;
|
|
11
|
+
this.height = height ?? canvasSize.height;
|
|
12
|
+
}
|
|
13
|
+
begin() {
|
|
14
|
+
this.ctx.save();
|
|
15
|
+
this.ctx.translate(-this.x, -this.y);
|
|
16
|
+
this.ctx.scale(this.scaleX, this.scaleY);
|
|
17
|
+
this.ctx.translate(-this.anchorRelX * this.width, -this.anchorRelY * this.height);
|
|
18
|
+
this.ctx.rotate((this.angleDegrees * Math.PI) / 180);
|
|
19
|
+
}
|
|
20
|
+
end() {
|
|
21
|
+
this.ctx.restore();
|
|
22
|
+
}
|
|
23
|
+
get ctx() {
|
|
24
|
+
const ctx = this.canvas.getContext('2d');
|
|
25
|
+
if (!ctx)
|
|
26
|
+
throw new Error('2D context not available');
|
|
27
|
+
return ctx;
|
|
28
|
+
}
|
|
29
|
+
set scale(value) {
|
|
30
|
+
this.scaleX = value;
|
|
31
|
+
this.scaleY = value;
|
|
32
|
+
}
|
|
33
|
+
set scaleX(value) {
|
|
34
|
+
this.width = this.getCanvasSize().width / value;
|
|
35
|
+
}
|
|
36
|
+
get scaleX() {
|
|
37
|
+
return this.width / this.getCanvasSize().width;
|
|
38
|
+
}
|
|
39
|
+
set scaleY(value) {
|
|
40
|
+
this.height = this.getCanvasSize().height / value;
|
|
41
|
+
}
|
|
42
|
+
get scaleY() {
|
|
43
|
+
return this.height / this.getCanvasSize().height;
|
|
44
|
+
}
|
|
45
|
+
getCanvasSize() {
|
|
46
|
+
const canvasRect = this.canvas.getBoundingClientRect();
|
|
47
|
+
return {
|
|
48
|
+
width: canvasRect.width,
|
|
49
|
+
height: canvasRect.height
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
//# sourceMappingURL=Camera.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Camera.js","sourceRoot":"","sources":["../src/Camera.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,MAAM;IAUf,YAAY,MAAyB,EAAE,KAAc,EAAE,MAAe;QAT/D,MAAC,GAAW,CAAC,CAAC;QACd,MAAC,GAAW,CAAC,CAAC;QAGd,eAAU,GAAW,CAAC,CAAC;QACvB,eAAU,GAAW,CAAC,CAAC;QACvB,iBAAY,GAAW,CAAC,CAAC;QAI5B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACxC,IAAI,CAAC,KAAK,GAAG,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC;QACvC,IAAI,CAAC,MAAM,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;IAC9C,CAAC;IAEM,KAAK;QACR,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;QAChB,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACzC,IAAI,CAAC,GAAG,CAAC,SAAS,CACd,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,EAC7B,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,CACjC,CAAC;QACF,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC;IACzD,CAAC;IAEM,GAAG;QACN,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;IACvB,CAAC;IAED,IAAI,GAAG;QACH,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACzC,IAAG,CAAC,GAAG;YAAE,MAAM,IAAI,KAAK,CAAC,0BAA0B,CAAC,CAAC;QACrD,OAAO,GAAG,CAAC;IACf,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACnB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC;IAED,IAAI,MAAM,CAAC,KAAa;QACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC;IACpD,CAAC;IAED,IAAI,MAAM;QACN,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC;IACnD,CAAC;IAED,IAAI,MAAM,CAAC,KAAa;QACpB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,KAAK,CAAC;IACtD,CAAC;IAED,IAAI,MAAM;QACN,OAAQ,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC;IACtD,CAAC;IAEM,aAAa;QAChB,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;QACvD,OAAO;YACH,KAAK,EAAE,UAAU,CAAC,KAAK;YACvB,MAAM,EAAE,UAAU,CAAC,MAAM;SAC5B,CAAC;IACN,CAAC;CACJ"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputState.d.ts","sourceRoot":"","sources":["../src/InputState.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,gBAAgB,IAAI,UAAU,CAQ7C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputState.js","sourceRoot":"","sources":["../src/InputState.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,gBAAgB;IAC5B,OAAO;QACH,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,KAAK;QACb,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,KAAK;KACxB,CAAC;AACN,CAAC"}
|
package/dist/Loop.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Loop.d.ts","sourceRoot":"","sources":["../src/Loop.ts"],"names":[],"mappings":"AAAA,8BAAsB,IAAI;aACN,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI;IAEzC,KAAK,IAAI,IAAI;CAQvB"}
|
package/dist/Loop.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export class Loop {
|
|
2
|
+
start() {
|
|
3
|
+
const lastTimestamp = performance.now();
|
|
4
|
+
const loopFunction = (timestamp) => {
|
|
5
|
+
this.loop((timestamp - lastTimestamp) / 1000);
|
|
6
|
+
window.requestAnimationFrame(loopFunction);
|
|
7
|
+
};
|
|
8
|
+
window.requestAnimationFrame(loopFunction);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=Loop.js.map
|
package/dist/Loop.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Loop.js","sourceRoot":"","sources":["../src/Loop.ts"],"names":[],"mappings":"AAAA,MAAM,OAAgB,IAAI;IAGf,KAAK;QACR,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC;QACxC,MAAM,YAAY,GAAI,CAAC,SAAiB,EAAE,EAAE;YACxC,IAAI,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,aAAa,CAAC,GAAG,IAAI,CAAC,CAAC;YAC9C,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;QAC/C,CAAC,CAAA;QACD,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;IAC/C,CAAC;CACJ"}
|
package/dist/Mouse.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { Camera } from "./Camera";
|
|
2
|
+
export declare enum MouseButton {
|
|
3
|
+
Left = 0,
|
|
4
|
+
Middle = 1,
|
|
5
|
+
Right = 2
|
|
6
|
+
}
|
|
7
|
+
export declare class Mouse {
|
|
8
|
+
private canvas;
|
|
9
|
+
private _x;
|
|
10
|
+
private _y;
|
|
11
|
+
private _wheelDeltaAccX;
|
|
12
|
+
private _wheelDeltaAccY;
|
|
13
|
+
private _lastWheelDeltaX;
|
|
14
|
+
private _lastWheelDeltaY;
|
|
15
|
+
private _inputStates;
|
|
16
|
+
constructor(canvas: HTMLCanvasElement);
|
|
17
|
+
update(): void;
|
|
18
|
+
isPressed(button: MouseButton): boolean;
|
|
19
|
+
isDown(button: MouseButton): boolean;
|
|
20
|
+
isReleased(button: MouseButton): boolean;
|
|
21
|
+
get wheelDeltaX(): number;
|
|
22
|
+
get wheelDeltaY(): number;
|
|
23
|
+
getWorldX(camera: Camera): number;
|
|
24
|
+
getWorldY(camera: Camera): number;
|
|
25
|
+
get x(): number;
|
|
26
|
+
get y(): number;
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=Mouse.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Mouse.d.ts","sourceRoot":"","sources":["../src/Mouse.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGvC,oBAAY,WAAW;IACnB,IAAI,IAAI;IACR,MAAM,IAAI;IACV,KAAK,IAAI;CACZ;AAID,qBAAa,KAAK;IASF,OAAO,CAAC,MAAM;IAR1B,OAAO,CAAC,EAAE,CAAa;IACvB,OAAO,CAAC,EAAE,CAAa;IACvB,OAAO,CAAC,eAAe,CAAa;IACpC,OAAO,CAAC,eAAe,CAAa;IACpC,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,YAAY,CAA2C;gBAE3C,MAAM,EAAE,iBAAiB;IAyCtC,MAAM,IAAI,IAAI;IAad,SAAS,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO;IAKvC,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO;IAIpC,UAAU,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO;IAK/C,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAEM,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAIjC,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAIxC,IAAI,CAAC,IAAI,MAAM,CAEd;IAED,IAAI,CAAC,IAAI,MAAM,CAEd;CACJ"}
|
package/dist/Mouse.js
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { createInputState } from "./InputState";
|
|
2
|
+
export var MouseButton;
|
|
3
|
+
(function (MouseButton) {
|
|
4
|
+
MouseButton[MouseButton["Left"] = 0] = "Left";
|
|
5
|
+
MouseButton[MouseButton["Middle"] = 1] = "Middle";
|
|
6
|
+
MouseButton[MouseButton["Right"] = 2] = "Right";
|
|
7
|
+
})(MouseButton || (MouseButton = {}));
|
|
8
|
+
const MouseButtonMap = [MouseButton.Left, MouseButton.Middle, MouseButton.Right];
|
|
9
|
+
export class Mouse {
|
|
10
|
+
constructor(canvas) {
|
|
11
|
+
this.canvas = canvas;
|
|
12
|
+
this._x = 0;
|
|
13
|
+
this._y = 0;
|
|
14
|
+
this._wheelDeltaAccX = 0;
|
|
15
|
+
this._wheelDeltaAccY = 0;
|
|
16
|
+
this._lastWheelDeltaX = 0;
|
|
17
|
+
this._lastWheelDeltaY = 0;
|
|
18
|
+
this._inputStates = new Map();
|
|
19
|
+
this._inputStates.set(MouseButton.Left, createInputState());
|
|
20
|
+
this._inputStates.set(MouseButton.Middle, createInputState());
|
|
21
|
+
this._inputStates.set(MouseButton.Right, createInputState());
|
|
22
|
+
this.canvas.addEventListener('mousemove', (e) => {
|
|
23
|
+
const rect = this.canvas.getBoundingClientRect();
|
|
24
|
+
this._x = e.clientX - rect.left;
|
|
25
|
+
this._y = e.clientY - rect.top;
|
|
26
|
+
});
|
|
27
|
+
this.canvas.addEventListener('mousedown', (e) => {
|
|
28
|
+
const button = MouseButtonMap[e.button];
|
|
29
|
+
if (!button) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
const state = this._inputStates.get(button);
|
|
33
|
+
if (!state) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
state.isDown = true;
|
|
37
|
+
});
|
|
38
|
+
this.canvas.addEventListener('wheel', (e) => {
|
|
39
|
+
this._wheelDeltaAccX += e.deltaX;
|
|
40
|
+
this._wheelDeltaAccY += e.deltaY;
|
|
41
|
+
});
|
|
42
|
+
this.canvas.addEventListener('mouseup', (e) => {
|
|
43
|
+
const button = MouseButtonMap[e.button];
|
|
44
|
+
if (!button) {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
const state = this._inputStates.get(button);
|
|
48
|
+
if (!state) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
state.isDown = false;
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
update() {
|
|
55
|
+
this._inputStates.forEach((state) => {
|
|
56
|
+
state.isPressed = !state.isDownPrev && state.isDown;
|
|
57
|
+
state.isReleased = !state.isDown && !state.isReleasedPrev;
|
|
58
|
+
state.isDownPrev = state.isDown;
|
|
59
|
+
state.isReleasedPrev = state.isReleased;
|
|
60
|
+
});
|
|
61
|
+
this._lastWheelDeltaX = this._wheelDeltaAccX;
|
|
62
|
+
this._lastWheelDeltaY = this._wheelDeltaAccY;
|
|
63
|
+
this._wheelDeltaAccX = 0;
|
|
64
|
+
this._wheelDeltaAccY = 0;
|
|
65
|
+
}
|
|
66
|
+
isPressed(button) {
|
|
67
|
+
const state = this._inputStates.get(button);
|
|
68
|
+
return state ? state.isPressed : false;
|
|
69
|
+
}
|
|
70
|
+
isDown(button) {
|
|
71
|
+
const state = this._inputStates.get(button);
|
|
72
|
+
return state ? state.isDown : false;
|
|
73
|
+
}
|
|
74
|
+
isReleased(button) {
|
|
75
|
+
const state = this._inputStates.get(button);
|
|
76
|
+
return state ? state.isReleased : false;
|
|
77
|
+
}
|
|
78
|
+
get wheelDeltaX() {
|
|
79
|
+
return this._lastWheelDeltaX;
|
|
80
|
+
}
|
|
81
|
+
get wheelDeltaY() {
|
|
82
|
+
return this._lastWheelDeltaY;
|
|
83
|
+
}
|
|
84
|
+
getWorldX(camera) {
|
|
85
|
+
return camera.x + this._x / camera.scaleX;
|
|
86
|
+
}
|
|
87
|
+
getWorldY(camera) {
|
|
88
|
+
return camera.y + this._y / camera.scaleY;
|
|
89
|
+
}
|
|
90
|
+
get x() {
|
|
91
|
+
return this._x;
|
|
92
|
+
}
|
|
93
|
+
get y() {
|
|
94
|
+
return this._y;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
//# sourceMappingURL=Mouse.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Mouse.js","sourceRoot":"","sources":["../src/Mouse.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}
|
package/package.json
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "ilcm",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "A lightweight input and camera library for browser canvas applications",
|
|
5
|
+
"license": "ISC",
|
|
6
|
+
"author": "Volodymyr Kushnir",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"main": "./dist/index.js",
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"exports": {
|
|
11
|
+
".": {
|
|
12
|
+
"import": "./dist/index.js",
|
|
13
|
+
"types": "./dist/index.d.ts"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"keywords": [
|
|
20
|
+
"canvas",
|
|
21
|
+
"input",
|
|
22
|
+
"camera",
|
|
23
|
+
"mouse",
|
|
24
|
+
"browser",
|
|
25
|
+
"game-dev",
|
|
26
|
+
"2d"
|
|
27
|
+
],
|
|
28
|
+
"repository": {
|
|
29
|
+
"type": "git",
|
|
30
|
+
"url": "git+https://github.com/hero564/InputAndCamera.git"
|
|
31
|
+
},
|
|
32
|
+
"bugs": {
|
|
33
|
+
"url": "https://github.com/hero564/InputAndCamera/issues"
|
|
34
|
+
},
|
|
35
|
+
"homepage": "https://github.com/hero564/InputAndCamera",
|
|
36
|
+
"scripts": {
|
|
37
|
+
"build": "tsc",
|
|
38
|
+
"prepublishOnly": "npm run build"
|
|
39
|
+
},
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"typescript": "^5.9.3"
|
|
42
|
+
}
|
|
43
|
+
}
|