@pictogrammers/components 0.4.0 → 0.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@pictogrammers/components",
     "type": "module",
-    "version": "0.4.0",
+    "version": "0.4.2",
     "license": "MIT",
     "author": "Austin Andrews",
     "scripts": {

package/pg/app/app.css

@@ -54,6 +54,7 @@
 
 [part=side] {
   display: flex;
+  flex-direction: column;
   grid-column: 1;
   grid-row: 2;
   min-width: 10rem;
@@ -61,7 +62,6 @@
 }
 
 slot[name=main] {
-  display: flex;
   grid-column: 3;
   grid-row: 2;
 }
@@ -84,6 +84,7 @@ slot[name=main] {
 
 [part=home] {
   display: flex;
+  flex-direction: column;
   grid-column: 1 / 4;
   grid-row: 2;
   background-color: #fff;

package/pg/inputPixelEditor/inputPixelEditor.ts

@@ -146,14 +146,6 @@ export default class PgInputPixelEditor extends HTMLElement {
       'pointerdown',
       this.handlePointerDown.bind(this)
     );
-    this.$canvas.addEventListener(
-      'pointerup',
-      this.handlePointerUp.bind(this)
-    );
-    this.$canvas.addEventListener(
-      'pointermove',
-      this.handlePointerMove.bind(this)
-    );
     this.$canvas.addEventListener(
       'pointerenter',
       this.handlePointerEnter.bind(this)
@@ -266,11 +258,13 @@ export default class PgInputPixelEditor extends HTMLElement {
   };
 
   #setPixel(x: number, y: number, color: number) {
-    if (x > this.width) {
-      throw new Error(`Invalid x; ${x} > ${this.width}`);
+    if (x >= this.width || x < 0) {
+      return;
+      // throw new Error(`Invalid x; ${x} > ${this.width} or ${x} < 0`);
     }
-    if (y > this.height) {
-      throw new Error(`Invalid y; ${y} > ${this.height}`);
+    if (y >= this.height || y < 0) {
+      return;
+      // throw new Error(`Invalid y; ${y} > ${this.height} or ${x} < 0`);
     }
     const totalSize = this.size + this.gridSize;
     // Edit Layer
@@ -306,7 +300,6 @@ export default class PgInputPixelEditor extends HTMLElement {
       x * totalSize, y * totalSize, this.size + 2, this.size + 2,
       x * totalSize, y * totalSize, this.size + 2, this.size + 2
     );
-    console.log('draw pixel(x, y, color, data):', x, y, color, this.#data[this.#layer][y][x]);
     // Verify this is the only place setting pixel data!
     this.#data[this.#layer][y][x] = color;
     this.#delayedChange();
@@ -411,6 +404,9 @@ export default class PgInputPixelEditor extends HTMLElement {
     event?.preventDefault();
   }
 
+  #handlePointerMoveCache;
+  #handlePointerUpCache;
+
   handlePointerDown(event: MouseEvent) {
     if (event.buttons !== 1 && event.buttons !== 32) {
       event.preventDefault();
@@ -443,6 +439,28 @@ export default class PgInputPixelEditor extends HTMLElement {
         break;
     }
     console.log(this.#inputMode, newX, newY);
+    // track movement
+    this.#handlePointerMoveCache = this.handlePointerMove.bind(this);
+    document.addEventListener('pointermove', this.#handlePointerMoveCache);
+    // pointer outside
+    this.#handlePointerUpCache = this.handlePointerUp.bind(this);
+    document.addEventListener('pointerup', this.#handlePointerUpCache);
+  }
+
+  #pointerOutside = false;
+  handlePointerUpGlobal() {
+    if (this.#pointerOutside) {
+      this.handlePointerUp({
+        clientX: 100,
+        clientY: 100
+      } as any);
+      this.cleanupPointerGlobal();
+    }
+  }
+
+  cleanupPointerGlobal() {
+    document.removeEventListener('pointermove', this.#handlePointerMoveCache);
+    document.removeEventListener('pointerup', this.#handlePointerUpCache);
   }
 
   handlePointerUp(event: MouseEvent) {
@@ -450,11 +468,11 @@ export default class PgInputPixelEditor extends HTMLElement {
     const totalSize = this.size + this.gridSize;
     let newX = Math.floor((event.clientX - rect.left) / totalSize);
     let newY = Math.floor((event.clientY - rect.top) / totalSize);
-    if (newX >= this.width) { newX = this.width - 1; }
-    if (newY >= this.height) { newY = this.height - 1; }
-    if (this.#startX === -1 && this.#startY === -1) {
-      return;
-    }
+    //if (newX >= this.width) { newX = this.width - 1; }
+    //if (newY >= this.height) { newY = this.height - 1; }
+    //if (this.#startX === -1 && this.#startY === -1) {
+    //  return;
+    //}
     // Single Tap
     if (newX === this.#startX && newY === this.#startY && this.#startColor === 1) {
       switch (this.#inputMode) {
@@ -495,6 +513,7 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#x = -1;
     this.#y = -1;
     this.#isPressed = false;
+    this.cleanupPointerGlobal();
   }
 
   handlePointerMove(event: PointerEvent) {
@@ -518,7 +537,7 @@ export default class PgInputPixelEditor extends HTMLElement {
         for (const evt of events) {
           let tX = Math.floor((evt.clientX - rect.left) / totalSize);
           let tY = Math.floor((evt.clientY - rect.top) / totalSize);
-          if (tX >= this.width || tY >= this.height || (tX === x && tY === y)) {
+          if (tX === x && tY === y) {
             continue;
           }
           points.push([tX, tY]);
@@ -527,8 +546,6 @@ export default class PgInputPixelEditor extends HTMLElement {
         let newX = Math.floor((event.clientX - rect.left) / totalSize);
         let newY = Math.floor((event.clientY - rect.top) / totalSize);
         if (newX === x && newY === y) { return; }
-        if (newX >= this.width) { newX = this.width - 1; }
-        if (newY >= this.height) { newY = this.height - 1; }
         points.push([newX, newY]);
       }
       // Is Eraser
@@ -575,6 +592,7 @@ export default class PgInputPixelEditor extends HTMLElement {
       // editing layer to main canvas
       this.#context.drawImage(this.#isEditing ? this.#editLayer : this.#noEditLayer, 0, 0);
     }
+    this.#pointerOutside = false;
   }
 
   handlePointerLeave(event: MouseEvent) {
@@ -584,6 +602,8 @@ export default class PgInputPixelEditor extends HTMLElement {
       this.#context.drawImage(this.#baseLayer, 0, 0);
       // editing layer to main canvas
       this.#context.drawImage(this.#isEditing ? this.#editLayer : this.#noEditLayer, 0, 0);
+    } else if (this.#isEditing) {
+      this.#pointerOutside = true;
     }
   }
 

package/pg/markdown/markdown.css

@@ -1,8 +1,12 @@
 :host {
-  display: block;
+  display: contents;
   color: #453C4F;
 }
 
+[part=content] {
+  display: contents;
+}
+
 h1 {
   font-size: 2rem;
   margin-top: 1rem;

package/pg/tree/index.ts

@@ -1,3 +1,5 @@
-import PgTree from './tree';
-
-export default PgTree;
+import PgTree from './tree';
+
+export { SelectedTreeItem } from './tree';
+
+export default PgTree;

package/pg/treeItem/treeItem.css

@@ -18,6 +18,7 @@
   font-family: var(--pg-font-family);
   font-size: var(--pg-tree-item-font-size, 1rem);
 }
+
 [part=labelButton] {
   display: flex;
   background: transparent;
@@ -29,7 +30,13 @@
   font-family: var(--pg-font-family);
   font-size: var(--pg-tree-item-font-size, 1rem);
   margin: -0.25rem -0.25rem -0.25rem -0.25rem;
-  padding: 0 0.75rem 0 0.25rem;
+  padding: 0 0.25rem 0 0.25rem;
+}
+
+[part=label] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 [part=input] {
@@ -58,7 +65,7 @@
 }
 
 [part=item] {
-  grid-template-columns: min-content min-content auto min-content;
+  grid-template-columns: min-content min-content minmax(0, 1fr) min-content;
   grid-template-rows: auto;
 }
 [part=item] [part=selected] {

package/pgApp.js

@@ -1 +1 @@
-(()=>{"use strict";var e={314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",o=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),o&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),o&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,o,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(o)for(var s=0;s<this.length;s++){var l=this[s][0];null!=l&&(a[l]=!0)}for(var c=0;c<e.length;c++){var d=[].concat(e[c]);o&&a[d[0]]||(void 0!==i&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),r&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=r):d[4]="".concat(r)),t.push(d))}},t}},601:e=>{e.exports=function(e){return e[1]}},801:(e,t,n)=>{n.d(t,{A:()=>l});var o=n(601),r=n.n(o),i=n(314),a=n.n(i)()(r());a.push([e.id,":host {\n  display: contents;\n}\n\n[part=grid] {\n  display: grid;\n  grid-template-columns: auto 0.5rem 1fr;\n  grid-template-rows: auto 1fr;\n  height: 100%;\n}\n\n[part=header] {\n  display: flex;\n  grid-column: 1 / 4;\n  grid-row: 1;\n  border-bottom: 2px solid #453C4F;\n}\n\n[part=header] > button {\n  display: flex;\n  border: 0;\n  padding: 0.5rem;\n  background-color: transparent;\n  border-right: 1px solid rgba(69, 60, 79, 0.5);\n  outline: none;\n}\n\n[part=header] > button:hover {\n  background-color: rgba(69, 60, 79, 0.10);\n}\n\n[part=header] > button:focus-visible {\n  position: relative;\n}\n\n[part=header] > button:focus-visible::before {\n  pointer-events: none;\n  content: '';\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  box-shadow: 0 0 0 3px var(--pg-focus-color, rgba(79, 143, 249, 0.5));\n}\n\n[part=header] > button.selected {\n  --pg-icon-color: rgb(79, 143, 249);\n}\n\n[part=header] > button.selected:hover {\n  background-color: #fff;\n}\n\n[part=side] {\n  display: flex;\n  grid-column: 1;\n  grid-row: 2;\n  min-width: 10rem;\n  max-width: 20rem;\n}\n\nslot[name=main] {\n  display: flex;\n  grid-column: 3;\n  grid-row: 2;\n}\n\n[part=resize] {\n  display: flex;\n  grid-column: 2;\n  grid-row: 2;\n  border: 0;\n  padding: 0;\n  cursor: ew-resize;\n  border-left: 1px solid #453C4F;\n  border-right: 1px solid #453C4F;\n  background-color: transparent;\n}\n\n[part=resize].dragging {\n  background-color: var(--pg-focus-color, rgb(79, 143, 249, 0.5))\n}\n\n[part=home] {\n  display: flex;\n  grid-column: 1 / 4;\n  grid-row: 2;\n  background-color: #fff;\n  position: relative;\n}\n\n[part=home]::before {\n  content: ' ';\n  position: absolute;\n  top: -2px;\n  width: 2.5rem;\n  height: 2px;\n  background-color: #fff;\n}\n\n[part=home].selected {\n  background-color: #fff;\n}\n\n.hide {\n  display: none;\n}",""]);var s=new CSSStyleSheet;s.replaceSync(a.toString());const l=s}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var i=t[o]={id:o,exports:{}};return e[o](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Symbol("addObserver"),Symbol("removeObserver"),Symbol("getObservers"),Symbol("isProxy"),Symbol("getTarget");const o=new Map;window.observers=o;Error;Symbol("index");const r=Symbol("init"),i=Symbol("template"),a=Symbol("style"),s=Symbol("parent");function l(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function c(e={}){return function(t,n){if("class"!==n.kind)throw new Error("@Component() can only decorate a class");var o,c;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[s]||t.prototype[s][t.prototype[s].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[s]=[t.prototype],t.prototype[a]=e.style?[e.style]:[],t.prototype[i]=e.template||""):(t.prototype[s].push(t.prototype),t.prototype[a].push(e.style),t.prototype[i]=(o=t.prototype[i],(c=e.template||null)&&c.match(/<parent\/>/)?c.replace(/<parent\/>/,o):`${o}${c||""}`));const d=t.prototype.connectedCallback||(()=>{}),p=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[r]||void 0!==e.template||void 0!==e.style)if(this[r]){if(this[r]&&e.style);else if(this[r]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=t.prototype[i]||"";const n=document.importNode(e.content,!0),o=this.attachShadow({mode:"open"});o.adoptedStyleSheets=t.prototype[a].map((e=>{if(e instanceof CSSStyleSheet)return e;var t=new CSSStyleSheet;return t.replaceSync(e.toString()),t})),o.appendChild(n)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const n=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&n.add(e.localName);const o=Array.from(n.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),c=()=>{this[s].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[l(t)]=!0,e)),{}):{})}))};0===o.length?(this[r]=!0,d.call(this),c()):Promise.all(o).then((()=>{this[r]=!0,d.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));c()}))},t.prototype.disconnectedCallback=function(){p.call(this)},t.prototype.attributeChangedCallback=function(e,t,n){this[l(e)]=n},n.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${n.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,t)}}))}}Symbol("transmute");function d(){return function(e,t){const n=t.name,o=n.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,n,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${o}]`))}})}))}}Symbol("hasProxy");Symbol("meta");var p=n(801),u=function(e,t,n,o,r,i){function a(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=o.kind,c="getter"===l?"get":"setter"===l?"set":"value",d=!t&&e?o.static?e:e.prototype:null,p=t||(d?Object.getOwnPropertyDescriptor(d,o.name):{}),u=!1,h=n.length-1;h>=0;h--){var m={};for(var f in o)m[f]="access"===f?{}:o[f];for(var f in o.access)m.access[f]=o.access[f];m.addInitializer=function(e){if(u)throw new TypeError("Cannot add initializers after decoration has completed");i.push(a(e||null))};var g=(0,n[h])("accessor"===l?{get:p.get,set:p.set}:p[c],m);if("accessor"===l){if(void 0===g)continue;if(null===g||"object"!=typeof g)throw new TypeError("Object expected");(s=a(g.get))&&(p.get=s),(s=a(g.set))&&(p.set=s),(s=a(g.init))&&r.unshift(s)}else(s=a(g))&&("field"===l?r.unshift(s):p[c]=s)}d&&Object.defineProperty(d,o.name,p),u=!0},h=function(e,t,n){for(var o=arguments.length>2,r=0;r<t.length;r++)n=o?t[r].call(e,n):t[r].call(e);return o?n:void 0};(()=>{let e,t,n,o,r,i,a=[c({selector:"pg-app",style:p.A,template:'<div part="grid"> <header part="header"> <button part="logo"> <slot name="icon"></slot> </button> <slot name="top"></slot> </header> <div part="side"> <slot name="side"></slot> </div> <button part="resize"></button> <slot name="main"></slot> <div part="home" class="hide"> <slot name="home"></slot> </div> </div>'})],s=[],l=HTMLElement,m=[],f=[],g=[],b=[],y=[],v=[],w=[],S=[];(class extends l{static{t=this}static{const c="function"==typeof Symbol&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;n=[d()],o=[d()],r=[d()],i=[d()],u(null,null,n,{kind:"field",name:"$logo",static:!1,private:!1,access:{has:e=>"$logo"in e,get:e=>e.$logo,set:(e,t)=>{e.$logo=t}},metadata:c},m,f),u(null,null,o,{kind:"field",name:"$home",static:!1,private:!1,access:{has:e=>"$home"in e,get:e=>e.$home,set:(e,t)=>{e.$home=t}},metadata:c},g,b),u(null,null,r,{kind:"field",name:"$side",static:!1,private:!1,access:{has:e=>"$side"in e,get:e=>e.$side,set:(e,t)=>{e.$side=t}},metadata:c},y,v),u(null,null,i,{kind:"field",name:"$resize",static:!1,private:!1,access:{has:e=>"$resize"in e,get:e=>e.$resize,set:(e,t)=>{e.$resize=t}},metadata:c},w,S),u(null,e={value:t},a,{kind:"class",name:t.name,metadata:c},null,s),t=e.value,c&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c}),h(t,s)}$logo=h(this,m,void 0);$home=(h(this,f),h(this,g,void 0));$side=(h(this,b),h(this,y,void 0));$resize=(h(this,v),h(this,w,void 0));connectedCallback(){this.$logo.addEventListener("click",this.#e.bind(this)),this.$resize.addEventListener("pointerdown",this.#t.bind(this))}#e(){this.$logo.classList.toggle("selected"),this.$home.classList.toggle("hide")}#t(e){const{clientX:t}=e;this.$resize.classList.add("dragging");const n=this.$side.getBoundingClientRect().width;let o=t;const r=e=>{const t=o-e.clientX,r=n-t;this.$side.style.width=`${r}px`},i=()=>{this.$resize.classList.remove("dragging"),document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",i)};document.addEventListener("pointermove",r),document.addEventListener("pointerup",i)}constructor(){super(...arguments),h(this,S)}})})()})();
+(()=>{"use strict";var e={314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",o=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),o&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),o&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,o,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(o)for(var s=0;s<this.length;s++){var l=this[s][0];null!=l&&(a[l]=!0)}for(var c=0;c<e.length;c++){var d=[].concat(e[c]);o&&a[d[0]]||(void 0!==i&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),r&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=r):d[4]="".concat(r)),t.push(d))}},t}},601:e=>{e.exports=function(e){return e[1]}},801:(e,t,n)=>{n.d(t,{A:()=>l});var o=n(601),r=n.n(o),i=n(314),a=n.n(i)()(r());a.push([e.id,":host {\n  display: contents;\n}\n\n[part=grid] {\n  display: grid;\n  grid-template-columns: auto 0.5rem 1fr;\n  grid-template-rows: auto 1fr;\n  height: 100%;\n}\n\n[part=header] {\n  display: flex;\n  grid-column: 1 / 4;\n  grid-row: 1;\n  border-bottom: 2px solid #453C4F;\n}\n\n[part=header] > button {\n  display: flex;\n  border: 0;\n  padding: 0.5rem;\n  background-color: transparent;\n  border-right: 1px solid rgba(69, 60, 79, 0.5);\n  outline: none;\n}\n\n[part=header] > button:hover {\n  background-color: rgba(69, 60, 79, 0.10);\n}\n\n[part=header] > button:focus-visible {\n  position: relative;\n}\n\n[part=header] > button:focus-visible::before {\n  pointer-events: none;\n  content: '';\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  box-shadow: 0 0 0 3px var(--pg-focus-color, rgba(79, 143, 249, 0.5));\n}\n\n[part=header] > button.selected {\n  --pg-icon-color: rgb(79, 143, 249);\n}\n\n[part=header] > button.selected:hover {\n  background-color: #fff;\n}\n\n[part=side] {\n  display: flex;\n  flex-direction: column;\n  grid-column: 1;\n  grid-row: 2;\n  min-width: 10rem;\n  max-width: 20rem;\n}\n\nslot[name=main] {\n  grid-column: 3;\n  grid-row: 2;\n}\n\n[part=resize] {\n  display: flex;\n  grid-column: 2;\n  grid-row: 2;\n  border: 0;\n  padding: 0;\n  cursor: ew-resize;\n  border-left: 1px solid #453C4F;\n  border-right: 1px solid #453C4F;\n  background-color: transparent;\n}\n\n[part=resize].dragging {\n  background-color: var(--pg-focus-color, rgb(79, 143, 249, 0.5))\n}\n\n[part=home] {\n  display: flex;\n  flex-direction: column;\n  grid-column: 1 / 4;\n  grid-row: 2;\n  background-color: #fff;\n  position: relative;\n}\n\n[part=home]::before {\n  content: ' ';\n  position: absolute;\n  top: -2px;\n  width: 2.5rem;\n  height: 2px;\n  background-color: #fff;\n}\n\n[part=home].selected {\n  background-color: #fff;\n}\n\n.hide {\n  display: none;\n}",""]);var s=new CSSStyleSheet;s.replaceSync(a.toString());const l=s}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var i=t[o]={id:o,exports:{}};return e[o](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Symbol("addObserver"),Symbol("removeObserver"),Symbol("getObservers"),Symbol("isProxy"),Symbol("getTarget");const o=new Map;window.observers=o;Error;Symbol("index");const r=Symbol("init"),i=Symbol("template"),a=Symbol("style"),s=Symbol("parent");function l(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function c(e={}){return function(t,n){if("class"!==n.kind)throw new Error("@Component() can only decorate a class");var o,c;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[s]||t.prototype[s][t.prototype[s].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[s]=[t.prototype],t.prototype[a]=e.style?[e.style]:[],t.prototype[i]=e.template||""):(t.prototype[s].push(t.prototype),t.prototype[a].push(e.style),t.prototype[i]=(o=t.prototype[i],(c=e.template||null)&&c.match(/<parent\/>/)?c.replace(/<parent\/>/,o):`${o}${c||""}`));const d=t.prototype.connectedCallback||(()=>{}),p=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[r]||void 0!==e.template||void 0!==e.style)if(this[r]){if(this[r]&&e.style);else if(this[r]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=t.prototype[i]||"";const n=document.importNode(e.content,!0),o=this.attachShadow({mode:"open"});o.adoptedStyleSheets=t.prototype[a].map((e=>{if(e instanceof CSSStyleSheet)return e;var t=new CSSStyleSheet;return t.replaceSync(e.toString()),t})),o.appendChild(n)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const n=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&n.add(e.localName);const o=Array.from(n.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),c=()=>{this[s].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[l(t)]=!0,e)),{}):{})}))};0===o.length?(this[r]=!0,d.call(this),c()):Promise.all(o).then((()=>{this[r]=!0,d.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));c()}))},t.prototype.disconnectedCallback=function(){p.call(this)},t.prototype.attributeChangedCallback=function(e,t,n){this[l(e)]=n},n.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${n.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,t)}}))}}Symbol("transmute");function d(){return function(e,t){const n=t.name,o=n.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,n,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${o}]`))}})}))}}Symbol("hasProxy");Symbol("meta");var p=n(801),u=function(e,t,n,o,r,i){function a(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=o.kind,c="getter"===l?"get":"setter"===l?"set":"value",d=!t&&e?o.static?e:e.prototype:null,p=t||(d?Object.getOwnPropertyDescriptor(d,o.name):{}),u=!1,h=n.length-1;h>=0;h--){var m={};for(var f in o)m[f]="access"===f?{}:o[f];for(var f in o.access)m.access[f]=o.access[f];m.addInitializer=function(e){if(u)throw new TypeError("Cannot add initializers after decoration has completed");i.push(a(e||null))};var g=(0,n[h])("accessor"===l?{get:p.get,set:p.set}:p[c],m);if("accessor"===l){if(void 0===g)continue;if(null===g||"object"!=typeof g)throw new TypeError("Object expected");(s=a(g.get))&&(p.get=s),(s=a(g.set))&&(p.set=s),(s=a(g.init))&&r.unshift(s)}else(s=a(g))&&("field"===l?r.unshift(s):p[c]=s)}d&&Object.defineProperty(d,o.name,p),u=!0},h=function(e,t,n){for(var o=arguments.length>2,r=0;r<t.length;r++)n=o?t[r].call(e,n):t[r].call(e);return o?n:void 0};(()=>{let e,t,n,o,r,i,a=[c({selector:"pg-app",style:p.A,template:'<div part="grid"> <header part="header"> <button part="logo"> <slot name="icon"></slot> </button> <slot name="top"></slot> </header> <div part="side"> <slot name="side"></slot> </div> <button part="resize"></button> <slot name="main"></slot> <div part="home" class="hide"> <slot name="home"></slot> </div> </div>'})],s=[],l=HTMLElement,m=[],f=[],g=[],b=[],y=[],v=[],w=[],S=[];(class extends l{static{t=this}static{const c="function"==typeof Symbol&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;n=[d()],o=[d()],r=[d()],i=[d()],u(null,null,n,{kind:"field",name:"$logo",static:!1,private:!1,access:{has:e=>"$logo"in e,get:e=>e.$logo,set:(e,t)=>{e.$logo=t}},metadata:c},m,f),u(null,null,o,{kind:"field",name:"$home",static:!1,private:!1,access:{has:e=>"$home"in e,get:e=>e.$home,set:(e,t)=>{e.$home=t}},metadata:c},g,b),u(null,null,r,{kind:"field",name:"$side",static:!1,private:!1,access:{has:e=>"$side"in e,get:e=>e.$side,set:(e,t)=>{e.$side=t}},metadata:c},y,v),u(null,null,i,{kind:"field",name:"$resize",static:!1,private:!1,access:{has:e=>"$resize"in e,get:e=>e.$resize,set:(e,t)=>{e.$resize=t}},metadata:c},w,S),u(null,e={value:t},a,{kind:"class",name:t.name,metadata:c},null,s),t=e.value,c&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c}),h(t,s)}$logo=h(this,m,void 0);$home=(h(this,f),h(this,g,void 0));$side=(h(this,b),h(this,y,void 0));$resize=(h(this,v),h(this,w,void 0));connectedCallback(){this.$logo.addEventListener("click",this.#e.bind(this)),this.$resize.addEventListener("pointerdown",this.#t.bind(this))}#e(){this.$logo.classList.toggle("selected"),this.$home.classList.toggle("hide")}#t(e){const{clientX:t}=e;this.$resize.classList.add("dragging");const n=this.$side.getBoundingClientRect().width;let o=t;const r=e=>{const t=o-e.clientX,r=n-t;this.$side.style.width=`${r}px`},i=()=>{this.$resize.classList.remove("dragging"),document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",i)};document.addEventListener("pointermove",r),document.addEventListener("pointerup",i)}constructor(){super(...arguments),h(this,S)}})})()})();

package/pgInputPixelEditor.js

@@ -1 +1 @@
-(()=>{"use strict";var t={314:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var i="",s=void 0!==e[5];return e[4]&&(i+="@supports (".concat(e[4],") {")),e[2]&&(i+="@media ".concat(e[2]," {")),s&&(i+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),i+=t(e),s&&(i+="}"),e[2]&&(i+="}"),e[4]&&(i+="}"),i})).join("")},e.i=function(t,i,s,r,a){"string"==typeof t&&(t=[[null,t,void 0]]);var n={};if(s)for(var o=0;o<this.length;o++){var h=this[o][0];null!=h&&(n[h]=!0)}for(var l=0;l<t.length;l++){var c=[].concat(t[l]);s&&n[c[0]]||(void 0!==a&&(void 0===c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=a),i&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=i):c[2]=i),r&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=r):c[4]="".concat(r)),e.push(c))}},e}},601:t=>{t.exports=function(t){return t[1]}},713:(t,e,i)=>{i.d(e,{A:()=>h});var s=i(601),r=i.n(s),a=i(314),n=i.n(a)()(r());n.push([t.id,':host {\n  display: inline-flex;\n}\n\n[part="wrapper"] {\n  display: flex;\n  position: relative;\n  outline: 0;\n}\n\n[part="wrapper"]:focus-visible::before {\n  pointer-events: none;\n  content: \'\';\n  position: absolute;\n  top: -1px;\n  right: -1px;\n  bottom: -1px;\n  left: -1px;\n  border-radius: 0.125rem;\n  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));\n}\n\ncanvas {\n  touch-action: none;\n  user-select: none;\n  outline: 0;\n}',""]);var o=new CSSStyleSheet;o.replaceSync(n.toString());const h=o}},e={};function i(s){var r=e[s];if(void 0!==r)return r.exports;var a=e[s]={id:s,exports:{}};return t[s](a,a.exports,i),a.exports}i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var s in e)i.o(e,s)&&!i.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);const s=Symbol("addObserver"),r=Symbol("removeObserver"),a=Symbol("getObservers"),n=Symbol("isProxy"),o=Symbol("getTarget"),h=["fill","pop","push","reverse","shift","sort","splice","unshift"],l=new Map;function c(t){return new Proxy(t,{get(e,i){if("symbol"==typeof i){switch(i){case n:return!0;case o:return e;case a:return l.has(t);case s:return(e,i)=>{l.has(t)?l.get(t).has(e)?l.get(t).get(e).push(i):l.get(t).set(e,[i]):l.set(t,new Map([[e,[i]]]))};case r:return e=>{l.has(t)&&(l.get(t).delete(e),0===l.get(t).size&&l.delete(t))};case Symbol.toPrimitive:case Symbol.toStringTag:return Reflect.get(e,i)}throw new Error("Unsupported symbol")}if(i in e){if(!Number.isNaN(Number(i)))return"object"==typeof e[i]?c(e[i]):e[i];if("copyWithin"===i)throw new Error("Unsupported array method copyWithin");if(h.includes(i))return l.has(e)?function(){const t=Array.prototype[i].apply(e,arguments);return l.get(e).forEach(((t,s)=>{t.forEach((t=>{t(e,i,arguments)}))})),t}:Reflect.get(e,i);if(e[i]instanceof Array)return c(e[i])}return Reflect.get(e,i)},set(t,e,i){if("symbol"==typeof e)throw new Error("Setting symbols not allowed.");if(Array.isArray(t))return Reflect.set(t,e,i);if(l.has(t)){l.get(t).forEach(((t,s)=>{t.forEach((t=>{t(e,i)}))}))}return Reflect.set(t,e,i)}})}window.observers=l;class PropError extends Error{constructor(t,e){super(t),this.name="PropError",Error.captureStackTrace&&Error.captureStackTrace(this,e)}}Symbol("index");const d=Symbol("init"),p=Symbol("template"),y=Symbol("style"),u=Symbol("parent");function f(t){return t.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}function g(t){return t.replace(/-([a-z])/g,(t=>t[1].toUpperCase()))}function m(t={}){return function(e,i){if("class"!==i.kind)throw new Error("@Component() can only decorate a class");var s,r;Reflect.defineProperty(e,"name",{value:t.selector,writable:!1,configurable:!1}),!e.prototype[u]||e.prototype[u][e.prototype[u].length-1]instanceof Object.getPrototypeOf(e)?e.prototype instanceof HTMLElement&&(e.prototype[u]=[e.prototype],e.prototype[y]=t.style?[t.style]:[],e.prototype[p]=t.template||""):(e.prototype[u].push(e.prototype),e.prototype[y].push(t.style),e.prototype[p]=(s=e.prototype[p],(r=t.template||null)&&r.match(/<parent\/>/)?r.replace(/<parent\/>/,s):`${s}${r||""}`));const a=e.prototype.connectedCallback||(()=>{}),n=e.prototype.disconnectedCallback||(()=>{});e.prototype.connectedCallback=function(){if(this[d]||void 0!==t.template||void 0!==t.style)if(this[d]){if(this[d]&&t.style);else if(this[d]&&t.selector&&!t.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===t.useShadow)throw new Error("unsupported");{const t=document.createElement("template");t.innerHTML=e.prototype[p]||"";const i=document.importNode(t.content,!0),s=this.attachShadow({mode:"open"});s.adoptedStyleSheets=e.prototype[y].map((t=>{if(t instanceof CSSStyleSheet)return t;var e=new CSSStyleSheet;return e.replaceSync(t.toString()),e})),s.appendChild(i)}}else!1===t.useShadow||this.attachShadow({mode:"open"});const i=new Set;for(const t of this.shadowRoot.querySelectorAll("*"))-1!==t.localName.indexOf("-")&&i.add(t.localName);const s=Array.from(i.values()).map((t=>customElements.get(t)?Promise.resolve():customElements.whenDefined(t))),r=()=>{this[u].map((t=>{t.render&&t.render.call(this,e.observedAttributes?e.observedAttributes.reduce(((t,e)=>(t[g(e)]=!0,t)),{}):{})}))};0===s.length?(this[d]=!0,a.call(this),r()):Promise.all(s).then((()=>{this[d]=!0,a.call(this);for(const t of this.shadowRoot.querySelectorAll("slot"))t.dispatchEvent(new CustomEvent("slotchange"));r()}))},e.prototype.disconnectedCallback=function(){n.call(this)},e.prototype.attributeChangedCallback=function(t,e,i){this[g(t)]=i},i.addInitializer((function(){if(t.selector){if(window.customElements.get(t.selector))throw new Error(`@Component() ${i.name} duplicate selector '${t.selector}'`);window.customElements.define(t.selector,e)}}))}}Symbol("transmute");function x(t){return!!t&&t.constructor===Array}function w(t,e){t[d]&&t[u].map((i=>{i.render&&i.render.call(t,{[e]:!0})}))}function v(t){return null===t?"null":x(t)?"array":typeof t}function b(t){return function(e,i){const s=i.name,r=Symbol(s),h=Symbol(`${s}:type`),l=Symbol(`${s}:meta`);return i.addInitializer((function(){Reflect.defineProperty(this,s,{get:()=>"object"===this[h]||"array"===this[h]?this[r][n]?this[r]:c(this[r]):this[r],set:e=>{const i=v(t?t(e):e);if("index"!==s&&this[h]!==i&&"null"!==this[h]&&"null"!==i)throw new Error(`@Prop() ${s} with type '${this[h]}' cannot be set to ${i}.`);if("array"===this[h]){if(!x(e))throw new PropError(`Array "${s}" (Prop) initialized already. Reassignments must be array type.`,Object.getOwnPropertyDescriptor(this,s)?.set);if(this[r]===e)throw new Error("Setting an array to itself is not allowed.");const t=c(this[r]);if(t[a]){const i=e[n]?(l=e)[n]&&l[o]:e;t.splice(0,this[r].length,...i)}else this[r]=e}else this[r]=t?t(e):e,w(this,s);var l}})})),function(e){if(void 0===e&&"index"!==s)throw new Error(`@Prop() ${s} must have an initial value defined.`);if(void 0!==e&&"index"===s)throw new Error("@Prop() index must not have an initial value defined.");if(!0===e)throw new Error(`@Prop() ${s} boolean must initialize to false.`);if(!i.private){const{constructor:t}=this;t.observedAttributes??=[],t.symbols||(t.symbols={});const{symbols:e}=t,i=f(s);e[s]||(t.observedAttributes.push(i),e[s]=r)}return this[h]=v(e),"array"===this[h]?(this[r]=e,new Proxy(e,{get:(t,e)=>e===S?this[l]:(console.log("errr???"),Reflect.get(this[r],e)),set:(t,e,i)=>{if(e===S)return this[l]=i,!0;const a=Reflect.set(t,e,i);return"length"===e&&this[r].length===i||w(this,s),this[r]=i,a}})):(this[r]=t?t(this.getAttribute(s)??e):this.getAttribute(s)??e,this[r])}}}function L(t){return parseInt(`${t}`,10)}function E(t){return""===t||!0===t||null!==t&&!1!==t&&(t||!0)}Symbol("hasProxy");const S=Symbol("meta");var C=i(713);function M(t){const e=[];for(let i=0;i<t.length;i++){e.push([]);for(let s=0;s<t[0].length;s++)e[i].push(t[i][s])}return e}function z(t,e,i,s){return function(t,e,i){return Math.sqrt(Math.pow(e*i,2)+Math.pow(t,2))}(t,e,s)<=i}function P(t,e,i,s){return function(t,e,i,s){return z(t,e,i,s)&&!(z(t+1,e,i,s)&&z(t-1,e,i,s)&&z(t,e+1,i,s)&&z(t,e-1,i,s))}(t=-.5*(i-2*(t+.5)),e=-.5*(s-2*(e+.5)),i/2,i/s)}function $(t,e,i,s){return Math.abs(t-i)===Math.abs(e-s)&&Math.abs(t-i)?(console.log("circle",Math.abs(t-i),Math.abs(e-s)),function(t,e,i,s){const r=Math.abs(t-i),a=Math.abs(e-s),n=Math.min(t,i),o=Math.min(e,s),h=[];for(let t=0;t<a;t++)for(let e=0;e<r;e++)P(e,t,r,a)&&h.push({x:e+n,y:t+o});return h}(t,e,i+1,s+1)):function(t,e,i,s){const r=[];var a,n=Math.abs(i-t),o=Math.abs(s-e),h=1&o,l=4*(1-n)*o*o,c=4*(h+1)*n*n,d=l+c+h*n*n;t>i&&(t=i,i+=n),e>s&&(e=s),s=(e+=o+1>>1)-h,n*=8*n,h=8*o*o;do{r.push({x:i,y:e}),r.push({x:t,y:e}),r.push({x:t,y:s}),r.push({x:i,y:s}),(a=2*d)<=c&&(e++,s--,d+=c+=n),(a>=l||2*d>c)&&(t++,i--,d+=l+=h)}while(t<=i);for(;e-s<=o;)r.push({x:t-1,y:e}),r.push({x:i+1,y:e++}),r.push({x:t-1,y:s}),r.push({x:i+1,y:s--});return r}(t,e,i,s)}const k="#FFFFFF";function R(t,e,i,s){const r=[],a=Math.abs(i-t),n=Math.abs(s-e),o=t<i?1:-1,h=e<s?1:-1;let l=a-n;for(;r.push({x:t,y:e}),t!==i||e!==s;){var c=2*l;c>-n&&(l-=n,t+=o),c<a&&(l+=a,e+=h)}return r}function A(t,e,i,s){const r=[],a=Math.min(t,i),n=Math.min(e,s);for(var o=Math.abs(i-t)+1,h=Math.abs(s-e)+1,l=n;l<n+h;l++)for(var c=a;c<a+o;c++)r.push({x:c,y:l});return r}function I(t,e,i,s){const r=[],a=Math.min(t,i),n=Math.min(e,s);for(var o=Math.abs(i-t),h=Math.abs(s-e),l=n;l<=n+h;l++)r.push({x:a,y:l}),r.push({x:a+o,y:l});for(var c=a+1;c<=a+o-1;c++)r.push({x:c,y:n}),r.push({x:c,y:n+h});return r}function O(t,e){let i=[];for(let s=0;s<e;s++){const e=[];for(let i=0;i<t;i++)e.push(0);i.push(e)}return i}function H(t,e){for(let i=0;i<t.length;i++)for(let s=0;s<t[0].length;s++)e(s,i,t[i][s])}function Y(t,e,i){return e*i+t}function X(t,e){const i=document.createElement("canvas");return i.width=t,i.height=e,[i,i.getContext("2d")]}const j=[{name:"Circle Outer",width:22,height:22,color:"#F00",opacity:1,lines:[[7,1],[15,1],[15,2],[17,2],[17,3],[18,3],[18,4],[19,4],[19,5],[20,5],[20,7],[21,7],[21,15],[20,15],[20,17],[19,17],[19,18],[18,18],[18,19],[17,19],[17,20],[15,20],[15,21],[7,21],[7,20],[5,20],[5,19],[4,19],[4,18],[3,18],[3,17],[2,17],[2,15],[1,15],[1,7],[2,7],[2,5],[3,5],[3,4],[4,4],[4,3],[5,3],[5,2],[7,2],[7,1]]},{name:"Circle Inner",width:22,height:22,color:"#00F",opacity:1,lines:[[8,3],[14,3],[14,4],[16,4],[16,5],[17,5],[17,6],[18,6],[18,8],[19,8],[19,14],[18,14],[18,16],[17,16],[17,17],[16,17],[16,18],[14,18],[14,19],[8,19],[8,18],[6,18],[6,17],[5,17],[5,16],[4,16],[4,14],[3,14],[3,8],[4,8],[4,6],[5,6],[5,5],[6,5],[6,4],[8,4],[8,3]]},{name:"Square",width:22,height:22,color:"#9932cc",opacity:1,dashed:[4,4],lines:[[2,2],[20,2],[20,20],[2,20],[2,2]]},{name:"Square",width:22,height:22,color:"#9932cc",opacity:.1,dashed:[4,4],dashOffset:4,lines:[[2,2],[20,2],[20,20],[2,20],[2,2]]}],D=new Map;function T(t,e,i,s){const r=`${t}:${e}:${i}:${s}`;if(D.has(r))return D.get(r);let a=j.filter((i=>i.width===t&&i.height===e));0===a.length&&t%2==0&&e%2==0&&(a=[{name:"Horizontal",color:"#00F",opacity:1,lines:[[0,e/2],[t,e/2]]},{name:"Vertical",color:"#00F",opacity:1,lines:[[t/2,0],[t/2,e]]}]);const n=i+s,o=t*n-s,h=e*n-s,l=document.createElement("canvas"),c=l.getContext("2d");if(l.width=o,l.height=h,0!==s){c.fillStyle="#BBB";for(let e=1;e<t;e++)c.fillRect(e*n-s,0,1,h);for(let t=1;t<e;t++)c.fillRect(0,t*n-s,o,1)}return a.forEach((t=>{c.lineDashOffset=t.dashOffset||0,c.setLineDash(t.dashed||[1]),c.strokeStyle=t.color,c.globalAlpha=t.opacity,c.lineWidth=1,c.fillStyle="transparent",c.beginPath(),t.lines.forEach(((t,e)=>{0===e?c.moveTo(t[0]*(i+s)-.5,t[1]*(i+s)-.5):c.lineTo(t[0]*(i+s)-.5,t[1]*(i+s)-.5)})),c.stroke()})),D.set(r,l),l}var K,U=function(t,e,i,s,r,a){function n(t){if(void 0!==t&&"function"!=typeof t)throw new TypeError("Function expected");return t}for(var o,h=s.kind,l="getter"===h?"get":"setter"===h?"set":"value",c=!e&&t?s.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,s.name):{}),p=!1,y=i.length-1;y>=0;y--){var u={};for(var f in s)u[f]="access"===f?{}:s[f];for(var f in s.access)u.access[f]=s.access[f];u.addInitializer=function(t){if(p)throw new TypeError("Cannot add initializers after decoration has completed");a.push(n(t||null))};var g=(0,i[y])("accessor"===h?{get:d.get,set:d.set}:d[l],u);if("accessor"===h){if(void 0===g)continue;if(null===g||"object"!=typeof g)throw new TypeError("Object expected");(o=n(g.get))&&(d.get=o),(o=n(g.set))&&(d.set=o),(o=n(g.init))&&r.unshift(o)}else(o=n(g))&&("field"===h?r.unshift(o):d[l]=o)}c&&Object.defineProperty(c,s.name,d),p=!0},F=function(t,e,i){for(var s=arguments.length>2,r=0;r<e.length;r++)i=s?e[r].call(t,i):e[r].call(t);return s?i:void 0};function N([t,e,i,s]){return`rgba(${t}, ${e}, ${i}, ${s})`}!function(t){t[t.Group=0]="Group",t[t.Pixel=1]="Pixel",t[t.ColorUpdate=2]="ColorUpdate",t[t.ColorAdd=3]="ColorAdd",t[t.ColorRemove=4]="ColorRemove",t[t.LayerAdd=5]="LayerAdd",t[t.LayerRemove=6]="LayerRemove",t[t.LayerName=7]="LayerName",t[t.LayerLock=8]="LayerLock",t[t.LayerUnlock=9]="LayerUnlock",t[t.LayerExport=10]="LayerExport",t[t.LayerVisible=11]="LayerVisible",t[t.LayerOpacity=12]="LayerOpacity"}(K||(K={}));(()=>{let t,e,i,s,r,a,n,o,h,l=[m({selector:"pg-input-pixel-editor",style:C.A,template:'<div part="wrapper" tabindex="0"> <canvas part="canvas" draggable="false"></canvas> </div>'})],c=[],d=HTMLElement,p=[],y=[],u=[],f=[],g=[],x=[],w=[],v=[],S=[],z=[],P=[],j=[],D=[],q=[];(class extends d{static{e=this}static{const m="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;i=[b(L)],s=[b(L)],r=[b(L)],a=[b(L)],n=[b(E)],o=[b()],h=[function(t,e){const i=e.name,s=i.replace(/^\$/,"");e.addInitializer((function(){let t=null;Reflect.defineProperty(this,i,{get(){return t??(t=this.shadowRoot?.querySelector(`[part~=${s}]`))}})}))}],U(null,null,i,{kind:"field",name:"width",static:!1,private:!1,access:{has:t=>"width"in t,get:t=>t.width,set:(t,e)=>{t.width=e}},metadata:m},p,y),U(null,null,s,{kind:"field",name:"height",static:!1,private:!1,access:{has:t=>"height"in t,get:t=>t.height,set:(t,e)=>{t.height=e}},metadata:m},u,f),U(null,null,r,{kind:"field",name:"size",static:!1,private:!1,access:{has:t=>"size"in t,get:t=>t.size,set:(t,e)=>{t.size=e}},metadata:m},g,x),U(null,null,a,{kind:"field",name:"gridSize",static:!1,private:!1,access:{has:t=>"gridSize"in t,get:t=>t.gridSize,set:(t,e)=>{t.gridSize=e}},metadata:m},w,v),U(null,null,n,{kind:"field",name:"transparent",static:!1,private:!1,access:{has:t=>"transparent"in t,get:t=>t.transparent,set:(t,e)=>{t.transparent=e}},metadata:m},S,z),U(null,null,o,{kind:"field",name:"placeholder",static:!1,private:!1,access:{has:t=>"placeholder"in t,get:t=>t.placeholder,set:(t,e)=>{t.placeholder=e}},metadata:m},P,j),U(null,null,h,{kind:"field",name:"$canvas",static:!1,private:!1,access:{has:t=>"$canvas"in t,get:t=>t.$canvas,set:(t,e)=>{t.$canvas=e}},metadata:m},D,q),U(null,t={value:e},l,{kind:"class",name:e.name,metadata:m},null,c),e=t.value,m&&Object.defineProperty(e,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:m}),F(e,c)}width=F(this,p,10);height=(F(this,y),F(this,u,10));size=(F(this,f),F(this,g,10));gridSize=(F(this,x),F(this,w,1));transparent=(F(this,v),F(this,S,!1));placeholder=(F(this,z),F(this,P,""));$canvas=(F(this,j),F(this,D,void 0));#t=(F(this,q),0);#e=!1;#i=!1;#s=-1;#r=-1;#a=-1;#n=-1;#o=-1;#h=0;#l=[];#c=!1;#d=!1;#p=!1;#y=[];#u=[];#f=[];#g;#m=[[0,0,0,0],[0,0,0,1]];#x;#w;#v;#b;#L;#E;#S;#C;connectedCallback(){const t=this.$canvas.getContext("2d");null!==t&&(this.#g=t,this.$canvas.addEventListener("contextmenu",this.handleContextMenu.bind(this)),this.$canvas.addEventListener("doubleclick",this.handleDoubleClick.bind(this)),this.$canvas.addEventListener("pointerdown",this.handlePointerDown.bind(this)),this.$canvas.addEventListener("pointerup",this.handlePointerUp.bind(this)),this.$canvas.addEventListener("pointermove",this.handlePointerMove.bind(this)),this.$canvas.addEventListener("pointerenter",this.handlePointerEnter.bind(this)),this.$canvas.addEventListener("pointerleave",this.handlePointerLeave.bind(this)),this.$canvas.addEventListener("keydown",this.handleKeyDown.bind(this)),this.$canvas.addEventListener("keyup",this.handleKeyUp.bind(this)))}render(t){(t.width||t.height||t.size||t.transparent)&&this.#M()}#z=!0;#M(){const t=this.size+this.gridSize,e=this.width*t-this.gridSize,i=this.height*t-this.gridSize;if(this.$canvas.width=e,this.$canvas.height=i,this.#g.clearRect(0,0,e,i),[this.#x,this.#w]=X(e,i),[this.#v,this.#b]=X(e,i),[this.#L,this.#E]=X(e,i),[this.#S,this.#C]=X(e,i),this.transparent)for(let e=0;e<this.height;e++)for(let i=0;i<this.width;i++)this.#w.fillStyle=k,this.#w.fillRect(i*t,e*t,this.size+1,this.size+1),this.#w.fillStyle="#DDD",this.#w.fillRect(i*t+Math.ceil(this.size/2),e*t,Math.floor(this.size/2),Math.floor(this.size/2)),this.#w.fillRect(i*t,e*t+Math.floor(this.size/2),Math.ceil(this.size/2),Math.ceil(this.size/2));else this.#w.clearRect(0,0,e,i);this.#z?(this.#h=0,this.#l=[{name:"Layer 1",export:!0,locked:!1,visible:!0,opacity:1}],this.#y=[O(this.width,this.height)],this.#z=!1,this.#u=[],this.#f=[]):this.#P(),this.#$()}#P(){const t=this.#y.toReversed(),e=t.length;for(let i=0;i<this.height;i++){if(i>=t[0].length)for(let i=0;i<e;i++)t[i].push(new Array(this.width).fill(0));for(let s=0;s<this.width;s++){if(s>=t[0][i].length)for(let s=0;s<e;s++)t[s][i].push(0);for(let r=0;r<e;r++)if(0!==t[r][i][s]){this.#k(s,i,t[r][i][s]);break}}}}#R(){const t=this.#y.map((t=>function(t,e={}){let i,s,r,a=1,n=0,o=0;if(e.width){if(i=t,s=e.width,r=i.length/s,r%1!=0)throw new Error(`Invalid bitmask width. ${r} = ${i.length} / ${s}`)}else{if(!(t[0]instanceof Array))throw new Error("options.width is required for 1 dimensional array.");i=t.flat(),s=t[0].length,r=t.length}e.scale&&(a=e.scale),e.offsetX&&(n=e.offsetX),e.offsetY&&(o=e.offsetY);const h=s+2,l=Array(h*(r+2)).fill(0);function c(t,e){return(e+1)*h+(t+1)}for(let t=0;t<r;++t)for(let e=0;e<s;++e)l[c(e,t)]=i[Y(e,t,s)];const d=s*(r+1),p=Array(d+(s+1)*r).fill(0).map((()=>({x:0,y:0,next:void 0})));function y(t,e){return e*s+t}function u(t,e){return d+e*(s+1)+t}const f=new Set;function g(t,e,i){t.x=e,t.y=i,f.add(t)}function m(t){for(var e=t.next;void 0!==e&&e!==t;e=e.next)f.delete(e);void 0!==e&&f.add(t)}for(let t=0;t<r;++t)for(let e=0;e<s;++e)if(1==l[c(e,t)]){if(0==l[c(e-1,t)]){const i=p[u(e,t)];g(i,e,t+1),l[c(e-1,t-1)]?i.next=p[y(e-1,t)]:l[c(e,t-1)]?i.next=p[u(e,t-1)]:i.next=p[y(e,t)],m(i)}if(0==l[c(e+1,t)]){const i=p[u(e+1,t)];g(i,e+1,t),l[c(e+1,t+1)]?i.next=p[y(e+1,t+1)]:l[c(e,t+1)]?i.next=p[u(e+1,t+1)]:i.next=p[y(e,t+1)],m(i)}if(0==l[c(e,t-1)]){const i=p[y(e,t)];g(i,e,t),l[c(e+1,t-1)]?i.next=p[u(e+1,t-1)]:l[c(e+1,t)]?i.next=p[y(e+1,t)]:i.next=p[u(e+1,t)],m(i)}if(0==l[c(e,t+1)]){const i=p[y(e,t+1)];g(i,e+1,t+1),l[c(e-1,t+1)]?i.next=p[u(e,t+1)]:l[c(e-1,t)]?i.next=p[y(e-1,t+1)]:i.next=p[u(e,t)],m(i)}}for(const t of f){let e=t;do{e.next&&(e.next.type=e.x==e?.next?.x?"V":"H",e=e.next)}while(e!==t)}for(let t of f){let e=t;do{if(e.type!=e.next?.type)for(;e.next?.type==e.next?.next?.type;)e.next===t&&(f.delete(t),t=e.next.next,f.add(t)),e.next=e.next?.next;e=e.next}while(e!==t)}let x="";for(const t of f){x+=`M${t.x*a},${t.y*a}`;for(var w=t.next;w!=t;w=w?.next)"H"==w?.type?x+=`H${w?.x*a+n}`:"V"==w?.type&&(x+=`V${w?.y*a+o}`);x+="Z"}return x}(t,{scale:1})));console.log("change:",t),this.dispatchEvent(new CustomEvent("change",{detail:{value:t}}))}#A=0;#I(){clearInterval(this.#A),this.#A=window.setTimeout(this.#R.bind(this),1e3)}#k(t,e,i){if(t>this.width)throw new Error(`Invalid x; ${t} > ${this.width}`);if(e>this.height)throw new Error(`Invalid y; ${e} > ${this.height}`);const s=this.size+this.gridSize;this.#g.clearRect(t*s,e*s,this.size,this.size),this.#b.clearRect(t*s,e*s,this.size,this.size),this.#E.clearRect(t*s,e*s,this.size,this.size),0!==this.#m[i][3]&&(this.#b.fillStyle=k,this.#b.fillRect(t*s-this.gridSize+1,e*s-this.gridSize+1,this.size+2*this.gridSize-2,this.size+2*this.gridSize-2),this.#b.fillStyle=N(this.#m[i]),this.#b.fillRect(t*s+1,e*s+1,this.size-2,this.size-2)),0!==this.#m[i][3]&&(this.#E.fillStyle=N(this.#m[i]),this.#E.fillRect(t*s,e*s,this.size,this.size)),this.#g.drawImage(this.#x,t*s,e*s,this.size+2,this.size+2,t*s,e*s,this.size+2,this.size+2),this.#g.drawImage(this.#i?this.#v:this.#L,t*s,e*s,this.size+2,this.size+2,t*s,e*s,this.size+2,this.size+2),console.log("draw pixel(x, y, color, data):",t,e,i,this.#y[this.#h][e][t]),this.#y[this.#h][e][t]=i,this.#I()}#O(){for(let t=0;t<this.height;t++)for(let e=0;e<this.width;e++)this.#k(e,t,this.#y[this.#h][t][e])}#H(t,e,i){const s=this.size+this.gridSize,r=this.width*s-this.gridSize,a=this.height*s-this.gridSize,{minX:n,maxX:o,minY:h,maxY:l}=t.reduce(((t,s)=>({minX:Math.min(t.minX,s.x,e),maxX:Math.max(t.maxX,s.x,e),minY:Math.min(t.minY,s.y,i),maxY:Math.max(t.maxY,s.y,i)})),{minX:this.width,maxX:0,minY:this.height,maxY:0}),c=n*s,d=h*s,p=(o-n+1)*s,y=(l-h+1)*s;this.#g.clearRect(c,d,p,y),this.#g.drawImage(this.#x,c,d,p,y,c,d,p,y),this.#g.drawImage(this.#v,c,d,p,y,c,d,p,y),this.#C.clearRect(0,0,r,a),t.forEach((({x:t,y:e})=>{this.#C.fillStyle=k,this.#C.beginPath(),this.#C.arc(t*s+5,e*s+5,3,0,2*Math.PI),this.#C.closePath(),this.#C.fill(),this.#C.fillStyle="#1B79C8",this.#C.beginPath(),this.#C.arc(t*s+5,e*s+5,2,0,2*Math.PI),this.#C.closePath(),this.#C.fill()})),this.#g.drawImage(this.#S,c,d,p,y,c,d,p,y),this.dispatchEvent(new CustomEvent("debug",{detail:{x:c,y:d,width:p,height:y,canvas:this.$canvas,context:this.#g,editLayer:this.#v,noEditLayer:this.#L,baseLayer:this.#x,previewLayer:this.#S}}))}handleKeyDown(t){switch(console.log(t.shiftKey,t.ctrlKey,t.altKey,t.key),t.key){case" ":console.log("space");break;case"Escape":console.log("escape")}}handleKeyUp(t){}handleContextMenu(t){t?.preventDefault()}handleDoubleClick(t){t?.preventDefault()}handlePointerDown(t){if(1!==t.buttons&&32!==t.buttons)return t.preventDefault(),void t.stopPropagation();this.#p=t.altKey,this.#c=t.ctrlKey,this.#d=t.shiftKey;const e=this.$canvas.getBoundingClientRect(),i=this.size+this.gridSize;let s=Math.floor((t.clientX-e.left)/i),r=Math.floor((t.clientY-e.top)/i);if(s===this.#n&&r===this.#o)return;s>=this.width&&(s=this.width-1),r>=this.height&&(r=this.height-1),this.#e=!0,this.#s=this.#y[this.#h][r][s],this.#r=s,this.#a=r,this.#n=s,this.#o=r;const a=32===t.buttons?0:1;if(0===this.#t)this.#k(s,r,a),this.#y[this.#h][r][s]=a;console.log(this.#t,s,r)}handlePointerUp(t){const e=this.$canvas.getBoundingClientRect(),i=this.size+this.gridSize;let s=Math.floor((t.clientX-e.left)/i),r=Math.floor((t.clientY-e.top)/i);if(s>=this.width&&(s=this.width-1),r>=this.height&&(r=this.height-1),-1!==this.#r||-1!==this.#a){if(s===this.#r&&r===this.#a&&1===this.#s){if(0===this.#t)this.#k(s,r,0),this.#y[this.#h][r][s]=0}else switch(this.#t){case 1:R(this.#r,this.#a,s,r).forEach((({x:t,y:e})=>{this.#k(t,e,1)}));break;case 2:A(this.#r,this.#a,s,r).forEach((({x:t,y:e})=>{this.#k(t,e,1)}));break;case 3:I(this.#r,this.#a,s,r).forEach((({x:t,y:e})=>{this.#k(t,e,1)}));break;case 4:case 5:$(this.#r,this.#a,s,r).forEach((({x:t,y:e})=>{this.#k(t,e,1)}))}this.#n=-1,this.#o=-1,this.#e=!1}}handlePointerMove(t){const e=this.$canvas;if(this.#e){this.#p=t.altKey,this.#c=t.ctrlKey,this.#d=t.shiftKey;const s=this.#y,r=e.getBoundingClientRect(),a=this.size+this.gridSize,n=[],o=this.#r,h=this.#a,l=this.#n,c=this.#o;if("function"==typeof t.getCoalescedEvents){const e=t.getCoalescedEvents();for(const t of e){let e=Math.floor((t.clientX-r.left)/a),i=Math.floor((t.clientY-r.top)/a);e>=this.width||i>=this.height||e===l&&i===c||n.push([e,i])}}else{let e=Math.floor((t.clientX-r.left)/a),i=Math.floor((t.clientY-r.top)/a);if(e===l&&i===c)return;e>=this.width&&(e=this.width-1),i>=this.height&&(i=this.height-1),n.push([e,i])}const d=32===t.buttons?0:1;if(0===n.length)return;const[p,y]=n.at(-1);switch(this.#n=p,this.#o=y,this.#t){case 0:for(var i of n)this.#k(i[0],i[1],d),s[this.#h][i[1]][i[0]]=d;break;case 1:this.#H(R(o,h,p,y),l,c);break;case 2:this.#H(A(o,h,p,y),l,c);break;case 3:this.#H(I(o,h,p,y),l,c);break;case 4:case 5:this.#H($(o,h,p,y),l,c)}}}handlePointerEnter(t){this.#e||this.#i||(this.#i=!0,this.#g.drawImage(this.#x,0,0),this.#g.drawImage(this.#i?this.#v:this.#L,0,0))}handlePointerLeave(t){this.#e||(this.#i=!1,this.#g.drawImage(this.#x,0,0),this.#g.drawImage(this.#i?this.#v:this.#L,0,0))}#$(){this.#g.drawImage(this.#x,0,0),this.#g.drawImage(this.#L,0,0)}mergeColor(t,e){}clear(){const t=O(this.width,this.height);!function(t,e){const i=[],s=t[0].length,r=t.length,a=e[0].length,n=e.length,o=Math.max(s,a),h=Math.max(r,n);for(let s=0;s<h;s++)for(let r=0;r<o;r++){const a=e&&e[s]&&e[s][r],n=t&&t[s]&&t[s][r];a!==n&&i.push([r,s,n,a])}}(this.#y[this.#h],t);this.#u.push({type:K.Group,data:{name:"Clear"}}),this.#u.push({type:K.Pixel,data:{pixels:[],layer:this.#h}}),this.#y=[O(this.width,this.height)],this.#$()}reset(){this.#z=!0,this.#M()}clearHistory(){this.#u=[],this.#f=[]}applyTemplate(t){this.#y=[t],this.#O()}flipHorizontal(){const t=M(this.#y[this.#h]),e=t[0].length-1;H(this.#y[this.#h],((i,s)=>{t[s][i]=this.#y[this.#h][s][e-i]})),this.#y[this.#h]=t}flipVertical(){const t=M(this.#y[this.#h]),e=t.length-1;H(this.#y[this.#h],((i,s)=>{t[this.#h][s][i]=this.#y[e-s][i]})),this.#y[this.#h]=t}move(t,e){const i=O(this.width,this.height);for(let t=0;t<this.height;t++)i[t].fill(0);H(this.#y[this.#h],((s,r)=>{r-e<0||s-t<0||r-e>=this.height||s-t>=this.width||(i[r][s]=this.#y[this.#h][r-e][s-t])})),this.#y[this.#h]=i}invert(){this.#m.length>2||(H(this.#y[this.#h],((t,e)=>{this.#y[this.#h][e][t]=0===this.#y[this.#h][e][t]?1:0})),this.#O())}applyGuides(){const t=T(this.width,this.height,this.size,this.gridSize);this.#w.drawImage(t,0,0)}clearGuides(){}undo(){const t=this.#u.pop();if(t&&t.type===K.Pixel)this.#f.push(t),t.data.pixels.forEach((t=>{const[e,i]=t;this.#y[this.#h][i][e]=t[2]}))}redo(){}rotateClockwise(){this.#Y(!1)}rotateCounterclockwise(){this.#Y(!0)}#Y(t=!1){const e=M(this.#y[this.#h]);if(t){const t=this.#y[0].map(((t,e)=>this.#y.map((t=>t[t.length-1-e]))));for(let i=0;i<this.height;i++)for(let s=0;s<this.width;s++)e[i][s]=t[this.#h][i][s]}else{const t=this.#y[0].map(((t,e)=>this.#y.map((t=>t[e])).reverse()));for(let i=0;i<this.height;i++)for(let s=0;s<this.width;s++)e[i][s]=t[this.#h][i][s]}this.#y[this.#h]=e}hasUndo(){return 0!==this.#u.length}hasRedo(){return 0!==this.#f.length}inputModePixel(){this.#t=0}inputModeLine(){this.#t=1}inputModeRectangle(){this.#t=2}inputModeRectangleOutline(){this.#t=3}inputModeEllipse(){this.#t=4}inputModeEllipseOutline(){this.#t=5}async save(t={}){const e={width:this.width,height:this.height,transparent:this.transparent,colors:this.#m,layers:this.#l,data:this.#y};!0===t.history&&(e.undo=this.#u,e.redo=this.#f);for(let t=0;t<e.data.length;t++)for(let i=e.data[t].length-1;i>=0;i--)if(i>=this.height)e.data[t].pop();else for(let s=e.data[t][i].length-1;s>=0;s--)s>=this.width&&e.data[t][i].pop();return e}async open(t){if("object"!=typeof t)return["json must be type object"];const e=[],i=Object.keys(t);["width","height","transparent","colors","layers","data"].forEach((t=>{i.includes(t)||e.push(`JSON key '${t}' required.`)})),this.width=t.width,this.height=t.height,this.transparent=t.transparent,this.#m=t.colors,this.#l=t.layers,this.#y=t.data,t.undo&&(this.#u=t.undo),t.redo&&(this.#f=t.redo),this.#M()}})})()})();
+(()=>{"use strict";var t={314:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var i="",s=void 0!==e[5];return e[4]&&(i+="@supports (".concat(e[4],") {")),e[2]&&(i+="@media ".concat(e[2]," {")),s&&(i+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),i+=t(e),s&&(i+="}"),e[2]&&(i+="}"),e[4]&&(i+="}"),i})).join("")},e.i=function(t,i,s,n,r){"string"==typeof t&&(t=[[null,t,void 0]]);var a={};if(s)for(var o=0;o<this.length;o++){var h=this[o][0];null!=h&&(a[h]=!0)}for(var l=0;l<t.length;l++){var c=[].concat(t[l]);s&&a[c[0]]||(void 0!==r&&(void 0===c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=r),i&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=i):c[2]=i),n&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=n):c[4]="".concat(n)),e.push(c))}},e}},601:t=>{t.exports=function(t){return t[1]}},713:(t,e,i)=>{i.d(e,{A:()=>h});var s=i(601),n=i.n(s),r=i(314),a=i.n(r)()(n());a.push([t.id,':host {\n  display: inline-flex;\n}\n\n[part="wrapper"] {\n  display: flex;\n  position: relative;\n  outline: 0;\n}\n\n[part="wrapper"]:focus-visible::before {\n  pointer-events: none;\n  content: \'\';\n  position: absolute;\n  top: -1px;\n  right: -1px;\n  bottom: -1px;\n  left: -1px;\n  border-radius: 0.125rem;\n  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));\n}\n\ncanvas {\n  touch-action: none;\n  user-select: none;\n  outline: 0;\n}',""]);var o=new CSSStyleSheet;o.replaceSync(a.toString());const h=o}},e={};function i(s){var n=e[s];if(void 0!==n)return n.exports;var r=e[s]={id:s,exports:{}};return t[s](r,r.exports,i),r.exports}i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var s in e)i.o(e,s)&&!i.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);const s=Symbol("addObserver"),n=Symbol("removeObserver"),r=Symbol("getObservers"),a=Symbol("isProxy"),o=Symbol("getTarget"),h=["fill","pop","push","reverse","shift","sort","splice","unshift"],l=new Map;function c(t){return new Proxy(t,{get(e,i){if("symbol"==typeof i){switch(i){case a:return!0;case o:return e;case r:return l.has(t);case s:return(e,i)=>{l.has(t)?l.get(t).has(e)?l.get(t).get(e).push(i):l.get(t).set(e,[i]):l.set(t,new Map([[e,[i]]]))};case n:return e=>{l.has(t)&&(l.get(t).delete(e),0===l.get(t).size&&l.delete(t))};case Symbol.toPrimitive:case Symbol.toStringTag:return Reflect.get(e,i)}throw new Error("Unsupported symbol")}if(i in e){if(!Number.isNaN(Number(i)))return"object"==typeof e[i]?c(e[i]):e[i];if("copyWithin"===i)throw new Error("Unsupported array method copyWithin");if(h.includes(i))return l.has(e)?function(){const t=Array.prototype[i].apply(e,arguments);return l.get(e).forEach(((t,s)=>{t.forEach((t=>{t(e,i,arguments)}))})),t}:Reflect.get(e,i);if(e[i]instanceof Array)return c(e[i])}return Reflect.get(e,i)},set(t,e,i){if("symbol"==typeof e)throw new Error("Setting symbols not allowed.");if(Array.isArray(t))return Reflect.set(t,e,i);if(l.has(t)){l.get(t).forEach(((t,s)=>{t.forEach((t=>{t(e,i)}))}))}return Reflect.set(t,e,i)}})}window.observers=l;class PropError extends Error{constructor(t,e){super(t),this.name="PropError",Error.captureStackTrace&&Error.captureStackTrace(this,e)}}Symbol("index");const d=Symbol("init"),p=Symbol("template"),y=Symbol("style"),u=Symbol("parent");function f(t){return t.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}function g(t){return t.replace(/-([a-z])/g,(t=>t[1].toUpperCase()))}function m(t={}){return function(e,i){if("class"!==i.kind)throw new Error("@Component() can only decorate a class");var s,n;Reflect.defineProperty(e,"name",{value:t.selector,writable:!1,configurable:!1}),!e.prototype[u]||e.prototype[u][e.prototype[u].length-1]instanceof Object.getPrototypeOf(e)?e.prototype instanceof HTMLElement&&(e.prototype[u]=[e.prototype],e.prototype[y]=t.style?[t.style]:[],e.prototype[p]=t.template||""):(e.prototype[u].push(e.prototype),e.prototype[y].push(t.style),e.prototype[p]=(s=e.prototype[p],(n=t.template||null)&&n.match(/<parent\/>/)?n.replace(/<parent\/>/,s):`${s}${n||""}`));const r=e.prototype.connectedCallback||(()=>{}),a=e.prototype.disconnectedCallback||(()=>{});e.prototype.connectedCallback=function(){if(this[d]||void 0!==t.template||void 0!==t.style)if(this[d]){if(this[d]&&t.style);else if(this[d]&&t.selector&&!t.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===t.useShadow)throw new Error("unsupported");{const t=document.createElement("template");t.innerHTML=e.prototype[p]||"";const i=document.importNode(t.content,!0),s=this.attachShadow({mode:"open"});s.adoptedStyleSheets=e.prototype[y].map((t=>{if(t instanceof CSSStyleSheet)return t;var e=new CSSStyleSheet;return e.replaceSync(t.toString()),e})),s.appendChild(i)}}else!1===t.useShadow||this.attachShadow({mode:"open"});const i=new Set;for(const t of this.shadowRoot.querySelectorAll("*"))-1!==t.localName.indexOf("-")&&i.add(t.localName);const s=Array.from(i.values()).map((t=>customElements.get(t)?Promise.resolve():customElements.whenDefined(t))),n=()=>{this[u].map((t=>{t.render&&t.render.call(this,e.observedAttributes?e.observedAttributes.reduce(((t,e)=>(t[g(e)]=!0,t)),{}):{})}))};0===s.length?(this[d]=!0,r.call(this),n()):Promise.all(s).then((()=>{this[d]=!0,r.call(this);for(const t of this.shadowRoot.querySelectorAll("slot"))t.dispatchEvent(new CustomEvent("slotchange"));n()}))},e.prototype.disconnectedCallback=function(){a.call(this)},e.prototype.attributeChangedCallback=function(t,e,i){this[g(t)]=i},i.addInitializer((function(){if(t.selector){if(window.customElements.get(t.selector))throw new Error(`@Component() ${i.name} duplicate selector '${t.selector}'`);window.customElements.define(t.selector,e)}}))}}Symbol("transmute");function x(t){return!!t&&t.constructor===Array}function v(t,e){t[d]&&t[u].map((i=>{i.render&&i.render.call(t,{[e]:!0})}))}function w(t){return null===t?"null":x(t)?"array":typeof t}function b(t){return function(e,i){const s=i.name,n=Symbol(s),h=Symbol(`${s}:type`),l=Symbol(`${s}:meta`);return i.addInitializer((function(){Reflect.defineProperty(this,s,{get:()=>"object"===this[h]||"array"===this[h]?this[n][a]?this[n]:c(this[n]):this[n],set:e=>{const i=w(t?t(e):e);if("index"!==s&&this[h]!==i&&"null"!==this[h]&&"null"!==i)throw new Error(`@Prop() ${s} with type '${this[h]}' cannot be set to ${i}.`);if("array"===this[h]){if(!x(e))throw new PropError(`Array "${s}" (Prop) initialized already. Reassignments must be array type.`,Object.getOwnPropertyDescriptor(this,s)?.set);if(this[n]===e)throw new Error("Setting an array to itself is not allowed.");const t=c(this[n]);if(t[r]){const i=e[a]?(l=e)[a]&&l[o]:e;t.splice(0,this[n].length,...i)}else this[n]=e}else this[n]=t?t(e):e,v(this,s);var l}})})),function(e){if(void 0===e&&"index"!==s)throw new Error(`@Prop() ${s} must have an initial value defined.`);if(void 0!==e&&"index"===s)throw new Error("@Prop() index must not have an initial value defined.");if(!0===e)throw new Error(`@Prop() ${s} boolean must initialize to false.`);if(!i.private){const{constructor:t}=this;t.observedAttributes??=[],t.symbols||(t.symbols={});const{symbols:e}=t,i=f(s);e[s]||(t.observedAttributes.push(i),e[s]=n)}return this[h]=w(e),"array"===this[h]?(this[n]=e,new Proxy(e,{get:(t,e)=>e===E?this[l]:(console.log("errr???"),Reflect.get(this[n],e)),set:(t,e,i)=>{if(e===E)return this[l]=i,!0;const r=Reflect.set(t,e,i);return"length"===e&&this[n].length===i||v(this,s),this[n]=i,r}})):(this[n]=t?t(this.getAttribute(s)??e):this.getAttribute(s)??e,this[n])}}}function L(t){return parseInt(`${t}`,10)}function C(t){return""===t||!0===t||null!==t&&!1!==t&&(t||!0)}Symbol("hasProxy");const E=Symbol("meta");var S=i(713);function P(t){const e=[];for(let i=0;i<t.length;i++){e.push([]);for(let s=0;s<t[0].length;s++)e[i].push(t[i][s])}return e}function M(t,e,i,s){return function(t,e,i){return Math.sqrt(Math.pow(e*i,2)+Math.pow(t,2))}(t,e,s)<=i}function z(t,e,i,s){return function(t,e,i,s){return M(t,e,i,s)&&!(M(t+1,e,i,s)&&M(t-1,e,i,s)&&M(t,e+1,i,s)&&M(t,e-1,i,s))}(t=-.5*(i-2*(t+.5)),e=-.5*(s-2*(e+.5)),i/2,i/s)}function $(t,e,i,s){return Math.abs(t-i)===Math.abs(e-s)&&Math.abs(t-i)?(console.log("circle",Math.abs(t-i),Math.abs(e-s)),function(t,e,i,s){const n=Math.abs(t-i),r=Math.abs(e-s),a=Math.min(t,i),o=Math.min(e,s),h=[];for(let t=0;t<r;t++)for(let e=0;e<n;e++)z(e,t,n,r)&&h.push({x:e+a,y:t+o});return h}(t,e,i+1,s+1)):function(t,e,i,s){const n=[];var r,a=Math.abs(i-t),o=Math.abs(s-e),h=1&o,l=4*(1-a)*o*o,c=4*(h+1)*a*a,d=l+c+h*a*a;t>i&&(t=i,i+=a),e>s&&(e=s),s=(e+=o+1>>1)-h,a*=8*a,h=8*o*o;do{n.push({x:i,y:e}),n.push({x:t,y:e}),n.push({x:t,y:s}),n.push({x:i,y:s}),(r=2*d)<=c&&(e++,s--,d+=c+=a),(r>=l||2*d>c)&&(t++,i--,d+=l+=h)}while(t<=i);for(;e-s<=o;)n.push({x:t-1,y:e}),n.push({x:i+1,y:e++}),n.push({x:t-1,y:s}),n.push({x:i+1,y:s--});return n}(t,e,i,s)}const k="#FFFFFF";function R(t,e,i,s){const n=[],r=Math.abs(i-t),a=Math.abs(s-e),o=t<i?1:-1,h=e<s?1:-1;let l=r-a;for(;n.push({x:t,y:e}),t!==i||e!==s;){var c=2*l;c>-a&&(l-=a,t+=o),c<r&&(l+=r,e+=h)}return n}function A(t,e,i,s){const n=[],r=Math.min(t,i),a=Math.min(e,s);for(var o=Math.abs(i-t)+1,h=Math.abs(s-e)+1,l=a;l<a+h;l++)for(var c=r;c<r+o;c++)n.push({x:c,y:l});return n}function O(t,e,i,s){const n=[],r=Math.min(t,i),a=Math.min(e,s);for(var o=Math.abs(i-t),h=Math.abs(s-e),l=a;l<=a+h;l++)n.push({x:r,y:l}),n.push({x:r+o,y:l});for(var c=r+1;c<=r+o-1;c++)n.push({x:c,y:a}),n.push({x:c,y:a+h});return n}function H(t,e){let i=[];for(let s=0;s<e;s++){const e=[];for(let i=0;i<t;i++)e.push(0);i.push(e)}return i}function I(t,e){for(let i=0;i<t.length;i++)for(let s=0;s<t[0].length;s++)e(s,i,t[i][s])}function Y(t,e,i){return e*i+t}function X(t,e){const i=document.createElement("canvas");return i.width=t,i.height=e,[i,i.getContext("2d")]}const U=[{name:"Circle Outer",width:22,height:22,color:"#F00",opacity:1,lines:[[7,1],[15,1],[15,2],[17,2],[17,3],[18,3],[18,4],[19,4],[19,5],[20,5],[20,7],[21,7],[21,15],[20,15],[20,17],[19,17],[19,18],[18,18],[18,19],[17,19],[17,20],[15,20],[15,21],[7,21],[7,20],[5,20],[5,19],[4,19],[4,18],[3,18],[3,17],[2,17],[2,15],[1,15],[1,7],[2,7],[2,5],[3,5],[3,4],[4,4],[4,3],[5,3],[5,2],[7,2],[7,1]]},{name:"Circle Inner",width:22,height:22,color:"#00F",opacity:1,lines:[[8,3],[14,3],[14,4],[16,4],[16,5],[17,5],[17,6],[18,6],[18,8],[19,8],[19,14],[18,14],[18,16],[17,16],[17,17],[16,17],[16,18],[14,18],[14,19],[8,19],[8,18],[6,18],[6,17],[5,17],[5,16],[4,16],[4,14],[3,14],[3,8],[4,8],[4,6],[5,6],[5,5],[6,5],[6,4],[8,4],[8,3]]},{name:"Square",width:22,height:22,color:"#9932cc",opacity:1,dashed:[4,4],lines:[[2,2],[20,2],[20,20],[2,20],[2,2]]},{name:"Square",width:22,height:22,color:"#9932cc",opacity:.1,dashed:[4,4],dashOffset:4,lines:[[2,2],[20,2],[20,20],[2,20],[2,2]]}],j=new Map;function D(t,e,i,s){const n=`${t}:${e}:${i}:${s}`;if(j.has(n))return j.get(n);let r=U.filter((i=>i.width===t&&i.height===e));0===r.length&&t%2==0&&e%2==0&&(r=[{name:"Horizontal",color:"#00F",opacity:1,lines:[[0,e/2],[t,e/2]]},{name:"Vertical",color:"#00F",opacity:1,lines:[[t/2,0],[t/2,e]]}]);const a=i+s,o=t*a-s,h=e*a-s,l=document.createElement("canvas"),c=l.getContext("2d");if(l.width=o,l.height=h,0!==s){c.fillStyle="#BBB";for(let e=1;e<t;e++)c.fillRect(e*a-s,0,1,h);for(let t=1;t<e;t++)c.fillRect(0,t*a-s,o,1)}return r.forEach((t=>{c.lineDashOffset=t.dashOffset||0,c.setLineDash(t.dashed||[1]),c.strokeStyle=t.color,c.globalAlpha=t.opacity,c.lineWidth=1,c.fillStyle="transparent",c.beginPath(),t.lines.forEach(((t,e)=>{0===e?c.moveTo(t[0]*(i+s)-.5,t[1]*(i+s)-.5):c.lineTo(t[0]*(i+s)-.5,t[1]*(i+s)-.5)})),c.stroke()})),j.set(n,l),l}var T,K=function(t,e,i,s,n,r){function a(t){if(void 0!==t&&"function"!=typeof t)throw new TypeError("Function expected");return t}for(var o,h=s.kind,l="getter"===h?"get":"setter"===h?"set":"value",c=!e&&t?s.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,s.name):{}),p=!1,y=i.length-1;y>=0;y--){var u={};for(var f in s)u[f]="access"===f?{}:s[f];for(var f in s.access)u.access[f]=s.access[f];u.addInitializer=function(t){if(p)throw new TypeError("Cannot add initializers after decoration has completed");r.push(a(t||null))};var g=(0,i[y])("accessor"===h?{get:d.get,set:d.set}:d[l],u);if("accessor"===h){if(void 0===g)continue;if(null===g||"object"!=typeof g)throw new TypeError("Object expected");(o=a(g.get))&&(d.get=o),(o=a(g.set))&&(d.set=o),(o=a(g.init))&&n.unshift(o)}else(o=a(g))&&("field"===h?n.unshift(o):d[l]=o)}c&&Object.defineProperty(c,s.name,d),p=!0},G=function(t,e,i){for(var s=arguments.length>2,n=0;n<e.length;n++)i=s?e[n].call(t,i):e[n].call(t);return s?i:void 0};function F([t,e,i,s]){return`rgba(${t}, ${e}, ${i}, ${s})`}!function(t){t[t.Group=0]="Group",t[t.Pixel=1]="Pixel",t[t.ColorUpdate=2]="ColorUpdate",t[t.ColorAdd=3]="ColorAdd",t[t.ColorRemove=4]="ColorRemove",t[t.LayerAdd=5]="LayerAdd",t[t.LayerRemove=6]="LayerRemove",t[t.LayerName=7]="LayerName",t[t.LayerLock=8]="LayerLock",t[t.LayerUnlock=9]="LayerUnlock",t[t.LayerExport=10]="LayerExport",t[t.LayerVisible=11]="LayerVisible",t[t.LayerOpacity=12]="LayerOpacity"}(T||(T={}));(()=>{let t,e,i,s,n,r,a,o,h,l=[m({selector:"pg-input-pixel-editor",style:S.A,template:'<div part="wrapper" tabindex="0"> <canvas part="canvas" draggable="false"></canvas> </div>'})],c=[],d=HTMLElement,p=[],y=[],u=[],f=[],g=[],x=[],v=[],w=[],E=[],M=[],z=[],U=[],j=[],N=[];(class extends d{static{e=this}static{const m="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;i=[b(L)],s=[b(L)],n=[b(L)],r=[b(L)],a=[b(C)],o=[b()],h=[function(t,e){const i=e.name,s=i.replace(/^\$/,"");e.addInitializer((function(){let t=null;Reflect.defineProperty(this,i,{get(){return t??(t=this.shadowRoot?.querySelector(`[part~=${s}]`))}})}))}],K(null,null,i,{kind:"field",name:"width",static:!1,private:!1,access:{has:t=>"width"in t,get:t=>t.width,set:(t,e)=>{t.width=e}},metadata:m},p,y),K(null,null,s,{kind:"field",name:"height",static:!1,private:!1,access:{has:t=>"height"in t,get:t=>t.height,set:(t,e)=>{t.height=e}},metadata:m},u,f),K(null,null,n,{kind:"field",name:"size",static:!1,private:!1,access:{has:t=>"size"in t,get:t=>t.size,set:(t,e)=>{t.size=e}},metadata:m},g,x),K(null,null,r,{kind:"field",name:"gridSize",static:!1,private:!1,access:{has:t=>"gridSize"in t,get:t=>t.gridSize,set:(t,e)=>{t.gridSize=e}},metadata:m},v,w),K(null,null,a,{kind:"field",name:"transparent",static:!1,private:!1,access:{has:t=>"transparent"in t,get:t=>t.transparent,set:(t,e)=>{t.transparent=e}},metadata:m},E,M),K(null,null,o,{kind:"field",name:"placeholder",static:!1,private:!1,access:{has:t=>"placeholder"in t,get:t=>t.placeholder,set:(t,e)=>{t.placeholder=e}},metadata:m},z,U),K(null,null,h,{kind:"field",name:"$canvas",static:!1,private:!1,access:{has:t=>"$canvas"in t,get:t=>t.$canvas,set:(t,e)=>{t.$canvas=e}},metadata:m},j,N),K(null,t={value:e},l,{kind:"class",name:e.name,metadata:m},null,c),e=t.value,m&&Object.defineProperty(e,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:m}),G(e,c)}width=G(this,p,10);height=(G(this,y),G(this,u,10));size=(G(this,f),G(this,g,10));gridSize=(G(this,x),G(this,v,1));transparent=(G(this,w),G(this,E,!1));placeholder=(G(this,M),G(this,z,""));$canvas=(G(this,U),G(this,j,void 0));#t=(G(this,N),0);#e=!1;#i=!1;#s=-1;#n=-1;#r=-1;#a=-1;#o=-1;#h=0;#l=[];#c=!1;#d=!1;#p=!1;#y=[];#u=[];#f=[];#g;#m=[[0,0,0,0],[0,0,0,1]];#x;#v;#w;#b;#L;#C;#E;#S;connectedCallback(){const t=this.$canvas.getContext("2d");null!==t&&(this.#g=t,this.$canvas.addEventListener("contextmenu",this.handleContextMenu.bind(this)),this.$canvas.addEventListener("doubleclick",this.handleDoubleClick.bind(this)),this.$canvas.addEventListener("pointerdown",this.handlePointerDown.bind(this)),this.$canvas.addEventListener("pointerenter",this.handlePointerEnter.bind(this)),this.$canvas.addEventListener("pointerleave",this.handlePointerLeave.bind(this)),this.$canvas.addEventListener("keydown",this.handleKeyDown.bind(this)),this.$canvas.addEventListener("keyup",this.handleKeyUp.bind(this)))}render(t){(t.width||t.height||t.size||t.transparent)&&this.#P()}#M=!0;#P(){const t=this.size+this.gridSize,e=this.width*t-this.gridSize,i=this.height*t-this.gridSize;if(this.$canvas.width=e,this.$canvas.height=i,this.#g.clearRect(0,0,e,i),[this.#x,this.#v]=X(e,i),[this.#w,this.#b]=X(e,i),[this.#L,this.#C]=X(e,i),[this.#E,this.#S]=X(e,i),this.transparent)for(let e=0;e<this.height;e++)for(let i=0;i<this.width;i++)this.#v.fillStyle=k,this.#v.fillRect(i*t,e*t,this.size+1,this.size+1),this.#v.fillStyle="#DDD",this.#v.fillRect(i*t+Math.ceil(this.size/2),e*t,Math.floor(this.size/2),Math.floor(this.size/2)),this.#v.fillRect(i*t,e*t+Math.floor(this.size/2),Math.ceil(this.size/2),Math.ceil(this.size/2));else this.#v.clearRect(0,0,e,i);this.#M?(this.#h=0,this.#l=[{name:"Layer 1",export:!0,locked:!1,visible:!0,opacity:1}],this.#y=[H(this.width,this.height)],this.#M=!1,this.#u=[],this.#f=[]):this.#z(),this.#$()}#z(){const t=this.#y.toReversed(),e=t.length;for(let i=0;i<this.height;i++){if(i>=t[0].length)for(let i=0;i<e;i++)t[i].push(new Array(this.width).fill(0));for(let s=0;s<this.width;s++){if(s>=t[0][i].length)for(let s=0;s<e;s++)t[s][i].push(0);for(let n=0;n<e;n++)if(0!==t[n][i][s]){this.#k(s,i,t[n][i][s]);break}}}}#R(){const t=this.#y.map((t=>function(t,e={}){let i,s,n,r=1,a=0,o=0;if(e.width){if(i=t,s=e.width,n=i.length/s,n%1!=0)throw new Error(`Invalid bitmask width. ${n} = ${i.length} / ${s}`)}else{if(!(t[0]instanceof Array))throw new Error("options.width is required for 1 dimensional array.");i=t.flat(),s=t[0].length,n=t.length}e.scale&&(r=e.scale),e.offsetX&&(a=e.offsetX),e.offsetY&&(o=e.offsetY);const h=s+2,l=Array(h*(n+2)).fill(0);function c(t,e){return(e+1)*h+(t+1)}for(let t=0;t<n;++t)for(let e=0;e<s;++e)l[c(e,t)]=i[Y(e,t,s)];const d=s*(n+1),p=Array(d+(s+1)*n).fill(0).map((()=>({x:0,y:0,next:void 0})));function y(t,e){return e*s+t}function u(t,e){return d+e*(s+1)+t}const f=new Set;function g(t,e,i){t.x=e,t.y=i,f.add(t)}function m(t){for(var e=t.next;void 0!==e&&e!==t;e=e.next)f.delete(e);void 0!==e&&f.add(t)}for(let t=0;t<n;++t)for(let e=0;e<s;++e)if(1==l[c(e,t)]){if(0==l[c(e-1,t)]){const i=p[u(e,t)];g(i,e,t+1),l[c(e-1,t-1)]?i.next=p[y(e-1,t)]:l[c(e,t-1)]?i.next=p[u(e,t-1)]:i.next=p[y(e,t)],m(i)}if(0==l[c(e+1,t)]){const i=p[u(e+1,t)];g(i,e+1,t),l[c(e+1,t+1)]?i.next=p[y(e+1,t+1)]:l[c(e,t+1)]?i.next=p[u(e+1,t+1)]:i.next=p[y(e,t+1)],m(i)}if(0==l[c(e,t-1)]){const i=p[y(e,t)];g(i,e,t),l[c(e+1,t-1)]?i.next=p[u(e+1,t-1)]:l[c(e+1,t)]?i.next=p[y(e+1,t)]:i.next=p[u(e+1,t)],m(i)}if(0==l[c(e,t+1)]){const i=p[y(e,t+1)];g(i,e+1,t+1),l[c(e-1,t+1)]?i.next=p[u(e,t+1)]:l[c(e-1,t)]?i.next=p[y(e-1,t+1)]:i.next=p[u(e,t)],m(i)}}for(const t of f){let e=t;do{e.next&&(e.next.type=e.x==e?.next?.x?"V":"H",e=e.next)}while(e!==t)}for(let t of f){let e=t;do{if(e.type!=e.next?.type)for(;e.next?.type==e.next?.next?.type;)e.next===t&&(f.delete(t),t=e.next.next,f.add(t)),e.next=e.next?.next;e=e.next}while(e!==t)}let x="";for(const t of f){x+=`M${t.x*r},${t.y*r}`;for(var v=t.next;v!=t;v=v?.next)"H"==v?.type?x+=`H${v?.x*r+a}`:"V"==v?.type&&(x+=`V${v?.y*r+o}`);x+="Z"}return x}(t,{scale:1})));console.log("change:",t),this.dispatchEvent(new CustomEvent("change",{detail:{value:t}}))}#A=0;#O(){clearInterval(this.#A),this.#A=window.setTimeout(this.#R.bind(this),1e3)}#k(t,e,i){if(t>=this.width||t<0)return;if(e>=this.height||e<0)return;const s=this.size+this.gridSize;this.#g.clearRect(t*s,e*s,this.size,this.size),this.#b.clearRect(t*s,e*s,this.size,this.size),this.#C.clearRect(t*s,e*s,this.size,this.size),0!==this.#m[i][3]&&(this.#b.fillStyle=k,this.#b.fillRect(t*s-this.gridSize+1,e*s-this.gridSize+1,this.size+2*this.gridSize-2,this.size+2*this.gridSize-2),this.#b.fillStyle=F(this.#m[i]),this.#b.fillRect(t*s+1,e*s+1,this.size-2,this.size-2)),0!==this.#m[i][3]&&(this.#C.fillStyle=F(this.#m[i]),this.#C.fillRect(t*s,e*s,this.size,this.size)),this.#g.drawImage(this.#x,t*s,e*s,this.size+2,this.size+2,t*s,e*s,this.size+2,this.size+2),this.#g.drawImage(this.#i?this.#w:this.#L,t*s,e*s,this.size+2,this.size+2,t*s,e*s,this.size+2,this.size+2),this.#y[this.#h][e][t]=i,this.#O()}#H(){for(let t=0;t<this.height;t++)for(let e=0;e<this.width;e++)this.#k(e,t,this.#y[this.#h][t][e])}#I(t,e,i){const s=this.size+this.gridSize,n=this.width*s-this.gridSize,r=this.height*s-this.gridSize,{minX:a,maxX:o,minY:h,maxY:l}=t.reduce(((t,s)=>({minX:Math.min(t.minX,s.x,e),maxX:Math.max(t.maxX,s.x,e),minY:Math.min(t.minY,s.y,i),maxY:Math.max(t.maxY,s.y,i)})),{minX:this.width,maxX:0,minY:this.height,maxY:0}),c=a*s,d=h*s,p=(o-a+1)*s,y=(l-h+1)*s;this.#g.clearRect(c,d,p,y),this.#g.drawImage(this.#x,c,d,p,y,c,d,p,y),this.#g.drawImage(this.#w,c,d,p,y,c,d,p,y),this.#S.clearRect(0,0,n,r),t.forEach((({x:t,y:e})=>{this.#S.fillStyle=k,this.#S.beginPath(),this.#S.arc(t*s+5,e*s+5,3,0,2*Math.PI),this.#S.closePath(),this.#S.fill(),this.#S.fillStyle="#1B79C8",this.#S.beginPath(),this.#S.arc(t*s+5,e*s+5,2,0,2*Math.PI),this.#S.closePath(),this.#S.fill()})),this.#g.drawImage(this.#E,c,d,p,y,c,d,p,y),this.dispatchEvent(new CustomEvent("debug",{detail:{x:c,y:d,width:p,height:y,canvas:this.$canvas,context:this.#g,editLayer:this.#w,noEditLayer:this.#L,baseLayer:this.#x,previewLayer:this.#E}}))}handleKeyDown(t){switch(console.log(t.shiftKey,t.ctrlKey,t.altKey,t.key),t.key){case" ":console.log("space");break;case"Escape":console.log("escape")}}handleKeyUp(t){}handleContextMenu(t){t?.preventDefault()}handleDoubleClick(t){t?.preventDefault()}#Y;#X;handlePointerDown(t){if(1!==t.buttons&&32!==t.buttons)return t.preventDefault(),void t.stopPropagation();this.#p=t.altKey,this.#c=t.ctrlKey,this.#d=t.shiftKey;const e=this.$canvas.getBoundingClientRect(),i=this.size+this.gridSize;let s=Math.floor((t.clientX-e.left)/i),n=Math.floor((t.clientY-e.top)/i);if(s===this.#a&&n===this.#o)return;s>=this.width&&(s=this.width-1),n>=this.height&&(n=this.height-1),this.#e=!0,this.#s=this.#y[this.#h][n][s],this.#n=s,this.#r=n,this.#a=s,this.#o=n;const r=32===t.buttons?0:1;if(0===this.#t)this.#k(s,n,r),this.#y[this.#h][n][s]=r;console.log(this.#t,s,n),this.#Y=this.handlePointerMove.bind(this),document.addEventListener("pointermove",this.#Y),this.#X=this.handlePointerUp.bind(this),document.addEventListener("pointerup",this.#X)}#U=!1;handlePointerUpGlobal(){this.#U&&(this.handlePointerUp({clientX:100,clientY:100}),this.cleanupPointerGlobal())}cleanupPointerGlobal(){document.removeEventListener("pointermove",this.#Y),document.removeEventListener("pointerup",this.#X)}handlePointerUp(t){const e=this.$canvas.getBoundingClientRect(),i=this.size+this.gridSize;let s=Math.floor((t.clientX-e.left)/i),n=Math.floor((t.clientY-e.top)/i);if(s===this.#n&&n===this.#r&&1===this.#s){if(0===this.#t)this.#k(s,n,0),this.#y[this.#h][n][s]=0}else switch(this.#t){case 1:R(this.#n,this.#r,s,n).forEach((({x:t,y:e})=>{this.#k(t,e,1)}));break;case 2:A(this.#n,this.#r,s,n).forEach((({x:t,y:e})=>{this.#k(t,e,1)}));break;case 3:O(this.#n,this.#r,s,n).forEach((({x:t,y:e})=>{this.#k(t,e,1)}));break;case 4:case 5:$(this.#n,this.#r,s,n).forEach((({x:t,y:e})=>{this.#k(t,e,1)}))}this.#a=-1,this.#o=-1,this.#e=!1,this.cleanupPointerGlobal()}handlePointerMove(t){const e=this.$canvas;if(this.#e){this.#p=t.altKey,this.#c=t.ctrlKey,this.#d=t.shiftKey;const s=this.#y,n=e.getBoundingClientRect(),r=this.size+this.gridSize,a=[],o=this.#n,h=this.#r,l=this.#a,c=this.#o;if("function"==typeof t.getCoalescedEvents){const e=t.getCoalescedEvents();for(const t of e){let e=Math.floor((t.clientX-n.left)/r),i=Math.floor((t.clientY-n.top)/r);e===l&&i===c||a.push([e,i])}}else{let e=Math.floor((t.clientX-n.left)/r),i=Math.floor((t.clientY-n.top)/r);if(e===l&&i===c)return;a.push([e,i])}const d=32===t.buttons?0:1;if(0===a.length)return;const[p,y]=a.at(-1);switch(this.#a=p,this.#o=y,this.#t){case 0:for(var i of a)this.#k(i[0],i[1],d),s[this.#h][i[1]][i[0]]=d;break;case 1:this.#I(R(o,h,p,y),l,c);break;case 2:this.#I(A(o,h,p,y),l,c);break;case 3:this.#I(O(o,h,p,y),l,c);break;case 4:case 5:this.#I($(o,h,p,y),l,c)}}}handlePointerEnter(t){this.#e||this.#i||(this.#i=!0,this.#g.drawImage(this.#x,0,0),this.#g.drawImage(this.#i?this.#w:this.#L,0,0)),this.#U=!1}handlePointerLeave(t){this.#e?this.#i&&(this.#U=!0):(this.#i=!1,this.#g.drawImage(this.#x,0,0),this.#g.drawImage(this.#i?this.#w:this.#L,0,0))}#$(){this.#g.drawImage(this.#x,0,0),this.#g.drawImage(this.#L,0,0)}mergeColor(t,e){}clear(){const t=H(this.width,this.height);!function(t,e){const i=[],s=t[0].length,n=t.length,r=e[0].length,a=e.length,o=Math.max(s,r),h=Math.max(n,a);for(let s=0;s<h;s++)for(let n=0;n<o;n++){const r=e&&e[s]&&e[s][n],a=t&&t[s]&&t[s][n];r!==a&&i.push([n,s,a,r])}}(this.#y[this.#h],t);this.#u.push({type:T.Group,data:{name:"Clear"}}),this.#u.push({type:T.Pixel,data:{pixels:[],layer:this.#h}}),this.#y=[H(this.width,this.height)],this.#$()}reset(){this.#M=!0,this.#P()}clearHistory(){this.#u=[],this.#f=[]}applyTemplate(t){this.#y=[t],this.#H()}flipHorizontal(){const t=P(this.#y[this.#h]),e=t[0].length-1;I(this.#y[this.#h],((i,s)=>{t[s][i]=this.#y[this.#h][s][e-i]})),this.#y[this.#h]=t}flipVertical(){const t=P(this.#y[this.#h]),e=t.length-1;I(this.#y[this.#h],((i,s)=>{t[this.#h][s][i]=this.#y[e-s][i]})),this.#y[this.#h]=t}move(t,e){const i=H(this.width,this.height);for(let t=0;t<this.height;t++)i[t].fill(0);I(this.#y[this.#h],((s,n)=>{n-e<0||s-t<0||n-e>=this.height||s-t>=this.width||(i[n][s]=this.#y[this.#h][n-e][s-t])})),this.#y[this.#h]=i}invert(){this.#m.length>2||(I(this.#y[this.#h],((t,e)=>{this.#y[this.#h][e][t]=0===this.#y[this.#h][e][t]?1:0})),this.#H())}applyGuides(){const t=D(this.width,this.height,this.size,this.gridSize);this.#v.drawImage(t,0,0)}clearGuides(){}undo(){const t=this.#u.pop();if(t&&t.type===T.Pixel)this.#f.push(t),t.data.pixels.forEach((t=>{const[e,i]=t;this.#y[this.#h][i][e]=t[2]}))}redo(){}rotateClockwise(){this.#j(!1)}rotateCounterclockwise(){this.#j(!0)}#j(t=!1){const e=P(this.#y[this.#h]);if(t){const t=this.#y[0].map(((t,e)=>this.#y.map((t=>t[t.length-1-e]))));for(let i=0;i<this.height;i++)for(let s=0;s<this.width;s++)e[i][s]=t[this.#h][i][s]}else{const t=this.#y[0].map(((t,e)=>this.#y.map((t=>t[e])).reverse()));for(let i=0;i<this.height;i++)for(let s=0;s<this.width;s++)e[i][s]=t[this.#h][i][s]}this.#y[this.#h]=e}hasUndo(){return 0!==this.#u.length}hasRedo(){return 0!==this.#f.length}inputModePixel(){this.#t=0}inputModeLine(){this.#t=1}inputModeRectangle(){this.#t=2}inputModeRectangleOutline(){this.#t=3}inputModeEllipse(){this.#t=4}inputModeEllipseOutline(){this.#t=5}async save(t={}){const e={width:this.width,height:this.height,transparent:this.transparent,colors:this.#m,layers:this.#l,data:this.#y};!0===t.history&&(e.undo=this.#u,e.redo=this.#f);for(let t=0;t<e.data.length;t++)for(let i=e.data[t].length-1;i>=0;i--)if(i>=this.height)e.data[t].pop();else for(let s=e.data[t][i].length-1;s>=0;s--)s>=this.width&&e.data[t][i].pop();return e}async open(t){if("object"!=typeof t)return["json must be type object"];const e=[],i=Object.keys(t);["width","height","transparent","colors","layers","data"].forEach((t=>{i.includes(t)||e.push(`JSON key '${t}' required.`)})),this.width=t.width,this.height=t.height,this.transparent=t.transparent,this.#m=t.colors,this.#l=t.layers,this.#y=t.data,t.undo&&(this.#u=t.undo),t.redo&&(this.#f=t.redo),this.#P()}})})()})();