From bf6d1973cc81ba695afcca102c7229608faaa7e6 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 27 Mar 2024 11:02:57 -0400
Subject: changed dashFieldViews to support Tab'ing between other
 dashFieldviews, changed deleting links to clear out the anchors so that
 linkBoxes will go away more easiliy.  changed funcitonPlot to plot the
 equations that are linked to it.  changed equations to link to functions.
 changed undo and other console logging to only happen when undo docked
 buttons are expanded (visible)

---
 src/client/views/nodes/FunctionPlotBox.tsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 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 2e7a2120e..67445e552 100644
--- a/src/client/views/nodes/FunctionPlotBox.tsx
+++ b/src/client/views/nodes/FunctionPlotBox.tsx
@@ -7,12 +7,13 @@ import { List } from '../../../fields/List';
 import { listSpec } from '../../../fields/Schema';
 import { Cast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
-import { Docs } from '../../documents/Documents';
+import { DocUtils, Docs } from '../../documents/Documents';
 import { DragManager } from '../../util/DragManager';
 import { undoBatch } from '../../util/UndoManager';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { FieldView, FieldViewProps } from './FieldView';
 import { PinProps, PresBox } from './trails';
+import { LinkManager } from '../../util/LinkManager';
 
 @observer
 export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@@ -33,7 +34,7 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
     componentDidMount() {
         this._props.setContentViewBox?.(this);
         reaction(
-            () => [DocListCast(this.dataDoc[this.fieldKey]).map(doc => doc?.text), this.layoutDoc.width, this.layoutDoc.height, this.layoutDoc.xRange, this.layoutDoc.yRange],
+            () => [this.graphFuncs, this.layoutDoc.width, this.layoutDoc.height, this.layoutDoc.xRange, this.layoutDoc.yRange],
             () => this.createGraph()
         );
     }
@@ -45,11 +46,17 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
         if (addAsAnnotation) this.addDocument(anchor);
         return anchor;
     };
