How to set math bounds

[mark-todd]

This may just be a documentation issue, but I wish to set the bounds on the graph (which is typically done with "setMathBounds" (see here: https://www.desmos.com/api/v1.7/docs/index.html#document-layout)

Does desmos-react support the various methods on GraphingCalculator? Is so, could there perhaps be an example of this in the documentation?

Thanks, Mark

[mark-todd]

I found this in the source of the desmos types, so it seems like the feature is supported - unsure how to use it though:

/**
 * Updates the math coordinates of the graphpaper bounds.
 * If invalid bounds are provided, the graphpaper bounds will not be changed.
 */
setMathBounds(bounds: { left?: number; right?: number; bottom?: number; top?: number }): void;

[mark-todd]

Also wondering if observers are supported:

https://www.desmos.com/api/v1.6/docs/index.html#managing-observers

Similarly to math bounds, it's a method on calculator

[ysulyma]

All Desmos methods on the calculator are accessible by passing a ref to <GraphingCalculator>:

function Demo() {
  const calc = React.useRef<Desmos.Calculator>();

  React.useEffect(() => {
    calc.current.setMathBounds({
      left: -20, right: 20,
      bottom: -20, top: 20
    });
  }, [calc]);

  return (
    <GraphingCalculator
      attributes={{className: "calculator"}}
      fontSize={18} keypad projectorMode
      ref={calc}
    >
      <Expression id="slider" latex="a=3" />
      <Point />
    </GraphingCalculator>
  );
}

[mark-todd]

Hi there,

Thanks for this, I'm now using your example, but when I use I receive this error, on line ref={calc_ref}:

Type 'MutableRefObject<Calculator | undefined>' is not assignable to type 'Ref<Calculator> | undefined'.
  Type 'MutableRefObject<Calculator | undefined>' is not assignable to type 'RefObject<Calculator>'.
    Types of property 'current' are incompatible.
      Type 'Calculator | undefined' is not assignable to type 'Calculator | null'.
        Type 'undefined' is not assignable to type 'Calculator | null'.ts(2322)

Update: Generating a mutable ref is what's expected in the documentation: https://reactjs.org/docs/hooks-reference.html#useref

Update2: Seems to be a common issue: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35572

Update3: Resolved, by replacing the first line with const calc = React.useRef() as React.MutableRefObject<Desmos.Calculator>; Now operates as expected with bounds - thanks for all your help on this!

[mark-todd]

(old question was here)

[mark-todd]

Oh it might be worth including your above example in the documentation - I'm sure someone else might find it as useful as I did!