@pictogrammers/components 0.4.8 → 0.5.0

package/pg/inputPixelEditor/__examples__/basic/basic.ts

@@ -1,10 +1,17 @@
 import { Component, Part } from '@pictogrammers/element';
 import PgInputPixelEditor from '../../inputPixelEditor';
+import PgTable, { createTableItem } from '../../../table/table';
+import PgTableCellButtonIcon from '../../../tableCellButtonIcon/tableCellButtonIcon';
 import { maskToBitmap } from '../../utils/maskToBitmap';
+import { fileOk, patterns } from './constants';
 
 import template from './basic.html';
 import style from './basic.css';
 
+const IconPicker = 'M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z';
+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',
   style,
@@ -24,13 +31,26 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $reset: HTMLButtonElement;
   @Part() $clear: HTMLButtonElement;
   @Part() $invert: HTMLButtonElement;
+  @Part() $outline: HTMLButtonElement;
+  @Part() $glow: HTMLButtonElement;
+  @Part() $modeStamp1: HTMLButtonElement;
+  @Part() $modeStamp2: HTMLButtonElement;
+  @Part() $modeStamp3: HTMLButtonElement;
+  @Part() $modeStamp4: HTMLButtonElement;
   @Part() $modePixel: HTMLButtonElement;
   @Part() $modeLine: HTMLButtonElement;
   @Part() $modeRectangle: HTMLButtonElement;
   @Part() $modeRectangleOutline: HTMLButtonElement;
   @Part() $modeEllipse: HTMLButtonElement;
   @Part() $modeEllipseOutline: HTMLButtonElement;
+  @Part() $cursor: HTMLButtonElement;
+  @Part() $selectRectangle: HTMLButtonElement;
+  @Part() $selectEllipse: HTMLButtonElement;
+  @Part() $selectLasso: HTMLButtonElement;
+  @Part() $selectMagic: HTMLButtonElement;
 
+  @Part() $undo: HTMLButtonElement;
+  @Part() $redo: HTMLButtonElement;
   @Part() $save: HTMLButtonElement;
   @Part() $open: HTMLButtonElement;
   @Part() $output: HTMLPreElement;
@@ -38,9 +58,12 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $saveSvg: HTMLInputElement;
   @Part() $savePng: HTMLInputElement;
 
