@archbase/components 4.0.18 → 4.0.19
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/archbase-components-4.0.19.tgz +0 -0
- package/dist/editors/ArchbaseImageEdit.d.ts +21 -1
- package/dist/image/editor/functions/crop-image.d.ts +32 -0
- package/dist/image/editor/index.d.ts +0 -30
- package/dist/image/editor/models/index.models.d.ts +16 -0
- package/dist/index.css +1 -1
- package/dist/index.js +8139 -7944
- package/package.json +5 -6
- package/src/editors/ArchbaseImageEdit.tsx +57 -2
- package/src/image/editor/functions/crop-image.ts +172 -0
- package/src/image/editor/index.tsx +411 -413
- package/src/image/editor/models/index.models.ts +16 -0
- package/dist/archbase-components-4.0.18.tgz +0 -0
|
Binary file
|
|
@@ -54,5 +54,25 @@ export interface ArchbaseImageEditProps<T, ID> extends ImageProps {
|
|
|
54
54
|
maxHeight?: number;
|
|
55
55
|
/** Tamanho máximo da imagem em KB (recomprime se exceder) */
|
|
56
56
|
maxSizeKb?: number;
|
|
57
|
+
/**
|
|
58
|
+
* Preserva a transparência da imagem (canal alfa).
|
|
59
|
+
*
|
|
60
|
+
* Quando true:
|
|
61
|
+
* - desabilita a compressão automática (`compressInitial` é forçado para `null`),
|
|
62
|
+
* impedindo que a biblioteca subjacente reencodifique PNG/WebP como JPEG.
|
|
63
|
+
* - força a saída em PNG (ou WebP, quando a origem já é WebP) ao redimensionar
|
|
64
|
+
* via `maxWidth`/`maxHeight`/`maxSizeKb`.
|
|
65
|
+
*
|
|
66
|
+
* Útil quando o usuário precisa enviar logos com fundo transparente.
|
|
67
|
+
* Default: `false`.
|
|
68
|
+
*/
|
|
69
|
+
preserveTransparency?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Habilita logs detalhados do fluxo de processamento da imagem no console
|
|
72
|
+
* (formato detectado, decisões de compressão, mime de saída, tamanhos, etc).
|
|
73
|
+
* Útil para diagnosticar problemas como perda de transparência.
|
|
74
|
+
* Default: `false`.
|
|
75
|
+
*/
|
|
76
|
+
debug?: boolean;
|
|
57
77
|
}
|
|
58
|
-
export declare function ArchbaseImageEdit<T, ID>({ width, height, dataSource, dataField, disabled, readOnly, required, label, description, error, src, radius, aspectRatio, objectFit, compressInitial, onChangeImage, disabledBase64Convertion, innerRef, variant, imageBackgroundColor, onProcessingChange, maxWidth, maxHeight, maxSizeKb, ...otherProps }: ArchbaseImageEditProps<T, ID>): import("react/jsx-runtime").JSX.Element;
|
|
78
|
+
export declare function ArchbaseImageEdit<T, ID>({ width, height, dataSource, dataField, disabled, readOnly, required, label, description, error, src, radius, aspectRatio, objectFit, compressInitial, onChangeImage, disabledBase64Convertion, innerRef, variant, imageBackgroundColor, onProcessingChange, maxWidth, maxHeight, maxSizeKb, preserveTransparency, debug, ...otherProps }: ArchbaseImageEditProps<T, ID>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Utilidades de crop usadas pelo modal de edição do ArchbaseImagePickerEditor.
|
|
3
|
+
* Trabalham diretamente sobre data URIs, preservando o mime original (PNG/WebP
|
|
4
|
+
* mantêm alpha; JPEG continua JPEG). Não há "fallback silencioso" para JPEG.
|
|
5
|
+
*
|
|
6
|
+
* Algoritmo de crop com rotação adaptado do exemplo oficial do react-easy-crop:
|
|
7
|
+
* https://github.com/ValentinH/react-easy-crop/blob/master/example/utils.ts
|
|
8
|
+
*/
|
|
9
|
+
export interface PixelCrop {
|
|
10
|
+
x: number;
|
|
11
|
+
y: number;
|
|
12
|
+
width: number;
|
|
13
|
+
height: number;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Aplica rotação (em graus) + crop sobre `imageSrc` e retorna o data URI
|
|
17
|
+
* resultante.
|
|
18
|
+
*
|
|
19
|
+
* Estratégia:
|
|
20
|
+
* 1. Desenha a imagem rotacionada centralizada num canvas auxiliar do
|
|
21
|
+
* tamanho do bounding box rotacionado.
|
|
22
|
+
* 2. Faz drawImage do recorte (pixelCrop) desse canvas auxiliar para o
|
|
23
|
+
* canvas final do tamanho do recorte.
|
|
24
|
+
*
|
|
25
|
+
* Output mime respeita `preserveTransparency` e a origem (ver pickOutputMime).
|
|
26
|
+
*/
|
|
27
|
+
export declare function getCroppedImage(imageSrc: string, pixelCrop: PixelCrop, rotation?: number, preserveTransparency?: boolean, quality?: number): Promise<string>;
|
|
28
|
+
/**
|
|
29
|
+
* Redimensiona um data URI para respeitar maxWidth/maxHeight, preservando
|
|
30
|
+
* proporção e mime apropriado. Usado fora do fluxo de crop, ao subir um arquivo.
|
|
31
|
+
*/
|
|
32
|
+
export declare function resizeDataUri(dataUri: string, maxWidth?: number, maxHeight?: number, maxSizeKb?: number, quality?: number, preserveTransparency?: boolean): Promise<string>;
|
|
@@ -2,10 +2,6 @@ import { ActionIconVariant } from '@mantine/core';
|
|
|
2
2
|
import { default as React } from 'react';
|
|
3
3
|
import { ArchbaseImagePickerConf } from './models/index.models';
|
|
4
4
|
export * from './models/index.models';
|
|
5
|
-
/**
|
|
6
|
-
* Props do ArchbaseImagePickerEditor
|
|
7
|
-
* Mantém compatibilidade total com a versão anterior
|
|
8
|
-
*/
|
|
9
5
|
export interface ArchbaseImagePickerEditorProps {
|
|
10
6
|
/** Configuração do editor (interface ArchbaseImagePickerConf) */
|
|
11
7
|
config?: ArchbaseImagePickerConf;
|
|
@@ -23,30 +19,4 @@ export interface ArchbaseImagePickerEditorProps {
|
|
|
23
19
|
/** Callback quando o estado de processamento muda (útil para desabilitar botões enquanto processa) */
|
|
24
20
|
onProcessingChange?: (isProcessing: boolean) => void;
|
|
25
21
|
}
|
|
26
|
-
/**
|
|
27
|
-
* ArchbaseImagePickerEditor - Componente de seleção e edição de imagens
|
|
28
|
-
*
|
|
29
|
-
* Funcionalidades:
|
|
30
|
-
* - Seleção de imagens (upload)
|
|
31
|
-
* - Edição com crop, redimensionamento
|
|
32
|
-
* - Compressão de qualidade (JPEG/WebP)
|
|
33
|
-
* - Conversão de formatos (PNG, JPEG, WebP)
|
|
34
|
-
* - Filtros (contraste, brilho, saturação, sépia, blur)
|
|
35
|
-
* - Suporte a dark mode
|
|
36
|
-
* - Suporte a URL externa, data URI e blob URL
|
|
37
|
-
*
|
|
38
|
-
* @example
|
|
39
|
-
* ```tsx
|
|
40
|
-
* <ArchbaseImagePickerEditor
|
|
41
|
-
* imageSrcProp={imageValue}
|
|
42
|
-
* config={{
|
|
43
|
-
* width: 300,
|
|
44
|
-
* height: 200,
|
|
45
|
-
* compressInitial: 80,
|
|
46
|
-
* objectFit: 'contain',
|
|
47
|
-
* onChangeImage: (newImage) => setImageValue(newImage),
|
|
48
|
-
* }}
|
|
49
|
-
* />
|
|
50
|
-
* ```
|
|
51
|
-
*/
|
|
52
22
|
export declare const ArchbaseImagePickerEditor: React.MemoExoticComponent<({ config, imageSrcProp, color, imageChanged, variant, onProcessingChange, }: ArchbaseImagePickerEditorProps) => import("react/jsx-runtime").JSX.Element>;
|
|
@@ -18,6 +18,22 @@ export interface ArchbaseImagePickerConf {
|
|
|
18
18
|
maxHeight?: number;
|
|
19
19
|
/** Tamanho máximo da imagem em KB (recomprime se exceder) */
|
|
20
20
|
maxSizeKb?: number;
|
|
21
|
+
/**
|
|
22
|
+
* Preserva a transparência (canal alfa) da imagem enviada.
|
|
23
|
+
* Quando true:
|
|
24
|
+
* - desabilita a compressão automática (compressInitial é forçado para null),
|
|
25
|
+
* impedindo que a biblioteca subjacente reencodifique PNG/WebP como JPEG.
|
|
26
|
+
* - força o mime de saída para PNG (ou WebP, se a origem já for WebP) ao
|
|
27
|
+
* redimensionar via maxWidth/maxHeight/maxSizeKb.
|
|
28
|
+
* Default: false.
|
|
29
|
+
*/
|
|
30
|
+
preserveTransparency?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Habilita logs de diagnóstico no console (formato detectado, mime de saída,
|
|
33
|
+
* tamanhos, decisões de compressão/redimensionamento).
|
|
34
|
+
* Default: false.
|
|
35
|
+
*/
|
|
36
|
+
debug?: boolean;
|
|
21
37
|
}
|
|
22
38
|
export interface IState {
|
|
23
39
|
quality: number;
|