paint-by-numbers

commit

0c20f03f8b7f982cb08158024a8370a6057f35ca

parent

bfb61c430bc9ac9d25cd501a5e49c9d8d8bc7fc0

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2023-02-15 06:25

draw when frame moves under mouse

Diffstat

2 files changed, 33 insertions, 22 deletions

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

@@ -19,8 +19,6 @@ var moveY = new Animation((value, dt) => {
   19    19     view.render();
   20    20 });
   21    21 
   22    -1 var pencil = 0;
   23    -1 
   24    22 var setupPalette = function(image) {
   25    23     palette.innerHTML = '';
   26    24     for (var i = 0; i < image.colors.length; i++) {
@@ -29,7 +27,7 @@ var setupPalette = function(image) {
   29    27         radio.name = 'pencil';
   30    28         radio.value = i;
   31    29         radio.addEventListener('change', event => {
   32    -1             pencil = parseInt(event.target.value, 10);
   -1    30             view.pencil = parseInt(event.target.value, 10);
   33    31         });
   34    32 
   35    33         var span = document.createElement('span');
@@ -48,8 +46,8 @@ var setupPalette = function(image) {
   48    46 
   49    47 var setPencil = function(color) {
   50    48     if (color >= 0 && color < palette.pencil.length) {
   51    -1         pencil = color;
   52    -1         palette.pencil.value = pencil;
   -1    49         view.pencil = color;
   -1    50         palette.pencil.value = color;
   53    51         palette.querySelector(':checked').parentElement.scrollIntoView();
   54    52     }
   55    53 };
@@ -81,9 +79,9 @@ window.addEventListener('keydown', event => {
   81    79     } else if (['d', 'ArrowRight'].includes(event.key)) {
   82    80         moveX.set(-1);
   83    81     } else if (['q', 'PageUp'].includes(event.key)) {
   84    -1         setPencil(pencil - 1);
   -1    82         setPencil(view.pencil - 1);
   85    83     } else if (['e', 'PageDown'].includes(event.key)) {
   86    -1         setPencil(pencil + 1);
   -1    84         setPencil(view.pencil + 1);
   87    85     } else if (event.key === '+') {
   88    86         view.setZoom(view.canvas.width / 2, view.canvas.height / 2, view.zoom * 1.2);
   89    87     } else if (event.key === '-') {
@@ -107,24 +105,16 @@ canvas.addEventListener('wheel', event => {
  107   105     view.setZoom(event.offsetX, event.offsetY, view.zoom * Math.pow(2, -event.deltaY / 2000));
  108   106 });
  109   107 
  110    -1 var last_click = null;
  111    -1 
  112    -1 var onClick = function(event) {
   -1   108 var onMouse = function(event) {
  113   109     if (event.buttons & 1) {
  114    -1         var [x, y] = view.toFrameXY(event.offsetX, event.offsetY);
  115    -1 
  116    -1         if (last_click) {
  117    -1             frame.drawLine(last_click.x, last_click.y, x, y, pencil);
  118    -1         } else {
  119    -1             frame.setPixel(x, y, pencil);
  120    -1         }
  121    -1         last_click = {x: x, y: y};
  122    -1 
   -1   110         view.mouse = [event.offsetX, event.offsetY];
  123   111         view.render();
  124   112     } else {
  125    -1         last_click = null;
   -1   113         view.mouse = null;
   -1   114         view.prevMouse = null;
  126   115     }
  127   116 };
  128   117 
  129    -1 canvas.addEventListener('mousemove', onClick);
  130    -1 canvas.addEventListener('mousedown', onClick);
   -1   118 canvas.addEventListener('mousemove', onMouse);
   -1   119 canvas.addEventListener('mousedown', onMouse);
   -1   120 canvas.addEventListener('mouseup', onMouse);

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

@@ -19,6 +19,9 @@ export class View {
   19    19         this.zoom = 1;
   20    20         this.dx = 0;
   21    21         this.dy = 0;
   -1    22         this.mouse = null;
   -1    23         this.prevMouse = null;
   -1    24         this.pencil = 0;
   22    25     }
   23    26 
   24    27     refreshSize() {
@@ -37,6 +40,9 @@ export class View {
   37    40         this.zoom = this.canvas.height / this.frame.canvas.height * 0.8;
   38    41         this.dx = (this.canvas.width - this.frame.canvas.width * this.zoom) / 2;
   39    42         this.dy = (this.canvas.height - this.frame.canvas.height * this.zoom) / 2;
   -1    43         this.mouse = null;
   -1    44         this.prevMouse = null;
   -1    45         this.pencil = 0;
   40    46         this.render();
   41    47     }
   42    48 
@@ -55,7 +61,22 @@ export class View {
   55    61         this.render();
   56    62     }
   57    63 
   -1    64     draw() {
   -1    65         if (this.mouse) {
   -1    66             var [x, y] = this.toFrameXY(...this.mouse);
   -1    67             if (this.prevMouse) {
   -1    68                 var [x2, y2] = this.toFrameXY(...this.prevMouse);
   -1    69                 this.frame.drawLine(x2, y2, x, y, this.pencil);
   -1    70             } else {
   -1    71                 this.frame.setPixel(x, y, this.pencil);
   -1    72             }
   -1    73             this.prevMouse = this.mouse;
   -1    74         }
   -1    75     }
   -1    76 
   58    77     render() {
   -1    78         this.draw();
   -1    79 
   59    80         this.dx = Math.min(this.dx, this.canvas.width / 2);
   60    81         this.dy = Math.min(this.dy, this.canvas.height / 2);
   61    82         this.dx = Math.max(this.dx, this.canvas.width / 2 - this.frame.canvas.width * this.zoom);