Button increment.

Author: Templarian

src/components/pg/button/button.ts

@@ -19,8 +19,6 @@ export default class PgButton extends HTMLElement {
   @Prop(normalizeBoolean) end: boolean = false;
 
   @Part() $button: HTMLButtonElement;
-  @Part() $number: HTMLSpanElement;
-  @Part() $bar: HTMLSpanElement;
 
   connectedCallback() {
     this.$button.addEventListener('click', (e) => {

src/components/pg/buttonIncrement/README.md

@@ -0,0 +1,18 @@
+# `<pg-button-increment>`
+
+The `pg-button-increment` is the `pg-button` component with an increment event for holding down.
+
+```typescript
+import '@pictogrammers/components/pg/buttonIncrement';
+import PgButtonIncrement from '@pictogrammers/components/pg/buttonIncrement';
+```
+
+## Usage
+
+```typescript
+this.$button.incrementDelay = 300; // default
+this.$button.incrementStepDelay = 50; // default
+this.$button.addEventListener('increment', () => {
+  // called on initial click and after every 50ms
+});
+```

src/components/pg/buttonIncrement/__examples__/basic/basic.css

@@ -0,0 +1,4 @@
+.example-flex {
+  display: flex;
+  gap: 0.5rem;
+}

src/components/pg/buttonIncrement/__examples__/basic/basic.html

@@ -0,0 +1,12 @@
+<div class="example">
+  <div class="example-flex">
+    <pg-button-increment part="button1">
+      <pg-icon path="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></pg-icon>
+      Clicked <span part="count1">0</span> Times
+    </pg-button-increment>
+    <pg-button-increment part="button2">
+      <pg-icon path="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></pg-icon>
+      Clicked <span part="count2">0</span> Times, incrementStepDelay = 100
+    </pg-button-increment>
+  </div>
+</div>

src/components/pg/buttonIncrement/__examples__/basic/basic.ts

@@ -0,0 +1,29 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgButtonIncrement from '../../buttonIncrement';
+
+import style from './basic.css';
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-button-increment-basic',
+  style,
+  template,
+})
+export default class XPgButtonBasic extends HTMLElement {
+  @Part() $button1: PgButtonIncrement;
+  @Part() $count1: HTMLSpanElement;
+  @Part() $button2: PgButtonIncrement;
+  @Part() $count2: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$button1.addEventListener('increment', () => {
+      const count = parseInt(this.$count1.textContent, 10);
+      this.$count1.textContent = `${count + 1}`;
+    });
+    this.$button2.incrementStepDelay = 100;
+    this.$button2.addEventListener('increment', () => {
+      const count = parseInt(this.$count2.textContent, 10);
+      this.$count2.textContent = `${count + 1}`;
+    });
+  }
+}

src/components/pg/buttonIncrement/buttonIncrement.css

@@ -0,0 +1 @@
+<parent />

src/components/pg/buttonIncrement/buttonIncrement.html

@@ -0,0 +1,45 @@
+import { Component, normalizeInt, Part, Prop } from '@pictogrammers/element';
+
+import template from './buttonIncrement.html';
+import style from './buttonIncrement.css';
+import PgButton from '../button/button';
+
+var timeout, interval;
+
+function clearTimers() {
+  clearTimeout(timeout);
+  clearInterval(interval);
+}
+
+@Component({
+  selector: 'pg-button-increment',
+  style,
+  template
+})
+export default class PgButtonIncrement extends PgButton {
+  @Prop(normalizeInt) incrementDelay = 300;
+  @Prop(normalizeInt) incrementStepDelay = 50;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.$button.addEventListener('pointerdown', () => {
+      const targetId = this.dataset.target;
+
+      this.dispatchEvent(new CustomEvent('increment'));
+
+      timeout = setTimeout(() => {
+        interval = setInterval(() => {
+          this.dispatchEvent(new CustomEvent('increment'));
+        }, this.incrementStepDelay);
+      }, this.incrementDelay);
+    });
+    this.$button.addEventListener('pointerup', clearTimers);
+    this.$button.addEventListener('pointerleave', clearTimers);
+  }
+
+  render(changes) {
+    if (changes.incrementStepDelay) {
+      console.log(this.incrementStepDelay, '<<<<');
+    }
+  }
+}

src/components/pg/buttonIncrement/buttonIncrement.ts

@@ -318,12 +318,12 @@ An example of a 9 segment grid for instance. Negative values offset from the rig
 {
   "grid": [{
     "vertical": [
-      { "start": 10, "color": 0 },
-      { "start": -10, "color": 0 }
+      { "offset": 10, "color": 0 },
+      { "offset": -10, "color": 0 }
     ],
     "horizontal": [
-      { "start": 10, "color": 0 },
-      { "start": -10, "color": 0 }
+      { "offset": 10, "color": 0 },
+      { "offset": -10, "color": 0 }
     ]
   }]
 }
@@ -340,13 +340,20 @@ Specific grid colors are configured on the editor level and do not persist in th
 ### Repeating Grids
 
 A repeating grid is useful for tilesets and can be represented as.
-- `start` can be optional or null when `step` is defined.
+- `offset` 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`.
 
+To create a repeating 20 pixel grid without an offset.
+
+```json
+{ "step": 20, "color": 0 },
+```
+
+To create a repeating 10 pixel grid with an offset `5` and limit `10`. The use case of this would be comps where a tileset does not evently sit in a viewport and needs to be centered.
+
 ```json
-{ "step": 10, "limit": null, "color": 0 },
-{ "start": 5, "step": 10, "limit": 10, "color": 0 },
+{ "offset": 5, "step": 10, "limit": 10, "color": 0 },
 ```
 
 ## Export

src/components/pg/inputPixelEditor/README.md

@@ -6,6 +6,7 @@ export const enum InputMode {
   SelectMagicWand,
   Stamp,
   Pixel,
+  Erase,
   Line,
   Rectangle,
   RectangleOutline,