@ue-too/board-konva-integration 0.15.0 → 0.17.0
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/index.js +138 -2
- package/index.js.map +2 -2
- package/package.json +4 -4
package/index.js
CHANGED
|
@@ -1,5 +1,141 @@
|
|
|
1
|
-
|
|
1
|
+
// src/konva-input-event-parser.ts
|
|
2
|
+
class KonvaInputParser {
|
|
3
|
+
_stage;
|
|
4
|
+
_kmtInputStateMachine;
|
|
5
|
+
_inputOrchestrator;
|
|
6
|
+
_keyfirstPressed;
|
|
7
|
+
_abortController;
|
|
8
|
+
constructor(stage, kmtInputStateMachine, inputOrchestrator) {
|
|
9
|
+
this._stage = stage;
|
|
10
|
+
this._kmtInputStateMachine = kmtInputStateMachine;
|
|
11
|
+
this._inputOrchestrator = inputOrchestrator;
|
|
12
|
+
this._keyfirstPressed = new Map;
|
|
13
|
+
this.bindFunctions();
|
|
14
|
+
this._abortController = new AbortController;
|
|
15
|
+
}
|
|
16
|
+
bindFunctions() {
|
|
17
|
+
this.pointerDownHandler = this.pointerDownHandler.bind(this);
|
|
18
|
+
this.pointerUpHandler = this.pointerUpHandler.bind(this);
|
|
19
|
+
this.pointerMoveHandler = this.pointerMoveHandler.bind(this);
|
|
20
|
+
this.scrollHandler = this.scrollHandler.bind(this);
|
|
21
|
+
this.keydownHandler = this.keydownHandler.bind(this);
|
|
22
|
+
this.keyupHandler = this.keyupHandler.bind(this);
|
|
23
|
+
}
|
|
24
|
+
setUp() {
|
|
25
|
+
this._stage.on("pointerdown", this.pointerDownHandler);
|
|
26
|
+
this._stage.on("pointerup", this.pointerUpHandler);
|
|
27
|
+
this._stage.on("pointermove", this.pointerMoveHandler);
|
|
28
|
+
this._stage.on("wheel", this.scrollHandler);
|
|
29
|
+
window.addEventListener("keydown", this.keydownHandler, {
|
|
30
|
+
signal: this._abortController.signal
|
|
31
|
+
});
|
|
32
|
+
window.addEventListener("keyup", this.keyupHandler, {
|
|
33
|
+
signal: this._abortController.signal
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
tearDown() {
|
|
37
|
+
this._stage.off("pointerdown", this.pointerDownHandler);
|
|
38
|
+
this._stage.off("pointerup", this.pointerUpHandler);
|
|
39
|
+
this._stage.off("pointermove", this.pointerMoveHandler);
|
|
40
|
+
this._stage.off("wheel", this.scrollHandler);
|
|
41
|
+
this._abortController.abort();
|
|
42
|
+
this._abortController = new AbortController;
|
|
43
|
+
}
|
|
44
|
+
processEvent(...args) {
|
|
45
|
+
const result = this._kmtInputStateMachine.happens(...args);
|
|
46
|
+
if (result.handled && "output" in result) {
|
|
47
|
+
this._inputOrchestrator.processInputEventOutput(result.output);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
pointerDownHandler(eventObject) {
|
|
51
|
+
const event = eventObject.evt;
|
|
52
|
+
if (event.button === 0 && event.pointerType === "mouse") {
|
|
53
|
+
this.processEvent("leftPointerDown", {
|
|
54
|
+
x: event.clientX,
|
|
55
|
+
y: event.clientY
|
|
56
|
+
});
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
if (event.button === 1 && event.pointerType === "mouse") {
|
|
60
|
+
this.processEvent("middlePointerDown", {
|
|
61
|
+
x: event.clientX,
|
|
62
|
+
y: event.clientY
|
|
63
|
+
});
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
pointerUpHandler(eventObject) {
|
|
68
|
+
const e = eventObject.evt;
|
|
69
|
+
if (e.button === 0 && e.pointerType === "mouse") {
|
|
70
|
+
this.processEvent("leftPointerUp", { x: e.clientX, y: e.clientY });
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
if (e.button === 1 && e.pointerType === "mouse") {
|
|
74
|
+
this.processEvent("middlePointerUp", {
|
|
75
|
+
x: e.clientX,
|
|
76
|
+
y: e.clientY
|
|
77
|
+
});
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
pointerMoveHandler(eventObject) {
|
|
82
|
+
const e = eventObject.evt;
|
|
83
|
+
if (e.buttons === 1 && e.pointerType === "mouse") {
|
|
84
|
+
this.processEvent("leftPointerMove", {
|
|
85
|
+
x: e.clientX,
|
|
86
|
+
y: e.clientY
|
|
87
|
+
});
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
if (e.buttons === 4 && e.pointerType === "mouse") {
|
|
91
|
+
this.processEvent("middlePointerMove", {
|
|
92
|
+
x: e.clientX,
|
|
93
|
+
y: e.clientY
|
|
94
|
+
});
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
this.processEvent("pointerMove", { x: e.clientX, y: e.clientY });
|
|
98
|
+
}
|
|
99
|
+
scrollHandler(eventObject) {
|
|
100
|
+
const e = eventObject.evt;
|
|
101
|
+
if (e.ctrlKey) {
|
|
102
|
+
this.processEvent("scrollWithCtrl", {
|
|
103
|
+
x: e.clientX,
|
|
104
|
+
y: e.clientY,
|
|
105
|
+
deltaX: e.deltaX,
|
|
106
|
+
deltaY: e.deltaY
|
|
107
|
+
});
|
|
108
|
+
} else {
|
|
109
|
+
this.processEvent("scroll", {
|
|
110
|
+
x: e.clientX,
|
|
111
|
+
y: e.clientY,
|
|
112
|
+
deltaX: e.deltaX,
|
|
113
|
+
deltaY: e.deltaY
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
keydownHandler(event) {
|
|
118
|
+
if (this._keyfirstPressed.has(event.key)) {
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
this._keyfirstPressed.set(event.key, true);
|
|
122
|
+
if (event.key === " ") {
|
|
123
|
+
this.processEvent("spacebarDown");
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
keyupHandler(event) {
|
|
127
|
+
if (this._keyfirstPressed.has(event.key)) {
|
|
128
|
+
this._keyfirstPressed.delete(event.key);
|
|
129
|
+
}
|
|
130
|
+
if (event.key === " ") {
|
|
131
|
+
this.processEvent("spacebarUp");
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
export {
|
|
136
|
+
KonvaInputParser
|
|
137
|
+
};
|
|
2
138
|
|
|
3
|
-
//# debugId=
|
|
139
|
+
//# debugId=56D467C5BCB8661864756E2164756E21
|
|
4
140
|
|
|
5
141
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"sourcesContent": [
|
|
7
7
|
"import { EventArgs } from '@ue-too/being';\nimport {\n InputOrchestrator,\n KmtInputEventMapping,\n KmtInputStateMachine,\n} from '@ue-too/board';\nimport { KonvaEventObject } from 'konva/lib/Node';\nimport { Stage } from 'konva/lib/Stage';\n\nexport class KonvaInputParser {\n private _stage: Stage;\n private _kmtInputStateMachine: KmtInputStateMachine;\n private _inputOrchestrator: InputOrchestrator;\n private _keyfirstPressed: Map<string, boolean>;\n private _abortController: AbortController;\n\n constructor(\n stage: Stage,\n kmtInputStateMachine: KmtInputStateMachine,\n inputOrchestrator: InputOrchestrator\n ) {\n this._stage = stage;\n this._kmtInputStateMachine = kmtInputStateMachine;\n this._inputOrchestrator = inputOrchestrator;\n this._keyfirstPressed = new Map();\n this.bindFunctions();\n this._abortController = new AbortController();\n }\n\n bindFunctions() {\n this.pointerDownHandler = this.pointerDownHandler.bind(this);\n this.pointerUpHandler = this.pointerUpHandler.bind(this);\n this.pointerMoveHandler = this.pointerMoveHandler.bind(this);\n this.scrollHandler = this.scrollHandler.bind(this);\n this.keydownHandler = this.keydownHandler.bind(this);\n this.keyupHandler = this.keyupHandler.bind(this);\n }\n\n setUp() {\n this._stage.on('pointerdown', this.pointerDownHandler);\n this._stage.on('pointerup', this.pointerUpHandler);\n this._stage.on('pointermove', this.pointerMoveHandler);\n this._stage.on('wheel', this.scrollHandler);\n window.addEventListener('keydown', this.keydownHandler, {\n signal: this._abortController.signal,\n });\n window.addEventListener('keyup', this.keyupHandler, {\n signal: this._abortController.signal,\n });\n }\n\n tearDown() {\n this._stage.off('pointerdown', this.pointerDownHandler);\n this._stage.off('pointerup', this.pointerUpHandler);\n this._stage.off('pointermove', this.pointerMoveHandler);\n this._stage.off('wheel', this.scrollHandler);\n this._abortController.abort();\n this._abortController = new AbortController();\n }\n\n private processEvent<K extends keyof KmtInputEventMapping>(\n ...args: EventArgs<KmtInputEventMapping, K>\n ): void {\n const result = this._kmtInputStateMachine.happens(...args);\n if (result.handled && 'output' in result) {\n this._inputOrchestrator.processInputEventOutput(result.output);\n }\n }\n\n pointerDownHandler(eventObject: KonvaEventObject<PointerEvent, Stage>) {\n const event = eventObject.evt;\n if (event.button === 0 && event.pointerType === 'mouse') {\n this.processEvent('leftPointerDown', {\n x: event.clientX,\n y: event.clientY,\n });\n return;\n }\n if (event.button === 1 && event.pointerType === 'mouse') {\n this.processEvent('middlePointerDown', {\n x: event.clientX,\n y: event.clientY,\n });\n return;\n }\n }\n\n pointerUpHandler(eventObject: KonvaEventObject<PointerEvent, Stage>) {\n const e = eventObject.evt;\n if (e.button === 0 && e.pointerType === 'mouse') {\n this.processEvent('leftPointerUp', { x: e.clientX, y: e.clientY });\n return;\n }\n if (e.button === 1 && e.pointerType === 'mouse') {\n this.processEvent('middlePointerUp', {\n x: e.clientX,\n y: e.clientY,\n });\n return;\n }\n }\n\n pointerMoveHandler(eventObject: KonvaEventObject<PointerEvent, Stage>) {\n const e = eventObject.evt;\n if (e.buttons === 1 && e.pointerType === 'mouse') {\n this.processEvent('leftPointerMove', {\n x: e.clientX,\n y: e.clientY,\n });\n return;\n }\n if (e.buttons === 4 && e.pointerType === 'mouse') {\n this.processEvent('middlePointerMove', {\n x: e.clientX,\n y: e.clientY,\n });\n return;\n }\n this.processEvent('pointerMove', { x: e.clientX, y: e.clientY });\n }\n\n scrollHandler(eventObject: KonvaEventObject<WheelEvent, Stage>) {\n const e = eventObject.evt;\n if (e.ctrlKey) {\n this.processEvent('scrollWithCtrl', {\n x: e.clientX,\n y: e.clientY,\n deltaX: e.deltaX,\n deltaY: e.deltaY,\n });\n } else {\n this.processEvent('scroll', {\n x: e.clientX,\n y: e.clientY,\n deltaX: e.deltaX,\n deltaY: e.deltaY,\n });\n }\n }\n\n keydownHandler(event: KeyboardEvent) {\n if (this._keyfirstPressed.has(event.key)) {\n return;\n }\n this._keyfirstPressed.set(event.key, true);\n if (event.key === ' ') {\n this.processEvent('spacebarDown');\n }\n }\n\n keyupHandler(event: KeyboardEvent) {\n if (this._keyfirstPressed.has(event.key)) {\n this._keyfirstPressed.delete(event.key);\n }\n if (event.key === ' ') {\n this.processEvent('spacebarUp');\n }\n }\n}\n"
|
|
8
8
|
],
|
|
9
|
-
"mappings": "AASO,MAAM,
|
|
10
|
-
"debugId": "
|
|
9
|
+
"mappings": "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",
|
|
10
|
+
"debugId": "56D467C5BCB8661864756E2164756E21",
|
|
11
11
|
"names": []
|
|
12
12
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ue-too/board-konva-integration",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.17.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"types": "./index.d.ts",
|
|
24
24
|
"module": "./index.js",
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@ue-too/board": "^0.
|
|
27
|
-
"@ue-too/being": "^0.
|
|
28
|
-
"@ue-too/math": "^0.
|
|
26
|
+
"@ue-too/board": "^0.17.0",
|
|
27
|
+
"@ue-too/being": "^0.17.0",
|
|
28
|
+
"@ue-too/math": "^0.17.0"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"konva": "10.0.12"
|