@elogroup-sereduc/portal-aluno-tour 1.0.5 → 1.0.6

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.
Files changed (4) hide show
  1. package/dist/components/Tour.d.ts.map +1 -1
  2. package/dist/components/Tour.js +59 -32
  3. package/package.json +1 -1
  4. package/src/components/Tour.tsx +63 -34
package/dist/components/Tour.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../src/components/Tour.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,UAAU,CAAC;AAG/C;;GAEG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAK,EACL,WAAe,EACf,OAAY,EACZ,MAAM,EACN,UAAU,GACX,EAAE,SAAS,kDAqcX"}
1
+ {"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../src/components/Tour.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,UAAU,CAAC;AAG/C;;GAEG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAK,EACL,WAAe,EACf,OAAY,EACZ,MAAM,EACN,UAAU,GACX,EAAE,SAAS,kDAkeX"}
package/dist/components/Tour.js CHANGED
@@ -16,19 +16,20 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
16
16
  const { nextLabel = "Próximo", prevLabel = "Anterior", skipLabel = "Pular", doneLabel = "Concluir", showProgress = true, showBullets = true, exitOnOverlayClick = false, exitOnEsc = true, } = options;
17
17
  // Calcula a posição da tooltip baseado no elemento destacado
18
18
  const calculateTooltipPosition = useCallback((element, position = "bottom") => {
19
+ // Recalcula o rect após possíveis mudanças de scroll
19
20
  const rect = element.getBoundingClientRect();
20
21
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
21
22
  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
22
23
  const viewportWidth = window.innerWidth;
23
24
  const viewportHeight = window.innerHeight;
24
- // Tamanho estimado da tooltip (ajuste conforme necessário)
25
+ // Tamanho estimado da tooltip
25
26
  const tooltipWidth = 384; // max-w-sm = 384px
26
- const tooltipHeight = 200; // altura estimada
27
- const spacing = 16; // espaçamento entre elemento e tooltip
27
+ const tooltipHeight = 250; // altura estimada com conteúdo
28
+ const spacing = 8; // espaçamento menor para ficar mais próximo
28
29
  let top = 0;
29
30
  let left = 0;
30
31
  let finalPosition = position;
31
- // Calcula posição base
32
+ // Calcula posição base - sempre próxima ao elemento
32
33
  switch (position) {
33
34
  case "top":
34
35
  top = rect.top + scrollTop - spacing;
@@ -51,48 +52,69 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
51
52
  left = rect.left + scrollLeft + rect.width / 2;
52
53
  finalPosition = "bottom";
53
54
  }
54
- // Ajusta posição se a tooltip sair da viewport
55
+ // Ajusta posição apenas se necessário para não sair da viewport
56
+ // Mas mantém o mais próximo possível do elemento
55
57
  if (finalPosition === "bottom" || finalPosition === "top") {
56
- // Ajusta horizontalmente
57
- if (left - tooltipWidth / 2 < scrollLeft) {
58
- left = scrollLeft + tooltipWidth / 2 + 16;
58
+ // Ajusta horizontalmente apenas se necessário, mantendo próximo ao centro do elemento
59
+ const elementCenterX = rect.left + scrollLeft + rect.width / 2;
60
+ const minLeft = scrollLeft + tooltipWidth / 2 + 8;
61
+ const maxLeft = scrollLeft + viewportWidth - tooltipWidth / 2 - 8;
62
+ if (elementCenterX < minLeft) {
63
+ left = minLeft;
59
64
  }
60
- else if (left + tooltipWidth / 2 > scrollLeft + viewportWidth) {
61
- left = scrollLeft + viewportWidth - tooltipWidth / 2 - 16;
65
+ else if (elementCenterX > maxLeft) {
66
+ left = maxLeft;
62
67
  }
63
- // Se não couber embaixo, tenta em cima
64
- if (finalPosition === "bottom" && top + tooltipHeight > scrollTop + viewportHeight) {
65
- if (rect.top - tooltipHeight > scrollTop) {
66
- top = rect.top + scrollTop - tooltipHeight - spacing;
68
+ else {
69
+ left = elementCenterX; // Mantém centralizado no elemento
70
+ }
71
+ // Verifica se precisa mudar de posição vertical
72
+ if (finalPosition === "bottom") {
73
+ const spaceBelow = viewportHeight - (rect.bottom - scrollTop);
74
+ const spaceAbove = rect.top - scrollTop;
75
+ if (spaceBelow < tooltipHeight + spacing && spaceAbove > spaceBelow) {
76
+ // Muda para cima se houver mais espaço
77
+ top = rect.top + scrollTop - spacing;
67
78
  finalPosition = "top";
68
79
  }
69
80
  }
70
- // Se não couber em cima, tenta embaixo
71
- else if (finalPosition === "top" && top - tooltipHeight < scrollTop) {
72
- if (rect.bottom + tooltipHeight < scrollTop + viewportHeight) {
81
+ else if (finalPosition === "top") {
82
+ const spaceAbove = rect.top - scrollTop;
83
+ const spaceBelow = viewportHeight - (rect.bottom - scrollTop);
84
+ if (spaceAbove < tooltipHeight + spacing && spaceBelow > spaceAbove) {
85
+ // Muda para baixo se houver mais espaço
73
86
  top = rect.bottom + scrollTop + spacing;
74
87
  finalPosition = "bottom";
75
88
  }
76
89
  }
77
90
  }
78
91
  else if (finalPosition === "left" || finalPosition === "right") {
79
- // Ajusta verticalmente
80
- if (top - tooltipHeight / 2 < scrollTop) {
81
- top = scrollTop + tooltipHeight / 2 + 16;
92
+ // Ajusta verticalmente apenas se necessário
93
+ const elementCenterY = rect.top + scrollTop + rect.height / 2;
94
+ const minTop = scrollTop + tooltipHeight / 2 + 8;
95
+ const maxTop = scrollTop + viewportHeight - tooltipHeight / 2 - 8;
96
+ if (elementCenterY < minTop) {
97
+ top = minTop;
98
+ }
99
+ else if (elementCenterY > maxTop) {
100
+ top = maxTop;
82
101
  }
83
- else if (top + tooltipHeight / 2 > scrollTop + viewportHeight) {
84
- top = scrollTop + viewportHeight - tooltipHeight / 2 - 16;
102
+ else {
103
+ top = elementCenterY; // Mantém centralizado no elemento
85
104
  }
86
- // Se não couber à esquerda, tenta à direita
87
- if (finalPosition === "left" && left - tooltipWidth < scrollLeft) {
88
- if (rect.right + tooltipWidth < scrollLeft + viewportWidth) {
105
+ // Verifica se precisa mudar de posição horizontal
106
+ if (finalPosition === "left") {
107
+ const spaceLeft = rect.left - scrollLeft;
108
+ const spaceRight = viewportWidth - (rect.right - scrollLeft);
109
+ if (spaceLeft < tooltipWidth + spacing && spaceRight > spaceLeft) {
89
110
  left = rect.right + scrollLeft + spacing;
90
111
  finalPosition = "right";
91
112
  }
92
113
  }
93
- // Se não couber à direita, tenta à esquerda
94
- else if (finalPosition === "right" && left + tooltipWidth > scrollLeft + viewportWidth) {
95
- if (rect.left - tooltipWidth > scrollLeft) {
114
+ else if (finalPosition === "right") {
115
+ const spaceRight = viewportWidth - (rect.right - scrollLeft);
116
+ const spaceLeft = rect.left - scrollLeft;
117
+ if (spaceRight < tooltipWidth + spacing && spaceLeft > spaceRight) {
96
118
  left = rect.left + scrollLeft - spacing;
97
119
  finalPosition = "left";
98
120
  }
@@ -133,11 +155,16 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
133
155
  setHighlightedElement(element);
134
156
  // Scroll para o elemento
135
157
  element.scrollIntoView({ behavior: "smooth", block: "center" });
136
- // Calcula posição da tooltip após um pequeno delay para garantir que o scroll terminou
158
+ // Calcula posição da tooltip após um delay para garantir que o scroll terminou
159
+ // Usa um delay maior para garantir que o scroll terminou completamente
137
160
  setTimeout(() => {
138
- const position = calculateTooltipPosition(element, step.position || "bottom");
139
- setTooltipPosition(position);
140
- }, 300);
161
+ // Recalcula o rect após o scroll
162
+ const updatedRect = element.getBoundingClientRect();
163
+ if (updatedRect.width > 0 && updatedRect.height > 0) {
164
+ const position = calculateTooltipPosition(element, step.position || "bottom");
165
+ setTooltipPosition(position);
166
+ }
167
+ }, 400);
141
168
  }, [isVisible, currentStep, steps, calculateTooltipPosition]);
142
169
  // Adiciona overlay e highlight ao elemento
143
170
  useEffect(() => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elogroup-sereduc/portal-aluno-tour",
3
- "version": "1.0.5",
3
+ "version": "1.0.6",
4
4
  "description": "Componente de tour guiado customizado usando HeroUI para o Portal do Aluno",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/src/components/Tour.tsx CHANGED
@@ -35,22 +35,23 @@ export function Tour({
35
35
 
36
36
  // Calcula a posição da tooltip baseado no elemento destacado
37
37
  const calculateTooltipPosition = useCallback((element: HTMLElement, position: string = "bottom") => {
38
+ // Recalcula o rect após possíveis mudanças de scroll
38
39
  const rect = element.getBoundingClientRect();
39
40
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
40
41
  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
41
42
  const viewportWidth = window.innerWidth;
42
43
  const viewportHeight = window.innerHeight;
43
44
 
44
- // Tamanho estimado da tooltip (ajuste conforme necessário)
45
+ // Tamanho estimado da tooltip
45
46
  const tooltipWidth = 384; // max-w-sm = 384px
46
- const tooltipHeight = 200; // altura estimada
47
- const spacing = 16; // espaçamento entre elemento e tooltip
47
+ const tooltipHeight = 250; // altura estimada com conteúdo
48
+ const spacing = 8; // espaçamento menor para ficar mais próximo
48
49
 
49
50
  let top = 0;
50
51
  let left = 0;
51
52
  let finalPosition = position;
52
53
 
53
- // Calcula posição base
54
+ // Calcula posição base - sempre próxima ao elemento
54
55
  switch (position) {
55
56
  case "top":
56
57
  top = rect.top + scrollTop - spacing;
@@ -74,47 +75,70 @@ export function Tour({
74
75
  finalPosition = "bottom";
75
76
  }
76
77
 
77
- // Ajusta posição se a tooltip sair da viewport
78
+ // Ajusta posição apenas se necessário para não sair da viewport
79
+ // Mas mantém o mais próximo possível do elemento
78
80
  if (finalPosition === "bottom" || finalPosition === "top") {
79
- // Ajusta horizontalmente
80
- if (left - tooltipWidth / 2 < scrollLeft) {
81
- left = scrollLeft + tooltipWidth / 2 + 16;
82
- } else if (left + tooltipWidth / 2 > scrollLeft + viewportWidth) {
83
- left = scrollLeft + viewportWidth - tooltipWidth / 2 - 16;
81
+ // Ajusta horizontalmente apenas se necessário, mantendo próximo ao centro do elemento
82
+ const elementCenterX = rect.left + scrollLeft + rect.width / 2;
83
+ const minLeft = scrollLeft + tooltipWidth / 2 + 8;
84
+ const maxLeft = scrollLeft + viewportWidth - tooltipWidth / 2 - 8;
85
+
86
+ if (elementCenterX < minLeft) {
87
+ left = minLeft;
88
+ } else if (elementCenterX > maxLeft) {
89
+ left = maxLeft;
90
+ } else {
91
+ left = elementCenterX; // Mantém centralizado no elemento
84
92
  }
85
93
 
86
- // Se não couber embaixo, tenta em cima
87
- if (finalPosition === "bottom" && top + tooltipHeight > scrollTop + viewportHeight) {
88
- if (rect.top - tooltipHeight > scrollTop) {
89
- top = rect.top + scrollTop - tooltipHeight - spacing;
94
+ // Verifica se precisa mudar de posição vertical
95
+ if (finalPosition === "bottom") {
96
+ const spaceBelow = viewportHeight - (rect.bottom - scrollTop);
97
+ const spaceAbove = rect.top - scrollTop;
98
+
99
+ if (spaceBelow < tooltipHeight + spacing && spaceAbove > spaceBelow) {
100
+ // Muda para cima se houver mais espaço
101
+ top = rect.top + scrollTop - spacing;
90
102
  finalPosition = "top";
91
103
  }
92
- }
93
- // Se não couber em cima, tenta embaixo
94
- else if (finalPosition === "top" && top - tooltipHeight < scrollTop) {
95
- if (rect.bottom + tooltipHeight < scrollTop + viewportHeight) {
104
+ } else if (finalPosition === "top") {
105
+ const spaceAbove = rect.top - scrollTop;
106
+ const spaceBelow = viewportHeight - (rect.bottom - scrollTop);
107
+
108
+ if (spaceAbove < tooltipHeight + spacing && spaceBelow > spaceAbove) {
109
+ // Muda para baixo se houver mais espaço
96
110
  top = rect.bottom + scrollTop + spacing;
97
111
  finalPosition = "bottom";
98
112
  }
99
113
  }
100
114
  } else if (finalPosition === "left" || finalPosition === "right") {
101
- // Ajusta verticalmente
102
- if (top - tooltipHeight / 2 < scrollTop) {
103
- top = scrollTop + tooltipHeight / 2 + 16;
104
- } else if (top + tooltipHeight / 2 > scrollTop + viewportHeight) {
105
- top = scrollTop + viewportHeight - tooltipHeight / 2 - 16;
115
+ // Ajusta verticalmente apenas se necessário
116
+ const elementCenterY = rect.top + scrollTop + rect.height / 2;
117
+ const minTop = scrollTop + tooltipHeight / 2 + 8;
118
+ const maxTop = scrollTop + viewportHeight - tooltipHeight / 2 - 8;
119
+
120
+ if (elementCenterY < minTop) {
121
+ top = minTop;
122
+ } else if (elementCenterY > maxTop) {
123
+ top = maxTop;
124
+ } else {
125
+ top = elementCenterY; // Mantém centralizado no elemento
106
126
  }
107
127
 
108
- // Se não couber à esquerda, tenta à direita
109
- if (finalPosition === "left" && left - tooltipWidth < scrollLeft) {
110
- if (rect.right + tooltipWidth < scrollLeft + viewportWidth) {
128
+ // Verifica se precisa mudar de posição horizontal
129
+ if (finalPosition === "left") {
130
+ const spaceLeft = rect.left - scrollLeft;
131
+ const spaceRight = viewportWidth - (rect.right - scrollLeft);
132
+
133
+ if (spaceLeft < tooltipWidth + spacing && spaceRight > spaceLeft) {
111
134
  left = rect.right + scrollLeft + spacing;
112
135
  finalPosition = "right";
113
136
  }
114
- }
115
- // Se não couber à direita, tenta à esquerda
116
- else if (finalPosition === "right" && left + tooltipWidth > scrollLeft + viewportWidth) {
117
- if (rect.left - tooltipWidth > scrollLeft) {
137
+ } else if (finalPosition === "right") {
138
+ const spaceRight = viewportWidth - (rect.right - scrollLeft);
139
+ const spaceLeft = rect.left - scrollLeft;
140
+
141
+ if (spaceRight < tooltipWidth + spacing && spaceLeft > spaceRight) {
118
142
  left = rect.left + scrollLeft - spacing;
119
143
  finalPosition = "left";
120
144
  }
@@ -163,11 +187,16 @@ export function Tour({
163
187
  // Scroll para o elemento
164
188
  element.scrollIntoView({ behavior: "smooth", block: "center" });
165
189
 
166
- // Calcula posição da tooltip após um pequeno delay para garantir que o scroll terminou
190
+ // Calcula posição da tooltip após um delay para garantir que o scroll terminou
191
+ // Usa um delay maior para garantir que o scroll terminou completamente
167
192
  setTimeout(() => {
168
- const position = calculateTooltipPosition(element, step.position || "bottom");
169
- setTooltipPosition(position);
170
- }, 300);
193
+ // Recalcula o rect após o scroll
194
+ const updatedRect = element.getBoundingClientRect();
195
+ if (updatedRect.width > 0 && updatedRect.height > 0) {
196
+ const position = calculateTooltipPosition(element, step.position || "bottom");
197
+ setTooltipPosition(position);
198
+ }
199
+ }, 400);
171
200
  }, [isVisible, currentStep, steps, calculateTooltipPosition]);
172
201
 
173
202
  // Adiciona overlay e highlight ao elemento