@pictogrammers/components 0.5.14 → 0.5.17

package/pg/inputPixelEditor/inputPixelEditor.ts

@@ -9,6 +9,7 @@ import getEllipseOutlinePixels from './utils/getEllipseOutlinePixels';
 import { WHITE, Pixel } from './utils/constants';
 import getLinePixels from './utils/getLinePixels';
 import getRectanglePixels from './utils/getRectanglePixels';
+import getLassoPixels from './utils/getLassoPixels';
 import getRectangleOutlinePixels from './utils/getRectangleOutlinePixels';
 import fillGrid from './utils/fillGrid';
 import iterateGrid from './utils/interateGrid';
@@ -96,6 +97,16 @@ interface Export {
   height?: number
 }
 
+interface AddLayerOptions {
+  name: string
+  type: Layer['type']
+  exclude?: boolean
+  locked?: boolean
+  hidden?: boolean
+  opacity?: number
+  data?: any[]
+}
+
 interface GridItem {
   value: number
   color: number
@@ -137,6 +148,11 @@ export default class PgInputPixelEditor extends HTMLElement {
   #startColor: number = -1;
   #startX: number = -1;
   #startY: number = -1;
+  #startClientX: number = -1;
+  #startClientY: number = -1;
+  #lassoPath: [number, number][] = [];
+  #lassoOutlinePixels: Set<string> = new Set();
+  #lassoOutlineList: { x: number; y: number }[] = [];
   #x: number = -1;
   #y: number = -1;
   #layer: number[] = [0];
@@ -338,19 +354,22 @@ export default class PgInputPixelEditor extends HTMLElement {
   #setSelectionPreview(pixels: Pixel[]) {
     // Undo previous selection
     this.#previousPreview.forEach(({x, y}) => {
+      if (x < 0 || x >= this.width || y < 0 || y >= this.height) { return; }
       this.#selectionPreview[y][x] = 0;
     });
+    this.#previousPreview = pixels;
     pixels.forEach(({ x, y }) => {
-      this.#previousPreview = pixels;
+      if (x < 0 || x >= this.width || y < 0 || y >= this.height) { return; }
       this.#selectionPreview[y][x] = 1;
     });
     this.$selectionPathPreview.classList.toggle('hide', false);
-    this.$selectionPathPreview.setAttribute('d', bitmaskToPath(this.#selectionPreview, { scale: this.size }));
+    this.$selectionPathPreview.setAttribute('d', bitmaskToPath(this.#selectionPreview, { scale: this.size })[0]);
   }
 
   #clearSelectionPreview() {
     this.$selectionPathPreview.classList.toggle('hide', true);
     this.#previousPreview.forEach(({x, y}) => {
+      if (x < 0 || x >= this.width || y < 0 || y >= this.height) { return; }
       this.#selectionPreview[y][x] = 0;
     });
   }
@@ -375,6 +394,7 @@ export default class PgInputPixelEditor extends HTMLElement {
   }
 
   #setSelectionPixel(x: number, y: number) {
+    if (x < 0 || x >= this.width || y < 0 || y >= this.height) { return; }
     this.#selectionPixels.set(`${x},${y}`, [x, y]);
     this.#selection[y][x] = 1;
   }
@@ -650,7 +670,6 @@ export default class PgInputPixelEditor extends HTMLElement {
   }
 
   async handleKeyDown(event: KeyboardEvent) {
-    console.log(event.shiftKey, event.ctrlKey, event.altKey, event.key);
     this.#isShift = true;
     switch (event.key) {
       case ' ':
@@ -757,6 +776,8 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#startColor = this.#data[this.#layer[0]][newY][newX];
     this.#startX = newX;
     this.#startY = newY;
+    this.#startClientX = event.clientX;
+    this.#startClientY = event.clientY;
     this.#x = newX;
     this.#y = newY;
     const color = event.buttons === 32 ? 0 : this.#color;
@@ -771,6 +792,11 @@ export default class PgInputPixelEditor extends HTMLElement {
           }
         }));
         break;
+      case InputMode.SelectLasso:
+        this.#lassoPath = [[newX, newY]];
+        this.#lassoOutlinePixels = new Set();
+        this.#lassoOutlineList = [];
+        break;
       case InputMode.Pixel:
         this.#setPixel(newX, newY, color);
         break;
