Rewriting component hooks.

Author: Templarian

src/components/pg/button/README.md

@@ -38,7 +38,12 @@ import PgButton from '@pictogrammers/components/pg/button';
 | `--pg-button-active-color` | `#fff`  | `active` Text color      |
 | `--pg-button-active-background-color` | `#453C4F`  | `active` Background color      |
 | `--pg-button-active-border-color` | `#453C4F`  | `active` Border color      |
-| `--pg-button-padding` | `0.25rem 0.5rem` | Padding. |
+| `--pg-button-padding-inline` | `0.5rem` | Padding inline. |
+| `--pg-button-padding-inline-start` | `0.5rem` | Padding inline start. |
+| `--pg-button-padding-inline-end` | `0.5rem` | Padding inline end. |
+| `--pg-button-padding-block` | `0.25rem` | Padding block. |
+| `--pg-button-padding-block-start` | `0.25rem` | Padding block start. |
+| `--pg-button-padding-block-end` | `0.25rem` | Padding block end. |
 | `--pg-button-font-size` | `1rem` | Font size. |
 | `--pg-button-line-height` | `1.5rem` | Line height. |
 

src/components/pg/button/button.css

@@ -1,5 +1,6 @@
 :host {
   display: inline-flex;
+  width: fit-content;
 }
 
 [part=button] {
@@ -12,7 +13,10 @@
   border: var(--pg-button-border-width, 1px) solid var(--pg-button-border-color, #453C4F);
   background-color: var(--pg-button-background-color, #FFFFFF);
   color: var(--pg-button-color, #453C4F);
-  padding: var(--pg-button-padding, 0.25rem 0.5rem);
+  padding-inline-start: var(--pg-button-padding-inline, var(--pg-button-padding-inline-start, 0.5rem));
+  padding-inline-end: var(--pg-button-padding-inline, var(--pg-button-padding-inline-end, 0.5rem));
+  padding-block-start: var(--pg-button-padding-block, var(--pg-button-padding-block-start, 0.25rem));
+  padding-block-end: var(--pg-button-padding-block, var(--pg-button-padding-block-start, 0.25rem));
   border-radius: var(--pg-button-border-radius, 0.25rem);
   outline: none;
   --pg-icon-color: var(--pg-button-color, #453C4F);

src/components/pg/inputPixelEditor/README.md

@@ -3,11 +3,11 @@
 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 '@pictogrammers/components/pg/inputPixelEditor';
 import PgInputPixelEditor, {
   InputMode,
   LayerType,
-} from '@pictogrammers/components/pgInputPixelEditor';
+} from '@pictogrammers/components/pg/inputPixelEditor';
 ```
 
 ```html
@@ -50,8 +50,10 @@ See usage for each method below.
 | `setData()` | -           | Set layer data. |
 | `setJson(json)` | -        | Set JSON file. |
 | `reset()` | -  | Reset canvas and data. |
-| `getExportCanvas()` | -  | Get new canvas of export. |
-| `await getExportPng(options, meta)` | -  | Get image. |
+| `getExport()` | -  | 2d array of pixel color indexes. Already calculated. |
+| `getExport(id)` | -  | 2d array of pixel color indexes by export size. Minimal perf. |
+| `getExportCanvas()` | -  | Get new prepopulated HTML canvas, ideal for advanced export screens. |
+| `await getExportPng(options, meta)` | -  | Get png image with optional metadata. |
 | `undo()` | -           | Undo. |
 | `hasUndo()` | -     | Has undo |
 | `hasRedo()` | -     | Has redo |
@@ -179,6 +181,11 @@ A complete JSON storage for a 10x10 image.
       [{ "color": 2, "path": "M...Z" }]
     ]
   ],
+  "grid": {
+    "vertical": [],
+    "horizontal": []
+  },
+  "exports": [],
   "history": []
 }
 ```
@@ -291,6 +298,85 @@ this.$input.addEventListener('reference', (e: any) => {
 });
 ```
 
+## Grid
+
+Grids seperate the frame into regions. The vertical and horizontal lines can be assigned a unique color often used in fonts.
+
+Grid lines on 0 or when equal or greater than to width/height are deleted. Applying a grid or resizing a frame will result in an error. Errors are handled by the consumer via the `error` event. `errorType: 'grid'`.
+
+```text
+0, 0 | 1, 0 | 2, 0
+0, 1 | 1, 1 | 2, 1
+0, 2 | 1, 2 | 2, 2
+```
+
+An example of a 9 segment grid for instance. Negative values offset from the right or bottom.
+
+> Note: When configuring exports all grid colors with `color: 0` will be visible.
+
+```json
+{
+  "grid": [{
+    "vertical": [
+      { "start": 10, "color": 0 },
+      { "start": -10, "color": 0 }
+    ],
+    "horizontal": [
+      { "start": 10, "color": 0 },
+      { "start": -10, "color": 0 }
+    ]
+  }]
+}
+```
+
+Specific grid colors are configured on the editor level and do not persist in this input component. In a font the first 5 colors are reserved for the below lines.
+
+- `1` - Ascender Line
+- `2` - Cap Line
+- `3` - Median / Mean line
+- `4` - Baseline
+- `5` - Decender Line
+
+### Repeating Grids
+
+A repeating grid is useful for tilesets and can be represented as.
+- `start` can be optional or null when `step` is defined.
+- `limit` can be optional or null. Null repeats for as many times as it can fit.
+- Similar to regular grids an error will throw if the first line is outside the `width` or `height`.
+
+```json
+{ "step": 10, "limit": null, "color": 0 },
+{ "start": 5, "step": 10, "limit": 10, "color": 0 },
+```
+
+## Export
+
+Exports by default include the entire canvas, but can be resized to a specific pixel size or grid. The `x`, `y`, `width`, and `height` are optional.
+
+Use `getExport(id)` with a `id` value to get the data grid. This is ideal for export previews.
+
+```json
+{
+  "exports": [{
+    "id": "uuid",
+    "unit": "pixel",
+    "path": ["file.png"],
+    "x": 0,
+    "y": 0,
+    "width": null,
+    "height": null,
+  }, {
+    "id": "uuid",
+    "unit": "grid",
+    "path": ["folder", "bottomRight.png"],
+    "x": 2,
+    "y": 2,
+    "width": 1,
+    "height": 1,
+  }]
+}
+```
+
 ## History
 
 The history list contains every change made to the canvas. All feature insert an entry into history. Pens and pattern tools will group as to cut down history entries.

src/components/pg/inputPixelEditor/inputPixelEditor.ts

@@ -96,6 +96,16 @@ interface Export {
   height?: number
 }
 
+interface GridItem {
+  value: number
+  color: number
+}
+
+interface Grid {
+  vertical: GridItem[]
+  horizontal: GridItem[]
+}
+
 function toColor([r, g, b, a]: Color) {
   return `rgba(${r}, ${g}, ${b}, ${a})`;
 }
@@ -139,6 +149,7 @@ export default class PgInputPixelEditor extends HTMLElement {
   #selectionPixels = new Map<string, number[]>(); // 'x,y', [x, y]
   #selection: number[][] = [];
   #export: number[][] = [];
+  #grid: Grid = { vertical: [], horizontal: [] };
   #undoHistory: History[] = [];
   #redoHistory: History[] = [];
   #context: CanvasRenderingContext2D;
@@ -1412,6 +1423,28 @@ export default class PgInputPixelEditor extends HTMLElement {
     });
   }
 
