:(

11 files changed, 147 insertions, 46 deletions

diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 20dbc6f25..58b120e7d 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -21,7 +21,8 @@ export enum DocumentType {
     PDFANNO = "pdfanno",        // pdf text selection (could be just a collection?)
     DATE = "date",              // calendar view of a date
     SCRIPTING = "script",       // script editor
-    EQUATION = "equation",      // equation edtior
+    EQUATION = "equation",      // equation editor
+    FUNCPLOT = "funcplot",      // function plotter
 
     // special purpose wrappers that either take no data or are compositions of lower level types
     LINK = "link",              // link  (view of a document that acts as a link)
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index f87c7185c..ca5ee9cbd 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -58,6 +58,7 @@ import { SearchBox } from "../views/search/SearchBox";
 import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo";
 import { DocumentType } from "./DocumentTypes";
 import { EquationBox } from "../views/nodes/EquationBox";
+import { FunctionPlotBox } from "../views/nodes/FunctionPlotBox";
 const path = require('path');
 
 const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace("px", ""));
@@ -379,6 +380,9 @@ export namespace Docs {
             [DocumentType.EQUATION, {
                 layout: { view: EquationBox, dataField: defaultDataKey },
             }],
+            [DocumentType.FUNCPLOT, {
+                layout: { view: FunctionPlotBox, dataField: defaultDataKey },
+            }],
             [DocumentType.BUTTON, {
                 layout: { view: LabelBox, dataField: "onClick" },
             }],
@@ -899,6 +903,10 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.EQUATION), undefined, { ...(options || {}) });
         }
 
