0.3.0

- Faster paint functions
- Pressure fixes
- Open File feature

.jshintrc

@@ -14,6 +14,8 @@
   "esversion": 6,
 
   "globals": {
+    "ImageData": true,
+
     "$T": true,
     "Tegaki": true,
     "TegakiPencil": true,

js/main.js

@@ -1,7 +1,7 @@
 var Tegaki;
 
 Tegaki = {
-  VERSION: '0.2.1',
+  VERSION: '0.3.0',
 
   bg: null,
   canvas: null,
@@ -22,7 +22,7 @@ Tegaki = {
   activeLayer: null,
   layerIndex: null,
 
-  skipPointerMove: false,
+  activePointerId: 0,
 
   isPainting: false,
   isErasing: false,
@@ -1167,8 +1167,8 @@ Tegaki = {
   },
 
   onPointerMove: function(e) {
-    if (Tegaki.skipPointerMove) {
-      Tegaki.skipPointerMove = false;
+    if (Tegaki.activePointerId !== e.pointerId) {
+      Tegaki.activePointerId = e.pointerId;
       return;
     }
 
@@ -1189,6 +1189,8 @@ Tegaki = {
       return;
     }
 
+    Tegaki.activePointerId = e.pointerId;
+
     if (e.target.parentNode === Tegaki.layersCnt) {
       if (Tegaki.activeLayer === null) {
         alert(TegakiStrings.noActiveLayer);
@@ -1230,7 +1232,7 @@ Tegaki = {
   },
 
   onPointerUp: function(e) {
-    Tegaki.skipPointerMove = true;
+    Tegaki.activePointerId = e.pointerId;
 
     if (Tegaki.isPainting) {
       Tegaki.tool.commit && Tegaki.tool.commit();

js/tools/airbrush.js

@@ -5,6 +5,8 @@ TegakiAirbrush = {
 
   keybind: 'a',
 
+  useGhostLayer: true,
+
   init: function() {
     this.size = 32;
     this.alpha = 0.5;

js/tools/blur.js

@@ -10,45 +10,47 @@ TegakiBlur = {
     this.step = 0.25;
     this.stepAcc = 0;
 
-    this.draw = TegakiBrush.draw;  
     this.generateBrush = TegakiBrush.generateBrush;  
     this.setSize = TegakiBrush.setSize;  
     this.setAlpha = TegakiBrush.setAlpha;  
     this.setColor = TegakiBrush.setColor;  
     this.set = TegakiBrush.set;
   },
 
-  brushFn: function(x, y) {
-    var i, j, ctx, src, size, srcData, dest, destData, lim, kernel,
-      sx, sy, r, g, b, a, aa, acc, kx, ky;
+  brushFn: function(x, y, src, imgData) {
+    var i, j, size, srcData, destData, limX, limY, kernel,
+      sx, sy, r, g, b, a, aa, acc, kx, ky, px, w, h;
 
     x = 0 | x;
     y = 0 | y;
 
     size = this.brushSize;
-    ctx = Tegaki.activeCtx;
-    src = ctx.getImageData(x, y, size, size);
     srcData = src.data;
-    dest = ctx.createImageData(size, size);
-    destData = dest.data;
+    destData = imgData.data;
     kernel = this.kernel;
-    lim = size - 1;
+
+    w = imgData.width;
+    h = imgData.height;
+    limX = w - 1;
+    limY = h - 1;
 
     for (sx = 0; sx < size; ++sx) {
       for (sy = 0; sy < size; ++sy) {
         r = g = b = a = acc = 0;
         i = (sy * size + sx) * 4;
-        if (kernel[(sy * size + sx) * 4 + 3] === 0
-          || sx === 0 || sy === 0 || sx === lim || sy === lim) {
-          destData[i] = srcData[i]; ++i;
-          destData[i] = srcData[i]; ++i;
-          destData[i] = srcData[i]; ++i;
-          destData[i] = srcData[i];
+        px = ((sy + y) * w + (sx + x)) * 4;
+
+        if (kernel[i + 3] === 0 || sx === 0 || sy === 0 || (sx + x) === limX || (sy + y) === limY) {
+          destData[px] = srcData[px]; ++px;
+          destData[px] = srcData[px]; ++px;
+          destData[px] = srcData[px]; ++px;
+          destData[px] = srcData[px];
           continue;
         }
+
         for (kx = -1; kx < 2; ++kx) {
           for (ky = -1; ky < 2; ++ky) {
-            j = ((sy - ky) * size + (sx - kx)) * 4;
+            j = ((sy + y - ky) * w + (sx + x - kx)) * 4;
             aa = srcData[j + 3];
             acc += aa;
             r += srcData[j] * aa; ++j;
@@ -57,17 +59,89 @@ TegakiBlur = {
             a += srcData[j];
           }
         }
-        destData[i] = r / acc; ++i;
-        destData[i] = g / acc; ++i;
-        destData[i] = b / acc; ++i;
-        destData[i] = a / 9;
+
+        destData[px] = r / acc; ++px;
+        destData[px] = g / acc; ++px;
+        destData[px] = b / acc; ++px;
+        destData[px] = a / 9;
       }
     }
-
-    ctx.putImageData(dest, x, y);
   },
 
-  draw: null,
+  draw: function(posX, posY, pt) {
+    var mx, my, fromX, fromY, sx, sy, dx, dy, err, derr, stepAcc,
+      srcImgData, destImgData, center, tainted;
+
+    center = this.center;
+
+    if (pt === true) {
+      this.stepAcc = 0;
+      this.posX = posX; 
+      this.posY = posY;
+
+      srcImgData = Tegaki.activeCtx.getImageData(
+        posX - this.center,
+        posY - this.center,
+        this.brushSize, this.brushSize
+      );
+
+      destImgData = new ImageData(new Uint8ClampedArray(srcImgData.data), srcImgData.width);
+
+      this.brushFn(0, 0, srcImgData, destImgData);
+
+      Tegaki.activeCtx.putImageData(destImgData, posX - center, posY - center);
+
+      return;
+    }
+
+    stepAcc = this.stepAcc;
+
+    fromX = this.posX;
+    fromY = this.posY;
+
+    if (fromX < posX) { dx = posX - fromX; sx = fromX - center; mx = 1; }
+    else { dx = fromX - posX; sx = posX - center; mx = -1; }
+
+    if (fromY < posY) { dy = posY - fromY; sy = fromY - center; my = 1; }
+    else { dy = fromY - posY; sy = posY - center; my = -1; }
+
+
+    srcImgData = Tegaki.activeCtx.getImageData(sx, sy, dx + this.brushSize, dy + this.brushSize);
+    destImgData = new ImageData(new Uint8ClampedArray(srcImgData.data), srcImgData.width);
+
+    err = (dx > dy ? dx : -dy) / 2;
+
+    dx = -dx;
+
+    tainted = false;
+
+    while (true) {
+      ++stepAcc;
+
+      if (stepAcc > this.stepSize) {
+        this.brushFn(fromX - center - sx, fromY - center - sy, srcImgData, destImgData);
+        tainted = true;
+        stepAcc = 0;
+      }
+
+      if (fromX === posX && fromY === posY) {
+        break;
+      }
+
+      derr = err;
+
+      if (derr > dx) { err -= dy; fromX += mx; }
+      if (derr < dy) { err -= dx; fromY += my; }
+    }
+
+    this.stepAcc = stepAcc;
+    this.posX = posX; 
+    this.posY = posY;
+
+    if (tainted) {
+      Tegaki.activeCtx.putImageData(destImgData, sx, sy);
+    }
+  },
 
   generateBrush: null,