pechatalka.mjs/pechatalka.min.mjs

"use strict";export default class pechatalka{#wrap=document.getElementById("pechatalka");get wrap(){return this.#wrap}#canvas=document.getElementById("pechatalka")?.querySelector(".canvas");get canvas(){return this.#canvas}#result=document.getElementById("pechatalka")?.querySelector(".result");get result(){return this.#result}#layers=new Set();get layers(){return this.#layers}#cost=0;get cost(){return this.#cost}prices={pin:{image:150}};constructor(wrap,canvas,result,inject=false){if(wrap instanceof HTMLElement){this.#wrap=wrap;if(inject){this.#wrap.pechatalka=this}}if(canvas instanceof HTMLElement){this.#canvas=canvas}if(result instanceof HTMLElement){this.#result=result}}moving(target){const canvas=this.#canvas;const from={x:0,y:0};function moving(event){target.style.left=event.clientX-from.x+"px";target.style.top=event.clientY-from.y+"px"}function restore(){target.style.top=target.style.left=null}function start(event){if(event.button===0){[from.x,from.y]=[event.clientX-(parseInt(target.style.left)||0),event.clientY-(parseInt(target.style.top)||0)];window.addEventListener("mousemove",moving,true)}}function end(){window.removeEventListener("mousemove",moving,true)}target.addEventListener("mousedown",start,false);window.addEventListener("mouseup",end,false);canvas.addEventListener("mouseleave",end,false)}scaling(target,type="scale"){function scroll(event){if(type==="scale"){let scale=(parseFloat(target.style.scale)||1)+event.deltaY/1000;if(scale<0.4){scale=0.4}else if(scale>3){scale=3}target.style.scale=scale}else if(type==="width"){const change=event.deltaY/2;const cut=target.parentElement.offsetWidth;const bounds={minimum:cut/2-cut,maximum:cut*2-cut};let zoom=(parseFloat(target.style.getPropertyValue("--width-zoom"))||0)+change;if(zoom<bounds.minimum){zoom=bounds.minimum}else if(zoom>bounds.maximum){zoom=bounds.maximum}else{target.style.left=(parseInt(target.style.left)||0)-change/2+"px";target.style.top=(parseInt(target.style.top)||0)-change/2+"px"}target.style.setProperty("--width-zoom",zoom+"px")}}target.addEventListener("wheel",scroll,false)}image(file){const identifier=this.#layers.entries.length??1;const layer=document.createElement("div");layer.classList.add("layer");layer.setAttribute("id","pechatalka_layer_"+identifier);const button_delete=document.createElement("button");button_delete.classList.add("delete","rounded");button_delete.addEventListener("click",(event)=>{layer.remove();this.#cost-=this.prices.pin.image??0;this.#result.querySelector(".cost").innerText=this.#cost});const trash=document.createElement("i");trash.classList.add("icon","trash");const image=document.createElement("img");image.classList.add("rounded");image.setAttribute("draggable",false);image.setAttribute("src",URL.createObjectURL(file));layer.appendChild(image);button_delete.appendChild(trash);layer.appendChild(button_delete);this.#canvas.appendChild(layer);this.#cost+=this.prices.pin.image??0;this.#result.querySelector(".cost").innerText=this.#cost;this.moving(layer);this.scaling(layer)}}