From 956628a22c2d8ae21eb76c70f8f0a5a4edc9ae75 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 10 Feb 2022 17:12:19 -0500
Subject: switched scripts to use a cache to avoid recompiling. simplified some
 things with documentView and zooming to avoid invalidations.

---
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  11 +-
 src/client/views/nodes/DocumentLinksButton.scss    |   4 +-
 src/client/views/nodes/DocumentLinksButton.tsx     |  27 ++--
 src/client/views/nodes/DocumentView.scss           |   5 +-
 src/client/views/nodes/DocumentView.tsx            |  33 +++--
 src/client/views/nodes/KeyValueBox.tsx             |   2 +-
 src/client/views/nodes/WebBox.tsx                  |  72 ++++++-----
 src/client/views/nodes/button/FontIconBox.tsx      | 139 +++++++++------------
 8 files changed, 133 insertions(+), 160 deletions(-)

(limited to 'src/client/views')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 28a65f628..d8ba88c02 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, trace } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, Opt } from "../../../fields/Doc";
 import { Document } from "../../../fields/documentSchemas";
@@ -154,14 +154,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     returnThis = () => this;
     render() {
         TraceMobx();
-
-        const panx = this.props.CollectionFreeFormView.panX();
-        const pany = this.props.CollectionFreeFormView.panY();
-        const viewWidth = this.props.CollectionFreeFormView.props.PanelWidth() / this.props.CollectionFreeFormView.zoomScaling() / 2;
-        const viewHeight = this.props.CollectionFreeFormView.props.PanelHeight() / this.props.CollectionFreeFormView.zoomScaling() / 2;
-        const hideContent = !this.props.CollectionFreeFormView.props.isAnnotationOverlay &&
-            (Math.min(Math.abs(panx - (this.X + this.panelWidth())), Math.abs(panx - (this.X))) > viewWidth ||
-                Math.min(Math.abs(pany - (this.Y + this.panelHeight())), Math.abs(pany - (this.Y))) > viewHeight) ? true : false;
         const divProps: DocumentViewProps = {
             ...this.props,
             CollectionFreeFormDocumentView: this.returnThis,
@@ -170,7 +162,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             ScreenToLocalTransform: this.screenToLocalTransform,
             PanelWidth: this.panelWidth,
             PanelHeight: this.panelHeight,
-            hideContent
         };
         const background = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         const mixBlendMode = StrCast(this.layoutDoc.mixBlendMode) as any || (typeof background === "string" && DashColor(background).alpha() !== 1 ? "multiply" : undefined);
diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss
index 228e1bdcb..9ab3171d3 100644
--- a/src/client/views/nodes/DocumentLinksButton.scss
+++ b/src/client/views/nodes/DocumentLinksButton.scss
@@ -1,6 +1,8 @@
 @import "../global/globalCssVariables.scss";
 
-
+.documentLinksButton-wrapper {
+    transform-origin: top left;
+}
 .documentLinksButton-menu {
     width: 100%;
     height: 100%;
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 93cd02d93..eb5571d16 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -20,6 +20,7 @@ import { DocumentView } from "./DocumentView";
 import { LinkDescriptionPopup } from "./LinkDescriptionPopup";
 import { TaskCompletionBox } from "./TaskCompletedBox";
 import React = require("react");
+import { Transform } from "../../util/Transform";
 
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
@@ -31,6 +32,8 @@ interface DocumentLinksButtonProps {
     AlwaysOn?: boolean;
     InMenu?: boolean;
     StartLink?: boolean; //whether the link HAS been started (i.e. now needs to be completed)
+    ScreenToLocalTransform: () => Transform;
+    ContentScaling?: () => number;
 }
 @observer
 export class DocumentLinksButton extends React.Component<DocumentLinksButtonProps, {}> {
@@ -302,16 +305,18 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         const title = this.props.InMenu ? menuTitle : buttonTitle;
 
         //render circular tooltip if it isn't set to invisible and show the number of doc links the node has, and render inner-menu link button for starting/stopping links if currently in menu
-        return !Array.from(this.filteredLinks).length && !this.props.AlwaysOn ? (null) :
-            this.props.InMenu && (DocumentLinksButton.StartLink || this.props.StartLink) ?
-                <Tooltip title={<div className="dash-tooltip">{title}</div>}>
-                    {this.linkButtonInner}
-                </Tooltip>
-                :
-                !DocumentLinksButton.LinkEditorDocView && !this.props.InMenu ?
-                    <Tooltip title={<div className="dash-tooltip">{title}</div>}>
-                        {this.linkButtonInner}
-                    </Tooltip>
-                    : this.linkButtonInner;
+        return (!Array.from(this.filteredLinks).length && !this.props.AlwaysOn) || !this.props.ScreenToLocalTransform ? (null) :
+            <div className="documentLinksButton-wrapper" style={{
+                //transform: `scale(${Math.min(1, this.props.ScreenToLocalTransform().scale(this.props.ContentScaling?.() || 1).Scale)})`
+            }}>
+                {
+                    (this.props.InMenu && (DocumentLinksButton.StartLink || this.props.StartLink)) ||
+                        (!DocumentLinksButton.LinkEditorDocView && !this.props.InMenu) ?
+                        <Tooltip title={<div className="dash-tooltip">{title}</div>}>
+                            {this.linkButtonInner}
+                        </Tooltip>
+                        : this.linkButtonInner
+                }
+            </div>;
     }
 }
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 9fcd45e72..4565f8504 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -58,9 +58,10 @@
     .documentView-audioBackground {
         display: inline-block;
         width: 10%;
+        height: 25;
         position: absolute;
-        top: 0px;
-        left: 0px;
+        top: 10px;
+        left: 10px;
         border-radius: 25px;
         background: white;
         opacity: 0.3;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a83fba37d..19b16f071 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
+import { action, computed, IReactionDisposer, observable, reaction, runInAction, trace } from "mobx";
 import { observer } from "mobx-react";
 import { AclAdmin, AclEdit, AclPrivate, DataSym, Doc, DocListCast, Field, Opt, StrListCast } from "../../../fields/Doc";
 import { Document } from '../../../fields/documentSchemas';
@@ -148,7 +148,6 @@ export interface DocumentViewSharedProps {
 export interface DocumentViewProps extends DocumentViewSharedProps {
     // properties specific to DocumentViews but not to FieldView
     freezeDimensions?: boolean;
-    hideContent?: boolean; // whether to show content or not (used to speed up rendering complex scenes when documents are not in view)
     hideResizeHandles?: boolean; // whether to suppress DocumentDecorations when this document is selected
     hideTitle?: boolean;  // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
     hideDecorationTitle?: boolean;  // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
@@ -488,6 +487,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 const func = () => this.onClickHandler.script.run({
                     this: this.layoutDoc,
                     self: this.rootDoc,
+                    _readOnly_: false,
                     scriptContext: this.props.scriptContext,
                     thisContainer: this.props.ContainingCollectionDoc,
                     documentView: this.props.DocumentView(),
@@ -840,13 +840,9 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     }
     @computed get contents() {
         TraceMobx();
-        const thumb = ImageCast(this.layoutDoc["thumb-frozen"], ImageCast(this.layoutDoc["thumb"]))?.url.href;
+        const thumb = ImageCast(this.layoutDoc["thumb-frozen"], ImageCast(this.layoutDoc.thumb))?.url.href;
         const audioView = !this.layoutDoc._showAudio ? (null) :
-            <div className="documentView-audioBackground"
-                onPointerDown={this.recordAudioAnnotation}
-                onPointerEnter={this.onPointerEnter}
-                style={{ height: 25, position: "absolute", top: 10, left: 10 }}
-            >
+            <div className="documentView-audioBackground" onPointerDown={this.recordAudioAnnotation} onPointerEnter={this.onPointerEnter} >
                 <FontAwesomeIcon className="documentView-audioFont"
                     style={{ color: [DocListCast(this.dataDoc[this.LayoutFieldKey + "-audioAnnotations"]).length ? "blue" : "gray", "green", "red"][this._mediaState] }}
                     icon={!DocListCast(this.dataDoc[this.LayoutFieldKey + "-audioAnnotations"]).length ? "microphone" : "file-audio"} size="sm" />
@@ -872,11 +868,12 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 <img style={{ background: "white", top: 0, position: "absolute" }} src={thumb}// + '?d=' + (new Date()).getTime()}
                     width={this.props.PanelWidth()} height={this.props.PanelHeight()} />}
             {this.layoutDoc.hideAllLinks ? (null) : this.allLinkEndpoints}
-            {this.hideLinkButton || this.props.renderDepth === -1 ? (null) :
-                <div style={{ transformOrigin: "top left", transform: `scale(${Math.min(1, this.props.ScreenToLocalTransform().scale(this.props.ContentScaling?.() || 1).Scale)})` }}>
-                    <DocumentLinksButton View={this.props.DocumentView()} Offset={[this.topMost ? 0 : -15, undefined, undefined, this.topMost ? 10 : -20]} />
-                </div>}
-
+            {this.hideLinkButton || this.props.renderDepth === -1 || SnappingManager.GetIsDragging() ? (null) :
+                <DocumentLinksButton View={this.props.DocumentView()}
+                    ContentScaling={this.props.ContentScaling}
+                    ScreenToLocalTransform={this.props.ScreenToLocalTransform}
+                    Offset={[this.topMost ? 0 : -15, undefined, undefined, this.topMost ? 10 : -20]} />
+            }
             {audioView}
         </div>;
     }
@@ -1088,7 +1085,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         highlighting = highlighting && this.props.focus !== emptyFunction && this.layoutDoc.title !== "[pres element template]";  // bcz: hack to turn off highlighting onsidebar panel documents.  need to flag a document as not highlightable in a more direct way
 
         const borderPath = this.props.styleProvider?.(this.props.Document, this.props, StyleProp.BorderPath) || { path: undefined };
-        const internal = this.props.hideContent ? (null) : PresBox.EffectsProvider(this.layoutDoc, this.renderDoc) || this.renderDoc;
+        const internal = PresBox.EffectsProvider(this.layoutDoc, this.renderDoc) || this.renderDoc;
         const boxShadow = this.props.treeViewDoc ? null : highlighting && this.borderRounding && highlightStyle !== "dashed" ? `0 0 0 ${highlightIndex}px ${highlightColor}` :
             this.boxShadow || (this.props.Document.isTemplateForField ? "black 0.2vw 0.2vw 0.8vw" : undefined);
 
@@ -1180,10 +1177,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
         return this.props.PanelHeight();
     }
-    @computed get Xshift() { return this.effectiveNativeWidth ? (this.props.PanelWidth() - this.effectiveNativeWidth * this.nativeScaling) / 2 : 0; }
-    @computed get Yshift() { return this.effectiveNativeWidth && this.effectiveNativeHeight && Math.abs(this.Xshift) < 0.001 ? (this.props.PanelHeight() - this.effectiveNativeHeight * this.nativeScaling) / 2 : 0; }
-    @computed get centeringX() { return this.props.dontCenter?.includes("x") ? 0 : this.Xshift; }
-    @computed get centeringY() { return this.fitWidth || this.props.dontCenter?.includes("y") ? 0 : this.Yshift; }
+    @computed get Xshift() { return 0; } //this.effectiveNativeWidth ? (this.props.PanelWidth() - this.effectiveNativeWidth * this.nativeScaling) / 2 : 0; }
+    @computed get Yshift() { return 0; }//this.effectiveNativeWidth && this.effectiveNativeHeight && Math.abs(this.Xshift) < 0.001 ? (this.props.PanelHeight() - this.effectiveNativeHeight * this.nativeScaling) / 2 : 0; }
+    @computed get centeringX() { return 0; }//this.props.dontCenter?.includes("x") ? 0 : this.Xshift; }
+    @computed get centeringY() { return 0; }//this.fitWidth || this.props.dontCenter?.includes("y") ? 0 : this.Yshift; }
 
     toggleNativeDimensions = () => this.docView && Doc.toggleNativeDimensions(this.layoutDoc, this.docView.ContentScale, this.props.PanelWidth(), this.props.PanelHeight());
     focus = (doc: Doc, options?: DocFocusOptions) => this.docView?.focus(doc, options);
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 111509fdb..c44c8c828 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -58,7 +58,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         value = eq ? value.substr(1) : value;
         const dubEq = value.startsWith(":=") ? "computed" : value.startsWith(";=") ? "script" : false;
         value = dubEq ? value.substr(2) : value;
-        const options: ScriptOptions = { addReturn: true, params: { this: "Doc", _last_: "any" }, editable: false };
+        const options: ScriptOptions = { addReturn: true, params: { this: Doc.name, self: Doc.name, _last_: "any", _readOnly_: "boolean" }, editable: false };
         if (dubEq) options.typecheck = false;
         const script = CompileScript(value, options);
         return !script.compiled ? undefined : { script, type: dubEq, onDelegate: eq };
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index a1910c722..30f905738 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -10,7 +10,7 @@ import { InkTool } from "../../../fields/InkField";
 import { List } from "../../../fields/List";
 import { listSpec, makeInterface } from "../../../fields/Schema";
 import { ComputedField } from "../../../fields/ScriptField";
-import { Cast, NumCast, StrCast, WebCast, ImageCast } from "../../../fields/Types";
+import { Cast, NumCast, StrCast, WebCast, ImageCast, BoolCast } from "../../../fields/Types";
 import { WebField, ImageField } from "../../../fields/URLField";
 import { TraceMobx } from "../../../fields/util";
 import { emptyFunction, getWordAtPoint, OmitKeys, returnFalse, returnOne, setupMoveUpEvents, smoothScroll, Utils } from "../../../Utils";
@@ -106,13 +106,13 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return true;
     }
     async componentDidMount() {
-        this.props.setContentView?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
+        this.props.setContentView?.(this); // this tells the DocumentView that this WebBox is the "content" of the document.  this allows the DocumentView to call WebBox relevant methods to configure the UI (eg, show back/forward buttons)
 
         runInAction(() => {
             this._annotationKeySuffix = () => this._urlHash + "-annotations";
             // bcz: need to make sure that doc.data-annotations points to the currently active web page's annotations (this could/should be when the doc is created)
-            this.dataDoc[this.fieldKey + "-annotations"] = ComputedField.GetAnnoCopyField(this.fieldKey);
-            this.dataDoc[this.fieldKey + "-sidebar"] = ComputedField.GetSidebarCopyField(this.fieldKey);
+            this.dataDoc[this.fieldKey + "-annotations"] = ComputedField.MakeFunction(`copyField(this["${this.fieldKey}-"+urlHash(this["${this.fieldKey}"]?.url?.toString())+"-annotations"`);
+            this.dataDoc[this.fieldKey + "-sidebar"] = ComputedField.MakeFunction(`copyField(this["${this.fieldKey}-"+urlHash(this["${this.fieldKey}"]?.url?.toString())+"-sidebar"`);
         });
         reaction(() => this.props.isSelected(),
             async (selected) => {
@@ -388,42 +388,46 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
     }
 
-    @action
-    forward = () => {
+    forward = (checkAvailable?: boolean) => {
         const future = Cast(this.dataDoc[this.fieldKey + "-future"], listSpec("string"), []);
         const history = Cast(this.dataDoc[this.fieldKey + "-history"], listSpec("string"), []);
-        if (future.length) {
-            const curUrl = this._url;
-            this.dataDoc[this.fieldKey + "-history"] = new List<string>([...history, this._url]);
-            this.dataDoc[this.fieldKey] = new WebField(new URL(future.pop()!));
-            if (this._webUrl === this._url) {
-                this._webUrl = curUrl;
-                setTimeout(action(() => this._webUrl = this._url));
-            } else {
-                this._webUrl = this._url;
+        if (checkAvailable) return future.length;
+        runInAction(() => {
+            if (future.length) {
+                const curUrl = this._url;
+                this.dataDoc[this.fieldKey + "-history"] = new List<string>([...history, this._url]);
+                this.dataDoc[this.fieldKey] = new WebField(new URL(future.pop()!));
+                if (this._webUrl === this._url) {
+                    this._webUrl = curUrl;
+                    setTimeout(action(() => this._webUrl = this._url));
+                } else {
+                    this._webUrl = this._url;
+                }
+                return true;
             }
-            return true;
-        }
+        });
         return false;
     }
 
-    @action
-    back = () => {
+    back = (checkAvailable?: boolean) => {
         const future = Cast(this.dataDoc[this.fieldKey + "-future"], listSpec("string"));
         const history = Cast(this.dataDoc[this.fieldKey + "-history"], listSpec("string"), []);
-        if (history.length) {
-            const curUrl = this._url;
-            if (future === undefined) this.dataDoc[this.fieldKey + "-future"] = new List<string>([this._url]);
-            else this.dataDoc[this.fieldKey + "-future"] = new List<string>([...future, this._url]);
-            this.dataDoc[this.fieldKey] = new WebField(new URL(history.pop()!));
-            if (this._webUrl === this._url) {
-                this._webUrl = curUrl;
-                setTimeout(action(() => this._webUrl = this._url));
-            } else {
-                this._webUrl = this._url;
+        if (checkAvailable) return history.length;
+        runInAction(() => {
+            if (history.length) {
+                const curUrl = this._url;
+                if (future === undefined) this.dataDoc[this.fieldKey + "-future"] = new List<string>([this._url]);
+                else this.dataDoc[this.fieldKey + "-future"] = new List<string>([...future, this._url]);
+                this.dataDoc[this.fieldKey] = new WebField(new URL(history.pop()!));
+                if (this._webUrl === this._url) {
+                    this._webUrl = curUrl;
+                    setTimeout(action(() => this._webUrl = this._url));
+                } else {
+                    this._webUrl = this._url;
+                }
+                return true;
             }
-            return true;
-        }
+        });
         return false;
     }
 
@@ -487,8 +491,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     <button className="submitUrl" onClick={() => this.submitURL(this._keyInput.current!.value)} onDragOver={e => e.stopPropagation()} onDrop={this.onWebUrlDrop}>
                         GO
                     </button>
-                    <button className="submitUrl" onClick={this.back}> <FontAwesomeIcon icon="caret-left" size="lg" /> </button>
-                    <button className="submitUrl" onClick={this.forward}> <FontAwesomeIcon icon="caret-right" size="lg" />  </button>
+                    <button className="submitUrl" onClick={() => this.back}> <FontAwesomeIcon icon="caret-left" size="lg" /> </button>
+                    <button className="submitUrl" onClick={() => this.forward}> <FontAwesomeIcon icon="caret-right" size="lg" />  </button>
                 </div>
             </div>
         );
@@ -699,7 +703,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 pointerEvents={this._isAnnotating || SnappingManager.GetIsDragging() ? "all" : "none"} />;
         return (
             <div className="webBox" ref={this._mainCont}
-                style={{ pointerEvents: this.pointerEvents() }} >
+                style={{ pointerEvents: this.pointerEvents(), display: !this.props.isSelected() && !this.isAnyChildContentActive() ? "none" : undefined }} >
                 <div hidden={!this.props.isSelected() && !this.isAnyChildContentActive() ? true : false}
                     className={`webBox-container`} style={{ pointerEvents }} onContextMenu={this.specificContextMenu}>
                     <div className={"webBox-outerContent"} ref={this._outerRef}
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index bd103dcf7..91365121f 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -1,7 +1,7 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
-import { action, computed, observable } from 'mobx';
+import { action, computed, observable, trace } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { ColorState, SketchPicker } from 'react-color';
@@ -9,7 +9,7 @@ import { Doc, StrListCast, WidthSym, HeightSym } from '../../../../fields/Doc';
 import { InkTool } from '../../../../fields/InkField';
 import { createSchema, makeInterface } from '../../../../fields/Schema';
 import { ScriptField } from '../../../../fields/ScriptField';
-import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
+import { BoolCast, Cast, NumCast, StrCast, ScriptCast } from '../../../../fields/Types';
 import { WebField } from '../../../../fields/URLField';
 import { DocumentType } from '../../../documents/DocumentTypes';
 import { Scripting } from "../../../util/Scripting";
@@ -105,16 +105,11 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
      */
     @computed get numberButton() {
         const numBtnType: string = StrCast(this.rootDoc.numBtnType);
-        const setValue = (value: number) => {
-            // Script for running the toggle
-            const script: string = StrCast(this.rootDoc.script) + "(" + value + ")";
-            ScriptField.MakeScript(script)?.script.run();
-        };
+        const numScript = ScriptCast(this.rootDoc.script);
+        const setValue = (value: number) => numScript?.script.run({ value, _readOnly_: false });
 
         // Script for checking the outcome of the toggle
-        const checkScript: string = StrCast(this.rootDoc.script) + "(0, true)";
-        const checkResult: number = ScriptField.MakeScript(checkScript)?.script.run().result || 0;
-
+        const checkResult: number = numScript?.script.run({ value: 0, _readOnly_: true }).result || 0;
 
         if (numBtnType === NumButtonType.Slider) {
             const dropdown =
@@ -237,34 +232,37 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
 
-        const script: string = StrCast(this.rootDoc.script);
+        const script = ScriptCast(this.rootDoc.script);
 
         let noviceList: string[] = [];
         let text: string | undefined;
         let dropdown = true;
         let icon: IconProp = "caret-down";
-
-        if (script === 'setView') {
-            const selected = SelectionManager.Docs().lastElement();
-            if (selected) {
-                if (StrCast(selected.type) === DocumentType.COL) {
-                    text = StrCast(selected._viewType);
+        try {
+            if (script.script.originalScript.startsWith('setView')) {
+                const selected = SelectionManager.Docs().lastElement();
+                if (selected) {
+                    if (StrCast(selected.type) === DocumentType.COL) {
+                        text = StrCast(selected._viewType);
+                    } else {
+                        dropdown = false;
+                        text = selected.type === DocumentType.RTF ? "Text" : StrCast(selected.type);
+                        icon = Doc.toIcon(selected);
+                    }
                 } else {
                     dropdown = false;
-                    text = selected.type === DocumentType.RTF ? "Text" : StrCast(selected.type);
-                    icon = Doc.toIcon(selected);
+                    icon = "globe-asia";
+                    text = "User Default";
                 }
-            } else {
-                dropdown = false;
-                icon = "globe-asia";
-                text = "User Default";
+                noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking];
+            } else if (script.script.originalScript.startsWith('setFont')) {
+                const editorView = RichTextMenu.Instance?.TextView?.EditorView;
+                text = StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
+                noviceList = ["Roboto", "Times New Roman", "Arial", "Georgia",
+                    "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
             }
-            noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking];
-        } else if (script === 'setFont') {
-            const editorView = RichTextMenu.Instance?.TextView?.EditorView;
-            text = StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
-            noviceList = ["Roboto", "Times New Roman", "Arial", "Georgia",
-                "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
+        } catch (e) {
+            console.log(e);
         }
 
         // Get items to place into the list
@@ -272,18 +270,12 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
             if (Doc.UserDoc().noviceMode && !noviceList.includes(value)) {
                 return;
             }
-            const click = () => {
-                const s = ScriptField.MakeScript(script + '("' + value + '")');
-                if (s) {
-                    s.script.run().result;
-                }
-            };
             return <div className="list-item" key={`${value}`}
                 style={{
-                    fontFamily: script === 'setFont' ? value : undefined,
+                    fontFamily: script.script.originalScript.startsWith('setFont') ? value : undefined,
                     backgroundColor: value === text ? Colors.LIGHT_BLUE : undefined
                 }}
-                onClick={click}>
+                onClick={() => script.script.run({ value }).result}>
                 {value[0].toUpperCase() + value.slice(1)}
             </div>;
         });
@@ -319,15 +311,12 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
     }
 
     @observable colorPickerClosed: boolean = true;
-    @computed get colorScript() {
-        const script = StrCast(this.rootDoc.script);
-        return ScriptField.MakeScript(script + '(colValue, checkResult)', { colValue: "string", checkResult: "boolean" });
-    }
+    @computed get colorScript() { return ScriptCast(this.rootDoc.script); }
 
     colorPicker = (curColor: string) => {
         const change = (value: ColorState) => {
             const s = this.colorScript;
-            s && undoBatch(() => s.script.run({ colValue: Utils.colorString(value), checkResult: false }).result)();
+            s && undoBatch(() => s.script.run({ value: Utils.colorString(value), _readOnly_: false }).result)();
         };
         const presets = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
             '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
@@ -343,7 +332,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
     @computed get colorButton() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-        const curColor = this.colorScript?.script.run({ colValue: undefined, checkResult: true }).result ?? "transparent";
+        const curColor = this.colorScript?.script.run({ value: undefined, _readOnly_: true }).result ?? "transparent";
 
         const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
             <div className="fontIconBox-label" style={{ color, backgroundColor, position: "absolute" }}>
@@ -439,52 +428,34 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
 
     @computed get editableText() {
         // Script for running the toggle
-        const script: string = StrCast(this.rootDoc.script);
-
-        // Script for checking the outcome of the toggle
-        const checkScript: string = StrCast(this.rootDoc.script) + "('', true)";
-
+        const script = ScriptCast(this.rootDoc.script);
         // Function to run the script
-        const checkResult = ScriptField.MakeScript(checkScript)?.script.run().result;
+        const checkResult = script?.script.run({ value: "", _readOnly_: true }).result;
 
-        const setValue = (value: string, shiftDown?: boolean): boolean => {
-            ScriptField.MakeScript(script + "('" + value + "')")?.script.run();
-            return true;
-        };
+        const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ value, _readOnly_: false }).result;
         return (
             <div className="menuButton editableText">
                 <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"lock"} />
                 <div style={{ width: "calc(100% - .875em)", paddingLeft: "4px" }}>
-                    <EditableView GetValue={() => checkResult} SetValue={setValue} contents={checkResult} />
+                    <EditableView GetValue={() => script?.script.run({ value: "", _readOnly_: true }).result} SetValue={setValue} contents={checkResult} />
                 </div>
             </div>
         );
     }
 
-
     render() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-
         const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
-            <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
+            <div className="fontIconBox-label" style={{ color, backgroundColor, position: "absolute" }}>
                 {this.label}
             </div>;
 
         const menuLabel = !this.label || !Doc.UserDoc()._showMenuLabel ? (null) :
-            <div className="fontIconBox-label" style={{ color: color, backgroundColor: "transparent" }}>
+            <div className="fontIconBox-label" style={{ color, backgroundColor: "transparent" }}>
                 {this.label}
             </div>;
 
-        const buttonProps: IButtonProps = {
-            type: this.type,
-            rootDoc: this.rootDoc,
-            label: label,
-            backgroundColor: backgroundColor,
-            icon: this.icon,
-            color: color
-        };
-
         const buttonText = StrCast(this.rootDoc.buttonText);
 
         // TODO:glr Add label of button type
@@ -493,7 +464,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         switch (this.type) {
             case ButtonType.TextButton:
                 button = (
-                    <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor, opacity: 1, gridAutoColumns: `${NumCast(this.rootDoc._height)} auto` }}>
+                    <div className={`menuButton ${this.type}`} style={{ color, backgroundColor, opacity: 1, gridAutoColumns: `${NumCast(this.rootDoc._height)} auto` }}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {buttonText ?
                             <div className="button-text">
@@ -522,7 +493,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                 break;
             case ButtonType.ToolButton:
                 button = (
-                    <div className={`menuButton ${this.type}`} style={{ opacity: 1, backgroundColor: backgroundColor, color: color }}>
+                    <div className={`menuButton ${this.type}`} style={{ opacity: 1, backgroundColor, color }}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {label}
                     </div>
@@ -534,7 +505,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                 break;
             case ButtonType.ClickButton:
                 button = (
-                    <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor, opacity: 1 }}>
+                    <div className={`menuButton ${this.type}`} style={{ color, backgroundColor, opacity: 1 }}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {label}
                     </div>
@@ -544,7 +515,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                 const trailsIcon = <img src={`/assets/${"presTrails.png"}`}
                     style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? "0%" : "100%"})` }} />;
                 button = (
-                    <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor }}>
+                    <div className={`menuButton ${this.type}`} style={{ color, backgroundColor }}>
                         {this.icon === "pres-trail" ? trailsIcon : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />}
                         {menuLabel}
                         <FontIconBadge collection={Cast(this.rootDoc.watchedDocuments, Doc, null)} />
@@ -658,7 +629,7 @@ Scripting.addGlobal(function setBulletList(mapStyle: "bullet" | "decimal", check
 
 // toggle: Set overlay status of selected document
 Scripting.addGlobal(function setFontColor(color?: string, checkResult?: boolean) {
-    const editorView = RichTextMenu.Instance.TextView?.EditorView;
+    const editorView = RichTextMenu.Instance?.TextView?.EditorView;
 
     if (checkResult) {
         return editorView ? RichTextMenu.Instance.fontColor : Doc.UserDoc().fontColor;
@@ -687,12 +658,12 @@ Scripting.addGlobal(function setFontHighlight(color?: string, checkResult?: bool
 
 // toggle: Set overlay status of selected document
 Scripting.addGlobal(function setFontSize(size: string | number, checkResult?: boolean) {
-    if (typeof size === "number") size = size.toString();
-    if (size && Number(size).toString() === size) size += "px";
-    const editorView = RichTextMenu.Instance.TextView?.EditorView;
+    const editorView = RichTextMenu.Instance?.TextView?.EditorView;
     if (checkResult) {
         return (editorView ? RichTextMenu.Instance.fontSize : StrCast(Doc.UserDoc().fontSize, "10px")).replace("px", "");
     }
+    if (typeof size === "number") size = size.toString();
+    if (size && Number(size).toString() === size) size += "px";
     if (editorView) RichTextMenu.Instance.setFontSize(size);
     else Doc.UserDoc()._fontSize = size;
 });
@@ -810,17 +781,19 @@ Scripting.addGlobal(function webSetURL(url: string, checkResult?: boolean) {
         //selected.rootDoc.data = new WebField(url);
     }
 });
-Scripting.addGlobal(function webForward() {
-    const selected = SelectionManager.Views().lastElement();
-    if (selected?.rootDoc.type === DocumentType.WEB) {
-        (selected.ComponentView as WebBox).forward();
+Scripting.addGlobal(function webForward(checkResult?: boolean) {
+    const selected = (SelectionManager.Views().lastElement()?.ComponentView as WebBox);
+    if (checkResult) {
+        return selected?.forward(checkResult) ? undefined : "lightGray";
     }
+    selected?.forward();
 });
-Scripting.addGlobal(function webBack() {
-    const selected = SelectionManager.Views().lastElement();
-    if (selected?.rootDoc.type === DocumentType.WEB) {
-        (selected.ComponentView as WebBox).back();
+Scripting.addGlobal(function webBack(checkResult?: boolean) {
+    const selected = (SelectionManager.Views().lastElement()?.ComponentView as WebBox);
+    if (checkResult) {
+        return selected?.back(checkResult) ? undefined : "lightGray";
     }
+    selected?.back();
 });
 
 
-- 
cgit v1.2.3-70-g09d2