paint-by-numbers

commit

15bbb04f22762b374f5cd9b69538bdfbeab44722

parent

0ab4db5590c05773d4395c0d7f4d8448dcaa4a32

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2023-02-26 20:03

allow to move canvas with two fingers

Diffstat

3 files changed, 87 insertions, 10 deletions

diff --git a/js/index.js b/js/index.js

@@ -19,6 +19,9 @@ var moveY = new Animation((value, dt) => {
   19    19     view.render();
   20    20 });
   21    21 
   -1    22 var pointers = [];
   -1    23 var pointersStartState = null;
   -1    24 
   22    25 var setupPalette = function(image) {
   23    26     palette.innerHTML = '';
   24    27     for (var i = 1; i < image.colors.length; i++) {
@@ -105,16 +108,66 @@ canvas.addEventListener('wheel', event => {
  105   108     view.setZoom(event.offsetX, event.offsetY, view.zoom * Math.pow(2, -event.deltaY / 2000));
  106   109 });
  107   110 
  108    -1 var onMouse = function(event) {
  109    -1     if (event.buttons & 1) {
  110    -1         view.mouse = [event.offsetX, event.offsetY];
  111    -1         view.render();
  112    -1     } else {
  113    -1         view.mouse = null;
  114    -1         view.prevMouse = null;
   -1   111 canvas.addEventListener('pointerdown', event => {
   -1   112     if (pointers.length < 2 && (event.buttons & 1 || event.pointerType !== 'mouse')) {
   -1   113         canvas.setPointerCapture(event.pointerId);
   -1   114 
   -1   115         // clone because offsetX/Y change to 0 on the original event
   -1   116         pointers.push({
   -1   117             id: event.pointerId,
   -1   118             x: event.offsetX,
   -1   119             y: event.offsetY,
   -1   120         });
   -1   121 
   -1   122         pointersStartState = {
   -1   123             pointers: pointers.map(e => ({x: e.x, y: e.y})),
   -1   124             view: {
   -1   125                 dx: view.dx,
   -1   126                 dy: view.dy,
   -1   127                 zoom: view.zoom,
   -1   128             },
   -1   129         };
   -1   130     }
   -1   131 });
   -1   132 
   -1   133 canvas.addEventListener('pointermove', event => {
   -1   134     var i = pointers.findIndex(e => e.id === event.pointerId);
   -1   135     if (i !== -1) {
   -1   136         pointers[i].x = event.offsetX;
   -1   137         pointers[i].y = event.offsetY;
   -1   138 
   -1   139         if (pointers.length === 1) {
   -1   140             view.mouse = [event.offsetX, event.offsetY];
   -1   141             view.render();
   -1   142         } else {
   -1   143             view.mouse = null;
   -1   144             view.prevMouse = null;
   -1   145             view.transform(
   -1   146                 pointersStartState.pointers[0],
   -1   147                 pointersStartState.pointers[1],
   -1   148                 pointers[0],
   -1   149                 pointers[1],
   -1   150                 pointersStartState.view,
   -1   151             );
   -1   152         }
   -1   153     }
   -1   154 });
   -1   155 
   -1   156 var pointerup = function(event) {
   -1   157     var i = pointers.findIndex(e => e.id === event.pointerId);
   -1   158     if (i !== -1) {
   -1   159         if (pointers.length === 1) {
   -1   160             view.mouse = [event.offsetX, event.offsetY];
   -1   161             view.draw();
   -1   162 
   -1   163             view.prevMouse = null;
   -1   164             view.mouse = null;
   -1   165             view.render();
   -1   166         }
   -1   167         pointers = [];
   -1   168         pointersStartState = null;
  115   169     }
  116   170 };
  117   171 
  118    -1 canvas.addEventListener('mousemove', onMouse);
  119    -1 canvas.addEventListener('mousedown', onMouse);
  120    -1 canvas.addEventListener('mouseup', onMouse);
   -1   172 canvas.addEventListener('pointerup', pointerup);
   -1   173 canvas.addEventListener('pointercancel', pointerup);

diff --git a/js/view.js b/js/view.js

@@ -61,6 +61,29 @@ export class View {
   61    61         this.render();
   62    62     }
   63    63 
   -1    64     transform(old1, old2, new1, new2, old_view) {
   -1    65         var cx_old = (old1.x + old2.x) / 2;
   -1    66         var cy_old = (old1.y + old2.y) / 2;
   -1    67         var cx_new = (new1.x + new2.x) / 2;
   -1    68         var cy_new = (new1.y + new2.y) / 2;
   -1    69 
   -1    70         var dx_old = old1.x - old2.x;
   -1    71         var dy_old = old1.y - old2.y;
   -1    72         var d_old = Math.sqrt(dx_old * dx_old + dy_old * dy_old);
   -1    73 
   -1    74         var dx_new = new1.x - new2.x;
   -1    75         var dy_new = new1.y - new2.y;
   -1    76         var d_new = Math.sqrt(dx_new * dx_new + dy_new * dy_new);
   -1    77 
   -1    78         // move center
   -1    79         this.dx = old_view.dx + cx_new - cx_old;
   -1    80         this.dy = old_view.dy + cy_new - cy_old;
   -1    81 
   -1    82         // change zoom and keep center
   -1    83         this.zoom = old_view.zoom;
   -1    84         this.setZoom(cx_new, cy_new, old_view.zoom * d_new / d_old);
   -1    85     }
   -1    86 
   64    87     draw() {
   65    88         if (this.mouse) {
   66    89             var [x, y] = this.toFrameXY(...this.mouse);

diff --git a/style.css b/style.css

@@ -13,6 +13,7 @@ body {
   13    13 canvas {
   14    14 	block-size: 100%;
   15    15 	inline-size: 100%;
   -1    16 	touch-action: none;
   16    17 }
   17    18 
   18    19 .loader {