diff --git a/static/examples/editAvatar/editAvatar.html b/static/examples/editAvatar/editAvatar.html index 703b2a1..79d0fa8 100644 --- a/static/examples/editAvatar/editAvatar.html +++ b/static/examples/editAvatar/editAvatar.html @@ -15,23 +15,27 @@ + + + -

Изменение аватарки

+

Изменение аватарки

-
+ - + -

Аватарка:

+

Аватарка:

- + - + -
+ diff --git a/static/examples/editAvatar/resizeImage.js b/static/examples/editAvatar/resizeImage.js new file mode 100644 index 0000000..7769f3e --- /dev/null +++ b/static/examples/editAvatar/resizeImage.js @@ -0,0 +1,623 @@ +(function () { + + const imageRefactorPage = document.createElement('div'); + const initHTML = () => { + imageRefactorPage.className = 'resize-module resize-module_disable'; + const htmlString = + '
\n' + + '
\n' + + '
\n' + + '
Ваша фотография
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '

Выбранная область будет показываться на вашей странице

\n' + + '

Вы можете изменять размер изображения при помощи колёсика мыши

\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '

Выбранная область будет показываться на вашей странице

\n' + + '

Вы можете изменять размер изображения при помощи стягивания углов

\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '

Выбранная область будет показываться на вашей странице

\n' + + '

Вы можете выбрать необходимый участок изображения

\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + '
\n' + + ' Сохранить изменения\n' + + '
\n' + + '
\n' + + ' Вернуться назад\n' + + '
\n' + + '
\n' + + ' \n' + + '
' + imageRefactorPage.insertAdjacentHTML('beforeend', htmlString); + document.body.appendChild(imageRefactorPage); + } + initHTML(); + + const fileInput = document.querySelector('input[name="avatar"]'); + const targetWidth = Number(fileInput.getAttribute('data-target-width')); + const targetHeight = Number(fileInput.getAttribute('data-target-height')); + const dt = new DataTransfer(); + const resizeWindowWidth = 500; + const resizeWindowHeight = 500; + + let img; + let initImageWidth; + let initImageHeight; + let imageWidth; + let imageHeight; + let zoom = 1; + let zoomDelta = 0; + let zoomVariant = "area"; + let imagePosX = 0, imagePosY = 0; + + const backImageTypeWheel = document.querySelector(".resize-module-container__file_place-back_t_w"); + const frontImageTypeWheel = document.querySelector(".resize-module-container__file_place-front_t_w"); + + const backImageTypeArrows = document.querySelector(".resize-module-container__file_place-back_t_a"); + const frontImageTypeArrows = document.querySelector(".resize-module-container__file_place-front_t_a"); + + const backImageTypeArea = document.querySelector(".resize-module-container__file_place-back_t_area"); + const frontImageTypeArea = document.querySelector(".resize-module-container__file_place-front_t_area"); + + let areaTop = 0; + let areaLeft = 0; + let areaBot = 0; + let areaRight = 0; + + + imageRefactorPage.addEventListener("selectstart", (evt) => evt.preventDefault()); + const resizeModuleBody = document.querySelector(".resize-module-container__body_type_area"); + + const fileReader = new FileReader(); + + const resizeModuleContainers = document.querySelectorAll("[data-type]"); + + const compressImage = async (file, {quality = 1, type = file.type}) => { + // Get as image data + const imageBitmap = await createImageBitmap(file); + + // Draw to canvas + const canvas = document.createElement('canvas'); + canvas.width = imageBitmap.width; + canvas.height = imageBitmap.height; + const ctx = canvas.getContext('2d'); + ctx.drawImage(imageBitmap, 0, 0); + + // Turn into Blob + return await new Promise((resolve) => + canvas.toBlob(resolve, type, quality) + ); + }; + + const imageRefactorMethod = () => { + let mousePosX, mousePosY; + + let scrollDirection = 0; + + const arrowsEvents = () => { + const imageScrollWithArrows = (evt) => { + { + zoom = 1 + zoomDelta + ((evt.clientX - mousePosX) + (evt.clientY - mousePosY)) + / (100 + Math.sqrt((evt.clientX - mousePosX) * (evt.clientX - mousePosX) + + (evt.clientY - mousePosY) * (evt.clientY - mousePosY))); + } + if (scrollDirection === 4) { + zoom = 1 + zoomDelta - ((evt.clientX - mousePosX) + (evt.clientY - mousePosY)) + / (100 + Math.sqrt((evt.clientX - mousePosX) * (evt.clientX - mousePosX) + + (evt.clientY - mousePosY) * (evt.clientY - mousePosY))); + } + + if (initImageWidth * zoom < resizeWindowWidth || initImageHeight * zoom < resizeWindowHeight) { + zoom = resizeWindowWidth / Math.min(initImageWidth, initImageHeight); + zoomDelta = zoom - 1; + } + + imageWidth = initImageWidth * zoom; + imageHeight = initImageHeight * zoom; + + document.querySelector(".resize-module-container__zoom-button_place_top").style.margin = (32 * zoom + 4) / (zoom + 4) + "px"; + document.querySelector(".resize-module-container__zoom-button_place_bottom").style.margin = (32 * zoom + 4) / (zoom + 4) + "px"; + makePositionValid(); + setImagesWidth(imageWidth); + } + + const arrowClickDown = (evt) => { + mousePosX = evt.clientX; + mousePosY = evt.clientY; + + document.addEventListener("mousemove", imageScrollWithArrows); + } + + document.querySelector(".resize-module-container__zoom-button_place_top") + .addEventListener("mousedown", (event) => { + scrollDirection = 2; + arrowClickDown(event); + }); + document.querySelector(".resize-module-container__zoom-button_place_bottom") + .addEventListener("mousedown", (event) => { + scrollDirection = 4; + arrowClickDown(event); + }); + + const imageClickUp = () => { + zoomDelta = zoom - 1; + document.removeEventListener("mousemove", imageScrollWithArrows); + } + + document.addEventListener("mouseup", imageClickUp); + + } + arrowsEvents(); + + const wheelEvents = () => { + const imageScrollWithWheel = (evt) => { + zoom -= evt.deltaY / 2400; + if (initImageWidth * zoom >= resizeWindowWidth && initImageHeight * zoom >= resizeWindowHeight) { + imageWidth = initImageWidth * zoom; + imageHeight = initImageHeight * zoom; + } else { + zoom += evt.deltaY / 2400; + } + makePositionValid(); + setImagesWidth(imageWidth); + } + + if ('onwheel' in document) { + backImageTypeWheel.addEventListener("wheel", imageScrollWithWheel); + } else if ('onmousewheel' in document) { + backImageTypeWheel.addEventListener("mousewheel", imageScrollWithWheel); + } else { + backImageTypeWheel.addEventListener("MozMousePixelScroll", imageScrollWithWheel); + } + } + wheelEvents(); + + const areaEvents = () => { + let clX, clY; + let prevX, prevY; + const getTouchCoords = (evt) => { + prevX = clX; + prevY = clY; + if (evt.touches != null) { + clX = evt.touches[0].clientX; + clY = evt.touches[0].clientY; + } else { + clX = evt.clientX; + clY = evt.clientY; + } + } + const checkBorders = () => { + if (areaTop < 0) { + areaBot += areaTop; + areaTop = 0; + } + if (areaLeft < 0) { + areaRight += areaLeft; + areaLeft = 0; + } + if (areaBot < 0) { + areaTop += areaBot; + areaBot = 0; + } + if (areaRight < 0) { + areaLeft += areaRight; + areaRight = 0; + } + } + const imageSelectViewArea = (evt) => { + let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); + getTouchCoords(evt); + + areaTop = clY - viewportImageOffset.top - 125; + areaBot = viewportImageOffset.height - areaTop - 250; + areaLeft = clX - viewportImageOffset.left - 125; + areaRight = viewportImageOffset.width - areaLeft - 250; + + checkBorders(); + + setImagesWidth(imageWidth); + setImagesPosition(imagePosX, imagePosY); + } + resizeModuleBody.addEventListener("dblclick", imageSelectViewArea); + const imageSetAreaPos = (evt) => { + let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); + getTouchCoords(evt); + + let tx = 0; + let ty = 0; + const viewportHeight_pt = (viewportImageOffset.height - areaTop - areaBot) / 5; + const viewportWidth_pt = (viewportImageOffset.width - areaLeft - areaRight) / 5; + if (areaTop >= clY - viewportImageOffset.top - viewportHeight_pt) { + ty = -1; + } + if (areaBot > viewportImageOffset.top + viewportImageOffset.height - clY - viewportHeight_pt) { + ty = 1; + } + if (areaLeft >= clX - viewportImageOffset.left - viewportWidth_pt) { + tx = -1; + } + if (areaRight > viewportImageOffset.left + viewportImageOffset.width - clX - viewportWidth_pt) { + tx = 1; + } + + if (tx === 1 && ty === -1) { + scrollDirection = 1; + } else if (tx === -1 && ty === -1) { + scrollDirection = 2; + } else if (tx === -1 && ty === 1) { + scrollDirection = 3; + } else if (tx === 1 && ty === 1) { + scrollDirection = 4; + } else if (tx === 0 && ty === 0) { + scrollDirection = 0; + } else { + scrollDirection = -1; + } + + document.addEventListener("touchmove", imageScrollWithArea); + document.addEventListener("mousemove", imageScrollWithArea); + } + backImageTypeArea.addEventListener("mousedown", imageSetAreaPos); + const imageScrollWithArea = (evt) => { + let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); + getTouchCoords(evt); + + if (scrollDirection === 1 || scrollDirection === 2) { + areaTop = clY - viewportImageOffset.top; + if (areaTop < 0) { + areaTop = 0; + } else if (areaTop + 50 > viewportImageOffset.height - areaBot) { + areaTop = viewportImageOffset.height - areaBot - 50; + } + } + + if (scrollDirection === 3 || scrollDirection === 4) { + areaBot = viewportImageOffset.top + viewportImageOffset.height - clY; + if (areaBot < 0) { + areaBot = 0; + } else if (areaBot + 50 > viewportImageOffset.height - areaTop) { + areaBot = viewportImageOffset.height - areaTop - 50; + } + } + + if (scrollDirection === 2 || scrollDirection === 3) { + areaLeft = clX - viewportImageOffset.left; + if (areaLeft < 0) { + areaLeft = 0; + } else if (areaLeft + 50 > viewportImageOffset.width - areaRight) { + areaLeft = viewportImageOffset.width - areaRight - 50; + } + } + if (scrollDirection === 4 || scrollDirection === 1) { + areaRight = viewportImageOffset.left + viewportImageOffset.width - clX; + if (areaRight < 0) { + areaRight = 0; + } else if (areaRight + 50 > viewportImageOffset.width - areaLeft) { + areaRight = viewportImageOffset.width - areaLeft - 50; + } + } + + const dw = viewportImageOffset.width - areaLeft - areaRight; + const dh = viewportImageOffset.height - areaTop - areaBot; + + if (scrollDirection === 1) { + if (dw <= dh) { + areaTop += dh - dw; + } else { + areaRight += dw - dh; + } + } else if (scrollDirection === 2) { + if (dw <= dh) { + areaTop += dh - dw; + } else { + areaLeft += dw - dh; + } + } else if (scrollDirection === 3) { + if (dw <= dh) { + areaBot += dh - dw; + } else { + areaLeft += dw - dh; + } + } else if (scrollDirection === 4) { + if (dw <= dh) { + areaBot += dh - dw; + } else { + areaRight += dw - dh; + } + } else if (scrollDirection === 0) { + areaLeft += clX - prevX; + areaRight -= clX - prevX; + areaTop += clY - prevY; + areaBot -= clY - prevY; + + prevX = clX; + prevY = clY; + } + + checkBorders(); + + setImagesWidth(imageWidth); + setImagesPosition(imagePosX, imagePosY); + } + const imageClickUp = () => { + document.removeEventListener("mousemove", imageScrollWithArea); + } + document.addEventListener("mouseup", imageClickUp); + } + areaEvents(); + + const makePositionValid = () => { + if (2 * imagePosX + resizeWindowWidth > imageWidth) { + imagePosX = imageWidth / 2 - resizeWindowWidth / 2; + } else if (2 * imagePosX - resizeWindowWidth < -imageWidth) { + imagePosX = -imageWidth / 2 + resizeWindowWidth / 2; + } + + if (2 * imagePosY + resizeWindowHeight > imageHeight) { + imagePosY = imageHeight / 2 - resizeWindowHeight / 2; + } else if (2 * imagePosY - resizeWindowHeight < -imageHeight) { + imagePosY = -imageHeight / 2 + resizeWindowHeight / 2; + } + const posX = "calc(50% + " + imagePosX + "px)"; + const posY = "calc(50% + " + imagePosY + "px)"; + + setImagesPosition(posX, posY) + } + + const imageMoveEvents = () => { + const imageMove = (evt) => { + const deltaX = evt.clientX; + const deltaY = evt.clientY; + + imagePosX = (deltaX - mousePosX); + imagePosY = (deltaY - mousePosY); + makePositionValid(); + } + + const imageClickDown = (evt) => { + mousePosX = evt.clientX - imagePosX; + mousePosY = evt.clientY - imagePosY; + + document.addEventListener("mousemove", imageMove); + } + + backImageTypeWheel.addEventListener("mousedown", imageClickDown); + backImageTypeArrows.addEventListener("mousedown", imageClickDown); + backImageTypeArea.addEventListener("mousedown", imageClickDown); + + const imageClickUp = () => { + document.removeEventListener("mousemove", imageMove); + } + + document.addEventListener("mouseup", imageClickUp); + } + imageMoveEvents(); + } + const imageInputChangeMethod = () => { + + const fileChange = async function () { + imageRefactorPage.classList.remove("resize-module_disable"); + + let file = fileInput.files[0]; + + let compressedFile = await compressImage(file, { + quality: Math.min(1, (2097152 / file.size)), + type: 'image/jpeg', + }); + + fileReader.readAsDataURL(compressedFile); + fileReader.addEventListener("load", () => { + img = new Image(); + img.src = fileReader.result; + img.addEventListener("load", getImageData); + + window.addEventListener("resize", updateImageAfterWindowResize); + }); + + setEnableZoomVariant("area"); + }; + fileInput.addEventListener("change", fileChange); + const getImageData = () => { + initImageWidth = img.naturalWidth; + initImageHeight = img.naturalHeight; + + backImageTypeWheel.style.backgroundImage = "url('" + fileReader.result + "')"; + frontImageTypeWheel.style.backgroundImage = "url('" + fileReader.result + "')"; + + backImageTypeArrows.style.backgroundImage = "url('" + fileReader.result + "')"; + frontImageTypeArrows.style.backgroundImage = "url('" + fileReader.result + "')"; + + let dw = initImageWidth / Math.min(window.innerWidth, 900); + let dh = initImageHeight / Math.min(window.innerHeight - 200, 600); + + let dRes = Math.min(dw, dh); + + backImageTypeArea.style.width = (initImageWidth / dRes - 88) + "px"; + backImageTypeArea.style.height = (initImageHeight / dRes - 88) + "px"; + backImageTypeArea.style.backgroundSize = (initImageWidth / dRes - 88) + "px " + (initImageHeight / dRes - 88) + "px"; + backImageTypeArea.style.backgroundImage = "url('" + fileReader.result + "')"; + + let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); + areaLeft = 50; + areaTop = 50; + areaRight = viewportImageOffset.width - 300; + areaBot = viewportImageOffset.height - 300; + + imagePosY = 0; + imagePosX = 0; + zoom = (resizeWindowWidth * Math.max((resizeWindowWidth / targetWidth), 1)) / Math.min(initImageWidth, initImageHeight); + + zoomDelta = 0; + imageWidth = initImageWidth * zoom; + imageHeight = initImageHeight * zoom; + + setImagesWidth(imageWidth); + setImagesPosition("50%", "50%") + } + const updateImageAfterWindowResize = () => { + if (window.innerWidth <= 720) { + zoomVariant = "area"; + setEnableZoomVariant(); + } + getImageData(); + } + window.removeEventListener("resize", updateImageAfterWindowResize); + + const setEnableZoomVariant = () => { + for (let el of resizeModuleContainers) { + const type = el.dataset.type; + if (type === zoomVariant) { + document.querySelector(".resize-module-container__body_type_" + zoomVariant).style.display = "flex"; + document.querySelector(".zoom-variant-item_type_" + zoomVariant).style.backgroundColor = "var(--color-active)"; + } else { + document.querySelector(".resize-module-container__body_type_" + type).style.display = "none"; + document.querySelector(".zoom-variant-item_type_" + type).style.backgroundColor = "transparent"; + } + } + } + const setDifferentScaleTypesMethod = () => { + for (let el of resizeModuleContainers) { + const type = el.dataset.type + document.querySelector(".zoom-variant-item_type_" + type) + .addEventListener("click", () => { + zoomVariant = type; + setEnableZoomVariant(); + }); + } + } + setDifferentScaleTypesMethod(); + + const saveUpdatedImageEvent = () => { + const cropButton = document.querySelector(".resize-module-container__button_type-confirm"); + const canvas = document.querySelector('.canvas_crop'); + + cropButton.addEventListener("click", () => { + if (zoomVariant === "area") { + let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); + + const dx = initImageWidth / viewportImageOffset.width; + const dy = initImageHeight / viewportImageOffset.height; + + canvas.width = targetWidth * dx; + canvas.height = targetHeight * dy; + let context = canvas.getContext('2d'); + + context.drawImage(img, areaLeft * dx, areaTop * dy, initImageWidth - areaLeft * dx - areaRight * dx, initImageHeight - areaTop * dy - areaBot * dy, 0, 0, canvas.width, canvas.height); + } else { + const dx = Math.min(initImageWidth / resizeWindowWidth, initImageHeight / resizeWindowHeight); + canvas.width = targetWidth * dx; + canvas.height = targetHeight * dx; + let context = canvas.getContext('2d'); + + const sourceX = initImageWidth / 2 - imagePosX / zoom - (resizeWindowWidth / 2) / zoom; + const sourceY = initImageHeight / 2 - imagePosY / zoom - (resizeWindowHeight / 2) / zoom; + + const sourceWidth = resizeWindowWidth / zoom; + const sourceHeight = resizeWindowHeight / zoom; + context.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, canvas.width, canvas.height); + } + canvas.toBlob(function (blob) { + dt.items.clear(); + dt.items.add(new File([blob], 'ava.png', {type: "image/png"})); + console.log(dt); + fileInput.files = dt.files; + imageRefactorPage.classList.add('resize-module_disable') + }); + }); + } + saveUpdatedImageEvent(); + const denyUpdatedImageEvent = () => { + window.removeEventListener("resize", updateImageAfterWindowResize); + + const removeUpdates = () => { + imageRefactorPage.classList.add('resize-module_disable') + } + + document.querySelector(".resize-module-container__button_type-deny").addEventListener("click", removeUpdates); + document.querySelector(".resize-module-container__close-button").addEventListener("click", removeUpdates); + } + denyUpdatedImageEvent(); + } + const setImagesWidth = (width) => { + let viewportImageOffset = backImageTypeArea.getBoundingClientRect(); + + backImageTypeWheel.style.backgroundSize = width + "px"; + frontImageTypeWheel.style.backgroundSize = width + "px"; + + backImageTypeArrows.style.backgroundSize = width + "px"; + frontImageTypeArrows.style.backgroundSize = width + "px"; + + frontImageTypeArea.style.height = (viewportImageOffset.height - areaTop - areaBot) + "px"; + frontImageTypeArea.style.width = (viewportImageOffset.width - areaLeft - areaRight) + "px"; + + document.querySelector(".resize-module-container__background_pos_t").style.height = areaTop + "px"; + document.querySelector(".resize-module-container__background_pos_b").style.height = areaBot + "px"; + + document.querySelector(".resize-module-container__background_pos_l").style.top = areaTop + "px"; + document.querySelector(".resize-module-container__background_pos_l").style.bottom = areaBot + "px"; + document.querySelector(".resize-module-container__background_pos_l").style.width = areaLeft + "px"; + + document.querySelector(".resize-module-container__background_pos_r").style.top = areaTop + "px"; + document.querySelector(".resize-module-container__background_pos_r").style.bottom = areaBot + "px"; + document.querySelector(".resize-module-container__background_pos_r").style.width = areaRight + "px"; + } + const setImagesPosition = (posX, posY) => { + backImageTypeWheel.style.backgroundPosition = posX + " " + posY; + frontImageTypeWheel.style.backgroundPosition = posX + " " + posY; + + backImageTypeArrows.style.backgroundPosition = posX + " " + posY; + frontImageTypeArrows.style.backgroundPosition = posX + " " + posY; + + frontImageTypeArea.style.backgroundPosition = -areaLeft + "px " + -areaTop + "px"; + frontImageTypeArea.style.left = areaLeft + "px"; + frontImageTypeArea.style.right = areaRight + "px"; + frontImageTypeArea.style.top = areaTop + "px"; + frontImageTypeArea.style.bottom = areaBot + "px"; + } + + imageInputChangeMethod(); + imageRefactorMethod(); +})(); + + diff --git a/static/examples/editAvatar/styles.css b/static/examples/editAvatar/styles.css new file mode 100644 index 0000000..46cdc6a --- /dev/null +++ b/static/examples/editAvatar/styles.css @@ -0,0 +1,372 @@ +:root { + --color-interface: rgb(240, 240, 240); + --color-resizeBox: rgb(241, 235, 227); + --color-text-main: rgb(45, 45, 45); + --color-text-main__hover: rgb(65, 65, 65); + --color-text-second: rgb(231, 225, 217); + --color-text-second__hover: rgb(211, 205, 197); + --color-active: rgb(239, 168, 33); + --color-active__hover: rgb(211, 19, 53); + + --hover-delay-midle: 0.5s; +} + +* { + margin: 0; + padding: 0; +} + +.resize-module { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + position: fixed; + top: 0; + left: 0; +} + +.resize-module_disable { + display: none; +} + +.resize-module-background { + position: absolute; + width: 100%; + height: 100%; + opacity: 0.8; + background-color: var(--color-text-main); +} + +.resize-module-container { + position: absolute; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + max-width: min(calc(100vw - 20px), 900px); + max-height: calc(100vh - 20px); + border-radius: 8px; + background-color: var(--color-resizeBox); +} +.resize-module-container__header { + width: calc(100% - 36px); + height: 90px; + display: flex; + justify-content: space-between; + align-items: center; + color: var(--color-text-main); +} +.resize-module-container__header-text { + font-size: 20px; + margin: 16px; +} +.resize-module-container__close-button { + height: 60px; + width: 60px; + background: url("../images/cross_grey.png") no-repeat center center / 50%; +} +.resize-module-container__close-button:hover { + background-size: 65%; +} +.resize-module-container__body { + flex-direction: column; + min-width: 720px; + max-width: 100%; + max-height: calc(100vh - 258px); + height: 100%; + padding: 16px 0 0 0; + border-top: 2px solid var(--color-text-second__hover); + border-bottom: 2px solid var(--color-text-second__hover); + color: var(--color-text-main); +} +.resize-module-container__body_type_wheel { + align-items: center; +} +.resize-module-container__body_type_arrows { + align-items: center; +} +.resize-module-container__body_type_area { + align-items: flex-start; +} +.resize-module-container__body-text { + color: var(--color-text-main__hover); + font-size: 16px; + margin-top: 6px; + align-self: center; +} +.resize-module-container__body-paragraph { + text-align: center; + color: var(--color-text-main__hover); + font-size: 14px; + margin-top: 6px; + align-self: center; +} + +.resize-module-container__body-box { + position: relative; +} +.resize-module-container__body-box_type_area { + width: 100%; + height: calc(100vh - 240px); + overflow: scroll; +} +.resize-module-container__background-box { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} +.resize-module-container__background { + position: absolute; + background: rgba(211, 205, 197, 0.3); +} +.resize-module-container__background_pos_t { + top: 0; + left: 0; + right: 0; +} +.resize-module-container__background_pos_b { + bottom: 0; + left: 0; + right: 0; +} +.resize-module-container__background_pos_l { + left: 0; +} +.resize-module-container__background_pos_r { + right: 0; +} +.resize-module-container__body-file { + position: absolute; + width: 100%; + height: 100%; + background-repeat: no-repeat; +} + +.resize-module-container__body-image { + position: relative; + background-position: center; + margin: 14px; + +} +.resize-module-container__body-image-area { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + border: 0.5px solid var(--color-text-main__hover); +} + +.scale-cube { + position: absolute; + width: 24px; + height: 24px; + background: rgba(231, 225, 217, 0.8); + border: 0.5px solid var(--color-text-main__hover); + transition: var(--hover-delay-midle); +} + +.scale-cube:hover { + background: rgba(231, 225, 217, 0.2); +} +.scale-cube:active { + background: rgba(231, 225, 217, 0.2); +} + +.scale-cube_pos_tl { + left: -12px; + top: -12px; +} + +.scale-cube_pos_tr { + right: -12px; + top: -12px; +} + +.scale-cube_pos_bl { + left: -12px; + bottom: -12px; +} + +.scale-cube_pos_br { + right: -12px; + bottom: -12px; +} + +.resize-module-container__file_place-back { + position: absolute; + opacity: 0.2; +} + +.resize-module-container__circle-box { + position: relative; + width: 500px; + height: 500px; + border-radius: 50%; + overflow: hidden; + pointer-events: none; +} + +.resize-module-container__file_place-front { + position: absolute; +} + +.resize-module-container__footer { + display: flex; + justify-content: center; + align-items: center; +} +.resize-module-container__button { + display: flex; + justify-content: center; + align-items: center; + height: 36px; + border-radius: 8px; + transition: background var(--hover-delay-midle); +} +.resize-module-container__button_type-confirm { + width: 220px; + background: var(--color-active); + color: white; + margin: 8px; +} +.resize-module-container__button_type-confirm:hover { + background: var(--color-active__hover); +} +.resize-module-container__button_type-deny { + width: 180px; + background: var(--color-text-second); + color: var(--color-text-main); + margin: 8px; +} +.resize-module-container__button_type-deny:hover { + background: var(--color-text-second__hover); +} + +.resize-module-container__zoom-arrows { + position: absolute; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; +} +.resize-module-container__zoom-button { + position: absolute; + background: url("../images/double-arrow.png") no-repeat center center / cover; + cursor: nwse-resize; + transition: background var(--hover-delay-midle); + pointer-events: all; +} +.resize-module-container__zoom-arrows:hover > div { + background: url("../images/double-arrow-active.png") no-repeat center center / cover; +} +.resize-module-container__zoom-arrows:active > div { + background: url("../images/double-arrow-active.png") no-repeat center center / cover; +} + +.resize-module-container__zoom-button_place_top { + left: 16px; + top: 16px; + width: 32px; + height: 32px; + transform: rotate(225deg); + margin: 8px; +} +.resize-module-container__zoom-button_place_top:hover + .resize-module-container__zoom-button_place_bottom{ + background: url("../images/double-arrow-active.png") no-repeat center center / cover; +} + +.resize-module-container__zoom-button_place_bottom { + right: 16px; + bottom: 36px; + width: 32px; + height: 32px; + transform: rotate(45deg); + margin: 8px; +} +.resize-module-container__zoom-button_place_bottom:hover + .resize-module-container__zoom-button_place_top{ + background: url("../images/double-arrow-active.png") no-repeat center center / cover; +} + +.zoom-variant-container { + position: absolute; + height: 36px; + width: 112px; + top: 72px; + left: 16px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + border: 2px solid var(--color-text-second__hover); + border-radius: 4px; + background: var(--color-resizeBox); + z-index: 5 +} +.zoom-variant-item { + width: 26px; + height: 26px; + border: 1px solid transparent; + transition: var(--hover-delay-midle); +} + +.zoom-variant-item:hover { + border: 1px solid black; +} + +.zoom-variant-item_type_wheel { + background: url("../images/scale-wheel.png") no-repeat center center / 80%; +} + +.zoom-variant-item_type_arrows { + background: url("../images/scale-arrows.png") no-repeat center center / 80%; +} + +.zoom-variant-item_type_area { + background: url("../images/scale-area.png") no-repeat center center / 80%; +} + +.canvas_crop { + display: none; +} +@media (max-width: 720px){ + .zoom-variant-container { + display: none; + } + .resize-module-container { + width: 100%; + height: 100%; + max-width: 100vw; + max-height: 100vh; + border-radius: 0; + } + .resize-module-container__header { + width: 100%; + } + .resize-module-container__header-text { + font-size: 18px; + } + .resize-module-container__close-button { + height: 60px; + width: 60px; + background: url("../images/cross_grey.png") no-repeat center center / 50%; + } + .resize-module-container__body { + min-width: 0; + max-height: calc(100vh - 240px); + } + .resize-module-container__footer { + flex-direction: column; + width: calc(100% - 12px); + } + .resize-module-container__button { + font-size: 18px; + width: 100%; + height: 64px; + } +}