1 files changed, 35 insertions, 11 deletions
diff --git a/src/client/views/nodes/FunctionPlotBox.tsx b/src/client/views/nodes/FunctionPlotBox.tsx
index dba08b506..f35677014 100644
--- a/src/client/views/nodes/FunctionPlotBox.tsx
+++ b/src/client/views/nodes/FunctionPlotBox.tsx
@@ -3,14 +3,16 @@ import functionPlot from "function-plot";
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { documentSchema } from '../../../fields/documentSchemas';
-import { createSchema, makeInterface } from '../../../fields/Schema';
-import { StrCast } from '../../../fields/Types';
+import { createSchema, makeInterface, listSpec } from '../../../fields/Schema';
+import { StrCast, Cast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
 import { ViewBoxBaseComponent } from '../DocComponent';
 import { FieldView, FieldViewProps } from './FieldView';
 import './LabelBox.scss';
-import { DocListCast } from '../../../fields/Doc';
-import { computed } from 'mobx';
+import { DocListCast, Doc } from '../../../fields/Doc';
+import { computed, action, reaction } from 'mobx';
+import { Docs } from '../../documents/Documents';
+import { List } from '../../../fields/List';
 
 
 const EquationSchema = createSchema({});
@@ -22,24 +24,47 @@ const EquationDocument = makeInterface(EquationSchema, documentSchema);
 export class FunctionPlotBox extends ViewBoxBaseComponent<FieldViewProps, EquationDocument>(EquationDocument) {
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FunctionPlotBox, fieldKey); }
     public static GraphCount = 0;
-    _ref: React.RefObject<EquationEditor> = React.createRef();
     _plot: any;
     _plotId = "";
+    _plotEle: any;
     constructor(props: any) {
         super(props);
         this._plotId = "graph" + FunctionPlotBox.GraphCount++;
     }
-    createGraph = (ele: HTMLDivElement) => {
-        let width = this.props.PanelWidth();
-        let height = this.props.PanelHeight();
+    componentDidMount() {
+        this.props.setContentView?.(this);
+        reaction(() => [DocListCast(this.dataDoc.data).lastElement()?.text, this.dataDoc.xRange, this.dataDoc.yRange],
+            () => this.createGraph());
+    }
+    getAnchor = () => {
+        const anchor = Docs.Create.TextanchorDocument({
+            useLinkSmallAnchor: true,
+            hideLinkButton: true,
+            annotationOn: this.rootDoc
+        });
+        anchor.xRange = new List<number>(Array.from(this._plot.options.xAxis.domain));
+        anchor.yRange = new List<number>(Array.from(this._plot.options.yAxis.domain));
+        return anchor;
+    }
+    @action
+    scrollFocus = (doc: Doc, smooth: boolean) => {
+        this.dataDoc.xRange = new List<number>(Array.from(Cast(doc.xRange, listSpec("number"), Cast(this.dataDoc.xRange, listSpec("number"), [-10, 10]))));
+        this.dataDoc.yRange = new List<number>(Array.from(Cast(doc.yRange, listSpec("number"), Cast(this.dataDoc.xRange, listSpec("number"), [-1, 9]))));
+        return 0;
+    }
+    createGraph = (ele?: HTMLDivElement) => {
+        this._plotEle = ele || this._plotEle;
+        const width = this.props.PanelWidth();
+        const height = this.props.PanelHeight();
         const fn = StrCast(DocListCast(this.dataDoc.data).lastElement()?.text, "x^2").replace(/\\frac\{(.*)\}\{(.*)\}/, "($1/$2)");
         console.log("Graphing:" + fn);
         try {
             this._plot = functionPlot({
-                target: "#" + ele.id,
+                target: "#" + this._plotEle.id,
                 width,
                 height,
-                yAxis: { domain: [-1, 9] },
+                xAxis: { domain: Cast(this.dataDoc.xRange, listSpec("number"), [-10, 10]) },
+                yAxis: { domain: Cast(this.dataDoc.xRange, listSpec("number"), [-1, 9]) },
                 grid: true,
                 data: [
                     {
@@ -53,7 +78,6 @@ export class FunctionPlotBox extends ViewBoxBaseComponent<FieldViewProps, Equati
         }
     }
     @computed get theGraph() {
-        const fn = StrCast(DocListCast(this.dataDoc.data).lastElement()?.text, "x^2");
         return <div id={`${this._plotId}`} ref={r => r && this.createGraph(r)} style={{ position: "absolute", width: "100%", height: "100%" }}
             onPointerDown={e => e.stopPropagation()} />;
     }