@pictogrammers/components 0.5.15 → 0.5.18

package/pg/nodes copy/nodes.css

@@ -0,0 +1,41 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family, system-ui);
+}
+
+[part=input] {
+  border: 1px solid var(--pg-input-text-border-color, #453C4F);
+  border-radius: 0.125rem;
+  padding-inline-start: var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem));
+  padding-inline-end: var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem));
+  padding-block-start: var(--pg-input-text-padding-block-start, var(--pg-input-text-padding-block, 0.25rem));
+  padding-block-end: var(--pg-input-text-padding-block-start, var(--pg-input-text-padding-block, 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%
+    - var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
+    - var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
+    - 2px
+  );
+  max-width: calc(
+    var(--pg-input-text-max-width, 100%)
+    - var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
+    - var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
+    - 2px
+  );
+  background-color: transparent;
+}
+
+[part=input]:read-only {
+  border-color: transparent;
+}
+
+[part=input]:active {
+  box-shadow: 0 0 0 3px var(--pg-input-text-active-glow, rgb(79, 143, 249, 0.6));
+}
+[part=input]:focus {
+  box-shadow: 0 0 0 3px var(--pg-input-text-focus-glow, rgb(79, 143, 249, 0.5));
+}

package/pg/nodes copy/nodes.html

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

package/pg/overlayContextMenu/__examples__/filter/filter.ts

@@ -0,0 +1,87 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgMenuItemIcon from '../../../menuItemIcon/menuItemIcon';
+import PgMenuDivider from '../../../menuDivider/menuDivider';
+import PgOverlayContextMenu from '../../overlayContextMenu';
+
+import template from './filter.html';
+import style from './filter.css';
+import PgMenuItem from 'components/pg/menuItem/menuItem';
+
+@Component({
+  selector: 'x-pg-overlay-context-menu-filter',
+  template,
+  style
+})
+export default class XPgOverlayContextMenuFilter extends HTMLElement {
+  @Part() $area: HTMLDivElement;
+  @Part() $result: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$area.addEventListener('contextmenu', this.#handleContextMenu.bind(this));
+  }
+
+  #value = null;
+
+  async #handleContextMenu(e: MouseEvent) {
+    e.preventDefault();
+    const items = [{
+      label: 'Add File',
+      value: 'addFile',
+      type: PgMenuItem,
+    },
+    {
+      label: 'Add Folder',
+      value: 'addFolder',
+      type: PgMenuItem,
+    },
+    {
+      type: PgMenuDivider
+    },
+    {
+      label: 'Copy',
+      value: 'copy',
+      type: PgMenuItem,
+    },
+    {
+      label: 'Paste',
+      value: 'paste',
+      type: PgMenuItem,
+    },
+    {
+      label: 'Rename',
+      value: 'rename',
+      type: PgMenuItem,
+    },
+    {
+      label: 'Delete',
+      value: 'delete',
+      type: PgMenuItem,
+    },
+    {
+      type: PgMenuDivider
+    },
+    {
+      label: 'Refresh',
+      value: 'refresh',
+      type: PgMenuItem,
+    },
+    {
+      label: 'Download',
+      value: 'download',
+      type: PgMenuItem,
+    }];
+    const result = await PgOverlayContextMenu.open({
+      source: this.$area,
+      x: e.clientX,
+      y: e.clientY,
+      value: this.#value,
+      filter: true,
+      items
+    });
+    if (result !== undefined) {
+      this.#value = result;
+    }
+    this.$result.textContent = JSON.stringify(result);
+  }
+}

package/pg/overlayContextMenu/overlayContextMenu.css

@@ -13,4 +13,18 @@
   left: anchor(left);
   min-width: 10rem;
   margin: var(--pg-overlay-menu-_y, 0) 0 0 var(--pg-overlay-menu-_x, 0);
+  position-visibility: always;
+  position-anchor: auto;
+}
+
+[part="filter"] {
+  display: none;
+  --pg-input-border-radius: 0.5rem;
+}
+
+[part="overlay"].filter [part="filter"] {
+  display: block;
+  margin-bottom: 0.25rem;
+  border-radius: 0.5rem;
+  box-shadow: var(--pg-menu-box-shadow, none);
 }

package/pg/overlayContextMenu/overlayContextMenu.html

@@ -1,3 +1,4 @@
-<div part="overlay">
-  <pg-menu part="menu"></pg-menu>
-</div>
+<div part="overlay">
+  <pg-input-text part="filter" placeholder="Filter"></pg-input-text>
+  <pg-menu part="menu"></pg-menu>
+</div>

