сохранение новых картинок

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;

src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

@@ -119,7 +119,7 @@ export default function OptionsAndPicture({
         <CropModalInit
           originalImageUrl={variant?.originalImageUrl}
           editedUrlImagesList={variant?.editedUrlImagesList}
-          questionId={question.backendId.toString()}
+          questionId={question.id.toString()}
           questionType={question.type}
           quizId={quizQid}
           variantId={variant?.id}

src/pages/Questions/OptionsPicture/OptionsPicture.tsx

@@ -100,7 +100,7 @@ export default function OptionsPicture({
         <CropModalInit
           originalImageUrl={variant?.originalImageUrl}
           editedUrlImagesList={variant?.editedUrlImagesList}
-          questionId={question.backendId.toString()}
+          questionId={question.id.toString()}
           questionType={question.type}
           quizId={quizQid}
           variantId={variant?.id}

src/pages/Questions/UploadImage/index.tsx

@@ -82,7 +82,7 @@ export default function UploadImage({
       <CropModalInit
         originalImageUrl={question.content.originalBack}
         editedUrlImagesList={question.content?.editedUrlImagesList}
-        questionId={question.backendId.toString()}
+        questionId={question.id.toString()}
         questionType={question.type}
         quizId={quiz.id}
         open={openCropModal}

src/stores/questions/actions.ts

@@ -422,11 +422,13 @@ export const uploadQuestionImage = async (
   blob: Blob,
   updateFn: (question: AnyTypedQuizQuestion, imageId: string) => 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,

src/ui_kit/Modal/CropModal/CropGeneral.tsx

@@ -155,26 +155,7 @@ export const CropGeneral: FC<Props> = ({
             }))
         }
     }
-    function в (image: HTMLImageElement) {
+    
-        return new Promise<Blob>((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])

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<CropOnOpenType> = ({
     open,
@@ -119,6 +120,7 @@ export const CropModalInit: FC<CropOnOpenType> = ({
     }, [open, originalImageUrl, editedUrlImagesList, questionId, questionType])
 
     const closeModal = () => {
+        setReadyDelete(false)
         setOriginalImageUrl("");
         setEditedImages(null);
         selfClose()
@@ -126,35 +128,78 @@ export const CropModalInit: FC<CropOnOpenType> = ({
     }
 
     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");
+        if (editedImages === null) return;
-        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;
 
-        // uploadQuestionImage(questionId, quizId, imageBlob, (question, url) => {
+        //Преобразовываем и отправляем на бек картинки.
-        //     if (!("variants" in question.content)) return;
 
-        //     const variant = question.content.variants.find(
+        if (variantId) {//Работаем с вариантом
-        //         (variant) => variant.id === selectedVariantId,
+            for (let k in editedImages) {
-        //     );
+                let key = k;
-        //     if (!variant) return;
 
-        //     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 <></>

src/ui_kit/Modal/CropModal/utils/imageManipulation.ts

@@ -27,6 +27,8 @@ export function getModifiedImageBlob(
   darken: number,
 ) {
   return new Promise<Blob>((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"));