diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/.DS_Store | bin | 6148 -> 8196 bytes | |||
| -rw-r--r-- | src/client/documents/Documents.ts | 5 | ||||
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 9 | ||||
| -rw-r--r-- | src/client/util/DropConverter.ts | 3 | ||||
| -rw-r--r-- | src/client/util/LinkManager.ts | 3 | ||||
| -rw-r--r-- | src/client/util/Scripting.ts | 27 | ||||
| -rw-r--r-- | src/client/views/EditableView.tsx | 9 | ||||
| -rw-r--r-- | src/client/views/GestureOverlay.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/OverlayView.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionDockingView.tsx | 3 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewChromes.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/ScriptingBox.scss | 188 | ||||
| -rw-r--r-- | src/client/views/nodes/ScriptingBox.tsx | 701 | ||||
| -rw-r--r-- | src/fields/ScriptField.ts | 2 | ||||
| -rw-r--r-- | src/server/database.ts | 1 |
15 files changed, 885 insertions, 73 deletions
diff --git a/src/.DS_Store b/src/.DS_Store Binary files differindex 5b35884bd..d2050d4be 100644 --- a/src/.DS_Store +++ b/src/.DS_Store diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 1a1d5c59e..38fe04534 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -723,6 +723,11 @@ export namespace Docs { } export function ButtonDocument(options?: DocumentOptions) { + // const btn = InstanceFromProto(Prototypes.get(DocumentType.BUTTON), undefined, { ...(options || {}), "onClick-rawScript": "-script-" }); + // btn.layoutKey = "layout_onClick"; + // btn.height = 250; + // btn.width = 200; + // btn.layout_onClick = ScriptingBox.LayoutString("onClick"); return InstanceFromProto(Prototypes.get(DocumentType.BUTTON), undefined, { ...(options || {}), "onClick-rawScript": "-script-" }); } diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 496099557..8509a1e64 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -736,6 +736,9 @@ export class CurrentUserUtils { } } -Scripting.addGlobal(function setupMobileInkingDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileInkingDoc(userDoc); }); -Scripting.addGlobal(function setupMobileUploadDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileUploadDoc(userDoc); }); -Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); });
\ No newline at end of file +Scripting.addGlobal(function setupMobileInkingDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileInkingDoc(userDoc); }, + "initializes the Mobile inking document", "(userDoc: Doc)"); +Scripting.addGlobal(function setupMobileUploadDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileUploadDoc(userDoc); }, + "initializes the Mobile upload document", "(userDoc: Doc)"); +Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); }, + "creates a new workspace when called");
\ No newline at end of file diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts index 752c1cfc5..ea1769d85 100644 --- a/src/client/util/DropConverter.ts +++ b/src/client/util/DropConverter.ts @@ -76,4 +76,5 @@ export function convertDropDataToButtons(data: DragManager.DocumentDragData) { data.droppedDocuments[i] = dbox; }); } -Scripting.addGlobal(function convertToButtons(dragData: any) { convertDropDataToButtons(dragData as DragManager.DocumentDragData); });
\ No newline at end of file +Scripting.addGlobal(function convertToButtons(dragData: any) { convertDropDataToButtons(dragData as DragManager.DocumentDragData); }, + "converts the dropped data to buttons", "(dragData: any)");
\ No newline at end of file diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts index 8e6ccf098..133f40d5a 100644 --- a/src/client/util/LinkManager.ts +++ b/src/client/util/LinkManager.ts @@ -211,4 +211,5 @@ export class LinkManager { } } -Scripting.addGlobal(function links(doc: any) { return new List(LinkManager.Instance.getAllRelatedLinks(doc)); });
\ No newline at end of file +Scripting.addGlobal(function links(doc: any) { return new List(LinkManager.Instance.getAllRelatedLinks(doc)); }, + "creates a link to inputted document", "(doc: any)");
\ No newline at end of file diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index ab577315c..817e6b29d 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -49,12 +49,25 @@ export function isCompileError(toBeDetermined: CompileResult): toBeDetermined is export namespace Scripting { export function addGlobal(global: { name: string }): void; export function addGlobal(name: string, global: any): void; - export function addGlobal(nameOrGlobal: any, global?: any) { - let n: string; + + export function addGlobal(global: { name: string }, decription?: string, params?: any): void; + + export function addGlobal(nameOrGlobal: any, global?: any, params?: any) { + let n: any; let obj: any; - if (global !== undefined && typeof nameOrGlobal === "string") { - n = nameOrGlobal; - obj = global; + + if (global !== undefined) { + if (typeof nameOrGlobal === "string") { + n = nameOrGlobal; + obj = global; + } else { + n = nameOrGlobal.name; + obj = [nameOrGlobal]; + obj.push(global); + if (params) { + obj.push(params); + } + } } else if (nameOrGlobal && typeof nameOrGlobal.name === "string") { n = nameOrGlobal.name; obj = nameOrGlobal; @@ -87,6 +100,10 @@ export namespace Scripting { export function getGlobals() { return Object.keys(scriptingGlobals); } + + export function getGlobalObj() { + return _scriptingGlobals; + } } export function scriptingGlobal(constructor: { new(...args: any[]): any }) { diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index e0e205df9..4f3da70d7 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -5,6 +5,7 @@ import * as Autosuggest from 'react-autosuggest'; import { ObjectField } from '../../fields/ObjectField'; import { SchemaHeaderField } from '../../fields/SchemaHeaderField'; import "./EditableView.scss"; +import { DragManager } from '../util/DragManager'; export interface EditableProps { /** @@ -48,6 +49,7 @@ export interface EditableProps { HeadingObject?: SchemaHeaderField | undefined; toggle?: () => void; color?: string | undefined; + onDrop?: any; } /** @@ -77,6 +79,13 @@ export class EditableView extends React.Component<EditableProps> { } } + @action + componentDidMount() { + if (this._ref.current && this.props.onDrop) { + DragManager.MakeDropTarget(this._ref.current, this.props.onDrop.bind(this)); + } + } + _didShow = false; @action diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 4352ac52c..e9a848a5a 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -815,7 +815,7 @@ Scripting.addGlobal(function resetPen() { InkingControl.Instance.updateSelectedColor(GestureOverlay.Instance.SavedColor ?? "rgb(0, 0, 0)"); InkingControl.Instance.switchWidth(GestureOverlay.Instance.SavedWidth ?? "2"); }); -}); +}, "resets the pen tool"); Scripting.addGlobal(function createText(text: any, x: any, y: any) { GestureOverlay.Instance.dispatchGesture("text", [{ X: x, Y: y }], text); -});
\ No newline at end of file +}, "creates a text document with inputted text and coordinates", "(text: any, x: any, y: any)");
\ No newline at end of file diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx index cfa869fb2..f6e5e1705 100644 --- a/src/client/views/OverlayView.tsx +++ b/src/client/views/OverlayView.tsx @@ -12,7 +12,6 @@ import './OverlayView.scss'; import { Scripting } from "../util/Scripting"; import { ScriptingRepl } from './ScriptingRepl'; import { DragManager } from "../util/DragManager"; -import { listSpec } from "../../fields/Schema"; import { List } from "../../fields/List"; export type OverlayDisposer = () => void; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 6f5a3dfe4..8c0b0a1c8 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -859,5 +859,6 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> { </div >); } } -Scripting.addGlobal(function openOnRight(doc: any) { CollectionDockingView.AddRightSplit(doc); }); +Scripting.addGlobal(function openOnRight(doc: any) { CollectionDockingView.AddRightSplit(doc); }, + "opens up the inputted document on the right side of the screen", "(doc: any)"); Scripting.addGlobal(function useRightSplit(doc: any, shiftKey?: boolean) { CollectionDockingView.UseRightSplit(doc, undefined, shiftKey); }); diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 29a3e559a..3dc740c25 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -93,7 +93,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro this.props.collapse?.(true); break; } - }) + }); @undoBatch viewChanged = (e: React.ChangeEvent) => { diff --git a/src/client/views/nodes/ScriptingBox.scss b/src/client/views/nodes/ScriptingBox.scss index 43695f00d..f28a2fcef 100644 --- a/src/client/views/nodes/ScriptingBox.scss +++ b/src/client/views/nodes/ScriptingBox.scss @@ -5,31 +5,195 @@ flex-direction: column; background-color: rgb(241, 239, 235); padding: 10px; + + .boxed { + border: 1px solid black; + background-color: rgb(212, 198, 179); + width: auto; + height: auto; + font-size: 12px; + position: absolute; + z-index: 100; + padding: 5px; + white-space: nowrap; + overflow: hidden; + } + .scriptingBox-inputDiv { display: flex; flex-direction: column; - height: calc(100% - 30px); + height: 100%; + table-layout: fixed; + + white-space: nowrap; + + .scriptingBox-wrapper { + width: 100%; + height: 100%; + max-height: calc(100%-30px); + display: flex; + flex-direction: row; + justify-content: center; + + .scriptingBox-textArea { + flex: 70; + height: 100%; + box-sizing: border-box; + resize: none; + padding: 7px; + overflow-y: scroll; + + body { + font-family: Arial, Helvetica, sans-serif; + border: 1px solid red; + } + + .rta { + position: relative; + width: 100%; + height: 100%; + margin-bottom: 60px !important; + overflow-y: scroll; + overflow-x: hidden; + overflow: hidden; + } + + .rta__textarea { + width: 100%; + height: 100%; + font-size: 10px; + } + + .rta__autocomplete { + position: absolute; + display: block; + margin-top: 1em; + } + + .rta__autocomplete--top { + margin-top: 0; + margin-bottom: 1em; + max-height: 100px; + } + + .rta__list { + margin: 0; + padding: 0; + background: #fff; + border: 1px solid #dfe2e5; + border-radius: 3px; + box-shadow: 0 0 5px rgba(27, 31, 35, 0.1); + list-style: none; + overflow-y: scroll; + overflow-x: hidden; + } + + .rta__entity { + background: white; + width: 100%; + text-align: left; + outline: none; + overflow-y: scroll; + } + + .rta__entity:hover { + cursor: pointer; + } + + .rta__entity>* { + padding-left: 4px; + padding-right: 4px; + } + + .rta__entity--selected { + color: #fff; + text-decoration: none; + background: #0366d6; + } + } + + .scriptingBox-plist { + flex: 30; + width: 30%; + height: 100%; + box-sizing: border-box; + resize: none; + padding: 2px; + overflow-y: scroll; + + .scriptingBox-pborder { + background-color: rgb(241, 239, 235); + } + + .scriptingBox-viewBase { + display: flex; + + .scriptingBox-viewPicker { + font-size: 75%; + //text-transform: uppercase; + letter-spacing: 2px; + background: rgb(238, 238, 238); + color: grey; + outline-color: black; + border: none; + padding: 12px 10px 11px 10px; + } + + .scriptingBox-viewPicker:active { + outline-color: black; + } + + .commandEntry-outerDiv { + pointer-events: all; + background-color: gray; + display: flex; + flex-direction: row; + } + } + } + + .scriptingBox-paramNames { + flex: 60; + width: 60%; + box-sizing: border-box; + resize: none; + padding: 7px; + overflow-y: scroll; + } + + .scriptingBox-paramInputs { + flex: 40; + width: 40%; + box-sizing: border-box; + resize: none; + padding: 2px; + overflow-y: scroll; + } + } + .scriptingBox-errorMessage { overflow: auto; + background: "red"; + background-color: "red"; + height: 40px; } + .scripting-params { - background: "beige"; - } - .scriptingBox-textArea { - width: 100%; - height: 100%; - box-sizing: border-box; - resize: none; - padding: 7px; + background: rgb(241, 239, 235); } } .scriptingBox-toolbar { width: 100%; height: 30px; + .scriptingBox-button { - width: 50% + width: 50%; + resize: auto; } - } -} + .scriptingBox-button-third { + width: 33%; + } + } +}
\ No newline at end of file diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx index 0944edf60..149640c07 100644 --- a/src/client/views/nodes/ScriptingBox.tsx +++ b/src/client/views/nodes/ScriptingBox.tsx @@ -1,19 +1,28 @@ -import { action, observable, computed } from "mobx"; +import { action, computed, observable, trace, runInAction } from "mobx"; import { observer } from "mobx-react"; import * as React from "react"; +import { Doc } from "../../../fields/Doc"; import { documentSchema } from "../../../fields/documentSchemas"; -import { createSchema, makeInterface, listSpec } from "../../../fields/Schema"; +import { List } from "../../../fields/List"; +import { createSchema, listSpec, makeInterface } from "../../../fields/Schema"; import { ScriptField } from "../../../fields/ScriptField"; -import { StrCast, ScriptCast, Cast } from "../../../fields/Types"; +import { Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types"; +import { returnEmptyString } from "../../../Utils"; +import { DragManager } from "../../util/DragManager"; import { InteractionUtils } from "../../util/InteractionUtils"; -import { CompileScript, isCompileError, ScriptParam } from "../../util/Scripting"; +import { CompileScript, ScriptParam, Scripting } from "../../util/Scripting"; +import { ContextMenu } from "../ContextMenu"; import { ViewBoxAnnotatableComponent } from "../DocComponent"; import { EditableView } from "../EditableView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; -import "./ScriptingBox.scss"; import { OverlayView } from "../OverlayView"; import { DocumentIconContainer } from "./DocumentIcon"; -import { List } from "../../../fields/List"; +import "./ScriptingBox.scss"; +const _global = (window /* browser */ || global /* node */) as any; + +import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete"; +import "@webscopeio/react-textarea-autocomplete/style.css"; + const ScriptingSchema = createSchema({}); type ScriptingDocument = makeInterface<[typeof ScriptingSchema, typeof documentSchema]>; @@ -21,78 +30,680 @@ const ScriptingDocument = makeInterface(ScriptingSchema, documentSchema); @observer export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, ScriptingDocument>(ScriptingDocument) { + + private dropDisposer?: DragManager.DragDropDisposer; protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer | undefined; public static LayoutString(fieldStr: string) { return FieldView.LayoutString(ScriptingBox, fieldStr); } - - _overlayDisposer?: () => void; + private _overlayDisposer?: () => void; @observable private _errorMessage: string = ""; + @observable private _applied: boolean = false; + @observable private _hovered: boolean = false; + @observable private _spaced: boolean = false; + @observable private _scriptKeys: any = Scripting.getGlobals(); + @observable private _scriptGlobals: any = Scripting.getGlobalObj(); + @observable private _currWord: string = ""; + @observable private _suggestions: string[] = []; + + @observable private _suggestionBoxX: number = 0; + @observable private _suggestionBoxY: number = 0; + @observable private _lastChar: string = ""; - @computed get rawScript() { return StrCast(this.dataDoc[this.props.fieldKey + "-rawScript"], StrCast(this.layoutDoc[this.props.fieldKey + "-rawScript"])); } - @computed get compileParams() { return Cast(this.dataDoc[this.props.fieldKey + "-params"], listSpec("string"), Cast(this.layoutDoc[this.props.fieldKey + "-params"], listSpec("string"), [])); } + @observable private _suggestionRef: any = React.createRef(); + @observable private _scriptTextRef: any = React.createRef(); + + @observable private _selection: any = 0; + @observable private _selectionEnd: any = 0; + + @observable private _paramSuggestion: boolean = false; + @observable private _scriptSuggestedParams: any = ""; + @observable private _scriptParamsText: any = ""; + + // vars included in fields that store parameters types and names and the script itself + @computed({ keepAlive: true }) get paramsNames() { return this.compileParams.map(p => p.split(":")[0].trim()); } + @computed({ keepAlive: true }) get paramsTypes() { return this.compileParams.map(p => p.split(":")[1].trim()); } + @computed({ keepAlive: true }) get rawScript() { return StrCast(this.dataDoc[this.props.fieldKey + "-rawScript"], ""); } + @computed({ keepAlive: true }) get compileParams() { return Cast(this.dataDoc[this.props.fieldKey + "-params"], listSpec("string"), []); } set rawScript(value) { this.dataDoc[this.props.fieldKey + "-rawScript"] = value; } - set compileParams(value) { this.dataDoc[this.props.fieldKey + "-params"] = value; } + set compileParams(value) { this.dataDoc[this.props.fieldKey + "-params"] = new List<string>(value); } + + // WORK ON THIS + // in: global, description, params + @computed get _descriptions() { + const descrip: string[] = []; + this._scriptKeys.forEach((element: any) => { + const result = this._scriptGlobals[element]; + descrip.push(this.getValue(result, true)); + }); + return descrip; + } + + @computed get _scriptParams() { + const params: string[] = []; + this._scriptKeys.forEach((element: any) => { + const result = this._scriptGlobals[element]; + params.push(this.getValue(result, false)); + }); + return params; + } + + getValue(result: any, descrip: boolean) { + let value = ""; + if (typeof result === "object") { + let text = ""; + if (descrip) { + text = result[1]; + } else { + text = result[2]; + } + if (text !== undefined) { + value = text; + } else { + value = ""; + } + } else { + value = ""; + } + return value; + } + @action componentDidMount() { - this.rawScript = ScriptCast(this.dataDoc[this.props.fieldKey])?.script?.originalScript || this.rawScript; + this.rawScript = ScriptCast(this.dataDoc[this.props.fieldKey])?.script?.originalScript ?? this.rawScript; + + const observer = new _global.ResizeObserver(action((entries: any) => { + for (const { } of entries) { + + const getCaretCoordinates = require('textarea-caret'); + const caret = getCaretCoordinates(this._selection, this._selectionEnd); + this.resetSuggestionPos(caret); + } + })); + observer.observe(document.getElementsByClassName("scriptingBox")[0]); + } + + @action + resetSuggestionPos(caret: any) { + console.log('(top, left, height) = (%s, %s, %s)', caret.top, caret.left, caret.height); + let top = caret.top; + let left = caret.left; + + const x = this.dataDoc.x; + const suggestionWidth = this._suggestionRef.current.offsetWidth; + const scriptWidth = this._scriptTextRef.current.offsetWidth; + if ((left + suggestionWidth) > (x + scriptWidth)) { + const diff = (left + suggestionWidth) - (x + scriptWidth); + left = left - diff; + } + + runInAction(() => { + this._suggestionBoxX = left; + this._suggestionBoxY = top; + }); + } + + componentWillUnmount() { + this._overlayDisposer?.(); + } + + protected createDashEventsTarget = (ele: HTMLDivElement, dropFunc: (e: Event, de: DragManager.DropEvent) => void) => { //used for stacking and masonry view + if (ele) { + this.dropDisposer?.(); + this.dropDisposer = DragManager.MakeDropTarget(ele, dropFunc, this.layoutDoc); + } } - componentWillUnmount() { this._overlayDisposer?.(); } + // only included in buttons, transforms scripting UI to a button + @action + onFinish = () => { + this.rootDoc.layoutKey = "layout"; + this.rootDoc._height = 50; + this.rootDoc._width = 100; + this.dataDoc.documentText = this.rawScript; + } + + // displays error message + @action + onError = (error: any) => { + this._errorMessage = error?.map((entry: any) => entry.messageText).join(" ") || ""; + } + // checks if the script compiles using CompileScript method and inputting params @action onCompile = () => { - const params = this.compileParams.reduce((o: ScriptParam, p: string) => { o[p] = "any"; return o; }, {} as ScriptParam); + const params: ScriptParam = {}; + this.compileParams.forEach(p => params[p.split(":")[0].trim()] = p.split(":")[1].trim()); + const result = CompileScript(this.rawScript, { editable: true, transformer: DocumentIconContainer.getTransformer(), params, - typecheck: false + typecheck: true }); - this._errorMessage = isCompileError(result) ? result.errors.map(e => e.messageText).join("\n") : ""; - return this.dataDoc[this.props.fieldKey] = result.compiled ? new ScriptField(result) : undefined; + this.dataDoc.documentText = this.rawScript; + this.dataDoc.data = result.compiled ? new ScriptField(result) : undefined; + this.onError(result.compiled ? undefined : result.errors); } + // checks if the script compiles and then runs the script @action onRun = () => { - this.onCompile()?.script.run({}, err => this._errorMessage = err.map((e: any) => e.messageText).join("\n")); + this.onCompile(); + const bindings: { [name: string]: any } = {}; + this.paramsNames.forEach(key => bindings[key] = this.dataDoc[key]); + // binds vars so user doesnt have to refer to everything as self.<var> + ScriptCast(this.dataDoc.data, null)?.script.run({ self: this.rootDoc, this: this.layoutDoc, ...bindings }, this.onError); + } + + // checks if the script compiles and switches to applied UI + @action + onApply = () => { + this.onCompile(); + this._applied = true; } + @action + onEdit = () => { + this._applied = false; + } + + // overlays document numbers (ex. d32) over all documents when clicked on onFocus = () => { this._overlayDisposer?.(); this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 }); } + // sets field of the corresponding field key (param name) to be dropped document + @action + onDrop = (e: Event, de: DragManager.DropEvent, fieldKey: string) => { + this.dataDoc[fieldKey] = de.complete.docDragData?.droppedDocuments[0]; + e.stopPropagation(); + } + + // deletes a param from all areas in which it is stored + @action + onDelete = (num: number) => { + this.dataDoc[this.paramsNames[num]] = undefined; + this.compileParams.splice(num, 1); + return true; + } + + // sets field of the param name to the selected value in drop down box + @action + viewChanged = (e: React.ChangeEvent, name: string) => { + //@ts-ignore + this.dataDoc[name] = e.target.selectedOptions[0].value; + } + + // creates a copy of the script document + onCopy = () => { + const copy = Doc.MakeCopy(this.rootDoc, true); + copy.x = NumCast(this.dataDoc.x) + NumCast(this.dataDoc._width); + this.props.addDocument?.(copy); + } + + // adds option to create a copy to the context menu + specificContextMenu = (): void => { + const existingOptions = ContextMenu.Instance.findByDescription("Options..."); + const options = existingOptions && "subitems" in existingOptions ? existingOptions.subitems : []; + options.push({ description: "Create a Copy", event: this.onCopy, icon: "copy" }); + !existingOptions && ContextMenu.Instance.addItem({ description: "Options...", subitems: options, icon: "hand-point-right" }); + } + + renderErrorMessage() { + return !this._errorMessage ? (null) : <div className="scriptingBox-errorMessage"> {this._errorMessage} </div>; + } + + // rendering when a doc's value can be set in applied UI + renderDoc(parameter: string) { + return <div className="scriptingBox-paramInputs" onFocus={this.onFocus} onBlur={() => this._overlayDisposer?.()} + ref={ele => ele && this.createDashEventsTarget(ele, (e, de) => this.onDrop(e, de, parameter))} > + <EditableView display={"block"} maxHeight={72} height={35} fontSize={14} + contents={this.dataDoc[parameter]?.title ?? "undefined"} + GetValue={() => this.dataDoc[parameter]?.title ?? "undefined"} + SetValue={action((value: string) => { + const script = CompileScript(value, { + addReturn: true, + typecheck: false, + transformer: DocumentIconContainer.getTransformer() + }); + const results = script.compiled && script.run(); + if (results && results.success) { + this._errorMessage = ""; + this.dataDoc[parameter] = results.result; + return true; + } + this._errorMessage = "invalid document"; + return false; + })} + /> + </div>; + } + + // rendering when a string's value can be set in applied UI + renderString(parameter: string) { + return <div className="scriptingBox-paramInputs"> + <EditableView display={"block"} maxHeight={72} height={35} fontSize={14} + contents={this.dataDoc[parameter] ?? "undefined"} + GetValue={() => StrCast(this.dataDoc[parameter]) ?? "undefined"} + SetValue={action((value: string) => { + if (value && value !== " ") { + this._errorMessage = ""; + this.dataDoc[parameter] = value; + return true; + } + return false; + })} + /> + </div>; + } + + // rendering when a number's value can be set in applied UI + renderNumber(parameter: string) { + return <div className="scriptingBox-paramInputs"> + <EditableView display={"block"} maxHeight={72} height={35} fontSize={14} + contents={this.dataDoc[parameter] ?? "undefined"} + GetValue={() => StrCast(this.dataDoc[parameter]) ?? "undefined"} + SetValue={action((value: string) => { + if (value && value !== " ") { + if (parseInt(value)) { + this._errorMessage = ""; + this.dataDoc[parameter] = parseInt(value); + return true; + } + this._errorMessage = "not a number"; + } + return false; + })} + /> + </div>; + } + + // rendering when an enum's value can be set in applied UI (drop down box) + renderEnum(parameter: string, types: string[]) { + return <div className="scriptingBox-paramInputs"> + <div className="scriptingBox-viewBase"> + <div className="commandEntry-outerDiv"> + <select className="scriptingBox-viewPicker" + onPointerDown={e => e.stopPropagation()} + onChange={e => this.viewChanged(e, parameter)} + value={this.dataDoc[parameter]}> + + {types.map(type => + <option className="scriptingBox-viewOption" value={type.trim()}> {type.trim()} </option> + )} + </select> + </div> + </div> + </div>; + } + + // rendering when a boolean's value can be set in applied UI (drop down box) + renderBoolean(parameter: string) { + return <div className="scriptingBox-paramInputs"> + <div className="scriptingBox-viewBase"> + <div className="commandEntry-outerDiv"> + <select className="scriptingBox-viewPicker" + onPointerDown={e => e.stopPropagation()} + onChange={e => this.viewChanged(e, parameter)} + value={this.dataDoc[parameter]}> + <option className="scriptingBox-viewOption" value={"true"}>true </option> + <option className="scriptingBox-viewOption" value={"false"}>false</option> + </select> + </div> + </div> + </div>; + } + + // setting a parameter (checking type and name before it is added) + compileParam(value: string, whichParam?: number) { + if (value.includes(":")) { + const ptype = value.split(":")[1].trim(); + const pname = value.split(":")[0].trim(); + if (ptype === "Doc" || ptype === "string" || ptype === "number" || ptype === "boolean" || ptype.split("|")[1]) { + if ((whichParam !== undefined && pname === this.paramsNames[whichParam]) || !this.paramsNames.includes(pname)) { + this._errorMessage = ""; + if (whichParam !== undefined) { + this.compileParams[whichParam] = value; + } else { + this.compileParams = [...value.split(";").filter(s => s), ...this.compileParams]; + } + return true; + } + this._errorMessage = "this name has already been used"; + } else { + this._errorMessage = "this type is not supported"; + } + } else { + this._errorMessage = "must set type of parameter"; + } + return false; + } + + @action + handleToken(str: string) { + this._currWord = str; + this._suggestions = []; + this._scriptKeys.forEach((element: string) => { + if (element.toLowerCase().indexOf(this._currWord.toLowerCase()) >= 0) { + this._suggestions.push(StrCast(element)); + } + }); + return (this._suggestions); + } + + @action + handleFunc(pos: number) { + const scriptString = this.rawScript.slice(0, pos - 2); + this._currWord = scriptString.split(" ")[scriptString.split(" ").length - 1]; + this._suggestions = []; + const index = this._scriptKeys.indexOf(this._currWord); + const params = StrCast(this._scriptParams[index]); + this._suggestions.push(params); + return (this._suggestions); + } + + + getDescription(value: string) { + const index = this._scriptKeys.indexOf(value); + const descrip = this._descriptions[index]; + let display = ""; + if (descrip !== undefined) { + if (descrip.length > 0) { + display = descrip; + } + } + return display; + } + + getParams(value: string) { + const index = this._scriptKeys.indexOf(value); + const descrip = this._scriptParams[index]; + let display = ""; + if (descrip !== undefined) { + if (descrip.length > 0) { + display = descrip; + } + } + return display; + } + + setHovered(bool: boolean) { + this._hovered = bool; + } + + returnParam(item: string) { + const params = item.split(","); + let value = ""; + let first = true; + params.forEach((element) => { + if (first) { + value = element.split(":")[0].trim(); + first = false; + } else { + value = value + ", " + element.split(":")[0].trim(); + } + }); + return value; + } + + getSuggestedParams(pos: number) { + const firstScript = this.rawScript.slice(0, pos); + const indexP = firstScript.lastIndexOf("."); + const indexS = firstScript.lastIndexOf(" "); + let func = ""; + if (indexP > indexS) { + func = firstScript.slice(indexP + 1, firstScript.length + 1); + } else { + func = firstScript.slice(indexS + 1, firstScript.length + 1); + } + const indexF = this._scriptKeys.indexOf(func); + return this._scriptParams[indexF]; + } + + @action + suggestionPos() { + const getCaretCoordinates = require('textarea-caret'); + const This = this; + document.querySelector('textarea')?.addEventListener("input", function () { + const caret = getCaretCoordinates(this, this.selectionEnd); + This._selection = this; + This._selectionEnd = this.selectionEnd; + This.resetSuggestionPos(caret); + }); + } + + @action + keyHandler(e: any, pos: number) { + if (this._lastChar === "Enter") { + this.rawScript = this.rawScript + " "; + } + console.log(e.key); + if (e.key === "(") { + this.suggestionPos(); + + this._scriptParamsText = this.getSuggestedParams(pos); + this._scriptSuggestedParams = this.getSuggestedParams(pos); + + if (this._scriptParamsText !== undefined && this._scriptParamsText.length > 0) { + if (this.rawScript[pos - 2] !== "(") { + this._paramSuggestion = true; + } + } + } else if (e.key === ")") { + this._paramSuggestion = false; + } else { + if (e.key === "Backspace") { + if (this._lastChar === "(") { + this._paramSuggestion = false; + } else if (this._lastChar === ")") { + if (this.rawScript.slice(0, this.rawScript.length - 1).split("(").length - 1 > this.rawScript.slice(0, this.rawScript.length - 1).split(")").length - 1) { + if (this._scriptParamsText.length > 0) { + this._paramSuggestion = true; + } + } + } + } else { + if (this.rawScript.split("(").length - 1 <= this.rawScript.split(")").length - 1) { + this._paramSuggestion = false; + } + } + } + if (e.key === "Backspace") { + this._lastChar = this.rawScript[this.rawScript.length - 2]; + console.log("last char: " + this._lastChar); + } else { + this._lastChar = e.key; + } + + if (this._paramSuggestion) { + const parameters = this._scriptParamsText.split(","); + const index = this.rawScript.lastIndexOf("("); + const enteredParams = this.rawScript.slice(index, this.rawScript.length); + const splitEntered = enteredParams.split(","); + const numEntered = splitEntered.length; + + parameters.forEach((element: string, i: number) => { + if (i !== parameters.length - 1) { + parameters[i] = element + ","; + } + }); + + console.log("numEntered: " + numEntered); + + let first = ""; + let last = ""; + + parameters.forEach((element: string, i: number) => { + if (i < numEntered - 1) { + first = first + element; + } else if (i > numEntered - 1) { + last = last + element; + } + }); + + this._scriptSuggestedParams = <div> {first} <b>{parameters[numEntered - 1]}</b> {last} </div>; + } + } + + @action + handlePosChange(number: any) { + this.caretPos = number; + if (this.caretPos === 0) { + this.rawScript = " " + this.rawScript; + } else if (this._spaced) { + this._spaced = false; + if (this.rawScript[this.caretPos - 1] === " ") { + this.rawScript = this.rawScript.slice(0, this.caretPos - 1) + + this.rawScript.slice(this.caretPos, this.rawScript.length); + } + } + } + + caretPos = 0; + textarea: any; + @computed({ keepAlive: true }) get renderScriptingBox() { + + trace(); + return <div style={{ width: this.compileParams.length > 0 ? "70%" : "100%" }} ref={this._scriptTextRef}> + <ReactTextareaAutocomplete className="ScriptingBox-textarea" style={{ resize: "none", height: "100%" }} + minChar={1} + placeholder="write your script here" + onFocus={this.onFocus} + onBlur={() => this._overlayDisposer?.()} + onChange={e => this.rawScript = e.target.value} + value={this.rawScript} + movePopupAsYouType={true} + loadingComponent={() => <span>Loading</span>} + + trigger={{ + " ": { + dataProvider: (token: any) => this.handleToken(token), + component: ({ entity: value }) => this.renderFuncListElement(value), + output: (item: any, trigger) => { + this._spaced = true; + return trigger + item.trim(); + }, + }, + ".": { + dataProvider: (token: any) => this.handleToken(token), + component: ({ entity: value }) => this.renderFuncListElement(value), + output: (item: any, trigger) => { + this._spaced = true; + return trigger + item.trim(); + }, + } + }} + onKeyDown={(e) => this.keyHandler(e, this.caretPos)} + onCaretPositionChange={(number: any) => this.handlePosChange(number)} + /> + </div>; + } + + renderFuncListElement(value: string) { + return <div> + <div style={{ fontSize: "14px" }} + onMouseEnter={() => this.setHovered(true)} + onMouseLeave={() => this.setHovered(false)}> + {value} + </div> + <div key="desc" style={{ fontSize: "10px" }}>{this.getDescription(value)}</div> + <div key="params" style={{ fontSize: "10px" }}>{this.getParams(value)}</div> + </div>; + } + + // inputs for scripting div (script box, params box, and params column) + @computed({ keepAlive: true }) get renderScriptingInputs() { + + // params box on bottom + const parameterInput = <div className="scriptingBox-params"> + <EditableView display={"block"} maxHeight={72} height={35} fontSize={22} + contents={""} + GetValue={returnEmptyString} + SetValue={value => value && value !== " " ? this.compileParam(value) : false} + /> + </div>; + + // params column on right side (list) + const definedParameters = !this.compileParams.length ? (null) : + <div className="scriptingBox-plist" style={{ width: "30%" }}> + {this.compileParams.map((parameter, i) => + <div className="scriptingBox-pborder" onKeyPress={e => e.key === "Enter" && this._overlayDisposer?.()} > + <EditableView display={"block"} maxHeight={72} height={35} fontSize={12} background-color={"beige"} + contents={parameter} + GetValue={() => parameter} + SetValue={value => value && value !== " " ? this.compileParam(value, i) : this.onDelete(i)} + /> + </div> + )} + </div>; + + return <div className="scriptingBox-inputDiv" onPointerDown={e => this.props.isSelected() && e.stopPropagation()} > + <div className="scriptingBox-wrapper"> + {this.renderScriptingBox} + {definedParameters} + </div> + {parameterInput} + {this.renderErrorMessage()} + </div>; + } + + // toolbar (with compile and apply buttons) for scripting UI + renderScriptingTools() { + const buttonStyle = "scriptingBox-button" + (this.rootDoc.layoutKey === "layout_onClick" ? "third" : ""); + return <div className="scriptingBox-toolbar"> + <button className={buttonStyle} onPointerDown={e => { this.onCompile(); e.stopPropagation(); }}>Compile</button> + <button className={buttonStyle} onPointerDown={e => { this.onApply(); e.stopPropagation(); }}>Apply</button> + {this.rootDoc.layoutKey !== "layout_onClick" ? (null) : + <button className={buttonStyle} onPointerDown={e => { this.onFinish(); e.stopPropagation(); }}>Finish</button>} + </div>; + } + + // inputs UI for params which allows you to set values for each displayed in a list + renderParamsInputs() { + return <div className="scriptingBox-inputDiv" onPointerDown={e => this.props.isSelected(true) && e.stopPropagation()} > + {!this.compileParams.length || !this.paramsNames ? (null) : + <div className="scriptingBox-plist"> + {this.paramsNames.map((parameter: string, i: number) => + <div className="scriptingBox-pborder" onKeyPress={e => e.key === "Enter" && this._overlayDisposer?.()} > + <div className="scriptingBox-wrapper"> + <div className="scriptingBox-paramNames"> {`${parameter}:${this.paramsTypes[i]} = `} </div> + {this.paramsTypes[i] === "boolean" ? this.renderBoolean(parameter) : (null)} + {this.paramsTypes[i] === "string" ? this.renderString(parameter) : (null)} + {this.paramsTypes[i] === "number" ? this.renderNumber(parameter) : (null)} + {this.paramsTypes[i] === "Doc" ? this.renderDoc(parameter) : (null)} + {this.paramsTypes[i]?.split("|")[1] ? this.renderEnum(parameter, this.paramsTypes[i].split("|")) : (null)} + </div> + </div>)} + </div>} + </div>; + } + + // toolbar (with edit and run buttons and error message) for params UI + renderParamsTools() { + const buttonStyle = "scriptingBox-button" + (this.rootDoc.layoutKey === "layout_onClick" ? "third" : ""); + return <div className="scriptingBox-toolbar"> + {this.renderErrorMessage()} + <button className={buttonStyle} onPointerDown={e => { this.onEdit(); e.stopPropagation(); }}>Edit</button> + <button className={buttonStyle} onPointerDown={e => { this.onRun(); e.stopPropagation(); }}>Run</button> + {this.rootDoc.layoutKey !== "layout_onClick" ? (null) : + <button className={buttonStyle} onPointerDown={e => { this.onFinish(); e.stopPropagation(); }}>Finish</button>} + </div>; + } + + // renders script UI if _applied = false and params UI if _applied = true render() { - const params = <EditableView - contents={this.compileParams.join(" ")} - display={"block"} - maxHeight={72} - height={35} - fontSize={28} - GetValue={() => ""} - SetValue={value => { this.compileParams = new List<string>(value.split(" ").filter(s => s !== " ")); return true; }} - />; return ( - <div className="scriptingBox-outerDiv" - onWheel={e => this.props.isSelected(true) && e.stopPropagation()}> - <div className="scriptingBox-inputDiv" - onPointerDown={e => this.props.isSelected(true) && e.stopPropagation()} > - <textarea className="scriptingBox-textarea" - placeholder="write your script here" - onChange={e => this.rawScript = e.target.value} - value={this.rawScript} - onFocus={this.onFocus} - onBlur={e => this._overlayDisposer?.()} /> - <div className="scriptingBox-errorMessage" style={{ background: this._errorMessage ? "red" : "" }}>{this._errorMessage}</div> - <div className="scriptingBox-params" >{params}</div> - </div> - {this.rootDoc.layout === "layout" ? <div></div> : (null)} - <div className="scriptingBox-toolbar"> - <button className="scriptingBox-button" onPointerDown={e => { this.onCompile(); e.stopPropagation(); }}>Compile</button> - <button className="scriptingBox-button" onPointerDown={e => { this.onRun(); e.stopPropagation(); }}>Run</button> + <div className={`scriptingBox`} onContextMenu={this.specificContextMenu} + onPointerUp={this.suggestionPos}> + <div className="scriptingBox-outerDiv" + onWheel={e => this.props.isSelected(true) && e.stopPropagation()}> + {this._paramSuggestion ? <div className="boxed" ref={this._suggestionRef} style={{ left: this._suggestionBoxX + 20, top: this._suggestionBoxY - 15, display: "inline" }}> {this._scriptSuggestedParams} </div> : null} + {!this._applied ? this.renderScriptingInputs : this.renderParamsInputs()} + {!this._applied ? this.renderScriptingTools() : this.renderParamsTools()} </div> </div> ); } -} +}
\ No newline at end of file diff --git a/src/fields/ScriptField.ts b/src/fields/ScriptField.ts index fc7f9ca80..11b3b0524 100644 --- a/src/fields/ScriptField.ts +++ b/src/fields/ScriptField.ts @@ -161,7 +161,7 @@ export class ComputedField extends ScriptField { Scripting.addGlobal(function getIndexVal(list: any[], index: number) { return list.reduce((p, x, i) => (i <= index && x !== undefined) || p === undefined ? x : p, undefined as any); -}); +}, "returns the value at a given index of a list", "(list: any[], index: number)"); export namespace ComputedField { let useComputed = true; diff --git a/src/server/database.ts b/src/server/database.ts index a5f23c4b1..b017f1e3c 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -8,6 +8,7 @@ import { IDatabase, DocumentsCollection } from './IDatabase'; import { MemoryDatabase } from './MemoryDatabase'; import * as mongoose from 'mongoose'; import { Upload } from './SharedMediaTypes'; +import { timeout } from 'async'; export namespace Database { |