More progress

Author: Templarian

src/pg/inputPixelEditor/__examples__/basic/basic.css

@@ -0,0 +1,9 @@
+[part="debug"] {
+  background: #555;
+  padding: 1rem;
+  display: flex;
+}
+
+[part="debug"] canvas {
+  border: 1px solid #FFF;
+}

src/pg/inputPixelEditor/__examples__/basic/basic.html

@@ -7,6 +7,7 @@
     <code>oninput: <span part="value2"></span></code>
   </div>
   <div>
+    <button part="clear">clear</button>
     <button part="modePixel">Pixel</button>
     <button part="modeLine">Line</button>
     <button part="modeRectangle">Rectangle</button>

src/pg/inputPixelEditor/__examples__/basic/basic.ts

@@ -2,9 +2,11 @@ import { Component, Part } from '@pictogrammers/element';
 import PgInputPixelEditor from '../../inputPixelEditor';
 
 import template from './basic.html';
+import style from './basic.css';
 
 @Component({
   selector: 'x-pg-input-pixel-editor-basic',
+  style,
   template
 })
 export default class XPgInputPixelEditorBasic extends HTMLElement {
@@ -14,6 +16,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $value2: HTMLSpanElement;
   @Part() $debug: HTMLDivElement;
 
+  @Part() $clear: HTMLButtonElement;
   @Part() $modePixel: HTMLButtonElement;
   @Part() $modeLine: HTMLButtonElement;
   @Part() $modeRectangle: HTMLButtonElement;
@@ -34,6 +37,18 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     this.$modeRectangle.addEventListener('click', () => {
       this.$input.inputModeRectangle();
     });
+    this.$modeRectangleOutline.addEventListener('click', () => {
+      this.$input.inputModeRectangleOutline();
+    });
+    this.$modeEllipse.addEventListener('click', () => {
+      this.$input.inputModeEllipse();
+    });
+    this.$modeEllipseOutline.addEventListener('click', () => {
+      this.$input.inputModeEllipseOutline();
+    });
+    this.$clear.addEventListener('click', () => {
+      this.$input.clear();
+    });
   }
 
   handleChange(e: CustomEvent) {
@@ -47,9 +62,13 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   }
 
   handleDebug(e: CustomEvent) {
-    const { baseLayer, editLayer, previewLayer } = e.detail;
+    const { x, y, width, height, context, baseLayer, editLayer, noEditLayer, previewLayer } = e.detail;
     this.$debug.appendChild(baseLayer);
     this.$debug.appendChild(editLayer);
+    this.$debug.appendChild(noEditLayer);
     this.$debug.appendChild(previewLayer);
+    //context.strokeStyle = 'rgba(255, 0, 0, 0.3)';
+    //context.lineWidth = 1;
+    //context.strokeRect(x, y, width, height);
   }
 }

src/pg/inputPixelEditor/inputPixelEditor.css

@@ -5,4 +5,5 @@
 canvas {
   touch-action: none;
   user-select: none;
+  outline: 0;
 }

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -7,12 +7,13 @@ import cloneGrid from './utils/cloneGrid';
 import getEllipseOutlinePixels from './utils/getEllipseOutlinePixels';
 import { WHITE } from './utils/constants';
 import getLinePixels from './utils/getLinePixels';
-import getRectanglePixels from './utils/getRectangleOutlinePixels';
+import getRectanglePixels from './utils/getRectanglePixels';
 import getRectangleOutlinePixels from './utils/getRectangleOutlinePixels';
 import fillGrid from './utils/fillGrid';
 import iterateGrid from './utils/interateGrid';
 import bitmaskToPath from './utils/bitmapToMask';
 import createLayer from './utils/createLayer';
+import diffGrid from './utils/diffGrid';
 
 type Pixel = { x: number, y: number };
 
@@ -40,6 +41,9 @@ export default class PgInputPixelEditor extends HTMLElement {
   #startY: number = -1;
   #x: number = -1;
   #y: number = -1;
+  #isCtrl: boolean = false;
+  #isShift: boolean = false;
+  #isAlt: boolean = false;
   #data: number[][] = [];
   #undoHistory: [number, number, number][][] = [];
   #redoHistory: [number, number, number][][] = [];
@@ -61,11 +65,11 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#context = context;
     // Wire Up Events
     this.$canvas.addEventListener(
-      'contextMenu',
+      'contextmenu',
       this.handleContextMenu.bind(this)
     );
     this.$canvas.addEventListener(
-      'doubleClick',
+      'doubleclick',
       this.handleDoubleClick.bind(this)
     );
     this.$canvas.addEventListener(
@@ -193,17 +197,22 @@ export default class PgInputPixelEditor extends HTMLElement {
         maxY: Math.max(previous.maxY, current.y, previousY)
       };
     }, { minX: this.width, maxX: 0, minY: this.height, maxY: 0 });
+    const x = minX * totalSize;
+    const y = minY * totalSize;
+    const width = (maxX - minX + 1) * totalSize;
+    const height = (maxY - minY + 1) * totalSize;
+    this.#context.clearRect(x, y, width, height);
     // base layer to main canvas
     this.#context.drawImage(
       this.#baseLayer,
-      minX * totalSize, minY * totalSize, maxX * totalSize, maxY * totalSize,
-      minX * totalSize, minY * totalSize, maxX * totalSize, maxY * totalSize
+      x, y, width, height,
+      x, y, width, height
     );
     // edit to main canvas
     this.#context.drawImage(
       this.#editLayer,
-      minX * totalSize, minY * totalSize, maxX * totalSize, maxY * totalSize,
-      minX * totalSize, minY * totalSize, maxX * totalSize, maxY * totalSize
+      x, y, width, height,
+      x, y, width, height
     );
     // preview layer
     this.#previewLayerContext.clearRect(0, 0, actualWidth, actualHeight);
