From 0ed2f0d89efbf9830e95a06dbcaade136b5fe4d7 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 3 Mar 2021 11:24:54 -0500 Subject: added anchor for functionPlots --- src/client/views/nodes/FunctionPlotBox.tsx | 42 +++++++++++++++++++++++------- 1 file changed, 33 insertions(+), 9 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 dba08b506..ccbbb2364 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(EquationDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FunctionPlotBox, fieldKey); } public static GraphCount = 0; - _ref: React.RefObject = React.createRef(); _plot: any; _plotId = ""; + _plotEle: any; constructor(props: any) { super(props); this._plotId = "graph" + FunctionPlotBox.GraphCount++; } - createGraph = (ele: HTMLDivElement) => { + componentDidMount() { + this.props.setContentView?.(this); + reaction(() => [this.dataDoc.data, 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(Array.from(this._plot.options.xAxis.domain)); + anchor.yRange = new List(Array.from(this._plot.options.yAxis.domain)); + return anchor; + } + @action + scrollFocus = (doc: Doc, smooth: boolean) => { + this.dataDoc.xRange = new List(Array.from(Cast(doc.xRange, listSpec("number"), Cast(this.dataDoc.xRange, listSpec("number"), [-10, 10])))); + this.dataDoc.yRange = new List(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; 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, + 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 r && this.createGraph(r)} style={{ position: "absolute", width: "100%", height: "100%" }} onPointerDown={e => e.stopPropagation()} />; } -- cgit v1.2.3-70-g09d2 From 0fb14423e900f4c808ac2db882f6425ef1acf072 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 3 Mar 2021 11:32:42 -0500 Subject: from last --- src/client/views/nodes/FunctionPlotBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (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 ccbbb2364..bf49170f1 100644 --- a/src/client/views/nodes/FunctionPlotBox.tsx +++ b/src/client/views/nodes/FunctionPlotBox.tsx @@ -33,7 +33,7 @@ export class FunctionPlotBox extends ViewBoxBaseComponent [this.dataDoc.data, this.dataDoc.xRange, this.dataDoc.yRange], + reaction(() => [DocListCast(this.dataDoc.data).lastElement()?.text, this.dataDoc.xRange, this.dataDoc.yRange], () => this.createGraph()); } getAnchor = () => { -- cgit v1.2.3-70-g09d2 From 0bf64d5c4bfc62203fa0a024f994a32e23b0effd Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 3 Mar 2021 14:25:38 -0500 Subject: trying out a forked branch of equation editor. cleaned up warnings. --- package-lock.json | 5 ++--- package.json | 2 +- src/client/views/LightboxView.tsx | 2 +- src/client/views/collections/CollectionSubView.tsx | 2 +- src/client/views/collections/CollectionTreeView.tsx | 10 +--------- .../collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/FunctionPlotBox.tsx | 4 ++-- .../views/nodes/formattedText/ProsemirrorExampleTransfer.ts | 2 +- src/fields/util.ts | 2 +- 9 files changed, 11 insertions(+), 20 deletions(-) (limited to 'src/client/views/nodes/FunctionPlotBox.tsx') diff --git a/package-lock.json b/package-lock.json index 5c78f311e..f74368dd3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5674,9 +5674,8 @@ "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==" }, "equation-editor-react": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/equation-editor-react/-/equation-editor-react-0.0.6.tgz", - "integrity": "sha512-7Zsx04yh4DsirpMzMVnEaDwMxrpcjiAt6NOvSj+DEOa56VfKGXsmouWFOCtSVixahDSVEDs53LbhnPqFh4cVqw==", + "version": "github:bobzel/equation-editor-react#75915e852b4b36a6a4cd3e1cbc80598da6b65227", + "from": "github:bobzel/equation-editor-react#useLocally", "requires": { "jquery": "^3.4.1", "mathquill": "^0.10.1-a" diff --git a/package.json b/package.json index 9575de03a..5c456449d 100644 --- a/package.json +++ b/package.json @@ -153,7 +153,7 @@ "cookie-session": "^2.0.0-rc.1", "cors": "^2.8.5", "depcheck": "^0.9.2", - "equation-editor-react": "0.0.6", + "equation-editor-react": "github:bobzel/equation-editor-react#useLocally", "exif": "^0.6.0", "express": "^4.16.4", "express-flash": "0.0.2", diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index 3fc72c45c..9b14c180e 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -260,7 +260,7 @@ export class LightboxView extends React.Component { })}
{ e.stopPropagation(); LightboxView.LightboxDoc!._fitWidth = !LightboxView.LightboxDoc!._fitWidth }}> + onClick={e => { e.stopPropagation(); LightboxView.LightboxDoc!._fitWidth = !LightboxView.LightboxDoc!._fitWidth; }}>
; diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 639650b94..e5c835f39 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -230,7 +230,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: const dropped = dropCreator(this.props.isAnnotationOverlay ? this.rootDoc : undefined); this.addDocument(dropped); return dropped; - } + }; return true; } return false; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 9cc7b4649..7527a0c5a 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -1,15 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed } from "mobx"; import { observer } from "mobx-react"; -import { - DataSym, - Doc, - DocListCast, - HeightSym, - Opt, - WidthSym, - NativeWidth -} from '../../../fields/Doc'; +import { DataSym, Doc, DocListCast, HeightSym, Opt, WidthSym } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { Document } from '../../../fields/Schema'; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index af8ccb9c5..74f00d1b3 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -284,7 +284,7 @@ export class CollectionFreeFormView extends CollectionSubView { this._plotEle = ele || this._plotEle; - let width = this.props.PanelWidth(); - let height = this.props.PanelHeight(); + 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 { diff --git a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts index aa51a3a64..d5c77786c 100644 --- a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts +++ b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts @@ -146,7 +146,7 @@ export function buildKeymap>(schema: S, props: any, mapKey bind("Ctrl-m", (state: EditorState, dispatch: (tx: Transaction) => void) => { dispatch(state.tr.replaceSelectionWith(schema.nodes.equation.create({ fieldKey: "math" + Utils.GenerateGuid() }))); - }) + }); for (let i = 1; i <= 6; i++) { bind("Shift-Ctrl-" + i, setBlockType(schema.nodes.heading, { level: i })); diff --git a/src/fields/util.ts b/src/fields/util.ts index 36c765dd0..5d98971da 100644 --- a/src/fields/util.ts +++ b/src/fields/util.ts @@ -302,7 +302,7 @@ export function setter(target: any, in_prop: string | symbol | number, value: an } export function getter(target: any, in_prop: string | symbol | number, receiver: any): any { - let prop = in_prop; + const prop = in_prop; if (in_prop === AclSym) return target[AclSym]; if (in_prop === "toString" || (in_prop !== HeightSym && in_prop !== WidthSym && in_prop !== LayoutSym && typeof prop === "symbol")) return target.__fields[prop] || target[prop]; -- cgit v1.2.3-70-g09d2