layer with it own size with positioning X and Y by canvas

pechatalka.mjs

@@ -226,6 +226,18 @@ export default class pechatalka {
 		return this.#events;
 	}
 
+	/**
+	 * @name Control
+	 *
+	 * The CONTROL button press status
+	 *
+	 * @type {boolean}
+	 *
+	 * @protected
+	 */
+	#control = false;
+
+
 	/**
 	 * @name Constructor
 	 *
@@ -271,6 +283,87 @@ export default class pechatalka {
 		}
 	}
 
+	keyboard() {
+		// 
+		let start = 1000;
+
+		//
+		const decrease = 2;
+
+		// Initializing timeouts identifiers for detecting holding buttons
+		let control;
+
+		const control_pressed = function () {
+			this.#control = true;
+
+			clearTimeout(control);
+			control = setTimeout(control_pressed, start);
+			start = start / decrease;
+    }.bind(this);
+
+		window.addEventListener('keydown', function(event) {
+			if (event.keyCode === 17) {
+				// Control
+
+			  //
+				control_pressed();
+			}
+		}.bind(this));
+
+		//
+		window.addEventListener('keyup', function(event) {
+			if (event.keyCode === 17) {
+				// Control
+			 
+				//
+				clearTimeout(control);
+
+				//
+				this.#control = false;
+			}
+		}.bind(this));
+	}
+
+	dragdrop() {
+		//
+		document.addEventListener('dragover', (event) =>	event.preventDefault());
+		document.addEventListener('drop', (event) =>	event.preventDefault());
+
+		//
+		this.#canvas.addEventListener("dragover", function() {
+			// Adding the drag class
+			this.#canvas.classList.add("drag");
+		}.bind(this));
+
+		//
+		this.#canvas.addEventListener("dragleave", function() {
+			// Removing the drag class
+			this.#canvas.classList.remove("drag");
+		}.bind(this));
+
+		this.#canvas.addEventListener("drop", function() {
+			// Removing the drag class
+			this.#canvas.classList.remove("drag");
+
+			// Initializing transfered files
+			const files = event.dataTransfer?.files;
+
+			if (files.length > 0) {
+				// Initialized transfered files
+
+				[...files].forEach((file) => {
+					console.log(file);
+					if (file?.type.startsWith("image/")) {
+						// Image
+
+						// Writing the image
+						this.image(file);
+					} 
+				});
+			}
+		}.bind(this));
+	}
+
 	/**
 	 * @name Global
 	 *
@@ -310,6 +403,9 @@ export default class pechatalka {
 	 * @param {layer} layer
 	 */
 	moving(layer) {
+		// Declaring the difference between the canvas and the layer
+		let difference;
+
 		// Initializing the start moving cursor coordinates buffer
 		const from = { x: 0, y: 0 };
 
@@ -318,7 +414,7 @@ export default class pechatalka {
 		 */
 		function moving(event) {
 			// Writing the X coordinate
-			layer.wrap.style.left = event.clientX - from.x + "px";
+			layer.wrap.style.left = event.clientX - from.x  + "px";
 
 			// Writing the Y coordinate
 			layer.wrap.style.top = event.clientY - from.y + "px";
@@ -336,13 +432,19 @@ export default class pechatalka {
 		 * @name Start
 		 */
 		function start(event) {
+			 // Calculating the difference between the canvas and the layer
+			 difference ??= { 
+				 width: this.#canvas.offsetWidth - layer.wrap.offsetWidth, 
+				 height: this.#canvas.offsetHeight - layer.wrap.offsetHeight
+			 };
+
 			if (event.button === 0) {
 				// Pressed the main mouse button (left by default)
 
 				// Writing the start moving cursor coordinates
 				[from.x, from.y] = [
-					event.clientX - (parseInt(layer.wrap.style.left) || 0),
+					event.clientX - (parseInt(layer.wrap.style.left) || (difference.width > 0 ? difference.width / 2 : 0)),
-					event.clientY - (parseInt(layer.wrap.style.top) || 0),
+					event.clientY - (parseInt(layer.wrap.style.top) || (difference.height > 0 ? difference.height / 2 : 0)),
 				];
 
 				// Initializing the event listener
@@ -359,9 +461,9 @@ export default class pechatalka {
 		}
 
 		// Initializing event listeners
-		layer.wrap.addEventListener("mousedown", start, false);
+		layer.wrap.addEventListener("mousedown", start.bind(this), false);
 		window.addEventListener("mouseup", end, false);
-		this.#canvas.addEventListener("mouseleave", end, false);
+		// this.#canvas.addEventListener("mouseleave", end, false);
 	}
 
 	/**
@@ -380,6 +482,9 @@ export default class pechatalka {
 	 * @param {string} [type='scale'] Type of scaling (scale, width)
 	 */
 	scaling(layer, type = "scale") {
+		// Initializing the link to the instance
+		const instance = this;
+
 		/**
 		 * @name Scroll
 		 */
@@ -387,13 +492,33 @@ export default class pechatalka {
 			if (type === "scale") {
 				// Scaling by changing scale
 
-				// Initializing new scale
+				if ([...instance.#layers].find(layer => layer.wrap === event.target.parentElement)) {
-				let scale = (parseFloat(layer.wrap.style.scale) || 1) +
+					// Cursor above the layer
-					event.deltaY / 1000;
+
+					//
+					event.preventDefault();
+				}
+
+				// Declaring the new scale
+				let scale;
+
+				if (instance.#control) {
+					// Pressed the "control" button
+
+					// Initializing the new scale
+					scale = (parseFloat(layer.wrap.style.scale) || 1) +
+						event.deltaY / 5000;
+				} else {
+					// Not pressed the "control" button
+
+					// Initializing the new scale
+					scale = (parseFloat(layer.wrap.style.scale) || 1) +
+						event.deltaY / 1200;
+				}
 
 				// Normalization and protection against out of scale boundaries
-				if (scale < 0.4) scale = 0.4;
+				if (scale < 0.3) scale = 0.3;
-				else if (scale > 3) scale = 3;
+				else if (scale > 6) scale = 6;
 
 				// Writing the scale
 				layer.wrap.style.scale = scale;
@@ -408,8 +533,8 @@ export default class pechatalka {
 
 				// Initializing bounds for zooming
 				const bounds = {
-					minimum: cut / 1.5 - cut,
+					minimum: cut / 1 - cut,
-					maximum: cut * 1.5 - cut,
+					maximum: cut * 1 - cut,
 				};
 
 				// Initializing new scale
@@ -454,7 +579,7 @@ export default class pechatalka {
 	 */
 	image(file, cost = 0) {
 		// Initializing identifier
-		const identifier = this.#layers.size + 1;
+		const identifier = this.#layers.size + 0;
 
 		// Creating the layer wrap <div> element
 		const wrap = document.createElement("div");
@@ -469,9 +594,12 @@ export default class pechatalka {
 		const trash = document.createElement("i");
 		trash.classList.add("icon", "trash");
 
+		//icon CLOSE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! and ROUND
+
 		// Creating the image <img> element
 		const image = document.createElement("img");
 		image.setAttribute("draggable", false);
+		image.setAttribute("ondragstart", 'return false;');
 		image.setAttribute("src", URL.createObjectURL(file));
 
 		// Writing into the gallery
@@ -480,6 +608,18 @@ export default class pechatalka {
 		wrap.appendChild(button_delete);
 		this.#canvas.appendChild(wrap);
 
+		setTimeout(() => {
+			// Calculating the difference between the canvas and the layer wrap
+		  const difference = { 
+			  width: this.#canvas.offsetWidth - wrap.offsetWidth, 
+			  height: this.#canvas.offsetHeight - wrap.offsetHeight
+		  };
+		
+			// Writing the difference CSS variable into the layer
+			wrap.style.setProperty('left', (difference.width > 0 ? difference.width / 2 : 0) + 'px');
+			wrap.style.setProperty('top', (difference.height > 0 ? difference.height / 2 : 0) + 'px');
+		}, 60);
+
 		// Initializing the layer instance
 		const instance = new layer(
 			"image",