diff --git a/gbajs3/src/components/controls/__snapshots__/control-panel.spec.tsx.snap b/gbajs3/src/components/controls/__snapshots__/control-panel.spec.tsx.snap
index 698c607c..ac92be94 100644
--- a/gbajs3/src/components/controls/__snapshots__/control-panel.spec.tsx.snap
+++ b/gbajs3/src/components/controls/__snapshots__/control-panel.spec.tsx.snap
@@ -57,7 +57,7 @@ exports[` > renders with default desktop position and size 1`] =
color: #0d6efd;
}
-.c4 {
+.c5 {
cursor: pointer;
background-color: #a9a9a9;
border-radius: 0.25rem;
@@ -74,7 +74,7 @@ exports[` > renders with default desktop position and size 1`] =
max-height: 40px;
}
-.c6 {
+.c7 {
cursor: pointer;
background-color: #a9a9a9;
border-radius: 0.25rem;
@@ -91,15 +91,19 @@ exports[` > renders with default desktop position and size 1`] =
max-height: 40px;
}
-.c5 {
+.c6 {
flex-grow: 1;
}
-.c5 >.MuiSlider-markActive {
+.c6 >.MuiSlider-markActive {
opacity: 1;
background-color: currentColor;
}
+.c4 {
+ display: contents;
+}
+
@media only screen and (min-width: 600px) {
.c3 {
width: auto;
@@ -114,13 +118,13 @@ exports[` > renders with default desktop position and size 1`] =
}
@media only screen and (min-width: 600px) {
- .c4 {
+ .c5 {
width: auto;
}
}
@media only screen and (min-width: 600px) {
- .c6 {
+ .c7 {
width: auto;
}
}
@@ -232,273 +236,281 @@ exports[` > renders with default desktop position and size 1`] =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
- 100
+
+ 100
+
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
-
+
+
+
+
+
+
+
- x1
+
+ x1
+
-
-
-
+
+
+
+
@@ -556,7 +568,7 @@ exports[` > renders with default mobile position and size 1`] =
color: #0d6efd;
}
-.c4 {
+.c5 {
cursor: pointer;
background-color: #a9a9a9;
border-radius: 0.25rem;
@@ -573,7 +585,7 @@ exports[` > renders with default mobile position and size 1`] =
max-height: 40px;
}
-.c6 {
+.c7 {
cursor: pointer;
background-color: #a9a9a9;
border-radius: 0.25rem;
@@ -590,15 +602,19 @@ exports[` > renders with default mobile position and size 1`] =
max-height: 40px;
}
-.c5 {
+.c6 {
flex-grow: 1;
}
-.c5 >.MuiSlider-markActive {
+.c6 >.MuiSlider-markActive {
opacity: 1;
background-color: currentColor;
}
+.c4 {
+ display: contents;
+}
+
@media only screen and (min-width: 600px) {
.c3 {
width: auto;
@@ -613,13 +629,13 @@ exports[` > renders with default mobile position and size 1`] =
}
@media only screen and (min-width: 600px) {
- .c4 {
+ .c5 {
width: auto;
}
}
@media only screen and (min-width: 600px) {
- .c6 {
+ .c7 {
width: auto;
}
}
@@ -731,273 +747,281 @@ exports[` > renders with default mobile position and size 1`] =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
- 100
+
+ 100
+
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
-
+
+
+
+
+
+
+
- x1
+
+ x1
+
-
-
-
+
+
+
+
diff --git a/gbajs3/src/components/controls/control-panel.tsx b/gbajs3/src/components/controls/control-panel.tsx
index 7122d5ff..5a8efbe4 100644
--- a/gbajs3/src/components/controls/control-panel.tsx
+++ b/gbajs3/src/components/controls/control-panel.tsx
@@ -73,7 +73,6 @@ type PanelSliderProps = {
gridArea: string;
maxIcon: ReactNode;
minIcon: ReactNode;
- asTooltip?: boolean;
} & SliderProps;
type TooltipSliderProps = PanelSliderProps & {
@@ -269,9 +268,11 @@ const popperStyles = {
};
const TooltipPanelSlider = ({ ButtonIcon, ...rest }: TooltipSliderProps) => {
+ const theme = useTheme();
+ const isMobileLandscape = useMediaQuery(theme.isMobileLandscape);
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
- return (
+ return isMobileLandscape ? (
setIsTooltipOpen(false)}>
{
+ ) : (
+
);
};
@@ -557,7 +560,6 @@ export const ControlPanel = () => {
)}
{
{...defaultSliderEvents}
/>
`
@media ${({ theme }) => theme.isMobileLandscape} {
width: calc(100dvh * (3 / 2));
height: 100dvh;
- left: 0;
- right: 0;
- margin: 0 auto;
- transform: translate(0, 0) !important;
- padding-left: env(safe-area-inset-left);
}
`;
@@ -70,8 +66,18 @@ export const Screen = () => {
const { areItemsDraggable } = useDragContext();
const { areItemsResizable } = useResizeContext();
const { layouts, setLayout, hasSetLayout } = useLayoutContext();
+ const windowSize = useWindowSize();
const screenWrapperXStart = isLargerThanPhone ? NavigationMenuWidth + 10 : 0;
const screenWrapperYStart = isLargerThanPhone && !isMobileLandscape ? 15 : 0;
+ const rndRef = useRef();
+
+ console.log(
+ 'vancise windowSize',
+ windowSize,
+ layouts?.screen?.initialBounds,
+ window.innerWidth,
+ window.innerHeight
+ );
const refUpdateDefaultPosition = useCallback(
(node: Rnd | null) => {
@@ -84,19 +90,53 @@ export const Screen = () => {
setLayout('screen', {
initialBounds: node.resizableElement.current?.getBoundingClientRect()
});
+
+ rndRef.current = node;
},
[hasSetLayout, layouts, setLayout]
);
+ useLayoutEffect(() => {
+ if (
+ !isMobileLandscape ||
+ layouts?.screen?.position ||
+ layouts?.screen?.size
+ )
+ return;
+
+ const x = Math.floor(
+ (windowSize?.width ?? 0) / 2 -
+ (layouts?.screen?.initialBounds?.width ?? 0) / 2
+ );
+ const y = Math.floor(
+ (windowSize?.height ?? 0) / 2 -
+ (layouts?.screen?.initialBounds?.height ?? 0) / 2
+ );
+
+ console.log('vancise x, y', x, y);
+
+ rndRef?.current?.updatePosition({ x, y });
+ }, [
+ isMobileLandscape,
+ layouts?.screen?.initialBounds?.width,
+ layouts?.screen?.initialBounds?.height,
+ layouts?.screen?.position,
+ layouts?.screen?.size,
+ windowSize.width,
+ windowSize.height
+ ]);
+
const refSetCanvas = useCallback(
(node: HTMLCanvasElement | null) => setCanvas(node),
[setCanvas]
);
- const position = layouts?.screen?.position ?? {
- x: screenWrapperXStart,
- y: screenWrapperYStart
- };
+ const position = isMobileLandscape
+ ? undefined
+ : layouts?.screen?.position ?? {
+ x: screenWrapperXStart,
+ y: screenWrapperYStart
+ };
const size = layouts?.screen?.size ?? defaultSize;
return (