layer class, events, injected parameters

pechatalka.min.mjs

@@ -1 +1 @@
-"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)}}
+"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}#preset=new Map();get preset(){return this.#preset}#cost=0;set cost(value){if(typeof value==="number"){const from=this.#cost;this.#cost=value;if(this.#cost<0){this.#cost=0}this.#events.get("cost")?.get("changed")(this.#cost,from)}}get cost(){return this.#cost}prices={pin:{image:150}};#events=new Map([["layers",new Map([["create",(layer)=>{}]])],["cost",new Map([["changed",(to,from)=>{}]])]]);get events(){return this.#events}constructor(wrap,canvas,result,preset,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}if(preset instanceof Map){this.#preset=preset}}global(name,value=null,preset=false){if(typeof name==="string"){for(const layer of this.#layers){layer.set(name,value)}if(preset){this.#preset.set(name,value)}}}moving(layer){const from={x:0,y:0};function moving(event){layer.wrap.style.left=event.clientX-from.x+"px";layer.wrap.style.top=event.clientY-from.y+"px"}function restore(){layer.wrap.style.top=layer.wrap.style.left=null}function start(event){if(event.button===0){[from.x,from.y]=[event.clientX-(parseInt(layer.wrap.style.left)||0),event.clientY-(parseInt(layer.wrap.style.top)||0)];window.addEventListener("mousemove",moving,true)}}function end(){window.removeEventListener("mousemove",moving,true)}layer.wrap.addEventListener("mousedown",start,false);window.addEventListener("mouseup",end,false);this.#canvas.addEventListener("mouseleave",end,false)}scaling(layer,type="scale"){function scroll(event){if(type==="scale"){let scale=(parseFloat(layer.wrap.style.scale)||1)+event.deltaY/1000;if(scale<0.4){scale=0.4}else if(scale>3){scale=3}layer.wrap.style.scale=scale}else if(type==="width"){const change=event.deltaY/1.5;const cut=target.parentElement.offsetWidth;const bounds={minimum:cut/1.5-cut,maximum:cut*1.5-cut};let zoom=(parseFloat(layer.wrap.style.getPropertyValue("--width-zoom"))||0)+change;if(zoom<bounds.minimum){zoom=bounds.minimum}else if(zoom>bounds.maximum){zoom=bounds.maximum}else{layer.wrap.style.left=(parseInt(layer.wrap.style.left)||0)-change/2+"px";layer.wrap.style.top=(parseInt(layer.wrap.style.top)||0)-change/2+"px"}layer.wrap.style.setProperty("--width-zoom",zoom+"px")}}layer.wrap.addEventListener("wheel",scroll,false)}image(file,cost=0){const identifier=this.#layers.size+1;const wrap=document.createElement("div");wrap.classList.add("layer");wrap.setAttribute("id","pechatalka_layer_"+identifier);const button_delete=document.createElement("button");button_delete.classList.add("delete");const trash=document.createElement("i");trash.classList.add("icon","trash");const image=document.createElement("img");image.setAttribute("draggable",false);image.setAttribute("src",URL.createObjectURL(file));wrap.appendChild(image);button_delete.appendChild(trash);wrap.appendChild(button_delete);this.#canvas.appendChild(wrap);const instance=new layer("image",cost,wrap,image,{delete:button_delete},this.#preset,);this.#layers.add(instance);this.#events.get("layers")?.get("create")(instance);this.cost+=instance.cost;this.moving(instance);this.scaling(instance);button_delete.addEventListener("click",(event)=>{instance.wrap.remove();this.#layers.delete(instance);this.cost-=instance.cost})}}export class layer{#type;set type(value){const types=new Set(["image","film"]);if(types.has(value)){this.#type=value}}get type(){return this.#type}#cost=0;set cost(value){if(typeof value==="number"){const from=this.#cost;this.#cost=value;if(this.#cost<0){this.#cost=0}this.#events.get("cost")?.get("changed")(from,this.#cost)}}get cost(){return this.#cost}#wrap;get wrap(){return this.#wrap}#content;get content(){return this.#content}#buttons=new Map();get buttons(){return this.#buttons}#events=new Map([["cost",new Map([["changed",(to,from)=>{}]])]]);get events(){return this.#events}constructor(type,cost,wrap,content,buttons,preset,inject=false){this.type=type;if(typeof this.#type==="string"){this.cost=cost;if(wrap instanceof HTMLElement){this.#wrap=wrap;if(inject){this.#wrap.layer=this}}if(content instanceof HTMLElement){this.#content=content}if(buttons instanceof Object){for(const[name,element]of Object.entries(buttons)){this.#buttons.set(name,element)}}for(const[name,value]of preset.entries()){this[name]=value}}}set(name,value){const from=this[name];this[name]=value;this.#events.get(name)?.get("set")(this[name],from);return this[name]}toggle(name){this[name]=!this[name]??true;this.#events.get(name)?.get("toggle")(this[name]);return this[name]}}