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

README.md

@@ -1,2 +1,51 @@
-# pechatalka
-Chat-robot constructor for the Svoboda typography
+# Pechatalka
+Site and chat-robot constructor for the Svoboda typography
+
+# Installation
+Before process any command think about **what it does** and whether the **paths** are specified correctly<br>
+
+## NGINX
+### Create the NGINX server
+You can copy an example of the server file from here: `/examples/nginx/pechatalka.conf`<br>
+<small><i>I prefer to rename nginx config files to domain names. For example: `pechatalka.kodorvan.tech`</i></small><br>
+
+<i>The file will be half commented out specifically to start the server for generating the TLS/SSL certificate</i><br>
+
+1. `cd /examples/nginx`<br>
+2. `sudo cp pechatalka.conf /etc/nginx/sites-avaiable/pechatalka.conf`<br>
+3. `sudo nvim /etc/nginx/sites-avaiable/pechatalka.conf`<br>
+<small>3.1. <i>Customize the file according to your requirements</i></small><br>
+4. `sudo ln -s /etc/nginx/sites-avaiable/pechatalka.conf /etc/nginx/sites-enabled/pechatalka.conf`<br>
+5. `sudo nginx -t`<br>
+<small>5.1. <i>Make sure that <b>NGINX does not throw errors</b>, otherwise proceed to the instructions for generate a TLS/SSL certificate</i></small><br>
+6. `sudo service nginx restart`<br>
+
+### Add mime-type recognition for javascript modules
+<small>Edit the file: `/etc/nginx/mime.types`</small><br>
+**From:** `application/javascript js;`<br>
+**To:** `application/javascript js mjs;`
+
+### Generate a TLS/SSL sertificate (via [certbot](http://certbot.eff.org/) for [ubuntu](https://ubuntu.com/))
+1. `sudo apt install certbot python3-certbot-nginx`<br>
+2. `sudo certbot certonly --nginx`<br>
+<small><i>The **domain** must already be **bound** to the **IP-address** of the server by `CNAME`, `A` or `AAAA` record</i></small><br>
+3. Uncomment and reconfigure the nginx server file
+4. `sudo nginx -t`<br>
+<small>4.1. <i>Make sure that <b>NGINX does not throw errors</b></i></small><br>
+5. `sudo service nginx restart`
+
+### Set up firewall rules for HTTP and HTTPS requests (for [ubuntu](https://ubuntu.com/))
+1. `sudo ufw allow "NGINX Full"`<br>
+<small>1.1. <i>Make sure that the <b>port for SSH connection</b> is open</i></small><br>
+2. `sudo ufw allow 22`<br>
+<small>2.1. <i>Use your SSH port instead of 22</i></small><br>
+3. `sudo ufw enable`
+
+## SystemD (or any alternative you like)
+You can copy an example of the systemd file from here: `/examples/systemd/arming.service`<br>
+1. `cd examples/systemd`<br>
+2. `sudo cp pechatalka.service /etc/systemd/system/pechatalka.service && sudo chmod +x /etc/systemd/system/pechatalka.service`<br>
+3. `sudo nvim /etc/systemd/system/pechatalka.service`<br>
+<small>3.1. <i>Customize the file according to your requirements</i></small><br>
+4. `sudo systemctl daemon-reload`<br>
+3. `sudo systemctl enable pechatalka`<br>

svoboda/pechatalka/system/models/paper.php

@@ -151,18 +151,19 @@ 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);
-					$image->roundCornersImage($layer['corners'], $layer['corners']);
+
+					if (!empty($layer['corners'])) {
+						// Received the layer image corners
+
+						// Masking the layer image with corners
+						$image->roundCornersImage($layer['corners'], $layer['corners']);
+					}
 
 					// 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(
@@ -175,15 +176,15 @@ final class paper extends core
 					// Drawing the cutting line
 					$draw = new imagick_draw();
 					$draw->setfillcolor($canvas['background'] ?? '#fff');
-					$stroke = 1;
-					$draw->setStrokeOpacity($stroke);
+					$stroke = 2;
+					$draw->setStrokeOpacity(1);
 					$draw->setStrokeColor('#000');
-					$draw->setStrokeWidth(2);
+					$draw->setStrokeWidth($stroke);
 					$draw->circle(
 						$place['x'] + $blank['width'] / 2,
 						$place['y'] + $blank['height'] / 2,
-						round($place['x'] + $blank['width'] / 2 - $stroke),
-						round($place['y'] + $blank['height'])
+						round($place['x'] + $blank['width'] / 2 + $stroke),
+						round($place['y'] + $blank['height'] + $stroke)
 					);
 					$paper->drawimage($draw);
 

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;
+					opacity: 1;
+					pointer-events: all;
+					border: unset;
+					background: unset;
+					transition: pointer-events 0s, opacity 0.1s ease-in;
+				}
 
-					&:hover {
-						mix-blend-mode: normal;
-					}
+				&:is(:disabled, [disabled="true"], .disabled) {
+					opacity: 0;
+					pointer-events: none !important;
+					transition: pointer-events 0s linear 0.1s, opacity 0.1s ease-out;
 				}
 			}
 		}

svoboda/pechatalka/system/views/themes/default/js.html

@@ -1,5 +1,5 @@
 {% block js %}
-	<script src="https://telegram.org/js/telegram-web-app.js"></script>
+	<!-- <script src="https://telegram.org/js/telegram-web-app.js"></script> -->
 	<script src="/js/modules/damper.mjs" type="module"></script>
 	<script src="/js/core.js"></script>
 	<script src="/js/modules/telegram.mjs" type="module"></script>