diff options
Diffstat (limited to 'src/client/views')
| -rw-r--r-- | src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 11 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentLinksButton.scss | 4 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentLinksButton.tsx | 27 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.scss | 5 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 33 | ||||
| -rw-r--r-- | src/client/views/nodes/KeyValueBox.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/WebBox.tsx | 72 | ||||
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 139 |
8 files changed, 133 insertions, 160 deletions
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(); }); |