feat(ui): simplify orientation step replacing degree rotation array by basic transforms

dental-server/dental-client/public/version.txt

@@ -1 +1 @@
-2.1.49
+2.1.51

dental-server/dental-client/src/pages/ImageDetailsPage.jsx

@@ -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 = [
+  const initialOptions = [
-    { flipH: false, flipV: false, label: 'Rotações' },
+    { id: 'normal', deg: 0,  flipH: false, flipV: false, label: '0°' },
-    { flipH: true,  flipV: false, label: 'Espelhado ⇆' },
+    { id: 'fliph',  deg: 0,  flipH: true,  flipV: false, label: 'Espelho ⇆' },
-    { flipH: false, flipV: true,  label: 'Espelhado ⇅' },
+    { 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 pickOrientation = (opt) => {
-    const pg = choosePages[choosePage];
+    setBaseRotation(opt.deg);
-    setBaseRotation(deg);
+    setBaseFlipH(opt.flipH);
-    setBaseFlipH(pg.flipH);
+    setBaseFlipV(opt.flipV);
-    setBaseFlipV(pg.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) => {
+                  {currentOptions.map((opt) => (
-                    const pg = choosePages[choosePage];
-                    return (
                     <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>
             )}