Skip to content

Commit d29e638

Browse files
pivanovpivanov
authored
fix: improver widget (#144)
1 parent 18c61c9 commit d29e638

File tree

5 files changed

+95
-56
lines changed

5 files changed

+95
-56
lines changed

‎packages/scan/src/core/web/assets/css/styles.tailwind.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,6 @@ button {
8686
@apply z-[999999999];
8787
@apply animate-fade-in animation-duration-300 animation-delay-300;
8888
@apply shadow-[0_4px_12px_rgba(0,0,0,0.2)];
89-
max-width: calc(100vw - 48px); /* 48px = SAFE_AREA * 2 */
90-
max-height: calc(100vh - 48px);
9189
}
9290

9391

‎packages/scan/src/core/web/components/widget/helpers.ts‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -93,30 +93,44 @@ export const calculatePosition = (corner: Corner, width: number, height: number)
9393
const windowWidth = window.innerWidth;
9494
const windowHeight = window.innerHeight;
9595

96+
// Check if widget is minimized
97+
const isMinimized = width === MIN_SIZE.width;
98+
99+
// Only bound dimensions if minimized
100+
const effectiveWidth = isMinimized ? width : Math.min(width, windowWidth - (SAFE_AREA * 2));
101+
const effectiveHeight = isMinimized ? height : Math.min(height, windowHeight - (SAFE_AREA * 2));
102+
96103
// Calculate base positions
104+
let x: number;
105+
let y: number;
106+
97107
switch (corner) {
98108
case 'top-right':
99-
return {
100-
x: windowWidth - width - SAFE_AREA,
101-
y: SAFE_AREA
102-
};
109+
x = windowWidth - effectiveWidth - SAFE_AREA;
110+
y = SAFE_AREA;
111+
break;
103112
case 'bottom-right':
104-
return {
105-
x: windowWidth - width - SAFE_AREA,
106-
y: windowHeight - height - SAFE_AREA
107-
};
113+
x = windowWidth - effectiveWidth - SAFE_AREA;
114+
y = windowHeight - effectiveHeight - SAFE_AREA;
115+
break;
108116
case 'bottom-left':
109-
return {
110-
x: SAFE_AREA,
111-
y: windowHeight - height - SAFE_AREA
112-
};
117+
x = SAFE_AREA;
118+
y = windowHeight - effectiveHeight - SAFE_AREA;
119+
break;
113120
case 'top-left':
114121
default:
115-
return {
116-
x: SAFE_AREA,
117-
y: SAFE_AREA
118-
};
122+
x = SAFE_AREA;
123+
y = SAFE_AREA;
124+
break;
119125
}
126+
127+
// Only ensure positions are within bounds if minimized
128+
if (isMinimized) {
129+
x = Math.max(SAFE_AREA, Math.min(x, windowWidth - effectiveWidth - SAFE_AREA));
130+
y = Math.max(SAFE_AREA, Math.min(y, windowHeight - effectiveHeight - SAFE_AREA));
131+
}
132+
133+
return { x, y };
120134
};
121135

