ruicesar/rx.scoreodonto.com
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(transform): imagens não cortadas nas 4 posições (70%=1/√2) e no ajuste fino (sem overflow hidden)
continuous-integration/webhook Deploy concluído (VPS4)
Details

Browse Source
This commit is contained in:
VPS 4 Deploy Agent
2026-05-30 21:26:48 +02:00
parent ca74ccf0d4
commit 3f3e5fc33b
2 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dental-server/dental-client/src/components/TransformModal.jsx
+3 -2
View File
@@ -314,12 +314,13 @@ export default function TransformModal({ isOpen, onClose, image, onSaved }) {
onMouseLeave={(e) => (e.currentTarget.style.borderColor = 'var(--glass-border)')} onMouseLeave={(e) => (e.currentTarget.style.borderColor = 'var(--glass-border)')}
title={`Usar ${deg}° ${pg.flipH ? '(espelho H)' : pg.flipV ? '(espelho V)' : ''}`} title={`Usar ${deg}° ${pg.flipH ? '(espelho H)' : pg.flipV ? '(espelho V)' : ''}`}
> >
<div style={{ width: '100%', aspectRatio: '1 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}> {/* max 70% = 1/√2: garante que ao rotacionar 90° a imagem cabe no quadrado sem cortar */}
<div style={{ width: '100%', aspectRatio: '1 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<img <img
src={imageUrl} src={imageUrl}
alt={`${deg}°`} alt={`${deg}°`}
loading="lazy" loading="lazy"
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', transform: cssTransform(deg, pg.flipH, pg.flipV) }} style={{ maxWidth: '70%', maxHeight: '70%', objectFit: 'contain', transform: cssTransform(deg, pg.flipH, pg.flipV), transformOrigin: 'center' }}
/> />
</div> </div>
<span style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--text-secondary)' }}> <span style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--text-secondary)' }}>
dental-server/dental-client/src/index.css
+3 -2
View File
@@ -419,8 +419,9 @@ body {
} }
.panel-title { font-size: 1rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 16px; } .panel-title { font-size: 1rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 16px; }
.transform-panel .img-container { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; border-radius: var(--radius-sm); } /* overflow: visible para não cortar imagens rotacionadas */
.transform-panel img { max-width: 100%; max-height: 300px; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: block; } .transform-panel .img-container { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px; box-sizing: border-box; }
.transform-panel img { max-width: 100%; max-height: 320px; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: block; }
.transform-sidebar { .transform-sidebar {
width: 80px; display: flex; flex-direction: column; width: 80px; display: flex; flex-direction: column;