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

Clean up ToobAmp log messages and rdf:comment's.

Browse Source
This commit is contained in:
Robin E. R. Davies
2024-11-30 22:59:44 -05:00
parent 4a4bd12d38
commit b26bce7850
22 changed files with 620 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/src/ControlTooltip.tsx
+41
View File
@@ -0,0 +1,41 @@
import React, { ReactElement } from 'react';
import Tooltip from "@mui/material/Tooltip"
import { UiControl } from './Lv2Plugin';
import Typography from "@mui/material/Typography";
import Divider from '@mui/material/Divider';
interface ControlTooltipProps {
children: ReactElement,
uiControl: UiControl
}
export default function ControlTooltip(props: ControlTooltipProps) {
let { children, uiControl } = props;
if (uiControl.comment && (uiControl.comment !== uiControl.name)) {
return (
<Tooltip title={(
<React.Fragment>
<Typography variant="caption">{uiControl.name}</Typography>
<Divider />
<Typography variant="caption">{uiControl.comment}</Typography>
</React.Fragment>
)}
placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
>
{children}
</Tooltip>
);
} else {
return (
<Tooltip title={uiControl.name}
placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
>
{children}
</Tooltip>
);
}
}
react/src/FilePropertyControl.tsx
+9 -4
View File
@@ -34,6 +34,7 @@ import ButtonBase from '@mui/material/ButtonBase'
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import {PedalboardItem} from './Pedalboard';
import {isDarkMode} from './DarkMode';
import Tooltip from "@mui/material/Tooltip"
export const StandardItemSize = { width: 80, height: 140 }
@@ -208,10 +209,14 @@ const FilePropertyControl =
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", width: item_width, margin: 8, paddingLeft: 8 }}>
{/* TITLE SECTION */}
<div style={{ flex: "0 0 auto", width: "100%", marginBottom: 8, marginLeft: 0, marginRight: 0 }}>
<Typography variant="caption" display="block" noWrap style={{
width: "100%",
textAlign: "start"
}}> {fileProperty.label}</Typography>
<Tooltip title={fileProperty.label} placement="top-start" arrow
enterDelay={1000} enterNextDelay={1000}
>
<Typography variant="caption" display="block" noWrap style={{
width: "100%",
textAlign: "start"
}}> {fileProperty.label}</Typography>
</Tooltip>
</div>
{/* CONTROL SECTION */}
react/src/MainPage.tsx
+10 -7
View File
@@ -288,7 +288,10 @@ export const MainPage =
this.setSelection(selectedId);
let item = this.getPedalboardItem(selectedId);
if (item != null) {
if (item.isSplit()) {
if (item.isStart() || item.isEnd())
{
// do nothing.
} else if (item.isSplit()) {
let split = item as PedalboardSplitItem;
if (split.getSplitType() === SplitType.Ab) {
let cv = split.getToggleAbControlValue();
@@ -363,7 +366,7 @@ export const MainPage =
titleBar(pedalboardItem: PedalboardItem | null): React.ReactNode {
let title = "";
let author = "";
let pluginUri = "";
let infoPluginUri = "";
let presetsUri = "";
let missing = false;
if (pedalboardItem) {
@@ -375,7 +378,7 @@ export const MainPage =
title = pedalboardItem.pluginName ?? "#error";
author = "";
presetsUri = "";
pluginUri = "";
infoPluginUri = "";
}
else {
let uiPlugin = this.model.getUiPlugin(pedalboardItem.uri);
@@ -386,9 +389,9 @@ export const MainPage =
title = uiPlugin.name;
author = uiPlugin.author_name;
presetsUri = uiPlugin.uri;
if (uiPlugin.description.length > 20) {
pluginUri = uiPlugin.uri;
}
// if (uiPlugin.description.length > 20) {
// }
infoPluginUri = uiPlugin.uri;
}
}
}
@@ -422,7 +425,7 @@ export const MainPage =
)}
</div>
<div style={{ flex: "0 0 auto", verticalAlign: "center" }}>
<PluginInfoDialog plugin_uri={pluginUri} />
<PluginInfoDialog plugin_uri={infoPluginUri} />
</div>
<div style={{ flex: "0 0 auto" }}>
<PluginPresetSelector pluginUri={presetsUri} instanceId={pedalboardItem?.instanceId ?? 0}
react/src/PedalboardView.tsx
+204 -144
View File
@@ -26,18 +26,21 @@ import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import { PluginType } from './Lv2Plugin';
import ButtonBase from '@mui/material/ButtonBase';
import Typography from '@mui/material/Typography';
import PluginIcon, {SelectIconUri} from './PluginIcon';
import PluginIcon, { SelectIconUri } from './PluginIcon';
import { SelectHoverBackground } from './SelectHoverBackground';
import SvgPathBuilder from './SvgPathBuilder';
import Draggable from './Draggable'
import Rect from './Rect';
import {PiPedalStateError} from './PiPedalError';
import { PiPedalStateError } from './PiPedalError';
import Utility from './Utility';
import {isDarkMode} from './DarkMode';
import { isDarkMode } from './DarkMode';
import {
Pedalboard, PedalboardItem, PedalboardSplitItem, SplitType
} from './Pedalboard';
import { ReactComponent as MidiIcon } from "./svg/ic_midi.svg";
const START_CONTROL = Pedalboard.START_CONTROL;
const END_CONTROL = Pedalboard.END_CONTROL;
@@ -45,8 +48,8 @@ const END_CONTROL = Pedalboard.END_CONTROL;
const START_PEDALBOARD_ITEM_URI = Pedalboard.START_PEDALBOARD_ITEM_URI;
const END_PEDALBOARD_ITEM_URI = Pedalboard.END_PEDALBOARD_ITEM_URI;
const ENABLED_CONNECTOR_COLOR = isDarkMode() ? "#CCC": "#666";
const DISABLED_CONNECTOR_COLOR = isDarkMode() ? "#666": "#CCC";
const ENABLED_CONNECTOR_COLOR = isDarkMode() ? "#CCC" : "#666";
const DISABLED_CONNECTOR_COLOR = isDarkMode() ? "#666" : "#CCC";
@@ -57,8 +60,12 @@ const FRAME_SIZE: number = 36;
const STROKE_WIDTH = 3;
const STEREO_STROKE_WIDTH = 6;
const SVG_STROKE_WIDTH = "3";
const SVG_STEREO_STROKE_WIDTH = "6";
const I_SVG_STROKE_WIDTH = 3;
const I_SVG_STEREO_STROKE_WIDTH = 6;
const SVG_STROKE_WIDTH = I_SVG_STROKE_WIDTH.toString();
const SVG_STEREO_STROKE_WIDTH = I_SVG_STEREO_STROKE_WIDTH.toString();
@@ -66,9 +73,13 @@ const EMPTY_ICON_URL = "img/fx_empty.svg";
const ERROR_ICON_URL = "img/fx_error.svg";
const TERMINAL_ICON_URL = "img/fx_terminal.svg";
function CalculateConnection(numberOfInputs: number, numberOfOutputs: number)
{
function CalculateConnection(numberOfInputs: number, numberOfOutputs: number) {
if (numberOfInputs === 0) {
return numberOfOutputs;
}
if (numberOfOutputs === 0) {
return numberOfInputs;
}
let result = Math.min(numberOfInputs, numberOfOutputs);
if (result > 2) result = 2;
return result;
@@ -125,12 +136,19 @@ const pedalboardStyles = (theme: Theme) => createStyles({
alignItems: "center",
justifyContent: "center",
},
midiConnectorDecoration: {
position: "absolute",
left: -20,
top: -6,
fill: theme.palette.text.secondary
},
iconFrame: {
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
background: theme.palette.background.default,
marginLeft: (CELL_WIDTH - FRAME_SIZE) / 2,
marginRight: (CELL_WIDTH - FRAME_SIZE) / 2,
@@ -138,7 +156,7 @@ const pedalboardStyles = (theme: Theme) => createStyles({
marginBottom: (CELL_HEIGHT - FRAME_SIZE) / 2,
width: FRAME_SIZE,
height: FRAME_SIZE,
border: isDarkMode()? "1pt #AAA solid": "1pt #666 solid",
border: isDarkMode() ? "1pt #AAA solid" : "1pt #666 solid",
borderRadius: 6
},
borderlessIconFrame: {
@@ -146,7 +164,7 @@ const pedalboardStyles = (theme: Theme) => createStyles({
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "transparent",
marginLeft: (CELL_WIDTH - FRAME_SIZE) / 2,
marginRight: (CELL_WIDTH - FRAME_SIZE) / 2,
@@ -227,6 +245,8 @@ class PedalLayout {
numberOfInputs: number = 2;
numberOfOutputs: number = 2;
originalInputs: number = 2;
originalOutputs: number = 2;
pedalItem?: PedalboardItem;
@@ -286,11 +306,17 @@ class PedalLayout {
this.iconUrl = TERMINAL_ICON_URL;
this.numberOfInputs = 0;
this.numberOfOutputs = PiPedalModelFactory.getInstance().jackSettings.get().inputAudioPorts.length;
if (this.numberOfOutputs === 0) {
this.numberOfOutputs = 1;
}
} else if (pedalItem.uri === END_PEDALBOARD_ITEM_URI) {
this.pluginType = PluginType.UtilityPlugin;
this.iconUrl = TERMINAL_ICON_URL;
this.numberOfInputs = PiPedalModelFactory.getInstance().jackSettings.get().outputAudioPorts.length;
if (this.numberOfInputs === 0) {
this.numberOfInputs = 1;
}
this.numberOfOutputs = 0;
}
else {
@@ -299,17 +325,19 @@ class PedalLayout {
this.pluginType = uiPlugin.plugin_type;
this.iconUrl = SelectIconUri(uiPlugin.plugin_type);
this.name = uiPlugin.label;
this.numberOfInputs = Math.max(uiPlugin.audio_inputs,2);
this.numberOfOutputs = Math.max(uiPlugin.audio_outputs,2);
this.numberOfInputs = Math.min(uiPlugin.audio_inputs, 2);
this.numberOfOutputs = Math.min(uiPlugin.audio_outputs, 2);
} else {
// default to empty plugin.
this.pluginType = PluginType.ErrorPlugin;
this.name = pedalItem.pluginName??"#error";
this.name = pedalItem.pluginName ?? "#error";
this.iconUrl = ERROR_ICON_URL;
this.numberOfInputs = 2;
this.numberOfOutputs = 2;
}
}
this.originalInputs = this.numberOfInputs;
this.originalOutputs = this.numberOfOutputs;
}
isEmpty(): boolean {
return (!this.pedalItem) || this.pedalItem.isEmpty();
@@ -362,8 +390,7 @@ class LayoutParams {
const PedalboardView =
withStyles(pedalboardStyles, { withTheme: true })(
class extends Component<PedalboardProps, PedalboardState>
{
class extends Component<PedalboardProps, PedalboardState> {
model: PiPedalModel;
frameRef: React.RefObject<HTMLDivElement>;
@@ -386,15 +413,13 @@ const PedalboardView =
this.handleTouchStart = this.handleTouchStart.bind(this);
}
handleTouchStart(e: any)
{
handleTouchStart(e: any) {
// just has to exist to allow Draggable to receive
// touchyMove. :-/
}
onDragEnd(instanceId: number, clientX: number, clientY: number) {
if (!this.props.enableStructureEditing)
{
if (!this.props.enableStructureEditing) {
return;
}
if (!this.currentLayout) return;
@@ -462,9 +487,8 @@ const PedalboardView =
return;
}
}
let lastBottom = item.bottomChildren[item.bottomChildren.length-1];
if (clientX >= lastBottom.bounds.right && clientX < item.bounds.right-CELL_WIDTH/2)
{
let lastBottom = item.bottomChildren[item.bottomChildren.length - 1];
if (clientX >= lastBottom.bounds.right && clientX < item.bounds.right - CELL_WIDTH / 2) {
if (lastBottom.pedalItem) {
this.model.movePedalboardItemAfter(instanceId, lastBottom.pedalItem.instanceId);
this.setSelection(instanceId);
@@ -485,8 +509,7 @@ const PedalboardView =
this.setSelection(instanceId);
return;
} else {
if (item.pedalItem)
{
if (item.pedalItem) {
let margin = (CELL_WIDTH - FRAME_SIZE) / 2;
if (clientX < item.bounds.x + margin) {
this.model.movePedalboardItemBefore(instanceId, item.pedalItem.instanceId);
@@ -513,12 +536,12 @@ const PedalboardView =
}
componentDidMount() {
this.scrollRef.current!.addEventListener("touchstart",this.handleTouchStart, {passive: false});
this.scrollRef.current!.addEventListener("touchstart", this.handleTouchStart, { passive: false });
this.model.pedalboard.addOnChangedHandler(this.onPedalboardChanged);
}
componentWillUnmount() {
this.scrollRef.current!.removeEventListener("touchstart",this.handleTouchStart);
this.scrollRef.current!.removeEventListener("touchstart", this.handleTouchStart);
this.model.pedalboard.removeOnChangedHandler(this.onPedalboardChanged);
}
@@ -578,11 +601,11 @@ const PedalboardView =
topBounds.height = CELL_HEIGHT;
}
let dyTop = (lp.cy + CELL_HEIGHT / 2)- (topBounds.y + topBounds.height) ;
let dyTop = (lp.cy + CELL_HEIGHT / 2) - (topBounds.y + topBounds.height);
this.offsetLayout_(layoutItem.topChildren, dyTop);
topBounds.offset(0, dyTop);
@@ -597,8 +620,8 @@ const PedalboardView =
bottomBounds.x = lp.cx; bottomBounds.width = 0;
bottomBounds.y = lp.cy; bottomBounds.height = CELL_HEIGHT;
}
let dyBottom = (lp.cy+CELL_HEIGHT/2)-bottomBounds.y ;
let dyBottom = (lp.cy + CELL_HEIGHT / 2) - bottomBounds.y;
this.offsetLayout_(layoutItem.bottomChildren, dyBottom)
bottomBounds.offset(0, dyBottom);
bounds.accumulate(bottomBounds);
@@ -633,11 +656,10 @@ const PedalboardView =
}
doLayout(layoutItems: PedalLayout[]): LayoutSize {
const TWO_ROW_HEIGHT = 142 - 14;
if (layoutItems.length === 0)
{
if (layoutItems.length === 0) {
// if the current pedalboard is empty, reserve display space anyway.
return {width: 1, height: TWO_ROW_HEIGHT};
return { width: 1, height: TWO_ROW_HEIGHT };
}
let lp = new LayoutParams();
@@ -646,9 +668,9 @@ const PedalboardView =
// shift everything down so there are no negative y coordinates.
if (bounds.height < TWO_ROW_HEIGHT) {
let extra = Math.floor((TWO_ROW_HEIGHT - Math.ceil(bounds.height))/2);
this.offsetLayout_(layoutItems, Math.floor(-bounds.y + extra/2 ));
let extra = Math.floor((TWO_ROW_HEIGHT - Math.ceil(bounds.height)) / 2);
this.offsetLayout_(layoutItems, Math.floor(-bounds.y + extra / 2));
bounds.height += extra;
} else {
@@ -682,15 +704,13 @@ const PedalboardView =
}
onItemLongClick(event: SyntheticEvent, instanceId?: number): void {
if (!instanceId)
{
if (!instanceId) {
return;
}
event.preventDefault();
event.stopPropagation();
if (!this.props.enableStructureEditing)
{
if (!this.props.enableStructureEditing) {
this.setSelection(instanceId);
return;
}
@@ -702,6 +722,24 @@ const PedalboardView =
}
strokeConnector(output: ReactNode[],channels: number,enabled: Boolean,svgPath: string)
{
let color = enabled ? ENABLED_CONNECTOR_COLOR : DISABLED_CONNECTOR_COLOR;
if (channels === 2) {
output.push((
<path key={this.renderKey++} d={svgPath} stroke={color} strokeWidth={SVG_STEREO_STROKE_WIDTH} />
));
output.push((
<path key={this.renderKey++} d={svgPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />
));
} else if (channels === 1) {
output.push((
<path key={this.renderKey++} d={svgPath} stroke={color} strokeWidth={SVG_STROKE_WIDTH} />
));
}
}
renderConnector(output: ReactNode[], item: PedalLayout, enabled: boolean): void {
// let classes = this.props.classes;
let x_ = item.bounds.x + CELL_WIDTH / 2;
@@ -709,19 +747,35 @@ const PedalboardView =
let numberOfOutputs = item.numberOfOutputs;
let color = enabled ? ENABLED_CONNECTOR_COLOR : DISABLED_CONNECTOR_COLOR;
let stereoCenterColor = this.bgColor;
if (item.originalInputs === 0) {
// break the input paths.
let rx = item.bounds.x + CELL_WIDTH / 2 - FRAME_SIZE / 2 - 4;
let ry = y_ - 4;
output.push((
<rect key={this.renderKey++} x={rx} y={ry} width={4} height={8} fill={this.props.theme.palette.background.paper} />
));
}
let svgPath = new SvgPathBuilder().moveTo(x_, y_).lineTo(x_ + CELL_WIDTH, y_).toString();
if (numberOfOutputs === 2) {
output.push((
<path key={this.renderKey++} d={svgPath} stroke={color} strokeWidth={SVG_STEREO_STROKE_WIDTH} />
<path key={this.renderKey++} d={svgPath} stroke={color} strokeWidth={SVG_STEREO_STROKE_WIDTH} />
));
output.push((
<path key={this.renderKey++} d={svgPath} stroke={stereoCenterColor} strokeWidth={SVG_STROKE_WIDTH} />
<path key={this.renderKey++} d={svgPath} stroke={stereoCenterColor} strokeWidth={SVG_STROKE_WIDTH} />
));
} else if (numberOfOutputs === 1) {
output.push((
<path key={this.renderKey++} d={svgPath} stroke={color} strokeWidth={SVG_STROKE_WIDTH} />
<path key={this.renderKey++} d={svgPath} stroke={color} strokeWidth={SVG_STROKE_WIDTH} />
));
} else {
output.push((
<path key={this.renderKey++} d={svgPath} stroke={DISABLED_CONNECTOR_COLOR} strokeWidth={SVG_STROKE_WIDTH} />
));
}
}
renderSplitConnectors(output: ReactNode[], item: PedalLayout, enabled: boolean, shortSplitOutput: boolean,): void {
@@ -743,18 +797,18 @@ const PedalboardView =
let bottomStartPath = new SvgPathBuilder().moveTo(x_, y_).lineTo(x_, yBottom).lineTo(x_ + CELL_WIDTH, yBottom).toString();
if (item.numberOfInputs === 2 && item.topChildren[0].numberOfInputs === 2) {
output.push((<path key={this.renderKey++} d={topStartPath} stroke={topColor} strokeWidth={SVG_STEREO_STROKE_WIDTH} />));
output.push((<path key={this.renderKey++} d={topStartPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />));
output.push((<path key={this.renderKey++} d={topStartPath} stroke={topColor} strokeWidth={SVG_STEREO_STROKE_WIDTH} />));
output.push((<path key={this.renderKey++} d={topStartPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />));
} else if (item.numberOfInputs !== 0 && item.topChildren[0].numberOfInputs !== 0) {
output.push((<path key={this.renderKey++} d={topStartPath} stroke={topColor} strokeWidth={SVG_STROKE_WIDTH} />));
output.push((<path key={this.renderKey++} d={topStartPath} stroke={topColor} strokeWidth={SVG_STROKE_WIDTH} />));
}
if (item.numberOfInputs === 2 && item.bottomChildren[0].numberOfInputs === 2) {
output.push((<path key={this.renderKey++} d={bottomStartPath} stroke={bottomColor} strokeWidth={SVG_STEREO_STROKE_WIDTH} />));
output.push((<path key={this.renderKey++} d={bottomStartPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />));
output.push((<path key={this.renderKey++} d={bottomStartPath} stroke={bottomColor} strokeWidth={SVG_STEREO_STROKE_WIDTH} />));
output.push((<path key={this.renderKey++} d={bottomStartPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />));
} else if (item.numberOfInputs !== 0 && item.bottomChildren[0].numberOfInputs !== 0) {
output.push((<path key={this.renderKey++} d={bottomStartPath} stroke={bottomColor} strokeWidth={SVG_STROKE_WIDTH} />));
output.push((<path key={this.renderKey++} d={bottomStartPath} stroke={bottomColor} strokeWidth={SVG_STROKE_WIDTH} />));
}
let lastTop = item.topChildren[item.topChildren.length - 1];
@@ -798,7 +852,7 @@ const PedalboardView =
secondPath = new SvgPathBuilder().moveTo(xTop, yTop).lineTo(xTee, yTop).lineTo(xTee, y_).toString();
hasThirdPath = true;
thirdPath= new SvgPathBuilder().moveTo(xTee0,y_).lineTo(xEnd,y_).toString();
thirdPath = new SvgPathBuilder().moveTo(xTee0, y_).lineTo(xEnd, y_).toString();
firstPathEnabled = bottomEnabled;
secondPathEnabled = topEnabled;
} else if (bottomPathFirst || (topEnabled && lastTop.numberOfOutputs === 2)) {
@@ -838,26 +892,26 @@ const PedalboardView =
// display stereo strokes with cutoff line.
if (firstPathStereo) {
output.push((
<path key={this.renderKey++} d={firstPath} stroke={firstPathColor} strokeWidth={SVG_STEREO_STROKE_WIDTH} />
<path key={this.renderKey++} d={firstPath} stroke={firstPathColor} strokeWidth={SVG_STEREO_STROKE_WIDTH} />
));
output.push((
<path key={this.renderKey++} d={firstPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />
<path key={this.renderKey++} d={firstPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />
));
} else if (!firstPathAbsent) {
output.push((
<path key={this.renderKey++} d={firstPath} stroke={firstPathColor} strokeWidth={SVG_STROKE_WIDTH} />
<path key={this.renderKey++} d={firstPath} stroke={firstPathColor} strokeWidth={SVG_STROKE_WIDTH} />
));
}
if (secondPathStereo) {
output.push((
<path key={this.renderKey++} d={secondPath} stroke={secondPathColor} strokeWidth={SVG_STEREO_STROKE_WIDTH} />
<path key={this.renderKey++} d={secondPath} stroke={secondPathColor} strokeWidth={SVG_STEREO_STROKE_WIDTH} />
));
output.push((
<path key={this.renderKey++} d={secondPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />
<path key={this.renderKey++} d={secondPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />
));
} else if (!secondPathAbsent) {
output.push((
<path key={this.renderKey++} d={secondPath} stroke={secondPathColor} strokeWidth={SVG_STROKE_WIDTH} />
<path key={this.renderKey++} d={secondPath} stroke={secondPathColor} strokeWidth={SVG_STROKE_WIDTH} />
));
}
@@ -865,57 +919,53 @@ const PedalboardView =
// stereo strokes merge.
if (firstPathStereo) {
output.push((
<path key={this.renderKey++} d={firstPath} stroke={firstPathColor} strokeWidth={SVG_STEREO_STROKE_WIDTH} />
<path key={this.renderKey++} d={firstPath} stroke={firstPathColor} strokeWidth={SVG_STEREO_STROKE_WIDTH} />
));
} else if (!firstPathAbsent) {
output.push((
<path key={this.renderKey++} d={firstPath} stroke={firstPathColor} strokeWidth={SVG_STROKE_WIDTH} />
<path key={this.renderKey++} d={firstPath} stroke={firstPathColor} strokeWidth={SVG_STROKE_WIDTH} />
));
}
if (secondPathStereo) {
output.push((
<path key={this.renderKey++} d={secondPath} stroke={secondPathColor} strokeWidth={SVG_STEREO_STROKE_WIDTH} />
<path key={this.renderKey++} d={secondPath} stroke={secondPathColor} strokeWidth={SVG_STEREO_STROKE_WIDTH} />
));
} else if (!secondPathAbsent) {
output.push((
<path key={this.renderKey++} d={secondPath} stroke={secondPathColor} strokeWidth={SVG_STROKE_WIDTH} />
<path key={this.renderKey++} d={secondPath} stroke={secondPathColor} strokeWidth={SVG_STROKE_WIDTH} />
));
}
// draw stereo inner lines.
if (firstPathStereo) {
output.push((
<path key={this.renderKey++} d={firstPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />
<path key={this.renderKey++} d={firstPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />
));
}
if (secondPathStereo) {
output.push((
<path key={this.renderKey++} d={secondPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />
<path key={this.renderKey++} d={secondPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />
));
}
}
if (thirdPath != null)
{
if (thirdPath != null) {
// stereo output of L/R splitter
output.push((
<path key={this.renderKey++} d={thirdPath} stroke={secondPathColor} strokeWidth={SVG_STEREO_STROKE_WIDTH} />
<path key={this.renderKey++} d={thirdPath} stroke={secondPathColor} strokeWidth={SVG_STEREO_STROKE_WIDTH} />
));
output.push((
<path key={this.renderKey++} d={thirdPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />
<path key={this.renderKey++} d={thirdPath} stroke={this.bgColor} strokeWidth={SVG_STROKE_WIDTH} />
));
}
}
getScrollContainer()
{
let el: HTMLElement | undefined | null= this.scrollRef.current;
getScrollContainer() {
let el: HTMLElement | undefined | null = this.scrollRef.current;
// actually not here anymore. :-/ It has a reactive definition in MainPage.tsx now.
while (el)
{
if (el.id === "pedalboardScroll")
{
while (el) {
if (el.id === "pedalboardScroll") {
return el as HTMLDivElement;
}
el = el.parentElement;
@@ -924,16 +974,24 @@ const PedalboardView =
}
pedalButton(
instanceId: number,
iconType: PluginType,
draggable: boolean,
instanceId: number,
iconType: PluginType,
draggable: boolean,
enabled: boolean,
hasBorder: boolean = true,
pluginNotFound: boolean)
: ReactNode {
pluginNotFound: boolean,
hasMidiConnector: boolean
)
: ReactNode {
let classes = this.props.classes;
return (
<div className={hasBorder? classes.iconFrame : classes.borderlessIconFrame} onContextMenu={(e) => { e.preventDefault(); }}>
<div className={hasBorder ? classes.iconFrame : classes.borderlessIconFrame} onContextMenu={(e) => { e.preventDefault(); }}>
{hasMidiConnector && (
<div className={classes.midiConnectorDecoration} >
<MidiIcon style={{ width: 16, height: 16, fill: this.props.theme.palette.text.secondary }} />
</div>
)}
<ButtonBase style={{ width: "100%", height: "100%" }}
onClick={(e) => { this.onItemClick(e, instanceId); }}
@@ -941,10 +999,10 @@ const PedalboardView =
onContextMenu={(e: SyntheticEvent) => { this.onItemLongClick(e, instanceId); }}
>
<SelectHoverBackground selected={instanceId === this.props.selectedId} showHover={true} borderRadius={6} >
<Draggable draggable={draggable && (this.props.enableStructureEditing)} getScrollContainer={() => this.getScrollContainer()}
<Draggable draggable={draggable && (this.props.enableStructureEditing)} getScrollContainer={() => this.getScrollContainer()}
onDragEnd={(x, y) => { this.onDragEnd(instanceId, x, y) }}
>
<PluginIcon pluginType={iconType} size={24} pluginMissing={pluginNotFound} opacity={enabled? 0.99:0.6} />
<PluginIcon pluginType={iconType} size={24} pluginMissing={pluginNotFound} opacity={enabled ? 0.99 : 0.6} />
</Draggable>
</SelectHoverBackground>
</ButtonBase>
@@ -975,16 +1033,16 @@ const PedalboardView =
let outputs: ReactNode[] = [];
this.renderConnectors(outputs, layoutChain, true, false);
return (
<div key="connectors" style={{width: layoutSize.width, height: layoutSize.height, overflow: "hidden"}}>
<svg width={layoutSize.width} height={layoutSize.height}
xmlns="http://www.w3.org/2000/svg" viewBox={"0 0 " + layoutSize.width + " " + layoutSize.height}>
<g fill="none">
{
outputs
}
</g>
<div key="connectors" style={{ width: layoutSize.width, height: layoutSize.height, overflow: "hidden" }}>
<svg width={layoutSize.width} height={layoutSize.height}
xmlns="http://www.w3.org/2000/svg" viewBox={"0 0 " + layoutSize.width + " " + layoutSize.height}>
<g fill="none">
{
outputs
}
</g>
</svg>
</svg>
</div>
);
@@ -1008,7 +1066,7 @@ const PedalboardView =
result.push(<div key={this.renderKey++} className={classes.splitItem} style={{ left: item.bounds.x, top: item.bounds.y, width: item.bounds.width }} >
<div className={classes.splitStart} >
{this.pedalButton(START_CONTROL, item.pluginType,false,true,false,false)}
{this.pedalButton(START_CONTROL, item.pluginType, false, true, false, false, false)}
</div>
</div>);
break;
@@ -1016,7 +1074,7 @@ const PedalboardView =
result.push(<div key={this.renderKey++} className={classes.splitItem} style={{ left: item.bounds.x, top: item.bounds.y, width: item.bounds.width }} >
<div className={classes.splitStart} >
{this.pedalButton(END_CONTROL, item.pluginType, false,true,false,false)}
{this.pedalButton(END_CONTROL, item.pluginType, false, true, false, false, false)}
</div>
</div>);
break;
@@ -1025,7 +1083,7 @@ const PedalboardView =
result.push(<div key={this.renderKey++} className={classes.splitItem} style={{ left: item.bounds.x, top: item.bounds.y, width: item.bounds.width }} >
<div className={classes.splitStart} >
{this.pedalButton(item.pedalItem?.instanceId ?? -1, this.getSplitterIcon(item), false,true,true,false)}
{this.pedalButton(item.pedalItem?.instanceId ?? -1, this.getSplitterIcon(item), false, true, true, false, false)}
</div>
</div>);
@@ -1040,10 +1098,18 @@ const PedalboardView =
>{item.name}</Typography>
</div>
)
let uiPlugin = this.model.getUiPlugin(item.pedalItem?.uri??"");
let uiPlugin = this.model.getUiPlugin(item.pedalItem?.uri ?? "");
let pluginMissing = uiPlugin == null;
result.push(<div key={this.renderKey++} className={classes.pedalItem} style={{ left: item.bounds.x, top: item.bounds.y }} >
{this.pedalButton(item.pedalItem?.instanceId ?? -1, item.pluginType, !item.isEmpty(), item.pedalItem?.isEnabled ?? false,true,pluginMissing)}
{this.pedalButton(
item.pedalItem?.instanceId ?? -1,
item.pluginType,
!item.isEmpty(),
item.pedalItem?.isEnabled ?? false,
true,
pluginMissing,
uiPlugin ? ((uiPlugin.has_midi_input !== 0) || (uiPlugin.has_midi_output !== 0)) : false)}
</div>);
@@ -1090,51 +1156,43 @@ const PedalboardView =
this.markStereoBackward(layoutChain, numberOfOutputs);
}
markStereoBackward(layoutChain: PedalLayout[], numberOfOutputs: number) : number
{
for (let i = layoutChain.length-1; i >= 0; --i)
{
markStereoBackward(layoutChain: PedalLayout[], numberOfOutputs: number): number {
for (let i = layoutChain.length - 1; i >= 0; --i) {
let item = layoutChain[i];
if (item.isSplitter())
{
if (item.isSplitter()) {
item.numberOfOutputs = CalculateConnection(item.numberOfOutputs, numberOfOutputs)
this.markStereoBackward(item.topChildren,numberOfOutputs);
this.markStereoBackward(item.bottomChildren,numberOfOutputs);
this.markStereoBackward(item.topChildren, numberOfOutputs);
this.markStereoBackward(item.bottomChildren, numberOfOutputs);
let topInputs = item.topChildren[0].numberOfInputs;
let bottomInputs = item.bottomChildren[0].numberOfInputs;
let splitItem = item.pedalItem as PedalboardSplitItem;
if (splitItem.getSplitType() !== SplitType.Lr)
{
item.numberOfInputs = CalculateConnection(item.numberOfInputs, Math.max(topInputs,bottomInputs));
if (splitItem.getSplitType() !== SplitType.Lr) {
item.numberOfInputs = CalculateConnection(item.numberOfInputs, Math.max(topInputs, bottomInputs));
}
} else if (item.isEnd())
{
} else if (item.isEnd()) {
} else if (item.isStart())
{
item.numberOfOutputs = CalculateConnection(item.numberOfOutputs,numberOfOutputs);
} else if (item.isStart()) {
item.numberOfOutputs = CalculateConnection(item.numberOfOutputs, numberOfOutputs);
return item.numberOfOutputs;
} else if (item.isEmpty()) {
if (numberOfOutputs === 0)
{
if (numberOfOutputs === 0) {
item.numberOfOutputs = 0;
item.numberOfInputs = CalculateConnection(item.numberOfInputs,2);
item.numberOfInputs = CalculateConnection(item.numberOfInputs, 2);
} else {
item.numberOfOutputs = CalculateConnection(item.numberOfOutputs,numberOfOutputs);
item.numberOfInputs = CalculateConnection(item.numberOfInputs,numberOfOutputs);
item.numberOfOutputs = CalculateConnection(item.numberOfOutputs, numberOfOutputs);
item.numberOfInputs = CalculateConnection(item.numberOfInputs, numberOfOutputs);
}
} else {
item.numberOfOutputs = CalculateConnection(item.numberOfOutputs,numberOfOutputs);
item.numberOfOutputs = CalculateConnection(item.numberOfOutputs, numberOfOutputs);
}
numberOfOutputs = item.numberOfInputs;
}
return numberOfOutputs;
}
markStereoForward(layoutChain: PedalLayout[],numberOfInputs: number): number
{
markStereoForward(layoutChain: PedalLayout[], numberOfInputs: number): number {
if (layoutChain.length === 0) {
return numberOfInputs;
}
@@ -1145,9 +1203,8 @@ const PedalboardView =
item.numberOfInputs = numberOfInputs;
let chainInputs = numberOfInputs;
if (splitter.getSplitType() === SplitType.Lr)
{
chainInputs = CalculateConnection(numberOfInputs,1);
if (splitter.getSplitType() === SplitType.Lr) {
chainInputs = CalculateConnection(numberOfInputs, 1);
}
let topOutputs = this.markStereoForward(item.topChildren, chainInputs);
let bottomOutputs = this.markStereoForward(item.bottomChildren, chainInputs);
@@ -1160,28 +1217,32 @@ const PedalboardView =
item.numberOfOutputs = bottomOutputs;
}
} else {
item.numberOfOutputs = (topOutputs >= 1 || bottomOutputs >= 1) ? 2: 1;
}
} else if (item.isStart())
{
item.numberOfOutputs = Math.min(PiPedalModelFactory.getInstance().jackSettings.get().inputAudioPorts.length,2);
item.numberOfOutputs = (topOutputs >= 1 || bottomOutputs >= 1) ? 2 : 1;
}
} else if (item.isStart()) {
item.numberOfOutputs = Math.min(PiPedalModelFactory.getInstance().jackSettings.get().inputAudioPorts.length, 2);
} else if (item.isEnd()) {
item.numberOfInputs =
item.numberOfInputs =
CalculateConnection(
Math.min(PiPedalModelFactory.getInstance().jackSettings.get().outputAudioPorts.length,2),
Math.min(PiPedalModelFactory.getInstance().jackSettings.get().outputAudioPorts.length, 2),
numberOfInputs);
return item.numberOfInputs;
} else if (item.isEmpty()) {
item.numberOfInputs = numberOfInputs;
if (numberOfInputs === 0)
{
if (numberOfInputs === 0) {
item.numberOfOutputs = 2;
} else {
item.numberOfOutputs = item.numberOfInputs;
}
} else {
item.numberOfInputs = CalculateConnection(numberOfInputs,this.getNumberOfInputs(item));
item.numberOfOutputs = this.getNumberOfOutputs(item);
} else {
if (item.numberOfInputs === 0) // zero-input plugins merge their output with the input.
{
item.numberOfInputs = numberOfInputs;
item.numberOfOutputs = Math.max(item.numberOfOutputs, numberOfInputs);
} else {
item.numberOfInputs = CalculateConnection(numberOfInputs, this.getNumberOfInputs(item));
item.numberOfOutputs = this.getNumberOfOutputs(item);
}
}
numberOfInputs = item.numberOfOutputs;
}
@@ -1196,21 +1257,20 @@ const PedalboardView =
let layoutChain = makeChain(this.model, this.state.pedalboard?.items);
let start = PedalLayout.Start();
let end = PedalLayout.End();
if (layoutChain.length !== 0)
{
if (layoutChain.length !== 0) {
layoutChain.splice(0, 0, start);
layoutChain.splice(layoutChain.length, 0, end);
this.markStereoOutputs(layoutChain, 2,2);
this.markStereoOutputs(layoutChain, 2, 2);
}
let layoutSize = this.doLayout(layoutChain);
this.currentLayout = layoutChain; // save for mouse processing &c.
return (
<div className={classes.scrollContainer} ref={this.scrollRef}
>
>
<div className={classes.container} ref={this.frameRef}
style={{
width: layoutSize.width, height: layoutSize.height,
react/src/PluginControl.tsx
+7 -4
View File
@@ -33,6 +33,7 @@ import MenuItem from '@mui/material/MenuItem';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import { ReactComponent as DialIcon } from './svg/fx_dial.svg';
import { isDarkMode } from './DarkMode';
import ControlTooltip from './ControlTooltip';
const MIN_ANGLE = -135;
const MAX_ANGLE = 135;
@@ -725,10 +726,12 @@ const PluginControl =
<div ref={this.frameRef} style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", width: item_width, margin: 8 }}>
{/* TITLE SECTION */}
<div style={{ flex: "0 0 auto", alignSelf:"stretch", marginBottom: 8, marginLeft: isSelect ? 16 : 0, marginRight: 0 }}>
<Typography variant="caption" display="block" noWrap style={{
width: "100%",
textAlign: isSelect ? "left" : "center"
}}> {isTrigger ? "\u00A0" : control.name}</Typography>
<ControlTooltip uiControl={control} >
<Typography variant="caption" display="block" noWrap style={{
width: "100%",
textAlign: isSelect ? "left" : "center"
}}> {isTrigger ? "\u00A0" : control.name}</Typography>
</ControlTooltip>
</div>
{/* CONTROL SECTION */}
react/src/PluginControlView.tsx
+6 -1
View File
@@ -40,6 +40,7 @@ import JsonAtom from './JsonAtom';
import PluginOutputControl from './PluginOutputControl';
import Units from './Units';
import ToobFrequencyResponseView from './ToobFrequencyResponseView';
import Tooltip from '@mui/material/Tooltip';
export const StandardItemSize = { width: 80, height: 110 };
@@ -553,7 +554,11 @@ const PluginControlView =
result.push((
<div key={"ctl" + (this.controlKeyIndex++)} className={!isLandscapeGrid ? classes.portGroup : classes.portGroupLandscape}>
<div className={classes.portGroupTitle}>
<Typography noWrap variant="caption" >{controlGroup.name}</Typography>
<Tooltip title={controlGroup.name}
placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
>
<Typography noWrap variant="caption" >{controlGroup.name}</Typography>
</Tooltip>
</div>
<div className={classes.portGroupControls} >
{
react/src/PluginInfoDialog.tsx
+57 -53
View File
@@ -37,11 +37,10 @@ import { UiPlugin, UiControl } from './Lv2Plugin';
import PluginIcon from './PluginIcon';
import { Remark } from 'react-remark';
/* eslint-disable */
let myTheme: Theme| undefined = undefined;
/* eslint-disable */
let myTheme: Theme | undefined = undefined;
const styles = (theme: Theme) =>
{
const styles = (theme: Theme) => {
myTheme = theme;
return createStyles({
root: {
@@ -151,25 +150,26 @@ function makeControls(controls: UiControl[]) {
break;
}
}
hasComments = true;
if (hasComments) {
let trs: React.ReactElement[] = [];
for (let i = 0; i < controls.length; ++i) {
let control = controls[i];
if (!(control.not_on_gui) && control.is_input)
trs.push((
<tr>
<td style={{ verticalAlign: "top" }}>
<Typography variant="body2" style={{ whiteSpace: "nowrap" }}>
{control.name}
</Typography>
</td>
<td style={{ paddingLeft: "16px", verticalAlign: "top" }}>
<Typography variant="body2">
{control.comment}
</Typography>
</td>
</tr >
));
trs.push((
<tr>
<td style={{ verticalAlign: "top" }}>
<Typography variant="body2" style={{ whiteSpace: "nowrap" }}>
{control.name}
</Typography>
</td>
<td style={{ paddingLeft: "16px", verticalAlign: "top" }}>
<Typography variant="body2">
{control.comment}
</Typography>
</td>
</tr >
));
}
return (
@@ -235,7 +235,7 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => {
<InfoOutlinedIcon className={classes.icon} color='inherit' />
</IconButton>
{open && (
<DialogEx tag="info" onClose={handleClose} open={open} fullWidth maxWidth="md"
<DialogEx tag="info" onClose={handleClose} open={open} fullWidth maxWidth="md"
onEnterKey={handleClose}
>
<MuiDialogTitle >
@@ -258,18 +258,18 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => {
</MuiDialogTitle>
<PluginInfoDialogContent dividers style={{ width: "100%", maxHeight: "80%", overflowX: "hidden" }}>
<div style={{ width: "100%", display: "flex", flexFlow: "row", justifyItems: "stretch", flexWrap: "nowrap" }} >
<div style={{ flex: "1 1 auto", whiteSpace: "nowrap",minWidth: "auto" }}>
<div style={{ flex: "1 1 auto", whiteSpace: "nowrap", minWidth: "auto" }}>
<Typography gutterBottom variant="body2" >
Author:&nbsp;
{(plugin.author_homepage !== "")
? (<a href={plugin.author_homepage} target="_blank" rel="noopener noreferrer">
{plugin.author_name}
{plugin.author_name}
</a>
)
: (
<span>{plugin.author_name}</span>
)
}
</Typography>
</div>
@@ -286,40 +286,44 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => {
{
makeControls(plugin.controls)
}
<Typography gutterBottom variant="body2" style={{ paddingTop: "1em" }}>
Description:
</Typography>
<div style={{ marginLeft: 24, marginTop: 16 }}>
<Remark
rehypeReactOptions={{
components: {
p: (props: any) => {
// return (
// <p className="MuiTypography-root MuiTypography-body2" {...props} />
// );
return (
<Typography variant="body2" paragraph={true} {...props} />
);
},
code: (props: any) => {
return (<code style={{fontSize: 14}} {...props} />);
},
a: (props: any) => {
return (
<a target="_blank" {...props} />
);
{plugin.description.length > 0 && (
<div>
<Typography gutterBottom variant="body2" style={{ paddingTop: "1em" }}>
Description:
</Typography>
<div style={{ marginLeft: 24, marginTop: 16 }}>
<Remark
rehypeReactOptions={{
components: {
p: (props: any) => {
// return (
// <p className="MuiTypography-root MuiTypography-body2" {...props} />
// );
return (
<Typography variant="body2" paragraph={true} {...props} />
);
}
},
}}
>
{plugin.description}
</Remark>
</div>
},
code: (props: any) => {
return (<code style={{ fontSize: 14 }} {...props} />);
},
a: (props: any) => {
return (
<a target="_blank" {...props} />
);
}
},
}}
>
{plugin.description}
</Remark>
</div>
</div>
)}
</PluginInfoDialogContent>
<PluginInfoDialogActions>
<Button variant="dialogPrimary" autoFocus onClick={handleClose} style={{ width: "130px" }}>
<Button variant="dialogPrimary" autoFocus onClick={handleClose} style={{ width: "130px" }}>
OK
</Button>
</PluginInfoDialogActions>
react/src/PluginOutputControl.tsx
+98 -103
View File
@@ -24,10 +24,11 @@ import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { UiControl } from './Lv2Plugin';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, MonitorPortHandle,State } from './PiPedalModel';
import {isDarkMode} from './DarkMode';
import { PiPedalModel, PiPedalModelFactory, MonitorPortHandle, State } from './PiPedalModel';
import { isDarkMode } from './DarkMode';
import GxTunerControl from './GxTunerControl';
import Units from './Units';
import ControlTooltip from './ControlTooltip';
@@ -74,8 +75,7 @@ type PluginOutputControlState = {
const PluginOutputControl =
withStyles(styles, { withTheme: true })(
class extends Component<PluginOutputControlProps, PluginOutputControlState>
{
class extends Component<PluginOutputControlProps, PluginOutputControlState> {
private model: PiPedalModel;
private vuRef: React.RefObject<HTMLDivElement>;
@@ -98,10 +98,8 @@ const PluginOutputControl =
this.onConnectionStateChanged = this.onConnectionStateChanged.bind(this);
}
private onConnectionStateChanged(state: State)
{
if (state === State.Ready)
{
private onConnectionStateChanged(state: State) {
if (state === State.Ready) {
this.unsubscribe();
this.subscribe();
}
@@ -127,40 +125,36 @@ const PluginOutputControl =
}
componentDidUpdate(prevProps: Readonly<PluginOutputControlProps>, prevState: Readonly<PluginOutputControlState>, snapshot?: any): void {
if (prevProps.instanceId !== this.props.instanceId)
{
if (prevProps.instanceId !== this.props.instanceId) {
this.unsubscribe();
this.subscribe();
}
}
private VU_HEIGHT = 60-4;
private DB_VU_HEIGHT = 60-4;
private VU_HEIGHT = 60 - 4;
private DB_VU_HEIGHT = 60 - 4;
private animationHandle: number | undefined = undefined;
private dbVuTelltale = -96.0;
private dbVuValue = -96.0;
private dbVuHoldTime = 0.0;
private requestDbVuAnimation() {
if (!this.animationHandle)
{
if (!this.animationHandle) {
this.animationHandle = requestAnimationFrame(
()=> {
() => {
let value = this.dbVuValue;
let range = this.vuMap(value);
let top = range-this.VU_HEIGHT;
let top = range - this.VU_HEIGHT;
if (top > 0) top = 0;
if (value > this.dbVuTelltale)
{
if (value > this.dbVuTelltale) {
this.dbVuTelltale = value;
this.dbVuHoldTime = Date.now()+2000;
this.dbVuHoldTime = Date.now() + 2000;
}
if (this.dbVuRef.current)
{
this.dbVuRef.current.style.marginTop = top+"px";
if (this.dbVuRef.current) {
this.dbVuRef.current.style.marginTop = top + "px";
}
this.animationHandle = undefined;
this.updateDbVuTelltale();
@@ -171,19 +165,16 @@ const PluginOutputControl =
updateDbVuTelltale() {
let telltaleDone = true;
if (this.dbVuHoldTime !== 0)
{
if (this.dbVuHoldTime !== 0) {
telltaleDone = false;
let t = Date.now();
if (t >= this.dbVuHoldTime)
{
let dt = t-this.dbVuHoldTime;
let telltaleValue = this.dbVuTelltale-30*dt/1000;
if (telltaleValue < -200)
{
if (t >= this.dbVuHoldTime) {
let dt = t - this.dbVuHoldTime;
let telltaleValue = this.dbVuTelltale - 30 * dt / 1000;
if (telltaleValue < -200) {
telltaleValue = -200;
telltaleDone = true;
}
}
this.dbVuTelltale = telltaleValue;
this.dbVuHoldTime = t;
@@ -191,49 +182,41 @@ const PluginOutputControl =
let y = this.dbVuMap(this.dbVuTelltale);
if (y < 0) y = 0;
if (this.dbVuTelltaleRef.current)
{
if (this.dbVuTelltaleRef.current) {
let telltaleStyle = this.dbVuTelltaleRef.current.style;
telltaleStyle.marginTop = y + "px";
let telltaleColor = "#0C0";
if (this.dbVuTelltale >= 0)
{
if (this.dbVuTelltale >= 0) {
telltaleColor = "#F00";
} else if (this.dbVuTelltale >= -10)
{
} else if (this.dbVuTelltale >= -10) {
telltaleColor = "#FF0";
}
telltaleStyle.background = telltaleColor;
}
}
if (!telltaleDone)
{
if (!telltaleDone) {
this.requestDbVuAnimation();
}
}
private updateValue(value: number) {
if (this.lampRef.current)
{
if (this.lampRef.current) {
let control = this.props.uiControl;
let range = (value-control.min_value)/(control.max_value-control.min_value);
this.lampRef.current.style.opacity = range +"";
} else if (this.dbVuRef.current)
{
let range = (value - control.min_value) / (control.max_value - control.min_value);
this.lampRef.current.style.opacity = range + "";
} else if (this.dbVuRef.current) {
this.dbVuValue = value;
this.requestDbVuAnimation();
}
else if (this.vuRef.current) {
let control = this.props.uiControl;
let range = (value-control.min_value)/(control.max_value-control.min_value);
let top = this.VU_HEIGHT-range*this.VU_HEIGHT;
let range = (value - control.min_value) / (control.max_value - control.min_value);
let top = this.VU_HEIGHT - range * this.VU_HEIGHT;
if (!this.animationHandle)
{
if (!this.animationHandle) {
this.animationHandle = requestAnimationFrame(
()=> {
if (this.vuRef.current)
{
this.vuRef.current.style.marginTop = top+"px";
() => {
if (this.vuRef.current) {
this.vuRef.current.style.marginTop = top + "px";
}
this.animationHandle = undefined;
}
@@ -284,13 +267,13 @@ const PluginOutputControl =
dbVuMap(value: number): number {
let control = this.props.uiControl;
let y = (control.max_value-value)*this.DB_VU_HEIGHT/(control.max_value-control.min_value);
let y = (control.max_value - value) * this.DB_VU_HEIGHT / (control.max_value - control.min_value);
return y;
}
vuMap(value: number): number {
let control = this.props.uiControl;
let y = (control.max_value-value)*this.VU_HEIGHT/(control.max_value-control.min_value);
let y = (control.max_value - value) * this.VU_HEIGHT / (control.max_value - control.min_value);
return y;
}
@@ -317,20 +300,18 @@ const PluginOutputControl =
item_width = 80;
}
}
if (control.isTuner())
{
if (control.isTuner()) {
item_width = undefined;
return (
<div style={{ display: "flex", flexDirection: "column", width: item_width, margin: 8, height: 98 }}>
<GxTunerControl instanceId={this.props.instanceId} symbolName={control.symbol}
valueIsMidi={ control.units === Units.midiNote}
/>
<GxTunerControl instanceId={this.props.instanceId} symbolName={control.symbol}
valueIsMidi={control.units === Units.midiNote}
/>
</div >
);
} else if (control.isDbVu())
{
} else if (control.isDbVu()) {
item_width = undefined;
let redLevel = this.dbVuMap(0);
let yellowLevel = this.dbVuMap(-10);
@@ -338,22 +319,24 @@ const PluginOutputControl =
<div style={{ display: "flex", flexDirection: "column", width: item_width, margin: 8, height: 98 }}>
{/* TITLE SECTION */}
<div style={{ flex: "0 0 auto", width: "100%", marginBottom: 8, marginLeft: 0, marginRight: 0 }}>
<Typography variant="caption" display="block" style={{
width: "100%",
textAlign: "center"
}}> {control.name === "" ? "\u00A0" : control.name}</Typography>
<ControlTooltip uiControl={control}>
<Typography variant="caption" display="block" style={{
width: "100%",
textAlign: "center"
}}> {control.name === "" ? "\u00A0" : control.name}</Typography>
</ControlTooltip>
</div>
{/* CONTROL SECTION */}
<div style={{ flex: "1 1 auto", display: "flex", justifyContent: "center", alignItems: "start", flexFlow: "row nowrap" }}>
<div style={{ width: 8, height: this.DB_VU_HEIGHT+4, background: "#000", }}>
<div style={{ flex: "1 1 auto", display: "flex", justifyContent: "center", alignItems: "start", flexFlow: "row nowrap" }}>
<div style={{ width: 8, height: this.DB_VU_HEIGHT + 4, background: "#000", }}>
<div style={{ height: this.DB_VU_HEIGHT, width: 4, overflow: "hidden", position: "absolute", margin: 2 }}>
<div style={{width: 4, height: redLevel,position: "absolute", marginTop: 0, background: "#F00"}} />
<div style={{width: 4, height: (yellowLevel-redLevel),position: "absolute", marginTop: redLevel, background: "#CC0"}} />
<div style={{width: 4, height: (this.DB_VU_HEIGHT-yellowLevel),position: "absolute", marginTop: yellowLevel, background: "#0A0"}} />
<div style={{ width: 4, height: redLevel, position: "absolute", marginTop: 0, background: "#F00" }} />
<div style={{ width: 4, height: (yellowLevel - redLevel), position: "absolute", marginTop: redLevel, background: "#CC0" }} />
<div style={{ width: 4, height: (this.DB_VU_HEIGHT - yellowLevel), position: "absolute", marginTop: yellowLevel, background: "#0A0" }} />
<div ref={this.dbVuRef} style={{ width: 4,position: "absolute", marginTop: 0,height: this.VU_HEIGHT, background: "#000" }} />
<div ref={this.dbVuTelltaleRef} style={{ width: 4,position: "absolute", marginTop: 100,height: 3, background: "#C00" }} />
<div ref={this.dbVuRef} style={{ width: 4, position: "absolute", marginTop: 0, height: this.VU_HEIGHT, background: "#000" }} />
<div ref={this.dbVuTelltaleRef} style={{ width: 4, position: "absolute", marginTop: 100, height: 3, background: "#C00" }} />
</div>
</div>
@@ -369,15 +352,17 @@ const PluginOutputControl =
<div style={{ display: "flex", flexDirection: "column", width: item_width, margin: 8, height: 98 }}>
{/* TITLE SECTION */}
<div style={{ flex: "0 0 auto", width: "100%", marginBottom: 8, marginLeft: 0, marginRight: 0 }}>
<Typography variant="caption" display="block" style={{
width: "100%",
textAlign: "center"
}}> {control.name === "" ? "\u00A0" : control.name}</Typography>
<ControlTooltip uiControl={control}>
<Typography variant="caption" display="block" style={{
width: "100%",
textAlign: "center"
}}> {control.name === "" ? "\u00A0" : control.name}</Typography>
</ControlTooltip>
</div>
{/* CONTROL SECTION */}
<div style={{ flex: "1 1 auto", display: "flex", justifyContent: "center", alignItems: "start", flexFlow: "row nowrap" }}>
<div style={{ width: 8, height: this.VU_HEIGHT+4, background: "#000", }}>
<div style={{ flex: "1 1 auto", display: "flex", justifyContent: "center", alignItems: "start", flexFlow: "row nowrap" }}>
<div style={{ width: 8, height: this.VU_HEIGHT + 4, background: "#000", }}>
<div style={{ height: this.VU_HEIGHT, overflow: "hidden", position: "absolute", margin: 2 }}>
<div ref={this.vuRef} style={{ width: 4, height: this.VU_HEIGHT, background: "#0C0", }} />
</div>
@@ -394,26 +379,31 @@ const PluginOutputControl =
);
} else if (control.isLamp()) {
item_width = undefined;
let attachedLamp = control.name === "" || control.name === "\u00A0" ;
let attachedLamp = control.name === "" || control.name === "\u00A0";
return (
<div style={{ display: "flex", flexDirection: "column", width: item_width,
marginTop: 8, marginBottom: 8, marginRight: 8,marginLeft: (attachedLamp? 0: 8), height: 98
}}>
<div style={{
display: "flex", flexDirection: "column", width: item_width,
marginTop: 8, marginBottom: 8, marginRight: 8, marginLeft: (attachedLamp ? 0 : 8), height: 98
}}>
{/* TITLE SECTION */}
<div style={{ flex: "0 0 auto", width: "100%", marginBottom: 8, marginLeft: 0, marginRight: 0 }}>
<Typography variant="caption" display="block" style={{
width: "100%",
textAlign: "center"
}}> {control.name === "" ? "\u00A0": (control.name)}</Typography>
<ControlTooltip uiControl={control}>
<Typography variant="caption" display="block" style={{
width: "100%",
textAlign: "center"
}}> {control.name === "" ? "\u00A0" : (control.name)}</Typography>
</ControlTooltip>
</div>
{/* CONTROL SECTION */}
<div style={{ flex: "1 1 auto", display: "flex", justifyContent: "left", alignItems: "start", flexFlow: "row nowrap" }}>
<div style={{ width: 12, height: 12, background: isDarkMode()? "#111" : "#444", borderRadius: 5, position: "relative" }}>
<div ref={this.lampRef} style={{ width: 8, height: 8,
background: (isDarkMode()? "radial-gradient(circle at center, #F00 0, #F00 20%, #333 100%)"
: "radial-gradient(circle at center, #F44 0, #F44 40%, #644 100%)"),
opacity: 0, borderRadius: 3,margin: 2,position: "absolute" }} />
<div style={{ width: 12, height: 12, background: isDarkMode() ? "#111" : "#444", borderRadius: 5, position: "relative" }}>
<div ref={this.lampRef} style={{
width: 8, height: 8,
background: (isDarkMode() ? "radial-gradient(circle at center, #F00 0, #F00 20%, #333 100%)"
: "radial-gradient(circle at center, #F44 0, #F44 40%, #644 100%)"),
opacity: 0, borderRadius: 3, margin: 2, position: "absolute"
}} />
</div>
</div>
@@ -429,11 +419,14 @@ const PluginOutputControl =
<div style={{ display: "flex", flexDirection: "column", width: item_width, margin: 8, height: 98 }}>
{/* TITLE SECTION */}
<div style={{ flex: "0 0 auto", width: "100%", marginBottom: 8, marginLeft: 0, marginRight: 0 }}>
<Typography variant="caption" display="block" style={{
width: "100%",
textAlign: "left"
}}> {control.name}</Typography>
<ControlTooltip uiControl={control}>
<Typography variant="caption" display="block" style={{
width: "100%",
textAlign: "left"
}}> {control.name}</Typography>
</ControlTooltip>
</div>
{/* CONTROL SECTION */}
<div style={{ flex: "1 1 auto", display: "flex", justifyContent: "start", alignItems: "center", flexFlow: "row nowrap" }}>
@@ -449,15 +442,17 @@ const PluginOutputControl =
</div >
);
}else {
} else {
return (
<div style={{ display: "flex", flexDirection: "column", width: item_width, margin: 8, height: 98 }}>
{/* TITLE SECTION */}
<div style={{ flex: "0 0 auto", width: "100%", marginBottom: 8, marginLeft: 0, marginRight: 0 }}>
<Typography variant="caption" display="block" style={{
width: "100%",
textAlign: "left"
}}> {control.name}</Typography>
<ControlTooltip uiControl={control}>
<Typography variant="caption" display="block" style={{
width: "100%",
textAlign: "left"
}}> {control.name}</Typography>
</ControlTooltip>
</div>
{/* CONTROL SECTION */}