+  /**
+   * Draw pixel.
+   * @param grid 2d grid of colors
+   * @param layer Layer to apply the pixel.
+   */
+  drawGrid(grid: number[][], layer = this.#layer) {
+    grid.forEach((row, y) => {
+      row.forEach((color, x) => {
+        this.#setPixel(x, y, color, layer);
+      });
+    })
+  }
+
+  /**
+   * Draw a single pixel.
+   */
+  drawPixel(x: number, y: number, color: number, layer = this.#layer) {
+    this.#setPixel(x, y, color, layer);
+  }
+
+  // todo: add other draw commands
+
   /**
    * Flatten layers, always merges to lowest layer
    * Note 0 is the lowest layer.
@@ -1496,6 +1529,10 @@ export default class PgInputPixelEditor extends HTMLElement {
     });
   }
 
+  getExport() {
+    return this.#export;
+  }
+
   getExportPath() {
     return bitmaskToPath(this.#export, { scale: 1 });
   }

src/components/pg/inputPixelEditor/utils/exportType.ts

@@ -0,0 +1 @@
+export type ExportType = 'pixel' | 'grid';

src/components/pg/inputText/README.md

@@ -25,3 +25,14 @@ import { PgInputText } from '@pictogrammers/components/pgInputText';
 | ---------- | -------- | ----------- |
 | change     |          | `{ detail: { value }` |
 | input      |          | `{ detail: { value }` |
+
+## CSS Variables
+
+| CSS Variables       | Default   | Description |
+| ------------------- | --------- | ----------- |
+| `--pg-button-padding-inline` | `0.5rem` | Padding inline. |
+| `--pg-button-padding-inline-start` | `0.5rem` | Padding inline start. |
+| `--pg-button-padding-inline-end` | `0.5rem` | Padding inline end. |
+| `--pg-button-padding-block` | `0.25rem` | Padding block. |
+| `--pg-button-padding-block-start` | `0.25rem` | Padding block start. |
+| `--pg-button-padding-block-end` | `0.25rem` | Padding block end. |

src/components/pg/inputText/inputText.css

@@ -6,12 +6,15 @@
 [part=input] {
   border: 1px solid var(--pg-input-text-border-color, #453C4F);
   border-radius: 0.125rem;
-  padding: var(--pg-input-text-padding, calc(0.5rem - 1px) 0.75rem);
+  padding-inline-start: var(--pg-input-text-padding-inline, var(--pg-input-text-padding-inline-start, 0.5rem));
+  padding-inline-end: var(--pg-input-text-padding-inline, var(--pg-input-text-padding-inline-end, 0.5rem));
+  padding-block-start: var(--pg-input-text-padding-block, var(--pg-input-text-padding-block-start, 0.25rem));
+  padding-block-end: var(--pg-input-text-padding-block, var(--pg-input-text-padding-block-start, 0.25rem));
   font-family: var(--pg-input-text-font-family, var(--pg-font-family));
   font-size: 1rem;
   outline: none;
   field-sizing: content;
-  min-width: calc(100% - 1.5rem - 2px);
+  min-width: calc(100% - 1rem - 2px);
   max-width: calc(var(--pg-input-text-max-width, 100%) - 1.5rem - 2px);
   background-color: transparent;
 }

src/components/pg/jsonNumber/jsonNumber.css

@@ -10,7 +10,7 @@
 
 [part=value] {
   user-select: text;
-  --pg-input-text-padding: 0 0.25rem;
+  --pg-input-text-padding-inline: 0.25rem;
   --pg-input-text-border-color: transparent;
   --pg-input-number-font-family: var(--pg-json-font-family);
   display: inline-flex;

src/components/pg/jsonString/jsonString.css

@@ -10,7 +10,7 @@
 
 [part=value] {
   user-select: text;
-  --pg-input-text-padding: 0 0.25rem;
+  --pg-input-text-padding-inline: 0.25rem;
   --pg-input-text-border-color: transparent;
   --pg-input-text-font-family: var(--pg-json-font-family);
   display: inline-flex;

src/components/pg/tableCellButtonIcon/tableCellButtonIcon.css

@@ -11,6 +11,9 @@
   vertical-align: middle;
   justify-items: center;
   --pg-button-background-color: transparent;
-  --pg-button-padding: 0;
+  --pg-button-inline-start: 0;
+  --pg-button-inline-end: 0;
+  --pg-button-block-start: 0;
+  --pg-button-block-end: 0;
   --pg-button-border-width: 0;
 }