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

svoboda/pechatalka/system/models/paper.php

@@ -151,9 +151,6 @@ final class paper extends core
 					$image->setImageUnits(imagick::RESOLUTION_PIXELSPERCENTIMETER);
 					$image->setimagematte(true);
 
-					// Initializing the layer image height before resizing
-					$before = $image->getImageHeight();
-
 					// Resizing the layer image
 					$image->adaptiveResizeImage((int) round($blank['width'] * $layer['scale']), 0);
 
@@ -165,10 +162,8 @@ final class paper extends core
 					}
 
 					// Calculating the layer image coordinates by the layer image mask
-					$vertical = $blank['height'] - $before;
-					$layer['x'] = (int) round($layer['x'] * $ratio['width'] + ($blank['width'] - $image->getImageWidth()) / 2);
-					$layer['y'] = (int) round($layer['y'] * $ratio['height'] + ($blank['height'] - $image->getImageHeight() + ($vertical > 0 ? $vertical : 0)) / 2);
-					unset($before, $vertical);
+					$layer['x'] = (int) round(($layer['x'] - ($canvas['width'] - $layer['width']) / 2) * $ratio['width'] + ($blank['width'] - $image->getImageWidth()) / 2);
+					$layer['y'] = (int) round(($layer['y'] - ($canvas['height'] - $layer['height']) / 2) * $ratio['height'] + ($blank['height'] - $image->getImageHeight()) / 2);
 
 					// Compositing the layer image mask with the layer image
 					$image->compositeImage(

svoboda/pechatalka/system/public/js/modules/generator.mjs

@@ -148,15 +148,20 @@ Object.assign(
 						if (typeof index === "number") {
 							// Initialized the layer index
 
-							// Initializing the layer
-							product[index] ??= {};
+							// Calculating the difference between the canvas and the layer
+							const difference = { 
+								width: canvas.offsetWidth - layer.offsetWidth, 
+								height: canvas.offsetHeight - layer.offsetHeight
+							};
 
-							// Writing the layer parameters
-							product[index].x =
-								parseInt(layer.style.getPropertyValue("left")) || 0;
-							product[index].y =
-								parseInt(layer.style.getPropertyValue("top")) || 0;
-							product[index].scale = parseFloat(layer.style.getPropertyValue("scale") || 1);
+							// Initializing the layer
+							product[index] = {
+								x: parseInt(layer.style.getPropertyValue("left")) || (difference.width > 0 ? difference.width / 2 : 0),
+								y: parseInt(layer.style.getPropertyValue("top")) || (difference.height > 0 ? difference.height / 2 : 0),
+								width: parseInt(layer.offsetWidth),
+								height: parseInt(layer.offsetHeight),
+								scale: parseFloat(layer.style.getPropertyValue("scale") || 1)
+							};
 
 							// Initializing the layer type
 							const type = layer.getAttribute("data-layer-type");

svoboda/pechatalka/system/public/js/pages/generator/pin.js

@@ -13,6 +13,12 @@ core.modules.connect(["generator", "pechatalka"])
 			]),
 		);
 
+		// Activating the keyboard function
+		instance.keyboard();
+
+		// Activating the drag and drop function
+		instance.dragdrop();
+
 		// instence.layers.set('interface', true)
 
 		// Reinitializing the `layer create` event

svoboda/pechatalka/system/public/themes/default/css/pages/generator/pin.css

@@ -93,14 +93,31 @@ div#pechatalka {
 		position: relative;
 		width: var(--diameter-cut, 300px);
 		height: var(--diameter-cut, 300px);
+		box-sizing: border-box;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		overflow: clip;
 		border-radius: 100%;
-		border: 2px solid var(--background-color-inverted);
+		outline: 2px solid var(--background-color-inverted);
 		background-color: var(--paper, var(--white, #fff));
 
+		&:is(.drag) {
+			&:before {
+				opacity: 1;
+				background: radial-gradient(1px,
+						transparent calc(var(--diameter-display, 77.08%) / 2),
+						#53decbab);
+				transition: opacity 0s, background 0s;
+			}
+		}
+
+		&:not(.drag) {
+			&:before {
+				transition: opacity 0.1s ease-out, background 0.1s ease-out;
+			}
+		}
+
 		&:before {
 			z-index: 500;
 			position: absolute;
@@ -112,7 +129,6 @@ div#pechatalka {
 			background: radial-gradient(1px,
 					transparent calc(var(--diameter-display, 77.08%) / 2),
 					#000a);
-			transition: opacity 0.1s ease-out;
 		}
 
 		&:has(div.layer) {
@@ -153,7 +169,7 @@ div#pechatalka {
 			/* min-width: 50%;
 			max-width: 200%; */
 			width: calc(var(--diameter-cut, var(--width, 100%)) + var(--width-zoom, 0px));
-			height: calc(var(--diameter-cut, var(--width, 100%)) + var(--width-zoom, 0px));
+			/* height: calc(var(--diameter-cut, var(--width, 100%)) + var(--width-zoom, 0px)); */
 			cursor: grab;
 			display: flex;
 			place-items: center;
@@ -171,28 +187,29 @@ div#pechatalka {
 			}
 
 			>button {
-				&:is(:disabled, [disabled="true"], .disabled) {
-					display: none !important;
-					pointer-events: none !important;
-				}
-
 				&:is(.delete) {
 					--offset: 5px;
 					--size: 40px;
 					z-index: 1500;
-					position: fixed;
-					margin-top: var(--offset);
-					margin-left: calc((var(--size, 40px) + var(--offset)) * -1);
+					position: absolute;
+					top: calc(var(--vertical-difference, 0px) / 2 + var(--offset, 5px));
+					right: calc(var(--image-right, 0px) + var(--offset, 5px));
 					width: var(--size, 40px);
 					height: var(--size, 40px);
 					display: inline-flex;
 					justify-content: center;
 					align-items: center;
-					mix-blend-mode: overlay;
-
-					&:hover {
-						mix-blend-mode: normal;
+					opacity: 1;
+					pointer-events: all;
+					border: unset;
+					background: unset;
+					transition: pointer-events 0s, opacity 0.1s ease-in;
 				}
+
+				&:is(:disabled, [disabled="true"], .disabled) {
+					opacity: 0;
+					pointer-events: none !important;
+					transition: pointer-events 0s linear 0.1s, opacity 0.1s ease-out;
 				}
 			}
 		}