package/pg/overlayContextMenu/overlayContextMenu.ts

@@ -1,5 +1,6 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
 
+import PgInputText from '../inputText/inputText';
 import PgMenu from '../menu/menu';
 import PgOverlay from '../overlay/overlay';
 
@@ -57,11 +58,14 @@ export default class PgOverlayContextMenu extends PgOverlay {
     // ToDo: update to CSS Variables
     this.$overlay.style.setProperty('--pg-overlay-menu-_x', `${x}px`);
     this.$overlay.style.setProperty('--pg-overlay-menu-_y', `${y}px`);
-    // Focus
-    this.$menu.focus(0);
     // Should return focus
     this.#handleDown = this.#down.bind(this);
     document.addEventListener('pointerdown', this.#handleDown);
+    // Rendering children is after parent's connectedCallback
+    queueMicrotask(() => {
+      // Focus
+      this.$menu.focus(0);
+    });
   }
 
   #ignore = false;

package/pg/overlayMenu/overlayMenu.css

@@ -8,9 +8,11 @@
   border: 0;
   background: transparent;
   --pg-menu-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
-  top: calc(anchor(bottom) - 0.25rem);
+  top: calc(anchor(bottom) - 1px);
   left: anchor(left);
   min-width: calc(anchor-size(width) + calc(2 * var(--pg-menu-padding, 0.25rem)));
   translate: var(--pg-overlay-menu-_x, 0) var(--pg-overlay-menu-_y, 0);
   overflow: visible;
+  position-visibility: always;
+  position-anchor: auto;
 }

package/pg/overlayMenu/overlayMenu.ts

