@greatapps/common 1.1.456 → 1.1.458
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/widgets/ImageUpload/ImageCropModal.mjs +9 -1
- package/dist/components/widgets/ImageUpload/ImageCropModal.mjs.map +1 -1
- package/dist/modules/images/utils/crop-image.mjs +1 -1
- package/dist/modules/images/utils/crop-image.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/widgets/ImageUpload/ImageCropModal.tsx +16 -0
- package/src/modules/images/utils/crop-image.ts +1 -1
|
@@ -77,13 +77,17 @@ function ImageCropModal({
|
|
|
77
77
|
imageSrc,
|
|
78
78
|
aspectRatio,
|
|
79
79
|
onConfirm,
|
|
80
|
-
showCircleGuide
|
|
80
|
+
showCircleGuide,
|
|
81
|
+
minWidth,
|
|
82
|
+
minHeight
|
|
81
83
|
}) {
|
|
82
84
|
const imgRef = useRef(null);
|
|
83
85
|
const containerRef = useRef(null);
|
|
84
86
|
const [crop, setCrop] = useState();
|
|
87
|
+
const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
|
|
85
88
|
const onImageLoad = (e) => {
|
|
86
89
|
const { naturalWidth, naturalHeight } = e.currentTarget;
|
|
90
|
+
setImageSize({ width: naturalWidth, height: naturalHeight });
|
|
87
91
|
const initialCrop = centerCrop(
|
|
88
92
|
makeAspectCrop(
|
|
89
93
|
{ unit: "%", width: 90 },
|
|
@@ -96,6 +100,8 @@ function ImageCropModal({
|
|
|
96
100
|
);
|
|
97
101
|
setCrop(initialCrop);
|
|
98
102
|
};
|
|
103
|
+
const minCropWidth = minWidth && imageSize.width > 0 ? minWidth / imageSize.width * 100 : void 0;
|
|
104
|
+
const minCropHeight = minHeight && imageSize.height > 0 ? minHeight / imageSize.height * 100 : void 0;
|
|
99
105
|
const handleConfirm = () => {
|
|
100
106
|
if (imgRef.current && crop) {
|
|
101
107
|
onConfirm(imgRef.current, crop);
|
|
@@ -123,6 +129,8 @@ function ImageCropModal({
|
|
|
123
129
|
aspect: aspectRatio,
|
|
124
130
|
className: `max-h-[60vh] custom-crop-area ${shouldShowCircle ? "with-circle" : ""}`,
|
|
125
131
|
keepSelection: true,
|
|
132
|
+
minWidth: minCropWidth,
|
|
133
|
+
minHeight: minCropHeight,
|
|
126
134
|
renderSelectionAddon,
|
|
127
135
|
children: /* @__PURE__ */ jsx(
|
|
128
136
|
"img",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/widgets/ImageUpload/ImageCropModal.tsx"],"sourcesContent":["'use client'\n\nimport { useRef, useState } from 'react'\nimport ReactCrop, {\n type Crop,\n centerCrop,\n makeAspectCrop,\n} from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\nimport {\n Dialog,\n DialogContent,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '../../ui/overlay/Dialog'\nimport { Button } from '../../ui/buttons/Button'\n\n// CSS customizado para grid pontilhado fino e círculo\nconst baseCropStyles = `\n .custom-crop-area .ReactCrop__crop-selection {\n border: 2px solid white !important;\n box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;\n }\n\n /* Grid de 9 quadrados - linhas pontilhadas finas */\n .custom-crop-area .ReactCrop__crop-selection .crop-grid {\n position: absolute;\n inset: 0;\n pointer-events: none;\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line {\n position: absolute;\n background: repeating-linear-gradient(\n to right,\n rgba(255, 255, 255, 0.5) 0,\n rgba(255, 255, 255, 0.5) 4px,\n transparent 4px,\n transparent 8px\n );\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.horizontal {\n left: 0;\n right: 0;\n height: 1px;\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.vertical {\n top: 0;\n bottom: 0;\n width: 1px;\n background: repeating-linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.5) 0,\n rgba(255, 255, 255, 0.5) 4px,\n transparent 4px,\n transparent 8px\n );\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h1 { top: 33.33%; }\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h2 { top: 66.66%; }\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v1 { left: 33.33%; }\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v2 { left: 66.66%; }\n\n /* Círculo inscrito */\n .custom-crop-area.with-circle .ReactCrop__crop-selection .crop-circle {\n position: absolute;\n inset: 0;\n border: 1px dashed rgba(255, 255, 255, 0.6);\n border-radius: 50%;\n pointer-events: none;\n }\n`\n\ninterface ImageCropModalProps {\n open: boolean\n onOpenChange: (open: boolean) => void\n imageSrc: string\n aspectRatio: number\n onConfirm: (image: HTMLImageElement, crop: Crop) => void\n showCircleGuide?: boolean\n}\n\nexport function ImageCropModal({\n open,\n onOpenChange,\n imageSrc,\n aspectRatio,\n onConfirm,\n showCircleGuide,\n}: ImageCropModalProps) {\n const imgRef = useRef<HTMLImageElement>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n const [crop, setCrop] = useState<Crop>()\n\n const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n const { naturalWidth, naturalHeight } = e.currentTarget\n\n const initialCrop = centerCrop(\n makeAspectCrop(\n { unit: '%', width: 90 },\n aspectRatio,\n naturalWidth,\n naturalHeight\n ),\n naturalWidth,\n naturalHeight\n )\n\n setCrop(initialCrop)\n }\n\n const handleConfirm = () => {\n if (imgRef.current && crop) {\n onConfirm(imgRef.current, crop)\n }\n }\n\n // Determina se deve mostrar círculo (aspect ratio 1:1 por padrão)\n const shouldShowCircle = showCircleGuide ?? aspectRatio === 1\n\n // Renderiza grid e círculo dentro da área de crop\n const renderSelectionAddon = () => (\n <>\n {/* Grid de 9 quadrados com linhas pontilhadas */}\n <div className=\"crop-grid\">\n <div className=\"crop-grid-line horizontal h1\" />\n <div className=\"crop-grid-line horizontal h2\" />\n <div className=\"crop-grid-line vertical v1\" />\n <div className=\"crop-grid-line vertical v2\" />\n </div>\n {/* Círculo inscrito */}\n {shouldShowCircle && <div className=\"crop-circle\" />}\n </>\n )\n\n return (\n <Dialog open={open} onOpenChange={onOpenChange}>\n <style>{baseCropStyles}</style>\n <DialogContent className=\"max-w-2xl\">\n <DialogHeader>\n <DialogTitle>Ajustar imagem</DialogTitle>\n </DialogHeader>\n\n <div ref={containerRef} className=\"flex justify-center py-4 relative\">\n <ReactCrop\n crop={crop}\n onChange={(c) => setCrop(c)}\n aspect={aspectRatio}\n className={`max-h-[60vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}\n keepSelection\n renderSelectionAddon={renderSelectionAddon}\n >\n <img\n ref={imgRef}\n src={imageSrc}\n alt=\"Crop\"\n onLoad={onImageLoad}\n className=\"max-h-[60vh] object-contain\"\n />\n </ReactCrop>\n </div>\n\n <p className=\"paragraph-small-regular text-zinc-500 text-center\">\n Arraste para ajustar a área de corte\n </p>\n\n <DialogFooter>\n <Button variant=\"secondary\" onClick={() => onOpenChange(false)}>\n Cancelar\n </Button>\n <Button onClick={handleConfirm}>Confirmar</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n )\n}\n"],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/widgets/ImageUpload/ImageCropModal.tsx"],"sourcesContent":["'use client'\n\nimport { useRef, useState } from 'react'\nimport ReactCrop, {\n type Crop,\n centerCrop,\n makeAspectCrop,\n} from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\nimport {\n Dialog,\n DialogContent,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '../../ui/overlay/Dialog'\nimport { Button } from '../../ui/buttons/Button'\n\n// CSS customizado para grid pontilhado fino e círculo\nconst baseCropStyles = `\n .custom-crop-area .ReactCrop__crop-selection {\n border: 2px solid white !important;\n box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;\n }\n\n /* Grid de 9 quadrados - linhas pontilhadas finas */\n .custom-crop-area .ReactCrop__crop-selection .crop-grid {\n position: absolute;\n inset: 0;\n pointer-events: none;\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line {\n position: absolute;\n background: repeating-linear-gradient(\n to right,\n rgba(255, 255, 255, 0.5) 0,\n rgba(255, 255, 255, 0.5) 4px,\n transparent 4px,\n transparent 8px\n );\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.horizontal {\n left: 0;\n right: 0;\n height: 1px;\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.vertical {\n top: 0;\n bottom: 0;\n width: 1px;\n background: repeating-linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.5) 0,\n rgba(255, 255, 255, 0.5) 4px,\n transparent 4px,\n transparent 8px\n );\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h1 { top: 33.33%; }\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h2 { top: 66.66%; }\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v1 { left: 33.33%; }\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v2 { left: 66.66%; }\n\n /* Círculo inscrito */\n .custom-crop-area.with-circle .ReactCrop__crop-selection .crop-circle {\n position: absolute;\n inset: 0;\n border: 1px dashed rgba(255, 255, 255, 0.6);\n border-radius: 50%;\n pointer-events: none;\n }\n`\n\ninterface ImageCropModalProps {\n open: boolean\n onOpenChange: (open: boolean) => void\n imageSrc: string\n aspectRatio: number\n onConfirm: (image: HTMLImageElement, crop: Crop) => void\n showCircleGuide?: boolean\n minWidth?: number\n minHeight?: number\n}\n\nexport function ImageCropModal({\n open,\n onOpenChange,\n imageSrc,\n aspectRatio,\n onConfirm,\n showCircleGuide,\n minWidth,\n minHeight,\n}: ImageCropModalProps) {\n const imgRef = useRef<HTMLImageElement>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n const [crop, setCrop] = useState<Crop>()\n const [imageSize, setImageSize] = useState({ width: 0, height: 0 })\n\n const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n const { naturalWidth, naturalHeight } = e.currentTarget\n setImageSize({ width: naturalWidth, height: naturalHeight })\n\n const initialCrop = centerCrop(\n makeAspectCrop(\n { unit: '%', width: 90 },\n aspectRatio,\n naturalWidth,\n naturalHeight\n ),\n naturalWidth,\n naturalHeight\n )\n\n setCrop(initialCrop)\n }\n\n // Calcula tamanho mínimo em porcentagem baseado nas dimensões mínimas em pixels\n const minCropWidth = minWidth && imageSize.width > 0\n ? (minWidth / imageSize.width) * 100\n : undefined\n const minCropHeight = minHeight && imageSize.height > 0\n ? (minHeight / imageSize.height) * 100\n : undefined\n\n const handleConfirm = () => {\n if (imgRef.current && crop) {\n onConfirm(imgRef.current, crop)\n }\n }\n\n // Determina se deve mostrar círculo (aspect ratio 1:1 por padrão)\n const shouldShowCircle = showCircleGuide ?? aspectRatio === 1\n\n // Renderiza grid e círculo dentro da área de crop\n const renderSelectionAddon = () => (\n <>\n {/* Grid de 9 quadrados com linhas pontilhadas */}\n <div className=\"crop-grid\">\n <div className=\"crop-grid-line horizontal h1\" />\n <div className=\"crop-grid-line horizontal h2\" />\n <div className=\"crop-grid-line vertical v1\" />\n <div className=\"crop-grid-line vertical v2\" />\n </div>\n {/* Círculo inscrito */}\n {shouldShowCircle && <div className=\"crop-circle\" />}\n </>\n )\n\n return (\n <Dialog open={open} onOpenChange={onOpenChange}>\n <style>{baseCropStyles}</style>\n <DialogContent className=\"max-w-2xl\">\n <DialogHeader>\n <DialogTitle>Ajustar imagem</DialogTitle>\n </DialogHeader>\n\n <div ref={containerRef} className=\"flex justify-center py-4 relative\">\n <ReactCrop\n crop={crop}\n onChange={(c) => setCrop(c)}\n aspect={aspectRatio}\n className={`max-h-[60vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}\n keepSelection\n minWidth={minCropWidth}\n minHeight={minCropHeight}\n renderSelectionAddon={renderSelectionAddon}\n >\n <img\n ref={imgRef}\n src={imageSrc}\n alt=\"Crop\"\n onLoad={onImageLoad}\n className=\"max-h-[60vh] object-contain\"\n />\n </ReactCrop>\n </div>\n\n <p className=\"paragraph-small-regular text-zinc-500 text-center\">\n Arraste para ajustar a área de corte\n </p>\n\n <DialogFooter>\n <Button variant=\"secondary\" onClick={() => onOpenChange(false)}>\n Cancelar\n </Button>\n <Button onClick={handleConfirm}>Confirmar</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n )\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/modules/images/utils/crop-image.ts"],"sourcesContent":["import type { Crop } from 'react-image-crop'\n\nexport async function cropImageToCanvas(\n image: HTMLImageElement,\n crop: Crop,\n targetWidth: number,\n targetHeight: number\n): Promise<string> {\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')\n\n if (!ctx) throw new Error('Canvas não suportado')\n\n const pixelCrop = {\n x: crop.unit === '%' ? (crop.x / 100) * image.naturalWidth : crop.x,\n y: crop.unit === '%' ? (crop.y / 100) * image.naturalHeight : crop.y,\n width:\n crop.unit === '%' ? (crop.width / 100) * image.naturalWidth : crop.width,\n height:\n crop.unit === '%'\n ? (crop.height / 100) * image.naturalHeight\n : crop.height,\n }\n\n canvas.width = targetWidth\n canvas.height = targetHeight\n\n ctx.drawImage(\n image,\n pixelCrop.x,\n pixelCrop.y,\n pixelCrop.width,\n pixelCrop.height,\n 0,\n 0,\n targetWidth,\n targetHeight\n )\n\n return canvas.toDataURL('image/
|
|
1
|
+
{"version":3,"sources":["../../../../src/modules/images/utils/crop-image.ts"],"sourcesContent":["import type { Crop } from 'react-image-crop'\n\nexport async function cropImageToCanvas(\n image: HTMLImageElement,\n crop: Crop,\n targetWidth: number,\n targetHeight: number\n): Promise<string> {\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')\n\n if (!ctx) throw new Error('Canvas não suportado')\n\n const pixelCrop = {\n x: crop.unit === '%' ? (crop.x / 100) * image.naturalWidth : crop.x,\n y: crop.unit === '%' ? (crop.y / 100) * image.naturalHeight : crop.y,\n width:\n crop.unit === '%' ? (crop.width / 100) * image.naturalWidth : crop.width,\n height:\n crop.unit === '%'\n ? (crop.height / 100) * image.naturalHeight\n : crop.height,\n }\n\n canvas.width = targetWidth\n canvas.height = targetHeight\n\n ctx.drawImage(\n image,\n pixelCrop.x,\n pixelCrop.y,\n pixelCrop.width,\n pixelCrop.height,\n 0,\n 0,\n targetWidth,\n targetHeight\n )\n\n return canvas.toDataURL('image/webp', 0.9)\n}\n"],"mappings":"AAEA,eAAsB,kBACpB,OACA,MACA,aACA,cACiB;AACjB,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,MAAM,OAAO,WAAW,IAAI;AAElC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yBAAsB;AAEhD,QAAM,YAAY;AAAA,IAChB,GAAG,KAAK,SAAS,MAAO,KAAK,IAAI,MAAO,MAAM,eAAe,KAAK;AAAA,IAClE,GAAG,KAAK,SAAS,MAAO,KAAK,IAAI,MAAO,MAAM,gBAAgB,KAAK;AAAA,IACnE,OACE,KAAK,SAAS,MAAO,KAAK,QAAQ,MAAO,MAAM,eAAe,KAAK;AAAA,IACrE,QACE,KAAK,SAAS,MACT,KAAK,SAAS,MAAO,MAAM,gBAC5B,KAAK;AAAA,EACb;AAEA,SAAO,QAAQ;AACf,SAAO,SAAS;AAEhB,MAAI;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO,OAAO,UAAU,cAAc,GAAG;AAC3C;","names":[]}
|
package/package.json
CHANGED
|
@@ -82,6 +82,8 @@ interface ImageCropModalProps {
|
|
|
82
82
|
aspectRatio: number
|
|
83
83
|
onConfirm: (image: HTMLImageElement, crop: Crop) => void
|
|
84
84
|
showCircleGuide?: boolean
|
|
85
|
+
minWidth?: number
|
|
86
|
+
minHeight?: number
|
|
85
87
|
}
|
|
86
88
|
|
|
87
89
|
export function ImageCropModal({
|
|
@@ -91,13 +93,17 @@ export function ImageCropModal({
|
|
|
91
93
|
aspectRatio,
|
|
92
94
|
onConfirm,
|
|
93
95
|
showCircleGuide,
|
|
96
|
+
minWidth,
|
|
97
|
+
minHeight,
|
|
94
98
|
}: ImageCropModalProps) {
|
|
95
99
|
const imgRef = useRef<HTMLImageElement>(null)
|
|
96
100
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
97
101
|
const [crop, setCrop] = useState<Crop>()
|
|
102
|
+
const [imageSize, setImageSize] = useState({ width: 0, height: 0 })
|
|
98
103
|
|
|
99
104
|
const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
|
|
100
105
|
const { naturalWidth, naturalHeight } = e.currentTarget
|
|
106
|
+
setImageSize({ width: naturalWidth, height: naturalHeight })
|
|
101
107
|
|
|
102
108
|
const initialCrop = centerCrop(
|
|
103
109
|
makeAspectCrop(
|
|
@@ -113,6 +119,14 @@ export function ImageCropModal({
|
|
|
113
119
|
setCrop(initialCrop)
|
|
114
120
|
}
|
|
115
121
|
|
|
122
|
+
// Calcula tamanho mínimo em porcentagem baseado nas dimensões mínimas em pixels
|
|
123
|
+
const minCropWidth = minWidth && imageSize.width > 0
|
|
124
|
+
? (minWidth / imageSize.width) * 100
|
|
125
|
+
: undefined
|
|
126
|
+
const minCropHeight = minHeight && imageSize.height > 0
|
|
127
|
+
? (minHeight / imageSize.height) * 100
|
|
128
|
+
: undefined
|
|
129
|
+
|
|
116
130
|
const handleConfirm = () => {
|
|
117
131
|
if (imgRef.current && crop) {
|
|
118
132
|
onConfirm(imgRef.current, crop)
|
|
@@ -152,6 +166,8 @@ export function ImageCropModal({
|
|
|
152
166
|
aspect={aspectRatio}
|
|
153
167
|
className={`max-h-[60vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}
|
|
154
168
|
keepSelection
|
|
169
|
+
minWidth={minCropWidth}
|
|
170
|
+
minHeight={minCropHeight}
|
|
155
171
|
renderSelectionAddon={renderSelectionAddon}
|
|
156
172
|
>
|
|
157
173
|
<img
|