bug fixes

Author: Templarian

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

@@ -17,4 +17,9 @@
 label {
   display: flex;
   flex-direction: column;
+}
+
+h3 {
+  margin: 0.25rem 0;
+  font-size: 1.125rem;
 }

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

@@ -10,7 +10,7 @@
     </label>
     <label>
       Size
-      <input part="size" type="range" min="4" max="16">
+      <input part="size" type="range" step="2" min="4" max="16">
     </label>
     <label>
       <input part="transparent" type="checkbox">
@@ -24,24 +24,34 @@
   <div>
     <code>oninput: <span part="value2"></span></code>
   </div>
-
   <div>
+    <h3>Canvas Tools</h3>
     <button part="reset">Reset</button>
     <button part="clear">Clear</button>
     <button part="invert">Invert</button>
+    |
+    <button part="save">Save</button>
+    <button part="open">Open</button>
+  </div>
+  <div>
+    <h3>Drawing Tools</h3>
     <button part="modePixel">Pixel</button>
     <button part="modeLine">Line</button>
     <button part="modeRectangle">Rectangle</button>
     <button part="modeRectangleOutline">Rectangle Outline</button>
     <button part="modeEllipse">Ellipse</button>
     <button part="modeEllipseOutline">Ellipse Outline</button>
   </div>
-  <div part="debug"></div>
   <div>
-    <button part="save">Save</button>
-    <button part="open">Open</button>
+    <h3>Color Tools</h3>
+    <button part="addColor">Add Color</button>
+    <pre part="colors"></pre>
   </div>
-  <pre part="output">
-
-  </pre>
+  <div>
+    <h3>Layer Tools</h3>
+    <button part="addLayer">Add Layer</button>
+    <pre part="layers"></pre>
+  </div>
+  <div part="debug"></div>
+  <pre part="output" contenteditable></pre>
 </div>

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

@@ -34,6 +34,9 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $open: HTMLButtonElement;
   @Part() $output: HTMLPreElement;
 
+  @Part() $colors: HTMLPreElement;
+  @Part() $layers: HTMLPreElement;
+
   connectedCallback() {
     this.$width.value = '10';
     this.$height.value = '10';
@@ -77,7 +80,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
       this.$output.textContent = JSON.stringify(json, null, 4);
     });
     this.$open.addEventListener('click', () => {
-      const json = this.$output.textContent;
+      const json = JSON.parse(this.$output.textContent || '');
       this.$input.open(json as any);
     });
   }

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -196,8 +196,8 @@ export default class PgInputPixelEditor extends HTMLElement {
           this.#baseLayerContext.fillStyle = WHITE;
           this.#baseLayerContext.fillRect(x * totalSize, y * totalSize, this.size + 1, this.size + 1);
           this.#baseLayerContext.fillStyle = '#DDD';
-          this.#baseLayerContext.fillRect(x * totalSize + 5, y * totalSize, 5, 5);
-          this.#baseLayerContext.fillRect(x * totalSize, y * totalSize + 5, 5, 5);
+          this.#baseLayerContext.fillRect(x * totalSize + Math.ceil(this.size / 2), y * totalSize, Math.floor(this.size / 2), Math.floor(this.size / 2));
+          this.#baseLayerContext.fillRect(x * totalSize, y * totalSize + Math.floor(this.size / 2), Math.ceil(this.size / 2), Math.ceil(this.size / 2));
         }
       }
     } else {
@@ -807,6 +807,9 @@ export default class PgInputPixelEditor extends HTMLElement {
   }
 
   async open(json: File) {
+    if (typeof json !== 'object') {
+      return ['json must be type object'];
+    }
     const errors: string[] = [];
     // Validate 6 properties exist
     const keys = Object.keys(json);
@@ -816,6 +819,20 @@ export default class PgInputPixelEditor extends HTMLElement {
         errors.push(`JSON key '${key}' required.`);
       }
     });
+    // Set props
+    this.width = json.width;
+    this.height = json.height;
+    this.transparent = json.transparent;
+    this.#colors = json.colors;
+    this.#layers = json.layers;
+    this.#data = json.data;
+    if (json.undo) {
+      this.#undoHistory = json.undo;
+    }
+    if (json.redo) {
+      this.#redoHistory = json.redo;
+    }
+    this.#init();
   }
 
 }

src/pg/inputPixelEditor/utils/maskToBitmap.ts

@@ -0,0 +1,66 @@
+export function rasterizePath(pathData: string, width: number, height: number) {
+  const grid: Number[][] = Array(height).fill(0).map(() => Array(width).fill(0));
+
+  // Store only the vertical edges
+  const verticalEdges: { x: number, y: number[] }[] = [];
+
+  const paths = pathData.match(/M[^Z]*Z/g) || [];
+  for (const path of paths) {
+    let x0;
+    let y0;
+    let x;
+    let y;
+    // Split the path data into commands
+    const commands = path.match(/[MHVZ][\d,]*/g) || [];
+
+    for (const cmd of commands) {
+      const type = cmd[0];
+      const value = cmd.slice(1);
+      let newY;
+
+      switch (type) {
+        case 'M': {
+          const [vX, vY] = value.split(',').map(v => parseInt(v, 10));
+          x = vX;
+          y = vY;
+          x0 = vX;
+          y0 = vY;
+          break;
+        }
+        case 'H':
+          x = parseInt(value, 10);
+          break;
+        case 'V':
+          newY = parseInt(value, 10);
+          verticalEdges.push({ x, y: [y, newY].sort((a, b) => a - b) });
+          y = newY;
+          break;
+        case 'Z':
+          if (x0 === x) {
+            verticalEdges.push({ x, y: [y, y0].sort((a, b) => a - b) });
+          }
+          break;
+      }
+    }
+  }
+
+  // Fill the shape using scan-line algorithm
+  for (let y = 0; y < height; ++y) {
+    let inside = false;
+
+    for (let x = 0; x < width; ++x) {
+      // Check if we cross a vertical edge
+      for (const verticalEdge of verticalEdges) {
+        if (verticalEdge.x === x && y >= verticalEdge.y[0] && y < verticalEdge.y[1]) {
+          inside = !inside;
+          break;
+        }
+      }
+      if (inside) {
+        grid[y][x] = 1;
+      }
+    }
+  }
+
+  return grid;
+}