@@ -19,6 +19,7 @@ export default class PgOverlayMenu extends PgOverlay {
   @Prop() default: any = null;
   @Prop() items: any[] = [];
   @Prop() value: any = null;
+  @Prop() preventFocus: boolean = false;
 
   render(changes) {
 
@@ -27,11 +28,12 @@ export default class PgOverlayMenu extends PgOverlay {
   connectedCallback() {
     this.$menu.items = this.items;
     this.$menu.addEventListener('select', this.#handleSelect.bind(this));
+    this.$menu.addEventListener('close', this.#handleMenuClose.bind(this));
     this.$overlay.popover = 'auto';
     if (this.source !== null) {
       // @ts-ignore
       this.$overlay.showPopover({
-        source: this.source
+        source: this.source,
       });
     }
     this.$overlay.addEventListener('toggle', this.#toggle.bind(this));
@@ -46,7 +48,9 @@ export default class PgOverlayMenu extends PgOverlay {
       ? 0
       : this.items.findIndex(x => x.value === value);
     // Focus
-    this.$menu.focus(index);
+    if (!this.preventFocus) {
+      this.$menu.focus(index);
+    }
   }
 
   #toggle(e: ToggleEvent) {
@@ -68,4 +72,9 @@ export default class PgOverlayMenu extends PgOverlay {
     });
     this.source?.focus();
   }
+
+  #handleMenuClose() {
+    this.close();
+    this.source?.focus();
+  }
 }

package/pg/overlayMenu/overlayMenu.ts.tmp.44252.9bb22fd59ede

@@ -0,0 +1,80 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgMenu from '../menu/menu';
+import PgOverlay from '../overlay/overlay';
+
+import template from './overlayMenu.html';
+import style from './overlayMenu.css';
+
+@Component({
+  selector: 'pg-overlay-menu',
+  template,
+  style
+})
+export default class PgOverlayMenu extends PgOverlay {
+  @Part() $overlay: HTMLDivElement;
+  @Part() $menu: PgMenu;
+
+  @Prop() source: HTMLElement | null = null;
+  @Prop() default: any = null;
+  @Prop() items: any[] = [];
+  @Prop() value: any = null;
+  @Prop() preventFocus: boolean = false;
+
+  render(changes) {
+
+  }
+
+  connectedCallback() {
+    this.$menu.items = this.items;
+    this.$menu.addEventListener('select', this.#handleSelect.bind(this));
+    this.$menu.addEventListener('close', this.#handleMenuClose.bind(this));
+    this.$overlay.popover = 'auto';
+    if (this.source !== null) {
+      // @ts-ignore
+      this.$overlay.showPopover({
+        source: this.source
+      });
+    }
+    this.$overlay.addEventListener('toggle', this.#toggle.bind(this));
+    // Position
+    const rect = this.source?.getBoundingClientRect();
+    let x = 0, y = 0;
+    const value = this.value === null || typeof this.value !== 'object'
+      ? this.value
+      : this.value.value;
+    // value is an item in the items list
+    const index = this.value === null
+      ? 0
+      : this.items.findIndex(x => x.value === value);
+    // Focus
+    if (!this.preventFocus) {
+      this.$menu.focus(index);
+    }
+  }
+
+  #toggle(e: ToggleEvent) {
+    if (e.newState === 'closed') {
+      this.close();
+      this.source?.focus();
+    }
+  }
+
+  disconnectedCallback() {
+  }
+
+  #handleSelect(e: any) {
+    // e.detail.item.index = e.detail.index;
+    const { indexes, item } = e.detail;
+    this.close({
+      indexes,
+      item
+    });
+    this.source?.focus();
+  }
+
+  #handleMenuClose() {
+    this.close();
+    this.source?.focus();
+  }
+}

package/pg/overlaySelectMenu/overlaySelectMenu.css

@@ -14,4 +14,6 @@
   min-width: calc(anchor-size(width) + calc(2 * var(--pg-menu-padding, 0.25rem)));
   margin: var(--pg-overlay-menu-_y, 0) 0 0 var(--pg-overlay-menu-_x, 0);
   overflow: visible;
+  position-visibility: always;
+  position-anchor: auto;
 }

package/pg/overlaySubMenu/overlaySubMenu.css

@@ -9,18 +9,20 @@
   background: transparent;
   overflow: visible;
   --pg-menu-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
-  top: calc(anchor(top) - 0.25rem);
-  left: calc(anchor(right) - 0.25rem);
+  top: calc(anchor(top) - 0.25rem - 1px);
+  left: calc(anchor(right) - 0.125rem - 1px);
   translate: var(--pg-overlay-menu-_x, 0) var(--pg-overlay-menu-_y, 0);
   position-try-fallbacks: --custom-right, --custom-left;
+  position-visibility: always;
+  position-anchor: auto;
 }
 
 @position-try --custom-right {
-  top: calc(anchor(top) - 0.25rem);
-  left: calc(anchor(right) - 0.25rem);
+  top: calc(anchor(top) - 0.25rem - 1px);
+  left: calc(anchor(right) - 0.125rem - 1px);
 }
 
 @position-try --custom-left {
-  top: calc(anchor(top) - 0.25rem);
-  left: calc(anchor(left) - anchor-size(width) + 0.25rem);
+  top: calc(anchor(top) - 0.25rem - 1px);
+  left: calc(anchor(left) - anchor-size(width) + 0.25rem - 1px);
 }

package/pg/poco/README.md

@@ -0,0 +1,22 @@
+# `<pg-poco>`
+
+The `<pg-poco>` component allows creating an emulator that simulates the draw commands for the Moddable SDK.
+
+## Usage
+
+See the demo for examples.
+
+## Timer
+
+Equivalent to `setInterval`.
+
+```typescript
+const id = Timer.set(() => {
+
+// delay, interval
+}, 1000, 1000);
+
+// Timer.clear(id);
+```
+
+For `setTimeout` leave off the `interval` value or set it to `0`.

package/pg/poco/__examples__/basic/basic.html

@@ -0,0 +1,11 @@
+<div class="example">
+  <div style="box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.3);width:min-content;margin-bottom: 0.5rem;display: flex;">
+    <pg-poco part="poco"></pg-poco>
+  </div>
+  <label>Demo:
+    <select part="list"></select>
+  </label>
+  <textarea part="code" rows="20" spellcheck="false" style="margin-top:0.5rem;width:calc(100% - 1rem);padding:0.5rem;border-radius:0.5rem;"></textarea>
+  <button part="run">Run</button>
+  <pre part="error" style="padding: 0.5rem;border: 1px solid rgb(128 0 0);border-radius: 0.25rem;background: rgba(128, 0, 0, 0.1);"></pre>
+</div>

package/pg/poco/__examples__/basic/basic.ts

@@ -0,0 +1,95 @@
+import { Component, Part } from '@pictogrammers/element';
+
+import PgPoco from '../../poco';
+import { demos } from './examples';
+
+import template from './basic.html';
+import { mockCharmanderBMP, mockMyFont, mockMyFontBMP } from './myFont';
+
+function dedent(str) {
+  const lines = str.split("\n");
+  const nonEmpty = lines.filter(l => l.trim().length > 0);
+  if (!nonEmpty.length) return str.trim();
+  const minIndent = Math.min(...nonEmpty.map(l => l.match(/^(\s*)/)[1].length));
+  return lines.map(l => l.slice(minIndent)).join("\n").trim();
+}
+
+@Component({
+  selector: 'x-pg-poco-basic',
+  template,
+})
+export default class XPgPocoBasic extends HTMLElement {
+  @Part() $poco: PgPoco;
+  @Part() $list: HTMLSelectElement;
+  @Part() $code: HTMLTextAreaElement;
+  @Part() $run: HTMLButtonElement;
+  @Part() $error: HTMLPreElement;
+
+  connectedCallback() {
+    demos.forEach((demo: any, index: number) => {
+      const newOption = new Option(demo.label, `${index}`);
+      this.$list.add(newOption);
+    });
+    this.$list.addEventListener('change', (e: any) => {
+      this.$code.value = dedent(demos[e.target.value].run);
+    });
+    this.$poco.height = 400;
+    this.$poco.height = 240;
+    this.$code.value = dedent(demos[0].run);
+    this.$run.addEventListener('click', this.handleRun.bind(this));
+    this.$error.style.display = 'none';
+    // Resources
+    this.$poco.setResourceBMPCanvas('colorBitmap.bmp', 40, 40, (ctx, w, h) => {
+      ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, w, h);
+      ctx.fillStyle = "#000"; ctx.fillRect(4, 4, 32, 32);
+      ctx.fillStyle = "#fff"; ctx.fillRect(8, 8, 24, 24);
+      ctx.fillStyle = "#000"; ctx.fillRect(12, 12, 16, 16);
+      ctx.fillStyle = "#fff"; ctx.fillRect(16, 16, 8, 8);
+    });
+    this.$poco.setResourceBMPCanvas('monoBitmap.bmp', 32, 32, (ctx, w, h) => {
+      ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, w, h);
+      ctx.strokeStyle = "#000"; ctx.lineWidth = 1;
+      ctx.strokeRect(0.5, 0.5, w - 1, h - 1);
+      ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(w / 2, h / 2); ctx.lineTo(w, 0); ctx.stroke();
+      ctx.beginPath(); ctx.moveTo(0, h); ctx.lineTo(w / 2, h / 2); ctx.lineTo(w, h); ctx.stroke();
+    });
+    this.$poco.setResourceBMPCanvas('grayBitmap.bmp', 32, 32, (ctx, w, h) => {
+      const grad = ctx.createRadialGradient(w / 2, h / 2, 2, w / 2, h / 2, w / 2);
+      grad.addColorStop(0, "#fff");
+      grad.addColorStop(1, "#000");
+      ctx.fillStyle = grad;
+      ctx.fillRect(0, 0, w, h);
+    });
+    this.$poco.setResourceBMPCanvas('circleMask.bmp', 40, 40, (ctx, w, h) => {
+      ctx.fillStyle = "#000"; ctx.fillRect(0, 0, w, h);
+      const grad = ctx.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, w / 2);
+      grad.addColorStop(0, "#fff");
+      grad.addColorStop(1, "#000");
+      ctx.fillStyle = grad;
+      ctx.beginPath(); ctx.arc(w / 2, h / 2, w / 2, 0, Math.PI * 2); ctx.fill();
+    });
+    this.$poco.setResourceBMPCanvas('patternBitmap.bmp', 30, 30, (ctx, w, h) => {
+      const size = 10;
+      for (let r = 0; r < h; r += size)
+        for (let c = 0; c < w; c += size) {
+          ctx.fillStyle = ((r + c) / size % 2 === 0) ? "#000" : "#fff";
+          ctx.fillRect(c, r, size, size);
+        }
+    });
+    // Charmander
+    this.$poco.setResourceBMP('charmander.png', mockCharmanderBMP);
+    // Resources - Font
+    this.$poco.setResourceBMP('myFont.png', mockMyFontBMP);
+    this.$poco.setResourceBMFJSON('myFont.fnt', mockMyFont);
+    // Error handler
+    this.$poco.addEventListener('error', (e: any) => {
+      this.$error.textContent = e.detail.message;
+      this.$error.style.display = "block";
+    });
+  }
+
+  handleRun() {
+    this.$error.style.display = "none";
+    this.$poco.run(this.$code.value);
+  }
+}