From 8680d1c31d4f835663c070f5b8cef57254e75e28 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 12 Nov 2024 16:42:35 -0500
Subject: made equation background same as text. fixed dflt stroke/link width
 to both be 1.  made function plot axis ranges get saved to Doc. marked
 equation->function links as being svgs.  fixed initial size of equation
 boxes..

---
 src/client/views/nodes/FunctionPlotBox.tsx | 43 ++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 5 deletions(-)

(limited to 'src/client/views/nodes/FunctionPlotBox.tsx')

diff --git a/src/client/views/nodes/FunctionPlotBox.tsx b/src/client/views/nodes/FunctionPlotBox.tsx
index 6b439cd64..91c351895 100644
--- a/src/client/views/nodes/FunctionPlotBox.tsx
+++ b/src/client/views/nodes/FunctionPlotBox.tsx
@@ -1,5 +1,5 @@
 import functionPlot, { Chart } from 'function-plot';
-import { computed, makeObservable, reaction } from 'mobx';
+import { action, computed, makeObservable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast } from '../../../fields/Doc';
@@ -15,6 +15,8 @@ import { undoBatch } from '../../util/UndoManager';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { PinDocView, PinProps } from '../PinFuncs';
 import { FieldView, FieldViewProps } from './FieldView';
+import { returnFalse, setupMoveUpEvents } from '../../../ClientUtils';
+import { emptyFunction } from '../../../Utils';
 
 @observer
 export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@@ -65,18 +67,24 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
         );
         return funcs;
     }
+    computeYScale = (width: number, height: number, xScale: number[]) => {
+        const xDiff = xScale[1] - xScale[0];
+        const yDiff = (height * xDiff) / width;
+        return [-yDiff / 2, yDiff / 2];
+    };
     createGraph = (ele?: HTMLDivElement) => {
         this._plotEle = ele || this._plotEle;
         const width = this._props.PanelWidth();
         const height = this._props.PanelHeight();
+        const xrange = Cast(this.layoutDoc.xRange, listSpec('number'), [-10, 10]);
         try {
             this._plotEle?.children.length && this._plotEle.removeChild(this._plotEle.children[0]);
             this._plot = functionPlot({
                 target: '#' + this._plotEle?.id,
                 width,
                 height,
-                xAxis: { domain: Cast(this.layoutDoc.xRange, listSpec('number'), [-10, 10]) },
-                yAxis: { domain: Cast(this.layoutDoc.yRange, listSpec('number'), [-1, 9]) },
+                xAxis: { domain: xrange },
+                yAxis: { domain: this.computeYScale(width, height, xrange) }, //  Cast(this.layoutDoc.yRange, listSpec('number'), [-1, 9]) },
                 grid: true,
                 data: this.graphFuncs.map(fn => ({
                     fn,
@@ -94,7 +102,7 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
             const added = de.complete.docDragData.droppedDocuments.reduce((res, doc) => {
                 // const ret = res && Doc.AddDocToList(this.dataDoc, this._props.fieldKey, doc);
                 if (res) {
-                    const link = DocUtils.MakeLink(doc, this.Document, { link_relationship: 'function', link_description: 'input' });
+                    const link = DocUtils.MakeLink(doc, this.Document, { layout_isSvg: true, link_relationship: 'function', link_description: 'input' });
                     link && this._props.addDocument?.(link);
                 }
                 return res;
@@ -115,7 +123,32 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
         // if (this.layout_autoHeight) this.tryUpdateScrollHeight();
     };
     @computed get theGraph() {
-        return <div id={`${this._plotId}`} ref={r => r && this.createGraph(r)} style={{ position: 'absolute', width: '100%', height: '100%' }} onPointerDown={e => e.stopPropagation()} />;
+        return (
+            <div
+                id={`${this._plotId}`}
+                ref={r => r && this.createGraph(r)}
+                style={{ position: 'absolute', width: '100%', height: '100%' }}
+                onPointerDown={e => {
+                    e.stopPropagation();
+                    setupMoveUpEvents(
+                        this,
+                        e,
+                        returnFalse,
+                        action(() => {
+                            if (this._plot?.options.xAxis?.domain) {
+                                this.Document.xRange = new List<number>(this._plot.options.xAxis.domain);
+                            }
+                            if (this._plot?.options.yAxis?.domain) {
+                                this.Document.yRange = new List<number>(this._plot.options.yAxis.domain);
+                            }
+                        }),
+                        emptyFunction,
+                        false,
+                        false
+                    );
+                }}
+            />
+        );
     }
     render() {
         TraceMobx();
-- 
cgit v1.2.3-70-g09d2