diff --git a/src/model/CropModal/CropModal.ts b/src/model/CropModal/CropModal.ts index 8f2adc1e..a9e148bf 100644 --- a/src/model/CropModal/CropModal.ts +++ b/src/model/CropModal/CropModal.ts @@ -103,6 +103,7 @@ export type CropOnOpenType = { questionId: string; questionType: AcceptedQuestionTypes; quizId: string; + variantId?: string; selfClose: () => void; setPictureUploading: (is: boolean) => void; diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx index 9f6835a7..69cee478 100644 --- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx +++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx @@ -119,7 +119,7 @@ export default function OptionsAndPicture({ void, ) => { + console.log("Я принял айди вопроса и квиза " , questionId," ", quizQid) const question = useQuestionsStore .getState() .questions.find((q) => q.id === questionId); if (!question || !quizQid) return; + console.log("question " , question) const [images, addImagesError] = await quizApi.addImages( question.quizId, blob, diff --git a/src/ui_kit/Modal/CropModal/CropGeneral.tsx b/src/ui_kit/Modal/CropModal/CropGeneral.tsx index b09898bb..d9dc53e6 100644 --- a/src/ui_kit/Modal/CropModal/CropGeneral.tsx +++ b/src/ui_kit/Modal/CropModal/CropGeneral.tsx @@ -155,26 +155,7 @@ export const CropGeneral: FC = ({ })) } } - function в (image: HTMLImageElement) { - return new Promise((resolve, reject) => { - const canvas = document.createElement("canvas"); - const ctx = canvas.getContext("2d"); - if (!ctx) return reject(new Error("No 2d context")); - - canvas.width = image.naturalHeight; - canvas.height = image.naturalWidth; - - ctx.translate(canvas.width / 2, canvas.height / 2); - ctx.rotate(Math.PI / 2); - ctx.drawImage(image, -canvas.height / 2, -canvas.width / 2); - - canvas.toBlob((blob) => { - if (!blob) return reject(new Error("Failed to create blob")); - - resolve(blob); - }); - }); - } + useEffect(() => { if (!crop.width && !crop.height) { calcCrop() } }, [crop]) diff --git a/src/ui_kit/Modal/CropModal/index.tsx b/src/ui_kit/Modal/CropModal/index.tsx index 16e1f187..1823e5d7 100644 --- a/src/ui_kit/Modal/CropModal/index.tsx +++ b/src/ui_kit/Modal/CropModal/index.tsx @@ -14,6 +14,7 @@ import { import { isImageBlobAGifFile } from "@/utils/isImageBlobAGifFile"; import AlertModalDeleteImage from "./AlertModalDeleteImage" import { getModifiedImageBlob } from "./utils/imageManipulation"; +import { updateQuestion, uploadQuestionImage } from "@/stores/questions/actions"; export const CropModalInit: FC = ({ open, @@ -49,9 +50,7 @@ export const CropModalInit: FC = ({ (async () => { let newImageBlob = imageBlob; if (originalImageUrl !== undefined) { - const response = await fetch(originalImageUrl, { - mode: 'no-cors', - }); + const response = await fetch(originalImageUrl); newImageBlob = await response.blob(); console.log(newImageBlob) }; @@ -119,6 +118,7 @@ export const CropModalInit: FC = ({ }, [open, originalImageUrl, editedUrlImagesList, questionId, questionType]) const closeModal = () => { + setReadyDelete(false) setOriginalImageUrl(""); setEditedImages(null); selfClose() @@ -126,35 +126,78 @@ export const CropModalInit: FC = ({ } const handleCropModalDeleteImageClick = () => { + if (variantId) {//Работаем с вариантом + updateQuestion(questionId, (question) => { + if ("variants" in question.content) { + const variant = question.content.variants.find( + (variant) => variant.id === variantId, + ); + if (!variant) return console.error("В вопросе не был найден вариант ", variantId); + + variant.extendedText = ""; + variant.originalImageUrl = ""; + if ("editedUrlImagesList" in variant) variant.editedUrlImagesList = null; + + } + }) + } else {//Работаем с контентом + updateQuestion(questionId, (question) => { + question.content.back = null; + question.content.originalBack = null; + if ("editedUrlImagesList" in question.content) question.content.editedUrlImagesList = null; + }) + } //сохранить пустую строку и дефолтные настройки картинки в самом вопросе, не информируя БД о удалении картинки closeModal() }; - const saveImagesAndRules = async (blob?: Blob) => { + const saveImagesAndRules = async () => { setPictureUploading(true) - const img = document.createElement("img"); - img.src = editedImages.mobile.url - const bloba = await getModifiedImageBlob(img, editedImages.mobile.newRules.crop, editedImages.mobile.newRules.darken) - const anchor = document.createElement("a"); - const blobUrl = URL.createObjectURL(bloba); - anchor.setAttribute("download", "ЖОПА"); - anchor.href = blobUrl; - anchor.click(); - closeModal() - setTimeout(() => setPictureUploading(false), 1000) - // if (!selectedVariantId) return; + if (editedImages === null) return; - // uploadQuestionImage(questionId, quizId, imageBlob, (question, url) => { - // if (!("variants" in question.content)) return; + //Преобразовываем и отправляем на бек картинки. - // const variant = question.content.variants.find( - // (variant) => variant.id === selectedVariantId, - // ); - // if (!variant) return; + if (variantId) {//Работаем с вариантом + for (let k in editedImages) { + let key = k; - // variant.extendedText = url; - // }); + const img = document.createElement("img"); + img.crossOrigin = 'anonymous'; + img.src = editedImages[key].url; + const blob = await getModifiedImageBlob(img, editedImages[key].newRules.crop, editedImages[key].newRules.darken); + + uploadQuestionImage(questionId, quizId, blob, (question, url) => { + if (!("variants" in question.content)) return; + + const variant = question.content.variants.find( + (variant) => variant.id === variantId, + ); + if (!variant) return; + if (!("editedUrlImagesList" in variant)) variant.editedUrlImagesList = {} + + variant.editedUrlImagesList[key] = url; + }); + } + } else {//Работаем с контентом + + for (let k in editedImages) { + let key = k; + + const img = document.createElement("img"); + img.crossOrigin = 'anonymous'; + img.src = editedImages[key].url; + const blob = await getModifiedImageBlob(img, editedImages[key].newRules.crop, editedImages[key].newRules.darken); + + uploadQuestionImage(questionId, quizId, blob, (question, url) => { + if (!("editedUrlImagesList" in question.content)) question.content.editedUrlImagesList = {}; + + question.content.editedUrlImagesList[key] = url; + }); + } + } + closeModal(); + setPictureUploading(false); }; if (acceptedOriginalImageUrl.length === 0) return <> diff --git a/src/ui_kit/Modal/CropModal/utils/imageManipulation.ts b/src/ui_kit/Modal/CropModal/utils/imageManipulation.ts index 2eec0846..600ec1bc 100644 --- a/src/ui_kit/Modal/CropModal/utils/imageManipulation.ts +++ b/src/ui_kit/Modal/CropModal/utils/imageManipulation.ts @@ -27,6 +27,8 @@ export function getModifiedImageBlob( darken: number, ) { return new Promise((resolve, reject) => { + console.log("crop") + console.log(crop) const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); if (!ctx) return reject(new Error("No 2d context"));