@pictogrammers/components 0.3.2 → 0.4.0

package/pg/inputPixelEditor/utils/inputMode.ts

@@ -0,0 +1,8 @@
+export const enum InputMode {
+  Pixel,
+  Line,
+  Rectangle,
+  RectangleOutline,
+  Ellipse,
+  EllipseOutline
+}

package/pg/inputPixelEditor/utils/interateGrid.ts

@@ -0,0 +1,7 @@
+export default function iterateGrid(data: number[][], callback: (x: number, y: number, color: number) => void) {
+  for (let iy = 0; iy < data.length; iy++) {
+    for (let ix = 0; ix < data[0].length; ix++) {
+      callback(ix, iy, data[iy][ix]);
+    }
+  }
+}

package/pg/inputPixelEditor/utils/isEmptyGrid.ts

@@ -0,0 +1,3 @@
+export default function isEmptyGrid(grid: number[][]) {
+  return grid.flat().every(v => v === 0);
+}

package/pg/inputPixelEditor/utils/maskToBitmap.ts

@@ -0,0 +1,66 @@
+export function maskToBitmap(pathData: string, width: number, height: number) {
+  const grid: number[][] = Array(height).fill(0).map(() => Array(width).fill(0));
+
+  // Store only the vertical edges
+  const verticalEdges: { x: number, y: number[] }[] = [];
+
+  const paths = pathData.match(/M[^Z]*Z/g) || [];
+  for (const path of paths) {
+    let x0;
+    let y0;
+    let x;
+    let y;
+    // Split the path data into commands
+    const commands = path.match(/[MHVZ][\d, ]*/g) || [];
+
+    for (const cmd of commands) {
+      const type = cmd[0];
+      const value = cmd.slice(1);
+      let newY;
+
+      switch (type) {
+        case 'M': {
+          const [vX, vY] = value.split(/,| /).map(v => parseInt(v, 10));
+          x = vX;
+          y = vY;
+          x0 = vX;
+          y0 = vY;
+          break;
+        }
+        case 'H':
+          x = parseInt(value, 10);
+          break;
+        case 'V':
+          newY = parseInt(value, 10);
+          verticalEdges.push({ x, y: [y, newY].sort((a, b) => a - b) });
+          y = newY;
+          break;
+        case 'Z':
+          if (x0 === x) {
+            verticalEdges.push({ x, y: [y, y0].sort((a, b) => a - b) });
+          }
+          break;
+      }
+    }
+  }
+
+  // Fill the shape using scan-line algorithm
+  for (let y = 0; y < height; ++y) {
+    let inside = false;
+
+    for (let x = 0; x < width; ++x) {
+      // Check if we cross a vertical edge
+      for (const verticalEdge of verticalEdges) {
+        if (verticalEdge.x === x && y >= verticalEdge.y[0] && y < verticalEdge.y[1]) {
+          inside = !inside;
+          break;
+        }
+      }
+      if (inside) {
+        grid[y][x] = 1;
+      }
+    }
+  }
+
+  return grid;
+}

package/pg/inputRange/__examples__/basic/basic.ts