-  // MAKE A LIST COMPONENT!!!! [text | delete]
-  @Part() $colors: HTMLPreElement;
-  @Part() $layers: HTMLPreElement;
+  @Part() $addLayer: HTMLButtonElement;
+  @Part() $addLayerReference: HTMLButtonElement;
+  @Part() $addColor: HTMLButtonElement;
+
+  @Part() $colors: PgTable;
+  @Part() $layers: PgTable;
 
   connectedCallback() {
     this.$width.value = '10';
@@ -53,6 +76,19 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     this.$transparent.addEventListener('input', this.handleTransparentChange.bind(this));
     this.$input.addEventListener('input', this.handleInput.bind(this));
     this.$input.addEventListener('debug', this.handleDebug.bind(this));
+    this.$input.addEventListener('selectlayer', this.handleSelectLayer.bind(this));
+    this.$input.addEventListener('reference', this.handleReference.bind(this));
+    [
+      this.$modeStamp1,
+      this.$modeStamp2,
+      this.$modeStamp3,
+      this.$modeStamp4,
+    ].forEach(($modeStamp) => {
+      $modeStamp.addEventListener('click', (e: any) => {
+        const stamp = e.target.dataset.stamp;
+        this.$input.inputModeStamp(patterns[stamp]);
+      });
+    });
     this.$modePixel.addEventListener('click', () => {
       this.$input.inputModePixel();
     });
@@ -71,6 +107,21 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     this.$modeEllipseOutline.addEventListener('click', () => {
       this.$input.inputModeEllipseOutline();
     });
+    this.$cursor.addEventListener('click', () => {
+      this.$input.inputModeCursor();
+    })
+    this.$selectRectangle.addEventListener('click', () => {
+      this.$input.inputModeSelectRectangle();
+    });
+    this.$selectEllipse.addEventListener('click', () => {
+      this.$input.inputModeSelectEllipse();
+    });
+    this.$selectLasso.addEventListener('click', () => {
+      this.$input.inputModeSelectLasso();
+    });
+    this.$selectMagic.addEventListener('click', () => {
+      this.$input.inputModeSelectMagicWand();
+    });
     this.$reset.addEventListener('click', () => {
       this.$input.reset();
     });
@@ -80,13 +131,19 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     this.$invert.addEventListener('click', () => {
       this.$input.invert();
     });
+    this.$outline.addEventListener('click', () => {
+      this.$input.outline();
+    });
+    this.$glow.addEventListener('click', () => {
+      this.$input.glow();
+    });
     this.$save.addEventListener('click', async () => {
-      const json = await this.$input.save();
+      const json = await this.$input.getJson();
       this.$output.textContent = JSON.stringify(json, null, 4);
     });
     this.$open.addEventListener('click', () => {
       const json = JSON.parse(this.$output.textContent || '');
-      this.$input.open(json as any);
+      this.$input.setJson(json as any);
     });
     this.$file.addEventListener('change', this.handleFile.bind(this));
     this.$saveSvg.addEventListener('click', async () => {
@@ -96,7 +153,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
           suggestedName: 'Canvas',
           types: [{
             description: 'SVG Document',
-            accept: {'image/svg+xml': ['.svg']},
+            accept: { 'image/svg+xml': ['.svg'] },
           }],
         });
         const writable = await handle.createWritable();
@@ -114,18 +171,197 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
         const handle = await window.showSaveFilePicker({
           suggestedName: 'CanvasName',
           types: [{
-            description: 'SVG Document',
-            accept: {'image/svg+xml': ['.svg']},
+            description: 'PNG Image',
+            accept: { 'image/png': ['.png'] },
           }],
         });
         const writable = await handle.createWritable();
-        await writable.write('something');
-        await writable.write
+        const image = await this.$input.getExportPng();
+        await writable.write(image);
         await writable.close();
       } catch (e: any) {
         // no save
       }
     });
