Robin E. R. Davies
755 lines
33 KiB
TypeScript
755 lines
33 KiB
TypeScript
// Copyright (c) 2025 Robin Davies
|
|
//
|
|
// Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
// this software and associated documentation files (the "Software"), to deal in
|
|
// the Software without restriction, including without limitation the rights to
|
|
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
|
// the Software, and to permit persons to whom the Software is furnished to do so,
|
|
// subject to the following conditions:
|
|
//
|
|
// The above copyright notice and this permission notice shall be included in all
|
|
// copies or substantial portions of the Software.
|
|
//
|
|
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
|
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
|
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
|
|
import React from 'react';
|
|
import { Theme } from '@mui/material/styles';
|
|
|
|
import ToobFrequencyResponseView, { FREQUENCY_RESPONSE_VECTOR_URI } from './ToobFrequencyResponseView';
|
|
import WithStyles from './WithStyles';
|
|
import { createStyles } from './WithStyles';
|
|
import SvgPathBuilder from './SvgPathBuilder';
|
|
import CircleUpIcon from './svg/expand_circle_up_24dp.svg?react';
|
|
import CircleDownIcon from './svg/expand_circle_down_24dp.svg?react';
|
|
import { withStyles } from "tss-react/mui";
|
|
import DialogEx from './DialogEx';
|
|
import DialogContent from '@mui/material/DialogContent';
|
|
|
|
import IControlViewFactory from './IControlViewFactory';
|
|
import { PiPedalModelFactory, PiPedalModel, State } from "./PiPedalModel";
|
|
import { PedalboardItem } from './Pedalboard';
|
|
import PluginControlView, { ICustomizationHost, ControlGroup, ControlViewCustomization } from './PluginControlView';
|
|
import { UiPlugin } from './Lv2Plugin';
|
|
import Typography from '@mui/material/Typography';
|
|
import IconButton from '@mui/material/IconButton/IconButton';
|
|
import { css } from '@emotion/react';
|
|
|
|
|
|
|
|
|
|
const styles = (theme: Theme) => createStyles({
|
|
menuIcon: css({
|
|
fill: (theme.palette.text.primary + "!important"), //theme.palette.text.primary,
|
|
opacity: 0.6
|
|
}),
|
|
upIcon: css({
|
|
fill: (theme.palette.text.primary + "!important"), //theme.palette.text.primary,
|
|
opacity: 0.6,
|
|
alignSelf: "flex-start"
|
|
}),
|
|
});
|
|
|
|
interface Point { x: number, y: number };
|
|
|
|
|
|
function offsetFromEnd(pt0: Point, pt1: Point, distance: number) {
|
|
let dx = pt1.x - pt0.x;
|
|
let dy = pt1.y - pt0.y;
|
|
let mag = Math.sqrt(dx * dx + dy * dy);
|
|
let normX = dx / mag;
|
|
let normY = dy / mag;
|
|
return {
|
|
x: pt1.x - normX * distance,
|
|
y: pt1.y - normY * distance
|
|
}
|
|
}
|
|
|
|
|
|
const getWindowSize = () => {
|
|
return {
|
|
width: document.documentElement.clientWidth,
|
|
height: document.documentElement.clientHeight,
|
|
};
|
|
};
|
|
|
|
|
|
interface UnpackedControls {
|
|
eq: React.ReactNode;
|
|
filters_loCut: React.ReactNode;
|
|
filters_hiCut: React.ReactNode;
|
|
low_level: React.ReactNode;
|
|
low_freq: React.ReactNode;
|
|
lmf_level: React.ReactNode;
|
|
lmf_freq: React.ReactNode;
|
|
lmf_q: React.ReactNode;
|
|
hmf_level: React.ReactNode;
|
|
hmf_freq: React.ReactNode;
|
|
hmf_q: React.ReactNode;
|
|
hi_level: React.ReactNode;
|
|
hi_freq: React.ReactNode;
|
|
gain: React.ReactNode;
|
|
}
|
|
|
|
interface ToobParametricEqViewProps extends WithStyles<typeof styles> {
|
|
instanceId: number;
|
|
item: PedalboardItem;
|
|
|
|
}
|
|
interface ToobParametricEqViewState {
|
|
windowSize: { width: number, height: number };
|
|
maximized: boolean;
|
|
|
|
}
|
|
|
|
const ToobParametricEqView =
|
|
withStyles(
|
|
class extends React.Component<ToobParametricEqViewProps, ToobParametricEqViewState>
|
|
implements ControlViewCustomization {
|
|
model: PiPedalModel;
|
|
|
|
customizationId: number = 943;
|
|
|
|
constructor(props: ToobParametricEqViewProps) {
|
|
super(props);
|
|
|
|
this.handleResize = this.handleResize.bind(this);
|
|
this.handleConnectionStateChanged = this.handleConnectionStateChanged.bind(this);
|
|
|
|
this.model = PiPedalModelFactory.getInstance();
|
|
this.state = {
|
|
windowSize: getWindowSize(),
|
|
maximized: false
|
|
}
|
|
let pluginInfo: UiPlugin | null = this.model.getUiPlugin(this.props.item.uri);
|
|
if (pluginInfo === null) {
|
|
throw new Error("Plugin not fouund.");
|
|
}
|
|
}
|
|
|
|
fullScreen() {
|
|
return true;
|
|
}
|
|
|
|
horizontalScrollControls(host: ICustomizationHost, controls: (React.ReactNode | ControlGroup)[]): (React.ReactNode | ControlGroup)[] {
|
|
// Implement horizontal scrolling behavior for tiny horizontal screens
|
|
controls[0] = (
|
|
<div id="fixedGraph_xxx" key="fixedGraph" style={{ position: "absolute", top: 0, left: 0, padding: 5, background: "#F88" }}>
|
|
{controls[0] as React.ReactNode}
|
|
</div>
|
|
);
|
|
return controls;
|
|
}
|
|
|
|
unpackControls(host: ICustomizationHost, controls: (React.ReactNode | ControlGroup)[]): UnpackedControls {
|
|
return {
|
|
eq: controls[0] as React.ReactNode,
|
|
filters_loCut: (controls[1] as ControlGroup).controls[0],
|
|
filters_hiCut: (controls[1] as ControlGroup).controls[1],
|
|
low_level: (controls[2] as ControlGroup).controls[0],
|
|
low_freq: (controls[2] as ControlGroup).controls[1],
|
|
lmf_level: (controls[3] as ControlGroup).controls[0],
|
|
lmf_freq: (controls[3] as ControlGroup).controls[1],
|
|
lmf_q: (controls[3] as ControlGroup).controls[2],
|
|
hmf_level: (controls[4] as ControlGroup).controls[0],
|
|
hmf_freq: (controls[4] as ControlGroup).controls[1],
|
|
hmf_q: (controls[4] as ControlGroup).controls[2],
|
|
hi_level: (controls[5] as ControlGroup).controls[0],
|
|
hi_freq: (controls[5] as ControlGroup).controls[1],
|
|
gain: controls[6] as React.ReactNode
|
|
};
|
|
}
|
|
absolutePosition(x: number, y: number, el: React.ReactNode) {
|
|
return (<div style={{ position: "absolute", left: x, top: y }}>{el}</div>);
|
|
}
|
|
private ROW_HEIGHT = 140;
|
|
private BORDER_HEIGHT = 350;
|
|
private DIAL_WIDTH = 63;
|
|
private GRAPH_WIDTH = this.DIAL_WIDTH * 2;
|
|
|
|
private smoothPath(pt0: Point, pt1: Point, pt2: Point, pt3: Point, curveRadius: number): string {
|
|
let pathBuilder = new SvgPathBuilder();
|
|
|
|
|
|
let ctl01 = offsetFromEnd(pt0, pt1, curveRadius);
|
|
let ctl02 = offsetFromEnd(pt0, pt1, curveRadius / 3);
|
|
let ctl03 = offsetFromEnd(pt2, pt1, curveRadius / 3);
|
|
let ctl04 = offsetFromEnd(pt2, pt1, curveRadius);
|
|
|
|
let ctl11 = offsetFromEnd(pt1, pt2, curveRadius);
|
|
let ctl12 = offsetFromEnd(pt1, pt2, curveRadius / 3);
|
|
let ctl13 = offsetFromEnd(pt3, pt2, curveRadius / 3);
|
|
let ctl14 = offsetFromEnd(pt3, pt2, curveRadius);
|
|
|
|
pathBuilder.moveTo(pt0.x, pt0.y);
|
|
pathBuilder.lineTo(ctl01.x, ctl01.y);
|
|
pathBuilder.bezierTo(
|
|
ctl02.x, ctl02.y,
|
|
ctl03.x, ctl03.y,
|
|
ctl04.x, ctl04.y
|
|
);
|
|
pathBuilder.lineTo(ctl11.x, ctl11.y);
|
|
pathBuilder.bezierTo(
|
|
ctl12.x, ctl12.y,
|
|
ctl13.x, ctl13.y,
|
|
ctl14.x, ctl14.y
|
|
);
|
|
pathBuilder.lineTo(pt3.x, pt3.y);
|
|
return pathBuilder.toString();
|
|
}
|
|
horizontalCompactControls(host: ICustomizationHost, controls: UnpackedControls) {
|
|
let height = this.BORDER_HEIGHT;
|
|
let row0 = height / 2 - this.ROW_HEIGHT;
|
|
let row1 = row0 + this.ROW_HEIGHT;
|
|
|
|
let borderTop = 0;
|
|
let borderBottom = height - 8;
|
|
|
|
let labelTop = row0 - 30;
|
|
let labelBottom = row1 + this.ROW_HEIGHT - 5;
|
|
|
|
let colPos = (group: number, col: number) => this.DIAL_WIDTH * (0.3 * group + col);
|
|
let cpos0 = (group: number, col: number, el: React.ReactNode) => this.absolutePosition(colPos(group, col), row0, el);
|
|
let cpos1 = (group: number, col: number, el: React.ReactNode) => this.absolutePosition(colPos(group, col) + this.DIAL_WIDTH / 2, row1, el);
|
|
|
|
|
|
let label1 = (y: number, group: number, col0: number, col1: number, text: string, align: "left" | "center" | "right") => {
|
|
let left = colPos(group, col0);
|
|
let right = colPos(group, col1);
|
|
return (
|
|
<Typography variant="body1" noWrap style={{
|
|
fontSize: "0.85em", fontWeight: 700,
|
|
top: y, paddingLeft: 0, paddingRight: 0,
|
|
position: "absolute", left: left + 8, width: right - left,
|
|
opacity: 0.4, textAlign: align
|
|
}}>{text}</Typography>
|
|
);
|
|
};
|
|
let divider = (group: number, col0: number, y0: number, col1: number, y1: number) => {
|
|
let x0 = colPos(group, col0);
|
|
let x1 = colPos(group, col1);
|
|
return (
|
|
<svg width={x1 - x0 + 4} height={y1 - y0 + 4} style={{ position: "absolute", left: x0 - 2, top: y0 - 2 }}>
|
|
<line x1={2} y1={2} x2={2 + x1 - x0} y2={2 + y1 - y0} stroke="#888" strokeWidth={4} />
|
|
</svg>
|
|
);
|
|
};
|
|
let leftDivider = (group: number, col0: number, y0: number, col1: number, y1: number) => {
|
|
let x0 = colPos(group, col0);
|
|
let x1 = colPos(group, col1);
|
|
let xOrg = Math.min(x0, x1) - 2;
|
|
let yOrg = Math.min(y0, y1) - 2;
|
|
let width = Math.abs(x1 - x0) + 4;
|
|
let height = Math.abs(y1 - y0) + 4;
|
|
|
|
let bezierLength = 10;
|
|
let pt0 = { x: x0, y: y0 };
|
|
let pt1 = { x: x0, y: row1 - 18 };
|
|
let pt2 = { x: x1, y: row1 + 3 };
|
|
let pt3 = { x: x1, y: y1 };
|
|
|
|
let path = this.smoothPath(pt0, pt1, pt2, pt3, bezierLength);
|
|
|
|
return (
|
|
<svg width={width} height={height} style={{ position: "absolute", left: xOrg - 1, top: yOrg }}
|
|
viewBox={`${xOrg} ${yOrg} ${width} ${height}`}
|
|
>
|
|
<path d={path} fill="none" stroke="#888" strokeWidth="4px" />
|
|
</svg>
|
|
);
|
|
};
|
|
let graph = (
|
|
<ToobFrequencyResponseView width={this.GRAPH_WIDTH}
|
|
propertyName={FREQUENCY_RESPONSE_VECTOR_URI}
|
|
instanceId={this.props.instanceId} />
|
|
);
|
|
|
|
return [(<div style={{
|
|
width: "100%", height: "100%",
|
|
position: "relative", display: "flex", flexFlow: "column nowrap",
|
|
alignItems: "center", justifyContent: "center"
|
|
}}>
|
|
<div style={{ flex: "1 1 0px", }} />
|
|
<div style={{
|
|
flex: "0 0 auto", border: "4px #888 solid", borderRadius: "8px 8px 8px 8px", position: "relative",
|
|
width: colPos(6, 8.5), height: height,
|
|
}}>
|
|
{label1(labelBottom, 1, 2, 3.0, "Lo Shelf", "center")}
|
|
{label1(labelTop, 2, 3, 5, "Low Mid", "center")}
|
|
{label1(labelBottom, 3, 4.5, 6.5, "High Mid", "center")}
|
|
{label1(labelTop, 4, 6.5, 7.5, "Hi Shelf", "center")}
|
|
{divider(1, 2.0, borderTop, 2.0, borderBottom)}
|
|
{divider(5, 7.5, borderTop, 7.5, borderBottom)}
|
|
{leftDivider(2, 3.0, borderTop, 3.0, borderBottom)}
|
|
{leftDivider(3, 5.0, borderTop, 4.5, borderBottom)}
|
|
{leftDivider(4, 6.5, borderTop, 6.5, borderBottom)}
|
|
|
|
{this.absolutePosition(0, row0, graph)}
|
|
{this.absolutePosition(colPos(0, 0), row1, controls.filters_loCut)}
|
|
{this.absolutePosition(colPos(0, 1), row1, controls.filters_hiCut)}
|
|
|
|
{cpos0(1, 2, controls.low_level)}
|
|
{cpos1(1, 2 - 0.5, controls.low_freq)}
|
|
|
|
{cpos0(2, 3.0, controls.lmf_q)}
|
|
{cpos1(2, 2.75, controls.lmf_freq)}
|
|
{cpos0(2, 4, controls.lmf_level)}
|
|
|
|
{cpos1(3, 4, controls.hmf_freq)}
|
|
{cpos0(3, 5.25, controls.hmf_level)}
|
|
{cpos1(3, 5, controls.hmf_q)}
|
|
|
|
{cpos0(4, 6.5, controls.hi_level)}
|
|
{cpos1(4, 6, controls.hi_freq)}
|
|
|
|
{cpos0(5, 7.5, controls.gain)}
|
|
</div>
|
|
<div style={{ flex: "5 5 0px", }} />
|
|
|
|
</div>)];
|
|
}
|
|
verticalCompactControls(host: ICustomizationHost, controls: UnpackedControls) {
|
|
let width = 380;
|
|
|
|
let graph = (
|
|
<ToobFrequencyResponseView width={344}
|
|
propertyName={FREQUENCY_RESPONSE_VECTOR_URI}
|
|
instanceId={this.props.instanceId} />
|
|
);
|
|
let divider = () => {
|
|
return (
|
|
<div style={{ width: "100%", height: 1, background: "#8888" }} />
|
|
);
|
|
}
|
|
let vDivider = () => {
|
|
return (
|
|
<div style={{ width: 1, minWidth: 1, height: 164, background: "#888" }} />
|
|
);
|
|
}
|
|
let panel = (label: string, controls: React.ReactNode[]) => {
|
|
return (
|
|
<div style={{ display: "flex", flexFlow: "column nowrap", alignItems: "center", marginRight: 8, marginLeft: 8 }}>
|
|
<div style={{
|
|
width: controls.length * this.DIAL_WIDTH, height: 130, position: "relative",
|
|
overflow: "hidden", marginRight: 8
|
|
}}>
|
|
{controls.map((ctl, i) => {
|
|
return (
|
|
<div key={i} style={{ width: this.DIAL_WIDTH, position: "absolute", left: i * this.DIAL_WIDTH, top: 8 }}>
|
|
{ctl}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<Typography variant="body1" noWrap style={{
|
|
fontSize: "0.85em", fontWeight: 700, width: label !== "" ? 100 : 5, paddingTop: 4, paddingBottom: 8,
|
|
opacity: 0.4, textAlign: "center"
|
|
}}>{label}</Typography>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return [(<div key="tpq_cv" style={{
|
|
width: "100%", height: "100%",
|
|
position: "relative", display: "flex", flexFlow: "column nowrap",
|
|
alignItems: "center", justifyContent: "center"
|
|
}}>
|
|
<div style={{ flex: "1 1 0px" }} />
|
|
<div style={{
|
|
display: "flex", flexFlow: "row wrap", alignItems: "center", width: width, justifyContent: "space-between",
|
|
flex: "0 0 auto", border: "4px #888 solid", borderRadius: "8px 8px 8px 8px", position: "relative",
|
|
}}>
|
|
|
|
{graph}
|
|
{(<div style={{ width: "100%", height: 16 }} />)}
|
|
{panel("", [
|
|
controls.filters_loCut,
|
|
controls.filters_hiCut,
|
|
])}
|
|
{panel("", [
|
|
controls.gain
|
|
])}
|
|
{divider()}
|
|
{panel("Low",
|
|
[controls.low_level,
|
|
controls.low_freq
|
|
])
|
|
}
|
|
{vDivider()}
|
|
{panel("Low Mid",
|
|
|
|
[
|
|
controls.lmf_level,
|
|
controls.lmf_freq,
|
|
controls.lmf_q,
|
|
])
|
|
}
|
|
{divider()}
|
|
{panel("High Mid",
|
|
|
|
[
|
|
controls.hmf_level,
|
|
controls.hmf_freq,
|
|
controls.hmf_q,
|
|
])
|
|
}
|
|
{vDivider()}
|
|
{panel("High",
|
|
[controls.hi_level,
|
|
controls.hi_freq
|
|
])
|
|
}
|
|
</div>
|
|
<div style={{ flex: "5 5 0px", }} />
|
|
|
|
</div>)];
|
|
}
|
|
|
|
tinyControls(host: ICustomizationHost, controls: (React.ReactNode | ControlGroup)[]): (React.ReactNode | ControlGroup)[] {
|
|
const classes = withStyles.getClasses(this.props);
|
|
let isLandscape = host.isLandscapeGrid();
|
|
let panelControls: React.ReactNode[] = [];
|
|
|
|
let filterGroup = controls[1] as ControlGroup;
|
|
let miscGroup: ControlGroup = {
|
|
name: "",
|
|
indexes: [],
|
|
controls: [
|
|
filterGroup.controls[0],
|
|
filterGroup.controls[1],
|
|
controls[controls.length - 1] as React.ReactNode
|
|
]
|
|
};
|
|
panelControls.push(host.renderControlGroup(miscGroup, "vtc_miscGroup"));
|
|
if (!isLandscape) {
|
|
panelControls.push(
|
|
(
|
|
<div key="ctlx_div" style={{ width: "100%", height: 0 }} />
|
|
)
|
|
);
|
|
}
|
|
|
|
for (let i = 2; i < controls.length - 1; ++i) {
|
|
let c = controls[i];
|
|
if (c instanceof ControlGroup) {
|
|
panelControls.push(
|
|
host.
|
|
renderControlGroup(c as ControlGroup, "vtc_cg" + i)
|
|
);
|
|
} else {
|
|
panelControls.push(c as React.ReactNode);
|
|
}
|
|
}
|
|
let panelStyle: React.CSSProperties;
|
|
let scrollStyle: React.CSSProperties;
|
|
let frameStyle: React.CSSProperties;
|
|
|
|
if (isLandscape) {
|
|
panelStyle = { display: "flex", flexDirection: "row", alignItems: "stretch", width: "100%" };
|
|
scrollStyle = { flex: "1 1 auto", overflowX: "auto", overflowY: "hidden", whiteSpace: "nowrap" };
|
|
frameStyle = { display: "flex", flexFlow: "row nowrap", alignItems: "center", paddingTop: 8 };
|
|
} else {
|
|
panelStyle = { display: "flex", flexDirection: "column", alignItems: "stretch", height: "100%" };
|
|
scrollStyle = { flex: "1 1 auto", overflowX: "hidden", overflowY: "auto", whiteSpace: "nowrap" };
|
|
frameStyle = { display: "flex", flexFlow: "row wrap", alignItems: "left", justifyContent: "left", gap: 12, paddingTop: 24, paddingBottom: 48 };
|
|
}
|
|
|
|
return [(
|
|
<div key={"vtc_container"} style={panelStyle}>
|
|
{host.isLandscapeGrid() ? (
|
|
<div key={"vtc_panel"} style={{ flex: " 0 0 auto", paddingBottom: 8, display: "flex", alignItems: "center", flexFlow: "row nowrap" }}>
|
|
<div style={{ alignSelf: "flex-start", marginTop: 8 }}>
|
|
<IconButton
|
|
style={{marginTop: 24}}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
this.setState({ maximized: true });
|
|
}}>
|
|
<CircleUpIcon className={classes.upIcon} />
|
|
</IconButton>
|
|
</div>
|
|
{controls[0] as React.ReactNode}
|
|
</div>
|
|
) : (
|
|
<div key={"vtc_panel"} style={{ flex: " 0 0 auto", paddingBottom: 8, display: "flex", alignItems: "center", flexFlow: "row nowrap" }}>
|
|
{controls[0] as React.ReactNode}
|
|
<div style={{ alignSelf: "flex-start", marginTop: 8 }}>
|
|
<IconButton onClick={(e) => {
|
|
e.stopPropagation();
|
|
this.setState({ maximized: true });
|
|
}}>
|
|
<CircleUpIcon className={classes.upIcon} />
|
|
</IconButton>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div style={scrollStyle}>
|
|
<div style={frameStyle}>
|
|
{panelControls}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)];
|
|
}
|
|
private dialogRef: HTMLDivElement | null = null;
|
|
private panelRef: HTMLDivElement | null = null;
|
|
|
|
dlgTickInAnimation(yOffset: number, startTime: number) {
|
|
let elapsed = Date.now() - startTime;
|
|
let pct = elapsed / 200;
|
|
if (pct > 1) pct = 1;
|
|
if (!this.dialogRef) {
|
|
return;
|
|
}
|
|
this.dialogRef.style.opacity = `${pct}`;
|
|
this.dialogRef.style.transform = `translateY(${(1 - pct) * yOffset}px)`;
|
|
if (pct >= 1) {
|
|
return;
|
|
}
|
|
window.requestAnimationFrame(() => {
|
|
this.dlgTickInAnimation(yOffset, startTime);
|
|
});
|
|
}
|
|
dlgTickOutAnimation(yOffset: number, startTime: number) {
|
|
if (!this.dialogRef || !this.panelRef) {
|
|
this.setState({ maximized: false });
|
|
return;
|
|
}
|
|
let elapsed = Date.now() - startTime;
|
|
let pct = elapsed / 200;
|
|
if (pct > 1) pct = 1;
|
|
if (!this.dialogRef) {
|
|
return;
|
|
}
|
|
this.dialogRef.style.transform = `translateY(${(pct) * yOffset}px)`;
|
|
this.dialogRef.style.opacity = `${1 - pct}`;
|
|
if (pct >= 1) {
|
|
this.setState({ maximized: false });
|
|
return;
|
|
}
|
|
window.requestAnimationFrame(() => {
|
|
this.dlgTickOutAnimation(yOffset, startTime);
|
|
});
|
|
}
|
|
dlgSlideInAnimation(yOffset: number) {
|
|
if (!this.animateDialog) {
|
|
return;
|
|
}
|
|
this.animateDialog = false;
|
|
window.requestAnimationFrame(() => {
|
|
if (this.dialogRef) {
|
|
let startTime = Date.now();
|
|
this.dlgTickInAnimation(yOffset, startTime);
|
|
}
|
|
});
|
|
}
|
|
dlgSlideOutAnimation(yOffset: number) {
|
|
if (!this.animateDialog) {
|
|
return;
|
|
}
|
|
this.animateDialog = false;
|
|
|
|
window.requestAnimationFrame(() => {
|
|
if (this.dialogRef) {
|
|
let startTime = Date.now();
|
|
this.dlgTickInAnimation(yOffset, startTime);
|
|
}
|
|
});
|
|
}
|
|
startSlideOutAnimation() {
|
|
if (this.panelRef && this.dialogRef) {
|
|
let yOffset = this.panelRef.getBoundingClientRect().top;
|
|
|
|
window.requestAnimationFrame(() => {
|
|
if (this.dialogRef && this.dialogRef) {
|
|
let startTime = Date.now();
|
|
this.dlgTickOutAnimation(yOffset, startTime);
|
|
}
|
|
});
|
|
} else {
|
|
this.setState({ maximized: false });
|
|
}
|
|
}
|
|
checkTransitionStart() {
|
|
if (this.dialogRef && this.panelRef) {
|
|
let panelRect = this.panelRef.getBoundingClientRect();
|
|
this.dlgSlideInAnimation(panelRect.top);
|
|
}
|
|
}
|
|
setDialogRef(ref: HTMLDivElement | null) {
|
|
this.dialogRef = ref;
|
|
this.checkTransitionStart();
|
|
};
|
|
setPanelRef(ref: HTMLDivElement | null) {
|
|
this.panelRef = ref;
|
|
this.checkTransitionStart();
|
|
}
|
|
modifyControls(host: ICustomizationHost, controls: (React.ReactNode | ControlGroup)[]): (React.ReactNode | ControlGroup)[] {
|
|
const classes = withStyles.getClasses(this.props);
|
|
let unpackedControls = this.unpackControls(host, controls);
|
|
|
|
if (this.state.maximized) {
|
|
return [(
|
|
<div ref={(instance: HTMLDivElement | null): void => { this.setPanelRef(instance); }}
|
|
style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}>
|
|
<DialogEx key="peq_dialog"
|
|
open={this.state.maximized}
|
|
onEnterKey={() => this.setState({ maximized: false })}
|
|
onClose={() => this.setState({ maximized: false })}
|
|
fullScreen={true}
|
|
tag="peq_dialog"
|
|
|
|
dlgRef={(instance: HTMLDivElement | null): void => {
|
|
this.setDialogRef(instance);
|
|
}}
|
|
>
|
|
|
|
<DialogContent>
|
|
{this.state.windowSize.width > this.state.windowSize.height ? (
|
|
<div style={{
|
|
width: "100%", height: "100%",
|
|
display: "flex", flexFlow: "row nowrap"
|
|
}}
|
|
>
|
|
<div>
|
|
<IconButton onClick={(e) => {
|
|
e.stopPropagation();
|
|
this.startSlideOutAnimation();
|
|
}} style={{ paddingTop: 48, paddingLeft: 8, paddingRight: 8 }}>
|
|
<CircleDownIcon className={classes.menuIcon} />
|
|
</IconButton>
|
|
</div>
|
|
<div style={{ flex: "1 1 auto", height: "100%", position: "relative" }}>
|
|
{this.horizontalCompactControls(host, unpackedControls)}
|
|
</div>
|
|
</div>
|
|
|
|
) : (
|
|
<div style={{
|
|
width: "100%", height: "100%",
|
|
display: "flex", flexFlow: "column nowrap"
|
|
}}
|
|
>
|
|
<div>
|
|
<IconButton onClick={(e) => {
|
|
e.stopPropagation();
|
|
this.startSlideOutAnimation();
|
|
}} style={{ paddingLeft: 8, paddingTop: 8, paddingBottom: 8 }}>
|
|
<CircleDownIcon className={classes.menuIcon} />
|
|
</IconButton>
|
|
</div>
|
|
<div style={{ flex: "1 1 auto", width: "100%", position: "relative" }}>
|
|
{this.verticalCompactControls(host, unpackedControls)}
|
|
</div>
|
|
</div>
|
|
|
|
)
|
|
}
|
|
</DialogContent>
|
|
</DialogEx>
|
|
</div>
|
|
|
|
)];
|
|
}
|
|
|
|
|
|
if (this.state.windowSize.width > 750 && this.state.windowSize.height > 600) {
|
|
return this.horizontalCompactControls(host, unpackedControls);
|
|
}
|
|
return this.tinyControls(host, controls);
|
|
}
|
|
|
|
private handleConnectionStateChanged(state: State) {
|
|
if (state === State.Ready) {
|
|
this.unsubscribe();
|
|
this.subscribe();
|
|
}
|
|
}
|
|
|
|
private handleResize() {
|
|
this.setState({ windowSize: getWindowSize() });
|
|
}
|
|
|
|
subscribe() {
|
|
this.subscribedId = this.props.instanceId;
|
|
}
|
|
unsubscribe() {
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (super.componentDidMount) {
|
|
super.componentDidMount();
|
|
}
|
|
this.subscribe();
|
|
this.model.state.addOnChangedHandler(this.handleConnectionStateChanged);
|
|
window.addEventListener("resize", this.handleResize);
|
|
|
|
}
|
|
componentWillUnmount() {
|
|
this.unsubscribe();
|
|
if (super.componentWillUnmount) {
|
|
super.componentWillUnmount();
|
|
}
|
|
this.model.state.removeOnChangedHandler(this.handleConnectionStateChanged);
|
|
window.removeEventListener("resize", this.handleResize);
|
|
|
|
}
|
|
|
|
private subscribedId: number | null = null;
|
|
private animateDialog: boolean = false;
|
|
componentDidUpdate(oldProps: ToobParametricEqViewProps, oldState: ToobParametricEqViewState) {
|
|
if (this.props.instanceId !== this.subscribedId) {
|
|
this.unsubscribe();
|
|
this.subscribe();
|
|
}
|
|
this.animateDialog = this.state.maximized != oldState.maximized;
|
|
|
|
}
|
|
|
|
|
|
render() {
|
|
return (<PluginControlView
|
|
instanceId={this.props.instanceId}
|
|
item={this.props.item}
|
|
customization={this}
|
|
customizationId={this.customizationId}
|
|
showModGui={false}
|
|
onSetShowModGui={(instanceId: number, showModGui: boolean) => { }}
|
|
|
|
/>);
|
|
}
|
|
},
|
|
styles
|
|
);
|
|
|
|
|
|
|
|
class ToobParametricEqViewFactory implements IControlViewFactory {
|
|
uri: string = "http://two-play.com/plugins/toob-parametric-eq";
|
|
|
|
Create(model: PiPedalModel, pedalboardItem: PedalboardItem): React.ReactNode {
|
|
return (<ToobParametricEqView instanceId={pedalboardItem.instanceId} item={pedalboardItem} />);
|
|
}
|
|
|
|
|
|
};
|
|
export default ToobParametricEqViewFactory;
|
|
|
|
class ToobParametricEqViewFactoryStereo implements IControlViewFactory {
|
|
uri: string = "http://two-play.com/plugins/toob-parametric-eq-stereo";
|
|
|
|
Create(model: PiPedalModel, pedalboardItem: PedalboardItem): React.ReactNode {
|
|
return (<ToobParametricEqView instanceId={pedalboardItem.instanceId} item={pedalboardItem} />);
|
|
}
|
|
|
|
|
|
};
|
|
|
|
export { ToobParametricEqViewFactoryStereo };
|
|
|
|
|