@@ -14,16 +14,16 @@ export default class XPgInputRangeBasic extends HTMLElement {
   @Part() $value2: HTMLSpanElement;
 
   connectedCallback() {
-    this.$input.addEventListener('change', this.handleChange.bind(this));
-    this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('change', this.#handleChange.bind(this));
+    this.$input.addEventListener('input', this.#handleInput.bind(this));
   }
 
-  handleChange(e: CustomEvent) {
+  #handleChange(e: CustomEvent) {
     const { value } = e.detail;
     this.$value1.innerText = value;
   }
 
-  handleInput(e: CustomEvent) {
+  #handleInput(e: CustomEvent) {
     const { value } = e.detail;
     this.$value2.innerText = value;
   }

package/pg/inputRange/inputRange.ts

@@ -23,11 +23,12 @@ export default class PgInputRange extends HTMLElement {
   }
 
   connectedCallback() {
-    this.$input.addEventListener('change', this.handleChange.bind(this));
-    this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('change', this.#handleChange.bind(this));
+    this.$input.addEventListener('input', this.#handleInput.bind(this));
   }
 
-  handleChange(e) {
+  #handleChange(e: any) {
+    e.stopPropagation();
     const { value } = e.target;
     this.dispatchEvent(
       new CustomEvent('change', {
@@ -39,7 +40,8 @@ export default class PgInputRange extends HTMLElement {
     );
   }
 
-  handleInput(e) {
+  #handleInput(e: any) {
+    e.stopPropagation();
     const { value } = e.target;
     this.dispatchEvent(
       new CustomEvent('input', {

package/pg/inputSelect/README.md

@@ -4,7 +4,7 @@ The `pg-input-select` component creates an select drop down.
 
 ```typescript
 import '@pictogrammers/components/pgInputSelect';
-import { PgInputSelect } '@mdi/components/pgInputSelect';
+import { PgInputSelect } '@pictogrammers/components/pgInputSelect';
 ```
 
 ```html

package/pg/inputSelect/__examples__/basic/basic.ts

@@ -13,18 +13,20 @@ export default class XPgInputSelectBasic extends HTMLElement {
   @Part() $value: HTMLSpanElement;
 
   connectedCallback() {
-    this.$input.options = [
+    this.$input.options.push(
       { label: 'Option 1', value: 'option1' },
       { label: 'Option 2', value: 'option2' },
       { label: 'Option 3', value: 'option3' },
       { label: 'Option 4', value: 'option4' }
-    ];
-    this.$input.value = this.$input.options[1].value;
-    this.$input.addEventListener('change', this.handleChange.bind(this));
+    );
+    this.$input.default = { label: 'None', value: '', disabled: true };
+    //this.$input.value = this.$input.options[1].value;
+    this.$input.addEventListener('change', this.#handleChange.bind(this));
   }
 
-  handleChange(e) {
+  #handleChange(e) {
     const { value } = e.detail;
+    this.$input.value = value;
     this.$value.innerText = `${value}`;
   }
 }

package/pg/inputSelect/inputSelect.css

@@ -1,31 +1,34 @@
 :host {
-  display: block;
-  font-family: var(--pg-font-family);
+  display: contents;
 }
 
-[part="wrapper"] {
+[part=button] {
+  font-family: var(--pg-font-family);
+  background: var(--pg-input-select-background, #FFFFFF);
+  text-align: left;
   display: grid;
   grid-template-rows: auto;
   grid-template-columns: 100% 0;
-}
-
-[part="select"] {
-  grid-row: 1;
-  grid-column: 1;
   border: 1px solid var(--pg-input-select-border-color, #453C4F);
   border-radius: 0.25rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0;
   width: 100%;
   font-size: 1rem;
   outline: 0;
-  -webkit-appearance: none;
 }
 
-[part="select"]:focus {
+[part=button]:focus {
   box-shadow: 0 0 0 3px rgba(79, 143, 249, 0.5);
 }
 
-[part="chevron"] {
+[part=label] {
+  grid-row: 1;
+  grid-column: 1;
+  padding: 0.5rem 0.75rem;
+  font-size: var(--pg-input-select-font-size, 1rem);
+}
+
+[part=chevron] {
   grid-row: 1;
   grid-column: 2;
   pointer-events: none;

package/pg/inputSelect/inputSelect.html

@@ -1,4 +1,4 @@
-<div part="wrapper">
-  <select part="select"></select>
+<button part="button">
+  <span part="label"></span>
   <svg part="chevron" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
-</div>
+</button>

package/pg/inputSelect/inputSelect.ts

@@ -1,4 +1,5 @@
-import { Component, Prop, Part } from '@pictogrammers/element';
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+import PgOverlaySelectMenu from '../overlaySelectMenu/overlaySelectMenu';
 
 import template from './inputSelect.html';
 import style from './inputSelect.css';
@@ -15,43 +16,45 @@ interface InputSelectItem {
 })
 export default class PgInputSelect extends HTMLElement {
   @Prop() options: InputSelectItem[] = [];
-  @Prop() value: string;
+  @Prop() value: string = '';
   @Prop() name: string = '';
+  @Prop() default: any = null;
 
-  @Part() $select: HTMLSelectElement;
+  @Part() $button: HTMLButtonElement;
+  @Part() $label: HTMLSpanElement;
 
-  render(changes) {
-    if (changes.options) {
-      this.options.forEach(o => {
-        const option = document.createElement('option');
-        option.innerText = o.label;
-        option.value = o.value;
-        this.$select.appendChild(option);
-      });
-      if (this.$select.value !== this.value) {
-        this.$select.value = this.value;
-      }
-    }
-    if (changes.value) {
-      if (this.$select.value !== this.value) {
-        this.$select.value = this.value;
-      }
-    }
+  connectedCallback() {
+    this.$button.addEventListener('click', this.#handleClick.bind(this));
   }
 
-  connectedCallback() {
-    this.$select.addEventListener('change', this.handleSelect.bind(this));
+  render(changes) {
+    if (changes.value || changes.default) {
+      this.$label.textContent = this.value
+        ? this.value
+        : this.default
+          ? this.default.label
+          : '\u00A0'; // nbsp
+    }
   }
 
-  handleSelect(e) {
-    const { value } = e.target;
-    this.dispatchEvent(
-      new CustomEvent('change', {
+  #menuOpen = false;
+  async #handleClick() {
+    if (this.#menuOpen) { return; }
+    this.#menuOpen = true;
+    const result = await PgOverlaySelectMenu.open({
+      source: this.$button,
+      default: this.default,
+      value: this.options.find(x => x.value === this.value) ?? null,
+      items: this.options
+    });
+    if (result !== undefined) {
+      this.dispatchEvent(new CustomEvent('change', {
         detail: {
-          value,
-          name: this.name
+          value: result.value
         }
-      })
-    )
+      }));
+      this.$label.textContent = result.label;
+    }
+    this.#menuOpen = false;
   }
 }

package/pg/inputText/__examples__/basic/basic.ts

@@ -14,17 +14,17 @@ export default class XPgInputTextBasic extends HTMLElement {
   @Part() $value2: HTMLSpanElement;
 
   connectedCallback() {
-    this.$input.addEventListener('change', this.handleChange.bind(this));
-    this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('change', this.#handleChange.bind(this));
+    this.$input.addEventListener('input', this.#handleInput.bind(this));
   }
 
-  handleChange(e: CustomEvent) {
+  #handleChange(e: CustomEvent) {
     const { value } = e.detail;
-    this.$value1.innerText = value;
+    this.$value1.textContent = value;
   }
 
-  handleInput(e: CustomEvent) {
+  #handleInput(e: CustomEvent) {
     const { value } = e.detail;
-    this.$value2.innerText = value;
+    this.$value2.textContent = value;
   }
 }

package/pg/inputText/inputText.css

@@ -7,6 +7,7 @@
   border: 1px solid var(--pg-input-text-border-color, #453C4F);
   border-radius: 0.125rem;
   padding: calc(0.5rem - 1px) 0.75rem;
+  font-family: var(--pg-font-family);
   font-size: 1rem;
   outline: none;
   width: calc(100% - 1.5rem - 2px);

package/pg/inputUserSelect/README.md

@@ -4,7 +4,7 @@ The `pg-input-user-select` component creates an select drop down.
 
 ```typescript
 import '@pictogrammers/components/pgInputUserSelect';
-import { PgInputUserSelect } '@mdi/components/pgInputUserSelect';
+import { PgInputUserSelect } '@pictogrammers/components/pgInputUserSelect';
 ```
 
 ```html

package/pg/inputUserSelect/inputUserSelect.ts

@@ -34,7 +34,7 @@ const mdiShape = 'M11,13.5V21.5H3V13.5H11M12,2L17.5,11H6.5L12,2M17.5,13C20,13 22
   template
 })
 export default class PgInputUserSelect extends HTMLElement {
-  @Prop() options: User[] | null = null;
+  @Prop() options: User[] = [];
   @Prop() value: User | null = null;
   @Prop() clear: boolean = false;
   @Prop() noDataText: string = 'Empty Users List';

package/pg/listTag/__examples__/basic/basic.ts

@@ -21,25 +21,24 @@ export default class XPgIconBasic extends HTMLElement {
     this.$buttonAdd.addEventListener('click', this.handleAdd.bind(this));
     this.$buttonRemove.addEventListener('click', this.handleRemove.bind(this));
     this.$buttonEdit.addEventListener('click', this.handleEdit.bind(this));
-    this.$tags.items = tags;
+    this.$tags.items.push(...tags);
   }
 
   handleClear() {
-    this.$tags.items = [];
+    this.$tags.items.splice(0, this.$tags.items.length)
   }
 
   uuid = 4;
 
   handleAdd() {
-    this.$tags.items = [
-      ...this.$tags.items,
+    this.$tags.items.push(
       new Tag().from({
         id: `uuid${this.uuid++}`,
         count: 42,
         name: 'Foo Bar',
         url: 'foo-bar'
       })
-    ];
+    );
   }
 
   handleRemove() {

package/pg/markdown/README.md

@@ -8,6 +8,20 @@ import '@pictogrammers/components/pg/markdown';
 
 ## Usage
 
-| Events | Description |
-| ------ | ----------- |
-| `onchange` | `event = { detail: { r, g, b, hex } }` |
+All markdown formatting is supported. Code blocks support:
+
+- css
+- groovy
+- javascript
+- json
+- jsx
+- tsx
+- java
+- markup (aka html, xml)
+- typescript
+- sass
+- scss
+- yaml (with a custom viewer)
+- php
+- bash
+- markdown

package/pg/markdown/__examples__/basic/basic.ts

@@ -12,7 +12,7 @@ export default class XPgMarkdownBasic extends HTMLElement {
   @Part() $markdown: PgMarkdown;
 
   connectedCallback() {
-    this.$markdown.replace = [{
+    this.$markdown.replace.push({
       find: new RegExp('(\\\\mdi|mdi|icon):([a-z0-9-]+):?([#a-z0-9-]+)?', 'g'),
       replace: (m, type, icon, color) => {
         if (type == '\\mdi') { return `mdi:${icon}`; }
@@ -36,7 +36,7 @@ export default class XPgMarkdownBasic extends HTMLElement {
         }
         return m;
       }
-    }];
+    });
 
     this.$markdown.text = example;
 

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

@@ -125,5 +125,5 @@ export const example = [
   '| Row 3                | Row 3    |',
   '| Row 4                | Row 4    |',
   '',
-  'Done, but `code` blocks would be useful.'
+  'End of document, and `code` blocks also work.'
 ].join('\n');

package/pg/markdown/markdown.css

@@ -221,6 +221,17 @@ table code {
   transform: translateY(-1px);
 }
 
+h1 > code,
+h2 > code,
+h3 > code,
+h4 > code,
+h5 > code {
+  border: 1px solid #DDD;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.5rem;
+  background: #F1F1F1;
+}
+
 p > svg.icon,
 blockquote > svg.icon,
 p > a.icon > svg.icon,

package/pg/menu/README.md

@@ -0,0 +1,46 @@
+# `<pg-menu>`
+
+The `pg-menu` component renders a menu list. Menus can be used inline, but are usually created by a parent component. For example:
+
+- `pg-button-menu` - Button Menu
+  - Default item `type` is `PgMenuItem`
+- `pg-button-icon-menu` - Button Icon Menu
+  - Default item `type` is `PgMenuItem`
+- `PgMenuOverlay` Utility overlay for menus.
+  - The item `type` is required.
+
+```typescript
+import '@pictogrammers/components/pg/menu';
+```
+
+```html
+<pg-menu part="menu"></pg-menu>
+```
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| `items`    |          | Set items list. Ex: `{ type: PgMenuItem }` |
+
+```typescript
+import PgMenuItem from '@pictogrammers/components/pg/menuItem';
+
+// ...
+@Part() $menu: PgMenu;
+
+connectedCallback() {
+  this.$menu.items = [{
+    label: 'Item 1',
+    value: 'item1',
+    type: PgMenuItem
+  }];
+}
+```
+
+## CSS Variables
+
+| Variable | Default |
+| -------- | ------- |
+| `--pg-menu-padding` | `0.25rem` |
+| `--pg-menu-border-width` | `0` |
+| `--pg-menu-background-color` | `transparent` |
+| `--pg-menu-box-shadow` | `none` |

package/pg/menu/__examples__/basic/basic.html

@@ -0,0 +1,6 @@
+<div class="example">
+  <pg-menu part="menu"></pg-menu>
+  <div>
+    Result: <code part="result"></code>
+  </div>
+</div>

package/pg/menu/__examples__/basic/basic.ts

@@ -0,0 +1,46 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgMenu from '../../menu';
+
+import PgMenuDivider from '../../../menuDivider/menuDivider';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-menu-basic',
+  template
+})
+export default class XPgMenuBasic extends HTMLElement {
+  @Part() $menu: PgMenu;
+  @Part() $result: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$menu.items = [{
+      label: 'Item 1',
+      value: 'item1'
+    },
+    {
+      label: 'Item 2',
+      value: 'item2'
+    },
+    {
+      type: PgMenuDivider
+    },
+    {
+      label: 'Item 3',
+      value: 'item3'
+    }];
+    this.$menu.addEventListener('select', this.#handleSelect.bind(this));
+  }
+
+  previousItem: any = null;
+  #handleSelect(e: any) {
+    const { item } = e.detail;
+    if (this.previousItem !== null) {
+      this.previousItem.checked = false;
+    }
+    item.checked = true;
+    this.previousItem = item;
+    // update clicked result
+    this.$result.textContent = JSON.stringify(e.detail);
+  }
+}

package/pg/menu/index.ts

@@ -0,0 +1,3 @@
+import PgMenu from './menu';
+
+export default PgMenu;

package/pg/menu/menu.css

@@ -0,0 +1,19 @@
+:host {
+  display: contents;
+}
+
+[part=items] {
+  display: flex;
+  flex-direction: column;
+  padding: var(--pg-menu-padding, 0.25rem);
+  border-width: var(--pg-menu-border-width, 1px);
+  border-color: var(--pg-menu-border-color, #453C4F);
+  border-style: solid;
+  border-radius: 0.5rem;
+  background-color: var(--pg-menu-background-color, #FFFFFF);
+  box-shadow: var(--pg-menu-box-shadow, none);
+}
+
+[part=items].check {
+  --pg-menu-_has-check: true;
+}

package/pg/menu/menu.html

@@ -0,0 +1 @@
+<div part="items"></div>