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

feat(ui): simplify orientation step replacing degree rotation array by basic transforms
continuous-integration/webhook Deploy concluído (VPS4)
Details

Browse Source
This commit is contained in:
VPS 4 Deploy Agent
2026-05-31 23:56:14 +02:00
parent 4b4a4208ce
commit b6745a196d
2 changed files with 37 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dental-server/dental-client/public/version.txt
+1 -1
View File
@@ -1 +1 @@
2.1.49
2.1.51
dental-server/dental-client/src/pages/ImageDetailsPage.jsx
+19 -42
View File
@@ -193,17 +193,17 @@ export default function ImageDetailsPage() {
const cssTransform = (deg, flipH, flipV) =>
`scaleX(${flipH ? -1 : 1}) scaleY(${flipV ? -1 : 1}) rotate(${deg}deg)`;
const choosePages = [
{ flipH: false, flipV: false, label: 'Rotações' },
{ flipH: true, flipV: false, label: 'Espelhado ⇆' },
{ flipH: false, flipV: true, label: 'Espelhado ⇅' },
const initialOptions = [
{ id: 'normal', deg: 0, flipH: false, flipV: false, label: '0°' },
{ id: 'fliph', deg: 0, flipH: true, flipV: false, label: 'Espelho ⇆' },
{ id: 'flipv', deg: 0, flipH: false, flipV: true, label: 'Espelho ⇅' },
{ id: 'rot90', deg: 90, flipH: false, flipV: false, label: 'Rotacionar +90°' },
];
const pickOrientation = (deg) => {
const pg = choosePages[choosePage];
setBaseRotation(deg);
setBaseFlipH(pg.flipH);
setBaseFlipV(pg.flipV);
const pickOrientation = (opt) => {
setBaseRotation(opt.deg);
setBaseFlipH(opt.flipH);
setBaseFlipV(opt.flipV);
setFineTuneAngle(0);
setStep('finetune');
};
@@ -282,9 +282,8 @@ export default function ImageDetailsPage() {
};
// Gerencia opções (4 no total). No mobile exibe APENAS UMA GIGANTE por vez.
const allRotations = [0, 90, 180, 270];
const useOneCard = isMobile;
const currentRotations = useOneCard ? [allRotations[orientationSubpage]] : allRotations;
const currentOptions = useOneCard ? [initialOptions[orientationSubpage]] : initialOptions;
return (
<div className="layout">
@@ -352,25 +351,6 @@ export default function ImageDetailsPage() {
Escolha a melhor orientação inicial.
</p>
{/* Controles Principais de Categoria (Rotações, Espelhos) */}
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, marginBottom: 20 }}>
<button
type="button"
className="btn btn-secondary"
onClick={() => { setChoosePage((p) => Math.max(0, p - 1)); setOrientationSubpage(0); }}
disabled={choosePage === 0}
>← Categoria</button>
<span style={{ fontSize: '1rem', fontWeight: 600, color: 'var(--text-secondary)' }}>
{choosePages[choosePage].label} ({choosePage + 1}/{choosePages.length})
</span>
<button
type="button"
className="btn btn-secondary"
onClick={() => { setChoosePage((p) => Math.min(choosePages.length - 1, p + 1)); setOrientationSubpage(0); }}
disabled={choosePage === choosePages.length - 1}
>Categoria →</button>
</div>
{/* Controles de Rotação (Mobile exibe 1 por vez) */}
{useOneCard && (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, marginBottom: 16 }}>
@@ -387,36 +367,33 @@ export default function ImageDetailsPage() {
)}
<div style={{ display: 'grid', gridTemplateColumns: useOneCard ? '1fr' : 'repeat(4, 1fr)', gap: 16 }}>
{currentRotations.map((deg) => {
const pg = choosePages[choosePage];
return (
{currentOptions.map((opt) => (
<div
key={deg}
key={opt.id}
style={{
border: '1px solid var(--border-color)', borderRadius: 10, background: 'var(--bg-color)',
border: '1px solid var(--border-color)', borderRadius: 10, background: 'var(--bg-surface)',
padding: useOneCard ? 0 : 16, display: 'flex', flexDirection: 'column',
alignItems: 'center', transition: 'all .2s ease', overflow: 'hidden'
}}
>
<div style={{ width: '100%', aspectRatio: useOneCard ? 'auto' : '1 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: useOneCard ? 20 : 0, background: '#0b1220' }}>
<div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: useOneCard ? 20 : 0, background: 'var(--bg-surface)' }}>
<img
src={imageUrl}
alt={`${deg}°`}
alt={opt.label}
loading="lazy"
style={{ width: useOneCard ? '100%' : '80%', maxHeight: useOneCard ? '50vh' : '100%', objectFit: 'contain', transform: cssTransform(deg, pg.flipH, pg.flipV), transformOrigin: 'center' }}
style={{ width: '100%', maxHeight: useOneCard ? '50vh' : 280, objectFit: 'contain', transform: cssTransform(opt.deg, opt.flipH, opt.flipV), transformOrigin: 'center' }}
/>
</div>
<div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center', width: '100%', background: 'var(--bg-surface)' }}>
<span style={{ fontSize: '1rem', fontWeight: 600, color: 'var(--text-primary)' }}>
{deg}°{pg.flipH ? ' ⇆' : pg.flipV ? ' ⇅' : ''}
{opt.label}
</span>
<button className="btn btn-primary" style={{ width: '100%' }} onClick={() => pickOrientation(deg)}>
<button className="btn btn-primary" style={{ width: '100%' }} onClick={() => pickOrientation(opt)}>
✅ Escolher esta
</button>
</div>
</div>
);
})}
))}
</div>
</div>
)}