From daadc69587e21180f74283f9e578759d3beb0c6a Mon Sep 17 00:00:00 2001
From: 0x04 <0x04@users.noreply.github.com>
Date: Wed, 25 Sep 2024 13:42:38 +0000
Subject: [PATCH] deploy: 757b09bb29e455508e4e3b724f912d276ec5cbb6

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 10fa157..3d429c3 100644
--- a/index.html
+++ b/index.html
@@ -35,8 +35,8 @@
       }
     }
   </style>
-  <script type="module" crossorigin>var w=Object.defineProperty;var L=(l,t,e)=>t in l?w(l,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):l[t]=e;var i=(l,t,e)=>L(l,typeof t!="symbol"?t+"":t,e);(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))n(s);new MutationObserver(s=>{for(const a of s)if(a.type==="childList")for(const o of a.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&n(o)}).observe(document,{childList:!0,subtree:!0});function e(s){const a={};return s.integrity&&(a.integrity=s.integrity),s.referrerPolicy&&(a.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?a.credentials="include":s.crossOrigin==="anonymous"?a.credentials="omit":a.credentials="same-origin",a}function n(s){if(s.ep)return;s.ep=!0;const a=e(s);fetch(s.href,a)}})();class p{constructor(){i(this,"data",{});this.read()}static get KEY(){return"emojiPaint"}read(){this.data=JSON.parse(localStorage.getItem(p.KEY))??{}}write(){localStorage.setItem(p.KEY,JSON.stringify(this.data))}getItem(t){return this.data[t]}setItem(t,e){this.data[t]=e}mergeItem(t,e){var n,s;if((e==null?void 0:e.constructor)===Object||(e==null?void 0:e.constructor)===Array){if(((n=this.data[t])==null?void 0:n.constructor)===Object){this.data[t]={...this.data[t],...e};return}if(((s=this.data[t])==null?void 0:s.constructor)===Array){this.data[t]=[...this.data[t],...e];return}this.setItem(t,e)}}}const c="⬜",d=[{name:"Squares",entries:["⬛","⬜","🟥","🟦","🟧","🟨","🟩","🟪","🟫"]},{name:"Circles",entries:["⚫","⚪","🔴","🔵","🟠","🟡","🟢","🟣","🟤"]},{name:"Symbols",entries:["⏹️","✳️","✴️","❇️","❎","🅿️","🆙"]},{name:"Custom",entries:["👤"]}];class y{constructor(){i(this,"width",10);i(this,"height",10);i(this,"blank",c);i(this,"separator",`
-`);i(this,"matrix",null)}setup(t=this.width,e=this.height,n=this.blank,s=this.separator){this.width=t,this.height=e,this.blank=n,this.separator=s,this.matrix=new Array(this.height).fill(void 0).map(()=>new Array(this.width).fill(n))}clear(){for(let t=0;t<this.width;t++)for(let e=0;e<this.height;e++)this.matrix[e][t]=this.blank}set(t,e,n){if(t>=0&&t<this.width&&e>=0||e<this.height)this.matrix[e][t]=n;else throw new RangeError("out of range!")}toString(){return this.matrix.reduce((t,e)=>t+e.join("")+this.separator,"")}}class u{constructor(t=0,e=0){i(this,"x",0);i(this,"y",0);this.x=t,this.y=e}clone(){return new u(this.x,this.y)}}class m extends u{constructor(e=0,n=0,s=0,a=0){super(e,n);i(this,"width",0);i(this,"height",0);this.width=s,this.height=a}clone(){return new m(this.x,this.y,this.width,this.height)}}class _{constructor(t=c){i(this,"rectangle",null);i(this,"element",null);this.element=document.createElement("div"),this.element.classList.add("emoji-paint__metrics"),this.element.innerText=t}measure(){return document.body.appendChild(this.element),this.rectangle=new m(0,0,this.element.offsetWidth,this.element.offsetHeight),document.body.removeChild(this.element),this.rectangle}}class j{constructor(t=null,e=null){i(this,"gridRect",null);i(this,"cellRect",null);this.setup(t,e)}setup(t,e){this.gridRect=t,this.cellRect=e}isValidCoordinate(t,e){return t>=0&&t<=this.gridRect.width&&e>=0&&e<=this.gridRect.height}getPointFromCoordinate(t,e){return this.isValidCoordinate(t,e)?new u(Math.floor(t/this.cellRect.width),Math.floor(e/this.cellRect.height)):null}getPointFromEvent(t){return this.getPointFromCoordinate(t.offsetX-this.gridRect.x,t.offsetY-this.gridRect.y)}}class x{constructor(t=this.width,e=this.height){i(this,"data",null);i(this,"metrics",null);i(this,"width",0);i(this,"height",0);i(this,"element",null);i(this,"rectangle",null);i(this,"mouseGrid",null);this.data=new y,this.metrics=new _,this.element=document.createElement("div"),this.element.classList.add("emoji-paint__canvas"),this.element.addEventListener("contextmenu",n=>n.preventDefault()),this.setup(t,e)}setup(t,e){this.width=t,this.height=e;const{element:n,data:s,metrics:a}=this;s.setup(this.width,this.height),a.measure(),n.innerText=s.toString(),this.rectangle=new m(0,0,n.clientWidth,n.clientHeight),this.mouseGrid=new j(this.rectangle,this.metrics.rectangle)}draw(t,...e){e.forEach(n=>this.data.set(n.x,n.y,t)),this.element.innerText=this.data.toString()}clear(){confirm("Are you sure?")&&(this.data.clear(),this.element.innerText=this.data.toString())}}class S{constructor(){i(this,"value",{left:c,right:c});i(this,"elements",{container:null,selectionLeft:null,selectionRight:null});this.onPaletteSelectionChange=this.onPaletteSelectionChange.bind(this);const t=this.elements.container=document.createElement("div"),e=this.elements.selectionLeft=document.createElement("div"),n=this.elements.selectionRight=document.createElement("div");t.classList.add("emoji-paint__palette-selection"),e.classList.add("emoji-paint__palette-selection-left"),e.textContent=c,e.title="Left mouse button",n.classList.add("emoji-paint__palette-selection-right"),n.textContent=c,n.title="Right mouse button",t.append(e,n),document.addEventListener("paletteSelectionChange",this.onPaletteSelectionChange)}onPaletteSelectionChange(t){const{selectionLeft:e,selectionRight:n}=this.elements,{selected:s,mouseButton:a}=t.detail;switch(a){default:this.value.left=s,e.textContent=s;break;case 2:this.value.right=s,n.textContent=s;break}}}class M{constructor(){i(this,"element",null);this.onChange=this.onChange.bind(this),this.element=document.createElement("select"),this.element.classList.add("emoji-paint__palette_dropdown"),this.element.addEventListener("change",this.onChange)}setup(t=d){for(;this.element.childElementCount;)this.element.removeChild(this.element.firstChild);const e=t.map(n=>{const s=document.createElement("option");return s.text=s.value=n.name,s});this.element.append(...e)}dispatchChange(){const e={paletteName:this.element.selectedOptions.item(0).value},n=new CustomEvent("paletteDropdownChange",{bubbles:!0,cancelable:!1,detail:e});this.element.dispatchEvent(n)}onChange(){this.dispatchChange()}}const I=l=>[...new Intl.Segmenter().segment(l)].map(t=>t.segment);class D{constructor(t){i(this,"elements",{container:null,btnEdit:null,btnReset:null,inputEdit:null});i(this,"palette",null);i(this,"valueCurrent",null);this.onBtnEditClick=this.onBtnEditClick.bind(this),this.onBtnResetClick=this.onBtnResetClick.bind(this),this.onInputEditBlur=this.onInputEditBlur.bind(this),this.onInputEditKeyPress=this.onInputEditKeyPress.bind(this),this.onPaletteChange=this.onPaletteChange.bind(this),document.addEventListener("paletteDropdownChange",this.onPaletteChange),this.palette=t;const e=this.elements.container=document.createElement("div"),n=this.elements.btnEdit=document.createElement("button"),s=this.elements.btnReset=document.createElement("button"),a=this.elements.inputEdit=document.createElement("textarea");e.classList.add("emoji-paint__palette-editor"),n.classList.add("emoji-paint__palette-editor-btn-edit","emoji-paint__icon-btn"),n.title="Edit palette",n.textContent="✏️",n.addEventListener("click",this.onBtnEditClick),s.classList.add("emoji-paint__palette-editor-btn-reset","emoji-paint__icon-btn"),s.title="Reset palette",s.textContent="🧹",s.addEventListener("click",this.onBtnResetClick),a.classList.add("emoji-paint__palette-editor-input-edit"),a.addEventListener("blur",this.onInputEditBlur),a.addEventListener("keypress",this.onInputEditKeyPress),e.append(n,s),this.onPaletteChange()}enable(){const{items:t}=this.palette.elements,{inputEdit:e}=this.elements;e.value=this.valueCurrent,e.style.setProperty("height",`${t.offsetHeight}px`),t.replaceWith(e),e.focus()}disable(){const{items:t}=this.palette.elements,{inputEdit:e}=this.elements;e.replaceWith(t),this.dispatchChange()}isEmoji(t){return new RegExp("(?!\\d)\\p{Emoji}","u").test(t)}dispatchChange(t=this.elements.inputEdit.value){const e={name:this.palette.paletteCurrent.name,entries:[...new Set(I(t))]},n=e.entries.join("");if(!(this.valueCurrent!==n))return;const a={palette:e},o=new CustomEvent("paletteEditorChange",{detail:a,bubbles:!0,cancelable:!1});this.valueCurrent=n,this.elements.btnReset.disabled=!1,this.elements.container.dispatchEvent(o)}onBtnEditClick(){this.enable()}onBtnResetClick(){const t=this.palette.paletteCurrent.name,e=d.find(n=>n.name===t);this.dispatchChange(e.entries.join("")),this.elements.btnReset.disabled=!0}onInputEditKeyPress(t){switch(t.code){default:const e=String.fromCharCode(t.charCode);this.isEmoji(e)||(t.preventDefault(),alert("This not a valid emoji character!"));break;case"Enter":t.target.blur();break}}onInputEditBlur(){this.disable()}onPaletteChange(){const t=this.palette.paletteCurrent,e=d.find(n=>n.name===t.name);this.elements.btnReset.disabled=!e||t.entries.length===e.entries.length&&t.entries.every((n,s)=>n===e.entries.at(s)),this.valueCurrent=t.entries.join("")}}const h=class h{constructor(t=null){i(this,"elements",{container:null,items:null});i(this,"editor",null);i(this,"dropdown",null);i(this,"paletteCurrent",null);i(this,"palettes",null);i(this,"selection",null);i(this,"storage",null);this.onMouseDown=this.onMouseDown.bind(this),this.onDropdownChange=this.onDropdownChange.bind(this),this.onEditorChange=this.onEditorChange.bind(this),document.addEventListener("paletteDropdownChange",this.onDropdownChange),document.addEventListener("paletteEditorChange",this.onEditorChange),this.storage=t,this.palettes=structuredClone(d);let e=this.storage.getItem(h.STORAGE_KEY)??[];if(e.constructor===Object){const a=e;e=[];for(const[o,r]of Object.entries(a))e.push({name:o,entries:[...r]});this.storage.setItem(h.STORAGE_KEY,e),this.storage.write()}e.forEach(a=>{const o=this.palettes.findIndex(r=>r.name===a.name);if(o<0){this.palettes.push(a);return}this.palettes[o]=a}),this.paletteCurrent=this.palettes.at(0);const n=this.elements.container=document.createElement("div"),s=this.elements.items=document.createElement("div");n.classList.add("emoji-paint__palette"),s.classList.add("emoji-paint__palette-items"),s.addEventListener("mousedown",this.onMouseDown),s.addEventListener("contextmenu",a=>a.preventDefault()),this.selection=new S(this),this.dropdown=new M,this.editor=new D(this),n.append(this.selection.elements.container,this.dropdown.element,this.editor.elements.container,s),this.dropdown.setup(this.palettes)}static get STORAGE_KEY(){return"palettes"}setup(){const{items:t}=this.elements;for(;t.childElementCount;)t.removeChild(t.lastChild);const e=this.paletteCurrent.entries.map((s,a)=>{const o=document.createElement("input");return o.classList.add(h.ITEM_ID),o.type="radio",o.name=h.ITEM_ID,o.value=s,o.dataset.index=a.toString(),o});t.append(...e);const n=new CustomEvent("paletteChange",{bubbles:!0,cancelable:!1,detail:{palette:this.paletteCurrent}});this.elements.container.dispatchEvent(n),this.select()}select(t=0,e=0){const{items:n}=this.elements;if(!(t in n.children))return;const s=this.paletteCurrent.entries[t],a=n.children.item(t);a.checked=!0;const o={index:t,mouseButton:e,selected:s},r=new CustomEvent("paletteSelectionChange",{bubbles:!0,cancelable:!1,detail:o});this.elements.container.dispatchEvent(r)}onMouseDown(t){this.select(parseInt(t.target.dataset.index),t.button)}onDropdownChange(t){this.paletteCurrent=this.palettes.find(e=>e.name===t.detail.paletteName),this.setup()}onEditorChange(t){const e=this.paletteCurrent=t.detail.palette,n=d.find(o=>o.name===e.name);let s=this.storage.getItem(h.STORAGE_KEY)??[];if(this.palettes=this.palettes.map(o=>o.name===e.name?e:o),e.entries.length===n.entries.length&&e.entries.every((o,r)=>o===n.entries.at(r)))s=s.filter(o=>o.name!==e.name);else{const o=s.findIndex(r=>r.name===e.name);o>-1?s.splice(o,1,e):s.push(e)}this.storage.setItem(h.STORAGE_KEY,s),this.storage.write(),this.setup()}};i(h,"ITEM_ID","emoji-paint__palette-item");let b=h;class P{constructor(t,e){i(this,"canvas",null);i(this,"palette",null);i(this,"button",0);i(this,"isMouseDown",!1);i(this,"point",null);i(this,"prevPoint",null);this.canvas=t,this.palette=e,this.onMouseDown=this.onMouseDown.bind(this),this.onMouseMove=this.onMouseMove.bind(this),this.onMouseUp=this.onMouseUp.bind(this)}activate(){const{element:t}=this.canvas;t.addEventListener("mousedown",this.onMouseDown),t.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onMouseUp)}deactivate(){const{element:t}=this.canvas;t.removeEventListener("mousedown",this.onMouseDown),t.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp)}apply(t){const e=this.canvas.mouseGrid.getPointFromEvent(t);return!e||e.x>this.canvas.width-1||e.y>this.canvas.height-1?!1:(this.prevPoint=this.point,this.point=e,!!this.point)}onMouseDown(t){this.button=t.button,this.isMouseDown=!0,this.apply(t)}onMouseMove(t){this.isMouseDown&&this.apply(t)}onMouseUp(){this.isMouseDown&&(this.isMouseDown=!1,this.point=null,this.prevPoint=null)}}const R=(l,t)=>{let e=[],n=l.x,s=l.y,a=t.x,o=t.y;const r=Math.abs(a-n),g=Math.abs(o-s),v=n<a?1:-1,C=s<o?1:-1;let E=r-g;for(;e.push(new u(n,s)),!(n===a&&s===o);){const f=2*E;f>-g&&(E-=g,n+=v),f<r&&(E+=r,s+=C)}return e};class T extends P{apply(t){if(super.apply(t)){const e=R(this.prevPoint??this.point,this.point),n=this.button===2?this.palette.selection.value.right:this.palette.selection.value.left;this.canvas.draw.apply(this.canvas,[n,...e])}}}class B{constructor(t){i(this,"element",null);i(this,"items",{});i(this,"countSeparator",0);i(this,"countSpacer",0);this.element=document.createElement("div"),this.element.classList.add("component-toolbar",t)}attachItem(t,e){this.items[t]=e,this.element.append(e)}attachSeparator(){const t=document.createElement("hr");t.classList.add("emoji-paint__toolbar-separator"),this.attachItem(`separator-${this.countSeparator++}`,t)}attachSpacer(){const t=document.createElement("div");t.classList.add("emoji-paint__toolbar-spacer"),this.attachItem(`spacer-${this.countSpacer++}`,t)}}const O=l=>{const t=window.activeElement,e=document.createElement("textarea");e.className="copy-button-helper",e.value=l,document.body.appendChild(e),e.select(),e.setSelectionRange(0,e.value.length),document.execCommand("copy"),e.remove(),t&&t.focus()};class N extends B{constructor(t){super("emoji-paint__toolbar-top"),this.paint=t,this.setup()}setup(){this.setupBtnCopy(),this.attachSpacer(),this.setupNew(),this.attachSeparator(),this.setupBtnClear()}setupNew(){const t=document.createElement("div"),e=document.createElement("span"),n=document.createElement("input"),s=document.createElement("input"),a=document.createElement("button");t.classList.add("emoji-paint__toolbar-top-new"),e.classList.add("emoji-paint__toolbar-label"),e.innerText="Size",n.type=s.type="number",n.value=this.paint.width,s.value=this.paint.height,a.classList.add("emoji-paint__toolbar-top-btn-new","emoji-paint__icon-btn"),a.title="New Canvas",a.innerText="💥️",a.addEventListener("click",()=>{this.paint.canvas.setup(parseInt(n.value),parseInt(s.value))}),t.append(e,n,s,a),this.attachItem("new",t)}setupBtnClear(){const t=document.createElement("button");t.classList.add("emoji-paint__toolbar-top-btn-clear","emoji-paint__icon-btn"),t.title="Clear Canvas",t.innerText="❌",t.addEventListener("click",()=>{this.paint.canvas.clear()}),this.attachItem("btnCopy",t)}setupBtnCopy(){const t=document.createElement("button");t.classList.add("emoji-paint__toolbar-top-btn-copy","emoji-paint__icon-btn"),t.title="Copy to Clipboard",t.innerText="📋",t.addEventListener("click",()=>{O(this.paint.canvas.data.toString())}),this.attachItem("btnCopy",t)}}class A{constructor(t=document.createElement("div")){i(this,"storage",null);i(this,"canvas",null);i(this,"palette",null);i(this,"tool",null);i(this,"toolbars",{top:null});i(this,"elements",{container:null,head:null,body:null});i(this,"width",10);i(this,"height",10);this.storage=new p,this.canvas=new x,this.palette=new b(this.storage),this.tool=new T(this.canvas,this.palette),this.toolbars.top=new N(this);const{elements:e}=this,n=e.container=t,s=e.head=document.createElement("div"),a=e.body=document.createElement("div");n.classList.add("emoji-paint__container"),s.classList.add("emoji-paint__head"),s.innerText="🎨 EmojiPaint",a.classList.add("emoji-paint__body"),a.append(this.toolbars.top.element,this.canvas.element,this.palette.elements.container),n.append(s,a),this.elements.container.parentElement||document.body.append(this.elements.container)}setup(t=10,e=10){this.width=t,this.height=e,this.canvas.setup(t,e),this.palette.setup(),this.tool.activate()}}const K=new A(document.getElementById("emojiPaint"));K.setup();
+  <script type="module" crossorigin>var C=Object.defineProperty;var L=(l,t,e)=>t in l?C(l,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):l[t]=e;var i=(l,t,e)=>L(l,typeof t!="symbol"?t+"":t,e);(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))n(s);new MutationObserver(s=>{for(const a of s)if(a.type==="childList")for(const o of a.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&n(o)}).observe(document,{childList:!0,subtree:!0});function e(s){const a={};return s.integrity&&(a.integrity=s.integrity),s.referrerPolicy&&(a.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?a.credentials="include":s.crossOrigin==="anonymous"?a.credentials="omit":a.credentials="same-origin",a}function n(s){if(s.ep)return;s.ep=!0;const a=e(s);fetch(s.href,a)}})();class p{constructor(){i(this,"data",{});this.read()}static get KEY(){return"emojiPaint"}read(){this.data=JSON.parse(localStorage.getItem(p.KEY))??{}}write(){localStorage.setItem(p.KEY,JSON.stringify(this.data))}getItem(t){return this.data[t]}setItem(t,e){this.data[t]=e}mergeItem(t,e){var n,s;if((e==null?void 0:e.constructor)===Object||(e==null?void 0:e.constructor)===Array){if(((n=this.data[t])==null?void 0:n.constructor)===Object){this.data[t]={...this.data[t],...e};return}if(((s=this.data[t])==null?void 0:s.constructor)===Array){this.data[t]=[...this.data[t],...e];return}this.setItem(t,e)}}}const h="⬜",d=[{name:"Squares",entries:["⬛","⬜","🟥","🟦","🟧","🟨","🟩","🟪","🟫"]},{name:"Circles",entries:["⚫","⚪","🔴","🔵","🟠","🟡","🟢","🟣","🟤"]},{name:"Symbols",entries:["⏹️","✳️","✴️","❇️","❎","🅿️","🆙"]},{name:"Custom",entries:["👤"]}];class _{constructor(){i(this,"width",10);i(this,"height",10);i(this,"blank",h);i(this,"separator",`
+`);i(this,"matrix",null)}setup(t=this.width,e=this.height,n=this.blank,s=this.separator){this.width=t,this.height=e,this.blank=n,this.separator=s,this.matrix=new Array(this.height).fill(void 0).map(()=>new Array(this.width).fill(n))}clear(){for(let t=0;t<this.width;t++)for(let e=0;e<this.height;e++)this.matrix[e][t]=this.blank}set(t,e,n){if(t>=0&&t<this.width&&e>=0||e<this.height)this.matrix[e][t]=n;else throw new RangeError("out of range!")}toString(){return this.matrix.reduce((t,e)=>t+e.join("")+this.separator,"")}}class u{constructor(t=0,e=0){i(this,"x",0);i(this,"y",0);this.x=t,this.y=e}clone(){return new u(this.x,this.y)}}class m extends u{constructor(e=0,n=0,s=0,a=0){super(e,n);i(this,"width",0);i(this,"height",0);this.width=s,this.height=a}clone(){return new m(this.x,this.y,this.width,this.height)}}class y{constructor(t=h){i(this,"rectangle",null);i(this,"element",null);this.element=document.createElement("div"),this.element.classList.add("emoji-paint__metrics"),this.element.innerText=t}measure(){return document.body.appendChild(this.element),this.rectangle=new m(0,0,this.element.offsetWidth,this.element.offsetHeight),document.body.removeChild(this.element),this.rectangle}}class j{constructor(t=null,e=null){i(this,"gridRect",null);i(this,"cellRect",null);this.setup(t,e)}setup(t,e){this.gridRect=t,this.cellRect=e}isValidCoordinate(t,e){return t>=0&&t<=this.gridRect.width&&e>=0&&e<=this.gridRect.height}getPointFromCoordinate(t,e){return this.isValidCoordinate(t,e)?new u(Math.floor(t/this.cellRect.width),Math.floor(e/this.cellRect.height)):null}getPointFromEvent(t){return this.getPointFromCoordinate(t.offsetX-this.gridRect.x,t.offsetY-this.gridRect.y)}}class x{constructor(t=this.width,e=this.height){i(this,"data",null);i(this,"metrics",null);i(this,"width",0);i(this,"height",0);i(this,"element",null);i(this,"rectangle",null);i(this,"mouseGrid",null);this.data=new _,this.metrics=new y,this.element=document.createElement("div"),this.element.classList.add("emoji-paint__canvas"),this.element.addEventListener("contextmenu",n=>n.preventDefault()),this.setup(t,e)}setup(t,e){this.width=t,this.height=e;const{element:n,data:s,metrics:a}=this;s.setup(this.width,this.height),a.measure(),n.innerText=s.toString(),this.rectangle=new m(0,0,n.clientWidth,n.clientHeight),this.mouseGrid=new j(this.rectangle,this.metrics.rectangle)}draw(t,...e){e.forEach(n=>this.data.set(n.x,n.y,t)),this.element.innerText=this.data.toString()}clear(){confirm("Are you sure?")&&(this.data.clear(),this.element.innerText=this.data.toString())}}class S{constructor(){i(this,"value",{left:h,right:h});i(this,"elements",{container:null,selectionLeft:null,selectionRight:null});this.onPaletteSelectionChange=this.onPaletteSelectionChange.bind(this);const t=this.elements.container=document.createElement("div"),e=this.elements.selectionLeft=document.createElement("div"),n=this.elements.selectionRight=document.createElement("div");t.classList.add("emoji-paint__palette-selection"),e.classList.add("emoji-paint__palette-selection-left"),e.textContent=h,e.title="Left mouse button",n.classList.add("emoji-paint__palette-selection-right"),n.textContent=h,n.title="Right mouse button",t.append(e,n),document.addEventListener("paletteSelectionChange",this.onPaletteSelectionChange)}onPaletteSelectionChange(t){const{selectionLeft:e,selectionRight:n}=this.elements,{selected:s,mouseButton:a}=t.detail;switch(a){default:this.value.left=s,e.textContent=s;break;case 2:this.value.right=s,n.textContent=s;break}}}class D{constructor(){i(this,"element",null);this.onChange=this.onChange.bind(this),this.element=document.createElement("select"),this.element.classList.add("emoji-paint__palette_dropdown"),this.element.addEventListener("change",this.onChange)}setup(t=d){for(;this.element.childElementCount;)this.element.removeChild(this.element.firstChild);const e=t.map(n=>{const s=document.createElement("option");return s.text=s.value=n.name,s});this.element.append(...e)}dispatchChange(){const e={paletteName:this.element.selectedOptions.item(0).value},n=new CustomEvent("paletteDropdownChange",{bubbles:!0,cancelable:!1,detail:e});this.element.dispatchEvent(n)}onChange(){this.dispatchChange()}}const I=l=>[...new Intl.Segmenter().segment(l)].map(t=>t.segment);class M{constructor(t){i(this,"elements",{container:null,btnEdit:null,btnReset:null,inputEdit:null});i(this,"palette",null);i(this,"valueCurrent",null);this.onBtnEditClick=this.onBtnEditClick.bind(this),this.onBtnResetClick=this.onBtnResetClick.bind(this),this.onInputEditBlur=this.onInputEditBlur.bind(this),this.onInputEditKeyPress=this.onInputEditKeyPress.bind(this),this.onPaletteChange=this.onPaletteChange.bind(this),document.addEventListener("paletteDropdownChange",this.onPaletteChange),this.palette=t;const e=this.elements.container=document.createElement("div"),n=this.elements.btnEdit=document.createElement("button"),s=this.elements.btnReset=document.createElement("button"),a=this.elements.inputEdit=document.createElement("textarea");e.classList.add("emoji-paint__palette-editor"),n.classList.add("emoji-paint__palette-editor-btn-edit","emoji-paint__icon-btn"),n.title="Edit palette",n.textContent="✏️",n.addEventListener("click",this.onBtnEditClick),s.classList.add("emoji-paint__palette-editor-btn-reset","emoji-paint__icon-btn"),s.title="Reset palette",s.textContent="🧹",s.addEventListener("click",this.onBtnResetClick),a.classList.add("emoji-paint__palette-editor-input-edit"),a.addEventListener("blur",this.onInputEditBlur),a.addEventListener("keypress",this.onInputEditKeyPress),e.append(n,s),this.onPaletteChange()}enable(){const{items:t}=this.palette.elements,{inputEdit:e}=this.elements;e.value=this.valueCurrent,e.style.setProperty("height",`${t.offsetHeight}px`),t.replaceWith(e),e.focus()}disable(){const{items:t}=this.palette.elements,{inputEdit:e}=this.elements;e.replaceWith(t),this.dispatchChange()}isEmoji(t){return new RegExp("(?!\\d)\\p{Emoji}","u").test(t)}dispatchChange(t=this.elements.inputEdit.value){const e={name:this.palette.paletteCurrent.name,entries:[...new Set(I(t))]},n=e.entries.join("");if(!(this.valueCurrent!==n))return;const a={palette:e},o=new CustomEvent("paletteEditorChange",{detail:a,bubbles:!0,cancelable:!1});this.valueCurrent=n,this.elements.btnReset.disabled=!1,this.elements.container.dispatchEvent(o)}onBtnEditClick(){this.enable()}onBtnResetClick(){const t=this.palette.paletteCurrent.name,e=d.find(n=>n.name===t);this.dispatchChange(e.entries.join("")),this.elements.btnReset.disabled=!0}onInputEditKeyPress(t){switch(t.code){default:const e=String.fromCharCode(t.charCode);this.isEmoji(e)||(t.preventDefault(),alert("This not a valid emoji character!"));break;case"Enter":t.target.blur();break}}onInputEditBlur(){this.disable()}onPaletteChange(){const t=this.palette.paletteCurrent,e=d.find(n=>n.name===t.name);this.elements.btnReset.disabled=!e||t.entries.length===e.entries.length&&t.entries.every((n,s)=>n===e.entries.at(s)),this.valueCurrent=t.entries.join("")}}const c=class c{constructor(t=null){i(this,"elements",{container:null,items:null});i(this,"editor",null);i(this,"dropdown",null);i(this,"paletteCurrent",null);i(this,"palettes",null);i(this,"selection",null);i(this,"storage",null);this.onMouseDown=this.onMouseDown.bind(this),this.onDropdownChange=this.onDropdownChange.bind(this),this.onEditorChange=this.onEditorChange.bind(this),document.addEventListener("paletteDropdownChange",this.onDropdownChange),document.addEventListener("paletteEditorChange",this.onEditorChange),this.storage=t,this.palettes=structuredClone(d);let e=this.storage.getItem(c.STORAGE_KEY)??[];if(e.constructor===Object){const a=e;e=[];for(const[o,r]of Object.entries(a))e.push({name:o,entries:[...r]});this.storage.setItem(c.STORAGE_KEY,e),this.storage.write()}e.forEach(a=>{const o=this.palettes.findIndex(r=>r.name===a.name);if(o<0){this.palettes.push(a);return}this.palettes[o]=a}),this.paletteCurrent=this.palettes.at(0);const n=this.elements.container=document.createElement("div"),s=this.elements.items=document.createElement("div");n.classList.add("emoji-paint__palette"),s.classList.add("emoji-paint__palette-items"),s.addEventListener("mousedown",this.onMouseDown),s.addEventListener("contextmenu",a=>a.preventDefault()),this.selection=new S(this),this.dropdown=new D,this.editor=new M(this),n.append(this.selection.elements.container,this.dropdown.element,this.editor.elements.container,s),this.dropdown.setup(this.palettes)}static get STORAGE_KEY(){return"palettes"}setup(){const{items:t}=this.elements;for(;t.childElementCount;)t.removeChild(t.lastChild);const e=this.paletteCurrent.entries.map((s,a)=>{const o=document.createElement("input");return o.classList.add(c.ITEM_ID),o.type="radio",o.name=c.ITEM_ID,o.value=s,o.dataset.index=a.toString(),o});t.append(...e);const n=new CustomEvent("paletteChange",{bubbles:!0,cancelable:!1,detail:{palette:this.paletteCurrent}});this.elements.container.dispatchEvent(n),this.select()}select(t=0,e=0){const{items:n}=this.elements;if(!(t in n.children))return;const s=this.paletteCurrent.entries[t],a=n.children.item(t);a.checked=!0;const o={index:t,mouseButton:e,selected:s},r=new CustomEvent("paletteSelectionChange",{bubbles:!0,cancelable:!1,detail:o});this.elements.container.dispatchEvent(r)}onMouseDown(t){this.select(parseInt(t.target.dataset.index),t.button)}onDropdownChange(t){this.paletteCurrent=this.palettes.find(e=>e.name===t.detail.paletteName),this.setup()}onEditorChange(t){const e=this.paletteCurrent=t.detail.palette,n=d.find(o=>o.name===e.name);let s=this.storage.getItem(c.STORAGE_KEY)??[];if(this.palettes=this.palettes.map(o=>o.name===e.name?e:o),e.entries.length===n.entries.length&&e.entries.every((o,r)=>o===n.entries.at(r)))s=s.filter(o=>o.name!==e.name);else{const o=s.findIndex(r=>r.name===e.name);o>-1?s.splice(o,1,e):s.push(e)}this.storage.setItem(c.STORAGE_KEY,s),this.storage.write(),this.setup()}};i(c,"ITEM_ID","emoji-paint__palette-item");let E=c;class R{constructor(t,e){i(this,"canvas",null);i(this,"palette",null);i(this,"button",0);i(this,"isMouseDown",!1);i(this,"point",null);i(this,"prevPoint",null);this.canvas=t,this.palette=e,this.onMouseDown=this.onMouseDown.bind(this),this.onMouseMove=this.onMouseMove.bind(this),this.onMouseUp=this.onMouseUp.bind(this)}activate(){const{element:t}=this.canvas;t.addEventListener("mousedown",this.onMouseDown),t.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onMouseUp)}deactivate(){const{element:t}=this.canvas;t.removeEventListener("mousedown",this.onMouseDown),t.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp)}apply(t){const e=this.canvas.mouseGrid.getPointFromEvent(t);return!e||e.x>this.canvas.width-1||e.y>this.canvas.height-1?!1:(this.prevPoint=this.point,this.point=e,!!this.point)}onMouseDown(t){this.button=t.button,this.isMouseDown=!0,this.apply(t)}onMouseMove(t){this.isMouseDown&&this.apply(t)}onMouseUp(){this.isMouseDown&&(this.isMouseDown=!1,this.point=null,this.prevPoint=null)}}const P=(l,t)=>{let e=[],n=l.x,s=l.y,a=t.x,o=t.y;const r=Math.abs(a-n),g=Math.abs(o-s),v=n<a?1:-1,f=s<o?1:-1;let b=r-g;for(;e.push(new u(n,s)),!(n===a&&s===o);){const w=2*b;w>-g&&(b-=g,n+=v),w<r&&(b+=r,s+=f)}return e};class T extends R{apply(t){if(super.apply(t)){const e=P(this.prevPoint??this.point,this.point),n=this.button===2?this.palette.selection.value.right:this.palette.selection.value.left;this.canvas.draw.apply(this.canvas,[n,...e])}}}class B{constructor(t){i(this,"element",null);i(this,"items",{});i(this,"countSeparator",0);i(this,"countSpacer",0);this.element=document.createElement("div"),this.element.classList.add("component-toolbar",t)}attachItem(t,e){this.items[t]=e,this.element.append(e)}attachSeparator(){const t=document.createElement("hr");t.classList.add("emoji-paint__toolbar-separator"),this.attachItem(`separator-${this.countSeparator++}`,t)}attachSpacer(){const t=document.createElement("div");t.classList.add("emoji-paint__toolbar-spacer"),this.attachItem(`spacer-${this.countSpacer++}`,t)}}const O=l=>{const t=window.activeElement,e=document.createElement("textarea");e.className="copy-button-helper",e.value=l,document.body.appendChild(e),e.select(),e.setSelectionRange(0,e.value.length),document.execCommand("copy"),e.remove(),t&&t.focus()};class N extends B{constructor(t){super("emoji-paint__toolbar-top"),this.paint=t,this.setup()}setup(){this.setupBtnCopy(),this.setupBtnDownload(),this.attachSpacer(),this.setupNew(),this.attachSeparator(),this.setupBtnClear()}setupNew(){const t=document.createElement("div"),e=document.createElement("span"),n=document.createElement("input"),s=document.createElement("input"),a=document.createElement("button");t.classList.add("emoji-paint__toolbar-top-new"),e.classList.add("emoji-paint__toolbar-label"),e.innerText="Size",n.type=s.type="number",n.value=this.paint.width,s.value=this.paint.height,a.classList.add("emoji-paint__toolbar-top-btn-new","emoji-paint__icon-btn"),a.title="New Canvas",a.innerText="💥️",a.addEventListener("click",()=>{this.paint.canvas.setup(parseInt(n.value),parseInt(s.value))}),t.append(e,n,s,a),this.attachItem("new",t)}setupBtnClear(){const t=document.createElement("button");t.classList.add("emoji-paint__toolbar-top-btn-clear","emoji-paint__icon-btn"),t.title="Clear Canvas",t.innerText="❌",t.addEventListener("click",()=>{this.paint.canvas.clear()}),this.attachItem("btnCopy",t)}setupBtnCopy(){const t=document.createElement("button");t.classList.add("emoji-paint__toolbar-top-btn-copy","emoji-paint__icon-btn"),t.title="Copy to Clipboard",t.innerText="📋",t.addEventListener("click",()=>{O(this.paint.canvas.data.toString())}),this.attachItem("btnCopy",t)}setupBtnDownload(){const t=document.createElement("button");t.classList.add("emoji-paint__toolbar-top-btn-download","emoji-paint__icon-btn"),t.title="Download",t.innerText="⬇️",t.addEventListener("click",()=>{const e=document.createElement("a"),n=this.paint.canvas.data.toString(),s=new Blob([n],{type:"text/plain"});e.download="emoji-paint.txt",e.href=URL.createObjectURL(s),document.body.append(e),e.click(),e.remove()}),this.attachItem("btnDownload",t)}}class k{constructor(t=document.createElement("div")){i(this,"storage",null);i(this,"canvas",null);i(this,"palette",null);i(this,"tool",null);i(this,"toolbars",{top:null});i(this,"elements",{container:null,head:null,body:null});i(this,"width",10);i(this,"height",10);this.storage=new p,this.canvas=new x,this.palette=new E(this.storage),this.tool=new T(this.canvas,this.palette),this.toolbars.top=new N(this);const{elements:e}=this,n=e.container=t,s=e.head=document.createElement("div"),a=e.body=document.createElement("div");n.classList.add("emoji-paint__container"),s.classList.add("emoji-paint__head"),s.innerText="🎨 EmojiPaint",a.classList.add("emoji-paint__body"),a.append(this.toolbars.top.element,this.canvas.element,this.palette.elements.container),n.append(s,a),this.elements.container.parentElement||document.body.append(this.elements.container)}setup(t=10,e=10){this.width=t,this.height=e,this.canvas.setup(t,e),this.palette.setup(),this.tool.activate()}}const A=new k(document.getElementById("emojiPaint"));A.setup();
 </script>
   <style rel="stylesheet" crossorigin>*,*:before,*:after{box-sizing:border-box}input,button,textarea,select{font:inherit;color:inherit}body{margin:0;padding:1rem;color:#333;font-family:Consolas,monospace}.emoji-paint__metrics{position:absolute}.emoji-paint__container{--canvas-background: #fff;--selection-color: #ffffe0;--label-emoji-text-shadow: 1px 1px 0 #0006;border:1px outset;border-radius:4px;background:#ccc}.emoji-paint__head{padding:.5rem 1rem;border-bottom:1px outset;border-radius:3px 3px 0 0;background:#aaa;font-weight:700}.emoji-paint__head:first-letter{text-shadow:var(--label-emoji-text-shadow)}.emoji-paint__body{display:flex;flex-direction:column;gap:.5rem;padding:1rem}.emoji-paint__icon-btn{padding:1px;line-height:1.1875rem;text-shadow:var(--label-emoji-text-shadow);vertical-align:top}.emoji-paint__toolbar-top{display:flex}.emoji-paint__toolbar-separator{flex:0 1 0;margin-block:.25rem;margin-inline:.5rem}.emoji-paint__toolbar-spacer{flex:1 1 auto}.emoji-paint__toolbar-top-new input[type=number]{width:6ch;text-align:right}.emoji-paint__toolbar-label{margin-inline-end:.5rem}.emoji-paint__canvas{cursor:crosshair;-webkit-user-select:none;user-select:none;padding:.25rem;border:1px inset;overflow:auto;background:var(--canvas-background);white-space:pre}.emoji-paint__canvas,.emoji-paint__metrics{font-size:1rem}.emoji-paint__palette{display:flex;align-items:center;gap:.5rem}.emoji-paint__palette-item{margin:0;border-radius:.25rem;padding:.175rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background-color .25s ease-out}.emoji-paint__palette-item:before{content:attr(value)}.emoji-paint__palette-item:checked{background-color:var(--selection-color)}.emoji-paint__palette_dropdown{flex:0 1 0;align-self:stretch}.emoji-paint__palette-selection{display:flex;align-items:center;gap:.25rem;cursor:default}.emoji-paint__palette-editor-input-edit{flex:1 1 auto;letter-spacing:.35rem}.emoji-paint__palette-selection-left,.emoji-paint__palette-selection-right{position:relative;border:1px inset;border-radius:.25rem;padding:.175rem;background:var(--canvas-background)}.emoji-paint__palette-selection-left:before,.emoji-paint__palette-selection-right:before{position:absolute;border-radius:100%;width:2.5ch;color:#fff;background-color:#339;font-size:.525rem;text-align:center;line-height:2.5ch;aspect-ratio:1}.emoji-paint__palette-selection-left:before{content:"L"}.emoji-paint__palette-selection-right:before{content:"R"}
 </style>