+        export function FunctionPlotDocument(documents: Array<Doc>, options?: DocumentOptions) {
+            return InstanceFromProto(Prototypes.get(DocumentType.FUNCPLOT), new List(documents), { ...(options || {}) });
+        }
+
         export function ButtonDocument(options?: DocumentOptions) {
             // const btn = InstanceFromProto(Prototypes.get(DocumentType.BUTTON), undefined, { ...(options || {}), "onClick-rawScript": "-script-" });
             // btn.layoutKey = "layout_onClick";
@@ -1229,7 +1237,7 @@ export namespace DocUtils {
             icon: "eye"
         });
         ContextMenu.Instance.addItem({
-            description: ":math", event: () => {
+            description: ":=math", event: () => {
                 const created = Docs.Create.EquationDocument();
                 if (created) {
                     created.author = Doc.CurrentUserEmail;
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 79a493dc9..a2f59e48f 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -793,7 +793,7 @@ export class CurrentUserUtils {
         // setup Recently Closed library item
         if (doc.myRecentlyClosedDocs === undefined) {
             doc.myRecentlyClosedDocs = new PrefetchProxy(Docs.Create.TreeDocument([], {
-                title: "Recently Closed", _height: 500,
+                title: "Recently Closed",
                 treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, _forceActive: true, childDropAction: "alias",
                 treeViewTruncateTitleWidth: 150, treeViewPreventOpen: false, ignoreClick: true,
                 _lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same", system: true
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 7152f4272..95a95b10d 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -30,6 +30,7 @@ import { CollectionStackingViewFieldColumn } from "./CollectionStackingViewField
 import { CollectionSubView } from "./CollectionSubView";
 import { CollectionViewType } from "./CollectionView";
 import { LightboxView } from "../LightboxView";
+import { DocumentType } from "../../documents/DocumentTypes";
 const _global = (window /* browser */ || global /* node */) as any;
 
 type StackingDocument = makeInterface<[typeof collectionSchema, typeof documentSchema]>;
@@ -220,8 +221,8 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             LayoutTemplate={this.props.childLayoutTemplate}
             LayoutTemplateString={this.props.childLayoutString}
             freezeDimensions={this.props.childFreezeDimensions}
-            NativeWidth={this.props.childIgnoreNativeSize ? returnZero : undefined}  // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox
-            NativeHeight={this.props.childIgnoreNativeSize ? returnZero : undefined}
+            NativeWidth={this.props.childIgnoreNativeSize ? returnZero : doc._fitWidth && !Doc.NativeWidth(doc) ? width : undefined}  // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox
+            NativeHeight={this.props.childIgnoreNativeSize ? returnZero : doc._fitWidth && !Doc.NativeHeight(doc) ? height : undefined}
             dontCenter={this.props.childIgnoreNativeSize ? "xy" : undefined}
             dontRegisterView={dataDoc ? true : BoolCast(this.layoutDoc.dontRegisterChildViews, this.props.dontRegisterView)}
             rootSelected={this.rootSelected}
@@ -257,27 +258,29 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
     getDocWidth(d?: Doc) {
         if (!d) return 0;
         const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
-        const nw = Doc.NativeWidth(childLayoutDoc) || (childLayoutDoc._fitWidth ? 0 : d[WidthSym]());
-        return Math.min(nw && !this.layoutDoc._columnsFill ? (this.props.scaling?.() || 1) * d[WidthSym]() : Number.MAX_VALUE, this.columnWidth / this.numGroupColumns);
+        const maxWidth = this.columnWidth / this.numGroupColumns;
+        if (!this.layoutDoc._columnsFill && !childLayoutDoc._fitWidth) {
+            return Math.min(d[WidthSym]() * (this.props.scaling?.() || 1), maxWidth);
+        }
+        return maxWidth;
     }
     getDocHeight(d?: Doc) {
         if (!d) return 0;
-        const childDataDoc = (!d.isTemplateDoc && !d.isTemplateForField && !d.PARAMS) ? undefined : this.props.DataDoc;
         const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
-        const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (childLayoutDoc._fitWidth ? 0 : d[WidthSym]());
-        const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (childLayoutDoc._fitWidth ? 0 : d[HeightSym]());
-        let wid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1);
-        if (!this.layoutDoc._columnsFill) wid = Math.min(wid, childLayoutDoc[WidthSym]());
-        const hllimit = NumCast(this.layoutDoc.childLimitHeight, -1);
-        if (!childLayoutDoc._fitWidth && nw && nh) {
-            const aspect = nw && nh ? nh / nw : 1;
-            if (!(this.layoutDoc._columnsFill)) wid = Math.min(this.getDocWidth(d), wid);
-            return Math.min(hllimit === 0 ? this.props.PanelWidth() : hllimit === -1 ? 10000 : hllimit, wid * aspect);
+        const childDataDoc = (!d.isTemplateDoc && !d.isTemplateForField && !d.PARAMS) ? undefined : this.props.DataDoc;
+        const maxHeight = (lim => lim === 0 ? this.props.PanelWidth() : lim === -1 ? 10000 : lim)(NumCast(this.layoutDoc.childLimitHeight, -1));
+        const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!childLayoutDoc._fitWidth || this.layoutDoc._columnsFill ? d[WidthSym]() : 0);
+        const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!childLayoutDoc._fitWidth || this.layoutDoc._columnsFill ? d[HeightSym]() : 0);
+        if (nw && nh) {
+            const colWid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1);
+            const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d), colWid);
+            return Math.min(
+                maxHeight,
+                docWid * nh / nw);
         }
-        return childLayoutDoc._fitWidth ?
-            (!nh ? Math.min(NumCast(childLayoutDoc.height, 10000) * (this.props.scaling?.() || 1), this.props.PanelHeight() - 2 * this.yMargin) :
-                Math.min(wid * nh / (nw || 1), this.layoutDoc._autoHeight ? 100000 : this.props.PanelHeight() - 2 * this.yMargin)) :
-            Math.min(hllimit === 0 ? this.props.PanelWidth() : hllimit === -1 ? 10000 : hllimit, Math.max(20, childLayoutDoc[HeightSym]()));
+        const childHeight = NumCast(childLayoutDoc._height);
+        const panelHeight = this.props.PanelHeight() - 2 * this.yMargin;
+        return Math.min(childHeight, maxHeight, panelHeight);
     }
 
     columnDividerDown = (e: React.PointerEvent) => {
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index d23f3309e..0c0dbef9f 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -182,7 +182,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
         let offset = 0;
         for (const { layout: candidate } of this.childLayoutPairs) {
             if (candidate === layout) {
-                return this.props.ScreenToLocalTransform().translate(-offset, 0);
+                return this.props.ScreenToLocalTransform().translate(-offset / (this.props.scaling?.() || 1), 0);
             }
             offset += this.lookupPixels(candidate) + resizerWidth;
         }
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
index 641ae6ce1..0a1000a20 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
@@ -182,7 +182,7 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument)
         let offset = 0;
         for (const { layout: candidate } of this.childLayoutPairs) {
             if (candidate === layout) {
-                return this.props.ScreenToLocalTransform().translate(0, -offset);
+                return this.props.ScreenToLocalTransform().translate(0, -offset / (this.props.scaling?.() || 1));
             }
             offset += this.lookupPixels(candidate) + resizerHeight;
         }
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 02c112745..32542d056 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -12,6 +12,7 @@ import { YoutubeBox } from "./../../apis/youtube/YoutubeBox";
 import { AudioBox } from "./AudioBox";
 import { LabelBox } from "./LabelBox";
 import { EquationBox } from "./EquationBox";
+import { FunctionPlotBox } from "./FunctionPlotBox";
 import { SliderBox } from "./SliderBox";
 import { LinkBox } from "./LinkBox";
 import { ScriptingBox } from "./ScriptingBox";
@@ -223,7 +224,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo
                 components={{
                     FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, EquationBox, SliderBox, FieldView,
                     CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
-                    PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, SearchBox, FilterBox,
+                    PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, SearchBox, FilterBox, FunctionPlotBox,
                     ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, DocHolderBox, LinkBox, ScriptingBox,
                     ScreenshotBox, HTMLtag, ComparisonBox
                 }}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index cd61d20b1..d4f6c076a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1013,25 +1013,22 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return this.docView?._componentView?.reverseNativeScaling?.() ? 0 :
             returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions));
     }
-    shouldNotScale = () => this.layoutDoc._fitWidth || [CollectionViewType.Docking, CollectionViewType.Tree].includes(this.Document._viewType as any);
-    @computed get effectiveNativeWidth() { return this.nativeWidth || (this.shouldNotScale() ? 0 : NumCast(this.layoutDoc.width)); }
-    @computed get effectiveNativeHeight() { return this.nativeHeight || (this.shouldNotScale() ? 0 : NumCast(this.layoutDoc.height)); }
+    shouldNotScale = () => (this.layoutDoc._fitWidth && !this.nativeWidth) || [CollectionViewType.Docking, CollectionViewType.Tree].includes(this.Document._viewType as any);
+    @computed get effectiveNativeWidth() { return this.shouldNotScale() ? 0 : (this.nativeWidth || NumCast(this.layoutDoc.width)); }
+    @computed get effectiveNativeHeight() { return this.shouldNotScale() ? 0 : (this.nativeHeight || NumCast(this.layoutDoc.height)); }
     @computed get nativeScaling() {
+        if (this.shouldNotScale()) return 1;
         const minTextScale = this.Document.type === DocumentType.RTF ? 0.1 : 0;
-        if (this.effectiveNativeWidth && (this.layoutDoc?._fitWidth || this.props.PanelHeight() / this.effectiveNativeHeight > this.props.PanelWidth() / this.effectiveNativeWidth)) {
+        if (this.props.PanelHeight() / this.effectiveNativeHeight > this.props.PanelWidth() / this.effectiveNativeWidth) {
             return Math.max(minTextScale, this.props.PanelWidth() / this.effectiveNativeWidth);  // width-limited or fitWidth
         }
-        return this.effectiveNativeWidth && this.effectiveNativeHeight ? Math.max(minTextScale, this.props.PanelHeight() / this.effectiveNativeHeight) : 1; // height-limited or unscaled
+        return Math.max(minTextScale, this.props.PanelHeight() / this.effectiveNativeHeight); // height-limited or unscaled
     }
 
     @computed get panelWidth() { return this.effectiveNativeWidth ? this.effectiveNativeWidth * this.nativeScaling : this.props.PanelWidth(); }
     @computed get panelHeight() {
         if (this.effectiveNativeHeight) {
-            return Math.min(this.props.PanelHeight(),
-                this.props.Document._fitWidth ?
-                    Math.max(NumCast(this.props.Document._height), NumCast(((this.props.Document.scrollHeight || 0) as number) * this.props.PanelWidth() / this.effectiveNativeWidth, this.props.PanelHeight())) :
-                    this.effectiveNativeHeight * this.nativeScaling
-            );
+            return Math.min(this.props.PanelHeight(), Math.max(NumCast(this.layoutDoc.scrollHeight), this.effectiveNativeHeight) * this.nativeScaling);
         }
         return this.props.PanelHeight();
     }
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index 5bc73d5d9..5bb904f91 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -1,18 +1,22 @@
 import EquationEditor from 'equation-editor-react';
+import { action, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { documentSchema } from '../../../fields/documentSchemas';
-import { createSchema, makeInterface } from '../../../fields/Schema';
-import { StrCast, NumCast } from '../../../fields/Types';
-import { ViewBoxBaseComponent } from '../DocComponent';
-import { FieldView, FieldViewProps } from './FieldView';
-import './LabelBox.scss';
 import { Id } from '../../../fields/FieldSymbols';
-import { simulateMouseClick } from '../../../Utils';
+import { createSchema, makeInterface } from '../../../fields/Schema';
+import { NumCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
-import { reaction, action } from 'mobx';
 import { Docs } from '../../documents/Documents';
+import { ViewBoxBaseComponent } from '../DocComponent';
 import { LightboxView } from '../LightboxView';
+import { FieldView, FieldViewProps } from './FieldView';
+import './LabelBox.scss';
+import functionPlot from "function-plot";
+import { DocumentManager } from '../../util/DocumentManager';
+import { Utils } from '../../../Utils';
+import { HeightSym, WidthSym } from '../../../fields/Doc';
+
 
 const EquationSchema = createSchema({});
 
@@ -39,18 +43,29 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps, EquationDo
                 }
             }, { fireImmediately: true });
     }
+    plot: any;
     @action
     keyPressed = (e: KeyboardEvent) => {
         const _height = Number(getComputedStyle(this._ref.current!.element.current).height.replace("px", ""));
         const _width = Number(getComputedStyle(this._ref.current!.element.current).width.replace("px", ""));
-        if (e.key === "Enter" || e.key === "Tab") {
+        if (e.key === "Enter") {
             const nextEq = Docs.Create.EquationDocument({
                 title: "# math", text: StrCast(this.dataDoc.text), _width, _height: 25,
-                x: NumCast(this.layoutDoc.x) + (e.key === "Tab" ? _width + 10 : 0), y: NumCast(this.layoutDoc.y) + (e.key === "Enter" ? _height + 10 : 0)
+                x: NumCast(this.layoutDoc.x), y: NumCast(this.layoutDoc.y) + _height + 10
             });
             EquationBox.SelectOnLoad = nextEq[Id];
             this.props.addDocument?.(nextEq);
             e.stopPropagation();
+
+        }
+        if (e.key === "Tab") {
+            const graph = Docs.Create.FunctionPlotDocument([this.rootDoc], {
+                x: NumCast(this.layoutDoc.x) + this.layoutDoc[WidthSym](),
+                y: NumCast(this.layoutDoc.y),
+                _width: 400, _height: 300, _backgroundColor: "white"
+            });
+            this.props.addDocument?.(graph);
+            e.stopPropagation();
         }
         if (e.key === "Backspace" && !this.dataDoc.text) this.props.removeDocument?.(this.rootDoc);
     }
@@ -72,11 +87,11 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps, EquationDo
             }}
         >
             <EquationEditor ref={this._ref}
