@pictogrammers/components 0.3.2 → 0.4.0

package/pg/grid/__examples__/basic/basic.ts

@@ -11,7 +11,7 @@ import template from './basic.html';
   template
 })
 export default class XPgGridBasic extends HTMLElement {
-
+/*
   @Prop() fontId = 'D051337E-BC7E-11E5-A4E9-842B2B6CFE1B';
 
   @Part() $button0: HTMLButtonElement;
@@ -77,7 +77,8 @@ export default class XPgGridBasic extends HTMLElement {
     if (count === -1) {
       this.$grid.icons = this.icons;
     }
-    this.$grid.icons = this.icons.slice(0, count);
+    // update array, fix later
+    this.$grid.icons.push(...this.icons.slice(0, count));
   }
 
   async handleSync(e: CustomEvent) {

package/pg/grid/grid.ts

@@ -1,5 +1,4 @@
 import { Component, Prop, Part, Local } from '@pictogrammers/element';
-// import { createPopper } from '@popperjs/core';
 import { debounce, } from '../shared/debounce';
 import PgScroll from '../scroll/scroll';
 

package/pg/icon/README.md

@@ -19,8 +19,9 @@ import PgIcon from '@pictogrammers/components/pg/icon';
 
 ## CSS Variables
 
-| CSS Variables       | Default   | Description |
-| ------------------- | --------- | ----------- |
-| `--pg-icon-color`  | `#453C4F` | Color       |
-| `--pg-icon-width`  | `1.5rem`  | Width       |
-| `--pg-icon-height` | `1.5rem`  | Height      |
+| CSS Variables       | Default     | Description |
+| ------------------- | ----------- | ----------- |
+| `--pg-icon-color`   | `#453C4F`   | Color       |
+| `--pg-icon-viewbox` | `0 0 24 24` | SVG viewBox |
+| `--pg-icon-width`   | `1.5rem`    | Width       |
+| `--pg-icon-height`  | `1.5rem`    | Height      |

package/pg/icon/__examples__/basic/basic.html

@@ -11,6 +11,6 @@
   Set icon to Square
 </button>
 
-<div class="example">
-  <pg-icon part="icon2" path="M12,4C14.21,4 16,5.79 16,8C16,10.21 14.21,12 12,12C9.79,12 8,10.21 8,8C8,5.79 9.79,4 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"></pg-icon>
+<div class="example" style="--pg-icon-viewbox: 0 0 22 22">
+  <pg-icon part="icon2" path="M9 3H13V4H14V5H15V9H14V10H13V11H9V10H8V9H7V5H8V4H9V3M10 8V9H12V8H13V6H12V5H10V6H9V8H10M7 12H15V13H17V14H18V15H19V19H3V15H4V14H5V13H7V12M6 16H5V17H17V16H16V15H14V14H8V15H6V16Z"></pg-icon>
 </div>

package/pg/icon/__examples__/basic/basic.ts

@@ -21,7 +21,7 @@ export default class XPgIconBasic extends HTMLElement {
   }
 
   handleClear() {
-    this.$icon1.path = '';
+    this.$icon1.path = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
   }
 
   handleAccount() {

package/pg/icon/icon.ts

@@ -13,10 +13,16 @@ const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
 export default class PgIcon extends HTMLElement {
   @Prop() path: string = noIcon;
 
+  @Part() $svg: SVGSVGElement;
   @Part() $path: SVGPathElement;
 
   render(changes) {
     if (changes.path) {
+      const viewBox = getComputedStyle(this).getPropertyValue('--pg-icon-viewbox');
+      this.$svg.setAttribute('viewBox', viewBox || '0 0 24 24');
+      if (!this.path) {
+        throw new Error('invalid path set on pg-icon');
+      }
       this.$path.setAttribute('d', this.path);
     }
   }

package/pg/inputCheckList/__examples__/basic/basic.ts

@@ -13,19 +13,19 @@ export default class XPgInputCheckListBasic extends HTMLElement {
   @Part() $value: HTMLSpanElement;
 
   connectedCallback() {
-      this.$input.value = ['uuid1', 'uuid3'];
-      this.$input.options = [
+      this.$input.value.push('uuid1', 'uuid3');
+      this.$input.options.push(
         { value: 'uuid1', label: 'Item 1' },
         { value: 'uuid2', label: 'Item 2' },
         { value: 'uuid3', label: 'Item 3', disabled: true },
         { value: 'uuid4', label: 'Item 4' }
-      ];
-      this.$value.innerText = this.$input.value.join(',');
+      );
+      this.$value.textContent = this.$input.value.join(',');
       this.$input.addEventListener('change', this.handleChange.bind(this));
   }
 
   handleChange(e) {
     const { value } = e.detail;
-    this.$value.innerText = value.join(',');
+    this.$value.textContent = value.join(',');
   }
 }

package/pg/inputCheckList/inputCheckList.ts

@@ -52,6 +52,7 @@ export default class PgInputCheckList extends HTMLElement {
 
   render(changes) {
     if (changes.options) {
+      /*
       list(
         this.$list,
         this.options,
@@ -92,6 +93,7 @@ export default class PgInputCheckList extends HTMLElement {
           $item.querySelector('button').innerText = option.label;
         }
       );
+      */
     }
     if (changes.value) {
       //const value = [true, 'true'].includes(this.value);

package/pg/inputFileLocal/inputFileLocal.css

@@ -42,10 +42,11 @@
   bottom: -1px;
   left: -1px;
   border-radius: 0.25rem;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
 }
 
 [part="label"]:focus::before {
+  pointer-events: none;
   content: '';
   position: absolute;
   top: -1px;
@@ -53,7 +54,7 @@
   bottom: -1px;
   left: -1px;
   border-radius: 0.25rem;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }
 
 [part="file"] {

package/pg/inputPixelEditor/README.md

@@ -0,0 +1,132 @@
+# `<pg-input-pixel-editor>`
+
+The `pg-input-pixel-editor` component is used to edit images. Tailored for pen or mouse input the editor can be used for various image editing tasks.
+
+```typescript
+import '@pictogrammers/components/pgInputPixelEditor';
+import { PgInputPixelEditor } from '@pictogrammers/components/pgInputPixelEditor';
+```
+
+```html
+<pg-input-pixel-editor></pg-input-pixel-editor>
+```
+
+## Attributes
+
+| Attributes  | Tested   | Description |
+| ----------- | -------- | ----------- |
+| `name`      |          | Unique name in `pg-form` |
+| `width`     |          | Pixel width. Default `10` |
+| `height`    |          | Pixel height. Default `10` |
+| `size`      |          | Pixel size, minimum value `4`. Default `10` |
+| `gridSize`  |          | Grid spacing between cells. Default `1` |
+
+## Events
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| `change`   |          | `{ detail: { value }` |
+| `input`    |          | `{ detail: { value }` |
+
+## Methods
+
+See usage for each method below.
+
+| Method     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| `save(options)` | -        | Save file. |
+| `open(json)` | -        | Open file. |
+| `undo()` | -           | Undo. |
+| `hasUndo()` | -     | Has undo |
+| `hasRedo()` | -     | Has redo |
+| `redo()` | -           | Redo. |
+| `selectLayer()` | -    | Select layer. |
+| `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. |
+| `removeColor(index)` | -    | Remove color. |
+| `moveColor(startIndex, endIndex)` | -    | Move index. |
+| `rotateClockwise()` | -    | Rotate. |
+| `rotateCounterclockwise()` | -    | Rotate. |
+| `move(x, y[, layer])` | -  | Move. |
+| `flipHorizontal()` | -  | Flip horizontal. |
+| `flipVertical()` | -  | Flip vertical. |
+| `invert()` | -  | Invert layer. |
+
+### `save(options)` Method
+
+The save method allows getting the JSON representation of the current editor.
+
+```typescript
+@Part() $editor: PgInputPixelEditor;
+
+handleSave() {
+  const json = await this.$editor.save({
+    // Include history
+    history: true,
+  });
+  // use json
+}
+```
+
+### `open(json)` Method
+
+The open method allows loading json for previously created images.
+
+```typescript
+@Part() $editor: PgInputPixelEditor;
+
+handleOpen() {
+  const error = await this.$editor.open(json);
+  if (error) {
+    throw new Error(error.message);
+  }
+}
+```
+
+## JSON Format
+
+- `width` - Image width.
+- `height` - Image width.
+- `transparent` - Render transparent background.
+
+A complete JSON storage for a 10x10 image.
+
+```json
+{
+  "width": 10,
+  "height": 10,
+  "transparent": true,
+  "colors": [
+    [0, 0, 0, 0],
+    [0, 0, 0, 1]
+  ],
+  "layers": [
+    {
+      "name": "Layer 1",
+      "export": true,
+      "locked": false,
+      "visible": true,
+      "opacity": 1
+    }
+  ],
+  "data": [
+    [
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
+      [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
+      [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
+      [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
+      [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
+      [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
+      [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
+      [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    ]
+  ]
+}
+```

package/pg/inputPixelEditor/__examples__/basic/basic.css

@@ -0,0 +1,29 @@
+[part="debug"] {
+  background: #555;
+  padding: 1rem;
+  display: flex;
+}
+
+[part="debug"] canvas {
+  border: 1px solid #FFF;
+}
+
+[part="value1"] {
+  word-wrap: break-word;
+}
+
+.props {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 0.5rem;
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+}
+
+h3 {
+  margin: 0.25rem 0;
+  font-size: 1.125rem;
+}

package/pg/inputPixelEditor/__examples__/basic/basic.html

@@ -0,0 +1,63 @@
+<div class="example">
+  <div class="props">
+    <label>
+      Width
+      <input part="width" type="range" min="4" max="22">
+    </label>
+    <label>
+      Height
+      <input part="height" type="range" min="4" max="22">
+    </label>
+    <label>
+      Size
+      <input part="size" type="range" step="2" min="4" max="16">
+    </label>
+    <label>
+      <input part="transparent" type="checkbox">
+      Transparent
+    </label>
+  </div>
+  <pg-input-pixel-editor part="input" width="10" height="10" size="10" style="box-shadow:0 0 0.5rem rgba(0, 0, 0, 0.2)"></pg-input-pixel-editor>
+  <div>
+    <code>onchange: <span part="value1"></span></code>
+  </div>
+  <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>
+    <h3>Color Tools</h3>
+    <button part="addColor">Add Color</button>
+    <pre part="colors"></pre>
+  </div>
+  <div>
+    <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>

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

@@ -0,0 +1,200 @@
+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';
+
+@Component({
+  selector: 'x-pg-input-pixel-editor-basic',
+  style,
+  template
+})
+export default class XPgInputPixelEditorBasic extends HTMLElement {
+
+  @Part() $input: PgInputPixelEditor;
+  @Part() $value1: HTMLSpanElement;
+  @Part() $value2: HTMLSpanElement;
+  @Part() $debug: HTMLDivElement;
+  @Part() $width: HTMLInputElement;
+  @Part() $height: HTMLInputElement;
+  @Part() $size: HTMLInputElement;
+  @Part() $transparent: HTMLInputElement;
+
+  @Part() $reset: HTMLButtonElement;
+  @Part() $clear: HTMLButtonElement;
+  @Part() $invert: HTMLButtonElement;
+  @Part() $modePixel: HTMLButtonElement;
+  @Part() $modeLine: HTMLButtonElement;
+  @Part() $modeRectangle: HTMLButtonElement;
+  @Part() $modeRectangleOutline: HTMLButtonElement;
+  @Part() $modeEllipse: HTMLButtonElement;
+  @Part() $modeEllipseOutline: HTMLButtonElement;
+
+  @Part() $save: HTMLButtonElement;
+  @Part() $open: HTMLButtonElement;
+  @Part() $output: HTMLPreElement;
+  @Part() $file: HTMLInputElement;
+  @Part() $saveSvg: HTMLInputElement;
+  @Part() $savePng: HTMLInputElement;
+
+  // MAKE A LIST COMPONENT!!!! [text | delete]
+  @Part() $colors: HTMLPreElement;
+  @Part() $layers: HTMLPreElement;
+
+  connectedCallback() {
+    this.$width.value = '10';
+    this.$height.value = '10';
+    this.$size.value = '10';
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+    this.$width.addEventListener('input', this.handleWidthChange.bind(this));
+    this.$height.addEventListener('input', this.handleHeightChange.bind(this));
+    this.$size.addEventListener('input', this.handleSizeChange.bind(this));
+    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.$modePixel.addEventListener('click', () => {
+      this.$input.inputModePixel();
+    });
+    this.$modeLine.addEventListener('click', () => {
+      this.$input.inputModeLine();
+    });
+    this.$modeRectangle.addEventListener('click', () => {
+      this.$input.inputModeRectangle();
+    });
+    this.$modeRectangleOutline.addEventListener('click', () => {
+      this.$input.inputModeRectangleOutline();
+    });
+    this.$modeEllipse.addEventListener('click', () => {
+      this.$input.inputModeEllipse();
+    });
+    this.$modeEllipseOutline.addEventListener('click', () => {
+      this.$input.inputModeEllipseOutline();
+    });
+    this.$reset.addEventListener('click', () => {
+      this.$input.reset();
+    });
+    this.$clear.addEventListener('click', () => {
+      this.$input.clear();
+    });
+    this.$invert.addEventListener('click', () => {
+      this.$input.invert();
+    });
+    this.$save.addEventListener('click', async () => {
+      const json = await this.$input.save();
+      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.$file.addEventListener('change', this.handleFile.bind(this));
+    this.$saveSvg.addEventListener('click', async () => {
+      try {
+        // @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();
+      } catch (e: any) {
+        // no save
+      }
+    });
+    this.$savePng.addEventListener('click', async () => {
+      try {
+        // @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.write
+        await writable.close();
+      } catch (e: any) {
+        // no save
+      }
+    });
+  }
+
+  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) {
+    const { value } = e.detail;
+    this.$value1.textContent = value.join('--');
+  }
+
+  handleInput(e: CustomEvent) {
+    const { value } = e.detail;
+    this.$value2.textContent = value;
+  }
+
+  handleDebug(e: CustomEvent) {
+    const { x, y, width, height, context, baseLayer, editLayer, noEditLayer, previewLayer } = e.detail;
+    this.$debug.appendChild(baseLayer);
+    this.$debug.appendChild(editLayer);
+    this.$debug.appendChild(noEditLayer);
+    this.$debug.appendChild(previewLayer);
+    //context.strokeStyle = 'rgba(255, 0, 0, 0.3)';
+    //context.lineWidth = 1;
+    //context.strokeRect(x, y, width, height);
+  }
+
+  handleWidthChange(e) {
+    this.$input.width = e.target.value;
+    this.$debug.innerHTML = '';
+  }
+
+  handleHeightChange(e) {
+    this.$input.height = e.target.value;
+    this.$debug.innerHTML = '';
+  }
+
+  handleSizeChange(e) {
+    this.$input.size = e.target.value;
+    this.$debug.innerHTML = '';
+  }
+
+  handleTransparentChange(e) {
+    this.$input.transparent = e.target.checked;
+  }
+}

package/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);
+}

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

@@ -0,0 +1,35 @@
+
+/**
+ * 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"] },
+        },
+      ],
+    };
+    try {
+      // @ts-ignore
+      return await window.showSaveFilePicker(opts);
+    } catch (e) {
+      console.log('no save');
+    }
+  }
+  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();
+}

package/pg/inputPixelEditor/index.ts

@@ -0,0 +1,3 @@
+import PgInputPixelEditor from './inputPixelEditor';
+
+export default PgInputPixelEditor;

package/pg/inputPixelEditor/inputPixelEditor.css

@@ -0,0 +1,27 @@
+:host {
+  display: inline-flex;
+}
+
+[part="wrapper"] {
+  display: flex;
+  position: relative;
+  outline: 0;
+}
+
+[part="wrapper"]:focus-visible::before {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  border-radius: 0.125rem;
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
+}
+
+canvas {
+  touch-action: none;
+  user-select: none;
+  outline: 0;
+}

package/pg/inputPixelEditor/inputPixelEditor.html

@@ -0,0 +1,3 @@
+<div part="wrapper" tabindex="0">
+  <canvas part="canvas" draggable="false"></canvas>
+</div>