various updates

Author: Templarian

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "@pictogrammers/components",
   "type": "module",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "license": "MIT",
   "author": "Austin Andrews",
   "scripts": {

src/pg/app/app.css

@@ -4,8 +4,8 @@
 
 [part=grid] {
   display: grid;
-  grid-template-columns: auto 0.5rem 1fr;
-  grid-template-rows: auto 1fr;
+  grid-template-columns: auto 0.5rem minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
   height: 100%;
 }
 

src/pg/inputPixelEditor/__examples__/basic/basic.ts

@@ -142,7 +142,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
           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];
+          const path = (content.match(/\sd="([^"]+)"/) as string[])[1];
           // Render path
           console.log(path, size[1], size[2]);
           this.$input.applyTemplate(maskToBitmap(path, width, height));

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -447,15 +447,6 @@ export default class PgInputPixelEditor extends HTMLElement {
   }
 
   #pointerOutside = false;
-  handlePointerUpGlobal() {
-    if (this.#pointerOutside) {
-      this.handlePointerUp({
-        clientX: 100,
-        clientY: 100
-      } as any);
-      this.cleanupPointerGlobal();
-    }
-  }
 
   cleanupPointerGlobal() {
     document.removeEventListener('pointermove', this.#handlePointerMoveCache);
@@ -513,6 +504,13 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#y = -1;
     this.#isPressed = false;
     this.cleanupPointerGlobal();
+    if (this.#pointerOutside) {
+      this.#isEditing = false;
+      // base layer to main canvas
+      this.#context.drawImage(this.#baseLayer, 0, 0);
+      // editing layer to main canvas
+      this.#context.drawImage(this.#isEditing ? this.#editLayer : this.#noEditLayer, 0, 0);
+    }
   }
 
   handlePointerMove(event: PointerEvent) {

src/pg/menu/__examples__/basic/basic.ts

@@ -27,7 +27,11 @@ export default class XPgMenuBasic extends HTMLElement {
     },
     {
       label: 'Item 3',
-      value: 'item3'
+      value: 'item3',
+      items: [{
+        label: 'Item 4',
+        value: 'item4'
+      }]
     }];
     this.$menu.addEventListener('select', this.#handleSelect.bind(this));
   }

src/pg/menuItem/menuItem.css

@@ -77,10 +77,13 @@
   background: var(--pg-focus-background-color, rgb(79, 143, 249, 0.1));
 }
 
+[part=label].more {
+  padding-right: 1.5rem;
+}
 
 [part=label].more::after {
   position: absolute;
-  translate: -0.5rem 0;
+  translate: -0.25rem 0;
   right: 0;
   content: var(--pg-menu-item-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79)' /></svg>"));
   width: 1.5rem;

src/pg/menuItem/menuItem.ts

@@ -1,5 +1,7 @@
 import { Component, Prop, Part, forEach } from '@pictogrammers/element';
 
+import PgOverlaySubMenu from '../overlaySubMenu/overlaySubMenu';
+
 import template from './menuItem.html';
 import style from './menuItem.css';
 
@@ -36,13 +38,41 @@ export default class PgMenuItem extends HTMLElement {
         this.dispatchEvent(new CustomEvent('hasCheck', { bubbles: true }));
       }
     }
+    if (changes.items) {
+      this.$label.classList.toggle('more', this.items.length > 0);
+    }
   }
 
   connectedCallback() {
-    this.$label.addEventListener('click', () => {
-      this.dispatchEvent(new CustomEvent('select', {
-        detail: { index: this.index }
-      }));
+    this.$label.addEventListener('click', async () => {
+      if (this.items.length > 0) {
+        const result = await PgOverlaySubMenu.open({
+          source: this.$label,
+          x: 0,
+          y: 0,
+          value: this.items[0],
+          items: this.items
+        });
+        if (result === null) {
+          this.focus();
+        } else if (result) {
+          this.dispatchEvent(new CustomEvent('select', {
+            detail: {
+              item: result
+            }
+          }));
+        } else {
+          this.dispatchEvent(new CustomEvent('close', {
+            detail: {
+              depth: -1
+            }
+          }));
+        }
+      } else {
+        this.dispatchEvent(new CustomEvent('select', {
+          detail: { index: this.index }
+        }));
+      }
     });
     this.$label.addEventListener('keydown', (e: KeyboardEvent) => {
       switch (e.key) {

src/pg/menuItemIcon/menuItemIcon.ts

@@ -1,6 +1,6 @@
 import { Component, Prop, Part } from '@pictogrammers/element';
 
-import PgOverlaySubMenu from '../overlaySubMenu/overlaySubMenu'
+import PgOverlaySubMenu from '../overlaySubMenu/overlaySubMenu';
 import PgIcon from '../icon/icon';
 
 import template from './menuItemIcon.html';

src/pg/overlaySubMenu/overlaySubMenu.css

@@ -11,7 +11,6 @@
   --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);
-  min-width: 10rem;
   translate: var(--pg-overlay-menu-_x, 0) var(--pg-overlay-menu-_y, 0);
   position-try-fallbacks: --custom-right, --custom-left;
 }