@@ -222,20 +231,28 @@ export default class PgInputPixelEditor extends HTMLElement {
     // preview layer to main canvas
     this.#context.drawImage(
       this.#previewLayer,
-      minX * totalSize, minY * totalSize, maxX * totalSize, maxY * totalSize,
-      minX * totalSize, minY * totalSize, maxX * totalSize, maxY * totalSize
+      x, y, width, height,
+      x, y, width, height
     );
+    // Debug
     this.dispatchEvent(new CustomEvent('debug', {
       detail: {
+        x,
+        y,
+        width,
+        height,
+        canvas: this.$canvas,
+        context: this.#context,
         editLayer: this.#editLayer,
+        noEditLayer: this.#noEditLayer,
         baseLayer: this.#baseLayer,
         previewLayer: this.#previewLayer
       }
     }));
-    console.log('render preview', minX, minY, maxX, maxY);
   }
 
   handleKeyDown(event: KeyboardEvent) {
+    console.log(event.shiftKey, event.ctrlKey, event.altKey, event.key);
     if (event.key === ' ') {
       console.log('space!')
     }
@@ -259,6 +276,11 @@ export default class PgInputPixelEditor extends HTMLElement {
       event.stopPropagation();
       return;
     }
+    // Update Modifiers
+    this.#isAlt = event.altKey;
+    this.#isCtrl = event.ctrlKey;
+    this.#isShift = event.shiftKey;
+    // Drawing
     const rect = this.$canvas.getBoundingClientRect();
     const totalSize = this.size + this.gridSize;
     let newX = Math.floor((event.clientX - rect.left) / totalSize);
@@ -273,6 +295,7 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#x = newX;
     this.#y = newY;
     const color = event.buttons === 32 ? 0 : 1;
+    console.log(this.#colors, this.#colors[color], event.buttons);
     switch (this.#inputMode) {
       case InputMode.Pixel:
         this.#setPixel(newX, newY, color);
@@ -337,6 +360,9 @@ export default class PgInputPixelEditor extends HTMLElement {
   handlePointerMove(event: PointerEvent) {
     const canvas = this.$canvas;
     if (this.#isPressed) {
+      this.#isAlt = event.altKey;
+      this.#isCtrl = event.ctrlKey;
+      this.#isShift = event.shiftKey;
       const data = this.#data;
       const rect = canvas.getBoundingClientRect();
       const totalSize = this.size + this.gridSize;
@@ -427,14 +453,15 @@ export default class PgInputPixelEditor extends HTMLElement {
     // base layer to main canvas
     this.#context.drawImage(this.#baseLayer, 0, 0);
     // editing layer to main canvas
-    this.#context.drawImage(this.#editLayer, 0, 0);
+    this.#context.drawImage(this.#noEditLayer, 0, 0);
   }
 
   mergeColor(fromIndex: number, toIndex: number) {
     // ToDo: Code this
   }
   clear() {
     this.#data = fillGrid(this.width, this.height);
+    this.#updateGrid();
   }
   clearHistory() {
     this.#undoHistory = [];

src/pg/inputPixelEditor/utils/diffGrid.ts

@@ -6,7 +6,7 @@
  * @returns list of changes [[x, y, color], ...]
  */
 export default function diffGrid(oldData: number[][], newData: number[][]): number[][] {
-    const changes = [];
+    const changes: [number, number, number, number][] = [];
     // Loop the larger grid
     const oldWidth = oldData[0].length;
     const oldHeight = oldData.length;

src/pg/inputPixelEditor/utils/getEllipsePixels.ts

@@ -7,7 +7,7 @@ export default function getEllipsePixels(x0: number, y0: number, x1: number, y1:
   if (y0 > y1) y0 = y1; /* .. exchange them */
   y0 += (b + 1) / 2; y1 = y0 - b1;   /* starting pixel */
   a *= 8 * a; b1 = 8 * b * b;
-  const pixels = [];
+  const pixels: { x: number, y: number }[] = [];
   do {
     pixels.push({ x: x1, y: y0 }); /*   I. Quadrant */
     pixels.push({ x: x0, y: y0 }); /*  II. Quadrant */

src/pg/inputPixelEditor/utils/getRectangleOutlinePixels.ts

@@ -1,17 +1,17 @@
-export default function getRectanglePixels(x0: number, y0: number, x1: number, y1: number) {
+export default function getRectangleOutlinePixels(x0: number, y0: number, x1: number, y1: number) {
   const pixels: { x: number, y: number }[] = [];
   const oX = Math.min(x0, x1);
   const oY = Math.min(y0, y1);
-  var w = Math.abs(x1 - x0) + 1;
-  var h = Math.abs(y1 - y0) + 1;
+  var w = Math.abs(x1 - x0);
+  var h = Math.abs(y1 - y0);
 
   // Vertical
-  for (var y = oY; y < oY + h; y++) {
+  for (var y = oY; y <= oY + h; y++) {
     pixels.push({ x: oX, y });
     pixels.push({ x: oX + w, y });
   }
   // Horizontal (minus the vertical squares)
-  for (var x = oX + 1; x < oX + w - 1; x++) {
+  for (var x = oX + 1; x <= oX + w - 1; x++) {
     pixels.push({ x, y: oY });
     pixels.push({ x, y: oY + h });
   }

src/pg/inputPixelEditor/utils/getRectanglePixels.ts

@@ -1,5 +1,5 @@
 export default function getRectanglePixels(x0: number, y0: number, x1: number, y1: number) {
-  const pixels = [];
+  const pixels: { x: number, y: number }[] = [];
   const oX = Math.min(x0, x1);
   const oY = Math.min(y0, y1);
   var w = Math.abs(x1 - x0) + 1;