tweak: Add debouncing for squiggle editor/playground
The lack of it was getting pretty annoying
This commit is contained in:
parent
b022ea2fae
commit
c9c3f4d6d9
|
@ -57,18 +57,32 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
|
||||||
showControls = false,
|
showControls = false,
|
||||||
showSummary = false,
|
showSummary = false,
|
||||||
}: SquiggleEditorProps) => {
|
}: SquiggleEditorProps) => {
|
||||||
const [expression, setExpression] = React.useState(initialSquiggleString);
|
const [editorExpression, setEditorExpression] = React.useState(
|
||||||
|
initialSquiggleString
|
||||||
|
);
|
||||||
|
const [intoSquiggleExpression, setIntoSquiggleExpression] = React.useState(
|
||||||
|
initialSquiggleString
|
||||||
|
);
|
||||||
|
const [intoSquiggleTimeout, setIntoSquiggleTimeout] = React.useState(null);
|
||||||
const chartSettings = {
|
const chartSettings = {
|
||||||
start: diagramStart,
|
start: diagramStart,
|
||||||
stop: diagramStop,
|
stop: diagramStop,
|
||||||
count: diagramCount,
|
count: diagramCount,
|
||||||
};
|
};
|
||||||
|
const setEditorExpressionAndFeedIntoSquiggleWithDebouncing = (value) => {
|
||||||
|
setEditorExpression(value);
|
||||||
|
clearTimeout(intoSquiggleTimeout);
|
||||||
|
const newTimeout = setTimeout(() => {
|
||||||
|
setIntoSquiggleExpression(value);
|
||||||
|
}, 500);
|
||||||
|
setIntoSquiggleTimeout(newTimeout);
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="border border-grey-200 p-2 m-4">
|
<div className="border border-grey-200 p-2 m-4">
|
||||||
<CodeEditor
|
<CodeEditor
|
||||||
value={expression}
|
value={editorExpression}
|
||||||
onChange={setExpression}
|
onChange={setEditorExpressionAndFeedIntoSquiggleWithDebouncing}
|
||||||
oneLine={true}
|
oneLine={true}
|
||||||
showGutter={false}
|
showGutter={false}
|
||||||
height={20}
|
height={20}
|
||||||
|
@ -77,7 +91,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
|
||||||
<SquiggleChart
|
<SquiggleChart
|
||||||
width={width}
|
width={width}
|
||||||
environment={environment}
|
environment={environment}
|
||||||
squiggleString={expression}
|
squiggleString={intoSquiggleExpression}
|
||||||
chartSettings={chartSettings}
|
chartSettings={chartSettings}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
bindings={bindings}
|
bindings={bindings}
|
||||||
|
|
|
@ -200,7 +200,13 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
showControls = false,
|
showControls = false,
|
||||||
showSummary = false,
|
showSummary = false,
|
||||||
}) => {
|
}) => {
|
||||||
const [squiggleString, setSquiggleString] = useState(initialSquiggleString);
|
const [editorExpression, setEditorExpression] = React.useState(
|
||||||
|
initialSquiggleString
|
||||||
|
);
|
||||||
|
const [intoSquiggleExpression, setIntoSquiggleExpression] = React.useState(
|
||||||
|
initialSquiggleString
|
||||||
|
);
|
||||||
|
const [intoSquiggleTimeout, setIntoSquiggleTimeout] = React.useState(null);
|
||||||
const [importString, setImportString] = useState("{}");
|
const [importString, setImportString] = useState("{}");
|
||||||
const [imports, setImports] = useState({});
|
const [imports, setImports] = useState({});
|
||||||
const [importsAreValid, setImportsAreValid] = useState(true);
|
const [importsAreValid, setImportsAreValid] = useState(true);
|
||||||
|
@ -232,6 +238,14 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
sampleCount: Number(vars.sampleCount),
|
sampleCount: Number(vars.sampleCount),
|
||||||
xyPointLength: Number(vars.xyPointLength),
|
xyPointLength: Number(vars.xyPointLength),
|
||||||
};
|
};
|
||||||
|
const setEditorExpressionAndFeedIntoSquiggleWithDebouncing = (value) => {
|
||||||
|
setEditorExpression(value);
|
||||||
|
clearTimeout(intoSquiggleTimeout);
|
||||||
|
const newTimeout = setTimeout(() => {
|
||||||
|
setIntoSquiggleExpression(value);
|
||||||
|
}, 500);
|
||||||
|
setIntoSquiggleTimeout(newTimeout);
|
||||||
|
};
|
||||||
const getChangeJson = (r: string) => {
|
const getChangeJson = (r: string) => {
|
||||||
setImportString(r);
|
setImportString(r);
|
||||||
try {
|
try {
|
||||||
|
@ -393,8 +407,10 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
<Tab.Panel>
|
<Tab.Panel>
|
||||||
<div className="border border-slate-200">
|
<div className="border border-slate-200">
|
||||||
<CodeEditor
|
<CodeEditor
|
||||||
value={squiggleString}
|
value={editorExpression}
|
||||||
onChange={setSquiggleString}
|
onChange={
|
||||||
|
setEditorExpressionAndFeedIntoSquiggleWithDebouncing
|
||||||
|
}
|
||||||
oneLine={false}
|
oneLine={false}
|
||||||
showGutter={true}
|
showGutter={true}
|
||||||
height={height - 1}
|
height={height - 1}
|
||||||
|
@ -410,7 +426,7 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
<div className="w-1/2 p-2 pl-4">
|
<div className="w-1/2 p-2 pl-4">
|
||||||
<div style={{ maxHeight: height }}>
|
<div style={{ maxHeight: height }}>
|
||||||
<SquiggleChart
|
<SquiggleChart
|
||||||
squiggleString={squiggleString}
|
squiggleString={intoSquiggleExpression}
|
||||||
environment={env}
|
environment={env}
|
||||||
chartSettings={chartSettings}
|
chartSettings={chartSettings}
|
||||||
height={vars.chartHeight}
|
height={vars.chartHeight}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user