shawn/op-pedal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Android Cilent Layout Issues

Browse Source
This commit is contained in:
Robin E. R. Davies
2025-07-14 18:13:09 -04:00
parent 890368352f
commit 818a08824c
24 changed files with 195 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite/src/pipedal/AutoZoom.tsx
+6 -2
View File
@@ -113,6 +113,7 @@ const AutoZoom = withStyles(
buttonPadding: number
): Rect {
console.log("Zoom: " + clientRect.toString() + " content: " + contentWidth + "x" + contentHeight + " buttonPadding: " + buttonPadding);
let rightButtonZoom = Math.min((clientRect.width - buttonPadding) / contentWidth, clientRect.height / contentHeight);
let topButtonZoom = Math.min((clientRect.width - buttonPadding) / contentWidth, (clientRect.height - buttonPadding) / contentHeight);
@@ -302,12 +303,13 @@ const AutoZoom = withStyles(
render() {
const classes = withStyles.getClasses(this.props);
void classes; // suppress unused variable warning
const landscape = this.state.screenWidth > this.state.screenHeight;
return (<div style={{ overflow: "hidden", height: "100%", width: "100%" }} ref={(ref) => { this.setNormalRef(ref); }}>
<div style={{
display: "inline-block",
position: "absolute",
visibility: this.props.contentReady ? "visible" : "hidden",
position: "relative",
}}>
{!this.props.showZoomed && this.props.children}
</div>
@@ -349,7 +351,9 @@ const AutoZoom = withStyles(
<IconButtonEx tooltip="Exit fullscreen"
style={{
position: "absolute", right: 16, top: 16, zIndex: 1104,
position: "absolute",
right: landscape? 80: 16, // avoid potential cutout in landscape mode
top: 16, zIndex: 1104,
}}
onClick={(e) => {
vite/src/pipedal/FilePropertyDialog.tsx
+1 -1
View File
@@ -246,7 +246,7 @@ export default withStyles(
this.requestScroll = true;
}
getFullScreen() {
return window.innerWidth < 450 || window.innerHeight < 450;
return document.documentElement.clientWidth < 450 || document.documentElement.clientHeight < 450;
}
hProgressTimeout: number | null = null;
vite/src/pipedal/FullScreenIME.tsx
+4 -4
View File
@@ -99,14 +99,14 @@ const FullScreenIME =
// because we can't determine the initial window heigth anymore.
if (this.currentWidth === undefined)
{
this.currentWidth = window.innerWidth;
this.currentWidth = document.documentElement.clientWidth;
}
if (this.currentWidth !== window.innerWidth)
if (this.currentWidth !== document.documentElement.clientWidth)
{
this.validateInput(true);
}
// eslint-disable-next-line no-restricted-globals
if (window.innerHeight >= this.props.initialHeight) {
if (document.documentElement.clientHeight >= this.props.initialHeight) {
this.validateInput(true);
}
}
@@ -194,7 +194,7 @@ const FullScreenIME =
this.currentWidth = undefined;
return (<div/>);
}
this.currentWidth = window.innerWidth;
this.currentWidth = document.documentElement.clientWidth;
this.uiControl = control;
vite/src/pipedal/LoadPluginDialog.tsx
+7 -7
View File
@@ -209,10 +209,10 @@ export const LoadPluginDialog =
search_string: "",
search_collapsed: true,
filterType: filterType_,
client_width: window.innerWidth,
client_height: window.innerHeight,
grid_cell_width: this.getCellWidth(window.innerWidth),
grid_cell_columns: this.getCellColumns(window.innerWidth),
client_width: document.documentElement.clientWidth,
client_height: document.documentElement.clientHeight,
grid_cell_width: this.getCellWidth(document.documentElement.clientWidth),
grid_cell_columns: this.getCellColumns(document.documentElement.clientWidth),
minimumItemWidth: props.minimumItemWidth ? props.minimumItemWidth : 220,
favoritesList: this.model.favorites.get(),
uiPlugins: this.model.ui_plugins.get()
@@ -276,9 +276,9 @@ export const LoadPluginDialog =
updateWindowSize() {
this.setState({
client_width: window.innerWidth,
client_height: window.innerHeight,
grid_cell_width: this.getCellWidth(window.innerWidth),
client_width: document.documentElement.clientWidth,
client_height: document.documentElement.clientHeight,
grid_cell_width: this.getCellWidth(document.documentElement.clientWidth),
grid_cell_columns: this.getCellColumns(window.innerWidth)
});
}
vite/src/pipedal/MainPage.tsx
+9 -9
View File
@@ -82,7 +82,7 @@ const styles = ({ palette }: Theme) => {
}),
pedalboardScroll: css({
position: "relative", width: "100%",
flex: "0 0 auto", overflow: "auto", maxHeight: 220
flex: "0 0 auto", overflow: "auto", maxHeight: 220,
}),
pedalboardScrollSmall: css({
position: "relative", width: "100%",
@@ -100,7 +100,7 @@ const styles = ({ palette }: Theme) => {
flex: "0 0 64px", width: "100%", paddingLeft: 24, paddingRight: 16, paddingBottom: 16
}),
controlContent: css({
flex: "1 1 auto", width: "100%", overflowY: "hidden", minHeight: 300
flex: "1 1 auto", width: "100%", overflowY: "hidden", minHeight: 185
}),
controlContentSmall: css({
flex: "0 0 162px", width: "100%", height: 162, overflowY: "hidden",
@@ -145,7 +145,7 @@ export const MainPage =
model: PiPedalModel;
getSplitToolbar() {
return this.windowSize.width < SPLIT_CONTROLBAR_THRESHHOLD;
return this.windowSize.width < SPLIT_CONTROLBAR_THRESHHOLD && this.windowSize.height >= HORIZONTAL_CONTROL_SCROLL_HEIGHT_BREAK;
}
getDisplayAuthor() {
if (this.getSplitToolbar()) {
@@ -621,12 +621,12 @@ export const MainPage =
<div className={classes.frame}>
<div id="pedalboardScroll" className={horizontalScrollLayout ? classes.pedalboardScrollSmall : classes.pedalboardScroll}
style={{ maxHeight: horizontalScrollLayout ? undefined : this.state.screenHeight / 2 }}>
<PedalboardView key={pluginUri} selectedId={this.state.selectedPedal}
enableStructureEditing={this.props.enableStructureEditing}
onSelectionChanged={this.onSelectionChanged}
onDoubleClick={this.onPedalDoubleClick}
hasTinyToolBar={this.props.hasTinyToolBar}
/>
<PedalboardView key={pluginUri} selectedId={this.state.selectedPedal}
enableStructureEditing={this.props.enableStructureEditing}
onSelectionChanged={this.onSelectionChanged}
onDoubleClick={this.onPedalDoubleClick}
hasTinyToolBar={this.props.hasTinyToolBar}
/>
</div>
<div className={classes.separator} />
<div className={classes.controlToolBar}>
vite/src/pipedal/MidiBindingView.tsx
+3 -3
View File
@@ -58,13 +58,13 @@ export enum MidiControlType {
}
export function getMidiControlType(uiPlugin: UiPlugin | undefined, symbol: string): MidiControlType {
if (symbol === "__bypass") {
return MidiControlType.Toggle;
}
if (!uiPlugin) return MidiControlType.None;
let port = uiPlugin.getControl(symbol);
if (!port) return MidiControlType.None;
if (symbol === "__bypass") {
return MidiControlType.Toggle;
}
if (!port) return MidiControlType.None;
vite/src/pipedal/PiPedalModel.tsx
+9
View File
@@ -609,6 +609,13 @@ export class PiPedalModel //implements PiPedalModel
let message = header.message;
if (message === "onControlChanged") {
let controlChangedBody = body as ControlChangedBody;
if (body.clientId !== this.clientId) {
this.lastControlMessageWasSentbyMe = false;
}
if (this.lastControlMessageWasSentbyMe) {
return; // shortcut!
}
this._setPedalboardControlValue(
controlChangedBody.instanceId,
controlChangedBody.symbol,
@@ -1529,6 +1536,7 @@ export class PiPedalModel //implements PiPedalModel
}
}
private lastControlMessageWasSentbyMe = false;
private _setPedalboardControlValue(instanceId: number, key: string, value: number, notifyServer: boolean): void {
let pedalboard = this.pedalboard.get();
@@ -1547,6 +1555,7 @@ export class PiPedalModel //implements PiPedalModel
if (changed) {
if (notifyServer) {
this.lastControlMessageWasSentbyMe = true;
this._setServerControl("setControl", instanceId, key, value);
}
this.setModelPedalboard(newPedalboard);
vite/src/pipedal/PluginControlView.tsx
+4 -4
View File
@@ -146,9 +146,9 @@ const styles = (theme: Theme) => createStyles({
flexDirection: "row",
flexWrap: "nowrap",
paddingTop: "0px",
paddingBottom: "0px",
paddingBottom: "96px",
overflowX: "hidden",
overflowY: "auto"
overflowY: "auto",
}),
vuMeterL: css({
position: "absolute",
@@ -175,7 +175,7 @@ const styles = (theme: Theme) => createStyles({
right: 0, top: 0,
paddingRight: 6,
paddingLeft: 12,
paddingBottom: 12, // cover bottom line of a portgroup in landscape.
paddingBottom: 13, // cover bottom line of a portgroup in landscape.
background: theme.mainBackground,
zIndex: 3
@@ -448,7 +448,7 @@ const PluginControlView =
imeUiControl: uiControl,
imeValue: value,
imeCaption: uiControl.name,
imeInitialHeight: window.innerHeight
imeInitialHeight: document.documentElement.clientHeight
});
}
vite/src/pipedal/ResizeResponsiveComponent.tsx
+6 -6
View File
@@ -24,8 +24,8 @@ class ResizeResponsiveComponent<PROPS={},STATE={},S=any> extends React.Component
constructor(props: PROPS) {
super(props);
this.handleWindowResize = this.handleWindowResize.bind(this);
this.windowSize.width = window.innerWidth;
this.windowSize.height = window.innerHeight;
this.windowSize.width = document.documentElement.clientWidth;
this.windowSize.height = document.documentElement.clientHeight;
}
windowSize: {width: number,height:number} = {width: 1280, height: 1024};
@@ -34,8 +34,8 @@ class ResizeResponsiveComponent<PROPS={},STATE={},S=any> extends React.Component
}
handleWindowResize() {
let width_ = window.innerWidth;
let height_ = window.innerHeight;
let width_ = document.documentElement.clientWidth;
let height_ = document.documentElement.clientHeight;
if (width_ !== this.windowSize.width || height_ !== this.windowSize.height)
{
this.windowSize = {width: width_, height: height_};
@@ -49,8 +49,8 @@ class ResizeResponsiveComponent<PROPS={},STATE={},S=any> extends React.Component
componentDidMount() {
window.addEventListener('resize', this.handleWindowResize);
let width_ = window.innerWidth;
let height_ = window.innerHeight;
let width_ = document.documentElement.clientWidth;
let height_ = document.documentElement.clientHeight;
this.windowSize = {width: width_, height: height_};
this.onWindowSizeChanged(this.windowSize.width,this.windowSize.height);
}
vite/src/pipedal/SnapshotDialog.tsx
+1 -1
View File
@@ -89,7 +89,7 @@ export default class SnapshotDialog extends ResizeResponsiveComponent<SnapshotDi
}
getFullScreen() {
return window.innerHeight < 450 || window.innerWidth < 450;
return document.documentElement.clientHeight < 450 || document.documentElement.clientWidth < 450;
}
onWindowSizeChanged(width: number, height: number): void {
this.setState(
vite/src/pipedal/SnapshotPanel.tsx
+4 -4
View File
@@ -123,17 +123,17 @@ export default class SnapshotPanel extends ResizeResponsiveComponent<SnapshotPan
getCollapseButtons() {
if (this.getPortraitOrientation())
{
return window.innerWidth < 550;
return document.documentElement.clientWidth < 550;
} else {
return window.innerWidth < 800;
return document.documentElement.clientWidth < 800;
}
}
getPortraitOrientation() {
return window.innerWidth * 2 < window.innerHeight * 3;
return document.documentElement.clientWidth * 2 < document.documentElement.clientHeight * 3;
}
getLargeText() {
return window.innerHeight > 700 && window.innerWidth > 1000;
return document.documentElement.clientHeight > 700 && document.documentElement.clientWidth > 1000;
}
onSaveSnapshot(index: number) {
let snapshot = this.state.snapshots[index];
vite/src/pipedal/SnapshotPropertiesDialog.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export default class SnapshotPropertiesDialog extends ResizeResponsiveComponent<
this.state = this.stateFromProps();
}
getCompactVertical() {
return window.innerHeight < 450;
return document.documentElement.clientHeight < 450;
}
stateFromProps() {
let color = this.props.color;
vite/src/pipedal/TextFieldEx.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ const TextFieldEx = withStyles(styles, { withTheme: true })(
}
private getUseImeMask() {
return this.state.androidHosted && window.innerHeight < 4500;
return this.state.androidHosted && document.documentElement.clientHeight < 4500;
}
private originalInputHref: HTMLInputElement | undefined = undefined;
vite/src/pipedal/UseWindowSize.tsx
+2 -2
View File
@@ -25,8 +25,8 @@ import { useState, useEffect } from 'react';
const getSize = () => {
return {
width: window.innerWidth,
height: window.innerHeight,
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
};
};
vite/src/pipedal/Utility.tsx
+3 -3
View File
@@ -39,13 +39,13 @@ export interface ControlEntry {
const Utility = class {
static isLandscape(): boolean {
return window.innerWidth > window.innerHeight;
return document.documentElement.clientWidth > document.documentElement.clientHeight;
}
static needsZoomedControls(): boolean {
if (!this.isLandscape()) return false;
if (window.innerHeight > 500) return false;
if (window.innerHeight > 300) return true;
if (document.documentElement.clientHeight > 500) return false;
if (document.documentElement.clientHeight > 300) return true;
return (('ontouchstart' in window) &&
((navigator.maxTouchPoints??0) > 0) );
}
vite/src/pipedal/VirtualKeyboardHandler.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ export default class VirtualKeyboardHandler
enabled = false;
}
this.enabled = enabled;
this.originalPosition = new Rectangle(0,0, window.innerWidth,window.innerHeight)
this.originalPosition = new Rectangle(0,0, document.documentElement.clientWidth,document.documentElement.clientHeight)
}
private handleVisualViewportResize(event: Event): void {
const viewport = event.target as VisualViewport;
vite/src/pipedal/WindowScale.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export function getValidWindowScales(): number[]
return [1.0];
}
let result: number[] = [];
let minDimension = Math.min(window.innerHeight,window.innerWidth);
let minDimension = Math.min(document.documentElement.clientHeight,document.documentElement.clientWidth);
for (let validScale of validScales)
{