122136
export const getPositionClasses = (position: ResizeHandleProps['position']): string => {

‎packages/scan/src/core/web/components/widget/index.tsx‎

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,16 @@ export const Widget = () => {
3636
newWidth = calculateBoundedSize(lastDims.width, 0, true);
3737
newHeight = calculateBoundedSize(lastDims.height, 0, false);
3838
} else {
39-
if (signalWidget.value.dimensions.width !== refInitialMinimizedWidth.current) {
39+
const currentDims = signalWidget.value.dimensions;
40+
if (currentDims.width > refInitialMinimizedWidth.current) {
4041
signalWidget.value = {
4142
...signalWidget.value,
4243
lastDimensions: {
43-
...signalWidget.value.dimensions
44+
isFullWidth: currentDims.isFullWidth,
45+
isFullHeight: currentDims.isFullHeight,
46+
width: currentDims.width,
47+
height: currentDims.height,
48+
position: currentDims.position
4449
}
4550
};
4651
}
@@ -74,16 +79,20 @@ export const Widget = () => {
7479
containerStyle.transform = `translate3d(${newPosition.x}px, ${newPosition.y}px, 0)`;
7580
});
7681

82+
const newDimensions = {
83+
isFullWidth: newWidth >= window.innerWidth - (SAFE_AREA * 2),
84+
isFullHeight: newHeight >= window.innerHeight - (SAFE_AREA * 2),
85+
width: newWidth,
86+
height: newHeight,
87+
position: newPosition
88+
};
89+
7790
signalWidget.value = {
7891
corner,
79-
dimensions: {
80-
isFullWidth: newWidth >= window.innerWidth - (SAFE_AREA * 2),
81-
isFullHeight: newHeight >= window.innerHeight - (SAFE_AREA * 2),
82-
width: newWidth,
83-
height: newHeight,
84-
position: newPosition
85-
},
86-
lastDimensions: signalWidget.value.lastDimensions
92+
dimensions: newDimensions,
93+
lastDimensions: isInspectFocused
94+
? signalWidget.value.lastDimensions
95+
: (newWidth > refInitialMinimizedWidth.current ? newDimensions : signalWidget.value.lastDimensions)
8796
};
8897

8998
if (shouldSave) {
@@ -197,14 +206,11 @@ export const Widget = () => {
197206
lastDimensions: signalWidget.value.lastDimensions
198207
};
199208

200-
const shouldSave = !(dimensions.width < MIN_SIZE.width || dimensions.height < MIN_SIZE.height * 5);
201-
if (shouldSave) {
202-
saveLocalStorage(LOCALSTORAGE_KEY, {
203-
corner: signalWidget.value.corner,
204-
dimensions: signalWidget.value.dimensions,
205-
lastDimensions: signalWidget.value.lastDimensions
206-
});
207-
}
209+
saveLocalStorage(LOCALSTORAGE_KEY, {
210+
corner: newCorner,
211+
dimensions: signalWidget.value.dimensions,
212+
lastDimensions: signalWidget.value.lastDimensions
213+
});
208214
};
209215

210216
document.addEventListener('mousemove', handleMouseMove);
@@ -218,14 +224,21 @@ export const Widget = () => {
218224
refInitialMinimizedHeight.current = refFooter.current.offsetHeight;
219225
refInitialMinimizedWidth.current = refContainer.current.offsetWidth;
220226

221-
signalWidget.value = {
222-
...signalWidget.value,
223-
dimensions: {
224-
...signalWidget.value.dimensions,
225-
width: refInitialMinimizedWidth.current,
226-
height: refInitialMinimizedHeight.current
227-
}
228-
};
227+
refContainer.current.style.maxWidth = `calc(100vw - ${SAFE_AREA * 2}px)`;
228+
refContainer.current.style.maxHeight = `calc(100vh - ${SAFE_AREA * 2}px)`;
229+
230+
if (Store.inspectState.value.kind !== 'focused') {
231+
signalWidget.value = {
232+
...signalWidget.value,
233+
dimensions: {
234+
isFullWidth: false,
235+
isFullHeight: false,
236+
width: refInitialMinimizedWidth.current,
237+
height: refInitialMinimizedHeight.current,
238+
position: signalWidget.value.dimensions.position
239+
}
240+
};
241+
}
229242

230243
signalRefContainer.value = refContainer.current;
231244

@@ -272,7 +285,7 @@ export const Widget = () => {
272285
resizeTimeout = requestAnimationFrame(() => {
273286
const container = refContainer.current;
274287
if (!container) return;
275-
updateWidgetPosition();
288+
updateWidgetPosition(true);
276289
});
277290
}, 32);
278291

‎packages/scan/src/core/web/components/widget/resize-handle.tsx‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useCallback, useRef, useEffect } from 'preact/hooks';
33
import { cn, saveLocalStorage, toggleMultipleClasses } from '@web-utils/helpers';
44
import { Store } from 'src/core';
55
import { signalWidget, signalRefContainer } from '../../state';
6-
import { SAFE_AREA, LOCALSTORAGE_KEY, MIN_SIZE } from '../../constants';
6+
import { LOCALSTORAGE_KEY, MIN_SIZE } from '../../constants';
77
import { Icon } from '../icon';
88
import { type Corner, type ResizeHandleProps } from './types';
99
import {
@@ -90,7 +90,6 @@ export const ResizeHandle = ({ position }: ResizeHandleProps) => {
9090
e.preventDefault();
9191
e.stopPropagation();
9292

93-
9493
const container = signalRefContainer.value;
9594
if (!container) return;
9695

@@ -99,14 +98,22 @@ export const ResizeHandle = ({ position }: ResizeHandleProps) => {
9998
const initialX = e.clientX;
10099
const initialY = e.clientY;
101100

102-
const initialWidth = dimensions.isFullWidth
103-
? window.innerWidth - (SAFE_AREA * 2)
104-
: dimensions.width;
105-
const initialHeight = dimensions.isFullHeight
106-
? window.innerHeight - (SAFE_AREA * 2)
107-
: dimensions.height;
101+
const initialWidth = dimensions.width;
102+
const initialHeight = dimensions.height;
108103
const initialPosition = dimensions.position;
109104

105+
signalWidget.value = {
106+
...signalWidget.value,
107+
dimensions: {
108+
...dimensions,
109+
isFullWidth: false,
110+
isFullHeight: false,
111+
width: initialWidth,
112+
height: initialHeight,
113+
position: initialPosition
114+
}
115+
};
116+
110117
let rafId: number | null = null;
111118

112119
const handleMouseMove = (e: MouseEvent) => {
@@ -130,7 +137,8 @@ export const ResizeHandle = ({ position }: ResizeHandleProps) => {
130137
signalWidget.value = {
131138
...signalWidget.value,
132139
dimensions: {
133-
...signalWidget.value.dimensions,
140+
isFullWidth: false,
141+
isFullHeight: false,
134142
width: newSize.width,
135143
height: newSize.height,
136144
position: newPosition

‎packages/scan/src/core/web/state.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,14 @@ const getInitialWidgetConfig = (): WidgetConfig => {
5757

5858
return {
5959
corner: stored.corner,
60-
dimensions: stored.dimensions,
61-
lastDimensions: stored.lastDimensions
60+
dimensions: {
61+
isFullWidth: false,
62+
isFullHeight: false,
63+
width: MIN_SIZE.width,
64+
height: MIN_SIZE.height,
65+
position: stored.dimensions.position
66+
},
67+
lastDimensions: stored.dimensions
6268
};
6369
};
6470

0 commit comments

Comments
 (0)