From 6b1c5f65ae2bc2c5e33bfa741f87b00a35649027 Mon Sep 17 00:00:00 2001 From: Drikus Roor Date: Sun, 19 Jan 2025 21:39:43 +0100 Subject: [PATCH 1/2] refactor: Remove unnecessary scaling classes from tooth modifications --- src/components/Tooth.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Tooth.tsx b/src/components/Tooth.tsx index 7ddee51..94998ad 100644 --- a/src/components/Tooth.tsx +++ b/src/components/Tooth.tsx @@ -21,10 +21,10 @@ const teethModifications: TeethMofidication = { 15: { className: 'scale-x-110 -translate-y-2', }, 14: { className: 'scale-x-110 -translate-y-1', }, 13: { className: '', }, - 12: { className: 'zscale-y-105', }, - 11: { className: 'zscale-y-110', }, - 21: { className: 'zscale-y-110', }, - 22: { className: 'zscale-y-105', }, + 12: { className: '', }, + 11: { className: '', }, + 21: { className: '', }, + 22: { className: '', }, 23: { className: '', }, 24: { className: 'scale-x-110 -translate-y-1', }, 25: { className: 'scale-x-110 -translate-y-2', }, @@ -38,10 +38,10 @@ const teethModifications: TeethMofidication = { 45: { className: 'scale-x-110 -translate-y-2', }, 44: { className: 'scale-x-110 -translate-y-1', }, 43: { className: '', }, - 42: { className: 'zscale-y-105', }, - 41: { className: 'zscale-y-110', }, - 31: { className: 'zscale-y-110', }, - 32: { className: 'zscale-y-105', }, + 42: { className: '', }, + 41: { className: '', }, + 31: { className: '', }, + 32: { className: '', }, 33: { className: '', }, 34: { className: 'scale-x-110 -translate-y-1', }, 35: { className: 'scale-x-110 -translate-y-2', }, From 37ce47562002990ebf151b827537334d555ab0aa Mon Sep 17 00:00:00 2001 From: Drikus Roor Date: Sun, 19 Jan 2025 22:00:45 +0100 Subject: [PATCH 2/2] WIP: refactor: Update teeth modifications for improved scaling and rotation --- src/App.tsx | 2 +- src/components/Tooth.tsx | 81 +++++++++++++++++++++------------------- 2 files changed, 44 insertions(+), 39 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1c1f90c..eeca72c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -425,7 +425,7 @@ const ElasticPlacer = () => { > {teethLayout.map((row, rowIndex) => ( diff --git a/src/components/Tooth.tsx b/src/components/Tooth.tsx index 94998ad..1a05618 100644 --- a/src/components/Tooth.tsx +++ b/src/components/Tooth.tsx @@ -11,44 +11,49 @@ type TeethMofidication = { }; } -// Molars should be slightly wider than premolars -// Canines should be slightly pointier -// Incisors should be slightly smaller -const teethModifications: TeethMofidication = { - 18: { className: 'scale-x-110 -translate-y-6', }, - 17: { className: 'scale-x-110 -translate-y-4', }, - 16: { className: 'scale-x-110 -translate-y-3', }, - 15: { className: 'scale-x-110 -translate-y-2', }, - 14: { className: 'scale-x-110 -translate-y-1', }, - 13: { className: '', }, - 12: { className: '', }, - 11: { className: '', }, - 21: { className: '', }, - 22: { className: '', }, - 23: { className: '', }, - 24: { className: 'scale-x-110 -translate-y-1', }, - 25: { className: 'scale-x-110 -translate-y-2', }, - 26: { className: 'scale-x-110 -translate-y-3', }, - 27: { className: 'scale-x-110 -translate-y-4', }, - 28: { className: 'scale-x-110 -translate-y-6', }, - - 48: { className: 'scale-x-110 -translate-y-6', }, - 47: { className: 'scale-x-110 -translate-y-4', }, - 46: { className: 'scale-x-110 -translate-y-3', }, - 45: { className: 'scale-x-110 -translate-y-2', }, - 44: { className: 'scale-x-110 -translate-y-1', }, - 43: { className: '', }, - 42: { className: '', }, - 41: { className: '', }, - 31: { className: '', }, - 32: { className: '', }, - 33: { className: '', }, - 34: { className: 'scale-x-110 -translate-y-1', }, - 35: { className: 'scale-x-110 -translate-y-2', }, - 36: { className: 'scale-x-110 -translate-y-3', }, - 37: { className: 'scale-x-110 -translate-y-4', }, - 38: { className: 'scale-x-110 -translate-y-6', }, -} +const teethModifications: Record = { + // ------------------ TOP ROW ------------------ + // Quadrant 1 (18 -> 11) - Right side (patient's perspective) + 18: { className: 'scale-x-110 -rotate-90 translate-y-0' }, + 17: { className: 'scale-x-110 -rotate-[80deg] -translate-y-4' }, + 16: { className: 'scale-x-110 -rotate-[70deg] -translate-y-8' }, + 15: { className: 'scale-x-105 -rotate-[60deg] -translate-y-12' }, + 14: { className: 'scale-x-105 -rotate-[50deg] -translate-y-16' }, + 13: { className: 'scale-x-95 -rotate-2 -translate-y-20' }, // pointier canine + 12: { className: 'scale-x-90 -rotate-1 -translate-y-24' }, // smaller incisor + 11: { className: 'scale-x-90 rotate-0 -translate-y-28' }, // top center, highest + + // Quadrant 2 (21 -> 28) - Left side (patient's perspective) + 21: { className: 'scale-x-90 rotate-0 -translate-y-28' }, + 22: { className: 'scale-x-90 rotate-1 -translate-y-24' }, + 23: { className: 'scale-x-95 rotate-2 -translate-y-20' }, + 24: { className: 'scale-x-105 rotate-[50deg] -translate-y-16' }, + 25: { className: 'scale-x-105 rotate-[60deg] -translate-y-12' }, + 26: { className: 'scale-x-110 rotate-[70deg] -translate-y-8' }, + 27: { className: 'scale-x-110 rotate-[80deg] -translate-y-4' }, + 28: { className: 'scale-x-110 rotate-90 translate-y-0' }, + + // ------------------ BOTTOM ROW ------------------ + // Quadrant 4 (48 -> 41) - Lower right + 48: { className: 'scale-x-110 rotate-90 translate-y-0' }, + 47: { className: 'scale-x-110 rotate-[80deg] translate-y-4' }, + 46: { className: 'scale-x-110 rotate-[70deg] translate-y-8' }, + 45: { className: 'scale-x-105 rotate-[60deg] translate-y-12' }, + 44: { className: 'scale-x-105 rotate-[50deg] translate-y-16' }, + 43: { className: 'scale-x-95 rotate-2 translate-y-20' }, + 42: { className: 'scale-x-90 rotate-1 translate-y-24' }, + 41: { className: 'scale-x-90 rotate-0 translate-y-28' }, // bottom center, lowest + + // Quadrant 3 (31 -> 38) - Lower left + 31: { className: 'scale-x-90 -rotate-0 translate-y-28' }, + 32: { className: 'scale-x-90 -rotate-1 translate-y-24' }, + 33: { className: 'scale-x-95 -rotate-2 translate-y-20' }, + 34: { className: 'scale-x-105 -rotate-[50deg] translate-y-16' }, + 35: { className: 'scale-x-105 -rotate-[60deg] translate-y-12' }, + 36: { className: 'scale-x-110 -rotate-[70deg] translate-y-8' }, + 37: { className: 'scale-x-110 -rotate-[80deg] translate-y-4' }, + 38: { className: 'scale-x-110 -rotate-90 translate-y-0' }, +}; type ToothMemo = { number: number;