progress

Author: Templarian

package-lock.json

@@ -32,6 +32,6 @@
     "cross-env": "^7.0.3",
     "npm-run-all": "^4.1.5",
     "raw-loader": "^4.0.2",
-    "typescript": "^5.3.2"
+    "typescript": "^5.7.3"
   }
 }

package.json

@@ -44,6 +44,7 @@ See usage for each method below.
 | `getLayers()` | -    | Get layer array. |
 | `addLayer(option)` | -        | Add layer. |
 | `removeLayer(index)` | -      | Remove layer. |
+| `flattenLayers(layerIndexes)` | -      | Flatten layers. |
 | `moveLayer(startIndex, endIndex)` | -    | Move layer. |
 | `getColors()` | -    | Get colors. |
 | `addColor(r, g, b, a)` | -    | Add color. |

src/pg/inputPixelEditor/README.md

@@ -52,6 +52,12 @@ <h3>Layer Tools</h3>
     <button part="addLayer">Add Layer</button>
     <pre part="layers"></pre>
   </div>
+  <div>
+    <h3>Example Tools</h3>
+    <input part="file" type="file" />
+    <button part="saveSvg">Save SVG</button>
+    <button part="savePng">Save Image</button>
+  </div>
   <div part="debug"></div>
   <pre part="output" contenteditable></pre>
 </div>

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

@@ -1,5 +1,6 @@
 import { Component, Part } from '@pictogrammers/element';
 import PgInputPixelEditor from '../../inputPixelEditor';
+import { maskToBitmap } from '../../utils/maskToBitmap';
 
 import template from './basic.html';
 import style from './basic.css';
@@ -33,6 +34,9 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $save: HTMLButtonElement;
   @Part() $open: HTMLButtonElement;
   @Part() $output: HTMLPreElement;
+  @Part() $file: HTMLInputElement;
+  @Part() $saveSvg: HTMLInputElement;
+  @Part() $savePng: HTMLInputElement;
 
   @Part() $colors: HTMLPreElement;
   @Part() $layers: HTMLPreElement;
@@ -83,6 +87,53 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
       const json = JSON.parse(this.$output.textContent || '');
       this.$input.open(json as any);
     });
+    this.$file.addEventListener('change', this.handleFile.bind(this));
+    this.$saveSvg.addEventListener('click', async () => {
+      // @ts-ignore
+      const handle = await window.showSaveFilePicker({
+        suggestedName: 'CanvasName',
+        types: [{
+          description: 'SVG Document',
+          accept: {'image/svg+xml': ['.svg']},
+        }],
+      });
+      const writable = await handle.createWritable();
+      await writable.write('something');
+      await writable.close();
+    });
+    this.$savePng.addEventListener('click', () => {
+
+    });
+  }
+
+  handleFile(e) {
+    const { files } = e.currentTarget;
+    if (files.length !== 1) {
+      throw new Error('select only 1 file');
+    }
+    switch(files[0].type) {
+      case 'image/svg+xml':
+        // Read the file
+        const reader = new FileReader();
+        reader.onload = () => {
+          const content = reader.result as string;
+          const size = content.match(/viewBox="\d+ \d+ (\d+) (\d+)"/) as string[];
+          const width = parseInt(size[1], 10);
+          const height = parseInt(size[2], 10);
+          const path = (content.match(/d="([^"]+)"/) as string[])[1];
+          // Render path
+          console.log(path, size[1], size[2]);
+          this.$input.applyTemplate(maskToBitmap(path, width, height));
+          ;
+        };
+        reader.onerror = () => {
+          throw new Error("Error reading the file. Please try again.");
+        };
+        reader.readAsText(files[0]);
+        break;
+      default:
+        throw new Error('Unsupported format.');
+    }
   }
 
   handleChange(e: CustomEvent) {

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

@@ -630,6 +630,7 @@ export default class PgInputPixelEditor extends HTMLElement {
 
   applyTemplate(template: number[][]) {
     this.#data = [template];
+    this.#setPixelAll();
   }
 
   flipHorizontal() {

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -1,5 +1,5 @@
-export function rasterizePath(pathData: string, width: number, height: number) {
-  const grid: Number[][] = Array(height).fill(0).map(() => Array(width).fill(0));
+export function maskToBitmap(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[] }[] = [];
@@ -11,7 +11,7 @@ export function rasterizePath(pathData: string, width: number, height: number) {
     let x;
     let y;
     // Split the path data into commands
-    const commands = path.match(/[MHVZ][\d,]*/g) || [];
+    const commands = path.match(/[MHVZ][\d, ]*/g) || [];
 
     for (const cmd of commands) {
       const type = cmd[0];
@@ -20,7 +20,7 @@ export function rasterizePath(pathData: string, width: number, height: number) {
 
       switch (type) {
         case 'M': {
-          const [vX, vY] = value.split(',').map(v => parseInt(v, 10));
+          const [vX, vY] = value.split(/,| /).map(v => parseInt(v, 10));
           x = vX;
           y = vY;
           x0 = vX;