Start adding tree component.

Author: Templarian

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

@@ -38,6 +38,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $saveSvg: HTMLInputElement;
   @Part() $savePng: HTMLInputElement;
 
+  // MAKE A LIST COMPONENT!!!! [text | delete]
   @Part() $colors: HTMLPreElement;
   @Part() $layers: HTMLPreElement;
 
@@ -89,6 +90,21 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     });
     this.$file.addEventListener('change', this.handleFile.bind(this));
     this.$saveSvg.addEventListener('click', async () => {
+      // @ts-ignore
+      const handle = await window.showSaveFilePicker({
+        suggestedName: 'Canvas',
+        types: [{
+          description: 'SVG Document',
+          accept: {'image/svg+xml': ['.svg']},
+        }],
+      });
+      const writable = await handle.createWritable();
+      await writable.write(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${this.$width.value} ${this.$height.value}">`);
+      await writable.write(`<path d="${'test'}" />`);
+      await writable.write('</svg>');
+      await writable.close();
+    });
+    this.$savePng.addEventListener('click', async () => {
       // @ts-ignore
       const handle = await window.showSaveFilePicker({
         suggestedName: 'CanvasName',
@@ -99,11 +115,9 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
       });
       const writable = await handle.createWritable();
       await writable.write('something');
+      await writable.write
       await writable.close();
     });
-    this.$savePng.addEventListener('click', () => {
-
-    });
   }
 
   handleFile(e) {
@@ -138,7 +152,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
 
   handleChange(e: CustomEvent) {
     const { value } = e.detail;
-    this.$value1.innerText = value;
+    this.$value1.innerText = value.join('--');
   }
 
   handleInput(e: CustomEvent) {

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

@@ -0,0 +1,41 @@
+function showOpenFilePickerPolyfill(options: any) {
+  return new Promise((resolve) => {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.multiple = options.multiple;
+      input.accept = options.types
+          .map((type) => type.accept)
+          .flatMap((inst) => Object.keys(inst).flatMap((key) => inst[key]))
+          .join(",");
+
+      input.addEventListener("change", () => {
+          resolve(
+              [...(input.files as any)].map((file) => {
+                  return {
+                      getFile: async () =>
+                          new Promise((resolve) => {
+                              resolve(file);
+                          }),
+                  };
+              })
+          );
+      });
+
+      input.click();
+  });
+}
+
+/**
+ * Open file with polyfill for legacy browsers.
+ *
+ * @param options
+ * @returns
+ */
+export function openFile(options) {
+  // @ts-ignore
+  if (window.showOpenFilePicker) {
+    // @ts-ignore
+    return window.showOpenFilePicker(options);
+  }
+  return showOpenFilePickerPolyfill(options);
+}

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

@@ -0,0 +1,31 @@
+
+/**
+ * Save file with polyfill for legacy browsers.
+ *
+ * @param blob File blob
+ * @returns Promise
+ */
+export async function saveFile(blob) {
+  // @ts-ignore
+  if (window.showSaveFilePicker) {
+    const opts = {
+      types: [
+        {
+          description: "Text file",
+          accept: { "text/plain": [".txt"] },
+        },
+      ],
+    };
+    // @ts-ignore
+    return await window.showSaveFilePicker(opts);
+  }
+  const downloadelem = document.createElement("a");
+  const url = URL.createObjectURL(blob);
+  document.body.appendChild(downloadelem);
+  downloadelem.href = url;
+  downloadelem.download = 'filename.txt';
+  downloadelem.click();
+  downloadelem.remove();
+  window.URL.revokeObjectURL(url);
+  return Promise.resolve();
+}

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -249,10 +249,10 @@ export default class PgInputPixelEditor extends HTMLElement {
   }
 
   #handleChange() {
-    const path = bitmaskToPath(this.#data[this.#layer], { scale: 1 });
-    console.log('change:', path);
+    const paths = this.#data.map(layer => bitmaskToPath(layer, { scale: 1 }));
+    console.log('change:', paths);
     this.dispatchEvent(new CustomEvent('change', {
-      detail: { value: path }
+      detail: { value: paths }
     }));
     /*this.dispatchEvent(new CustomEvent('change', {
       detail: data

src/pg/tree/README.md

@@ -0,0 +1 @@
+# Tree

src/pg/tree/__examples__/basic/basic.html

@@ -0,0 +1,3 @@
+<div>
+  <pg-tree part="tree"></pg-tree>
+</div>

src/pg/tree/__examples__/basic/basic.ts

@@ -0,0 +1,23 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgTree from '../../tree';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-tree-basic',
+  template
+})
+export default class XPgTreeBasic extends HTMLElement {
+  @Part() $tree: PgTree;
+
+  connectedCallback() {
+    this.$tree.items = [{
+      key: 1,
+      label: 'Item 1',
+    },
+    {
+      key: 2,
+      label: 'Item 2'
+    }]
+  }
+}

src/pg/tree/tree.css

@@ -0,0 +1 @@
+<div part="items"></div>

src/pg/tree/tree.html

@@ -0,0 +1,34 @@
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+
+import template from './tree.html';
+import style from './tree.css';
+import PgTreeItem from '../treeItem/treeItem';
+
+@Component({
+  selector: 'pg-tree',
+  style,
+  template
+})
+export default class PgTree extends HTMLElement {
+  @Prop() items: any[] = [];
+
+  @Part() $items: HTMLDivElement;
+
+  render(changes) {
+    if (changes.items) {
+      forEach({
+        container: this.$items,
+        items: this.items,
+        type: (item) => {
+          return PgTreeItem;
+        },
+        create: ($item, item) => {
+          // after creation of $item element
+        },
+        update: ($item, item) => {
+          // after every $item update
+        },
+      });
+    }
+  }
+}