-                value={this.dataDoc.text || "y"}
+                value={this.dataDoc.text || "x"}
                 spaceBehavesLikeTab={true}
                 onChange={this.onChange}
                 autoCommands="pi theta sqrt sum prod alpha beta gamma rho"
-                autoOperatorNames="sin cos tan" /></div>
-        );
+                autoOperatorNames="sin cos tan" />
+        </div>);
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/FunctionPlotBox.scss b/src/client/views/nodes/FunctionPlotBox.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/views/nodes/FunctionPlotBox.scss
diff --git a/src/client/views/nodes/FunctionPlotBox.tsx b/src/client/views/nodes/FunctionPlotBox.tsx
new file mode 100644
index 000000000..dba08b506
--- /dev/null
+++ b/src/client/views/nodes/FunctionPlotBox.tsx
@@ -0,0 +1,76 @@
+import EquationEditor from 'equation-editor-react';
+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 { 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';
+
+
+const EquationSchema = createSchema({});
+
+type EquationDocument = makeInterface<[typeof EquationSchema, typeof documentSchema]>;
+const EquationDocument = makeInterface(EquationSchema, documentSchema);
+
+@observer
+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 = "";
+    constructor(props: any) {
+        super(props);
+        this._plotId = "graph" + FunctionPlotBox.GraphCount++;
+    }
+    createGraph = (ele: HTMLDivElement) => {
+        let width = this.props.PanelWidth();
+        let 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,
+                width,
+                height,
+                yAxis: { domain: [-1, 9] },
+                grid: true,
+                data: [
+                    {
+                        fn,
+                        // derivative: { fn: "2 * x", updateOnMouseMove: true }
+                    }
+                ]
+            });
+        } catch (e) {
+            console.log(e);
+        }
+    }
+    @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()} />;
+    }
+    render() {
+        TraceMobx();
+        return (<div
+            style={{
+                pointerEvents: !this.active() ? "all" : undefined,
+                width: this.props.PanelWidth(),
+                height: this.props.PanelHeight()
+            }}
+        >
+            {this.theGraph}
+            <div style={{
+                display: this.props.isSelected() ? "none" : undefined, position: "absolute", width: "100%", height: "100%",
+                pointerEvents: "all"
+            }} />
+        </div>);
+    }
+}
\ No newline at end of file