+    @computed get graphFuncs() {
+        const links = LinkManager.Instance.getAllRelatedLinks(this.Document)
+            .map(d => LinkManager.getOppositeAnchor(d, this.Document))
+            .filter(d => d)
+            .map(d => d!);
+        return links.concat(DocListCast(this.dataDoc[this.fieldKey])).map(doc => StrCast(doc.text, 'x^2').replace(/\\frac\{(.*)\}\{(.*)\}/, '($1/$2)'));
+    }
     createGraph = (ele?: HTMLDivElement) => {
         this._plotEle = ele || this._plotEle;
         const width = this._props.PanelWidth();
         const height = this._props.PanelHeight();
-        const fns = DocListCast(this.dataDoc.data).map(doc => StrCast(doc.text, 'x^2').replace(/\\frac\{(.*)\}\{(.*)\}/, '($1/$2)'));
         try {
             this._plotEle.children.length && this._plotEle.removeChild(this._plotEle.children[0]);
             this._plot = functionPlot({
@@ -59,7 +66,7 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
                 xAxis: { domain: Cast(this.layoutDoc.xRange, listSpec('number'), [-10, 10]) },
                 yAxis: { domain: Cast(this.layoutDoc.yRange, listSpec('number'), [-1, 9]) },
                 grid: true,
-                data: fns.map(fn => ({
+                data: this.graphFuncs.map(fn => ({
                     fn,
                     // derivative: { fn: "2 * x", updateOnMouseMove: true }
                 })),
@@ -72,7 +79,14 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
     @undoBatch
     drop = (e: Event, de: DragManager.DropEvent) => {
         if (de.complete.docDragData?.droppedDocuments.length) {
-            const added = de.complete.docDragData.droppedDocuments.reduce((res, doc) => res && Doc.AddDocToList(this.dataDoc, this._props.fieldKey, doc), true);
+            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' });
+                    link && this._props.addDocument?.(link);
+                }
+                return res;
+            }, true);
             !added && e.preventDefault();
             e.stopPropagation(); // prevent parent Doc from registering new position so that it snaps back into place
             return added;
@@ -104,7 +118,7 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
                 {this.theGraph}
                 <div
                     style={{
-                        display: this._props.isSelected() ? 'none' : undefined,
+                        display: this._props.isContentActive() ? 'none' : undefined,
                         position: 'absolute',
                         width: '100%',
                         height: '100%',
-- 
cgit v1.2.3-70-g09d2


From 0772ae0522be1fde19362ab7bb0808e13b4f382c Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 29 Mar 2024 00:16:58 -0400
Subject: fixed equation box resizing to stay in place. fixedlightbox to have a
 black foreground color so equations can be seen. fixed function plots to
 translate more of the math syntax

---
 src/client/views/LightboxView.scss         |  1 +
 src/client/views/LightboxView.tsx          |  1 -
 src/client/views/nodes/EquationBox.tsx     |  9 ++++-----
 src/client/views/nodes/FunctionPlotBox.tsx | 11 ++++++++++-
 4 files changed, 15 insertions(+), 7 deletions(-)

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

diff --git a/src/client/views/LightboxView.scss b/src/client/views/LightboxView.scss
index 9a9b8a437..6da5c0338 100644
--- a/src/client/views/LightboxView.scss
+++ b/src/client/views/LightboxView.scss
@@ -67,6 +67,7 @@
     z-index: 1000;
     .lightboxView-contents {
         position: absolute;
+        color: black;
     }
     .lightboxView-navBtn-frame {
         position: absolute;
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 1f0b8e387..be7c22c9f 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -244,7 +244,6 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
                         height: this.lightboxHeight(),
                         clipPath: `path('${Doc.UserDoc().renderStyle === 'comic' ? wavyBorderPath(this.lightboxWidth(), this.lightboxHeight()) : undefined}')`,
                         background: SettingsManager.userBackgroundColor,
-                        color: SettingsManager.userColor,
                     }}>
                     <GestureOverlay isActive={true}>
                         <DocumentView
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index 8362db37a..c43f89be1 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -81,7 +81,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 backgroundColor: 'white',
             });
             const link = DocUtils.MakeLink(this.Document, graph, { link_relationship: 'function', link_description: 'input' });
-            //this._props.addDocument?.(graph);
+            this._props.addDocument?.(graph);
             link && this._props.addDocument?.(link);
             e.stopPropagation();
         }
@@ -96,11 +96,10 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
             if (this.layoutDoc._nativeWidth) {
                 // if equation has been scaled then editing the expression must also edit the native dimensions to keep the aspect ratio
                 const prevNwidth = NumCast(this.layoutDoc._nativeWidth);
-                const prevNheight = NumCast(this.layoutDoc._nativeHeight);
-                this.layoutDoc._nativeWidth = Math.max(35, Number(style.width.replace('px', '')));
-                this.layoutDoc._nativeHeight = Math.max(25, Number(style.height.replace('px', '')));
+                const newNwidth = (this.layoutDoc._nativeWidth = Math.max(35, Number(style.width.replace('px', ''))));
+                const newNheight = (this.layoutDoc._nativeHeight = Math.max(25, Number(style.height.replace('px', ''))));
                 this.layoutDoc._width = (NumCast(this.layoutDoc._width) * NumCast(this.layoutDoc._nativeWidth)) / prevNwidth;
-                this.layoutDoc._height = (NumCast(this.layoutDoc._height) * NumCast(this.layoutDoc._nativeHeight)) / prevNheight;
+                this.layoutDoc._height = (NumCast(this.layoutDoc._width) * newNheight) / newNwidth;
             } else {
                 this.layoutDoc._width = Math.max(35, Number(style.width.replace('px', '')));
                 this.layoutDoc._height = Math.max(25, Number(style.height.replace('px', '')));
diff --git a/src/client/views/nodes/FunctionPlotBox.tsx b/src/client/views/nodes/FunctionPlotBox.tsx
index 67445e552..a86bdbd79 100644
--- a/src/client/views/nodes/FunctionPlotBox.tsx
+++ b/src/client/views/nodes/FunctionPlotBox.tsx
@@ -51,7 +51,16 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
             .map(d => LinkManager.getOppositeAnchor(d, this.Document))
             .filter(d => d)
             .map(d => d!);
-        return links.concat(DocListCast(this.dataDoc[this.fieldKey])).map(doc => StrCast(doc.text, 'x^2').replace(/\\frac\{(.*)\}\{(.*)\}/, '($1/$2)'));
+        const funcs = links.concat(DocListCast(this.dataDoc[this.fieldKey])).map(doc =>
+            StrCast(doc.text, 'x^2')
+                .replace(/\\sqrt/g, 'sqrt')
+                .replace(/\\frac\{(.*)\}\{(.*)\}/g, '($1/$2)')
+                .replace(/\\left/g, '')
+                .replace(/\\right/g, '')
+                .replace(/\{/g, '')
+                .replace(/\}/g, '')
+        );
+        return funcs;
     }
     createGraph = (ele?: HTMLDivElement) => {
         this._plotEle = ele || this._plotEle;
-- 
cgit v1.2.3-70-g09d2

