@pushwoosh/smart-components-kit 1.21.0 → 1.21.1

package/MediaStorage/CreateCropDrawer.js

@@ -6,7 +6,7 @@ import { CloseIcon, TrashIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { CropFramePicker } from './CropFramePicker';
-import { CENTER_FOCAL, getCropWindow, getStoredOrigin } from './cropWindow';
+import { CENTER_FOCAL, getCropWindow, getRequestedSize, getStoredOrigin, getStoredSize } from './cropWindow';
 import { useDeleteMediaFile } from './hooks';
 import { getAspectRatio, getCropCaption, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
@@ -115,15 +115,25 @@ export const CreateCropDrawer = ({
     setViewedCrop(crop);
   };
   const selectedRatio = RATIOS.find(item => item.value === ratio) ?? RATIOS[0];
-  const outputWidth = dimension === 'width' ? sizeValue : Math.round(sizeValue * selectedRatio.ar);
-  const outputHeight = dimension === 'height' ? sizeValue : Math.round(sizeValue / selectedRatio.ar);
   const [ratioW, ratioH] = selectedRatio.label.split(':').map(Number);
+  const {
+    width: outputWidth,
+    height: outputHeight
+  } = getRequestedSize(ratioW, ratioH, dimension, sizeValue);
   const srcW = originalMeta?.width ?? 0;
   const srcH = originalMeta?.height ?? 0;
   const canPlaceWindow = !isOriginalView && srcW > 0 && srcH > 0;
   const cropWindow = canPlaceWindow ? getCropWindow(srcW, srcH, ratioW, ratioH, focal) : null;
   const centeredWindow = canPlaceWindow ? getCropWindow(srcW, srcH, ratioW, ratioH, CENTER_FOCAL) : null;
   const isOffCenter = Boolean(cropWindow && centeredWindow && (cropWindow.x !== centeredWindow.x || cropWindow.y !== centeredWindow.y));
+  const storedSize = cropWindow ? getStoredSize(cropWindow, {
+    width: outputWidth,
+    height: outputHeight
+  }) : {
+    width: outputWidth,
+    height: outputHeight
+  };
+  const isCapped = storedSize.width !== outputWidth || storedSize.height !== outputHeight;
   // Both inputs are always visible: the driving one is editable, the other is
   // read-only and shows the value computed from the aspect ratio.
   const computedText = value => isSizeValid ? String(value) : '';
@@ -146,7 +156,7 @@ export const CreateCropDrawer = ({
       width,
       height
     } = crop.meta.data;
-    if (cropRatio !== selectedRatio.label || width !== outputWidth || height !== outputHeight) return false;
+    if (cropRatio !== selectedRatio.label || width !== storedSize.width || height !== storedSize.height) return false;
     const origin = getStoredOrigin(crop.url);
     return isOffCenter ? origin?.x === cropWindow?.x && origin?.y === cropWindow?.y : origin === null;
   });
@@ -326,7 +336,11 @@ export const CreateCropDrawer = ({
           }), isOriginalShown && originalMeta && _jsxs(Text, {
             children: [originalMeta.width, ' × ', originalMeta.height]
           }), !isOriginalView && isSizeValid && _jsxs(Text, {
-            children: [selectedRatio.label, ' · ', outputWidth, ' × ', outputHeight]
+            children: [selectedRatio.label, ' · ', storedSize.width, ' × ', storedSize.height]
+          }), !isOriginalView && isSizeValid && isCapped && _jsx(Text, {
+            children: lang({
+              message: 'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT'
+            })
           })]
         }), !isOriginalView && isJpeg && _jsxs("div", {
           children: [_jsx(FieldLabel, {

package/MediaStorage/cropWindow.d.ts

@@ -20,3 +20,16 @@ export declare const getStoredOrigin: (url: string) => {
     x: number;
     y: number;
 } | null;
+/** Size requested by the width/height field, derived like rpc-v2 `targetSize` (integer division). */
+export declare const getRequestedSize: (ratioW: number, ratioH: number, dimension: "width" | "height", size: number) => {
+    width: number;
+    height: number;
+};
+/** Size rpc-v2 stores for a request: the requested one when smaller than the window, else the window. */
+export declare const getStoredSize: (window: CropRect, requested: {
+    width: number;
+    height: number;
+}) => {
+    width: number;
+    height: number;
+};

package/MediaStorage/cropWindow.js

@@ -33,4 +33,24 @@ export const getStoredOrigin = url => {
     x: Number(match[1]),
     y: Number(match[2])
   } : null;
+};
+/** Size requested by the width/height field, derived like rpc-v2 `targetSize` (integer division). */
+export const getRequestedSize = (ratioW, ratioH, dimension, size) => {
+  const value = Math.floor(size);
+  if (!(value > 0)) return {
+    width: 0,
+    height: 0
+  };
+  return dimension === 'width' ? {
+    width: value,
+    height: Math.floor(value * ratioH / ratioW)
+  } : {
+    width: Math.floor(value * ratioW / ratioH),
+    height: value
+  };
+};
+/** Size rpc-v2 stores for a request: the requested one when smaller than the window, else the window. */
+export const getStoredSize = (window, requested) => requested.width > 0 && requested.height > 0 && requested.width < window.width ? requested : {
+  width: window.width,
+  height: window.height
 };

package/MediaStorage/polyglot/messages_ar.js

@@ -52,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'لا توجد اقتصاصات بعد',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'تم إنشاء الاقتصاص',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'تعذّر إنشاء الاقتصاص',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': 'الأصل أصغر، لذلك يُحفظ الاقتصاص بهذا الحجم',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': 'اسحب الإطار لاختيار منطقة الاقتصاص',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'عرض هذا الاقتصاص',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'حذف الاقتصاص',

package/MediaStorage/polyglot/messages_bn.js

@@ -52,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'এখনো কোনো ক্রপ নেই',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'ক্রপ তৈরি হয়েছে',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'ক্রপ তৈরি করা যায়নি',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': 'মূল ছবি ছোট, তাই ক্রপ এই আকারে সংরক্ষিত হবে',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': 'ক্রপের এলাকা বেছে নিতে ফ্রেম টেনে আনুন',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'এই ক্রপ দেখান',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'ক্রপ মুছুন',

package/MediaStorage/polyglot/messages_de.js

@@ -52,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'Noch keine Zuschnitte',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'Zuschnitt erstellt',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Zuschnitt konnte nicht erstellt werden',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': 'Das Original ist kleiner, daher wird der Zuschnitt in dieser Größe gespeichert',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': 'Rahmen ziehen, um den Zuschnitt zu wählen',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'Zuschnitt anzeigen',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Zuschnitt löschen',

package/MediaStorage/polyglot/messages_en.js

@@ -52,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'No crops yet',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'Crop created',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Failed to create crop',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': 'The original is smaller, so the crop is saved at this size',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': 'Drag the frame to choose the crop area',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'Show this crop',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Delete crop',

package/MediaStorage/polyglot/messages_es.js

@@ -52,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'Aún no hay recortes',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'Recorte creado',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'No se pudo crear el recorte',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': 'El original es más pequeño, así que el recorte se guarda con este tamaño',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': 'Arrastra el marco para elegir el área del recorte',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'Mostrar este recorte',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Eliminar recorte',

package/MediaStorage/polyglot/messages_fr.js

@@ -52,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'Aucun recadrage pour le moment',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'Recadrage créé',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Échec de la création du recadrage',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': 'L’original est plus petit, le recadrage est donc enregistré à cette taille',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': 'Faites glisser le cadre pour choisir la zone du recadrage',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'Afficher ce recadrage',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Supprimer le recadrage',

package/MediaStorage/polyglot/messages_he.js

@@ -52,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'אין עדיין חיתוכים',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'החיתוך נוצר',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'יצירת החיתוך נכשלה',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': 'המקור קטן יותר, ולכן החיתוך יישמר בגודל הזה',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': 'גררו את המסגרת כדי לבחור את אזור החיתוך',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'הצג חיתוך זה',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'מחיקת חיתוך',

package/MediaStorage/polyglot/messages_hi.js

@@ -52,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'अभी तक कोई क्रॉप नहीं',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'क्रॉप बनाया गया',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'क्रॉप नहीं बनाया जा सका',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': 'मूल छवि छोटी है, इसलिए क्रॉप इसी आकार में सहेजा जाएगा',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': 'क्रॉप क्षेत्र चुनने के लिए फ़्रेम खींचें',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'यह क्रॉप दिखाएँ',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'क्रॉप हटाएँ',

package/MediaStorage/polyglot/messages_ja.js

@@ -52,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'トリミングはまだありません',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'トリミングを作成しました',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'トリミングの作成に失敗しました',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': '元画像が小さいため、このサイズで保存されます',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': '枠をドラッグしてトリミング範囲を選択',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'このトリミングを表示',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'トリミングを削除',

package/MediaStorage/polyglot/messages_ko.js

@@ -52,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': '아직 크롭이 없습니다',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': '크롭이 생성되었습니다',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': '크롭을 생성하지 못했습니다',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': '원본이 더 작아 이 크기로 저장됩니다',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': '프레임을 드래그해 크롭 영역을 선택하세요',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': '이 크롭 보기',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': '크롭 삭제',

package/MediaStorage/polyglot/messages_pt.js

@@ -52,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'Nenhum recorte ainda',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'Recorte criado',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Falha ao criar o recorte',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': 'O original é menor, então o recorte é salvo neste tamanho',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': 'Arraste o quadro para escolher a área do recorte',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'Mostrar este recorte',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Excluir recorte',

package/MediaStorage/polyglot/messages_ru.js

@@ -52,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'Кропов пока нет',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'Кроп создан',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Не удалось создать кроп',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': 'Оригинал меньше, поэтому кроп сохранится в этом размере',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': 'Перетащите рамку, чтобы выбрать область кропа',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'Показать кроп',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Удалить кроп',

package/MediaStorage/polyglot/messages_th.js

@@ -52,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'ยังไม่มีครอป',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'สร้างครอปแล้ว',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'สร้างครอปไม่สำเร็จ',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': 'ภาพต้นฉบับเล็กกว่า จึงบันทึกภาพครอปที่ขนาดนี้',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': 'ลากกรอบเพื่อเลือกพื้นที่ครอป',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'แสดงภาพครอปนี้',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'ลบครอป',

package/MediaStorage/polyglot/messages_zh.js

@@ -52,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': '暂无裁剪图',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': '裁剪图已创建',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': '创建裁剪图失败',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': '原图较小，裁剪将按此尺寸保存',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': '拖动框选择裁剪区域',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': '查看此裁剪',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': '删除裁剪图',

package/MediaStorage/polyglot/types.d.ts

@@ -75,6 +75,7 @@ export type MediaStorageMessages = {
     'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': NoParams;
+    'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': NoParams;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/smart-components-kit",
-  "version": "1.21.0",
+  "version": "1.21.1",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",