diff --git a/pechatalka.mjs b/pechatalka.mjs index c94542b..4496b04 160000 --- a/pechatalka.mjs +++ b/pechatalka.mjs @@ -1 +1 @@ -Subproject commit c94542bfd3c843d06f3a24611c07da12cc5ae14e +Subproject commit 4496b0464bf93a7dff867f9e3badf216d1a8b092 diff --git a/svoboda/pechatalka/system/models/paper.php b/svoboda/pechatalka/system/models/paper.php index c9cf94e..0d0b747 100644 --- a/svoboda/pechatalka/system/models/paper.php +++ b/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( diff --git a/svoboda/pechatalka/system/public/js/modules/generator.mjs b/svoboda/pechatalka/system/public/js/modules/generator.mjs index 73f3aa1..4c5b1c0 100644 --- a/svoboda/pechatalka/system/public/js/modules/generator.mjs +++ b/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"); diff --git a/svoboda/pechatalka/system/public/js/pages/generator/pin.js b/svoboda/pechatalka/system/public/js/pages/generator/pin.js index 7b85853..e3a7531 100644 --- a/svoboda/pechatalka/system/public/js/pages/generator/pin.js +++ b/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 diff --git a/svoboda/pechatalka/system/public/test.jpg b/svoboda/pechatalka/system/public/test.jpg deleted file mode 100644 index 04ee739..0000000 Binary files a/svoboda/pechatalka/system/public/test.jpg and /dev/null differ diff --git a/svoboda/pechatalka/system/public/themes/default/css/pages/generator/pin.css b/svoboda/pechatalka/system/public/themes/default/css/pages/generator/pin.css index 5602ad9..c9df58f 100644 --- a/svoboda/pechatalka/system/public/themes/default/css/pages/generator/pin.css +++ b/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; } } }