+    // Layers
+    this.$layers.columns = [{
+      label: 'Name',
+      key: 'name',
+    }, {
+      label: 'Type',
+      key: 'type',
+    }, {
+      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: this.$layers.data.length,
+        }
+      })
+    ];
+    this.$layers.addEventListener('action', (e: any) => {
+      const { getColumn, getRows, key, index } = e.detail;
+      switch (key) {
+        case 'select':
+          const selectedLayers: number[] = [];
+          getRows().forEach(({ getColumn, index: index2 }) => {
+            if (getColumn('selected').value) {
+              selectedLayers.push(index2);
+            }
+          });
+          if (
+            selectedLayers.length === 1
+            && selectedLayers[0] === index
+          ) {
+            // ignore
+          } else {
+            const currentValue = getColumn('selected').value;
+            getColumn('selected').value = !currentValue;
+            if (currentValue) {
+              selectedLayers.splice(selectedLayers.findIndex(x => x === index), 1);
+            } else {
+              selectedLayers.push(index);
+            }
+          }
+          console.log('selected', selectedLayers);
+          this.$input.selectLayers(selectedLayers);
+          break;
+      }
+    });
+    this.$addLayer.addEventListener('click', () => {
+      this.$layers.data.push(
+        createTableItem({
+          name: 'Layer 2',
+          type: 'pixel',
+          selected: false,
+          select: {
+            type: PgTableCellButtonIcon,
+            icon: IconLayerEdit,
+            value: 1,
+          }
+        })
+      );
+      this.$input.addLayer();
+    });
+    this.$addLayerReference.addEventListener('click', () => {
+      this.$layers.data.push(
+        createTableItem({
+          name: 'Layer 2',
+          type: 'reference',
+          selected: false,
+          select: {
+            type: PgTableCellButtonIcon,
+            icon: IconLayerEdit,
+            value: 1,
+          }
+        })
+      );
+      this.$input.addLayer();
+    });
+    // Colors
+    this.$colors.columns = [{
+      label: 'Red',
+      key: 'r',
+      editable: true,
+    }, {
+      label: 'Green',
+      key: 'g',
+      editable: true,
+    }, {
+      label: 'Blue',
+      key: 'b',
+      editable: true,
+    }, {
+      label: 'Alpha',
+      key: 'a',
+      editable: true,
+    }, {
+      label: 'Selected',
+      key: 'selected',
+      hideLabel: true,
+    }, {
+      label: 'Select',
+      key: 'select',
+      hideLabel: true,
+    }, {
+      label: 'Delete',
+      key: 'delete',
+      hideLabel: true,
+    }];
+    this.$colors.data.push(...this.$input.getColors().map(([r, g, b, a], i) => {
+      return createTableItem({
+        r,
+        g,
+        b,
+        a,
+        selected: i === 1,
+        select: {
+          type: PgTableCellButtonIcon,
+          icon: IconPicker,
+          value: i,
+        },
+        delete: {
+          type: PgTableCellButtonIcon,
+          icon: IconTrash,
+          value: i,
+        }
+      });
+    }));
+    this.$colors.addEventListener('action', (e: any) => {
+      const { getColumn, getRows, key, value, index } = e.detail;
+      const [r, g, b, a] = this.$input.getColor(index);
+      switch (key) {
+        case 'select':
+          getRows().forEach(({ getColumn }) => {
+            getColumn('selected').value = false;
+          });
+          getColumn('selected').value = true;
+          this.$input.selectColor(getColumn('select').value);
+          break;
+        case 'r':
+          this.$input.setColor(index, value, g, b, a);
+          break;
+        case 'g':
+          this.$input.setColor(index, r, value, b, a);
+          break;
+        case 'b':
+          this.$input.setColor(index, r, g, value, a);
+          break;
+        case 'a':
+          this.$input.setColor(index, r, g, b, value);
+          break;
+      }
+    });
+    this.$addColor.addEventListener('click', () => {
+      this.$colors.data.push(createTableItem({
+        r: 5,
+        g: 5,
+        b: 5,
+        a: 1,
+        selected: false,
+        select: {
+          type: PgTableCellButtonIcon,
+          icon: IconPicker,
+          value: this.$colors.data.length,
+        },
+        delete: {
+          type: PgTableCellButtonIcon,
+          icon: IconTrash
+        }
+      }));
+    });
   }
 
   handleFile(e) {
@@ -133,7 +369,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     if (files.length !== 1) {
       throw new Error('select only 1 file');
     }
-    switch(files[0].type) {
+    switch (files[0].type) {
       case 'image/svg+xml':
         // Read the file
         const reader = new FileReader();
@@ -159,8 +395,9 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   }
 
   handleChange(e: CustomEvent) {
-    const { value } = e.detail;
-    this.$value1.textContent = value.join('--');
+    this.$value1.textContent = this.$input.getLayerPaths().map((layer) => {
+      return layer.map(x => x.join('=')).join(';');
+    }).join('\n');
   }
 
   handleInput(e: CustomEvent) {
@@ -179,6 +416,30 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     //context.strokeRect(x, y, width, height);
   }
 
+  handleSelectLayer(e: CustomEvent) {
+    const { color, index } = e.detail;
+    if (index !== null) {
+      // Update Table
+      this.$layers.data.forEach((layer) => {
+        layer.items.find(column => column.key === 'selected').value = false;
+      });
+      this.$layers.data[index].items.find(column => column.key === 'selected').value = true;
+      // Update input
+      this.$input.selectLayers([index]);
+    }
+  }
+
+  handleReference(e: any) {
+    const { id, callback } = e.detail;
+    // Test Data
+    const mock = new Map();
+    mock.set('9ee82807-ffa9-411c-abaf-7b8d46d74af4', fileOk);
+    if (mock.has(id)) {
+      callback(mock.get(id));
+    }
+    console.error('Unable to load', id);
+  }
+
   handleWidthChange(e) {
     this.$input.width = e.target.value;
     this.$debug.innerHTML = '';

package/pg/inputPixelEditor/__examples__/basic/constants.ts

@@ -0,0 +1,62 @@
+export const patterns = {
+  '1': [
+    [0, 0]
+  ],
+  '3-circle': [
+    [0, -1],
+    [-1, 0],
+    [0, 0],
+    [1, 0],
+    [0, 1]
+  ],
+  '3-square': [
+    [-1, -1],
+    [0, -1],
+    [1, -1],
+    [-1, 0],
+    [0, 0],
+    [1, 0],
+    [-1, 1],
+    [0, 1],
+    [1, 1],
+  ],
+  'heart': [
+    [-1, -1],
+    [1, -1],
+    [-2, 0],
+    [-1, 0],
+    [0, 0],
+    [1, 0],
+    [2, 0],
+    [-1, 1],
+    [0, 1],
+    [1, 1],
+    [0, 2],
+  ]
+};
+
+export const fileOk = {
+  "id": "9ee82807-ffa9-411c-abaf-7b8d46d74af4",
+  "width": 9,
+  "height": 6,
+  "transparent": null,
+  "colors": [
+    [0, 0, 0, 0],
+    [0, 0, 0, 1]
+  ],
+  "layers": [
+    {
+      "name": "Ok",
+      "exclude": false,
+      "locked": false,
+      "hidden": false,
+      "type": "pixel",
+      "opacity": 1
+    }
+  ],
+  "data": [
+    [
+      [1, "M2,4H3V2H2ZM3,5H2V4H1V2H2V1H3V2H4V4H3ZM8,5H7V4H6V5H5V1H6V3H7V2H8V3H7V4H8Z"]
+    ]
+  ]
+};

package/pg/inputPixelEditor/inputPixelEditor.css

@@ -3,12 +3,14 @@
 }
 
 [part="wrapper"] {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
   position: relative;
   outline: 0;
 }
 
-[part="wrapper"]:focus-visible::before {
+[part="wrapper"]:not(.ignore):focus-visible::before {
   pointer-events: none;
   content: '';
   position: absolute;
@@ -21,7 +23,40 @@
 }
 
 canvas {
+  grid-column: 1;
+  grid-row: 1;
   touch-action: none;
   user-select: none;
   outline: 0;
+}
+
+svg {
+  pointer-events: none;
+  grid-column: 1;
+  grid-row: 1;
+}
+
+path {
+  fill: none;
+  stroke: #000;
+  stroke-width: 1px;
+  vector-effect: non-scaling-stroke;
+  stroke-dasharray: 5px;
+  animation: stroke 0.4s linear infinite;
+  shape-rendering: geometricPrecision;
+  stroke-dashoffset: 10px;
+}
+
+path.preview {
+  stroke: rgb(0 96 255);
+}
+
+path.hide {
+  display: none;
+}
+
+@keyframes stroke {
+  to {
+    stroke-dashoffset: 0;
+  }
 }

package/pg/inputPixelEditor/inputPixelEditor.html

@@ -1,3 +1,25 @@
 <div part="wrapper" tabindex="0">
   <canvas part="canvas" draggable="false"></canvas>
+  <svg part="selection" viewBox="0 0 10 10">
+    <defs>
+    <filter id="whiteOutline" x="-50%" y="-50%" width="200%" height="200%">
+      <!-- Thicken the source graphic (the original stroke path) -->
+      <feMorphology in="SourceGraphic" operator="dilate" radius="1" result="dilated" />
+
+      <!-- Flood the dilated shape with white color -->
+      <feFlood flood-color="white" result="flood" />
+
+      <!-- Composite the white color with the dilated shape to create the white outline shape -->
+      <feComposite in="flood" in2="dilated" operator="in" result="whiteOutlineShape" />
+
+      <!-- Merge the white outline shape with the original source graphic -->
+      <feMerge>
+        <feMergeNode in="whiteOutlineShape" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+  </defs>
+    <path part="selectionPath" class="hide" d="M9,7H1V1H9Z" filter="url(#whiteOutline)" />
+    <path part="selectionPathPreview" class="hide preview" d="M9,7H1V1H9Z" filter="url(#whiteOutline)" />
+  </svg>
 </div>