@@ -800,33 +826,44 @@ export default class PgInputPixelEditor extends HTMLElement {
     const totalSize = this.size + this.gridSize;
     let newX = Math.floor((event.clientX - rect.left) / totalSize);
     let newY = Math.floor((event.clientY - rect.top) / totalSize);
-    //if (newX >= this.width) { newX = this.width - 1; }
-    //if (newY >= this.height) { newY = this.height - 1; }
+    if (newX >= this.width) { newX = this.width - 1; }
+    if (newY >= this.height) { newY = this.height - 1; }
+    if (newX < 0) { newX = 0; }
+    if (newY < 0) { newY = 0; }
     //if (this.#startX === -1 && this.#startY === -1) {
     //  return;
     //}
-    // Single Tap
-    if (newX === this.#startX && newY === this.#startY) {
+    const isDragSelect = this.#inputMode === InputMode.SelectRectangle
+      || this.#inputMode === InputMode.SelectEllipse
+      || this.#inputMode === InputMode.SelectLasso;
+    // Select tools moving less than 3px act as a click to deselect,
+    // shift keeps the current selection
+    if (isDragSelect
+      && Math.abs(event.clientX - this.#startClientX) < 3
+      && Math.abs(event.clientY - this.#startClientY) < 3) {
+      this.#clearSelectionPreview();
+      if (!event.shiftKey) {
+        this.clearSelection();
+      }
+    } else if (newX === this.#startX && newY === this.#startY) {
       switch (this.#inputMode) {
         case InputMode.SelectMagicWand:
           if (!event.shiftKey) {
             this.clearSelection();
           }
           const color = this.#data[this.#layer[0]][newY][newX];
-          console.log(color);
           const pixels = getFloodFill(this.#data[this.#layer[0]], newX, newY, [color]);
           pixels.forEach(([x, y]) => {
             this.#setSelectionPixel(x, y);
           });
           this.$selectionPathPreview.classList.toggle('hide', true);
           this.$selectionPath.classList.toggle('hide', false);
-          this.$selectionPath.setAttribute('d', bitmaskToPath(this.#selection, { scale: this.size }));
+          this.$selectionPath.setAttribute('d', bitmaskToPath(this.#selection, { scale: this.size })[0]);
           break;
         case InputMode.Pixel:
           // Same as current color
           if (this.#startColor === this.#color) {
             this.#setPixel(newX, newY, 0);
-            this.#data[this.#layer[0]][newY][newX] = 0;
           }
           break;
         case InputMode.Stamp:
@@ -850,7 +887,7 @@ export default class PgInputPixelEditor extends HTMLElement {
           });
           this.$selectionPathPreview.classList.toggle('hide', true);
           this.$selectionPath.classList.toggle('hide', false);
-          this.$selectionPath.setAttribute('d', bitmaskToPath(this.#selection, { scale: this.size }));
+          this.$selectionPath.setAttribute('d', bitmaskToPath(this.#selection, { scale: this.size })[0]);
           break;
         case InputMode.SelectEllipse:
           this.#clearSelectionPreview();
@@ -862,10 +899,19 @@ export default class PgInputPixelEditor extends HTMLElement {
           });
           this.$selectionPathPreview.classList.toggle('hide', true);
           this.$selectionPath.classList.toggle('hide', false);
-          this.$selectionPath.setAttribute('d', bitmaskToPath(this.#selection, { scale: this.size }));
+          this.$selectionPath.setAttribute('d', bitmaskToPath(this.#selection, { scale: this.size })[0]);
           break;
         case InputMode.SelectLasso:
-
+          this.#clearSelectionPreview();
+          if (!event.shiftKey) {
+            this.clearSelection();
+          }
+          getLassoPixels(this.#lassoPath).forEach(({ x, y }) => {
+            this.#setSelectionPixel(x, y);
+          });
+          this.$selectionPathPreview.classList.toggle('hide', true);
+          this.$selectionPath.classList.toggle('hide', false);
+          this.$selectionPath.setAttribute('d', bitmaskToPath(this.#selection, { scale: this.size })[0]);
           break;
         case InputMode.Line:
           getLinePixels(this.#startX, this.#startY, newX, newY).forEach(({ x, y }) => {
@@ -953,6 +999,28 @@ export default class PgInputPixelEditor extends HTMLElement {
         case InputMode.SelectRectangle:
           this.#setSelectionPreview(getRectanglePixels(startX, startY, lastX, lastY));
           break;
+        case InputMode.SelectEllipse:
+          this.#setSelectionPreview(getEllipsePixels(startX, startY, lastX, lastY));
+          break;
+        case InputMode.SelectLasso: {
+          const [sx, sy] = this.#lassoPath[0];
+          for (const [px, py] of points) {
+            const [prevX, prevY] = this.#lassoPath.at(-1)!;
+            for (const { x: lx, y: ly } of getLinePixels(prevX, prevY, px, py)) {
+              const key = `${lx},${ly}`;
+              if (!this.#lassoOutlinePixels.has(key)) {
+                this.#lassoOutlinePixels.add(key);
+                this.#lassoOutlineList.push({ x: lx, y: ly });
+              }
+            }
+            this.#lassoPath.push([px, py]);
+          }
+          const [cx, cy] = this.#lassoPath.at(-1)!;
+          const closing = getLinePixels(cx, cy, sx, sy)
+            .filter(({ x: lx, y: ly }) => !this.#lassoOutlinePixels.has(`${lx},${ly}`));
+          this.#setSelectionPreview([...this.#lassoOutlineList, ...closing]);
+          break;
+        }
         case InputMode.Pixel:
           for (var point of points) {
             this.#setPixel(point[0], point[1], color);
@@ -1100,7 +1168,7 @@ export default class PgInputPixelEditor extends HTMLElement {
     const cloned = cloneGrid(this.#data[this.#layer[0]]);
     const h = cloned.length - 1;
     iterateGrid(this.#data[this.#layer[0]], (x, y) => {
-      cloned[this.#layer[0]][y][x] = this.#data[h - y][x];
+      cloned[y][x] = this.#data[this.#layer[0]][h - y][x];
     });
     this.#data[this.#layer[0]] = cloned;
   }
@@ -1332,7 +1400,7 @@ export default class PgInputPixelEditor extends HTMLElement {
     return this.#colors;
   }
 
-  addColor(r, g, b, a) {
+  addColor(r: number, g: number, b: number, a: number) {
     this.#colors.push([r, g, b, a]);
   }
 
@@ -1379,7 +1447,7 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#layer = indexes;
   }
 
-  addLayer({ name, type, ...optional }) {
+  addLayer({ name, type, ...optional }: AddLayerOptions) {
     this.#data.push(fillGrid(this.width, this.height));
     this.#layers.push({
       name,
@@ -1466,8 +1534,12 @@ export default class PgInputPixelEditor extends HTMLElement {
   #getLayerPaths() {
     return this.#data.map((layer, layerIndex) => {
       const colors = this.getLayerColorIndexes(layerIndex);
-      return colors.map((color) => {
-        return [color, bitmaskToPath(layer, { scale: 1, include: [color] })];
+      const paths = bitmaskToPath(layer, {
+        scale: 1,
+        include: colors.map((color) => ([color])),
+      });
+      return colors.map((color, i) => {
+        return [color, paths[i]];
       });
     });
   }
@@ -1489,7 +1561,7 @@ export default class PgInputPixelEditor extends HTMLElement {
               color,
               path: bitmaskToPath(this.#data[layerIndex], {
                 scale: 1,
-                include: [color]
+                include: [[color]]
               }),
             };
           });
@@ -1603,8 +1675,8 @@ export default class PgInputPixelEditor extends HTMLElement {
       ...options,
       x: minX,
       y: minY,
-      width: maxX - minX,
-      height: maxY - minY,
+      width: maxX - minX + 1,
+      height: maxY - minY + 1,
     }, meta);
   }
 
@@ -1619,6 +1691,7 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#selectionPixels.forEach(([currentX, currentY]) => {
       const newX = currentX + x;
       const newY = currentY + y;
+      if (newX < 0 || newX >= this.width || newY < 0 || newY >= this.height) { return; }
       this.#layer.forEach((layer) => {
         const color = this.#data[layer][currentY][currentX];
         const newColor = this.#data[layer][newY][newX];
@@ -1632,7 +1705,6 @@ export default class PgInputPixelEditor extends HTMLElement {
     });
     const clearSelection = diffLeftMapPixels(this.#selectionPixels, newSelection);
     // Move pixels
-    console.log(changes);
     changes.forEach(([layer, newX, newY, color]) => {
       this.#data[layer][newY][newX] = color;
       this.#setPixel(newX, newY, color, [layer]);
@@ -1657,7 +1729,7 @@ export default class PgInputPixelEditor extends HTMLElement {
     });
 
     // Update render
-    this.$selectionPath.setAttribute('d', bitmaskToPath(this.#selection, { scale: this.size }));
+    this.$selectionPath.setAttribute('d', bitmaskToPath(this.#selection, { scale: this.size })[0]);
   }
 }