Add width property

This commit is contained in:
Sam Nolan 2022-04-01 17:29:37 +11:00
parent d18479e426
commit 423f1cbe98
3 changed files with 10 additions and 2 deletions

View File

@ -9,7 +9,8 @@ import "ace-builds/src-noconflict/keybinding-vim";
interface CodeEditorProps {
value : string,
onChange : (value: string) => void,
oneLine : boolean
oneLine : boolean,
width: number
}
export let CodeEditor : FC<CodeEditorProps> = (props) =>
@ -17,6 +18,7 @@ export let CodeEditor : FC<CodeEditorProps> = (props) =>
value={props.value}
mode="golang"
theme="github"
width={props.width + "px"}
height={props.oneLine ? "1em" : "500px"}
showGutter={false}
highlightActiveLine={false}

View File

@ -40,6 +40,8 @@ export interface SquiggleChartProps {
environment?: exportEnv;
/** When the environment changes */
onEnvChange?(env: exportEnv): void;
/** CSS width of the element */
width?: number;
}
export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
@ -75,7 +77,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
}));
console.log(values.length)
return <SquiggleVegaChart data={{ con: values }} actions={false}/>;
return <SquiggleVegaChart width={props.width ? props.width : 500} data={{ con: values }} actions={false}/>;
} else if (shape.tag === "Discrete") {
let xyShape = shape.value.xyShape;
let totalY = xyShape.ys.reduce((a, b) => a + b);

View File

@ -23,6 +23,8 @@ export interface SquiggleEditorProps {
environment?: exportEnv;
/** when the environment changes. Used again for notebook magic*/
onEnvChange?(env: exportEnv): void;
/** The width of the element */
width: number;
}
const highlight = (_: HTMLInputElement) => {};
@ -47,6 +49,7 @@ export class SquiggleEditor extends React.Component<
return (
<div>
<CodeEditor
width={props.width ? props.width : 500}
value={expression}
onChange={(e) => {
this.setState({ expression: e });
@ -54,6 +57,7 @@ export class SquiggleEditor extends React.Component<
oneLine={true}
/>
<SquiggleChart
width={props.width ? props.width : 500}
squiggleString={expression}
sampleCount={props.sampleCount}
outputXYPoints={props.outputXYPoints}