progress

Author: Templarian

src/pg/inputPixelEditor/README.md

@@ -135,7 +135,7 @@ A complete JSON storage for a 10x10 image.
 
 ## Layer Type
 
-There are currently 5 differnet layer types.
+There are currently 6 differnet layer types.
 
 - `pixel` - Raster artboard of pixels.
   - `path` - pixels
@@ -157,4 +157,7 @@ There are currently 5 differnet layer types.
   - `end: [x, y]`
   - `transform: [1, 0, 0, 0.5, 0, 0]` to create ellipses
   - `stops: [[stop, colorIndex], [stop, colorIndex]]`
-  - `dither: 'bayer4' | 'bayer8' | 'bayer16'`
+  - `dither: 'bayer4' | 'bayer8' | 'bayer16'`
+- `text` - Text, maybe???
+  - `id` - file uuid
+  - `value` - string

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

@@ -9,6 +9,7 @@ import template from './basic.html';
 import style from './basic.css';
 
 const IconTrash = 'M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z';
+const IconLayerEdit = 'M4.63 10.27L3 9L12 2L19.94 8.17L12.5 15.61L12 16L4.63 10.27M10 18.94V18.11L10.59 17.53L10.63 17.5L4.62 12.81L3 14.07L10 19.5V18.94M21.7 12.58L20.42 11.3C20.21 11.09 19.86 11.09 19.65 11.3L18.65 12.3L20.7 14.35L21.7 13.35C21.91 13.14 21.91 12.79 21.7 12.58M12 21H14.06L20.11 14.93L18.06 12.88L12 18.94V21Z';
 
 @Component({
   selector: 'x-pg-input-pixel-editor-basic',
@@ -159,13 +160,46 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
       label: 'Selected',
       key: 'selected',
       hideLabel: true,
+    }, {
+      label: 'Select',
+      key: 'select',
+      hideLabel: true,
     }];
+    this.$layers.data = [
+      createTableItem({
+        name: 'Layer 1',
+        type: 'pixel',
+        selected: true,
+        select: {
+          type: PgTableCellButtonIcon,
+          icon: IconLayerEdit,
+          value: 0,
+        }
+      })
+    ];
+    this.$layers.addEventListener('action', (e: any) => {
+      const { getColumn, getRows, key } = e.detail;
+      switch(key) {
+        case 'select':
+          getRows().forEach(({ getColumn }) => {
+            getColumn('selected').value = false;
+          });
+          getColumn('selected').value = true;
+          this.$input.selectLayer(getColumn('select').value);
+          break;
+      }
+    });
     this.$addLayer.addEventListener('click', () => {
       this.$layers.data.push(
         createTableItem({
-          name: 'Layer 1',
+          name: 'Layer 2',
           type: 'pixel',
-          selected: true,
+          selected: false,
+          select: {
+            type: PgTableCellButtonIcon,
+            icon: IconLayerEdit,
+            value: 1,
+          }
         })
       );
       this.$input.addLayer();

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -1023,14 +1023,18 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#data.push(fillGrid(this.width, this.height));
   }
 
+  /**
+   * Remove layer.
+   * @param index Layer index to remove
+   */
   removeLayer(index) {
     this.#data.splice(index, 1);
   }
 
   /**
    * Flatten layers, first index determines the color
    */
-  flattenLayers(layerIndexes: number[]) {
+  flattenLayers(indexes: number[]) {
 
   }
 

src/pg/table/table.ts

@@ -60,6 +60,7 @@ export default class PgTable extends HTMLElement {
         if (this.columns.length === 0) {
           throw 'columns must be set before data';
         }
+        $item.rows = this.data;
         $item.columns = this.columns;
         $item.addEventListener('action', (e: any) => {
           e.stopPropagation();

src/pg/tableCellButtonIcon/tableCellButtonIcon.ts

@@ -12,7 +12,7 @@ import style from './tableCellButtonIcon.css';
   template
 })
 export default class PgTableCellButtonIcon extends HTMLElement {
-  @Prop() value: boolean = false;
+  @Prop() value: any = null;
   @Prop() icon: string = '';
 
   @Part() $button: PgButton;

src/pg/tableRow/tableRow.ts

@@ -20,6 +20,7 @@ const types = new Map<string, any>([
 })
 export default class PgTableRow extends HTMLElement {
   @Prop() index: number;
+  @Prop() rows: any[] = [];
   @Prop() items: any[] = [];
   @Prop() key: string = '';
   @Prop() columns: any[] = [];
@@ -50,12 +51,21 @@ export default class PgTableRow extends HTMLElement {
               ...e.detail,
               index: this.index,
               key: item.key,
+              getRows: () => {
+                return this.rows.map((row) => {
+                  return {
+                    getColumn: (key: string) => {
+                      return row.items.find(x => x.key === key);
+                    },
+                  };
+                });
+              },
               getRow() {
                 return this.items;
               },
               getColumn: (key: string) => {
                 return this.items.find(x => x.key === key);
-              }
+              },
             },
           }));
         });