- commit
- 63af5bfda2fd92cc45a9616aad7b2e0829017f25
- parent
- 15bbb04f22762b374f5cd9b69538bdfbeab44722
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2023-02-26 20:35
refactor
Diffstat
| M | js/index.js | 70 | +++++++++++++++++++------------------------------------------ |
| A | js/pointers.js | 38 | ++++++++++++++++++++++++++++++++++++++ |
| M | js/view.js | 5 | +++++ |
3 files changed, 65 insertions, 48 deletions
diff --git a/js/index.js b/js/index.js
@@ -2,6 +2,7 @@ import { Frame } from './frame.js';
2 2 import { View } from './view.js';
3 3 import { loadImage } from './loader.js';
4 4 import { Animation } from './kinetic.js';
-1 5 import { registerPointerEvents } from './pointers.js';
5 6
6 7 var loader = document.querySelector('.loader');
7 8 var palette = document.querySelector('.palette');
@@ -19,7 +20,6 @@ var moveY = new Animation((value, dt) => {
19 20 view.render();
20 21 });
21 22
22 -1 var pointers = [];
23 23 var pointersStartState = null;
24 24
25 25 var setupPalette = function(image) {
@@ -108,40 +108,25 @@ canvas.addEventListener('wheel', event => {
108 108 view.setZoom(event.offsetX, event.offsetY, view.zoom * Math.pow(2, -event.deltaY / 2000));
109 109 });
110 110
111 -1 canvas.addEventListener('pointerdown', event => {
112 -1 if (pointers.length < 2 && (event.buttons & 1 || event.pointerType !== 'mouse')) {
113 -1 canvas.setPointerCapture(event.pointerId);
114 -1
115 -1 // clone because offsetX/Y change to 0 on the original event
116 -1 pointers.push({
117 -1 id: event.pointerId,
118 -1 x: event.offsetX,
119 -1 y: event.offsetY,
120 -1 });
121 -1
122 -1 pointersStartState = {
123 -1 pointers: pointers.map(e => ({x: e.x, y: e.y})),
124 -1 view: {
125 -1 dx: view.dx,
126 -1 dy: view.dy,
127 -1 zoom: view.zoom,
128 -1 },
129 -1 };
130 -1 }
131 -1 });
132 -1
133 -1 canvas.addEventListener('pointermove', event => {
134 -1 var i = pointers.findIndex(e => e.id === event.pointerId);
135 -1 if (i !== -1) {
136 -1 pointers[i].x = event.offsetX;
137 -1 pointers[i].y = event.offsetY;
138 -1
-1 111 registerPointerEvents(canvas, {
-1 112 down(pointers) {
-1 113 if (pointers.length === 2) {
-1 114 view.resetDraw();
-1 115 pointersStartState = {
-1 116 pointers: pointers.map(e => ({x: e.x, y: e.y})),
-1 117 view: {
-1 118 dx: view.dx,
-1 119 dy: view.dy,
-1 120 zoom: view.zoom,
-1 121 },
-1 122 };
-1 123 }
-1 124 },
-1 125 move(pointers) {
139 126 if (pointers.length === 1) {
140 127 view.mouse = [event.offsetX, event.offsetY];
141 128 view.render();
142 129 } else {
143 -1 view.mouse = null;
144 -1 view.prevMouse = null;
145 130 view.transform(
146 131 pointersStartState.pointers[0],
147 132 pointersStartState.pointers[1],
@@ -150,24 +135,13 @@ canvas.addEventListener('pointermove', event => {
150 135 pointersStartState.view,
151 136 );
152 137 }
153 -1 }
154 -1 });
155 -1
156 -1 var pointerup = function(event) {
157 -1 var i = pointers.findIndex(e => e.id === event.pointerId);
158 -1 if (i !== -1) {
-1 138 },
-1 139 up(pointers) {
159 140 if (pointers.length === 1) {
160 141 view.mouse = [event.offsetX, event.offsetY];
161 -1 view.draw();
162 -1
163 -1 view.prevMouse = null;
164 -1 view.mouse = null;
-1 142 view.draw(); // bypass throttle
165 143 view.render();
-1 144 view.resetDraw();
166 145 }
167 -1 pointers = [];
168 -1 pointersStartState = null;
169 -1 }
170 -1 };
171 -1
172 -1 canvas.addEventListener('pointerup', pointerup);
173 -1 canvas.addEventListener('pointercancel', pointerup);
-1 146 },
-1 147 });
diff --git a/js/pointers.js b/js/pointers.js
@@ -0,0 +1,38 @@
-1 1 export var registerPointerEvents = function(el, events) {
-1 2 var pointers = [];
-1 3
-1 4 el.addEventListener('pointerdown', event => {
-1 5 if (pointers.length < 2 && (event.buttons & 1 || event.pointerType !== 'mouse')) {
-1 6 el.setPointerCapture(event.pointerId);
-1 7
-1 8 // clone because offsetX/Y change to 0 on the original event
-1 9 pointers.push({
-1 10 id: event.pointerId,
-1 11 x: event.offsetX,
-1 12 y: event.offsetY,
-1 13 });
-1 14
-1 15 events.down(pointers);
-1 16 }
-1 17 });
-1 18
-1 19 el.addEventListener('pointermove', event => {
-1 20 var i = pointers.findIndex(e => e.id === event.pointerId);
-1 21 if (i !== -1) {
-1 22 pointers[i].x = event.offsetX;
-1 23 pointers[i].y = event.offsetY;
-1 24 events.move(pointers);
-1 25 }
-1 26 });
-1 27
-1 28 var pointerup = function(event) {
-1 29 var i = pointers.findIndex(e => e.id === event.pointerId);
-1 30 if (i !== -1) {
-1 31 events.up(pointers);
-1 32 pointers = [];
-1 33 }
-1 34 };
-1 35
-1 36 el.addEventListener('pointerup', pointerup);
-1 37 el.addEventListener('pointercancel', pointerup);
-1 38 };
diff --git a/js/view.js b/js/view.js
@@ -97,6 +97,11 @@ export class View {
97 97 }
98 98 }
99 99
-1 100 resetDraw() {
-1 101 this.mouse = null;
-1 102 this.prevMouse = null;
-1 103 }
-1 104
100 105 render() {
101 106 this.draw();
102 107