From 3817e7e380031a60b0d5cfe31bc350ca8f4f6056 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 14 Nov 2023 13:34:04 -0500 Subject: simplified goldenlayout tab buttons and made open in lightbox more accessible for a tab. --- src/client/util/CaptureManager.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/util/CaptureManager.tsx') diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx index f42336ee7..8a4f37121 100644 --- a/src/client/util/CaptureManager.tsx +++ b/src/client/util/CaptureManager.tsx @@ -73,7 +73,7 @@ export class CaptureManager extends React.Component<{}> {
{ - LightboxView.SetLightboxDoc(this._document); + LightboxView.Instance.SetLightboxDoc(this._document); this.close(); }}> Save -- cgit v1.2.3-70-g09d2 From 85c09a9e5df77ad00f3e00a2fb1e0f2e3449f97d Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 12 Dec 2023 14:39:09 -0500 Subject: cleaned up SelectionManager. fixed schema view --- src/client/util/CaptureManager.tsx | 2 +- src/client/util/DictationManager.ts | 2 +- src/client/util/DragManager.ts | 4 +- src/client/util/HypothesisUtils.ts | 2 +- src/client/util/SelectionManager.ts | 124 +++++++++------------ src/client/util/SharingManager.tsx | 8 +- src/client/util/SnappingManager.ts | 28 ++--- src/client/views/ComponentDecorations.tsx | 2 +- src/client/views/DocumentButtonBar.tsx | 6 +- src/client/views/DocumentDecorations.tsx | 80 ++++++------- src/client/views/GlobalKeyHandler.ts | 48 +++----- src/client/views/InkControlPtHandles.tsx | 4 +- src/client/views/MainView.tsx | 6 +- src/client/views/PropertiesButtons.tsx | 22 ++-- .../views/PropertiesDocBacklinksSelector.tsx | 4 +- src/client/views/PropertiesView.tsx | 22 ++-- src/client/views/collections/CollectionMenu.tsx | 2 +- src/client/views/collections/CollectionSubView.tsx | 4 +- .../views/collections/CollectionTreeView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 12 +- .../collections/collectionFreeForm/MarqueeView.tsx | 2 +- .../collectionSchema/CollectionSchemaView.tsx | 116 ++++++++++--------- .../collections/collectionSchema/SchemaRowBox.tsx | 38 ++++--- src/client/views/global/globalScripts.ts | 40 ++++--- src/client/views/nodes/DocumentView.tsx | 8 +- src/client/views/nodes/FontIconBox/FontIconBox.tsx | 2 +- src/client/views/nodes/LinkAnchorBox.tsx | 4 +- src/client/views/nodes/MapBox/MapAnchorMenu.tsx | 2 +- src/client/views/nodes/MapBox/MapBox2.tsx | 4 +- .../views/nodes/formattedText/RichTextMenu.tsx | 16 +-- src/client/views/nodes/trails/PresBox.tsx | 4 +- src/client/views/pdf/AnchorMenu.tsx | 4 +- src/client/views/pdf/PDFViewer.tsx | 2 +- 33 files changed, 308 insertions(+), 318 deletions(-) (limited to 'src/client/util/CaptureManager.tsx') diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx index 8a4f37121..271cf7495 100644 --- a/src/client/util/CaptureManager.tsx +++ b/src/client/util/CaptureManager.tsx @@ -81,7 +81,7 @@ export class CaptureManager extends React.Component<{}> {
{ - const selected = SelectionManager.Views().slice(); + const selected = SelectionManager.Views.slice(); SelectionManager.DeselectAll(); selected.map(dv => dv.props.removeDocument?.(dv.props.Document)); this.close(); diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts index 0fd7e840c..039bb360e 100644 --- a/src/client/util/DictationManager.ts +++ b/src/client/util/DictationManager.ts @@ -236,7 +236,7 @@ export namespace DictationManager { export const execute = async (phrase: string) => { return UndoManager.RunInBatch(async () => { console.log('PHRASE: ' + phrase); - const targets = SelectionManager.Views(); + const targets = SelectionManager.Views; if (!targets || !targets.length) { return; } diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index e96bbcaaf..c711db31a 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -618,7 +618,7 @@ export namespace DragManager { ScriptingGlobals.add(function toggleRaiseOnDrag(readOnly?: boolean) { if (readOnly) { - return SelectionManager.Views().some(dv => dv.Document.keepZWhenDragged); + return SelectionManager.Views.some(dv => dv.Document.keepZWhenDragged); } - SelectionManager.Views().map(dv => (dv.Document.keepZWhenDragged = !dv.Document.keepZWhenDragged)); + SelectionManager.Views.map(dv => (dv.Document.keepZWhenDragged = !dv.Document.keepZWhenDragged)); }); diff --git a/src/client/util/HypothesisUtils.ts b/src/client/util/HypothesisUtils.ts index 151f18d6f..990798ed3 100644 --- a/src/client/util/HypothesisUtils.ts +++ b/src/client/util/HypothesisUtils.ts @@ -27,7 +27,7 @@ export namespace Hypothesis { * Search for a WebDocument whose url field matches the given uri, return undefined if not found */ export const findWebDoc = async (uri: string) => { - const currentDoc = SelectionManager.Docs().lastElement(); + const currentDoc = SelectionManager.Docs.lastElement(); if (currentDoc && Cast(currentDoc.data, WebField)?.url.href === uri) return currentDoc; // always check first whether the currently selected doc is the annotation's source, only use Search otherwise const results: Doc[] = []; diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index b837cdd08..64cced3f1 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -10,90 +10,72 @@ import { LinkManager } from './LinkManager'; import { ScriptingGlobals } from './ScriptingGlobals'; import { UndoManager } from './UndoManager'; -export namespace SelectionManager { - class Manager { - @observable.shallow SelectedViews: DocumentView[] = []; - @observable IsDragging: boolean = false; - @observable SelectedSchemaDocument: Doc | undefined = undefined; - - constructor() { - makeObservable(this); - } - - @action - SelectSchemaViewDoc(doc: Opt) { - manager.SelectedSchemaDocument = doc; - } - @action - SelectView(docView: DocumentView, extendSelection: boolean): void { - if (!docView.SELECTED) { - if (!extendSelection) this.DeselectAll(); - manager.SelectedViews.push(docView); - docView.SELECTED = true; - docView._props.whenChildContentsActiveChanged(true); - } - } - @action - DeselectView(docView?: DocumentView): void { - if (docView && manager.SelectedViews.includes(docView)) { - docView.SELECTED = false; - manager.SelectedViews.splice(manager.SelectedViews.indexOf(docView), 1); - docView._props.whenChildContentsActiveChanged(false); - } - } - @action - DeselectAll(): void { - LinkManager.currentLink = undefined; - LinkManager.currentLinkAnchor = undefined; - manager.SelectedSchemaDocument = undefined; - manager.SelectedViews.forEach(dv => { - dv.SELECTED = false; - dv._props.whenChildContentsActiveChanged(false); - }); - manager.SelectedViews.length = 0; - } +export class SelectionManager { + private static _manager: SelectionManager; + private static get Instance() { + return SelectionManager._manager ?? new SelectionManager(); } - const manager = new Manager(); + @observable.shallow SelectedViews: DocumentView[] = []; + @observable IsDragging: boolean = false; + @observable SelectedSchemaDocument: Doc | undefined = undefined; - export function DeselectView(docView?: DocumentView): void { - manager.DeselectView(docView); - } - export function SelectView(docView: DocumentView | undefined, ctrlPressed: boolean): void { - if (!docView) DeselectAll(); - else manager.SelectView(docView, ctrlPressed); - } - export function SelectSchemaViewDoc(document: Opt, deselectAllFirst?: boolean): void { - if (deselectAllFirst) manager.DeselectAll(); - manager.SelectSchemaViewDoc(document); + private constructor() { + SelectionManager._manager = this; + makeObservable(this); } - export function IsSelected(doc?: Doc): boolean { - return Array.from(doc?.[DocViews] ?? []).some(dv => dv?.SELECTED); + @action + public static SelectSchemaViewDoc(doc: Opt, deselectAllFirst?: boolean) { + if (deselectAllFirst) this.DeselectAll(); + else this.Instance.SelectedSchemaDocument = doc; } - export function DeselectAll(except?: Doc): void { - const found = manager.SelectedViews.find(dv => dv.Document === except); - manager.DeselectAll(); - if (found) manager.SelectView(found, false); + @action + public static SelectView(docView: DocumentView, extendSelection: boolean): void { + if (!docView) this.DeselectAll(); + else if (!docView.SELECTED) { + if (!extendSelection) this.DeselectAll(); + this.Instance.SelectedViews.push(docView); + docView.SELECTED = true; + docView._props.whenChildContentsActiveChanged(true); + } } - export function Views(): Array { - return manager.SelectedViews; - } - export function SelectedSchemaDoc(): Doc | undefined { - return manager.SelectedSchemaDocument; + @action + public static DeselectView(docView?: DocumentView): void { + if (docView && this.Instance.SelectedViews.includes(docView)) { + docView.SELECTED = false; + this.Instance.SelectedViews.splice(this.Instance.SelectedViews.indexOf(docView), 1); + docView._props.whenChildContentsActiveChanged(false); + } } - export function Docs(): Doc[] { - return manager.SelectedViews.map(dv => dv.Document).filter(doc => doc?._type_collection !== CollectionViewType.Docking); + @action + public static DeselectAll(except?: Doc): void { + const found = this.Instance.SelectedViews.find(dv => dv.Document === except); + LinkManager.currentLink = undefined; + LinkManager.currentLinkAnchor = undefined; + this.Instance.SelectedSchemaDocument = undefined; + this.Instance.SelectedViews.forEach(dv => { + dv.SELECTED = false; + dv._props.whenChildContentsActiveChanged(false); + }); + this.Instance.SelectedViews.length = 0; + if (found) this.SelectView(found, false); } + + public static IsSelected = (doc?: Doc) => Array.from(doc?.[DocViews] ?? []).some(dv => dv?.SELECTED); + public static get Views() { return this.Instance.SelectedViews; } // prettier-ignore + public static get SelectedSchemaDoc() { return this.Instance.SelectedSchemaDocument; } // prettier-ignore + public static get Docs() { return this.Instance.SelectedViews.map(dv => dv.Document).filter(doc => doc?._type_collection !== CollectionViewType.Docking); } // prettier-ignore } + ScriptingGlobals.add(function SelectionManager_selectedDocType(type: string, expertMode: boolean, checkContext?: boolean) { if (Doc.noviceMode && expertMode) return false; if (type === 'tab') { - return SelectionManager.Views().lastElement()?._props.renderDepth === 0; + return SelectionManager.Views.lastElement()?._props.renderDepth === 0; } - let selected = (sel => (checkContext ? DocCast(sel?.embedContainer) : sel))(SelectionManager.SelectedSchemaDoc() ?? SelectionManager.Docs().lastElement()); + let selected = (sel => (checkContext ? DocCast(sel?.embedContainer) : sel))(SelectionManager.SelectedSchemaDoc ?? SelectionManager.Docs.lastElement()); return selected?.type === type || selected?.type_collection === type || !type; }); ScriptingGlobals.add(function deselectAll() { @@ -118,8 +100,8 @@ ScriptingGlobals.add(function redo() { return UndoManager.Redo(); }); ScriptingGlobals.add(function selectedDocs(container: Doc, excludeCollections: boolean, prevValue: any) { - const docs = SelectionManager.Views() - .map(dv => dv.Document) - .filter(d => !Doc.AreProtosEqual(d, container) && !d.annotationOn && d.type !== DocumentType.KVP && (!excludeCollections || d.type !== DocumentType.COL || !Cast(d.data, listSpec(Doc), null))); + const docs = SelectionManager.Views.map(dv => dv.Document).filter( + d => !Doc.AreProtosEqual(d, container) && !d.annotationOn && d.type !== DocumentType.KVP && (!excludeCollections || d.type !== DocumentType.COL || !Cast(d.data, listSpec(Doc), null)) + ); return docs.length ? new List(docs) : prevValue; }); diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index a46c6363e..7176b568e 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -162,7 +162,7 @@ export class SharingManager extends React.Component<{}> { const { user, sharingDoc } = recipient; const target = targetDoc || this.targetDoc!; const acl = `acl-${normalizeEmail(user.email)}`; - const docs = SelectionManager.Views().length < 2 ? [target] : SelectionManager.Views().map(docView => docView.Document); + const docs = SelectionManager.Views.length < 2 ? [target] : SelectionManager.Views.map(docView => docView.Document); docs.map(doc => (this.layoutDocAcls || doc.dockingConfig ? doc : Doc.GetProto(doc))).forEach(doc => { distributeAcls(acl, permission as SharingPermissions, doc, undefined, this.upgradeNested ? true : undefined); if (permission !== SharingPermissions.None) { @@ -180,7 +180,7 @@ export class SharingManager extends React.Component<{}> { const target = targetDoc || this.targetDoc!; const acl = `acl-${normalizeEmail(StrCast(group.title))}`; - const docs = SelectionManager.Views().length < 2 ? [target] : SelectionManager.Views().map(docView => docView.Document); + const docs = SelectionManager.Views.length < 2 ? [target] : SelectionManager.Views.map(docView => docView.Document); docs.map(doc => (this.layoutDocAcls || doc.dockingConfig ? doc : Doc.GetProto(doc))).forEach(doc => { distributeAcls(acl, permission as SharingPermissions, doc, undefined, this.upgradeNested ? true : undefined); @@ -317,7 +317,7 @@ export class SharingManager extends React.Component<{}> { private focusOn = (contents: string) => { const title = this.targetDoc ? StrCast(this.targetDoc.title) : ''; - const docs = SelectionManager.Views().length > 1 ? SelectionManager.Views().map(docView => docView.props.Document) : [this.targetDoc]; + const docs = SelectionManager.Views.length > 1 ? SelectionManager.Views.map(docView => docView.props.Document) : [this.targetDoc]; return ( { const users = this.individualSort === 'ascending' ? this.users.slice().sort(this.sortUsers) : this.individualSort === 'descending' ? this.users.slice().sort(this.sortUsers).reverse() : this.users; const groups = this.groupSort === 'ascending' ? groupList.slice().sort(this.sortGroups) : this.groupSort === 'descending' ? groupList.slice().sort(this.sortGroups).reverse() : groupList; - let docs = SelectionManager.Views().length < 2 ? [this.targetDoc] : SelectionManager.Views().map(docView => docView.Document); + let docs = SelectionManager.Views.length < 2 ? [this.targetDoc] : SelectionManager.Views.map(docView => docView.Document); if (this.myDocAcls) { const newDocs: Doc[] = []; diff --git a/src/client/util/SnappingManager.ts b/src/client/util/SnappingManager.ts index 44c6aad52..48ec61f85 100644 --- a/src/client/util/SnappingManager.ts +++ b/src/client/util/SnappingManager.ts @@ -2,7 +2,7 @@ import { observable, action, runInAction, reaction, makeObservable } from 'mobx' import { Doc } from '../../fields/Doc'; export class SnappingManager { - static _manager: SnappingManager; + private static _manager: SnappingManager; private static get Instance() { return SnappingManager._manager ?? new SnappingManager(); } @@ -15,7 +15,7 @@ export class SnappingManager { @observable _horizSnapLines: number[] = []; @observable _vertSnapLines: number[] = []; - constructor() { + private constructor() { SnappingManager._manager = this; makeObservable(this); } @@ -26,16 +26,16 @@ export class SnappingManager { this.Instance._vertSnapLines.push(...vertLines); }; - public static get HorizSnapLines() { return SnappingManager.Instance._horizSnapLines; } // prettier-ignore - public static get VertSnapLines() { return SnappingManager.Instance._vertSnapLines; } // prettier-ignore - public static get ShiftKey() { return SnappingManager.Instance._shiftKey; } // prettier-ignore - public static get CtrlKey() { return SnappingManager.Instance._ctrlKey; } // prettier-ignore - public static get IsDragging() { return SnappingManager.Instance._isDragging; } // prettier-ignore - public static get IsResizing() { return SnappingManager.Instance._isResizing; } // prettier-ignore - public static get CanEmbed() { return SnappingManager.Instance._canEmbed; } // prettier-ignore - public static SetShiftKey = (down: boolean) => runInAction(() => (SnappingManager.Instance._shiftKey = down)); - public static SetCtrlKey = (down: boolean) => runInAction(() => (SnappingManager.Instance._ctrlKey = down)); - public static SetIsDragging = (dragging: boolean) => runInAction(() => (SnappingManager.Instance._isDragging = dragging)); - public static SetIsResizing = (doc: Doc | undefined) => runInAction(() => (SnappingManager.Instance._isResizing = doc)); - public static SetCanEmbed = (canEmbed: boolean) => runInAction(() => (SnappingManager.Instance._canEmbed = canEmbed)); + public static get HorizSnapLines() { return this.Instance._horizSnapLines; } // prettier-ignore + public static get VertSnapLines() { return this.Instance._vertSnapLines; } // prettier-ignore + public static get ShiftKey() { return this.Instance._shiftKey; } // prettier-ignore + public static get CtrlKey() { return this.Instance._ctrlKey; } // prettier-ignore + public static get IsDragging() { return this.Instance._isDragging; } // prettier-ignore + public static get IsResizing() { return this.Instance._isResizing; } // prettier-ignore + public static get CanEmbed() { return this.Instance._canEmbed; } // prettier-ignore + public static SetShiftKey = (down: boolean) => runInAction(() => (this.Instance._shiftKey = down)); + public static SetCtrlKey = (down: boolean) => runInAction(() => (this.Instance._ctrlKey = down)); + public static SetIsDragging = (dragging: boolean) => runInAction(() => (this.Instance._isDragging = dragging)); + public static SetIsResizing = (doc: Doc | undefined) => runInAction(() => (this.Instance._isResizing = doc)); + public static SetCanEmbed = (canEmbed: boolean) => runInAction(() => (this.Instance._canEmbed = canEmbed)); } diff --git a/src/client/views/ComponentDecorations.tsx b/src/client/views/ComponentDecorations.tsx index 0a34b283b..ca4e5f2bc 100644 --- a/src/client/views/ComponentDecorations.tsx +++ b/src/client/views/ComponentDecorations.tsx @@ -8,7 +8,7 @@ export class ComponentDecorations extends React.Component<{ boundsTop: number; b static Instance: ComponentDecorations; render() { - const seldoc = SelectionManager.Views().lastElement(); + const seldoc = SelectionManager.Views.lastElement(); return seldoc?.ComponentView?.componentUI?.(this.props.boundsLeft, this.props.boundsTop) ?? null; } } diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 47ec0f1b4..a8ad4150e 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -375,7 +375,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV ); }; return !targetDoc ? null : ( - {`Pin Document ${SelectionManager.Views().length > 1 ? 'multiple documents' : ''} to Trail`}
}> + {`Pin Document ${SelectionManager.Views.length > 1 ? 'multiple documents' : ''} to Trail`}
}>
{ @@ -526,7 +526,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV } openContextMenu = (e: PointerEvent) => { - let child = SelectionManager.Views()[0].ContentDiv!.children[0]; + let child = SelectionManager.Views[0].ContentDiv!.children[0]; while (child.children.length) { const next = Array.from(child.children).find(c => c.className?.toString().includes('SVGAnimatedString') || typeof c.className === 'string'); if (next?.className?.toString().includes(DocumentView.ROOT_DIV)) break; @@ -606,7 +606,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV Doc.noviceMode ? null :
{this.templateButton}
/*
{this.metadataButton}
*/ } - {!SelectionManager.Views()?.some(v => v.allLinks.length) ? null :
{this.followLinkButton}
} + {!SelectionManager.Views?.some(v => v.allLinks.length) ? null :
{this.followLinkButton}
}
{this.pinButton}
{this.recordButton}
{!Doc.UserDoc()['documentLinksButton-fullMenu'] ? null :
{this.shareButton}
} diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index b93df36eb..8bcc1cb56 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -77,7 +77,7 @@ export class DocumentDecorations extends React.Component center.x+x || this.Bounds.r < center.x+x || this.Bounds.y > center.y+y || this.Bounds.b < center.y+y ))); @@ -99,7 +99,7 @@ export class DocumentDecorations extends React.Component dv._props.renderDepth > 0) .map(dv => dv.getBounds()) .reduce((bounds, rect) => !rect ? bounds @@ -107,7 +107,7 @@ export class DocumentDecorations extends React.Component titleFieldKey && - SelectionManager.Views().forEach(d => { + SelectionManager.Views.forEach(d => { if (titleFieldKey === 'title') { d.dataDoc.title_custom = !this._accumulatedTitle.startsWith('-'); if (StrCast(d.Document.title).startsWith('@') && !this._accumulatedTitle.startsWith('@')) { @@ -165,7 +165,7 @@ export class DocumentDecorations extends React.Component { - const effectiveLayoutAcl = GetEffectiveAcl(SelectionManager.Views()[0].Document); + const effectiveLayoutAcl = GetEffectiveAcl(SelectionManager.Views[0].Document); if (effectiveLayoutAcl == AclAdmin || effectiveLayoutAcl == AclEdit || effectiveLayoutAcl == AclAugment) { setupMoveUpEvents(this, e, e => this.onBackgroundMove(true, e), emptyFunction, emptyFunction); e.stopPropagation(); @@ -173,7 +173,7 @@ export class DocumentDecorations extends React.Component { - const effectiveLayoutAcl = GetEffectiveAcl(SelectionManager.Views()[0].Document); + const effectiveLayoutAcl = GetEffectiveAcl(SelectionManager.Views[0].Document); if (effectiveLayoutAcl == AclAdmin || effectiveLayoutAcl == AclEdit || effectiveLayoutAcl == AclAugment) { setupMoveUpEvents( this, @@ -196,17 +196,17 @@ export class DocumentDecorations extends React.Component { - const dragDocView = SelectionManager.Views()[0]; + const dragDocView = SelectionManager.Views[0]; const effectiveLayoutAcl = GetEffectiveAcl(dragDocView.Document); if (effectiveLayoutAcl != AclAdmin && effectiveLayoutAcl != AclEdit && effectiveLayoutAcl != AclAugment) { return false; } const containers = new Set(); - SelectionManager.Views().forEach(v => containers.add(DocCast(v.Document.embedContainer))); + SelectionManager.Views.forEach(v => containers.add(DocCast(v.Document.embedContainer))); if (containers.size > 1) return false; const { left, top } = dragDocView.getBounds() || { left: 0, top: 0 }; const dragData = new DragManager.DocumentDragData( - SelectionManager.Views().map(dv => dv.Document), + SelectionManager.Views.map(dv => dv.Document), dragDocView._props.dropAction ); dragData.offset = dragDocView._props.ScreenToLocalTransform().transformDirection(e.x - left, e.y - top); @@ -216,7 +216,7 @@ export class DocumentDecorations extends React.Component dv.ContentDiv!), + SelectionManager.Views.map(dv => dv.ContentDiv!), dragData, e.x, e.y, @@ -231,7 +231,7 @@ export class DocumentDecorations extends React.Component { - const views = SelectionManager.Views().filter(v => v && v._props.renderDepth > 0); + const views = SelectionManager.Views.filter(v => v && v._props.renderDepth > 0); if (forceDeleteOrIconify === false && this._iconifyBatch) return; this._deleteAfterIconify = forceDeleteOrIconify || this._iconifyBatch ? true : false; var iconifyingCount = views.length; @@ -264,11 +264,11 @@ export class DocumentDecorations extends React.Component { - setupMoveUpEvents(this, e, () => DragManager.StartWindowDrag?.(e, [SelectionManager.Views().lastElement().Document]) ?? false, emptyFunction, this.onMaximizeClick, false, false); + setupMoveUpEvents(this, e, () => DragManager.StartWindowDrag?.(e, [SelectionManager.Views.lastElement().Document]) ?? false, emptyFunction, this.onMaximizeClick, false, false); e.stopPropagation(); }; onMaximizeClick = (e: any): void => { - const selectedDocs = SelectionManager.Views(); + const selectedDocs = SelectionManager.Views; if (selectedDocs.length) { if (e.ctrlKey) { // open an embedding in a new tab with Ctrl Key @@ -300,11 +300,11 @@ export class DocumentDecorations extends React.Component { - SelectionManager.Views().forEach(dv => dv?.iconify()); + SelectionManager.Views.forEach(dv => dv?.iconify()); SelectionManager.DeselectAll(); }; - onSelectContainerDocClick = () => SelectionManager.Views()?.[0]?._props.docViewPath?.().lastElement()?.select(false); + onSelectContainerDocClick = () => SelectionManager.Views?.[0]?._props.docViewPath?.().lastElement()?.select(false); /** * sets up events when user clicks on the border radius editor */ @@ -319,7 +319,7 @@ export class DocumentDecorations extends React.Component { + SelectionManager.Docs.map(doc => { const docMax = Math.min(NumCast(doc.width) / 2, NumCast(doc.height) / 2); const radius = Math.min(1, dist / maxDist) * docMax; // set radius based on ratio of drag distance to half diagonal distance of bounding box doc.layout_borderRounding = `${radius}px`; @@ -344,7 +344,7 @@ export class DocumentDecorations extends React.Component UndoManager.RunInBatch( - () => SelectionManager.Docs().forEach(doc => + () => SelectionManager.Docs.forEach(doc => doc._pointerEvents = (doc._lockedPosition = !doc._lockedPosition)? 'none' : undefined ), 'toggleBackground' ) // prettier-ignore ); @@ -362,7 +362,7 @@ export class DocumentDecorations extends React.Component { this._isRotating = true; - const seldocview = SelectionManager.Views()[0]; + const seldocview = SelectionManager.Views[0]; setupMoveUpEvents( this, e, @@ -378,11 +378,11 @@ export class DocumentDecorations extends React.Component i.ComponentView instanceof InkingStroke); + const selectedInk = SelectionManager.Views.filter(i => i.ComponentView instanceof InkingStroke); const centerPoint = this.rotCenter.slice(); const infos = new Map(); - const seldocview = SelectionManager.Views()[0]; - SelectionManager.Views().forEach(dv => { + const seldocview = SelectionManager.Views[0]; + SelectionManager.Views.forEach(dv => { const accumRot = (NumCast(dv.Document._rotation) / 180) * Math.PI; const localRotCtr = dv._props.ScreenToLocalTransform().transformPoint(rcScreen.X, rcScreen.Y); const localRotCtrOffset = [localRotCtr[0] - NumCast(dv.Document.width) / 2, localRotCtr[1] - NumCast(dv.Document.height) / 2]; @@ -391,7 +391,7 @@ export class DocumentDecorations extends React.Component { - SelectionManager.Views().forEach( + SelectionManager.Views.forEach( action(dv => { const { unrotatedDocPos, startRotCtr, accumRot } = infos.get(dv.Document)!; const endRotCtr = Utils.rotPt(startRotCtr.x, startRotCtr.y, isAbs ? angle : accumRot + angle); @@ -439,7 +439,7 @@ export class DocumentDecorations extends React.Component { - SnappingManager.SetIsResizing(SelectionManager.Docs().lastElement()); + SnappingManager.SetIsResizing(SelectionManager.Docs.lastElement()); setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction); e.stopPropagation(); DocumentView.Interacting = true; // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them @@ -448,7 +448,7 @@ export class DocumentDecorations extends React.Component docView.CollectionFreeFormView?.dragStarting(false, false)); + SelectionManager.Views.forEach(docView => docView.CollectionFreeFormView?.dragStarting(false, false)); }; projectDragToAspect = (e: PointerEvent, docView: DocumentView, fixedAspect: number) => { @@ -466,7 +466,7 @@ export class DocumentDecorations extends React.Component { - const first = SelectionManager.Views()[0]; + const first = SelectionManager.Views[0]; const effectiveAcl = GetEffectiveAcl(first.Document); if (!(effectiveAcl == AclAdmin || effectiveAcl == AclEdit || effectiveAcl == AclAugment)) return false; if (!first) return false; @@ -483,10 +483,10 @@ export class DocumentDecorations extends React.Component { // resize selected docs if we're not in the middle of a resize (ie, throttle input events to frame rate) this._interactionLock = true; this._snapPt = thisPt; - e.ctrlKey && (SelectionManager.Views().forEach(docView => !Doc.NativeHeight(docView.Document) && docView.toggleNativeDimensions())); - const fixedAspect = SelectionManager.Docs().some(this.hasFixedAspect); + e.ctrlKey && (SelectionManager.Views.forEach(docView => !Doc.NativeHeight(docView.Document) && docView.toggleNativeDimensions())); + const fixedAspect = SelectionManager.Docs.some(this.hasFixedAspect); const scaleAspect = {x:scale.x === 1 && fixedAspect ? scale.y : scale.x, y: scale.x !== 1 && fixedAspect ? scale.x : scale.y}; - SelectionManager.Views().forEach(docView => + SelectionManager.Views.forEach(docView => this.resizeView(docView, refPt, scaleAspect, { dragHdl, ctrlKey:e.ctrlKey })); // prettier-ignore await new Promise(res => setTimeout(() => res(this._interactionLock = undefined))); }); // prettier-ignore @@ -600,7 +600,7 @@ export class DocumentDecorations extends React.Component NumCast(doc._height) < 20 && (doc._layout_autoHeight = true)); + SelectionManager.Docs.forEach(doc => NumCast(doc._height) < 20 && (doc._layout_autoHeight = true)); //need to change points for resize, or else rotation/control points will fail. this._inkDragDocs .map(oldbds => ({ oldbds, inkPts: Cast(oldbds.doc.data, InkField)?.inkData || [] })) @@ -617,8 +617,8 @@ export class DocumentDecorations extends React.Component 1 ? '-multiple-' : '-unset-'; + return SelectionManager.Views.length > 1 ? '-multiple-' : '-unset-'; } @computed get rotCenter() { - const lastView = SelectionManager.Views().lastElement(); + const lastView = SelectionManager.Views.lastElement(); if (lastView) { const invXf = lastView._props.ScreenToLocalTransform().inverse(); const seldoc = lastView.layoutDoc; @@ -643,7 +643,7 @@ export class DocumentDecorations extends React.Component (this._showNothing = true))); return null; @@ -667,7 +667,7 @@ export class DocumentDecorations extends React.Component docView.Document._dragOnlyWithinContainer || docView.Document.isGroup || docView.Document.layout_hideOpenButton) || + SelectionManager.Views.some(docView => docView.Document._dragOnlyWithinContainer || docView.Document.isGroup || docView.Document.layout_hideOpenButton) || this._isRounding || this._isRotating; const hideDeleteButton = @@ -677,7 +677,7 @@ export class DocumentDecorations extends React.Component { + SelectionManager.Views.some(docView => { const collectionAcl = docView._props.docViewPath()?.lastElement() ? GetEffectiveAcl(docView._props.docViewPath().lastElement().dataDoc) : AclEdit; return collectionAcl !== AclAdmin && collectionAcl !== AclEdit && GetEffectiveAcl(docView.Document) !== AclAdmin; }); @@ -692,7 +692,7 @@ export class DocumentDecorations extends React.Component 135 && seldocview.CollectionFreeFormDocumentView; const useRotation = !hideResizers && seldocview.Document.type !== DocumentType.EQUATION && seldocview.CollectionFreeFormDocumentView; // when do we want an object to not rotate? - const rotation = SelectionManager.Views().length == 1 ? seldocview.screenToLocalTransform().inverse().RotateDeg : 0; + const rotation = SelectionManager.Views.length == 1 ? seldocview.screenToLocalTransform().inverse().RotateDeg : 0; // Radius constants const useRounding = seldocview.ComponentView instanceof ImageBox || seldocview.ComponentView instanceof FormattedTextBox || seldocview.ComponentView instanceof CollectionFreeFormView; @@ -754,7 +754,7 @@ export class DocumentDecorations extends React.Component v.CollectionFreeFormDocumentView); + const freeformDoc = SelectionManager.Views.some(v => v.CollectionFreeFormDocumentView); return (
- + SelectionManager.Views} />
)}
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 174f7951d..4015fb321 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -90,8 +90,8 @@ export class KeyManager { }); nudge = (x: number, y: number, label: string) => { - const nudgeable = SelectionManager.Views().some(dv => dv.CollectionFreeFormDocumentView?.nudge); - nudgeable && UndoManager.RunInBatch(() => SelectionManager.Views().map(dv => dv.CollectionFreeFormDocumentView?.nudge(x, y)), label); + const nudgeable = SelectionManager.Views.some(dv => dv.CollectionFreeFormDocumentView?.nudge); + nudgeable && UndoManager.RunInBatch(() => SelectionManager.Views.map(dv => dv.CollectionFreeFormDocumentView?.nudge(x, y)), label); return { stopPropagation: nudgeable, preventDefault: nudgeable }; }; @@ -99,18 +99,18 @@ export class KeyManager { switch (keyname) { case 'u': if (document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') { - const ungroupings = SelectionManager.Views(); + const ungroupings = SelectionManager.Views; UndoManager.RunInBatch(() => ungroupings.map(dv => (dv.layoutDoc.group = undefined)), 'ungroup'); SelectionManager.DeselectAll(); } break; case 'g': if (document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') { - const selected = SelectionManager.Views(); + const selected = SelectionManager.Views; const collectionView = selected.reduce((col, dv) => (col === null || dv.CollectionFreeFormView === col ? dv.CollectionFreeFormView : undefined), null as null | undefined | CollectionFreeFormView); if (collectionView) { UndoManager.RunInBatch(() => - collectionView._marqueeViewRef.current?.collection(e, true, SelectionManager.Docs()) + collectionView._marqueeViewRef.current?.collection(e, true, SelectionManager.Docs) , 'grouping'); break; } @@ -182,14 +182,14 @@ export class KeyManager { case 'arrowdown': return this.nudge(0, 10, 'nudge down'); case 'u' : if (document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') { - UndoManager.RunInBatch(() => SelectionManager.Docs().forEach(doc => (doc.group = undefined)), 'unggroup'); + UndoManager.RunInBatch(() => SelectionManager.Docs.forEach(doc => (doc.group = undefined)), 'unggroup'); SelectionManager.DeselectAll(); } break; case 'g': if (document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') { const randomGroup = random(0, 1000); - UndoManager.RunInBatch(() => SelectionManager.Docs().forEach(doc => (doc.group = randomGroup)), 'group'); + UndoManager.RunInBatch(() => SelectionManager.Docs.forEach(doc => (doc.group = randomGroup)), 'group'); SelectionManager.DeselectAll(); } break; @@ -208,7 +208,7 @@ export class KeyManager { switch (keyname) { case 'ƒ': case 'f': - const dv = SelectionManager.Views()?.[0]; + const dv = SelectionManager.Views?.[0]; UndoManager.RunInBatch(() => dv.CollectionFreeFormDocumentView?.float(), 'float'); } @@ -256,8 +256,8 @@ export class KeyManager { } break; case 'f': - if (SelectionManager.Views().length === 1 && SelectionManager.Views()[0].ComponentView?.search) { - SelectionManager.Views()[0].ComponentView?.search?.('', false, false); + if (SelectionManager.Views.length === 1 && SelectionManager.Views[0].ComponentView?.search) { + SelectionManager.Views[0].ComponentView?.search?.('', false, false); } else { const searchBtn = DocListCast(Doc.MyLeftSidebarMenu.data).find(d => d.target === Doc.MySearcher); if (searchBtn) { @@ -299,17 +299,11 @@ export class KeyManager { preventDefault = false; break; case 'x': - if (SelectionManager.Views().length) { + if (SelectionManager.Views.length) { const bds = DocumentDecorations.Instance.Bounds; - const pt = SelectionManager.Views()[0] - .props.ScreenToLocalTransform() - .transformPoint(bds.x + (bds.r - bds.x) / 2, bds.y + (bds.b - bds.y) / 2); - const text = - `__DashDocId(${pt?.[0] || 0},${pt?.[1] || 0}):` + - SelectionManager.Views() - .map(dv => dv.Document[Id]) - .join(':'); - SelectionManager.Views().length && navigator.clipboard.writeText(text); + const pt = SelectionManager.Views[0].props.ScreenToLocalTransform().transformPoint(bds.x + (bds.r - bds.x) / 2, bds.y + (bds.b - bds.y) / 2); + const text = `__DashDocId(${pt?.[0] || 0},${pt?.[1] || 0}):` + SelectionManager.Views.map(dv => dv.Document[Id]).join(':'); + SelectionManager.Views.length && navigator.clipboard.writeText(text); DocumentDecorations.Instance.onCloseClick(true); stopPropagation = false; preventDefault = false; @@ -318,15 +312,9 @@ export class KeyManager { case 'c': if ((document.activeElement as any)?.type !== 'text' && !AnchorMenu.Instance.Active && DocumentDecorations.Instance.Bounds.r - DocumentDecorations.Instance.Bounds.x > 2) { const bds = DocumentDecorations.Instance.Bounds; - const pt = SelectionManager.Views()[0] - .props.ScreenToLocalTransform() - .transformPoint(bds.x + (bds.r - bds.x) / 2, bds.y + (bds.b - bds.y) / 2); - const text = - `__DashCloneId(${pt?.[0] || 0},${pt?.[1] || 0}):` + - SelectionManager.Views() - .map(dv => dv.Document[Id]) - .join(':'); - SelectionManager.Views().length && navigator.clipboard.writeText(text); + const pt = SelectionManager.Views[0].props.ScreenToLocalTransform().transformPoint(bds.x + (bds.r - bds.x) / 2, bds.y + (bds.b - bds.y) / 2); + const text = `__DashCloneId(${pt?.[0] || 0},${pt?.[1] || 0}):` + SelectionManager.Views.map(dv => dv.Document[Id]).join(':'); + SelectionManager.Views.length && navigator.clipboard.writeText(text); stopPropagation = false; } preventDefault = false; @@ -344,7 +332,7 @@ export class KeyManager { if (!plain) return; const clone = plain.startsWith('__DashCloneId('); const docids = plain.split(':'); // hack! docids[0] is the top left of the selection rectangle - const addDocument = SelectionManager.Views().lastElement()?.ComponentView?.addDocument; + const addDocument = SelectionManager.Views.lastElement()?.ComponentView?.addDocument; if (addDocument && (plain.startsWith('__DashDocId(') || clone)) { Doc.Paste(docids.slice(1), clone, addDocument); } diff --git a/src/client/views/InkControlPtHandles.tsx b/src/client/views/InkControlPtHandles.tsx index b835a3798..a5c2d99d2 100644 --- a/src/client/views/InkControlPtHandles.tsx +++ b/src/client/views/InkControlPtHandles.tsx @@ -208,8 +208,8 @@ export class InkEndPtHandles extends React.Component { const v1n = { X: v1.X / v1len, Y: v1.Y / v1len }; const v2n = { X: v2.X / v2len, Y: v2.Y / v2len }; const angle = Math.acos(v1n.X * v2n.X + v1n.Y * v2n.Y) * Math.sign(v1.X * v2.Y - v2.X * v1.Y); - InkStrokeProperties.Instance.stretchInk(SelectionManager.Views(), scaling, p2, v1n, e.shiftKey); - InkStrokeProperties.Instance.rotateInk(SelectionManager.Views(), angle, pt2()); // bcz: call pt2() func here because pt2 will have changed from previous stretchInk call + InkStrokeProperties.Instance.stretchInk(SelectionManager.Views, scaling, p2, v1n, e.shiftKey); + InkStrokeProperties.Instance.rotateInk(SelectionManager.Views, angle, pt2()); // bcz: call pt2() func here because pt2 will have changed from previous stretchInk call return false; }), action(() => { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 73a6b687a..4f96b9234 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -145,7 +145,7 @@ export class MainView extends React.Component { componentDidMount() { reaction( // when a multi-selection occurs, remove focus from all active elements to allow keyboad input to go only to global key manager to act upon selection - () => SelectionManager.Views().slice(), + () => SelectionManager.Views.slice(), views => views.length > 1 && (document.activeElement as any)?.blur !== undefined && (document.activeElement as any)!.blur() ); const scriptTag = document.createElement('script'); @@ -924,9 +924,7 @@ export class MainView extends React.Component { ); } @computed get snapLines() { - SnappingManager.IsDragging; - SnappingManager.IsResizing; - const dragged = DragManager.docsBeingDragged.lastElement() ?? SelectionManager.Docs().lastElement(); + const dragged = DragManager.docsBeingDragged.lastElement() ?? SelectionManager.Docs.lastElement(); const dragPar = dragged ? DocumentManager.Instance.getDocumentView(dragged)?.CollectionFreeFormView : undefined; return !dragPar?.layoutDoc.freeform_snapLines ? null : (
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 7824ad1c8..8540e81e1 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -40,13 +40,13 @@ export class PropertiesButtons extends React.Component<{}, {}> { @observable public static Instance: PropertiesButtons; @computed get selectedDoc() { - return SelectionManager.SelectedSchemaDoc() || SelectionManager.Views().lastElement()?.Document; + return SelectionManager.SelectedSchemaDoc || SelectionManager.Views.lastElement()?.Document; } @computed get selectedLayoutDoc() { - return SelectionManager.SelectedSchemaDoc() || SelectionManager.Views().lastElement()?.layoutDoc; + return SelectionManager.SelectedSchemaDoc || SelectionManager.Views.lastElement()?.layoutDoc; } @computed get selectedTabView() { - return !SelectionManager.SelectedSchemaDoc() && SelectionManager.Views().lastElement()?.topMost; + return !SelectionManager.SelectedSchemaDoc && SelectionManager.Views.lastElement()?.topMost; } propertyToggleBtn = (label: (on?: any) => string, property: string, tooltip: (on?: any) => string, icon: (on?: any) => any, onClick?: (dv: Opt, doc: Doc, property: string) => void, useUserDoc?: boolean) => { @@ -64,8 +64,8 @@ export class PropertiesButtons extends React.Component<{}, {}> { fillWidth={true} toggleType={ToggleType.BUTTON} onClick={undoable(() => { - if (SelectionManager.Views().length > 1) { - SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.Document, property)); + if (SelectionManager.Views.length > 1) { + SelectionManager.Views.forEach(dv => (onClick ?? onPropToggle)(dv, dv.Document, property)); } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property); }, property)} /> @@ -82,7 +82,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { on => `${on ? 'Set' : 'Remove'} lightbox flag`, on => 'window-restore', onClick => { - SelectionManager.Views().forEach(dv => { + SelectionManager.Views.forEach(dv => { const containerDoc = dv.Document; //containerDoc.followAllLinks = // containerDoc.noShadow = @@ -200,7 +200,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { // on => `${on ? 'Set' : 'Remove'} lightbox flag`, // on => 'window-restore', // onClick => { - // SelectionManager.Views().forEach(dv => { + // SelectionManager.Views.forEach(dv => { // const containerDoc = dv.Document; // //containerDoc.followAllLinks = // // containerDoc.noShadow = @@ -352,8 +352,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { @undoBatch handlePerspectiveChange = (e: any) => { this.selectedDoc && (this.selectedDoc._type_collection = e.target.value); - SelectionManager.Views() - .filter(dv => dv.docView) + SelectionManager.Views.filter(dv => dv.docView) .map(dv => dv.docView!) .forEach(docView => (docView.layoutDoc._type_collection = e.target.value)); }; @@ -416,8 +415,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { @undoBatch @action handleOptionChange = (onClick: string) => { - SelectionManager.Views() - .filter(dv => dv.docView) + SelectionManager.Views.filter(dv => dv.docView) .map(dv => dv.docView!) .forEach(docView => { const linkButton = IsFollowLinkScript(docView.props.Document.onClick); @@ -443,7 +441,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { @undoBatch editOnClickScript = () => { - if (SelectionManager.Views().length) SelectionManager.Views().forEach(dv => DocUtils.makeCustomViewClicked(dv.Document, undefined, 'onClick')); + if (SelectionManager.Views.length) SelectionManager.Views.forEach(dv => DocUtils.makeCustomViewClicked(dv.Document, undefined, 'onClick')); else this.selectedDoc && DocUtils.makeCustomViewClicked(this.selectedDoc, undefined, 'onClick'); }; diff --git a/src/client/views/PropertiesDocBacklinksSelector.tsx b/src/client/views/PropertiesDocBacklinksSelector.tsx index b1e99c3f5..58d3b72e8 100644 --- a/src/client/views/PropertiesDocBacklinksSelector.tsx +++ b/src/client/views/PropertiesDocBacklinksSelector.tsx @@ -34,10 +34,10 @@ export class PropertiesDocBacklinksSelector extends React.Component {this.props.hideTitle ? null :

Contexts:

} - +
); } diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index b4c591b89..442d09739 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -67,14 +67,14 @@ export class PropertiesView extends React.Component { } @computed get selectedDoc() { - return SelectionManager.SelectedSchemaDoc() || this.selectedDocumentView?.Document || Doc.ActiveDashboard; + return SelectionManager.SelectedSchemaDoc || this.selectedDocumentView?.Document || Doc.ActiveDashboard; } @computed get selectedLayoutDoc() { - return SelectionManager.SelectedSchemaDoc() || this.selectedDocumentView?.layoutDoc || Doc.ActiveDashboard; + return SelectionManager.SelectedSchemaDoc || this.selectedDocumentView?.layoutDoc || Doc.ActiveDashboard; } @computed get selectedDocumentView() { - if (SelectionManager.Views().length) return SelectionManager.Views()[0]; + if (SelectionManager.Views.length) return SelectionManager.Views[0]; if (PresBox.Instance?.selectedArray.size) return DocumentManager.Instance.getDocumentView(PresBox.Instance.Document); return undefined; } @@ -177,7 +177,7 @@ export class PropertiesView extends React.Component { const rows: JSX.Element[] = []; if (this.dataDoc && this.selectedDoc) { const ids = new Set(reqdKeys); - const docs: Doc[] = SelectionManager.Views().length < 2 ? [this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc] : SelectionManager.Views().map(dv => (this.layoutFields ? dv.layoutDoc : dv.dataDoc)); + const docs: Doc[] = SelectionManager.Views.length < 2 ? [this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc] : SelectionManager.Views.map(dv => (this.layoutFields ? dv.layoutDoc : dv.dataDoc)); docs.forEach(doc => Object.keys(doc).forEach(key => doc[key] !== ComputedField.undefined && ids.add(key))); // prettier-ignore @@ -226,7 +226,7 @@ export class PropertiesView extends React.Component { @undoBatch setKeyValue = (value: string) => { - const docs = SelectionManager.Views().length < 2 && this.selectedDoc ? [this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc!] : SelectionManager.Views().map(dv => (this.layoutFields ? dv.layoutDoc : dv.dataDoc)); + const docs = SelectionManager.Views.length < 2 && this.selectedDoc ? [this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc!] : SelectionManager.Views.map(dv => (this.layoutFields ? dv.layoutDoc : dv.dataDoc)); docs.forEach(doc => { if (value.indexOf(':') !== -1) { const newVal = value[0].toUpperCase() + value.substring(1, value.length); @@ -290,7 +290,7 @@ export class PropertiesView extends React.Component { } @computed get layoutPreview() { - if (SelectionManager.Views().length > 1) { + if (SelectionManager.Views.length > 1) { return '-- multiple selected --'; } if (this.selectedDoc) { @@ -339,7 +339,7 @@ export class PropertiesView extends React.Component { */ @undoBatch changePermissions = (e: any, user: string) => { - const docs = SelectionManager.Views().length < 2 ? [this.selectedDoc] : SelectionManager.Views().map(dv => (this.layoutDocAcls ? dv.layoutDoc : dv.dataDoc)); + const docs = SelectionManager.Views.length < 2 ? [this.selectedDoc] : SelectionManager.Views.map(dv => (this.layoutDocAcls ? dv.layoutDoc : dv.dataDoc)); SharingManager.Instance.shareFromPropertiesSidebar(user, e.currentTarget.value as SharingPermissions, docs, this.layoutDocAcls); }; @@ -457,7 +457,7 @@ export class PropertiesView extends React.Component { */ @computed get sharingTable() { // all selected docs - const docs = SelectionManager.Views().length < 2 && this.selectedDoc ? [this.selectedDoc] : SelectionManager.Views().map(docView => docView.Document); + const docs = SelectionManager.Views.length < 2 && this.selectedDoc ? [this.selectedDoc] : SelectionManager.Views.map(docView => docView.Document); const target = docs[0]; const showAdmin = GetEffectiveAcl(target) == AclAdmin; @@ -573,7 +573,7 @@ export class PropertiesView extends React.Component { @computed get editableTitle() { const titles = new Set(); - SelectionManager.Views().forEach(dv => titles.add(StrCast(dv.Document.title))); + SelectionManager.Views.forEach(dv => titles.add(StrCast(dv.Document.title))); const title = Array.from(titles.keys()).length > 1 ? '--multiple selected--' : StrCast(this.selectedDoc?.title); return (
@@ -628,8 +628,8 @@ export class PropertiesView extends React.Component { @undoBatch setTitle = (value: string | number) => { - if (SelectionManager.Views().length > 1) { - SelectionManager.Views().map(dv => Doc.SetInPlace(dv.Document, 'title', value, true)); + if (SelectionManager.Views.length > 1) { + SelectionManager.Views.map(dv => Doc.SetInPlace(dv.Document, 'title', value, true)); } else if (this.dataDoc) { if (this.selectedDoc) Doc.SetInPlace(this.selectedDoc, 'title', value, true); else KeyValueBox.SetField(this.dataDoc, 'title', value as string, true); diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index f8e80ed87..08fcd544e 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -49,7 +49,7 @@ export class CollectionMenu extends AntimodeMenu { componentDidMount() { reaction( - () => SelectionManager.Views().lastElement(), + () => SelectionManager.Views.lastElement(), view => view && this.SetSelection(view) ); } diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index a74c6858c..79b15fdb1 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -344,7 +344,7 @@ export function CollectionSubView(moreProps?: X) { } }); } else { - const srcWeb = SelectionManager.Views().lastElement(); + const srcWeb = SelectionManager.Views.lastElement(); const srcUrl = (srcWeb?.Document.data as WebField)?.url?.href?.match(/https?:\/\/[^/]*/)?.[0]; const reg = new RegExp(Utils.prepend(''), 'g'); const modHtml = srcUrl ? html.replace(reg, srcUrl) : html; @@ -353,7 +353,7 @@ export function CollectionSubView(moreProps?: X) { Doc.GetProto(htmlDoc)['data-text'] = Doc.GetProto(htmlDoc).text = text; addDocument(htmlDoc); if (srcWeb) { - const iframe = SelectionManager.Views()[0].ContentDiv?.getElementsByTagName('iframe')?.[0]; + const iframe = SelectionManager.Views[0].ContentDiv?.getElementsByTagName('iframe')?.[0]; const focusNode = iframe?.contentDocument?.getSelection()?.focusNode as any; if (focusNode) { const anchor = srcWeb?.ComponentView?.getAnchor?.(true); diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 917241c5f..658d60523 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -168,7 +168,7 @@ export class CollectionTreeView extends CollectionSubView !docs.includes(v)); - if ((doc instanceof Doc ? [doc] : doc).some(doc => SelectionManager.Views().some(dv => Doc.AreProtosEqual(dv.Document, doc)))) SelectionManager.DeselectAll(); + if ((doc instanceof Doc ? [doc] : doc).some(doc => SelectionManager.Views.some(dv => Doc.AreProtosEqual(dv.Document, doc)))) SelectionManager.DeselectAll(); if (result.length !== value.length && doc instanceof Doc) { const ind = DocListCast(targetDataDoc[this._props.fieldKey]).indexOf(doc); const prev = ind && DocListCast(targetDataDoc[this._props.fieldKey])[ind - 1]; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index ec31f77b2..aa40fb809 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1961,18 +1961,18 @@ export function CollectionBrowseClick(dv: DocumentView, clientX: number, clientY } ScriptingGlobals.add(CollectionBrowseClick); ScriptingGlobals.add(function nextKeyFrame(readOnly: boolean) { - !readOnly && (SelectionManager.Views()[0].ComponentView as CollectionFreeFormView)?.changeKeyFrame(); + !readOnly && (SelectionManager.Views[0].ComponentView as CollectionFreeFormView)?.changeKeyFrame(); }); ScriptingGlobals.add(function prevKeyFrame(readOnly: boolean) { - !readOnly && (SelectionManager.Views()[0].ComponentView as CollectionFreeFormView)?.changeKeyFrame(true); + !readOnly && (SelectionManager.Views[0].ComponentView as CollectionFreeFormView)?.changeKeyFrame(true); }); ScriptingGlobals.add(function curKeyFrame(readOnly: boolean) { - const selView = SelectionManager.Views(); + const selView = SelectionManager.Views; if (readOnly) return selView[0].ComponentView?.getKeyFrameEditing?.() ? Colors.MEDIUM_BLUE : 'transparent'; runInAction(() => selView[0].ComponentView?.setKeyFrameEditing?.(!selView[0].ComponentView?.getKeyFrameEditing?.())); }); ScriptingGlobals.add(function pinWithView(pinContent: boolean) { - SelectionManager.Views().forEach(view => + SelectionManager.Views.forEach(view => view.props.pinToPres(view.Document, { currentFrame: Cast(view.Document.currentFrame, 'number', null), pinData: { @@ -1984,8 +1984,8 @@ ScriptingGlobals.add(function pinWithView(pinContent: boolean) { ); }); ScriptingGlobals.add(function bringToFront() { - SelectionManager.Views().forEach(view => view.CollectionFreeFormView?.bringToFront(view.Document)); + SelectionManager.Views.forEach(view => view.CollectionFreeFormView?.bringToFront(view.Document)); }); ScriptingGlobals.add(function sendToBack(doc: Doc) { - SelectionManager.Views().forEach(view => view.CollectionFreeFormView?.bringToFront(view.Document, true)); + SelectionManager.Views.forEach(view => view.CollectionFreeFormView?.bringToFront(view.Document, true)); }); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 9f316bef3..10beb120a 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -176,7 +176,7 @@ export class MarqueeView extends React.Component Doc.AreProtosEqual(DocCast(doc.embedContainer), this.Document)); + const selected = SelectionManager.Docs.filter(doc => Doc.AreProtosEqual(DocCast(doc.embedContainer), this.Document)); if (!selected.length) { - for (const sel of SelectionManager.Docs()) { + for (const sel of SelectionManager.Docs) { const contextPath = DocumentManager.GetContextPath(sel, true); if (contextPath.includes(this.Document)) { const parentInd = contextPath.indexOf(this.Document); @@ -107,7 +119,7 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get tableWidth() { - return this.props.PanelWidth() - this.previewWidth - (this.previewWidth === 0 ? 0 : CollectionSchemaView._previewDividerWidth); + return this._props.PanelWidth() - this.previewWidth - (this.previewWidth === 0 ? 0 : CollectionSchemaView._previewDividerWidth); } @computed get columnKeys() { @@ -139,9 +151,8 @@ export class CollectionSchemaView extends CollectionSubView() { return BoolCast(this.layoutDoc.sortDesc); } - @action componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentView?.(this); document.addEventListener('keydown', this.onKeyDown); Object.entries(this._documentOptions).forEach((pair: [string, FInfo]) => this.fieldInfos.set(pair[0], pair[1])); @@ -239,7 +250,6 @@ export class CollectionSchemaView extends CollectionSubView() { }; @undoBatch - @action setColumnSort = (field: string | undefined, desc: boolean = false) => { this.layoutDoc.sortField = field; this.layoutDoc.sortDesc = desc; @@ -248,7 +258,6 @@ export class CollectionSchemaView extends CollectionSubView() { addRow = (doc: Doc | Doc[]) => this.addDocument(doc); @undoBatch - @action changeColumnKey = (index: number, newKey: string, defaultVal?: any) => { if (!this.documentKeys.includes(newKey)) { this.addNewKey(newKey, defaultVal); @@ -260,7 +269,6 @@ export class CollectionSchemaView extends CollectionSubView() { }; @undoBatch - @action addColumn = (key: string, defaultVal?: any) => { if (!this.documentKeys.includes(key)) { this.addNewKey(key, defaultVal); @@ -281,7 +289,6 @@ export class CollectionSchemaView extends CollectionSubView() { addNewKey = (key: string, defaultVal: any) => this.childDocs.forEach(doc => (doc[key] = defaultVal)); @undoBatch - @action removeColumn = (index: number) => { if (this.columnKeys.length === 1) return; const currWidths = this.storedColumnWidths.slice(); @@ -320,8 +327,8 @@ export class CollectionSchemaView extends CollectionSubView() { change = this._displayColumnWidths[shrinking] - CollectionSchemaView._minColWidth; } - this._displayColumnWidths[shrinking] -= change * this.props.ScreenToLocalTransform().Scale; - this._displayColumnWidths[growing] += change * this.props.ScreenToLocalTransform().Scale; + this._displayColumnWidths[shrinking] -= change * this._props.ScreenToLocalTransform().Scale; + this._displayColumnWidths[growing] += change * this._props.ScreenToLocalTransform().Scale; return false; } @@ -335,7 +342,6 @@ export class CollectionSchemaView extends CollectionSubView() { }; @undoBatch - @action moveColumn = (fromIndex: number, toIndex: number) => { let currKeys = this.columnKeys.slice(); currKeys.splice(toIndex, 0, currKeys.splice(fromIndex, 1)[0]); @@ -379,7 +385,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action highlightDropColumn = (e: PointerEvent) => { e.stopPropagation(); - const mouseX = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[0]; + const mouseX = this._props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[0]; const index = this.findDropIndex(mouseX); this._colEles.forEach((colRef, i) => { let leftStyle = ''; @@ -439,7 +445,7 @@ export class CollectionSchemaView extends CollectionSubView() { onInternalDrop = (e: Event, de: DragManager.DropEvent) => { if (de.complete.columnDragData) { - const mouseX = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y)[0]; + const mouseX = this._props.ScreenToLocalTransform().transformPoint(de.x, de.y)[0]; const index = this.findDropIndex(mouseX); this.moveColumn(de.complete.columnDragData.colIndex, index ?? de.complete.columnDragData.colIndex); @@ -483,7 +489,7 @@ export class CollectionSchemaView extends CollectionSubView() { const nativeWidth = this._previewRef!.getBoundingClientRect(); const minWidth = 40; const maxWidth = 1000; - const movedWidth = this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0]; + const movedWidth = this._props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0]; const width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth; this.layoutDoc.schema_previewWidth = width; return false; @@ -507,8 +513,8 @@ export class CollectionSchemaView extends CollectionSubView() { const found = this._tableContentRef && Array.from(this._tableContentRef.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]); if (found) { const rect = found.getBoundingClientRect(); - const localRect = this.props.ScreenToLocalTransform().transformBounds(rect.left, rect.top, rect.width, rect.height); - if (localRect.y < this.rowHeightFunc() || localRect.y + localRect.height > this.props.PanelHeight()) { + const localRect = this._props.ScreenToLocalTransform().transformBounds(rect.left, rect.top, rect.width, rect.height); + if (localRect.y < this.rowHeightFunc() || localRect.y + localRect.height > this._props.PanelHeight()) { let focusSpeed = options.zoomTime ?? 50; smoothScroll(focusSpeed, this._tableContentRef!, localRect.y + this._tableContentRef!.scrollTop - this.rowHeightFunc(), options.easeFunc); return focusSpeed; @@ -755,7 +761,7 @@ export class CollectionSchemaView extends CollectionSubView() { @computed get renderFilterOptions() { const keyOptions: string[] = []; const columnKey = this.columnKeys[this._filterColumnIndex!]; - const allDocs = DocListCast(this.dataDoc[this.props.fieldKey]); + const allDocs = DocListCast(this.dataDoc[this._props.fieldKey]); allDocs.forEach(doc => { const value = StrCast(doc[columnKey]); if (!keyOptions.includes(value) && value !== '' && (this._filterSearchValue === '' || value.includes(this._filterSearchValue))) { @@ -779,9 +785,9 @@ export class CollectionSchemaView extends CollectionSubView() { onClick={e => e.stopPropagation()} onChange={action(e => { if (e.target.checked) { - Doc.setDocFilter(this.props.Document, columnKey, key, 'check'); + Doc.setDocFilter(this.Document, columnKey, key, 'check'); } else { - Doc.setDocFilter(this.props.Document, columnKey, key, 'remove'); + Doc.setDocFilter(this.Document, columnKey, key, 'remove'); } })} checked={bool} @@ -828,8 +834,8 @@ export class CollectionSchemaView extends CollectionSubView() { } rowHeightFunc = () => (BoolCast(this.layoutDoc._schema_singleLine) ? CollectionSchemaView._rowSingleLineHeight : CollectionSchemaView._rowHeight); sortedDocsFunc = () => this.sortedDocs; - isContentActive = () => this.props.isSelected() || this.props.isContentActive(); - screenToLocal = () => this.props.ScreenToLocalTransform().translate(-this.tableWidth, 0); + isContentActive = () => this._props.isSelected() || this._props.isContentActive(); + screenToLocal = () => this._props.ScreenToLocalTransform().translate(-this.tableWidth, 0); previewWidthFunc = () => this.previewWidth; render() { return ( @@ -838,7 +844,7 @@ export class CollectionSchemaView extends CollectionSubView() {
this.props.isContentActive() && e.stopPropagation()} + onWheel={e => this._props.isContentActive() && e.stopPropagation()} ref={r => { // prevent wheel events from passively propagating up through containers r?.addEventListener('wheel', (e: WheelEvent) => {}, { passive: false }); @@ -864,7 +870,7 @@ export class CollectionSchemaView extends CollectionSubView() { openContextMenu={this.openContextMenu} dragColumn={this.dragColumn} setColRef={this.setColRef} - isContentActive={this.props.isContentActive} + isContentActive={this._props.isContentActive} /> ))}
@@ -895,10 +901,10 @@ export class CollectionSchemaView extends CollectionSubView() { onClickScriptDisable="always" focus={emptyFunction} defaultDoubleClick={returnIgnore} - renderDepth={this.props.renderDepth + 1} + renderDepth={this._props.renderDepth + 1} rootSelected={this.rootSelected} PanelWidth={this.previewWidthFunc} - PanelHeight={this.props.PanelHeight} + PanelHeight={this._props.PanelHeight} isContentActive={returnTrue} isDocumentActive={returnFalse} ScreenToLocalTransform={this.screenToLocal} @@ -907,12 +913,12 @@ export class CollectionSchemaView extends CollectionSubView() { searchFilterDocs={this.searchFilterDocs} styleProvider={DefaultStyleProvider} docViewPath={returnEmptyDoclist} - moveDocument={this.props.moveDocument} + moveDocument={this._props.moveDocument} addDocument={this.addRow} - removeDocument={this.props.removeDocument} + removeDocument={this._props.removeDocument} whenChildContentsActiveChanged={returnFalse} - addDocTab={this.props.addDocTab} - pinToPres={this.props.pinToPres} + addDocTab={this._props.addDocTab} + pinToPres={this._props.pinToPres} bringToFront={returnFalse} /> )} @@ -936,7 +942,7 @@ class CollectionSchemaViewDocs extends React.Component {this.props.childDocs().docs.map((doc: Doc, index: number) => ( -
+
))} @@ -954,8 +960,18 @@ interface CollectionSchemaViewDocProps { @observer class CollectionSchemaViewDoc extends React.Component { - tableWidthFunc = () => this.props.schema.tableWidth; - screenToLocalXf = () => this.props.schema.props.ScreenToLocalTransform().translate(0, -this.props.rowHeight() - this.props.index * this.props.rowHeight()); + _prevProps: CollectionSchemaViewDocProps; + @observable _props; + constructor(props: CollectionSchemaViewDocProps) { + super(props); + this._props = this._prevProps = props; + makeObservable(this); + } + componentDidUpdate() { + copyProps(this); + } + tableWidthFunc = () => this._props.schema.tableWidth; + screenToLocalXf = () => this._props.schema._props.ScreenToLocalTransform().translate(0, -this._props.rowHeight() - this._props.index * this._props.rowHeight()); noOpacityStyleProvider = (doc: Opt, props: Opt, property: string) => { if (property === StyleProp.Opacity) return 1; return DefaultStyleProvider(doc, props, property); @@ -963,30 +979,30 @@ class CollectionSchemaViewDoc extends React.Component this._ref?.getBoundingClientRect(); @computed get schemaView() { - return this.props.DocumentView?.()._props.docViewPath().lastElement()?.ComponentView as CollectionSchemaView; + return this._props.DocumentView?.()._props.docViewPath().lastElement()?.ComponentView as CollectionSchemaView; } @computed get schemaDoc() { - return this.props.DocumentView?.()._props.docViewPath().lastElement()?.Document; + return this._props.DocumentView?.()._props.docViewPath().lastElement()?.Document; } @computed get rowIndex() { @@ -46,7 +56,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent { @@ -54,12 +64,12 @@ export class SchemaRowBox extends ViewBoxBaseComponent { - if (SnappingManager.IsDragging && this.props.isContentActive()) { + if (SnappingManager.IsDragging && this._props.isContentActive()) { document.removeEventListener('pointermove', this.onPointerMove); document.addEventListener('pointermove', this.onPointerMove); } @@ -103,7 +113,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent { @@ -114,7 +124,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent { e.stopPropagation(); - this.props.removeDocument?.(this.Document); + this._props.removeDocument?.(this.Document); }, 'Delete Row') ) } @@ -145,7 +155,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent { e.stopPropagation(); - this.props.addDocTab(this.Document, OpenWhere.addRight); + this._props.addDocTab(this.Document, OpenWhere.addRight); }, 'Open schema Doc preview') ) } @@ -161,7 +171,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent { const ind = index === this.schemaView.columnKeys.length - 1 ? this.schemaView.columnKeys.length - 3 : index; const x = this.schemaView?.displayColumnWidths.reduce((p, c, i) => (i <= ind ? p + c : p), 0); - const y = (this.props.rowIndex ?? 0) * this.props.PanelHeight(); + const y = (this._props.rowIndex ?? 0) * this._props.PanelHeight(); return new Transform(x + CollectionSchemaView._rowMenuWidth, y, 1); }} /> diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index dcd3bffac..814003955 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -21,18 +21,18 @@ import { RichTextMenu } from '../nodes/formattedText/RichTextMenu'; import { WebBox } from '../nodes/WebBox'; ScriptingGlobals.add(function IsNoneSelected() { - return SelectionManager.Views().length <= 0; + return SelectionManager.Views.length <= 0; }, 'are no document selected'); // toggle: Set overlay status of selected document ScriptingGlobals.add(function setView(view: string) { - const selected = SelectionManager.Docs().lastElement(); + const selected = SelectionManager.Docs.lastElement(); selected ? (selected._type_collection = view) : console.log('[FontIconBox.tsx] changeView failed'); }); // toggle: Set overlay status of selected document ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: boolean) { - const selectedViews = SelectionManager.Views(); + const selectedViews = SelectionManager.Views; if (Doc.ActiveTool !== InkTool.None) { if (checkResult) { return ActiveFillColor(); @@ -60,7 +60,7 @@ ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: b } }); } else { - const selected = SelectionManager.Docs().length ? SelectionManager.Docs() : LinkManager.currentLink ? [LinkManager.currentLink] : []; + const selected = SelectionManager.Docs.length ? SelectionManager.Docs : LinkManager.currentLink ? [LinkManager.currentLink] : []; if (checkResult) { return selected.lastElement()?._backgroundColor ?? 'transparent'; } @@ -72,10 +72,10 @@ ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: b // toggle: Set overlay status of selected document ScriptingGlobals.add(function setHeaderColor(color?: string, checkResult?: boolean) { if (checkResult) { - return SelectionManager.Views().length ? StrCast(SelectionManager.Docs().lastElement().layout_headingColor) : Doc.SharingDoc().headingColor; + return SelectionManager.Views.length ? StrCast(SelectionManager.Docs.lastElement().layout_headingColor) : Doc.SharingDoc().headingColor; } - if (SelectionManager.Views().length) { - SelectionManager.Docs().forEach(doc => { + if (SelectionManager.Views.length) { + SelectionManager.Docs.forEach(doc => { Doc.GetProto(doc).layout_headingColor = color; doc.layout_showTitle = color === 'transparent' ? undefined : StrCast(doc.layout_showTitle, 'title'); }); @@ -88,7 +88,7 @@ ScriptingGlobals.add(function setHeaderColor(color?: string, checkResult?: boole // toggle: Set overlay status of selected document ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { - const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; + const selected = SelectionManager.Views.length ? SelectionManager.Views[0] : undefined; if (checkResult) { if (NumCast(selected?.Document.z) >= 1) return true; return false; @@ -97,7 +97,7 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { }); ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce', checkResult?: boolean) { - const selected = SelectionManager.Docs().lastElement(); + const selected = SelectionManager.Docs.lastElement(); // prettier-ignore const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ ['grid', { @@ -140,13 +140,13 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid return map.get(attr)?.checkResult(selected); } const batch = map.get(attr)?.waitForRender ? UndoManager.StartBatch('set freeform attribute') : { end: () => {} }; - SelectionManager.Views().map(dv => map.get(attr)?.setDoc(dv.layoutDoc, dv)); + SelectionManager.Views.map(dv => map.get(attr)?.setDoc(dv.layoutDoc, dv)); setTimeout(() => batch.end(), 100); }); ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highlight' | 'fontSize' | 'alignment', value: any, checkResult?: boolean) { const editorView = RichTextMenu.Instance?.TextView?.EditorView; - const selected = SelectionManager.Docs().lastElement(); + const selected = SelectionManager.Docs.lastElement(); // prettier-ignore const map: Map<'font'|'fontColor'|'highlight'|'fontSize'|'alignment', { checkResult: () => any; setDoc: () => void;}> = new Map([ ['font', { @@ -338,7 +338,7 @@ ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode'); // toggle: Set overlay status of selected document ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'fillColor' | 'strokeWidth' | 'strokeColor', value: any, checkResult?: boolean) { - const selected = SelectionManager.Docs().lastElement() ?? Doc.UserDoc(); + const selected = SelectionManager.Docs.lastElement() ?? Doc.UserDoc(); // prettier-ignore const map: Map<'inkMask' | 'fillColor' | 'strokeWidth' | 'strokeColor', { checkResult: () => any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([ ['inkMask', { @@ -367,16 +367,14 @@ ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'fillColor' | ' return map.get(option)?.checkResult(); } map.get(option)?.setMode(); - SelectionManager.Docs() - .filter(doc => doc.type === DocumentType.INK) - .map(doc => map.get(option)?.setInk(doc)); + SelectionManager.Docs.filter(doc => doc.type === DocumentType.INK).map(doc => map.get(option)?.setInk(doc)); }); /** WEB * webSetURL **/ ScriptingGlobals.add(function webSetURL(url: string, checkResult?: boolean) { - const selected = SelectionManager.Views().lastElement(); + const selected = SelectionManager.Views.lastElement(); if (selected?.Document.type === DocumentType.WEB) { if (checkResult) { return StrCast(selected.Document.data, Cast(selected.Document.data, WebField, null)?.url?.href); @@ -386,14 +384,14 @@ ScriptingGlobals.add(function webSetURL(url: string, checkResult?: boolean) { } }); ScriptingGlobals.add(function webForward(checkResult?: boolean) { - const selected = SelectionManager.Views().lastElement()?.ComponentView as WebBox; + const selected = SelectionManager.Views.lastElement()?.ComponentView as WebBox; if (checkResult) { return selected?.forward(checkResult) ? undefined : 'lightGray'; } selected?.forward(); }); ScriptingGlobals.add(function webBack(checkResult?: boolean) { - const selected = SelectionManager.Views().lastElement()?.ComponentView as WebBox; + const selected = SelectionManager.Views.lastElement()?.ComponentView as WebBox; if (checkResult) { return selected?.back(checkResult) ? undefined : 'lightGray'; } @@ -404,7 +402,7 @@ ScriptingGlobals.add(function webBack(checkResult?: boolean) { * toggleSchemaPreview **/ ScriptingGlobals.add(function toggleSchemaPreview(checkResult?: boolean) { - const selected = SelectionManager.Docs().lastElement(); + const selected = SelectionManager.Docs.lastElement(); if (checkResult && selected) { const result: boolean = NumCast(selected.schema_previewWidth) > 0; if (result) return Colors.MEDIUM_BLUE; @@ -418,7 +416,7 @@ ScriptingGlobals.add(function toggleSchemaPreview(checkResult?: boolean) { } }); ScriptingGlobals.add(function toggleSingleLineSchema(checkResult?: boolean) { - const selected = SelectionManager.Docs().lastElement(); + const selected = SelectionManager.Docs.lastElement(); if (checkResult && selected) { return NumCast(selected._schema_singleLine) > 0 ? Colors.MEDIUM_BLUE : 'transparent'; } @@ -431,7 +429,7 @@ ScriptingGlobals.add(function toggleSingleLineSchema(checkResult?: boolean) { * groupBy */ ScriptingGlobals.add(function setGroupBy(key: string, checkResult?: boolean) { - SelectionManager.Docs().map(doc => (doc._text_fontFamily = key)); + SelectionManager.Docs.map(doc => (doc._text_fontFamily = key)); const editorView = RichTextMenu.Instance.TextView?.EditorView; if (checkResult) { return StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index cca2ed3ba..08ee708f7 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -400,7 +400,7 @@ export class DocumentViewInternal extends DocComponent dv.docView?._mainCont.current); + const views = SelectionManager.Views.filter(dv => dv.docView?._mainCont.current); const selected = views.length > 1 && views.some(dv => dv.Document === this.Document) ? views : [this._props.DocumentView()]; const dragData = new DragManager.DocumentDragData(selected.map(dv => dv.Document)); const [left, top] = this._props.ScreenToLocalTransform().scale(this.NativeDimScaling).inverse().transformPoint(0, 0); @@ -760,8 +760,8 @@ export class DocumentViewInternal extends DocComponent SelectionManager.Views().forEach(dv => dv._props.bringToFront(dv.Document, false)), icon: 'arrow-up' }); - zorderItems.push({ description: 'Send to Back', event: () => SelectionManager.Views().forEach(dv => dv._props.bringToFront(dv.Document, true)), icon: 'arrow-down' }); + zorderItems.push({ description: 'Bring to Front', event: () => SelectionManager.Views.forEach(dv => dv._props.bringToFront(dv.Document, false)), icon: 'arrow-up' }); + zorderItems.push({ description: 'Send to Back', event: () => SelectionManager.Views.forEach(dv => dv._props.bringToFront(dv.Document, true)), icon: 'arrow-down' }); zorderItems.push({ description: !this.layoutDoc._keepZDragged ? 'Keep ZIndex when dragged' : 'Allow ZIndex to change when dragged', event: undoBatch(action(() => (this.layoutDoc._keepZWhenDragged = !this.layoutDoc._keepZWhenDragged))), @@ -1588,7 +1588,7 @@ export class DocumentView extends React.Component { docViewPathFunc = () => this.docViewPath; isSelected = () => this.SELECTED; select = (extendSelection: boolean, focusSelection?: boolean) => { - if (this.SELECTED && SelectionManager.Views().length > 1) SelectionManager.DeselectView(this); + if (this.SELECTED && SelectionManager.Views.length > 1) SelectionManager.DeselectView(this); else { SelectionManager.SelectView(this, extendSelection); if (focusSelection) { diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx index 22339907f..d8b1f125c 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx @@ -187,7 +187,7 @@ export class FontIconBox extends ViewBoxBaseComponent() { let icon: IconProp = 'caret-down'; const isViewDropdown = script?.script.originalScript.startsWith('setView'); if (isViewDropdown) { - const selected = SelectionManager.Docs(); + const selected = SelectionManager.Docs; if (selected.lastElement()) { if (StrCast(selected.lastElement().type) === DocumentType.COL) { text = StrCast(selected.lastElement()._type_collection); diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx index 31aa15588..a7e905fca 100644 --- a/src/client/views/nodes/LinkAnchorBox.tsx +++ b/src/client/views/nodes/LinkAnchorBox.tsx @@ -83,9 +83,9 @@ export class LinkAnchorBox extends ViewBoxBaseComponent() { const anchor = this.fieldKey === 'link_anchor_1' ? 'link_anchor_2' : 'link_anchor_1'; const anchorScale = !this.dataDoc[this.fieldKey + '_useSmallAnchor'] && (x === 0 || x === 100 || y === 0 || y === 100) ? 1 : 0.25; const targetTitle = StrCast((this.dataDoc[anchor] as Doc)?.title); - const selView = SelectionManager.Views().lastElement()?._props.LayoutTemplateString?.includes('link_anchor_1') + const selView = SelectionManager.Views.lastElement()?._props.LayoutTemplateString?.includes('link_anchor_1') ? 'link_anchor_1' - : SelectionManager.Views().lastElement()?._props.LayoutTemplateString?.includes('link_anchor_2') + : SelectionManager.Views.lastElement()?._props.LayoutTemplateString?.includes('link_anchor_2') ? 'link_anchor_2' : ''; return ( diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx index e6c1db0af..ee1ea3ceb 100644 --- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx +++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx @@ -47,7 +47,7 @@ export class MapAnchorMenu extends AntimodeMenu { componentDidMount() { this._disposer = reaction( - () => SelectionManager.Views().slice(), + () => SelectionManager.Views.slice(), sel => MapAnchorMenu.Instance.fadeOut(true) ); } diff --git a/src/client/views/nodes/MapBox/MapBox2.tsx b/src/client/views/nodes/MapBox/MapBox2.tsx index 2c4c992d1..fdd8285d5 100644 --- a/src/client/views/nodes/MapBox/MapBox2.tsx +++ b/src/client/views/nodes/MapBox/MapBox2.tsx @@ -510,8 +510,8 @@ // // TODO: auto center on select a document in the sidebar // private handleMapCenter = (map: google.maps.Map) => { // // console.log("print the selected views in selectionManager:") -// // if (SelectionManager.Views().lastElement()) { -// // console.log(SelectionManager.Views().lastElement()); +// // if (SelectionManager.Views.lastElement()) { +// // console.log(SelectionManager.Views.lastElement()); // // } // }; diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index d7e799161..7de1eb717 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -116,7 +116,7 @@ export class RichTextMenu extends AntimodeMenu { } componentDidMount() { this._disposer = reaction( - () => SelectionManager.Views().slice(), + () => SelectionManager.Views.slice(), views => this.updateMenu(undefined, undefined, undefined, undefined) ); } @@ -245,8 +245,8 @@ export class RichTextMenu extends AntimodeMenu { m.type === state.schema.marks.pFontSize && activeSizes.add(m.attrs.fontSize); m.type === state.schema.marks.marker && activeHighlights.add(String(m.attrs.highlight)); }); - } else if (SelectionManager.Views().some(dv => dv.ComponentView instanceof EquationBox)) { - SelectionManager.Views().forEach(dv => StrCast(dv.Document._text_fontSize) && activeSizes.add(StrCast(dv.Document._text_fontSize))); + } else if (SelectionManager.Views.some(dv => dv.ComponentView instanceof EquationBox)) { + SelectionManager.Views.forEach(dv => StrCast(dv.Document._text_fontSize) && activeSizes.add(StrCast(dv.Document._text_fontSize))); } return { activeFamilies: Array.from(activeFamilies), activeSizes: Array.from(activeSizes), activeColors: Array.from(activeColors), activeHighlights: Array.from(activeHighlights) }; } @@ -365,8 +365,8 @@ export class RichTextMenu extends AntimodeMenu { this.setMark(fmark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(fmark)), true); this.view.focus(); } - } else if (SelectionManager.Views().some(dv => dv.ComponentView instanceof EquationBox)) { - SelectionManager.Views().forEach(dv => (dv.Document._text_fontSize = fontSize)); + } else if (SelectionManager.Views.some(dv => dv.ComponentView instanceof EquationBox)) { + SelectionManager.Views.forEach(dv => (dv.Document._text_fontSize = fontSize)); } else Doc.UserDoc().fontSize = fontSize; this.updateMenu(this.view, undefined, this._props, this.layoutDoc); }; @@ -649,7 +649,7 @@ export class RichTextMenu extends AntimodeMenu { if (linkDoc instanceof Doc) { const link_anchor_1 = await Cast(linkDoc.link_anchor_1, Doc); const link_anchor_2 = await Cast(linkDoc.link_anchor_2, Doc); - const currentDoc = SelectionManager.Docs().lastElement(); + const currentDoc = SelectionManager.Docs.lastElement(); if (currentDoc && link_anchor_1 && link_anchor_2) { if (Doc.AreProtosEqual(currentDoc, link_anchor_1)) { return StrCast(link_anchor_2.title); @@ -781,11 +781,11 @@ export class RichTextMenu extends AntimodeMenu { //
// {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size", action((val: string) => { // this.activeFontSize = val; - // SelectionManager.Views().map(dv => dv.props.Document._text_fontSize = val); + // SelectionManager.Views.map(dv => dv.props.Document._text_fontSize = val); // })), // this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family", action((val: string) => { // this.activeFontFamily = val; - // SelectionManager.Views().map(dv => dv.props.Document._text_fontFamily = val); + // SelectionManager.Views.map(dv => dv.props.Document._text_fontFamily = val); // })), //
, // this.createNodesDropdown(this.activeListType, this.listTypeOptions, "list type", () => ({})), diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index a224ec7fa..4ff816812 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -139,7 +139,7 @@ export class PresBox extends ViewBoxBaseComponent() { return false; } @computed get selectedDocumentView() { - if (SelectionManager.Views().length) return SelectionManager.Views()[0]; + if (SelectionManager.Views.length) return SelectionManager.Views[0]; if (this.selectedArray.size) return DocumentManager.Instance.getDocumentView(this.Document); } @computed get isPres() { @@ -187,7 +187,7 @@ export class PresBox extends ViewBoxBaseComponent() { this._unmounting = false; this.turnOffEdit(true); this._disposers.selection = reaction( - () => SelectionManager.Views().slice(), + () => SelectionManager.Views.slice(), views => (!PresBox.Instance || views.some(view => view.Document === this.Document)) && this.updateCurrentPresentation(), { fireImmediately: true } ); diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx index 3c26c307f..0627876fa 100644 --- a/src/client/views/pdf/AnchorMenu.tsx +++ b/src/client/views/pdf/AnchorMenu.tsx @@ -69,7 +69,7 @@ export class AnchorMenu extends AntimodeMenu { componentDidMount() { this._disposer = reaction( - () => SelectionManager.Views().slice(), + () => SelectionManager.Views.slice(), sel => AnchorMenu.Instance.fadeOut(true) ); } @@ -158,7 +158,7 @@ export class AnchorMenu extends AntimodeMenu { * all selected text available to summarize but its only supported for pdf and web ATM. * @returns Whether the GPT icon for summarization should appear */ - canSummarize = () => SelectionManager.Docs().some(doc => [DocumentType.PDF, DocumentType.WEB].includes(doc.type as any)); + canSummarize = () => SelectionManager.Docs.some(doc => [DocumentType.PDF, DocumentType.WEB].includes(doc.type as any)); render() { const buttons = diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 349f15c96..a581e9df6 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -119,7 +119,7 @@ export class PDFViewer extends React.Component { this._disposers.selected = reaction( () => this._props.isSelected(), - selected => SelectionManager.Views().length === 1 && this.setupPdfJsViewer(), + selected => SelectionManager.Views.length === 1 && this.setupPdfJsViewer(), { fireImmediately: true } ); this._disposers.curPage = reaction( -- cgit v1.2.3-70-g09d2 From cebe9d2a567c20b99c8c394cfa598ee9d4d53ece Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 14 Dec 2023 00:07:52 -0500 Subject: a bunch more fixes to making things observable. fixed calling super.componentDidUpdate on subsclasses --- src/Utils.ts | 17 +-- src/client/util/BranchingTrailManager.tsx | 12 +- src/client/util/CaptureManager.tsx | 3 +- src/client/util/GroupManager.tsx | 6 +- src/client/util/PingManager.ts | 3 +- src/client/util/RTFMarkup.tsx | 3 +- src/client/util/ReplayMovements.ts | 3 +- src/client/util/SelectionManager.ts | 10 +- src/client/util/ServerStats.tsx | 3 +- src/client/util/SharingManager.tsx | 3 +- src/client/util/TrackMovements.ts | 4 +- src/client/util/reportManager/ReportManager.tsx | 3 +- src/client/views/ContextMenu.tsx | 2 +- src/client/views/DictationOverlay.tsx | 3 +- src/client/views/DocumentButtonBar.tsx | 133 ++------------------- src/client/views/EditableView.tsx | 1 + src/client/views/GestureOverlay.tsx | 17 +-- src/client/views/InkStrokeProperties.ts | 3 +- src/client/views/LightboxView.tsx | 3 +- src/client/views/MainView.tsx | 2 +- src/client/views/MarqueeAnnotator.tsx | 2 +- src/client/views/ObservableReactComponent.tsx | 10 +- src/client/views/PropertiesView.tsx | 2 +- src/client/views/ScriptBox.tsx | 3 +- src/client/views/ScriptingRepl.tsx | 37 ++---- src/client/views/animationtimeline/Region.tsx | 3 +- .../views/animationtimeline/TimelineMenu.tsx | 5 +- .../views/collections/CollectionDockingView.tsx | 4 +- src/client/views/collections/CollectionMenu.tsx | 7 +- .../collections/CollectionStackedTimeline.tsx | 4 +- .../CollectionStackingViewFieldColumn.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 1 - src/client/views/collections/TabDocView.tsx | 1 + src/client/views/collections/TreeView.tsx | 1 + .../CollectionFreeFormInfoState.tsx | 3 +- .../CollectionFreeFormInfoUI.tsx | 14 +-- .../collectionFreeForm/MarqueeOptionsMenu.tsx | 5 +- .../CollectionMulticolumnView.tsx | 78 ++++++------ .../CollectionMultirowView.tsx | 74 ++++++------ .../views/nodes/CollectionFreeFormDocumentView.tsx | 3 +- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/FunctionPlotBox.tsx | 2 +- src/client/views/nodes/ImageBox.tsx | 3 +- src/client/views/nodes/LinkDocPreview.tsx | 4 +- src/client/views/nodes/MapBox/MapAnchorMenu.tsx | 5 +- src/client/views/nodes/PDFBox.tsx | 2 +- .../nodes/PhysicsBox/PhysicsSimulationBox.tsx | 3 +- .../nodes/PhysicsBox/PhysicsSimulationWeight.tsx | 3 +- src/client/views/nodes/RadialMenu.tsx | 6 +- src/client/views/nodes/ScreenshotBox.tsx | 13 +- src/client/views/nodes/ScriptingBox.tsx | 3 +- src/client/views/nodes/VideoBox.tsx | 2 +- src/client/views/nodes/WebBox.tsx | 2 +- .../nodes/formattedText/DashDocCommentView.tsx | 2 +- .../views/nodes/formattedText/EquationEditor.tsx | 2 +- .../views/nodes/formattedText/EquationView.tsx | 3 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- src/client/views/nodes/trails/PresBox.tsx | 3 +- src/client/views/pdf/AnchorMenu.tsx | 2 +- src/client/views/pdf/GPTPopup/GPTPopup.tsx | 6 +- src/client/views/search/CheckBox.scss | 58 --------- src/client/views/search/CheckBox.tsx | 130 -------------------- src/client/views/search/CollectionFilters.scss | 20 ---- src/client/views/search/CollectionFilters.tsx | 83 ------------- src/client/views/search/IconBar.scss | 10 -- src/client/views/search/IconBar.tsx | 73 ----------- src/client/views/search/IconButton.scss | 53 -------- src/client/views/search/IconButton.tsx | 118 ------------------ src/client/views/search/NaviconButton.scss | 69 ----------- src/client/views/search/NaviconButton.tsx | 37 ------ src/client/views/search/SearchBox.scss | 1 - src/client/views/search/SearchBox.tsx | 3 +- src/client/views/search/ToggleBar.scss | 41 ------- src/client/views/search/ToggleBar.tsx | 85 ------------- src/fields/URLField.ts | 2 +- src/server/DashUploadUtils.ts | 4 +- 76 files changed, 224 insertions(+), 1126 deletions(-) delete mode 100644 src/client/views/search/CheckBox.scss delete mode 100644 src/client/views/search/CheckBox.tsx delete mode 100644 src/client/views/search/CollectionFilters.scss delete mode 100644 src/client/views/search/CollectionFilters.tsx delete mode 100644 src/client/views/search/IconBar.scss delete mode 100644 src/client/views/search/IconBar.tsx delete mode 100644 src/client/views/search/IconButton.scss delete mode 100644 src/client/views/search/IconButton.tsx delete mode 100644 src/client/views/search/NaviconButton.scss delete mode 100644 src/client/views/search/NaviconButton.tsx delete mode 100644 src/client/views/search/ToggleBar.scss delete mode 100644 src/client/views/search/ToggleBar.tsx (limited to 'src/client/util/CaptureManager.tsx') diff --git a/src/Utils.ts b/src/Utils.ts index 3a2bbf9a1..5f9475f23 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -7,7 +7,7 @@ import { DocumentType } from './client/documents/DocumentTypes'; import { Colors } from './client/views/global/globalEnums'; import { Message } from './server/Message'; import * as Color from 'color'; -import { action, makeObservable } from 'mobx'; +import { action } from 'mobx'; export namespace Utils { export let CLICK_TIME = 300; @@ -56,10 +56,6 @@ export namespace Utils { return uuid.v5(seed, uuid.v5.URL); } - export function GenerateMongoId(id: string): string { - return id.length !== 36 ? Utils.GenerateDeterministicGuid(id) : id; - } - export function GuestID() { return '__guest__'; } @@ -440,17 +436,6 @@ export namespace Utils { socket.on(message, (room: any) => handler(socket, room)); } } -export function copyProps(thing: { props: any; _props: any }, prevProps: any) { - Object.keys(prevProps).forEach(action(pkey => - (prevProps)[pkey] !== (thing.props as any)[pkey] && - ((thing._props as any)[pkey] = (thing.props as any)[pkey]))); // prettier-ignore -} -export function copyPropsFull(thing: { _prevProps: any; props: any; _props: any }) { - Object.keys(thing._prevProps).forEach(action(pkey => - (thing._prevProps as any)[pkey] !== (thing.props as any)[pkey] && - ((thing._props as any)[pkey] = (thing.props as any)[pkey]))); // prettier-ignore - thing._prevProps = thing.props; -} export function OmitKeys(obj: any, keys: string[], pattern?: string, addKeyFunc?: (dup: any) => void): { omit: any; extract: any } { const omit: any = { ...obj }; diff --git a/src/client/util/BranchingTrailManager.tsx b/src/client/util/BranchingTrailManager.tsx index a224b84f4..11f16493f 100644 --- a/src/client/util/BranchingTrailManager.tsx +++ b/src/client/util/BranchingTrailManager.tsx @@ -1,4 +1,4 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc } from '../../fields/Doc'; @@ -15,13 +15,14 @@ export class BranchingTrailManager extends React.Component { constructor(props: any) { super(props); + makeObservable(this); if (!BranchingTrailManager.Instance) { BranchingTrailManager.Instance = this; } } setupUi = () => { - OverlayView.Instance.addWindow(, { x: 100, y: 150, width: 1000, title: 'Branching Trail'}); + OverlayView.Instance.addWindow(, { x: 100, y: 150, width: 1000, title: 'Branching Trail' }); // OverlayView.Instance.forceUpdate(); console.log(OverlayView.Instance); // let hi = Docs.Create.TextDocument("beee", { @@ -30,11 +31,10 @@ export class BranchingTrailManager extends React.Component { // }) // hi.overlayX = 100; // hi.overlayY = 100; - + // Doc.AddToMyOverlay(hi); console.log(DocumentManager._overlayViews); }; - // stack of the history @observable private slideHistoryStack: String[] = []; @@ -69,7 +69,7 @@ export class BranchingTrailManager extends React.Component { if (this.prevPresId === null || this.prevPresId !== presId) { Doc.UserDoc().isBranchingMode = true; this.setPrevPres(presId); - + // REVERT THE SET const stringified = [presId, targetDocId].toString(); if (this.containsSet.has([presId, targetDocId].toString())) { @@ -98,7 +98,7 @@ export class BranchingTrailManager extends React.Component { const newStack = this.slideHistoryStack.slice(0, removeIndex); const removed = this.slideHistoryStack.slice(removeIndex); - + this.setSlideHistoryStack(newStack); removed.forEach(info => this.containsSet.delete(info.toString())); diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx index 271cf7495..071fc1ee9 100644 --- a/src/client/util/CaptureManager.tsx +++ b/src/client/util/CaptureManager.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc } from '../../fields/Doc'; @@ -20,6 +20,7 @@ export class CaptureManager extends React.Component<{}> { constructor(props: {}) { super(props); + makeObservable(this); CaptureManager.Instance = this; } diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index c8c93b7d0..90f65b648 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, IconButton, Size, Type } from 'browndash-components'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import Select from 'react-select'; @@ -17,6 +17,7 @@ import './GroupManager.scss'; import { GroupMemberView } from './GroupMemberView'; import { SettingsManager } from './SettingsManager'; import { SharingManager, User } from './SharingManager'; +import { ObservableReactComponent } from '../views/ObservableReactComponent'; /** * Interface for options for the react-select component @@ -27,7 +28,7 @@ export interface UserOptions { } @observer -export class GroupManager extends React.Component<{}> { +export class GroupManager extends ObservableReactComponent<{}> { static Instance: GroupManager; @observable isOpen: boolean = false; // whether the GroupManager is to be displayed or not. @observable private users: string[] = []; // list of users populated from the database. @@ -41,6 +42,7 @@ export class GroupManager extends React.Component<{}> { constructor(props: Readonly<{}>) { super(props); + makeObservable(this); GroupManager.Instance = this; } diff --git a/src/client/util/PingManager.ts b/src/client/util/PingManager.ts index 4dd2fcd35..865f8bc02 100644 --- a/src/client/util/PingManager.ts +++ b/src/client/util/PingManager.ts @@ -1,4 +1,4 @@ -import { action, observable, runInAction } from 'mobx'; +import { action, makeObservable, observable, runInAction } from 'mobx'; import { Networking } from '../Network'; import { CurrentUserUtils } from './CurrentUserUtils'; export class PingManager { @@ -33,6 +33,7 @@ export class PingManager { private _interval: NodeJS.Timeout | null = null; INTERVAL_SECONDS = 1; constructor() { + makeObservable(this); PingManager._instance = this; this._interval = setInterval(this.sendPing, this.INTERVAL_SECONDS * 1000); } diff --git a/src/client/util/RTFMarkup.tsx b/src/client/util/RTFMarkup.tsx index 495af6abd..f96d8a5df 100644 --- a/src/client/util/RTFMarkup.tsx +++ b/src/client/util/RTFMarkup.tsx @@ -1,4 +1,4 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { MainViewModal } from '../views/MainViewModal'; @@ -23,6 +23,7 @@ export class RTFMarkup extends React.Component<{}> { constructor(props: {}) { super(props); + makeObservable(this); RTFMarkup.Instance = this; } diff --git a/src/client/util/ReplayMovements.ts b/src/client/util/ReplayMovements.ts index d99630f82..b881f18b4 100644 --- a/src/client/util/ReplayMovements.ts +++ b/src/client/util/ReplayMovements.ts @@ -1,4 +1,4 @@ -import { IReactionDisposer, observable, reaction } from 'mobx'; +import { IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { Doc, IdToDoc } from '../../fields/Doc'; import { CollectionDockingView } from '../views/collections/CollectionDockingView'; import { CollectionFreeFormView } from '../views/collections/collectionFreeForm'; @@ -19,6 +19,7 @@ export class ReplayMovements { return ReplayMovements._instance; } constructor() { + makeObservable(this); // init the global instance ReplayMovements._instance = this; diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 4bd6647c0..07bbde36c 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -31,8 +31,7 @@ export class SelectionManager { this.Instance.SelectedSchemaDocument = doc; }; - @action - public static SelectView = (docView: DocumentView | undefined, extendSelection: boolean): void => { + public static SelectView = action((docView: DocumentView | undefined, extendSelection: boolean): void => { if (!docView) this.DeselectAll(); else if (!docView.SELECTED) { if (!extendSelection) this.DeselectAll(); @@ -40,16 +39,15 @@ export class SelectionManager { docView.SELECTED = true; docView._props.whenChildContentsActiveChanged(true); } - }; + }); - @action - public static DeselectView = (docView?: DocumentView): void => { + public static DeselectView = action((docView?: DocumentView): void => { if (docView && this.Instance.SelectedViews.includes(docView)) { docView.SELECTED = false; this.Instance.SelectedViews.splice(this.Instance.SelectedViews.indexOf(docView), 1); docView._props.whenChildContentsActiveChanged(false); } - }; + }); public static DeselectAll = (except?: Doc): void => { const found = this.Instance.SelectedViews.find(dv => dv.Document === except); diff --git a/src/client/util/ServerStats.tsx b/src/client/util/ServerStats.tsx index 7d5e0458d..c8df9182d 100644 --- a/src/client/util/ServerStats.tsx +++ b/src/client/util/ServerStats.tsx @@ -1,4 +1,4 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { MainViewModal } from '../views/MainViewModal'; @@ -33,6 +33,7 @@ export class ServerStats extends React.Component<{}> { constructor(props: {}) { super(props); + makeObservable(this); ServerStats.Instance = this; } diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index 7176b568e..ac7de9872 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, IconButton, Size, Type } from 'browndash-components'; import { concat, intersection } from 'lodash'; -import { action, computed, observable, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import Select from 'react-select'; @@ -119,6 +119,7 @@ export class SharingManager extends React.Component<{}> { constructor(props: {}) { super(props); + makeObservable(this); SharingManager.Instance = this; } diff --git a/src/client/util/TrackMovements.ts b/src/client/util/TrackMovements.ts index 0e56ee1bc..0b197cf9a 100644 --- a/src/client/util/TrackMovements.ts +++ b/src/client/util/TrackMovements.ts @@ -1,4 +1,4 @@ -import { IReactionDisposer, observable, observe, reaction } from 'mobx'; +import { IReactionDisposer, makeObservable, observable, observe, reaction } from 'mobx'; import { NumCast } from '../../fields/Types'; import { Doc, DocListCast } from '../../fields/Doc'; import { CollectionDockingView } from '../views/collections/CollectionDockingView'; @@ -40,7 +40,7 @@ export class TrackMovements { constructor() { // init the global instance TrackMovements._instance = this; - + makeObservable(this); // init the instance variables this.currentPresentation = TrackMovements.NULL_PRESENTATION; this.tracking = false; diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx index 738902a31..0c49aeed4 100644 --- a/src/client/util/reportManager/ReportManager.tsx +++ b/src/client/util/reportManager/ReportManager.tsx @@ -3,7 +3,7 @@ import * as uuid from 'uuid'; import '.././SettingsManager.scss'; import './ReportManager.scss'; import ReactLoading from 'react-loading'; -import { action, observable } from 'mobx'; +import { action, makeObservable, observable } from 'mobx'; import { BsX, BsArrowsAngleExpand, BsArrowsAngleContract } from 'react-icons/bs'; import { CgClose } from 'react-icons/cg'; import { HiOutlineArrowLeft } from 'react-icons/hi'; @@ -103,6 +103,7 @@ export class ReportManager extends React.Component<{}> { constructor(props: {}) { super(props); + makeObservable(this); ReportManager.Instance = this; // initializing Github connection diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index e55bf24a1..8dcdd80e5 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -37,8 +37,8 @@ export class ContextMenu extends ObservableReactComponent<{}> { constructor(props: any) { super(props); - ContextMenu.Instance = this; makeObservable(this); + ContextMenu.Instance = this; } public setIgnoreEvents(ignore: boolean) { diff --git a/src/client/views/DictationOverlay.tsx b/src/client/views/DictationOverlay.tsx index 0bdcdc303..e098bc361 100644 --- a/src/client/views/DictationOverlay.tsx +++ b/src/client/views/DictationOverlay.tsx @@ -1,4 +1,4 @@ -import { computed, observable, runInAction } from 'mobx'; +import { computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { DictationManager } from '../util/DictationManager'; @@ -19,6 +19,7 @@ export class DictationOverlay extends React.Component { constructor(props: any) { super(props); + makeObservable(this); DictationOverlay.Instance = this; } diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 50ca3af06..47829d12a 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -3,32 +3,26 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { emptyFunction, returnFalse, setupMoveUpEvents, simulateMouseClick } from '../../Utils'; import { Doc } from '../../fields/Doc'; import { RichTextField } from '../../fields/RichTextField'; -import { Cast, DocCast, NumCast } from '../../fields/Types'; -import { emptyFunction, returnFalse, setupMoveUpEvents, simulateMouseClick } from '../../Utils'; -import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager'; -import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils'; -import { Docs, DocUtils } from '../documents/Documents'; +import { Cast, DocCast } from '../../fields/Types'; +import { DocUtils } from '../documents/Documents'; import { DragManager } from '../util/DragManager'; import { IsFollowLinkScript } from '../util/LinkFollower'; import { SelectionManager } from '../util/SelectionManager'; import { SharingManager } from '../util/SharingManager'; -import { undoBatch, UndoManager } from '../util/UndoManager'; -import { CollectionDockingView } from './collections/CollectionDockingView'; -import { TabDocView } from './collections/TabDocView'; +import { UndoManager, undoBatch } from '../util/UndoManager'; import './DocumentButtonBar.scss'; +import { ObservableReactComponent } from './ObservableReactComponent'; +import { TabDocView } from './collections/TabDocView'; import { Colors } from './global/globalEnums'; import { LinkPopup } from './linking/LinkPopup'; -import { MetadataEntryMenu } from './MetadataEntryMenu'; import { DocumentLinksButton } from './nodes/DocumentLinksButton'; -import { DocumentView, DocumentViewInternal, OpenWhere, OpenWhereMod } from './nodes/DocumentView'; +import { DocumentView, DocumentViewInternal, OpenWhere } from './nodes/DocumentView'; import { DashFieldView } from './nodes/formattedText/DashFieldView'; -import { GoogleRef } from './nodes/formattedText/FormattedTextBox'; import { PinProps } from './nodes/trails'; -import { TemplateMenu } from './TemplateMenu'; -import * as React from 'react'; -import { ObservableReactComponent } from './ObservableReactComponent'; // import * as higflyout from '@hig/flyout'; // export const { anchorPoints } = higflyout; // export const Flyout = higflyout.default; @@ -60,10 +54,10 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( public static hasPushedHack = false; public static hasPulledHack = false; - constructor(props: { views: () => (DocumentView | undefined)[] }) { + constructor(props: any) { super(props); - DocumentButtonBar.Instance = this; makeObservable(this); + DocumentButtonBar.Instance = this; } public startPullOutcome = action((success: boolean) => { @@ -115,103 +109,6 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( return this._props.views()?.[0]; } - @computed - get considerGoogleDocsPush() { - const targetDoc = this.view0?.Document; - const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined; - const animation = this.isAnimatingPulse ? 'shadow-pulse 1s linear infinite' : 'none'; - return !targetDoc ? null : ( - -
{`${published ? 'Push' : 'Publish'} to Google Docs`}
- - }> -
{ - await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(); - !published && runInAction(() => (this.isAnimatingPulse = true)); - DocumentButtonBar.hasPushedHack = false; - targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1; - }}> - -
- - ); - } - - @computed - get considerGoogleDocsPull() { - const targetDoc = this.view0?.Document; - const dataDoc = targetDoc && Doc.GetProto(targetDoc); - const animation = this.isAnimatingFetch ? 'spin 0.5s linear infinite' : 'none'; - - const title = (() => { - switch (this.openHover) { - default: - case UtilityButtonState.Default: - return `${!dataDoc?.googleDocUnchanged ? 'Pull from' : 'Fetch'} Google Docs`; - case UtilityButtonState.OpenRight: - return 'Open in Right Split'; - case UtilityButtonState.OpenExternally: - return 'Open in new Browser Tab'; - } - })(); - - return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? null : ( - {title}
}> -
{ - if (e.altKey) { - this.openHover = UtilityButtonState.OpenExternally; - } else if (e.shiftKey) { - this.openHover = UtilityButtonState.OpenRight; - } - })} - onPointerLeave={action(() => (this.openHover = UtilityButtonState.Default))} - onClick={async e => { - const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`; - if (e.shiftKey) { - e.preventDefault(); - let googleDoc = await Cast(dataDoc.googleDoc, Doc); - if (!googleDoc) { - const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, data_useCors: false }; - googleDoc = Docs.Create.WebDocument(googleDocUrl, options); - dataDoc.googleDoc = googleDoc; - } - CollectionDockingView.AddSplit(googleDoc, OpenWhereMod.right); - } else if (e.altKey) { - e.preventDefault(); - window.open(googleDocUrl); - } else { - this.clearPullColor(); - DocumentButtonBar.hasPulledHack = false; - targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1; - dataDoc.googleDocUnchanged && runInAction(() => (this.isAnimatingFetch = true)); - } - }}> - { - // prettier-ignore - switch (this.openHover) { - default: - case UtilityButtonState.Default: return dataDoc.googleDocUnchanged === false ? (this.pullIcon as any) : fetch; - case UtilityButtonState.OpenRight: return 'arrow-alt-circle-right'; - case UtilityButtonState.OpenExternally: return 'share'; - } - })()} - /> -
- - ); - } @observable subFollow = ''; @computed get followLinkButton() { @@ -579,8 +476,6 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( if (!doc || !this.view0) return null; const isText = () => doc[this.view0!.LayoutFieldKey] instanceof RichTextField; - const considerPull = () => isText() && this.considerGoogleDocsPull; - const considerPush = () => isText() && this.considerGoogleDocsPush; return (
@@ -608,14 +503,6 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
{this.pinButton}
{this.recordButton}
{!Doc.UserDoc()['documentLinksButton-fullMenu'] ? null :
{this.shareButton}
} - {!Doc.UserDoc()['documentLinksButton-fullMenu'] ? null : ( -
- {this.considerGoogleDocsPush} -
- )} -
- {this.considerGoogleDocsPull} -
{this.menuButton}
); diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 836a184eb..73ac1b032 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -94,6 +94,7 @@ export class EditableView extends ObservableReactComponent { } componentDidUpdate(prevProps: Readonly) { + super.componentDidUpdate(prevProps); if (this._editing && this._props.editing === false) { this._inputref?.value && this.finalizeEdit(this._inputref.value, false, true, false); } else if (this._props.editing !== undefined) { diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 214da5541..33cda6a62 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as fitCurve from 'fit-curve'; -import { action, computed, observable, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction, toJS } from 'mobx'; import { observer } from 'mobx-react'; import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils'; import { Doc, Opt } from '../../fields/Doc'; @@ -31,12 +31,13 @@ import { } from './InkingStroke'; import { checkInksToGroup } from './global/globalScripts'; import { DocumentView } from './nodes/DocumentView'; +import { ObservableReactComponent } from './ObservableReactComponent'; interface GestureOverlayProps { isActive: boolean; } @observer -export class GestureOverlay extends React.Component> { +export class GestureOverlay extends ObservableReactComponent> { static Instance: GestureOverlay; static Instances: GestureOverlay[] = []; @@ -84,7 +85,7 @@ export class GestureOverlay extends React.Component { + componentDidMount() { GestureOverlay.Instance = this; - }; + } @action onPointerDown = (e: React.PointerEvent) => { @@ -383,9 +384,9 @@ export class GestureOverlay extends React.Component +
{this.showMobileInkOverlay ? : null} {this.elements} diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts index 884c74f9b..69c663a3e 100644 --- a/src/client/views/InkStrokeProperties.ts +++ b/src/client/views/InkStrokeProperties.ts @@ -1,5 +1,5 @@ import { Bezier } from 'bezier-js'; -import { action, observable, reaction } from 'mobx'; +import { action, makeObservable, observable, reaction } from 'mobx'; import { Doc, NumListCast, Opt } from '../../fields/Doc'; import { InkData, InkField, InkTool, PointData } from '../../fields/InkField'; import { List } from '../../fields/List'; @@ -25,6 +25,7 @@ export class InkStrokeProperties { constructor() { InkStrokeProperties._Instance = this; + makeObservable(this); reaction( () => this._controlButton, button => button && (Doc.ActiveTool = InkTool.None) diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index de2ce3189..98d1e58e5 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -1,7 +1,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Toggle, ToggleType, Type } from 'browndash-components'; -import { action, computed, observable, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast, FieldResult, Opt } from '../../fields/Doc'; @@ -56,6 +56,7 @@ export class LightboxView extends React.Component { constructor(props: any) { super(props); + makeObservable(this); if (LightboxView.Instance) console.log('SDFSFASFASFSALFKJD:SLFJS:LDFJKS:LFJS:LDJFL:SDFJL:SDJF:LSJ'); LightboxView.Instance = this; } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f65675792..636f8761f 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -230,7 +230,7 @@ export class MainView extends ObservableReactComponent<{}> { document.removeEventListener('linkAnnotationToDash', Hypothesis.linkListener); } - constructor(props: Readonly<{}>) { + constructor(props: any) { super(props); makeObservable(this); DocumentViewInternal.addDocTabFunc = MainView.addDocTabFunc_impl; diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx index 2e27d1f70..285476b14 100644 --- a/src/client/views/MarqueeAnnotator.tsx +++ b/src/client/views/MarqueeAnnotator.tsx @@ -6,7 +6,7 @@ import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, DocData } from '../../field import { List } from '../../fields/List'; import { NumCast } from '../../fields/Types'; import { GetEffectiveAcl } from '../../fields/util'; -import { copyProps, unimplementedFunction, Utils } from '../../Utils'; +import { unimplementedFunction, Utils } from '../../Utils'; import { Docs, DocUtils } from '../documents/Documents'; import { DragManager } from '../util/DragManager'; import { FollowLinkScript } from '../util/LinkFollower'; diff --git a/src/client/views/ObservableReactComponent.tsx b/src/client/views/ObservableReactComponent.tsx index 2d8dc9af9..9b2b00903 100644 --- a/src/client/views/ObservableReactComponent.tsx +++ b/src/client/views/ObservableReactComponent.tsx @@ -1,8 +1,6 @@ -import { makeObservable, observable } from 'mobx'; +import { action, makeObservable, observable } from 'mobx'; import * as React from 'react'; -import { copyProps } from '../../Utils'; import './AntimodeMenu.scss'; -export interface AntimodeMenuProps {} /** * This is an abstract class that serves as the base for a PDF-style or Marquee-style @@ -10,12 +8,14 @@ export interface AntimodeMenuProps {} */ export abstract class ObservableReactComponent extends React.Component { @observable _props: React.PropsWithChildren; - constructor(props: React.PropsWithChildren) { + constructor(props: any) { super(props); this._props = props; makeObservable(this); } componentDidUpdate(prevProps: Readonly): void { - copyProps(this, prevProps); + Object.keys(prevProps).forEach(action(pkey => + (prevProps as any)[pkey] !== (this.props as any)[pkey] && + ((this._props as any)[pkey] = (this.props as any)[pkey]))); // prettier-ignore } } diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index c857c2d6b..2fcb5d12a 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -54,7 +54,7 @@ export class PropertiesView extends ObservableReactComponent) { + constructor(props: any) { super(props); makeObservable(this); PropertiesView.Instance = this; diff --git a/src/client/views/ScriptBox.tsx b/src/client/views/ScriptBox.tsx index 416162aeb..086f40e96 100644 --- a/src/client/views/ScriptBox.tsx +++ b/src/client/views/ScriptBox.tsx @@ -1,4 +1,4 @@ -import { action, observable } from 'mobx'; +import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, Opt } from '../../fields/Doc'; @@ -27,6 +27,7 @@ export class ScriptBox extends React.Component { constructor(props: ScriptBoxProps) { super(props); + makeObservable(this); this._scriptText = props.initialText || ''; } diff --git a/src/client/views/ScriptingRepl.tsx b/src/client/views/ScriptingRepl.tsx index 5f20bc745..acf0ecff4 100644 --- a/src/client/views/ScriptingRepl.tsx +++ b/src/client/views/ScriptingRepl.tsx @@ -35,13 +35,11 @@ export class ScriptingObjectDisplay extends ObservableReactComponent const val = this._props.value; const proto = Object.getPrototypeOf(val); const name = (proto && proto.constructor && proto.constructor.name) || String(val); - const title = this._props.name ? ( + const title = ( <> - {this._props.name} : + {this.props.name ? {this._props.name} : : <>} {name} - ) : ( - name ); if (this.collapsed) { return ( @@ -86,31 +84,19 @@ export class ScriptingValueDisplay extends ObservableReactComponent ( + <> + {this._props.name ? {this._props.name} : : <> } + {name} + + ); if (typeof val === 'object') { return ; } else if (typeof val === 'function') { const name = '[Function]'; - const title = this._props.name ? ( - <> - {this._props.name} : - {name} - - ) : ( - name - ); - return
{title}
; - } else { - const name = String(val); - const title = this._props.name ? ( - <> - {this._props.name} : - {name} - - ) : ( - name - ); - return
{title}
; + return
{title('[Function]')}
; } + return
{title(String(val))}
; } } @@ -254,7 +240,8 @@ export class ScriptingRepl extends ObservableReactComponent<{}> { ele && ele.scroll({ behavior: 'auto', top: ele.scrollHeight }); } - componentDidUpdate() { + componentDidUpdate(prevProps: Readonly<{}>) { + super.componentDidUpdate(prevProps); if (this.shouldScroll) { this.shouldScroll = false; this.scrollToBottom(); diff --git a/src/client/views/animationtimeline/Region.tsx b/src/client/views/animationtimeline/Region.tsx index abbc8203d..b09456cd7 100644 --- a/src/client/views/animationtimeline/Region.tsx +++ b/src/client/views/animationtimeline/Region.tsx @@ -1,4 +1,4 @@ -import { action, computed, observable, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; @@ -185,6 +185,7 @@ export class Region extends React.Component { constructor(props: any) { super(props); + makeObservable(this); } componentDidMount() { setTimeout(() => { diff --git a/src/client/views/animationtimeline/TimelineMenu.tsx b/src/client/views/animationtimeline/TimelineMenu.tsx index 1769c41bd..97a571dc4 100644 --- a/src/client/views/animationtimeline/TimelineMenu.tsx +++ b/src/client/views/animationtimeline/TimelineMenu.tsx @@ -1,7 +1,7 @@ import { IconLookup } from '@fortawesome/fontawesome-svg-core'; import { faChartLine, faClipboard } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, observable } from 'mobx'; +import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Utils } from '../../../Utils'; @@ -16,8 +16,9 @@ export class TimelineMenu extends React.Component { @observable private _y = 0; @observable private _currentMenu: JSX.Element[] = []; - constructor(props: Readonly<{}>) { + constructor(props: any) { super(props); + makeObservable(this); TimelineMenu.Instance = this; } diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 0d3ff8bba..97d5cfc70 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -63,10 +63,10 @@ export class CollectionDockingView extends CollectionSubView() { private _goldenLayout: any = null; static _highlightStyleSheet: any = addStyleSheet(); - constructor(props: SubCollectionViewProps) { + constructor(props: any) { super(props); makeObservable(this); - if (this._props.renderDepth < 0) runInAction(() => (CollectionDockingView.Instance = this)); + if (this._props.renderDepth < 0) CollectionDockingView.Instance = this; //Why is this here? (window as any).React = React; (window as any).ReactDOM = ReactDOM; diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 3ade2ab56..443aa3f17 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -2,14 +2,14 @@ import * as React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { Toggle, ToggleType, Type } from 'browndash-components'; -import { action, computed, Lambda, observable, reaction, runInAction } from 'mobx'; +import { action, computed, Lambda, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { List } from '../../../fields/List'; import { ObjectField } from '../../../fields/ObjectField'; import { RichTextField } from '../../../fields/RichTextField'; import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../fields/Types'; -import { copyProps, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../../Utils'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../../Utils'; import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; import { SelectionManager } from '../../util/SelectionManager'; @@ -40,10 +40,11 @@ export class CollectionMenu extends AntimodeMenu { constructor(props: any) { super(props); + makeObservable(this); this.FieldKey = ''; CollectionMenu.Instance = this; this._canFade = false; // don't let the inking menu fade away - runInAction(() => (this.Pinned = Cast(Doc.UserDoc()['menuCollections-pinned'], 'boolean', true))); + this.Pinned = Cast(Doc.UserDoc()['menuCollections-pinned'], 'boolean', true); this.jumpTo(300, 300); } diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index d37a942d0..fb8bc4da2 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -54,7 +54,7 @@ export enum TrimScope { } @observer -export class CollectionStackedTimeline extends CollectionSubView() { +export class CollectionStackedTimeline extends CollectionSubView() { @observable static SelectingRegion: CollectionStackedTimeline | undefined = undefined; @observable public static CurrentlyPlaying: DocumentView[]; constructor(props: any) { @@ -695,7 +695,7 @@ class StackedTimelineAnchor extends ObservableReactComponent) { + constructor(props: any) { super(props); makeObservable(this); this._lastTimecode = this._props.currentTimecode(); diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 2302bfbc3..f9d575da2 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -58,7 +58,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent< @observable _heading = ''; @observable _color = ''; - constructor(props: CSVFieldColumnProps) { + constructor(props: any) { super(props); makeObservable(this); this._heading = this._props.headingObject ? this._props.headingObject.heading : this._props.heading; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index f1ef52e60..0673b264b 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -121,7 +121,6 @@ export class CollectionView extends ViewBoxAnnotatableComponent; - case CollectionViewType.Docking: return ; case CollectionViewType.Schema: return ; case CollectionViewType.Docking: return ; case CollectionViewType.Tree: return ; diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 2eb13fd2f..783817b06 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -340,6 +340,7 @@ export class TabDocView extends ObservableReactComponent { runInAction(() => TabDocView._allTabs.add(this)); } componentDidUpdate(prevProps: Readonly) { + super.componentDidUpdate(prevProps); this._view && DocumentManager.Instance.AddView(this._view); } diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 52ecdfbec..a7705ea7e 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -296,6 +296,7 @@ export class TreeView extends ObservableReactComponent { } componentDidUpdate(prevProps: Readonly) { + super.componentDidUpdate(prevProps); this._disposers.opening = reaction( () => this.treeViewOpen, open => !open && (this._renderCount = 20) diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx index 0d5fcdaeb..66aa29de0 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx @@ -3,7 +3,6 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { ObservableReactComponent } from '../../ObservableReactComponent'; import './CollectionFreeFormView.scss'; -import { copyProps } from '../../../../Utils'; /** * An Fsa Arc. The first array element is a test condition function that will be observed. @@ -83,7 +82,7 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent) { - copyProps(this, prevProps); + super.componentDidUpdate(prevProps); this.clearState(); this.initState(); } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index 4d3752c02..5637f9aeb 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -18,23 +18,19 @@ export interface CollectionFreeFormInfoUIProps { export class CollectionFreeFormInfoUI extends ObservableReactComponent { private _disposers: { [name: string]: IReactionDisposer } = {}; - @observable _currState: infoState | undefined = undefined; - get currState() { - return this._currState!; - } - set currState(val) { - this._currState = val; - } - constructor(props: any) { super(props); makeObservable(this); this.currState = this.setupStates(); } + @observable _currState: infoState | undefined = undefined; + get currState() { return this._currState!; } // prettier-ignore + set currState(val) { runInAction(() => (this._currState = val)); } // prettier-ignore + setCurrState = (state: infoState) => { if (state) { - runInAction(() => (this.currState = state)); + this.currState = state; this.currState[StateEntryFunc]?.(); } }; diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx index 7aa68b0d9..79cc534dc 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { IconButton } from 'browndash-components'; -import { computed } from 'mobx'; +import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { unimplementedFunction } from '../../../../Utils'; @@ -18,8 +18,9 @@ export class MarqueeOptionsMenu extends AntimodeMenu { public hideMarquee: () => void = unimplementedFunction; public pinWithView: (e: KeyboardEvent | React.PointerEvent | undefined) => void = unimplementedFunction; public isShown = () => this._opacity > 0; - constructor(props: Readonly<{}>) { + constructor(props: any) { super(props); + makeObservable(this); MarqueeOptionsMenu.Instance = this; } diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index b951a4b17..9132c0436 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -127,7 +127,7 @@ export class CollectionMulticolumnView extends CollectionSubView() { private get totalRatioAllocation(): number | undefined { const layoutInfoLen = this.resolvedLayoutInformation.widthSpecifiers.length; if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined) { - return this.props.PanelWidth() - (this.totalFixedAllocation + resizerWidth * (layoutInfoLen - 1)) - 2 * NumCast(this.props.Document._xMargin); + return this._props.PanelWidth() - (this.totalFixedAllocation + resizerWidth * (layoutInfoLen - 1)) - 2 * NumCast(this._props.Document._xMargin); } } @@ -189,7 +189,7 @@ export class CollectionMulticolumnView extends CollectionSubView() { let offset = 0; for (const { layout: candidate } of this.childLayoutPairs) { if (candidate === layout) { - return this.props.ScreenToLocalTransform().translate(-offset / (this.props.NativeDimScaling?.() || 1), 0); + return this._props.ScreenToLocalTransform().translate(-offset / (this._props.NativeDimScaling?.() || 1), 0); } offset += this.lookupPixels(candidate) + resizerWidth; } @@ -223,8 +223,8 @@ export class CollectionMulticolumnView extends CollectionSubView() { if (this.childDocs.includes(d)) { if (dropInd > this.childDocs.indexOf(d)) dropInd--; } - Doc.RemoveDocFromList(this.dataDoc, this.props.fieldKey, d); - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, d, DocListCast(this.dataDoc[this.props.fieldKey])[dropInd], undefined, dropInd === -1); + Doc.RemoveDocFromList(this.dataDoc, this._props.fieldKey, d); + Doc.AddDocToList(this.dataDoc, this._props.fieldKey, d, DocListCast(this.dataDoc[this._props.fieldKey])[dropInd], undefined, dropInd === -1); } }) ); @@ -237,56 +237,56 @@ export class CollectionMulticolumnView extends CollectionSubView() { onChildClickHandler = () => ScriptCast(this.Document.onChildClick); onChildDoubleClickHandler = () => ScriptCast(this.Document.onChildDoubleClick); - isContentActive = () => this.props.isSelected() || this.props.isContentActive() || this.props.isAnyChildContentActive(); + isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive(); isChildContentActive = () => { - const childDocsActive = this.props.childDocumentsActive?.() ?? this.Document.childDocumentsActive; - return this.props.isContentActive?.() === false || childDocsActive === false + const childDocsActive = this._props.childDocumentsActive?.() ?? this.Document.childDocumentsActive; + return this._props.isContentActive?.() === false || childDocsActive === false ? false // - : this.props.isDocumentActive?.() && childDocsActive + : this._props.isDocumentActive?.() && childDocsActive ? true : undefined; }; getDisplayDoc = (childLayout: Doc) => { const width = () => this.lookupPixels(childLayout); - const height = () => this.props.PanelHeight() - 2 * NumCast(this.layoutDoc._yMargin) - (BoolCast(this.layoutDoc.showWidthLabels) ? 20 : 0); + const height = () => this._props.PanelHeight() - 2 * NumCast(this.layoutDoc._yMargin) - (BoolCast(this.layoutDoc.showWidthLabels) ? 20 : 0); const dxf = () => this.lookupIndividualTransform(childLayout) .translate(-NumCast(this.layoutDoc._xMargin), -NumCast(this.layoutDoc._yMargin)) - .scale(this.props.NativeDimScaling?.() || 1); - const shouldNotScale = () => this.props.fitContentsToBox?.() || BoolCast(childLayout.freeform_fitContentsToBox); + .scale(this._props.NativeDimScaling?.() || 1); + const shouldNotScale = () => this._props.fitContentsToBox?.() || BoolCast(childLayout.freeform_fitContentsToBox); return ( @@ -306,16 +306,16 @@ export class CollectionMulticolumnView extends CollectionSubView() {
{this.getDisplayDoc(layout)} -
, {this.contents}
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index f1c6c6e1e..cf65bf12a 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -123,7 +123,7 @@ export class CollectionMultirowView extends CollectionSubView() { private get totalRatioAllocation(): number | undefined { const layoutInfoLen = this.resolvedLayoutInformation.heightSpecifiers.length; if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined) { - return this.props.PanelHeight() - (this.totalFixedAllocation + resizerHeight * (layoutInfoLen - 1)) - 2 * NumCast(this.props.Document._yMargin); + return this._props.PanelHeight() - (this.totalFixedAllocation + resizerHeight * (layoutInfoLen - 1)) - 2 * NumCast(this._props.Document._yMargin); } } @@ -185,7 +185,7 @@ export class CollectionMultirowView extends CollectionSubView() { let offset = 0; for (const { layout: candidate } of this.childLayoutPairs) { if (candidate === layout) { - return this.props.ScreenToLocalTransform().translate(0, -offset / (this.props.NativeDimScaling?.() || 1)); + return this._props.ScreenToLocalTransform().translate(0, -offset / (this._props.NativeDimScaling?.() || 1)); } offset += this.lookupPixels(candidate) + resizerHeight; } @@ -219,8 +219,8 @@ export class CollectionMultirowView extends CollectionSubView() { if (this.childDocs.includes(d)) { if (dropInd > this.childDocs.indexOf(d)) dropInd--; } - Doc.RemoveDocFromList(this.dataDoc, this.props.fieldKey, d); - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, d, DocListCast(this.dataDoc[this.props.fieldKey])[dropInd], undefined, dropInd === -1); + Doc.RemoveDocFromList(this.dataDoc, this._props.fieldKey, d); + Doc.AddDocToList(this.dataDoc, this._props.fieldKey, d, DocListCast(this.dataDoc[this._props.fieldKey])[dropInd], undefined, dropInd === -1); } }) ); @@ -233,32 +233,32 @@ export class CollectionMultirowView extends CollectionSubView() { onChildClickHandler = () => ScriptCast(this.Document.onChildClick); onChildDoubleClickHandler = () => ScriptCast(this.Document.onChildDoubleClick); - isContentActive = () => this.props.isSelected() || this.props.isContentActive() || this.props.isAnyChildContentActive(); + isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive(); isChildContentActive = () => { - const childDocsActive = this.props.childDocumentsActive?.() ?? this.Document.childDocumentsActive; - return this.props.isContentActive?.() === false || childDocsActive === false + const childDocsActive = this._props.childDocumentsActive?.() ?? this.Document.childDocumentsActive; + return this._props.isContentActive?.() === false || childDocsActive === false ? false // - : this.props.isDocumentActive?.() && childDocsActive + : this._props.isDocumentActive?.() && childDocsActive ? true : undefined; }; getDisplayDoc = (layout: Doc) => { const height = () => this.lookupPixels(layout); - const width = () => this.props.PanelWidth() - 2 * NumCast(this.layoutDoc._xMargin) - (BoolCast(this.layoutDoc.showWidthLabels) ? 20 : 0); + const width = () => this._props.PanelWidth() - 2 * NumCast(this.layoutDoc._xMargin) - (BoolCast(this.layoutDoc.showWidthLabels) ? 20 : 0); const dxf = () => this.lookupIndividualTransform(layout) .translate(-NumCast(this.layoutDoc._xMargin), -NumCast(this.layoutDoc._yMargin)) - .scale(this.props.NativeDimScaling?.() || 1); - const shouldNotScale = () => this.props.fitContentsToBox?.() || BoolCast(layout.freeform_fitContentsToBox); + .scale(this._props.NativeDimScaling?.() || 1); + const shouldNotScale = () => this._props.fitContentsToBox?.() || BoolCast(layout.freeform_fitContentsToBox); return ( @@ -305,8 +305,8 @@ export class CollectionMultirowView extends CollectionSubView() {
, {this.contents} diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index c97c879af..548734dab 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -83,7 +83,8 @@ export class CollectionFreeFormDocumentViewWrapper extends DocComponent this._props.autoDim ? this._props.PanelWidth?.() : this.Width; // prettier-ignore PanelHeight = () => this._props.autoDim ? this._props.PanelHeight?.() : this.Height; // prettier-ignore - componentDidUpdate() { + componentDidUpdate(prevProps: Readonly>) { + super.componentDidUpdate(prevProps); this.WrapperKeys.forEach(action(keys => ((this as any)[keys.upper] = (this.props as any)[keys.lower]))); } render() { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 343f770d5..ab413e6f2 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1334,7 +1334,7 @@ export class DocumentView extends ObservableReactComponent { return this._selected; } public set SELECTED(val) { - this._selected = val; + runInAction(() => (this._selected = val)); } @observable public static Interacting = false; @observable public static LongPress = false; diff --git a/src/client/views/nodes/FunctionPlotBox.tsx b/src/client/views/nodes/FunctionPlotBox.tsx index 29bffb583..c26579e66 100644 --- a/src/client/views/nodes/FunctionPlotBox.tsx +++ b/src/client/views/nodes/FunctionPlotBox.tsx @@ -24,7 +24,7 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent _plotId = ''; _plotEle: any; - constructor(props: React.PropsWithChildren) { + constructor(props: any) { super(props); makeObservable(this); this._plotId = 'graph' + FunctionPlotBox.GraphCount++; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index b1ccd38ba..876f13370 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -55,8 +55,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent(); @observable _curSuffix = ''; - constructor(props: ViewBoxAnnotatableProps & FieldViewProps) { + constructor(props: any) { super(props); + makeObservable(this); this._props.setContentView?.(this); } diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index fa7a55bc7..d0a9f10b4 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -5,7 +5,7 @@ import { observer } from 'mobx-react'; import wiki from 'wikijs'; import { Doc, Opt } from '../../../fields/Doc'; import { Cast, DocCast, NumCast, PromiseValue, StrCast } from '../../../fields/Types'; -import { copyProps, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnNone, setupMoveUpEvents } from '../../../Utils'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnNone, setupMoveUpEvents } from '../../../Utils'; import { DocServer } from '../../DocServer'; import { Docs } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; @@ -82,7 +82,7 @@ export class LinkDocPreview extends ObservableReactComponent) { - copyProps(this, prevProps); + super.componentDidUpdate(prevProps); if (prevProps.linkSrc !== this._props.linkSrc || prevProps.linkDoc !== this._props.linkDoc || prevProps.hrefs !== this._props.hrefs) this.init(); } componentDidMount() { diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx index b458e5a28..66c4dc7b8 100644 --- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx +++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { IReactionDisposer, ObservableMap, reaction } from 'mobx'; +import { IReactionDisposer, ObservableMap, makeObservable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { returnFalse, setupMoveUpEvents, unimplementedFunction } from '../../../../Utils'; @@ -34,8 +34,9 @@ export class MapAnchorMenu extends AntimodeMenu { return this._left > 0; } - constructor(props: Readonly<{}>) { + constructor(props: any) { super(props); + makeObservable(this); MapAnchorMenu.Instance = this; MapAnchorMenu.Instance._canFade = false; } diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 213f88177..733febd2d 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -58,7 +58,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent>) { + super.componentDidUpdate(prevProps); if (this.xMax !== this.props.PanelWidth() * 0.6 || this.yMax != this.props.PanelHeight()) { this.xMax = this.props.PanelWidth() * 0.6; this.yMax = this.props.PanelHeight(); diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx index 99333991f..f5077a07e 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx @@ -1,4 +1,4 @@ -import { computed, IReactionDisposer, reaction } from 'mobx'; +import { computed, IReactionDisposer, makeObservable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import './PhysicsSimulationBox.scss'; import * as React from 'react'; @@ -93,6 +93,7 @@ interface IState { export default class Weight extends React.Component { constructor(props: any) { super(props); + makeObservable(this); this.state = { angleLabel: 0, clickPositionX: 0, diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx index 191877cb5..061a46f03 100644 --- a/src/client/views/nodes/RadialMenu.tsx +++ b/src/client/views/nodes/RadialMenu.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import './RadialMenu.scss'; import { RadialMenuItem, RadialMenuProps } from './RadialMenuItem'; @@ -9,9 +9,9 @@ export class RadialMenu extends React.Component { static Instance: RadialMenu; static readonly buffer = 20; - constructor(props: Readonly<{}>) { + constructor(props: any) { super(props); - + makeObservable(this); RadialMenu.Instance = this; } diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index a7ff8ff8f..d5d31b407 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // import { Canvas } from '@react-three/fiber'; -import { computed, observable, runInAction } from 'mobx'; +import { computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; // import { BufferAttribute, Camera, Vector2, Vector3 } from 'three'; import { DateField } from '../../../fields/DateField'; @@ -123,14 +123,8 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent { const startTime = Cast(this.layoutDoc._layout_currentTimecode, 'number', null) || (this._videoRec ? (Date.now() - (this.recordingStart || 0)) / 1000 : undefined); @@ -173,7 +167,6 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent { - constructor(props: IDashDocCommentViewInternal) { + constructor(props: any) { super(props); this.onPointerLeaveCollapsed = this.onPointerLeaveCollapsed.bind(this); this.onPointerEnterCollapsed = this.onPointerEnterCollapsed.bind(this); diff --git a/src/client/views/nodes/formattedText/EquationEditor.tsx b/src/client/views/nodes/formattedText/EquationEditor.tsx index 07c70af77..b4102e08e 100644 --- a/src/client/views/nodes/formattedText/EquationEditor.tsx +++ b/src/client/views/nodes/formattedText/EquationEditor.tsx @@ -44,7 +44,7 @@ class EquationEditor extends Component { // Element needs to be in the class format and thus requires a constructor. The steps that are run // in the constructor is to make sure that React can succesfully communicate with the equation // editor. - constructor(props: EquationEditorProps) { + constructor(props: any) { super(props); this.element = createRef(); diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx index 5ee5d25c3..331ed1980 100644 --- a/src/client/views/nodes/formattedText/EquationView.tsx +++ b/src/client/views/nodes/formattedText/EquationView.tsx @@ -8,6 +8,7 @@ import { StrCast } from '../../../../fields/Types'; import './DashFieldView.scss'; import { FormattedTextBox } from './FormattedTextBox'; import * as React from 'react'; +import { AnyArray } from 'mongoose'; export class EquationView { dom: HTMLDivElement; // container for label and value @@ -63,7 +64,7 @@ export class EquationViewInternal extends React.Component _fieldKey: string; _ref: React.RefObject = React.createRef(); - constructor(props: IEquationViewInternal) { + constructor(props: any) { super(props); this._fieldKey = this.props.fieldKey; this._textBoxDoc = this.props.tbox.props.Document; diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 997c3f86d..ad2fab8b0 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -208,7 +208,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent) { + constructor(props: any) { super(props); makeObservable(this); FormattedTextBox.Instance = this; diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 4ff816812..17993d88e 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; -import { action, computed, IReactionDisposer, observable, ObservableSet, reaction, runInAction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, ObservableSet, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { Doc, DocListCast, FieldResult, NumListCast, Opt, StrListCast } from '../../../../fields/Doc'; import { Animation } from '../../../../fields/DocSymbols'; @@ -72,6 +72,7 @@ export class PresBox extends ViewBoxBaseComponent() { constructor(props: any) { super(props); + makeObservable(this); if (!PresBox.navigateToDocScript) { PresBox.navigateToDocScript = ScriptField.MakeFunction('navigateToDoc(this.presentation_targetDoc, self)')!; } diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx index a8c83ded6..d0688c338 100644 --- a/src/client/views/pdf/AnchorMenu.tsx +++ b/src/client/views/pdf/AnchorMenu.tsx @@ -23,7 +23,7 @@ export class AnchorMenu extends AntimodeMenu { private _commentRef = React.createRef(); private _cropRef = React.createRef(); - constructor(props: AntimodeMenuProps) { + constructor(props: any) { super(props); makeObservable(this); AnchorMenu.Instance = this; diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx index 0cda36509..cdd0cb95a 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx +++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import './GPTPopup.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, observable } from 'mobx'; +import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import ReactLoading from 'react-loading'; import { TypeAnimation } from 'react-type-animation'; @@ -14,6 +14,7 @@ import { AnchorMenu } from '../AnchorMenu'; import { gptImageCall } from '../../../apis/gpt/GPT'; import { Networking } from '../../../Network'; import { Utils } from '../../../../Utils'; +import { ObservableReactComponent } from '../../ObservableReactComponent'; export enum GPTPopupMode { SUMMARY, @@ -24,7 +25,7 @@ export enum GPTPopupMode { interface GPTPopupProps {} @observer -export class GPTPopup extends React.Component { +export class GPTPopup extends ObservableReactComponent { static Instance: GPTPopup; @observable @@ -177,6 +178,7 @@ export class GPTPopup extends React.Component { constructor(props: GPTPopupProps) { super(props); + makeObservable(this); GPTPopup.Instance = this; } diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss deleted file mode 100644 index 4892facbc..000000000 --- a/src/client/views/search/CheckBox.scss +++ /dev/null @@ -1,58 +0,0 @@ -@import '../global/globalCssVariables.module.scss'; - -.checkboxfilter { - display: flex; - margin-top: 0px; - padding: 3px; - - .outer { - display: flex; - position: relative; - justify-content: center; - align-items: center; - margin-top: 0px; - - .check-container:hover ~ .check-box { - background-color: $medium-blue; - } - - .check-container { - width: 40px; - height: 40px; - position: absolute; - z-index: 1000; - - .checkmark { - z-index: 1000; - position: absolute; - fill-opacity: 0; - stroke-width: 4px; - // stroke: white; - stroke: gray; - } - } - - .check-box { - z-index: 900; - position: relative; - height: 20px; - width: 20px; - overflow: visible; - background-color: transparent; - border-style: solid; - border-color: $medium-gray; - border-width: 2px; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - } - } - - .checkbox-title { - display: flex; - align-items: center; - text-transform: capitalize; - margin-left: 15px; - } -} diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx deleted file mode 100644 index 0a1e551ec..000000000 --- a/src/client/views/search/CheckBox.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import * as React from 'react'; -import { observer } from 'mobx-react'; -import { observable, action, runInAction, IReactionDisposer, reaction } from 'mobx'; -import "./CheckBox.scss"; - -interface CheckBoxProps { - originalStatus: boolean; - updateStatus(newStatus: boolean): void; - title: string; - parent: any; - numCount: number; - default: boolean; -} - -@observer -export class CheckBox extends React.Component{ - // true = checked, false = unchecked - @observable private _status: boolean; - // @observable private uncheckTimeline: anime.AnimeTimelineInstance; - // @observable private checkTimeline: anime.AnimeTimelineInstance; - @observable private checkRef: any; - @observable private _resetReaction?: IReactionDisposer; - - - constructor(props: CheckBoxProps) { - super(props); - this._status = this.props.originalStatus; - this.checkRef = React.createRef(); - - // this.checkTimeline = anime.timeline({ - // loop: false, - // autoplay: false, - // direction: "normal", - // }); this.uncheckTimeline = anime.timeline({ - // loop: false, - // autoplay: false, - // direction: "normal", - // }); - } - - // componentDidMount = () => { - // this.uncheckTimeline.add({ - // targets: this.checkRef.current, - // easing: "easeInOutQuad", - // duration: 500, - // opacity: 0, - // }); - // this.checkTimeline.add({ - // targets: this.checkRef.current, - // easing: "easeInOutQuad", - // duration: 500, - // strokeDashoffset: [anime.setDashoffset, 0], - // opacity: 1 - // }); - - // if (this.props.originalStatus) { - // this.checkTimeline.play(); - // this.checkTimeline.restart(); - // } - - // this._resetReaction = reaction( - // () => this.props.parent._resetBoolean, - // () => { - // if (this.props.parent._resetBoolean) { - // runInAction(() => { - // this.reset(); - // this.props.parent._resetCounter++; - // if (this.props.parent._resetCounter === this.props.numCount) { - // this.props.parent._resetCounter = 0; - // this.props.parent._resetBoolean = false; - // } - // }); - // } - // }, - // ); - // } - - // @action.bound - // reset() { - // if (this.props.default) { - // if (!this._status) { - // this._status = true; - // this.checkTimeline.play(); - // this.checkTimeline.restart(); - // } - // } - // else { - // if (this._status) { - // this._status = false; - // this.uncheckTimeline.play(); - // this.uncheckTimeline.restart(); - // } - // } - - // this.props.updateStatus(this.props.default); - // } - - @action.bound - onClick = () => { - // if (this._status) { - // this.uncheckTimeline.play(); - // this.uncheckTimeline.restart(); - // } - // else { - // this.checkTimeline.play(); - // this.checkTimeline.restart(); - - // } - // this._status = !this._status; - // this.props.updateStatus(this._status); - - } - - render() { - return ( -
-
-
- - - -
-
-
-
{this.props.title}
-
- ); - } - -} \ No newline at end of file diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss deleted file mode 100644 index 6105df570..000000000 --- a/src/client/views/search/CollectionFilters.scss +++ /dev/null @@ -1,20 +0,0 @@ -@import '../global/globalCssVariables.module.scss'; - -.collection-filters { - display: flex; - flex-direction: row; - width: 100%; - - &.main { - width: 47%; - float: left; - } - - &.optional { - width: 60%; - display: grid; - grid-template-columns: 50% 50%; - float: right; - opacity: 0; - } -} diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx deleted file mode 100644 index 48d0b2ddb..000000000 --- a/src/client/views/search/CollectionFilters.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import * as React from 'react'; -import { observable, action } from 'mobx'; -import { CheckBox } from './CheckBox'; -import "./CollectionFilters.scss"; -import * as anime from 'animejs'; - -interface CollectionFilterProps { - collectionStatus: boolean; - updateCollectionStatus(val: boolean): void; - collectionSelfStatus: boolean; - updateSelfCollectionStatus(val: boolean): void; - collectionParentStatus: boolean; - updateParentCollectionStatus(val: boolean): void; -} - -export class CollectionFilters extends React.Component { - - static Instance: CollectionFilters; - - @observable public _resetBoolean = false; - @observable public _resetCounter: number = 0; - - @observable private _collectionsSelected = this.props.collectionStatus; - @observable private _timeline: anime.AnimeTimelineInstance; - @observable private _ref: any; - - constructor(props: CollectionFilterProps) { - super(props); - CollectionFilters.Instance = this; - this._ref = React.createRef(); - - this._timeline = anime.timeline({ - loop: false, - autoplay: false, - direction: "reverse", - }); - } - - componentDidMount = () => { - this._timeline.add({ - targets: this._ref.current, - easing: "easeInOutQuad", - duration: 500, - opacity: 1, - }); - - if (this._collectionsSelected) { - this._timeline.play(); - this._timeline.reverse(); - } - } - - @action.bound - resetCollectionFilters() { this._resetBoolean = true; } - - @action.bound - updateColStat(val: boolean) { - this.props.updateCollectionStatus(val); - - if (this._collectionsSelected !== val) { - this._timeline.play(); - this._timeline.reverse(); - } - - this._collectionsSelected = val; - } - - render() { - return ( -
-
-
- -
-
- - -
-
-
- ); - } -} \ No newline at end of file diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss deleted file mode 100644 index 05aa099f7..000000000 --- a/src/client/views/search/IconBar.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import '../global/globalCssVariables.module.scss'; - -.icon-bar { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - height: auto; - width: 100%; - flex-direction: row-reverse; -} diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx deleted file mode 100644 index 540c1b5e1..000000000 --- a/src/client/views/search/IconBar.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { action, observable } from 'mobx'; -import { observer } from 'mobx-react'; -import * as React from 'react'; -import { DocumentType } from '../../documents/DocumentTypes'; -import './IconBar.scss'; -import { IconButton } from './IconButton'; -import './IconButton.scss'; - -export interface IconBarProps { - setIcons: (icons: string[]) => void; -} - -@observer -export class IconBar extends React.Component { - public _allIcons: string[] = [DocumentType.AUDIO, DocumentType.COL, DocumentType.IMG, DocumentType.LINK, DocumentType.PDF, DocumentType.RTF, DocumentType.VID, DocumentType.WEB, DocumentType.MAP]; - - @observable private _icons: string[] = this._allIcons; - - static Instance: IconBar; - - @observable public _resetClicked: boolean = false; - @observable public _selectAllClicked: boolean = false; - @observable public _reset: number = 0; - @observable public _select: number = 0; - - @action.bound - updateIcon(newArray: string[]) { - this._icons = newArray; - this.props.setIcons?.(this._icons); - } - - @action.bound - getIcons(): string[] { - return this._icons; - } - - constructor(props: any) { - super(props); - IconBar.Instance = this; - } - - @action.bound - getList(): string[] { - return this.getIcons(); - } - - @action.bound - updateList(newList: string[]) { - this.updateIcon(newList); - } - - @action.bound - resetSelf = () => { - this._resetClicked = true; - this.updateList([]); - }; - - @action.bound - selectAll = () => { - this._selectAllClicked = true; - this.updateList(this._allIcons); - }; - - render() { - return ( -
- {this._allIcons.map((type: string) => ( - - ))} -
- ); - } -} diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss deleted file mode 100644 index d2a2ea369..000000000 --- a/src/client/views/search/IconButton.scss +++ /dev/null @@ -1,53 +0,0 @@ -@import '../global/globalCssVariables.module.scss'; - -.type-outer { - display: flex; - flex-direction: column; - align-items: center; - width: 30px; - - .type-icon { - height: 30px; - width: 30px; - color: $white; - // background-color: rgb(194, 194, 197); - background-color: gray; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - font-size: 2em; - - .fontawesome-icon { - height: 15px; - width: 15px; - } - } - - .filter-description { - text-transform: capitalize; - font-size: 10; - text-align: center; - height: 15px; - margin-top: 5px; - opacity: 1; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - } - - .type-icon:hover { - transform: scale(1.1); - background-color: $medium-blue; - opacity: 1; - - + .filter-description { - opacity: 1; - } - } -} diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx deleted file mode 100644 index 20084b64d..000000000 --- a/src/client/views/search/IconButton.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import * as _ from 'lodash'; -import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; -import { observer } from 'mobx-react'; -import * as React from 'react'; -import { DocumentType } from '../../documents/DocumentTypes'; -import '../global/globalCssVariables.module.scss'; -import { IconBar } from './IconBar'; -import './IconButton.scss'; -import './SearchBox.scss'; - -interface iconButtonProps { - type: string; -} - -@observer -export class IconButton extends React.Component { - @observable private _isSelected: boolean = IconBar.Instance.getIcons().indexOf(this.props.type) !== -1; - @observable private _hover = false; - private _resetReaction?: IReactionDisposer; - private _selectAllReaction?: IReactionDisposer; - - static Instance: IconButton; - constructor(props: iconButtonProps) { - super(props); - IconButton.Instance = this; - } - - componentDidMount = () => { - this._resetReaction = reaction( - () => IconBar.Instance._resetClicked, - action(() => { - if (IconBar.Instance._resetClicked) { - this._isSelected = false; - IconBar.Instance._reset++; - if (IconBar.Instance._reset === 9) { - IconBar.Instance._reset = 0; - IconBar.Instance._resetClicked = false; - } - } - }) - ); - - this._selectAllReaction = reaction( - () => IconBar.Instance._selectAllClicked, - action(() => { - if (IconBar.Instance._selectAllClicked) { - this._isSelected = true; - IconBar.Instance._select++; - if (IconBar.Instance._select === 9) { - IconBar.Instance._select = 0; - IconBar.Instance._selectAllClicked = false; - } - } - }) - ); - }; - - @action.bound - getIcon() { - switch (this.props.type) { - case DocumentType.NONE: return 'ban'; - case DocumentType.AUDIO: return 'music'; - case DocumentType.COL: return 'object-group'; - case DocumentType.IMG: return 'image'; - case DocumentType.LINK: return 'link'; - case DocumentType.PDF: return 'file-pdf'; - case DocumentType.RTF: return 'sticky-note'; - case DocumentType.VID: return 'video'; - case DocumentType.WEB: return 'globe-asia'; - case DocumentType.MAP: return 'map-marker-alt'; - default: return 'caret-down'; - } // prettier-ignore - } - - @action.bound - onClick = () => { - const newList: string[] = IconBar.Instance.getIcons(); - - if (!this._isSelected) { - this._isSelected = true; - newList.push(this.props.type); - } else { - this._isSelected = false; - _.pull(newList, this.props.type); - } - - IconBar.Instance.updateIcon(newList); - }; - - selected = { - opacity: 1, - backgroundColor: '#121721', - //backgroundColor: "rgb(128, 128, 128)" - }; - - notSelected = { - opacity: 0.2, - backgroundColor: '#121721', - }; - - hoverStyle = { - opacity: 1, - backgroundColor: 'rgb(128, 128, 128)', - //backgroundColor: "rgb(178, 206, 248)" //$medium-blue - }; - - render() { - return ( -
(this._hover = true)} onMouseLeave={() => (this._hover = false)} onClick={this.onClick}> -
- -
- {/*
{this.props.type}
*/} -
- ); - } -} diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss deleted file mode 100644 index 917635c0b..000000000 --- a/src/client/views/search/NaviconButton.scss +++ /dev/null @@ -1,69 +0,0 @@ -@import '../global/globalCssVariables.module.scss'; - -$height-icon: 15px; -$width-line: 30px; -$height-line: 4px; - -$transition-time: 0.4s; -$rotation: 45deg; -$translateY: calc($height-icon / 2); -$translateX: 0; - -#hamburger-icon { - width: $width-line; - height: $height-icon; - position: relative; - display: block; - transition: all $transition-time; - -webkit-transition: all $transition-time; - -moz-transition: all $transition-time; - - .line { - display: block; - background: $medium-gray; - width: $width-line; - height: $height-line; - position: absolute; - left: 0; - border-radius: calc($height-line / 2); - transition: all $transition-time; - -webkit-transition: all $transition-time; - -moz-transition: all $transition-time; - - &.line-1 { - top: 0; - } - - &.line-2 { - top: 50%; - } - - &.line-3 { - top: 100%; - } - } -} - -.filter-header.active { - .line-1 { - transform: translateY($translateY) translateX($translateX) rotate($rotation); - -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation); - -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation); - } - - .line-2 { - opacity: 0; - } - - .line-3 { - transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1); - -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1); - -moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1); - } -} - -.filter-header:hover #hamburger-icon { - transform: scale(1.1); - -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); -} diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx deleted file mode 100644 index 0fa4a0fca..000000000 --- a/src/client/views/search/NaviconButton.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react'; -import { observer } from 'mobx-react'; -import "./NaviconButton.scss"; -import * as $ from 'jquery'; -import { observable } from 'mobx'; - -export interface NaviconProps { - onClick(): void; -} - -export class NaviconButton extends React.Component { - - @observable private _ref: React.RefObject = React.createRef(); - - componentDidMount = () => { - const that = this; - if (this._ref.current) { - this._ref.current.addEventListener("click", function (e) { - e.preventDefault(); - if (that._ref.current) { - that._ref.current.classList.toggle('active'); - return false; - } - }); - } - } - - render() { - return ( - - - - - - ); - } -} \ No newline at end of file diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index a3c4bd2ed..09e459f7d 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -1,5 +1,4 @@ @import '../global/globalCssVariables.module.scss'; -@import './NaviconButton.scss'; .searchBox-container { width: 100%; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 3172ff9c0..ccfccb771 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -1,5 +1,5 @@ import { Tooltip } from '@mui/material'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast, DocListCastAsync, Field, Opt } from '../../../fields/Doc'; @@ -61,6 +61,7 @@ export class SearchBox extends ViewBoxBaseComponent() { */ constructor(props: any) { super(props); + makeObservable(this); SearchBox.Instance = this; } diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss deleted file mode 100644 index 9e27db2bc..000000000 --- a/src/client/views/search/ToggleBar.scss +++ /dev/null @@ -1,41 +0,0 @@ -@import '../global/globalCssVariables.module.scss'; - -.toggle-title { - display: flex; - align-items: center; - color: $white; - text-transform: uppercase; - flex-direction: row; - justify-content: space-around; - padding: 5px; - - .toggle-option { - width: 50%; - text-align: center; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - color: gray; - font-size: 13; - } -} - -.toggle-bar { - // height: 50px; - height: 30px; - width: 100px; - background-color: $medium-gray; - border-radius: 10px; - padding: 5px; - display: flex; - align-items: center; - - .toggle-button { - // width: 275px; - width: 40px; - height: 100%; - border-radius: 10px; - background-color: $white; - } -} diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx deleted file mode 100644 index 466822eba..000000000 --- a/src/client/views/search/ToggleBar.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import * as React from 'react'; -import { observer } from 'mobx-react'; -import { observable, action, runInAction, computed } from 'mobx'; -import "./SearchBox.scss"; -import "./ToggleBar.scss"; -import * as anime from 'animejs'; - -export interface ToggleBarProps { - originalStatus: boolean; - optionOne: string; - optionTwo: string; - handleChange(): void; - getStatus(): boolean; -} - -@observer -export class ToggleBar extends React.Component{ - static Instance: ToggleBar; - - @observable private _forwardTimeline: anime.AnimeTimelineInstance; - @observable private _toggleButton: React.RefObject; - @observable private _originalStatus: boolean = this.props.originalStatus; - - constructor(props: ToggleBarProps) { - super(props); - ToggleBar.Instance = this; - this._toggleButton = React.createRef(); - this._forwardTimeline = anime.timeline({ - loop: false, - autoplay: false, - direction: "reverse", - }); - } - - componentDidMount = () => { - const totalWidth = 265; - - if (this._originalStatus) { - this._forwardTimeline.add({ - targets: this._toggleButton.current, - translateX: totalWidth, - easing: "easeInOutQuad", - duration: 500 - }); - } - else { - this._forwardTimeline.add({ - targets: this._toggleButton.current, - translateX: -totalWidth, - easing: "easeInOutQuad", - duration: 500 - }); - } - } - - @action.bound - onclick() { - this._forwardTimeline.play(); - this._forwardTimeline.reverse(); - this.props.handleChange(); - } - - @action.bound - public resetToggle = () => { - if (!this.props.getStatus()) { - this._forwardTimeline.play(); - this._forwardTimeline.reverse(); - this.props.handleChange(); - } - } - - render() { - return ( -
-
-
{this.props.optionOne}
-
{this.props.optionTwo}
-
-
-
-
-
- ); - } -} \ No newline at end of file diff --git a/src/fields/URLField.ts b/src/fields/URLField.ts index 8ac20b1e5..817b62373 100644 --- a/src/fields/URLField.ts +++ b/src/fields/URLField.ts @@ -34,7 +34,7 @@ export abstract class URLField extends ObjectField { if (Utils.prepend(this.url?.pathname) === this.url?.href) { return `new ${this.constructor.name}("${this.url.pathname}")`; } - return `new ${this.constructor.name}("${this.url.href}")`; + return `new ${this.constructor.name}("${this.url?.href}")`; } [ToString]() { if (Utils.prepend(this.url?.pathname) === this.url?.href) { diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index ab3982cc5..cd9b635bd 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -121,8 +121,8 @@ export namespace DashUploadUtils { } function resolveExistingFile(name: string, pat: string, directory: Directory, mimetype?: string | null, duration?: number, rawText?: string): Upload.FileResponse { - const data = { size: 0, filepath: pat, name, type: mimetype ?? '', originalFilename: name, newFilename: path.basename(pat), mimetype, hashAlgorithm: false as any }; - const file = { ...data, toJSON: () => ({ ...data, length: 0, filename: data.filepath.replace(/.*\//, ''), mtime: new Date(), mimetype, toJson: () => undefined as any }) }; + const data = { size: 0, filepath: pat, name, type: mimetype ?? '', originalFilename: name, newFilename: path.basename(pat), mimetype: mimetype || null, hashAlgorithm: false as any }; + const file = { ...data, toJSON: () => ({ ...data, length: 0, filename: data.filepath.replace(/.*\//, ''), mtime: new Date(), mimetype: mimetype || null, toJson: () => undefined as any }) }; return { source: file || null, result: { -- cgit v1.2.3-70-g09d2 From 9b9f54a43793ca6ffb26c56f962d11ba8325abd2 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 29 Dec 2023 17:01:40 -0500 Subject: cleaned up imports, mobx observable initialization and some compile errors. --- src/Utils.ts | 27 ++--- src/client/util/CalendarManager.tsx | 34 +++--- src/client/util/CaptureManager.tsx | 2 +- src/client/util/CurrentUserUtils.ts | 14 +-- src/client/util/GroupManager.tsx | 2 +- src/client/util/HypothesisUtils.ts | 13 ++- src/client/views/DocumentButtonBar.tsx | 5 - src/client/views/DocumentDecorations.tsx | 11 +- src/client/views/FilterPanel.tsx | 11 +- src/client/views/GestureOverlay.tsx | 25 +++-- src/client/views/InkTranscription.tsx | 8 +- src/client/views/InkingStroke.tsx | 76 +++++--------- src/client/views/MainView.tsx | 2 +- src/client/views/MetadataEntryMenu.tsx | 12 +-- src/client/views/PreviewCursor.tsx | 2 +- src/client/views/PropertiesButtons.tsx | 17 +-- .../views/PropertiesDocBacklinksSelector.tsx | 4 +- src/client/views/PropertiesSection.tsx | 6 +- src/client/views/TemplateMenu.tsx | 2 +- src/client/views/UndoStack.tsx | 22 ++-- src/client/views/animationtimeline/Region.tsx | 2 +- src/client/views/animationtimeline/Timeline.tsx | 4 +- .../views/animationtimeline/TimelineOverview.tsx | 2 +- src/client/views/animationtimeline/Track.tsx | 8 +- .../views/collections/CollectionCalendarView.tsx | 19 ++-- .../views/collections/CollectionDockingView.tsx | 4 +- src/client/views/collections/CollectionMenu.tsx | 3 - .../CollectionNoteTakingViewDivider.tsx | 2 +- .../views/collections/CollectionPileView.tsx | 2 +- .../collections/CollectionStackedTimeline.tsx | 4 +- .../CollectionStackingViewFieldColumn.tsx | 2 +- src/client/views/collections/CollectionSubView.tsx | 8 +- .../views/collections/CollectionTimeView.tsx | 14 +-- src/client/views/collections/CollectionView.tsx | 2 +- src/client/views/collections/KeyRestrictionRow.tsx | 37 +++---- src/client/views/collections/TreeView.tsx | 2 +- .../CollectionFreeFormBackgroundGrid.tsx | 2 +- .../CollectionFreeFormInfoState.tsx | 2 +- .../CollectionFreeFormInfoUI.tsx | 8 +- .../CollectionFreeFormLinksView.tsx | 4 +- .../CollectionFreeFormPannableContents.tsx | 5 +- .../CollectionFreeFormRemoteCursors.tsx | 4 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- .../collections/collectionFreeForm/MarqueeView.tsx | 5 +- .../collectionGrid/CollectionGridView.tsx | 4 +- .../views/collections/collectionGrid/Grid.tsx | 2 +- .../CollectionMulticolumnView.tsx | 4 +- .../CollectionMultirowView.tsx | 3 +- .../collectionMulticolumn/MulticolumnResizer.tsx | 8 +- .../MulticolumnWidthLabel.tsx | 27 +++-- .../collectionMulticolumn/MultirowHeightLabel.tsx | 22 ++-- .../collectionMulticolumn/MultirowResizer.tsx | 6 +- .../collectionSchema/SchemaColumnHeader.tsx | 4 +- src/client/views/linking/LinkMenuItem.tsx | 6 +- src/client/views/linking/LinkPopup.tsx | 8 +- .../views/linking/LinkRelationshipSearch.tsx | 2 +- .../views/newlightbox/ButtonMenu/ButtonMenu.tsx | 4 +- src/client/views/newlightbox/NewLightboxView.tsx | 26 ++--- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 4 +- .../views/nodes/DataVizBox/SchemaCSVPopUp.tsx | 30 +++--- .../nodes/DataVizBox/components/Histogram.tsx | 6 +- .../nodes/DataVizBox/components/LineChart.tsx | 28 ++--- .../views/nodes/DataVizBox/components/PieChart.tsx | 6 +- .../views/nodes/DataVizBox/components/TableBox.tsx | 12 +-- src/client/views/nodes/DocumentContentsView.tsx | 6 +- src/client/views/nodes/DocumentView.tsx | 7 +- src/client/views/nodes/FaceRectangle.tsx | 4 +- src/client/views/nodes/FaceRectangles.tsx | 4 +- src/client/views/nodes/FieldView.tsx | 2 +- src/client/views/nodes/KeyValuePair.tsx | 6 +- src/client/views/nodes/LinkDescriptionPopup.tsx | 2 +- src/client/views/nodes/LinkDocPreview.tsx | 8 +- src/client/views/nodes/LoadingBox.tsx | 2 +- src/client/views/nodes/MapBox/AnimationUtility.ts | 13 +-- .../views/nodes/MapBox/DirectionsAnchorMenu.tsx | 14 +-- src/client/views/nodes/MapBox/MapAnchorMenu.tsx | 106 +++++++------------ src/client/views/nodes/MapBox/MapBox.tsx | 60 +++++------ src/client/views/nodes/MapBox/MapBox2.tsx | 2 +- .../views/nodes/MapboxMapBox/MapboxContainer.tsx | 20 ++-- src/client/views/nodes/PDFBox.tsx | 2 +- .../nodes/PhysicsBox/PhysicsSimulationBox.tsx | 4 +- .../nodes/PhysicsBox/PhysicsSimulationWeight.tsx | 2 +- src/client/views/nodes/RadialMenu.tsx | 2 +- src/client/views/nodes/RadialMenuItem.tsx | 2 +- .../views/nodes/RecordingBox/RecordingBox.tsx | 4 +- src/client/views/nodes/ScreenshotBox.tsx | 2 +- src/client/views/nodes/ScriptingBox.tsx | 8 +- src/client/views/nodes/TaskCompletedBox.tsx | 8 +- src/client/views/nodes/VideoBox.tsx | 6 +- src/client/views/nodes/audio/AudioWaveform.tsx | 2 +- src/client/views/nodes/calendarBox/CalendarBox.tsx | 114 +++++++++------------ .../views/nodes/formattedText/DashDocView.tsx | 6 +- .../views/nodes/formattedText/EquationView.tsx | 7 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 4 +- .../views/nodes/formattedText/RichTextMenu.tsx | 2 +- .../views/nodes/importBox/ImportElementBox.tsx | 8 +- src/client/views/nodes/trails/PresBox.tsx | 6 +- src/client/views/pdf/Annotation.tsx | 5 +- src/client/views/pdf/GPTPopup/GPTPopup.tsx | 16 +-- src/client/views/pdf/PDFViewer.tsx | 2 +- src/client/views/search/SearchBox.tsx | 15 ++- src/client/views/selectedDoc/SelectedDocView.tsx | 6 +- src/client/views/topbar/TopBar.tsx | 4 +- src/client/views/webcam/DashWebRTCVideo.tsx | 5 +- src/debug/Repl.tsx | 10 +- src/debug/Viewer.tsx | 18 ++-- src/fields/CursorField.ts | 7 +- src/fields/Doc.ts | 4 +- src/fields/List.ts | 8 +- src/fields/Proxy.ts | 12 +-- src/fields/util.ts | 4 +- src/mobile/ImageUpload.tsx | 6 +- src/mobile/MobileInkOverlay.tsx | 2 +- src/mobile/MobileInterface.tsx | 110 ++++++++++---------- src/typings/index.d.ts | 4 +- test/test.ts | 106 ++++++++++--------- 116 files changed, 650 insertions(+), 793 deletions(-) (limited to 'src/client/util/CaptureManager.tsx') diff --git a/src/Utils.ts b/src/Utils.ts index a060e4a2c..b5c218e01 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -1,13 +1,12 @@ -import * as uuid from 'uuid'; import { ColorResult } from 'react-color'; +import * as uuid from 'uuid'; //import { Socket } from '../node_modules/socket.io-client'; -import { Socket } from '../node_modules/socket.io/dist/index'; +import * as Color from 'color'; import * as rp from 'request-promise'; +import { Socket } from '../node_modules/socket.io/dist/index'; import { DocumentType } from './client/documents/DocumentTypes'; import { Colors } from './client/views/global/globalEnums'; import { Message } from './server/Message'; -import * as Color from 'color'; -import { action } from 'mobx'; export namespace Utils { export let CLICK_TIME = 300; @@ -896,23 +895,19 @@ export function setupMoveUpEvents( document.addEventListener('click', _clickEvent, true); } -export function dateRangeStrToDates (dateStr: string) { +export function dateRangeStrToDates(dateStr: string) { // dateStr in yyyy-mm-dd format - const dateRangeParts = dateStr.split("|"); // splits into from and to date - const fromParts = dateRangeParts[0].split("-"); - const toParts = dateRangeParts[1].split("-"); + const dateRangeParts = dateStr.split('|'); // splits into from and to date + const fromParts = dateRangeParts[0].split('-'); + const toParts = dateRangeParts[1].split('-'); const fromYear = parseInt(fromParts[0]); - const fromMonth = parseInt(fromParts[1])-1; + const fromMonth = parseInt(fromParts[1]) - 1; const fromDay = parseInt(fromParts[2]); const toYear = parseInt(toParts[0]); - const toMonth = parseInt(toParts[1])-1; + const toMonth = parseInt(toParts[1]) - 1; const toDay = parseInt(toParts[2]); - - return [ - new Date(fromYear, fromMonth, fromDay), - new Date(toYear, toMonth, toDay) - ]; -} \ No newline at end of file + return [new Date(fromYear, fromMonth, fromDay), new Date(toYear, toMonth, toDay)]; +} diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx index 6ef2d3429..6e9094b3a 100644 --- a/src/client/util/CalendarManager.tsx +++ b/src/client/util/CalendarManager.tsx @@ -1,26 +1,24 @@ -import * as React from 'react'; -import './CalendarManager.scss'; +import { TextField } from '@mui/material'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; -import { action, computed, observable, runInAction, makeObservable } from 'mobx'; +import * as React from 'react'; +import Select from 'react-select'; import { Doc, DocListCast } from '../../fields/Doc'; -import { DocumentView } from '../views/nodes/DocumentView'; +import { DocData } from '../../fields/DocSymbols'; +import { StrCast } from '../../fields/Types'; import { DictationOverlay } from '../views/DictationOverlay'; -import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox'; import { MainViewModal } from '../views/MainViewModal'; -import { TextField } from '@mui/material'; -import Select from 'react-select'; -import { SettingsManager } from './SettingsManager'; -import { DateCast, DocCast, StrCast } from '../../fields/Types'; -import { SelectionManager } from './SelectionManager'; +import { DocumentView } from '../views/nodes/DocumentView'; +import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox'; +import './CalendarManager.scss'; import { DocumentManager } from './DocumentManager'; -import { DocData } from '../../fields/DocSymbols'; +import { SelectionManager } from './SelectionManager'; +import { SettingsManager } from './SettingsManager'; // import { DateRange, Range, RangeKeyDict } from 'react-date-range'; -import { Button } from 'browndash-components'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Provider, defaultTheme } from '@adobe/react-spectrum'; -import { DateValue } from '@internationalized/date'; -import { DateRangePicker, SpectrumDateRangePickerProps } from '@adobe/react-spectrum'; +import { DateRangePicker, Provider, defaultTheme } from '@adobe/react-spectrum'; import { IconLookup, faPlus } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Button } from 'browndash-components'; import { Docs } from '../documents/Documents'; import { ObservableReactComponent } from '../views/ObservableReactComponent'; // import 'react-date-range/dist/styles.css'; @@ -51,8 +49,8 @@ const formatCalendarDateToString = (calendarDate: any) => { export class CalendarManager extends ObservableReactComponent<{}> { public static Instance: CalendarManager; @observable private isOpen = false; - @observable private targetDoc: Doc | undefined; // the target document - @observable private targetDocView: DocumentView | undefined; // the DocumentView of the target doc + @observable private targetDoc: Doc | undefined = undefined; // the target document + @observable private targetDocView: DocumentView | undefined = undefined; // the DocumentView of the target doc @observable private dialogueBoxOpacity = 1; // for the modal @observable private overlayOpacity = 0.4; // for the modal diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx index 071fc1ee9..c1e0a5b2e 100644 --- a/src/client/util/CaptureManager.tsx +++ b/src/client/util/CaptureManager.tsx @@ -15,7 +15,7 @@ import { SelectionManager } from './SelectionManager'; export class CaptureManager extends React.Component<{}> { public static Instance: CaptureManager; static _settingsStyle = addStyleSheet(); - @observable _document: any; + @observable _document: any = undefined; @observable isOpen: boolean = false; // whether the CaptureManager is to be displayed or not. constructor(props: {}) { diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index c1d74c398..3f28f44fc 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -1,5 +1,6 @@ import { observable, reaction, runInAction } from "mobx"; import * as rp from 'request-promise'; +import { OmitKeys, Utils } from "../../Utils"; import { Doc, DocListCast, DocListCastAsync, Opt } from "../../fields/Doc"; import { InkTool } from "../../fields/InkField"; import { List } from "../../fields/List"; @@ -8,29 +9,28 @@ import { RichTextField } from "../../fields/RichTextField"; import { listSpec } from "../../fields/Schema"; import { ScriptField } from "../../fields/ScriptField"; import { Cast, DateCast, DocCast, StrCast } from "../../fields/Types"; -import { nullAudio, WebField } from "../../fields/URLField"; +import { WebField, nullAudio } from "../../fields/URLField"; import { SetCachedGroups, SharingPermissions } from "../../fields/util"; import { GestureUtils } from "../../pen-gestures/GestureUtils"; -import { OmitKeys, Utils } from "../../Utils"; import { DocServer } from "../DocServer"; -import { Docs, DocumentOptions, DocUtils, FInfo } from "../documents/Documents"; import { CollectionViewType, DocumentType } from "../documents/DocumentTypes"; -import { TreeViewType } from "../views/collections/CollectionTreeView"; +import { DocUtils, Docs, DocumentOptions, FInfo } from "../documents/Documents"; import { DashboardView } from "../views/DashboardView"; +import { OverlayView } from "../views/OverlayView"; +import { TreeViewType } from "../views/collections/CollectionTreeView"; import { Colors } from "../views/global/globalEnums"; import { media_state } from "../views/nodes/AudioBox"; -import { DocumentView, OpenWhere } from "../views/nodes/DocumentView"; +import { OpenWhere } from "../views/nodes/DocumentView"; import { ButtonType } from "../views/nodes/FontIconBox/FontIconBox"; import { ImportElementBox } from "../views/nodes/importBox/ImportElementBox"; -import { OverlayView } from "../views/OverlayView"; import { DragManager, dropActionType } from "./DragManager"; import { MakeTemplate } from "./DropConverter"; import { FollowLinkScript } from "./LinkFollower"; import { LinkManager } from "./LinkManager"; import { ScriptingGlobals } from "./ScriptingGlobals"; import { ColorScheme } from "./SettingsManager"; -import { UndoManager } from "./UndoManager"; import { SnappingManager } from "./SnappingManager"; +import { UndoManager } from "./UndoManager"; interface Button { // DocumentOptions fields a button can set diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index 90f65b648..f4f879208 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -33,7 +33,7 @@ export class GroupManager extends ObservableReactComponent<{}> { @observable isOpen: boolean = false; // whether the GroupManager is to be displayed or not. @observable private users: string[] = []; // list of users populated from the database. @observable private selectedUsers: UserOptions[] | null = null; // list of users selected in the "Select users" dropdown. - @observable currentGroup: Opt; // the currently selected group. + @observable currentGroup: Opt = undefined; // the currently selected group. @observable private createGroupModalOpen: boolean = false; private inputRef: React.RefObject = React.createRef(); // the ref for the input box. private createGroupButtonRef: React.RefObject = React.createRef(); // the ref for the group creation button diff --git a/src/client/util/HypothesisUtils.ts b/src/client/util/HypothesisUtils.ts index 990798ed3..0ae23d793 100644 --- a/src/client/util/HypothesisUtils.ts +++ b/src/client/util/HypothesisUtils.ts @@ -1,16 +1,15 @@ -import { StrCast, Cast } from '../../fields/Types'; -import { SearchUtil } from './SearchUtil'; import { action, runInAction } from 'mobx'; +import { simulateMouseClick } from '../../Utils'; import { Doc, Opt } from '../../fields/Doc'; +import { Cast, StrCast } from '../../fields/Types'; +import { WebField } from '../../fields/URLField'; import { DocumentType } from '../documents/DocumentTypes'; import { Docs } from '../documents/Documents'; -import { SelectionManager } from './SelectionManager'; -import { WebField } from '../../fields/URLField'; -import { DocumentManager } from './DocumentManager'; import { DocumentLinksButton } from '../views/nodes/DocumentLinksButton'; -import { simulateMouseClick, Utils } from '../../Utils'; import { DocumentView } from '../views/nodes/DocumentView'; -import { Id } from '../../fields/FieldSymbols'; +import { DocumentManager } from './DocumentManager'; +import { SearchUtil } from './SearchUtil'; +import { SelectionManager } from './SelectionManager'; export namespace Hypothesis { /** diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index f0887676f..3938b81cd 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -40,14 +40,9 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( private _pullAnimating = false; private _pushAnimating = false; private _pullColorAnimating = false; - @observable private pushIcon: IconProp = 'arrow-alt-circle-up'; - @observable private pullIcon: IconProp = 'arrow-alt-circle-down'; - @observable private pullColor: string = 'white'; @observable public isAnimatingFetch = false; @observable public isAnimatingPulse = false; - @observable private openHover: UtilityButtonState = UtilityButtonState.Default; - @observable public static Instance: DocumentButtonBar; public static hasPushedHack = false; public static hasPulledHack = false; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index d2f23c2f3..dab6e6193 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -12,7 +12,7 @@ import { RichTextField } from '../../fields/RichTextField'; import { ScriptField } from '../../fields/ScriptField'; import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../fields/Types'; import { GetEffectiveAcl } from '../../fields/util'; -import { emptyFunction, numberValue, returnFalse, setupMoveUpEvents, Utils } from '../../Utils'; +import { emptyFunction, lightOrDark, numberValue, returnFalse, setupMoveUpEvents, Utils } from '../../Utils'; import { Docs } from '../documents/Documents'; import { DocumentType } from '../documents/DocumentTypes'; import { DocumentManager } from '../util/DocumentManager'; @@ -85,7 +85,7 @@ export class DocumentDecorations extends ObservableReactComponent; - @observable public SavedColor?: string; - @observable public SavedWidth?: number; + @observable public InkShape: Opt = undefined; + @observable public SavedColor?: string = undefined; + @observable public SavedWidth?: number = undefined; @observable public Tool: ToolglassTools = ToolglassTools.None; @observable public KeepPrimitiveMode = false; // for whether primitive selection enters a one-shot or persistent mode - @observable private _thumbX?: number; - @observable private _thumbY?: number; + @observable private _thumbX?: number = undefined; + @observable private _thumbY?: number = undefined; @observable private _selectedIndex: number = -1; @observable private _menuX: number = -300; @observable private _menuY: number = -300; - @observable private _pointerY?: number; + @observable private _pointerY?: number = undefined; @observable private _points: { X: number; Y: number }[] = []; @observable private _strokes: InkData[] = []; - @observable private _palette?: JSX.Element; - @observable private _clipboardDoc?: JSX.Element; + @observable private _palette?: JSX.Element = undefined; + @observable private _clipboardDoc?: JSX.Element = undefined; @observable private _possibilities: JSX.Element[] = []; public static DownDocView: DocumentView | undefined; diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx index b2ac208ca..7e2b334af 100644 --- a/src/client/views/InkTranscription.tsx +++ b/src/client/views/InkTranscription.tsx @@ -17,10 +17,10 @@ // export class InkTranscription extends React.Component { // static Instance: InkTranscription; -// @observable _mathRegister: any; -// @observable _mathRef: any; -// @observable _textRegister: any; -// @observable _textRef: any; +// @observable _mathRegister: any= undefined; +// @observable _mathRef: any= undefined; +// @observable _textRegister: any= undefined; +// @observable _textRef: any= undefined; // private lastJiix: any; // private currGroup?: Doc; diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 9c96b4563..95c677845 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -20,9 +20,9 @@ Most of the operations that can be performed on an InkStroke (eg delete a point, rotate, stretch) are implemented in the InkStrokeProperties helper class */ -import * as React from 'react'; import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc } from '../../fields/Doc'; import { InkData, InkField } from '../../fields/InkField'; import { BoolCast, Cast, NumCast, RTFCast, StrCast } from '../../fields/Types'; @@ -32,7 +32,6 @@ import { CognitiveServices } from '../cognitive_services/CognitiveServices'; import { Docs } from '../documents/Documents'; import { InteractionUtils } from '../util/InteractionUtils'; import { SnappingManager } from '../util/SnappingManager'; -import { Transform } from '../util/Transform'; import { UndoManager } from '../util/UndoManager'; import { ContextMenu } from './ContextMenu'; import { ViewBoxBaseComponent } from './DocComponent'; @@ -59,14 +58,14 @@ export class InkingStroke extends ViewBoxBaseComponent() { private _handledClick = false; // flag denoting whether ink stroke has handled a psuedo-click onPointerUp so that the real onClick event can be stopPropagated private _disposers: { [key: string]: IReactionDisposer } = {}; - @observable _nearestSeg?: number; // nearest Bezier segment along the ink stroke to the cursor (used for displaying the Add Point highlight) - @observable _nearestT?: number; // nearest t value within the nearest Bezier segment " + @observable _nearestSeg?: number = undefined; // nearest Bezier segment along the ink stroke to the cursor (used for displaying the Add Point highlight) + @observable _nearestT?: number = undefined; // nearest t value within the nearest Bezier segment " @observable _nearestScrPt?: { X: number; Y: number }; // nearst screen point on the ink stroke "" componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentView?.(this); this._disposers.selfDisper = reaction( - () => this.props.isSelected(), // react to stroke being deselected by turning off ink handles + () => this._props.isSelected(), // react to stroke being deselected by turning off ink handles selected => !selected && (InkStrokeProperties.Instance._controlButton = false) ); } @@ -76,7 +75,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { // transform is the inherited screentolocal xf plus any scaling that was done to make the stroke // fit within its panel (e.g., for content fitting views like Lightbox or multicolumn, etc) - screenToLocal = () => this.props.ScreenToLocalTransform().scale(this.props.NativeDimScaling?.() || 1); + screenToLocal = () => this._props.ScreenToLocalTransform().scale(this._props.NativeDimScaling?.() || 1); getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { const subAnchor = this._subContentView?.getAnchor?.(addAsAnnotation); @@ -100,27 +99,6 @@ export class InkingStroke extends ViewBoxBaseComponent() { return this.Document; }; - /** - * @returns the center of the ink stroke in the ink document's coordinate space (not screen space, and not the ink data coordinate space); - * DocumentDecorations calls getBounds() on DocumentViews which call getCenter() if defined - in the case of ink it needs to be defined since - * the center of the ink stroke changes as the stroke is rotated. - */ - getCenter = (xf: Transform) => { - const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData(); - const angle = -NumCast(this.layoutDoc.rotation); - const newPoints = inkData.map(pt => { - const newX = Math.cos(angle) * pt.X - (Math.sin(angle) * pt.Y * inkScaleY) / inkScaleX; - const newY = (Math.sin(angle) * pt.X * inkScaleX) / inkScaleY + Math.cos(angle) * pt.Y; - return { X: newX, Y: newY }; - }); - const crx = (Math.max(...newPoints.map(np => np.X)) + Math.min(...newPoints.map(np => np.X))) / 2; - const cry = (Math.max(...newPoints.map(np => np.Y)) + Math.min(...newPoints.map(np => np.Y))) / 2; - const cx = Math.cos(-angle) * crx - (Math.sin(-angle) * cry * inkScaleY) / inkScaleX; - const cy = (Math.sin(-angle) * crx * inkScaleX) / inkScaleY + Math.cos(-angle) * cry; - const tc = xf.transformPoint((cx - inkLeft - inkStrokeWidth / 2) * inkScaleX + inkStrokeWidth / 2, (cy - inkTop - inkStrokeWidth / 2) * inkScaleY + inkStrokeWidth / 2); - return { X: tc[0], Y: tc[1] }; - }; - /** * analyzes the ink stroke and saves the analysis of the stroke to the 'inkAnalysis' field, * and the recognized words to the 'handwriting' @@ -147,7 +125,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { @action onPointerDown = (e: React.PointerEvent) => { this._handledClick = false; - const inkView = this.props.docViewPath().lastElement(); + const inkView = this._props.docViewPath().lastElement(); const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData(); const screenPts = inkData .map(point => @@ -159,7 +137,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { const { nearestSeg } = InkStrokeProperties.nearestPtToStroke(screenPts, { X: e.clientX, Y: e.clientY }); const controlIndex = nearestSeg; const wasSelected = InkStrokeProperties.Instance._currentPoint === controlIndex; - const isEditing = InkStrokeProperties.Instance._controlButton && this.props.isSelected(); + const isEditing = InkStrokeProperties.Instance._controlButton && this._props.isSelected(); this.controlUndo = undefined; setupMoveUpEvents( this, @@ -187,7 +165,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { InkStrokeProperties.Instance._currentPoint = -1; this._handledClick = true; // mark the double-click pseudo pointerevent so we can block the real mouse event from propagating to DocumentView if (isEditing) { - this._nearestT && this._nearestSeg !== undefined && InkStrokeProperties.Instance.addPoints(this.props.docViewPath().lastElement(), this._nearestT, this._nearestSeg, this.inkScaledData().inkData.slice()); + this._nearestT && this._nearestSeg !== undefined && InkStrokeProperties.Instance.addPoints(this._props.docViewPath().lastElement(), this._nearestT, this._nearestSeg, this.inkScaledData().inkData.slice()); } } }), @@ -258,8 +236,8 @@ export class InkingStroke extends ViewBoxBaseComponent() { inkLeft, inkWidth, inkHeight, - inkScaleX: (this.props.PanelWidth() - inkStrokeWidth) / (inkWidth - inkStrokeWidth || 1) || 1, - inkScaleY: (this.props.PanelHeight() - inkStrokeWidth) / (inkHeight - inkStrokeWidth || 1) || 1, + inkScaleX: (this._props.PanelWidth() - inkStrokeWidth) / (inkWidth - inkStrokeWidth || 1) || 1, + inkScaleY: (this._props.PanelHeight() - inkStrokeWidth) / (inkHeight - inkStrokeWidth || 1) || 1, }; }; @@ -311,7 +289,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { * @returns the JSX controls for displaying an editing UI for the stroke (control point & tangent handles) */ componentUI = (boundsLeft: number, boundsTop: number) => { - const inkDoc = this.props.Document; + const inkDoc = this.Document; const { inkData, inkStrokeWidth } = this.inkScaledData(); const screenSpaceCenterlineStrokeWidth = Math.min(3, inkStrokeWidth * this.screenToLocal().inverse().Scale); // the width of the blue line widget that shows the centerline of the ink stroke @@ -321,7 +299,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { const endMarker = StrCast(this.layoutDoc.stroke_endMarker); const markerScale = NumCast(this.layoutDoc.stroke_markerScale); return SnappingManager.IsDragging ? null : !InkStrokeProperties.Instance._controlButton ? ( - !this.props.isSelected() || InkingStroke.IsClosed(inkData) ? null : ( + !this._props.isSelected() || InkingStroke.IsClosed(inkData) ? null : (
@@ -360,12 +338,12 @@ export class InkingStroke extends ViewBoxBaseComponent() { setSubContentView = (doc: DocComponentView) => (this._subContentView = doc); @computed get fillColor() { const isInkMask = BoolCast(this.layoutDoc.stroke_isInkMask); - return isInkMask ? DashColor(StrCast(this.layoutDoc.fillColor, 'transparent')).blacken(0).rgb().toString() : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.FillColor) ?? 'transparent'; + return isInkMask ? DashColor(StrCast(this.layoutDoc.fillColor, 'transparent')).blacken(0).rgb().toString() : this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FillColor) ?? 'transparent'; } @computed get strokeColor() { const { inkData } = this.inkScaledData(); const fillColor = this.fillColor; - return !InkingStroke.IsClosed(inkData) && fillColor && fillColor !== 'transparent' ? fillColor : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color) ?? StrCast(this.layoutDoc.color); + return !InkingStroke.IsClosed(inkData) && fillColor && fillColor !== 'transparent' ? fillColor : this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) ?? StrCast(this.layoutDoc.color); } render() { TraceMobx(); @@ -385,9 +363,9 @@ export class InkingStroke extends ViewBoxBaseComponent() { this.layoutDoc._height = Math.round(NumCast(this.layoutDoc._height)); }); } - const highlight = !this.controlUndo && this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Highlighting); + const highlight = !this.controlUndo && this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Highlighting); const highlightIndex = highlight?.highlightIndex; - const highlightColor = !this.props.isSelected() && !isInkMask && highlight?.highlightIndex ? highlight?.highlightColor : undefined; + const highlightColor = !this._props.isSelected() && !isInkMask && highlight?.highlightIndex ? highlight?.highlightColor : undefined; const color = StrCast(this.layoutDoc.stroke_outlineColor, !closed && fillColor && fillColor !== 'transparent' ? StrCast(this.layoutDoc.color, 'transparent') : 'transparent'); // Visually renders the polygonal line made by the user. @@ -437,7 +415,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { inkScaleX, inkScaleY, '', - this.props.pointerEvents?.() ?? 'visiblepainted', + this._props.pointerEvents?.() ?? 'visiblepainted', 0.0, false, downHdlr, @@ -450,7 +428,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { const lineHeightGuess = +getComputedStyle(document.body).lineHeight.replace('px', '') / +getComputedStyle(document.body).fontSize.replace('px', ''); const interactions = { onPointerLeave: action(() => (this._nearestScrPt = undefined)), - onPointerMove: this.props.isSelected() ? this.onPointerMove : undefined, + onPointerMove: this._props.isSelected() ? this.onPointerMove : undefined, onClick: (e: React.MouseEvent) => this._handledClick && e.stopPropagation(), onContextMenu: () => { const cm = ContextMenu.Instance; @@ -464,27 +442,27 @@ export class InkingStroke extends ViewBoxBaseComponent() { {clickableLine(this.onPointerDown, isInkMask)} {isInkMask ? null : inkLine} - {!closed || (!RTFCast(this.dataDoc.text)?.Text && (!this.props.isSelected() || Doc.UserDoc().activeInkHideTextLabels)) ? null : ( + {!closed || (!RTFCast(this.dataDoc.text)?.Text && (!this._props.isSelected() || Doc.UserDoc().activeInkHideTextLabels)) ? null : (
() { dontRegisterView={true} noSidebar={true} dontScale={true} - isContentActive={this.props.isContentActive} + isContentActive={this._props.isContentActive} />
)} diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 094bd2adb..35ffab337 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -118,7 +118,7 @@ export class MainView extends ObservableReactComponent<{}> { @computed private get userDoc() { return Doc.UserDoc(); } - @observable mainDoc: Opt; + @observable mainDoc: Opt = undefined; @computed private get mainContainer() { if (window.location.pathname.startsWith('/doc/') && Doc.CurrentUserEmail === 'guest') { DocServer.GetRefField(window.location.pathname.substring('/doc/'.length)).then(main => runInAction(() => (this.mainDoc = main as Doc))); diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx index 5c6912121..89c3c41f8 100644 --- a/src/client/views/MetadataEntryMenu.tsx +++ b/src/client/views/MetadataEntryMenu.tsx @@ -1,12 +1,12 @@ -import * as React from 'react'; -import './MetadataEntryMenu.scss'; +import { IReactionDisposer, action, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; -import { observable, action, runInAction, trace, computed, IReactionDisposer, reaction } from 'mobx'; -import { KeyValueBox } from './nodes/KeyValueBox'; -import { Doc, Field, DocListCastAsync, DocListCast } from '../../fields/Doc'; +import * as React from 'react'; import * as Autosuggest from 'react-autosuggest'; -import { undoBatch, UndoManager } from '../util/UndoManager'; import { emptyFunction, emptyPath } from '../../Utils'; +import { Doc, DocListCast, Field } from '../../fields/Doc'; +import { undoBatch } from '../util/UndoManager'; +import './MetadataEntryMenu.scss'; +import { KeyValueBox } from './nodes/KeyValueBox'; export type DocLike = Doc | Doc[] | Promise | Promise; export interface MetadataEntryProps { diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index 166afc0c2..a69a5f5e8 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -24,7 +24,7 @@ export class PreviewCursor extends ObservableReactComponent<{}> { _addLiveTextDoc?: (doc: Doc) => void; _nudge?: undefined | ((x: number, y: number) => boolean); _slowLoadDocuments?: (files: File[] | string, options: DocumentOptions, generatedDocuments: Doc[], text: string, completed: ((doc: Doc[]) => void) | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => Promise; - @observable _clickPoint: number[]; + @observable _clickPoint: number[] = []; @observable public Visible = false; public Doc: Opt; constructor(props: any) { diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 8540e81e1..f1dadcd5e 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -2,6 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Dropdown, DropdownType, IListItemProps, Toggle, ToggleType, Type } from 'browndash-components'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { AiOutlineColumnWidth } from 'react-icons/ai'; import { BiHide, BiShow } from 'react-icons/bi'; import { BsGrid3X3GapFill } from 'react-icons/bs'; @@ -12,28 +13,20 @@ import { RxWidth } from 'react-icons/rx'; import { TbEditCircle, TbEditCircleOff, TbHandOff, TbHandStop, TbHighlight, TbHighlightOff } from 'react-icons/tb'; import { TfiBarChart } from 'react-icons/tfi'; import { Doc, DocListCast, Opt } from '../../fields/Doc'; -import { InkField } from '../../fields/InkField'; import { RichTextField } from '../../fields/RichTextField'; import { BoolCast, ScriptCast } from '../../fields/Types'; import { ImageField } from '../../fields/URLField'; -import { DocUtils } from '../documents/Documents'; import { CollectionViewType, DocumentType } from '../documents/DocumentTypes'; +import { DocUtils } from '../documents/Documents'; import { IsFollowLinkScript } from '../util/LinkFollower'; import { LinkManager } from '../util/LinkManager'; import { SelectionManager } from '../util/SelectionManager'; import { SettingsManager } from '../util/SettingsManager'; -import { undoable, undoBatch } from '../util/UndoManager'; -import { Colors } from './global/globalEnums'; +import { undoBatch, undoable } from '../util/UndoManager'; import { InkingStroke } from './InkingStroke'; -import { DocumentView, OpenWhere } from './nodes/DocumentView'; import './PropertiesButtons.scss'; -import * as React from 'react'; - -enum UtilityButtonState { - Default, - OpenRight, - OpenExternally, -} +import { Colors } from './global/globalEnums'; +import { DocumentView, OpenWhere } from './nodes/DocumentView'; @observer export class PropertiesButtons extends React.Component<{}, {}> { diff --git a/src/client/views/PropertiesDocBacklinksSelector.tsx b/src/client/views/PropertiesDocBacklinksSelector.tsx index 58d3b72e8..244cd4aa0 100644 --- a/src/client/views/PropertiesDocBacklinksSelector.tsx +++ b/src/client/views/PropertiesDocBacklinksSelector.tsx @@ -7,10 +7,10 @@ import { DocumentType } from '../documents/DocumentTypes'; import { LinkManager } from '../util/LinkManager'; import { SelectionManager } from '../util/SelectionManager'; import { SettingsManager } from '../util/SettingsManager'; +import './PropertiesDocBacklinksSelector.scss'; import { CollectionDockingView } from './collections/CollectionDockingView'; import { LinkMenu } from './linking/LinkMenu'; -import { OpenWhere, OpenWhereMod } from './nodes/DocumentView'; -import './PropertiesDocBacklinksSelector.scss'; +import { OpenWhere } from './nodes/DocumentView'; type PropertiesDocBacklinksSelectorProps = { Document: Doc; diff --git a/src/client/views/PropertiesSection.tsx b/src/client/views/PropertiesSection.tsx index 2b9bfb505..3c9fa1123 100644 --- a/src/client/views/PropertiesSection.tsx +++ b/src/client/views/PropertiesSection.tsx @@ -1,11 +1,9 @@ -import * as React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; -import './PropertiesSection.scss'; -import { Doc } from '../../fields/Doc'; -import { StrCast } from '../../fields/Types'; +import * as React from 'react'; import { SettingsManager } from '../util/SettingsManager'; +import './PropertiesSection.scss'; export interface PropertiesSectionProps { title: string; diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index 48653f30a..791928b4a 100644 --- a/src/client/views/TemplateMenu.tsx +++ b/src/client/views/TemplateMenu.tsx @@ -1,5 +1,6 @@ import { action, computed, observable, ObservableSet, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, DocListCast } from '../../fields/Doc'; import { ScriptField } from '../../fields/ScriptField'; import { Cast, StrCast } from '../../fields/Types'; @@ -13,7 +14,6 @@ import { CollectionTreeView } from './collections/CollectionTreeView'; import { DocumentView } from './nodes/DocumentView'; import { DefaultStyleProvider } from './StyleProvider'; import './TemplateMenu.scss'; -import * as React from 'react'; @observer class TemplateToggle extends React.Component<{ template: string; checked: boolean; toggle: (event: React.ChangeEvent, template: string) => void }> { diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx index f07e38af1..ea038250e 100644 --- a/src/client/views/UndoStack.tsx +++ b/src/client/views/UndoStack.tsx @@ -15,8 +15,8 @@ interface UndoStackProps { } @observer export class UndoStack extends React.Component { - @observable static HideInline: boolean; - @observable static Expand: boolean; + @observable static HideInline: boolean = false; + @observable static Expand: boolean = false; render() { const background = UndoManager.batchCounter.get() ? 'yellow' : SettingsManager.userVariantColor; const color = UndoManager.batchCounter.get() ? 'black' : SettingsManager.userColor; @@ -39,19 +39,25 @@ export class UndoStack extends React.Component { color, }}> {Array.from(UndoManager.undoStackNames).map((name, i) => ( -
{ +
{ const size = UndoManager.undoStackNames.length; - for (let n = 0; n < size-i; n++ ) UndoManager.Undo(); } } - > + for (let n = 0; n < size - i; n++) UndoManager.Undo(); + }}>
{StrCast(name).replace(/[^\.]*\./, '')}
))} {Array.from(UndoManager.redoStackNames) .reverse() .map((name, i) => ( -
- { for (let n = 0; n <= i; n++ ) UndoManager.Redo() }}> +
{ + for (let n = 0; n <= i; n++) UndoManager.Redo(); + }}>
{StrCast(name).replace(/[^\.]*\./, '')}
diff --git a/src/client/views/animationtimeline/Region.tsx b/src/client/views/animationtimeline/Region.tsx index 15cbbc16f..99163f6c6 100644 --- a/src/client/views/animationtimeline/Region.tsx +++ b/src/client/views/animationtimeline/Region.tsx @@ -6,11 +6,11 @@ import { List } from '../../../fields/List'; import { createSchema, defaultSpec, listSpec, makeInterface } from '../../../fields/Schema'; import { Cast, NumCast } from '../../../fields/Types'; import { Transform } from '../../util/Transform'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import '../global/globalCssVariables.module.scss'; import './Region.scss'; import './Timeline.scss'; import { TimelineMenu } from './TimelineMenu'; -import { ObservableReactComponent } from '../ObservableReactComponent'; /** * Useful static functions that you can use. Mostly for logic, but you can also add UI logic here also diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index f27a2d2fd..cc4da1694 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -4,17 +4,17 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { Utils, emptyFunction, setupMoveUpEvents } from '../../../Utils'; import { Doc, DocListCast } from '../../../fields/Doc'; import { BoolCast, NumCast, StrCast } from '../../../fields/Types'; -import { emptyFunction, setupMoveUpEvents, Utils } from '../../../Utils'; import { DocumentType } from '../../documents/DocumentTypes'; import clamp from '../../util/clamp'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { FieldViewProps } from '../nodes/FieldView'; import { RegionHelpers } from './Region'; import './Timeline.scss'; import { TimelineOverview } from './TimelineOverview'; import { Track } from './Track'; -import { ObservableReactComponent } from '../ObservableReactComponent'; /** * Timeline class controls most of timeline functions besides individual region and track mechanism. Main functions are diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx index 82ac69a3b..928739b53 100644 --- a/src/client/views/animationtimeline/TimelineOverview.tsx +++ b/src/client/views/animationtimeline/TimelineOverview.tsx @@ -28,7 +28,7 @@ export class TimelineOverview extends React.Component { @observable private overviewBarWidth: number = 0; @observable private playbarWidth: number = 0; @observable private activeOverviewWidth: number = 0; - @observable private _authoringReaction?: IReactionDisposer; + @observable private _authoringReaction?: IReactionDisposer = undefined; @observable private visibleTime: number = 0; @observable private currentX: number = 0; @observable private visibleStart: number = 0; diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx index 00aa51cac..490a14be5 100644 --- a/src/client/views/animationtimeline/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -8,10 +8,10 @@ import { ObjectField } from '../../../fields/ObjectField'; import { listSpec } from '../../../fields/Schema'; import { Cast, NumCast } from '../../../fields/Types'; import { Transform } from '../../util/Transform'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { Region, RegionData, RegionHelpers } from './Region'; import { Timeline } from './Timeline'; import './Track.scss'; -import { ObservableReactComponent } from '../ObservableReactComponent'; interface IProps { timeline: Timeline; @@ -29,9 +29,9 @@ interface IProps { @observer export class Track extends ObservableReactComponent { @observable private _inner = React.createRef(); - @observable private _currentBarXReaction: any; - @observable private _timelineVisibleReaction: any; - @observable private _autoKfReaction: any; + @observable private _currentBarXReaction: any = undefined; + @observable private _timelineVisibleReaction: any = undefined; + @observable private _autoKfReaction: any = undefined; @observable private _newKeyframe: boolean = false; private readonly MAX_TITLE_HEIGHT = 75; @observable private _trackHeight = 0; diff --git a/src/client/views/collections/CollectionCalendarView.tsx b/src/client/views/collections/CollectionCalendarView.tsx index 2cec29669..4c0a917f5 100644 --- a/src/client/views/collections/CollectionCalendarView.tsx +++ b/src/client/views/collections/CollectionCalendarView.tsx @@ -1,18 +1,11 @@ -import * as React from 'react'; -import { CollectionSubView } from './CollectionSubView'; +import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; -import { computed, makeObservable, observable } from 'mobx'; -import { Doc, DocListCast, Opt } from '../../../fields/Doc'; +import * as React from 'react'; +import { dateRangeStrToDates, emptyFunction, returnTrue } from '../../../Utils'; +import { Doc, DocListCast } from '../../../fields/Doc'; +import { StrCast } from '../../../fields/Types'; import { CollectionStackingView } from './CollectionStackingView'; -import { CollectionViewType } from '../../documents/DocumentTypes'; -import { dateRangeStrToDates, emptyFunction, returnAll, returnEmptyDoclist, returnNone, returnOne, returnTrue } from '../../../Utils'; -import { DocumentView, DocumentViewProps } from '../nodes/DocumentView'; -import { TbRuler } from 'react-icons/tb'; -import { Transform } from '../../util/Transform'; -import { DocData } from '../../../fields/DocSymbols'; -import { Cast, NumCast, StrCast } from '../../../fields/Types'; -import { StyleProp } from '../StyleProvider'; -import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView'; +import { CollectionSubView } from './CollectionSubView'; @observer export class CollectionCalendarView extends CollectionSubView() { diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 75c178136..868df7a3b 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -1,4 +1,4 @@ -import { action, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; +import { action, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; @@ -30,7 +30,7 @@ import { ScriptingRepl } from '../ScriptingRepl'; import { UndoStack } from '../UndoStack'; import './CollectionDockingView.scss'; import { CollectionFreeFormView } from './collectionFreeForm'; -import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; +import { CollectionSubView } from './CollectionSubView'; import { TabDocView } from './TabDocView'; const _global = (window /* browser */ || global) /* node */ as any; diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 443aa3f17..2a6cb081f 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -32,16 +32,13 @@ interface CollectionMenuProps { @observer export class CollectionMenu extends AntimodeMenu { @observable static Instance: CollectionMenu; - @observable SelectedCollection: DocumentView | undefined = undefined; - @observable FieldKey: string; private _docBtnRef = React.createRef(); constructor(props: any) { super(props); makeObservable(this); - this.FieldKey = ''; CollectionMenu.Instance = this; this._canFade = false; // don't let the inking menu fade away this.Pinned = Cast(Doc.UserDoc()['menuCollections-pinned'], 'boolean', true); diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx index af822d917..2aad48d4a 100644 --- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -1,4 +1,4 @@ -import { action, observable, trace } from 'mobx'; +import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { emptyFunction, setupMoveUpEvents } from '../../../Utils'; diff --git a/src/client/views/collections/CollectionPileView.tsx b/src/client/views/collections/CollectionPileView.tsx index 170b1f1ec..e5068645f 100644 --- a/src/client/views/collections/CollectionPileView.tsx +++ b/src/client/views/collections/CollectionPileView.tsx @@ -1,5 +1,6 @@ import { action, computed, IReactionDisposer, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, DocListCast } from '../../../fields/Doc'; import { ScriptField } from '../../../fields/ScriptField'; import { NumCast, StrCast } from '../../../fields/Types'; @@ -12,7 +13,6 @@ import { computePassLayout, computeStarburstLayout } from './collectionFreeForm' import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; import './CollectionPileView.scss'; import { CollectionSubView } from './CollectionSubView'; -import * as React from 'react'; @observer export class CollectionPileView extends CollectionSubView() { diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index fb8bc4da2..fa3844aa4 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -20,7 +20,7 @@ import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { undoBatch, UndoManager } from '../../util/UndoManager'; -import { CollectionSubView, SubCollectionViewProps } from '../collections/CollectionSubView'; +import { CollectionSubView } from '../collections/CollectionSubView'; import { LightboxView } from '../LightboxView'; import { AudioWaveform } from '../nodes/audio/AudioWaveform'; import { DocFocusFunc, DocFocusOptions, DocumentView, DocumentViewProps, OpenWhere } from '../nodes/DocumentView'; @@ -56,7 +56,7 @@ export enum TrimScope { @observer export class CollectionStackedTimeline extends CollectionSubView() { @observable static SelectingRegion: CollectionStackedTimeline | undefined = undefined; - @observable public static CurrentlyPlaying: DocumentView[]; + @observable public static CurrentlyPlaying: DocumentView[] = []; constructor(props: any) { super(props); makeObservable(this); diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index f9d575da2..69f1c332d 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -20,8 +20,8 @@ import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { EditableView } from '../EditableView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; -import './CollectionStackingView.scss'; import { ObservableReactComponent } from '../ObservableReactComponent'; +import './CollectionStackingView.scss'; // So this is how we are storing a column interface CSVFieldColumnProps { diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 2ff435ce2..570330174 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -4,11 +4,11 @@ import * as rp from 'request-promise'; import { Utils, returnFalse } from '../../../Utils'; import CursorField from '../../../fields/CursorField'; import { Doc, DocListCast, Field, Opt, StrListCast } from '../../../fields/Doc'; -import { AclPrivate, DocData } from '../../../fields/DocSymbols'; +import { AclPrivate } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; -import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; +import { BoolCast, Cast, ScriptCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; import { GetEffectiveAcl, TraceMobx } from '../../../fields/util'; import { GestureUtils } from '../../../pen-gestures/GestureUtils'; @@ -41,8 +41,8 @@ export function CollectionSubView(moreProps?: X) { makeObservable(this); } - @observable _focusFilters: Opt; // childFilters that are overridden when previewing a link to an anchor which has childFilters set on it - @observable _focusRangeFilters: Opt; // childFiltersByRanges that are overridden when previewing a link to an anchor which has childFiltersByRanges set on it + @observable _focusFilters: Opt = undefined; // childFilters that are overridden when previewing a link to an anchor which has childFilters set on it + @observable _focusRangeFilters: Opt = undefined; // childFiltersByRanges that are overridden when previewing a link to an anchor which has childFiltersByRanges set on it protected createDashEventsTarget = (ele: HTMLDivElement | null) => { this.dropDisposer?.(); this.gestureDisposer?.(); diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx index 6033b897d..7bbdb7073 100644 --- a/src/client/views/collections/CollectionTimeView.tsx +++ b/src/client/views/collections/CollectionTimeView.tsx @@ -1,6 +1,8 @@ import { toUpper } from 'lodash'; import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { emptyFunction, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../../Utils'; import { Doc, Opt, StrListCast } from '../../../fields/Doc'; import { List } from '../../../fields/List'; import { ObjectField } from '../../../fields/ObjectField'; @@ -8,7 +10,6 @@ import { RichTextField } from '../../../fields/RichTextField'; import { listSpec } from '../../../fields/Schema'; import { ComputedField, ScriptField } from '../../../fields/ScriptField'; import { Cast, NumCast, StrCast } from '../../../fields/Types'; -import { emptyFunction, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../../Utils'; import { Docs } from '../../documents/Documents'; import { DocumentManager } from '../../util/DocumentManager'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; @@ -17,20 +18,19 @@ import { ContextMenuProps } from '../ContextMenuItem'; import { EditableView } from '../EditableView'; import { DocFocusOptions, DocumentView } from '../nodes/DocumentView'; import { PresBox } from '../nodes/trails'; -import { computePivotLayout, computeTimelineLayout, ViewDefBounds } from './collectionFreeForm/CollectionFreeFormLayoutEngines'; -import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; import { CollectionSubView } from './CollectionSubView'; import './CollectionTimeView.scss'; -import * as React from 'react'; +import { ViewDefBounds, computePivotLayout, computeTimelineLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines'; +import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; @observer export class CollectionTimeView extends CollectionSubView() { _changing = false; @observable _layoutEngine = computePivotLayout.name; @observable _collapsed: boolean = false; - @observable _childClickedScript: Opt; - @observable _viewDefDivClick: Opt; - @observable _focusPivotField: Opt; + @observable _childClickedScript: Opt = undefined; + @observable _viewDefDivClick: Opt = undefined; + @observable _focusPivotField: Opt = undefined; constructor(props: any) { super(props); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 0656843cb..c2f5ab2c0 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -16,6 +16,7 @@ import { ContextMenuProps } from '../ContextMenuItem'; import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent'; import { OpenWhere } from '../nodes/DocumentView'; import { FieldView, FieldViewProps } from '../nodes/FieldView'; +import { CollectionCalendarView } from './CollectionCalendarView'; import { CollectionCarousel3DView } from './CollectionCarousel3DView'; import { CollectionCarouselView } from './CollectionCarouselView'; import { CollectionDockingView } from './CollectionDockingView'; @@ -28,7 +29,6 @@ import { CollectionTreeView } from './CollectionTreeView'; import './CollectionView.scss'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; import { CollectionGridView } from './collectionGrid/CollectionGridView'; -import { CollectionCalendarView } from './CollectionCalendarView'; import { CollectionLinearView } from './collectionLinear'; import { CollectionMulticolumnView } from './collectionMulticolumn/CollectionMulticolumnView'; import { CollectionMultirowView } from './collectionMulticolumn/CollectionMultirowView'; diff --git a/src/client/views/collections/KeyRestrictionRow.tsx b/src/client/views/collections/KeyRestrictionRow.tsx index f3071b316..4523a4f1e 100644 --- a/src/client/views/collections/KeyRestrictionRow.tsx +++ b/src/client/views/collections/KeyRestrictionRow.tsx @@ -1,6 +1,6 @@ -import * as React from "react"; -import { observable, runInAction } from "mobx"; -import { observer } from "mobx-react"; +import { observable, runInAction } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; interface IKeyRestrictionProps { contains: boolean; @@ -19,37 +19,28 @@ export default class KeyRestrictionRow extends React.Component - runInAction(() => this._key = e.target.value)} - placeholder="KEY" /> - - runInAction(() => this._value = e.target.value)} - placeholder="VALUE" /> + runInAction(() => (this._value = e.target.value))} placeholder="VALUE" />
); } -} \ No newline at end of file +} diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index a7705ea7e..72882ac17 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -93,7 +93,7 @@ export class TreeView extends ObservableReactComponent { static _openLevelScript: Opt; private _header: React.RefObject = React.createRef(); private _tref = React.createRef(); - @observable _docRef: Opt; + @observable _docRef: Opt = undefined; private _disposers: { [name: string]: IReactionDisposer } = {}; private _editTitleScript: (() => ScriptField) | undefined; private _openScript: (() => ScriptField) | undefined; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx index 99ee5ef4e..08dfb32ad 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx @@ -1,8 +1,8 @@ import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc } from '../../../../fields/Doc'; import { NumCast } from '../../../../fields/Types'; import './CollectionFreeFormView.scss'; -import * as React from 'react'; export interface CollectionFreeFormViewBackgroundGridProps { panX: () => number; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx index 2606304d0..58f6b1593 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx @@ -1,5 +1,5 @@ import { IconButton, Size, Type } from 'browndash-components'; -import { action, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; +import { IReactionDisposer, action, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { SettingsManager } from '../../../util/SettingsManager'; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index 15e4d8360..8628ca3c3 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -1,16 +1,16 @@ -import { IReactionDisposer, makeObservable, observable, runInAction } from 'mobx'; +import { makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast, Field, FieldResult } from '../../../../fields/Doc'; import { InkTool } from '../../../../fields/InkField'; +import { StrCast } from '../../../../fields/Types'; import { DocumentManager } from '../../../util/DocumentManager'; import { LinkManager } from '../../../util/LinkManager'; -import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksButton'; import { ObservableReactComponent } from '../../ObservableReactComponent'; -import { CollectionFreeFormInfoState, InfoState, infoState, StateEntryFunc } from './CollectionFreeFormInfoState'; +import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksButton'; +import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState'; import { CollectionFreeFormView } from './CollectionFreeFormView'; import './CollectionFreeFormView.scss'; -import { StrCast } from '../../../../fields/Types'; export interface CollectionFreeFormInfoUIProps { Document: Doc; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx index 779a0bf96..95d521f65 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx @@ -1,11 +1,11 @@ import { computed } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Id } from '../../../../fields/FieldSymbols'; import { DocumentManager } from '../../../util/DocumentManager'; import { LightboxView } from '../../LightboxView'; -import './CollectionFreeFormLinksView.scss'; import { CollectionFreeFormLinkView } from './CollectionFreeFormLinkView'; -import * as React from 'react'; +import './CollectionFreeFormLinksView.scss'; @observer export class CollectionFreeFormLinksView extends React.Component { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx index f54726a00..ec8416303 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx @@ -1,12 +1,11 @@ import { computed } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc } from '../../../../fields/Doc'; import { ScriptField } from '../../../../fields/ScriptField'; import { PresBox } from '../../nodes/trails/PresBox'; -import './CollectionFreeFormView.scss'; -import * as React from 'react'; import { CollectionFreeFormView } from './CollectionFreeFormView'; - +import './CollectionFreeFormView.scss'; export interface CollectionFreeFormPannableContentsProps { Document: Doc; viewDefDivClick?: ScriptField; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx index 45e24bbb2..fa8218bdd 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx @@ -1,6 +1,8 @@ import { computed } from 'mobx'; import { observer } from 'mobx-react'; import * as mobxUtils from 'mobx-utils'; +import * as React from 'react'; +import * as uuid from 'uuid'; import CursorField from '../../../../fields/CursorField'; import { Doc, FieldResult } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; @@ -9,8 +11,6 @@ import { listSpec } from '../../../../fields/Schema'; import { Cast } from '../../../../fields/Types'; import { CollectionViewProps } from '../CollectionView'; import './CollectionFreeFormView.scss'; -import * as React from 'react'; -import * as uuid from 'uuid'; @observer export class CollectionFreeFormRemoteCursors extends React.Component { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 645e9cff7..cc0833698 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -37,6 +37,7 @@ import { CtrlKey } from '../../GlobalKeyHandler'; import { ActiveInkWidth, InkingStroke, SetActiveInkColor, SetActiveInkWidth } from '../../InkingStroke'; import { LightboxView } from '../../LightboxView'; import { CollectionFreeFormDocumentView, CollectionFreeFormDocumentViewWrapper } from '../../nodes/CollectionFreeFormDocumentView'; +import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp'; import { DocFocusOptions, DocumentView, DocumentViewProps, OpenWhere } from '../../nodes/DocumentView'; import { FieldViewProps } from '../../nodes/FieldView'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; @@ -52,7 +53,6 @@ import { CollectionFreeFormPannableContents } from './CollectionFreeFormPannable import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCursors'; import './CollectionFreeFormView.scss'; import { MarqueeView } from './MarqueeView'; -import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp'; export type collectionFreeformViewProps = { NativeWidth?: () => number; diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index b22fdfa19..39d828302 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -16,19 +16,18 @@ import { DocumentType } from '../../../documents/DocumentTypes'; import { DocUtils, Docs, DocumentOptions } from '../../../documents/Documents'; import { SelectionManager } from '../../../util/SelectionManager'; import { freeformScrollMode } from '../../../util/SettingsManager'; +import { SnappingManager } from '../../../util/SnappingManager'; import { Transform } from '../../../util/Transform'; import { UndoManager, undoBatch } from '../../../util/UndoManager'; import { ContextMenu } from '../../ContextMenu'; import { ObservableReactComponent } from '../../ObservableReactComponent'; import { PreviewCursor } from '../../PreviewCursor'; -import { DocumentView, OpenWhere } from '../../nodes/DocumentView'; +import { OpenWhere } from '../../nodes/DocumentView'; import { pasteImageBitmap } from '../../nodes/WebBoxRenderer'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { SubCollectionViewProps } from '../CollectionSubView'; import { MarqueeOptionsMenu } from './MarqueeOptionsMenu'; import './MarqueeView.scss'; -import { SnappingManager } from '../../../util/SnappingManager'; - interface MarqueeViewProps { getContainerTransform: () => Transform; getTransform: () => Transform; diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 1e19964d7..3e75257e5 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -7,7 +7,6 @@ import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents } from '../../../../Utils'; import { Docs } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; -import { SnappingManager } from '../../../util/SnappingManager'; import { Transform } from '../../../util/Transform'; import { undoBatch } from '../../../util/UndoManager'; import { ContextMenu } from '../../ContextMenu'; @@ -17,13 +16,12 @@ import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { CollectionSubView } from '../CollectionSubView'; import './CollectionGridView.scss'; import Grid, { Layout } from './Grid'; - @observer export class CollectionGridView extends CollectionSubView() { private _containerRef: React.RefObject = React.createRef(); private _changeListenerDisposer: Opt; // listens for changes in this.childLayoutPairs private _resetListenerDisposer: Opt; // listens for when the reset button is clicked - @observable private _rowHeight: Opt; // temporary store of row height to make change undoable + @observable private _rowHeight: Opt = undefined; // temporary store of row height to make change undoable @observable private _scroll: number = 0; // required to make sure the decorations box container updates on scroll private dropLocation: object = {}; // sets the drop location for external drops diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 3d1d87aa0..9145d7ef1 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; import { observer } from 'mobx-react'; +import * as React from 'react'; import '../../../../../node_modules/react-grid-layout/css/styles.css'; import '../../../../../node_modules/react-resizable/css/styles.css'; diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index e12bcd8b0..5bea59e7b 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -4,13 +4,13 @@ import { Button } from 'browndash-components'; import { action, computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { returnFalse } from '../../../../Utils'; import { Doc, DocListCast } from '../../../../fields/Doc'; import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; -import { returnFalse } from '../../../../Utils'; import { DragManager, dropActionType } from '../../../util/DragManager'; import { SettingsManager } from '../../../util/SettingsManager'; import { Transform } from '../../../util/Transform'; -import { undoable, undoBatch } from '../../../util/UndoManager'; +import { undoBatch, undoable } from '../../../util/UndoManager'; import { DocumentView } from '../../nodes/DocumentView'; import { CollectionSubView } from '../CollectionSubView'; import './CollectionMulticolumnView.scss'; diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index 7dbc18e60..3043eb0f8 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -1,9 +1,9 @@ import { action, computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { returnFalse } from '../../../../Utils'; import { Doc, DocListCast } from '../../../../fields/Doc'; import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; -import { returnFalse } from '../../../../Utils'; import { DragManager, dropActionType } from '../../../util/DragManager'; import { Transform } from '../../../util/Transform'; import { undoBatch } from '../../../util/UndoManager'; @@ -12,7 +12,6 @@ import { CollectionSubView } from '../CollectionSubView'; import './CollectionMultirowView.scss'; import HeightLabel from './MultirowHeightLabel'; import ResizeBar from './MultirowResizer'; - interface HeightSpecifier { magnitude: number; unit: string; diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx index 868b1140d..ea99bff2e 100644 --- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx +++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx @@ -1,12 +1,12 @@ -import * as React from 'react'; +import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; -import { observable, action } from 'mobx'; +import * as React from 'react'; import { Doc } from '../../../../fields/Doc'; import { NumCast, StrCast } from '../../../../fields/Types'; -import { DimUnit } from './CollectionMulticolumnView'; import { UndoManager } from '../../../util/UndoManager'; -import { StyleProviderFunc } from '../../nodes/DocumentView'; import { StyleProp } from '../../StyleProvider'; +import { StyleProviderFunc } from '../../nodes/DocumentView'; +import { DimUnit } from './CollectionMulticolumnView'; interface ResizerProps { width: number; diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx index 9985a9fba..a9579d931 100644 --- a/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx +++ b/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx @@ -1,27 +1,25 @@ -import * as React from "react"; -import { observer } from "mobx-react"; -import { computed } from "mobx"; -import { Doc } from "../../../../fields/Doc"; -import { NumCast, StrCast, BoolCast } from "../../../../fields/Types"; -import { EditableView } from "../../EditableView"; -import { DimUnit } from "./CollectionMulticolumnView"; +import { computed } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Doc } from '../../../../fields/Doc'; +import { BoolCast, NumCast, StrCast } from '../../../../fields/Types'; +import { EditableView } from '../../EditableView'; +import { DimUnit } from './CollectionMulticolumnView'; interface WidthLabelProps { layout: Doc; collectionDoc: Doc; - decimals?: number; } @observer export default class WidthLabel extends React.Component { - @computed private get contents() { - const { layout, decimals } = this.props; + const { layout } = this.props; const getUnit = () => StrCast(layout.dimUnit); - const getMagnitude = () => String(+NumCast(layout.dimMagnitude).toFixed(decimals ?? 3)); + const getMagnitude = () => String(+NumCast(layout.dimMagnitude).toFixed(3)); return ( -
+
{ @@ -50,7 +48,6 @@ export default class WidthLabel extends React.Component { } render() { - return BoolCast(this.props.collectionDoc.showWidthLabels) ? this.contents : (null); + return BoolCast(this.props.collectionDoc.showWidthLabels) ? this.contents : null; } - -} \ No newline at end of file +} diff --git a/src/client/views/collections/collectionMulticolumn/MultirowHeightLabel.tsx b/src/client/views/collections/collectionMulticolumn/MultirowHeightLabel.tsx index aa5439fa4..878c7ff3c 100644 --- a/src/client/views/collections/collectionMulticolumn/MultirowHeightLabel.tsx +++ b/src/client/views/collections/collectionMulticolumn/MultirowHeightLabel.tsx @@ -1,10 +1,10 @@ -import * as React from "react"; -import { observer } from "mobx-react"; -import { computed } from "mobx"; -import { Doc } from "../../../../fields/Doc"; -import { NumCast, StrCast, BoolCast } from "../../../../fields/Types"; -import { EditableView } from "../../EditableView"; -import { DimUnit } from "./CollectionMultirowView"; +import { computed } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Doc } from '../../../../fields/Doc'; +import { BoolCast, NumCast, StrCast } from '../../../../fields/Types'; +import { EditableView } from '../../EditableView'; +import { DimUnit } from './CollectionMultirowView'; interface HeightLabelProps { layout: Doc; @@ -14,14 +14,13 @@ interface HeightLabelProps { @observer export default class HeightLabel extends React.Component { - @computed private get contents() { const { layout, decimals } = this.props; const getUnit = () => StrCast(layout.dimUnit); const getMagnitude = () => String(+NumCast(layout.dimMagnitude).toFixed(decimals ?? 3)); return ( -
+
{ @@ -50,7 +49,6 @@ export default class HeightLabel extends React.Component { } render() { - return BoolCast(this.props.collectionDoc.showHeightLabels) ? this.contents : (null); + return BoolCast(this.props.collectionDoc.showHeightLabels) ? this.contents : null; } - -} \ No newline at end of file +} diff --git a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx index 5a9d6a82c..7dee65e58 100644 --- a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx +++ b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx @@ -1,12 +1,12 @@ -import * as React from 'react'; +import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; -import { observable, action } from 'mobx'; +import * as React from 'react'; import { Doc } from '../../../../fields/Doc'; import { NumCast, StrCast } from '../../../../fields/Types'; -import { DimUnit } from './CollectionMultirowView'; import { UndoManager } from '../../../util/UndoManager'; import { StyleProp } from '../../StyleProvider'; import { StyleProviderFunc } from '../../nodes/DocumentView'; +import { DimUnit } from './CollectionMultirowView'; interface ResizerProps { height: number; diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 04443b4a7..5f8b412be 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -1,7 +1,7 @@ -import * as React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; +import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import { Colors } from '../../global/globalEnums'; import './CollectionSchemaView.scss'; diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 06073b52c..85e97f95f 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -1,3 +1,4 @@ +import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { action, computed, makeObservable, observable } from 'mobx'; @@ -7,18 +8,17 @@ import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils'; import { Doc } from '../../../fields/Doc'; import { Cast, DocCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; +import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; import { LinkFollower } from '../../util/LinkFollower'; import { LinkManager } from '../../util/LinkManager'; import { SelectionManager } from '../../util/SelectionManager'; import { SettingsManager } from '../../util/SettingsManager'; +import { undoBatch } from '../../util/UndoManager'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { DocumentView, DocumentViewInternal, OpenWhere } from '../nodes/DocumentView'; import { LinkInfo } from '../nodes/LinkDocPreview'; import './LinkMenuItem.scss'; -import { undoBatch } from '../../util/UndoManager'; -import { IconProp } from '@fortawesome/fontawesome-svg-core'; -import { DocumentType } from '../../documents/DocumentTypes'; interface LinkMenuItemProps { groupType: string; diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx index 5460a6daf..7e344dd7a 100644 --- a/src/client/views/linking/LinkPopup.tsx +++ b/src/client/views/linking/LinkPopup.tsx @@ -1,16 +1,16 @@ import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; import { EditorView } from 'prosemirror-view'; -import { Doc } from '../../../fields/Doc'; +import * as React from 'react'; import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../Utils'; +import { Doc } from '../../../fields/Doc'; import { Transform } from '../../util/Transform'; import { undoBatch } from '../../util/UndoManager'; +import { DefaultStyleProvider } from '../StyleProvider'; import { OpenWhere } from '../nodes/DocumentView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { SearchBox } from '../search/SearchBox'; -import { DefaultStyleProvider } from '../StyleProvider'; import './LinkPopup.scss'; -import * as React from 'react'; interface LinkPopupProps { linkFrom?: () => Doc | undefined; @@ -29,7 +29,7 @@ interface LinkPopupProps { @observer export class LinkPopup extends React.Component { @observable private linkURL: string = ''; - @observable public view?: EditorView; + @observable public view?: EditorView = undefined; // TODO: should check for valid URL @undoBatch diff --git a/src/client/views/linking/LinkRelationshipSearch.tsx b/src/client/views/linking/LinkRelationshipSearch.tsx index 3e7f5be74..0902d53b2 100644 --- a/src/client/views/linking/LinkRelationshipSearch.tsx +++ b/src/client/views/linking/LinkRelationshipSearch.tsx @@ -1,6 +1,6 @@ import { observer } from 'mobx-react'; -import './LinkEditor.scss'; import * as React from 'react'; +import './LinkEditor.scss'; interface link_relationshipSearchProps { results: string[] | undefined; diff --git a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx index 72b63cf8f..bce2b296f 100644 --- a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx +++ b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx @@ -3,12 +3,12 @@ import * as React from 'react'; import { Doc } from '../../../../fields/Doc'; import { InkTool } from '../../../../fields/InkField'; import { SelectionManager } from '../../../util/SelectionManager'; +import { SnappingManager } from '../../../util/SnappingManager'; import { CollectionDockingView } from '../../collections/CollectionDockingView'; -import { DocumentView, OpenWhereMod } from '../../nodes/DocumentView'; +import { OpenWhereMod } from '../../nodes/DocumentView'; import { NewLightboxView } from '../NewLightboxView'; import './ButtonMenu.scss'; import { IButtonMenu } from './utils'; -import { SnappingManager } from '../../../util/SnappingManager'; export const ButtonMenu = (props: IButtonMenu) => { return ( diff --git a/src/client/views/newlightbox/NewLightboxView.tsx b/src/client/views/newlightbox/NewLightboxView.tsx index 6980e31c1..3d159c3e3 100644 --- a/src/client/views/newlightbox/NewLightboxView.tsx +++ b/src/client/views/newlightbox/NewLightboxView.tsx @@ -2,28 +2,28 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../../Utils'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { InkTool } from '../../../fields/InkField'; import { Cast, NumCast, StrCast } from '../../../fields/Types'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../Utils'; import { DocUtils } from '../../documents/Documents'; import { DocumentManager } from '../../util/DocumentManager'; import { LinkManager } from '../../util/LinkManager'; import { SelectionManager } from '../../util/SelectionManager'; +import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; -import { CollectionStackedTimeline } from '../collections/CollectionStackedTimeline'; -import { TabDocView } from '../collections/TabDocView'; import { GestureOverlay } from '../GestureOverlay'; import { LightboxView } from '../LightboxView'; -import { DocumentView, OpenWhere } from '../nodes/DocumentView'; import { DefaultStyleProvider } from '../StyleProvider'; -import { IRecommendation } from './components'; +import { CollectionStackedTimeline } from '../collections/CollectionStackedTimeline'; +import { TabDocView } from '../collections/TabDocView'; +import { DocumentView, OpenWhere } from '../nodes/DocumentView'; import { ExploreView } from './ExploreView'; -import { emptyBounds, IBounds } from './ExploreView/utils'; +import { IBounds, emptyBounds } from './ExploreView/utils'; import { NewLightboxHeader } from './Header'; import './NewLightboxView.scss'; import { RecommendationList } from './RecommendationList'; -import { SnappingManager } from '../../util/SnappingManager'; +import { IRecommendation } from './components'; enum LightboxStatus { RECOMMENDATIONS = 'recommendations', @@ -50,15 +50,15 @@ export class NewLightboxView extends React.Component { return this._doc; } private static LightboxDocTemplate = () => NewLightboxView._layoutTemplate; - @observable private static _layoutTemplate: Opt; - @observable private static _layoutTemplateString: Opt; - @observable private static _doc: Opt; - @observable private static _docTarget: Opt; + @observable private static _layoutTemplate: Opt = undefined; + @observable private static _layoutTemplateString: Opt = undefined; + @observable private static _doc: Opt = undefined; + @observable private static _docTarget: Opt = undefined; @observable private static _docFilters: string[] = []; // filters - private static _savedState: Opt; + private static _savedState: Opt = undefined; private static _history: Opt<{ doc: Doc; target?: Doc }[]> = []; @observable private static _future: Opt = []; - @observable private static _docView: Opt; + @observable private static _docView: Opt = undefined; // keywords @observable private static _keywords: string[] = []; diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 4c36d2fcb..12e8e1a69 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -44,8 +44,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { private _annotationLayer: React.RefObject = React.createRef(); anchorMenuClick?: () => undefined | ((anchor: Doc) => void); crop: ((region: Doc | undefined, addCrop?: boolean) => Doc | undefined) | undefined; - @observable schemaDataVizChildren: any; - @observable _marqueeing: number[] | undefined; + @observable schemaDataVizChildren: any = undefined; + @observable _marqueeing: number[] | undefined = undefined; @observable _savedAnnotations = new ObservableMap(); @computed get annotationLayer() { TraceMobx(); diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx index 3cb5125da..24023077f 100644 --- a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx +++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx @@ -1,15 +1,14 @@ -import * as React from 'react'; -import './SchemaCSVPopUp.scss'; +import { IconButton } from 'browndash-components'; import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { CgClose } from 'react-icons/cg'; +import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import { Doc } from '../../../../fields/Doc'; -import { Button, IconButton, Type } from 'browndash-components'; import { StrCast } from '../../../../fields/Types'; -import { MarqueeView } from '../../collections/collectionFreeForm/MarqueeView'; -import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import { DragManager } from '../../../util/DragManager'; import { DocumentView } from '../DocumentView'; -import { CgClose } from 'react-icons/cg'; +import './SchemaCSVPopUp.scss'; interface SchemaCSVPopUpProps {} @@ -56,13 +55,11 @@ export class SchemaCSVPopUp extends React.Component {
{this.heading('Schema Table as Data Visualization Doc')}
-
-
this.drag(e)}> - -
+
+
this.drag(e)}> +
+
); @@ -88,9 +85,10 @@ export class SchemaCSVPopUp extends React.Component { return embedding; }; if (this.view && sourceAnchorCreator && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) { - DragManager.StartAnchorAnnoDrag(e.target instanceof HTMLElement ? [e.target] : [], - new DragManager.AnchorAnnoDragData(this.view, sourceAnchorCreator, targetCreator), downX, downY, { - dragComplete: e => {this.setVisible(false);}, + DragManager.StartAnchorAnnoDrag(e.target instanceof HTMLElement ? [e.target] : [], new DragManager.AnchorAnnoDragData(this.view, sourceAnchorCreator, targetCreator), downX, downY, { + dragComplete: e => { + this.setVisible(false); + }, }); return true; } @@ -108,4 +106,4 @@ export class SchemaCSVPopUp extends React.Component {
); } -} \ No newline at end of file +} diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index 227c993c7..9e9a43b34 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ColorPicker, EditableText, IconButton, Size, Type } from 'browndash-components'; import * as d3 from 'd3'; -import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { FaFillDrip } from 'react-icons/fa'; @@ -11,10 +11,10 @@ import { listSpec } from '../../../../../fields/Schema'; import { Cast, DocCast, StrCast } from '../../../../../fields/Types'; import { Docs } from '../../../../documents/Documents'; import { undoable } from '../../../../util/UndoManager'; +import { ObservableReactComponent } from '../../../ObservableReactComponent'; import { PinProps, PresBox } from '../../trails'; import { scaleCreatorNumerical, yAxisCreator } from '../utils/D3Utils'; import './Chart.scss'; -import { ObservableReactComponent } from '../../../ObservableReactComponent'; export interface HistogramProps { Document: Doc; @@ -461,7 +461,7 @@ export class Histogram extends ObservableReactComponent { if (this._histogramData.length > 0 || !this.parentViz) { return this._props.axes.length >= 1 ? ( -
+
{ private _lineChartSvg: d3.Selection | undefined; @observable _currSelected: SelectedDataPoint | undefined = undefined; // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates - constructor(props:any) { + constructor(props: any) { super(props); makeObservable(this); } - @computed get _tableDataIds() { return !this.parentViz ? this._props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows); } @@ -359,7 +358,7 @@ export class LineChart extends ObservableReactComponent { const selectedPt = this._currSelected ? `{ ${this._props.axes[0]}: ${this._currSelected.x} ${this._props.axes[1]}: ${this._currSelected.y} }` : 'none'; if (this._lineChartData.length > 0 || !this.parentViz || this.parentViz.length == 0) { return this._props.axes.length >= 2 && /\d/.test(this._props.records[0][this._props.axes[0]]) && /\d/.test(this._props.records[0][this._props.axes[1]]) ? ( -
+
{ />
- {selectedPt != 'none' ? -
+ {selectedPt != 'none' ? ( +
{`Selected: ${selectedPt}`} - -
- : null} + +
+ ) : null}
) : ( {'first use table view to select two numerical axes to plot'} diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx index e644870da..e67556cd0 100644 --- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx @@ -1,7 +1,7 @@ import { Checkbox } from '@mui/material'; import { ColorPicker, EditableText, Size, Type } from 'browndash-components'; import * as d3 from 'd3'; -import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { FaFillDrip } from 'react-icons/fa'; @@ -11,9 +11,9 @@ import { listSpec } from '../../../../../fields/Schema'; import { Cast, DocCast, StrCast } from '../../../../../fields/Types'; import { Docs } from '../../../../documents/Documents'; import { undoable } from '../../../../util/UndoManager'; +import { ObservableReactComponent } from '../../../ObservableReactComponent'; import { PinProps, PresBox } from '../../trails'; import './Chart.scss'; -import { ObservableReactComponent } from '../../../ObservableReactComponent'; export interface PieChartProps { Document: Doc; @@ -356,7 +356,7 @@ export class PieChart extends ObservableReactComponent { if (this._pieChartData.length > 0 || !this.parentViz) { return this._props.axes.length >= 1 ? ( -
+
{ return (this.viewScale * this._tableHeight) / this._tableDataIds.length; } @computed get startID() { - return this.rowHeight ? Math.max(Math.floor(this._scrollTop / this.rowHeight)-1, 0) : 0; + return this.rowHeight ? Math.max(Math.floor(this._scrollTop / this.rowHeight) - 1, 0) : 0; } @computed get endID() { console.log('start = ' + this.startID + ' container = ' + this._tableContainerHeight + ' scale = ' + this.viewScale + ' row = ' + this.rowHeight); @@ -169,7 +169,7 @@ export class TableBox extends ObservableReactComponent { return (
{ if (this._props.layoutDoc && e.key === 'a' && (e.ctrlKey || e.metaKey)) { @@ -226,7 +226,7 @@ export class TableBox extends ObservableReactComponent { {this._tableDataIds - .filter((rowId, i) => this.startID-2 <= i && i <= this.endID+2) + .filter((rowId, i) => this.startID - 2 <= i && i <= this.endID + 2) ?.map(rowId => ( ; export interface JsxBindings { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index cc7fca8d2..f8f4b94a2 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,10 +1,11 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { Dropdown, DropdownType, Type } from 'browndash-components'; +import { Howl } from 'howler'; import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { computedFn } from 'mobx-utils'; -import { Bounce, Fade, Flip, JackInTheBox, Roll, Rotate, Zoom } from 'react-awesome-reveal'; import * as React from 'react'; +import { Bounce, Fade, Flip, JackInTheBox, Roll, Rotate, Zoom } from 'react-awesome-reveal'; import { Utils, emptyFunction, isTargetChildOf as isParentOf, lightOrDark, returnEmptyString, returnFalse, returnTrue, returnVal, simulateMouseClick } from '../../../Utils'; import { Doc, DocListCast, Field, Opt, StrListCast } from '../../../fields/Doc'; import { AclPrivate, Animation, AudioPlay, DocViews } from '../../../fields/DocSymbols'; @@ -53,7 +54,6 @@ import { LinkAnchorBox } from './LinkAnchorBox'; import { FormattedTextBox } from './formattedText/FormattedTextBox'; import { PresEffect, PresEffectDirection } from './trails'; import { PinProps, PresBox } from './trails/PresBox'; -import { Howl } from 'howler'; interface Window { MediaRecorder: MediaRecorder; @@ -138,7 +138,6 @@ export interface DocComponentView { dragStarting?: (snapToDraggedDoc: boolean, showGroupDragTarget: boolean, visited: Set) => void; incrementalRendering?: () => void; infoUI?: () => JSX.Element | null; - getCenter?: (xf: Transform) => { X: number; Y: number }; screenBounds?: () => Opt<{ left: number; top: number; right: number; bottom: number; center?: { X: number; Y: number } }>; ptToScreen?: (pt: { X: number; Y: number }) => { X: number; Y: number }; ptFromScreen?: (pt: { X: number; Y: number }) => { X: number; Y: number }; @@ -1516,7 +1515,7 @@ export class DocumentView extends ObservableReactComponent { const docuBox = this.docView.ContentDiv.getElementsByClassName('linkAnchorBox-cont'); if (docuBox.length) return { ...docuBox[0].getBoundingClientRect(), center: undefined }; } - return { left, top, right, bottom, center: this.ComponentView?.getCenter?.(xf) }; + return { left, top, right, bottom }; }; public iconify(finished?: () => void, animateTime?: number) { diff --git a/src/client/views/nodes/FaceRectangle.tsx b/src/client/views/nodes/FaceRectangle.tsx index 8d03bf57a..46bc6eb03 100644 --- a/src/client/views/nodes/FaceRectangle.tsx +++ b/src/client/views/nodes/FaceRectangle.tsx @@ -1,6 +1,6 @@ -import * as React from 'react'; -import { observer } from 'mobx-react'; import { observable, runInAction } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; import { RectangleTemplate } from './FaceRectangles'; @observer diff --git a/src/client/views/nodes/FaceRectangles.tsx b/src/client/views/nodes/FaceRectangles.tsx index 26e720c0d..ade4225d9 100644 --- a/src/client/views/nodes/FaceRectangles.tsx +++ b/src/client/views/nodes/FaceRectangles.tsx @@ -1,8 +1,8 @@ +import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast } from '../../../fields/Doc'; -import { Cast, NumCast } from '../../../fields/Types'; -import { observer } from 'mobx-react'; import { Id } from '../../../fields/FieldSymbols'; +import { Cast, NumCast } from '../../../fields/Types'; import FaceRectangle from './FaceRectangle'; interface FaceRectanglesProps { diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index f4c5167a5..008f10f26 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -1,6 +1,6 @@ -import * as React from 'react'; import { computed } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { DateField } from '../../../fields/DateField'; import { Doc, Field, FieldResult, Opt } from '../../../fields/Doc'; import { List } from '../../../fields/List'; diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index fd8d8ef56..7bc9d3f85 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -1,7 +1,6 @@ import { Tooltip } from '@mui/material'; import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; -import { ObservableGroupMap } from 'mobx-utils'; import * as React from 'react'; import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../Utils'; import { Doc, Field } from '../../../fields/Doc'; @@ -11,13 +10,13 @@ import { Transform } from '../../util/Transform'; import { undoBatch } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { EditableView } from '../EditableView'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { DefaultStyleProvider } from '../StyleProvider'; import { OpenWhere } from './DocumentView'; import { FieldViewProps } from './FieldView'; import { KeyValueBox } from './KeyValueBox'; import './KeyValueBox.scss'; import './KeyValuePair.scss'; -import { ObservableReactComponent } from '../ObservableReactComponent'; // Represents one row in a key value plane @@ -35,12 +34,11 @@ export class KeyValuePair extends ObservableReactComponent { @observable private isPointerOver = false; @observable public isChecked = false; private checkbox = React.createRef(); - constructor(props:any) { + constructor(props: any) { super(props); makeObservable(this); } - @action handleCheck = (e: React.ChangeEvent) => { this.isChecked = e.currentTarget.checked; diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx index 32300d60a..8ad0b7dde 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.tsx +++ b/src/client/views/nodes/LinkDescriptionPopup.tsx @@ -1,6 +1,6 @@ -import * as React from 'react'; import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc } from '../../../fields/Doc'; import { LinkManager } from '../../util/LinkManager'; import './LinkDescriptionPopup.scss'; diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index d0a9f10b4..ea23ecbea 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -2,13 +2,14 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import wiki from 'wikijs'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnNone, setupMoveUpEvents } from '../../../Utils'; import { Doc, Opt } from '../../../fields/Doc'; import { Cast, DocCast, NumCast, PromiseValue, StrCast } from '../../../fields/Types'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnNone, setupMoveUpEvents } from '../../../Utils'; import { DocServer } from '../../DocServer'; -import { Docs } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; +import { Docs } from '../../documents/Documents'; import { DocumentManager } from '../../util/DocumentManager'; import { DragManager } from '../../util/DragManager'; import { LinkFollower } from '../../util/LinkFollower'; @@ -16,10 +17,9 @@ import { LinkManager } from '../../util/LinkManager'; import { SearchUtil } from '../../util/SearchUtil'; import { SettingsManager } from '../../util/SettingsManager'; import { Transform } from '../../util/Transform'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { DocumentView, DocumentViewSharedProps, OpenWhere } from './DocumentView'; import './LinkDocPreview.scss'; -import * as React from 'react'; -import { ObservableReactComponent } from '../ObservableReactComponent'; export class LinkInfo { private static _instance: Opt; diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx index 27d73a585..adccc9db6 100644 --- a/src/client/views/nodes/LoadingBox.tsx +++ b/src/client/views/nodes/LoadingBox.tsx @@ -1,4 +1,4 @@ -import { action, observable, runInAction } from 'mobx'; +import { observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import ReactLoading from 'react-loading'; diff --git a/src/client/views/nodes/MapBox/AnimationUtility.ts b/src/client/views/nodes/MapBox/AnimationUtility.ts index 42dfa59b7..35153f439 100644 --- a/src/client/views/nodes/MapBox/AnimationUtility.ts +++ b/src/client/views/nodes/MapBox/AnimationUtility.ts @@ -1,13 +1,10 @@ -import mapboxgl from 'mapbox-gl'; -import { MercatorCoordinate } from 'mapbox-gl'; -import { MapRef } from 'react-map-gl'; -import * as React from 'react'; -import * as d3 from 'd3'; import * as turf from '@turf/turf'; import { Position } from '@turf/turf'; -import { Feature, FeatureCollection, GeoJsonProperties, Geometry } from 'geojson'; -import { observer } from 'mobx-react'; -import { action, computed, observable, runInAction, makeObservable } from 'mobx'; +import * as d3 from 'd3'; +import { Feature, GeoJsonProperties, Geometry } from 'geojson'; +import mapboxgl, { MercatorCoordinate } from 'mapbox-gl'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; +import { MapRef } from 'react-map-gl'; export enum AnimationStatus { START = 'start', diff --git a/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx b/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx index f9607becf..7e99795b5 100644 --- a/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx +++ b/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx @@ -1,15 +1,15 @@ -import * as React from 'react'; -import { observer } from 'mobx-react'; -import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu'; +import { IconLookup, faAdd, faCalendarDays, faRoute } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { IconButton } from 'browndash-components'; import { IReactionDisposer, ObservableMap, reaction } from 'mobx'; -import { Doc, Opt } from '../../../../fields/Doc'; +import { observer } from 'mobx-react'; +import * as React from 'react'; import { returnFalse, unimplementedFunction } from '../../../../Utils'; +import { Doc, Opt } from '../../../../fields/Doc'; import { NumCast, StrCast } from '../../../../fields/Types'; import { SelectionManager } from '../../../util/SelectionManager'; -import { IconButton } from 'browndash-components'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { SettingsManager } from '../../../util/SettingsManager'; -import { IconLookup, faAdd, faCalendarDays, faRoute } from '@fortawesome/free-solid-svg-icons'; +import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu'; @observer export class DirectionsAnchorMenu extends AntimodeMenu { diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx index 1b1b74e7c..08bea5d9d 100644 --- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx +++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx @@ -1,26 +1,23 @@ +import { IconLookup, faAdd, faArrowDown, faArrowLeft, faArrowsRotate, faBicycle, faCalendarDays, faCar, faDiamondTurnRight, faEdit, faPersonWalking, faRoute } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import * as React from 'react'; +import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/material'; +import { IconButton } from 'browndash-components'; +import { Position } from 'geojson'; import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc, NumListCast, Opt } from '../../../../fields/Doc'; +import * as React from 'react'; +import { CirclePicker, ColorResult } from 'react-color'; import { returnFalse, setupMoveUpEvents, unimplementedFunction } from '../../../../Utils'; +import { Doc, Opt } from '../../../../fields/Doc'; +import { NumCast, StrCast } from '../../../../fields/Types'; +import { CalendarManager } from '../../../util/CalendarManager'; import { SelectionManager } from '../../../util/SelectionManager'; -import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu'; -// import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup'; -import { Button, IconButton } from 'browndash-components'; import { SettingsManager } from '../../../util/SettingsManager'; +import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu'; import './MapAnchorMenu.scss'; -import { NumCast, StrCast } from '../../../../fields/Types'; -import { IconLookup, faDiamondTurnRight, faCalendarDays, faEdit, faAdd, faRoute, faArrowLeft, faLocationDot, faArrowDown, faCar, faBicycle, faPersonWalking, faUpload, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'; -import { DirectionsAnchorMenu } from './DirectionsAnchorMenu'; -import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/material'; import { MapboxApiUtility, TransportationType } from './MapboxApiUtility'; -import { MapBox } from './MapBox'; -import { List } from '../../../../fields/List'; import { MarkerIcons } from './MarkerIcons'; -import { CirclePicker, ColorResult } from 'react-color'; -import { Position } from 'geojson'; -import { CalendarManager } from '../../../util/CalendarManager'; +// import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup'; type MapAnchorMenuType = 'standard' | 'routeCreation' | 'calendar' | 'customize' | 'route'; @@ -52,7 +49,6 @@ export class MapAnchorMenu extends AntimodeMenu { public UpdateMarkerColor: (color: string) => void = unimplementedFunction; public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction; - public Hide: () => void = unimplementedFunction; public OpenAnimationPanel: (routeDoc: Doc | undefined) => void = unimplementedFunction; @@ -74,22 +70,21 @@ export class MapAnchorMenu extends AntimodeMenu { private title: string | undefined = undefined; public setPinDoc(pinDoc: Doc | undefined) { - if (pinDoc){ + if (pinDoc) { this.pinDoc = pinDoc; this.title = StrCast(pinDoc.title ? pinDoc.title : `${NumCast(pinDoc.longitude)}, ${NumCast(pinDoc.latitude)}`); } - } public setRouteDoc(routeDoc: Doc | undefined) { - if (routeDoc){ + if (routeDoc) { this.routeDoc = routeDoc; this.title = StrCast(routeDoc.title ?? 'Map route'); } } @action - public Reset(){ + public Reset() { this.destinationSelected = false; this.currentRouteInfoMap = undefined; this.destinationFeatures = []; @@ -296,34 +291,23 @@ export class MapAnchorMenu extends AntimodeMenu { return undefined; }; - getDirectionsButton: JSX.Element = ( - } - color={SettingsManager.userColor} /> - ) + getDirectionsButton: JSX.Element = (} color={SettingsManager.userColor} />); getAddToCalendarButton = (docType: string): JSX.Element => { return ( - { - CalendarManager.Instance.open(undefined, docType === 'pin' ? this.pinDoc : this.routeDoc) - }} - icon={} - color={SettingsManager.userColor} + { + CalendarManager.Instance.open(undefined, docType === 'pin' ? this.pinDoc : this.routeDoc); + }} + icon={} + color={SettingsManager.userColor} /> - ) - - } + ); + }; addToCalendarButton: JSX.Element = ( - CalendarManager.Instance.open(undefined, this.pinDoc)} - icon={} - color={SettingsManager.userColor} /> - ) + CalendarManager.Instance.open(undefined, this.pinDoc)} icon={} color={SettingsManager.userColor} /> + ); getLinkNoteToDocButton = (docType: string): JSX.Element => { return ( @@ -335,8 +319,8 @@ export class MapAnchorMenu extends AntimodeMenu { color={SettingsManager.userColor} />
- ) - } + ); + }; linkNoteToPinOrRoutenButton: JSX.Element = (
@@ -347,16 +331,9 @@ export class MapAnchorMenu extends AntimodeMenu { color={SettingsManager.userColor} />
- ) - - customizePinButton: JSX.Element = ( - } - color={SettingsManager.userColor} - /> - ) + ); + + customizePinButton: JSX.Element = (} color={SettingsManager.userColor} />); centerOnPinButton: JSX.Element = ( { icon={} color={SettingsManager.userColor} /> - ) + ); backButton: JSX.Element = ( { icon={} color={SettingsManager.userColor} /> - ) + ); addRouteButton: JSX.Element = ( { icon={} color={SettingsManager.userColor} /> - ) + ); getDeleteButton = (type: string) => { return ( @@ -393,17 +370,10 @@ export class MapAnchorMenu extends AntimodeMenu { icon={} color={SettingsManager.userColor} /> - ) - } + ); + }; - animateRouteButton: JSX.Element = ( - this.OpenAnimationPanel(this.routeDoc)} - icon={} - color={SettingsManager.userColor} - /> - ) + animateRouteButton: JSX.Element = ( this.OpenAnimationPanel(this.routeDoc)} icon={} color={SettingsManager.userColor} />); revertToOriginalMarkerButton = ( { icon={} color={SettingsManager.userColor} /> - ) + ); render() { const buttons = ( diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 7db139d74..ffd52fb0e 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -1,8 +1,17 @@ +import { IconLookup, faCircleXmark, faGear, faPause, faPlay, faRotate } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Checkbox, FormControlLabel, TextField } from '@mui/material'; +import * as turf from '@turf/turf'; import { IconButton, Size, Type } from 'browndash-components'; +import * as d3 from 'd3'; +import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString, Position } from 'geojson'; +import mapboxgl, { LngLat, LngLatBoundsLike, MapLayerMouseEvent } from 'mapbox-gl'; import { IReactionDisposer, ObservableMap, action, autorun, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { CirclePicker, ColorResult } from 'react-color'; +import { Layer, MapProvider, MapRef, Map as MapboxMap, Marker, Source, ViewState, ViewStateChangeEvent } from 'react-map-gl'; +import { MarkerEvent } from 'react-map-gl/dist/esm/types'; import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import { Doc, DocListCast, Field, LinkedTo, Opt } from '../../../../fields/Doc'; import { DocCss, Highlight } from '../../../../fields/DocSymbols'; @@ -22,22 +31,13 @@ import { DocumentView } from '../DocumentView'; import { FieldView, FieldViewProps } from '../FieldView'; import { FormattedTextBox } from '../formattedText/FormattedTextBox'; import { PinProps, PresBox } from '../trails'; -import { MapAnchorMenu } from './MapAnchorMenu'; -import { ControlPosition, Layer, MapProvider, MapRef, Map as MapboxMap, Marker, MarkerProps, Source, ViewState, ViewStateChangeEvent } from 'react-map-gl'; -import './MapBox.scss'; -// import { GeocoderControl } from './GeocoderControl'; -import { IconLookup, faCircleXmark, faGear, faPause, faPlay, faRotate } from '@fortawesome/free-solid-svg-icons'; -import { Checkbox, FormControlLabel, TextField } from '@mui/material'; -import * as turf from '@turf/turf'; -import * as d3 from 'd3'; -import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString, Position } from 'geojson'; -import mapboxgl, { LngLat, LngLatBoundsLike, MapLayerMouseEvent } from 'mapbox-gl'; -import { CirclePicker, ColorResult } from 'react-color'; -import { MarkerEvent } from 'react-map-gl/dist/esm/types'; import { fastSpeedIcon, mediumSpeedIcon, slowSpeedIcon } from './AnimationSpeedIcons'; import { AnimationSpeed, AnimationStatus, AnimationUtility } from './AnimationUtility'; +import { MapAnchorMenu } from './MapAnchorMenu'; +import './MapBox.scss'; import { MapboxApiUtility, TransportationType } from './MapboxApiUtility'; import { MarkerIcons } from './MarkerIcons'; +// import { GeocoderControl } from './GeocoderControl'; // amongus /** @@ -480,7 +480,7 @@ export class MapBox extends ViewBoxAnnotatableComponent { @@ -650,7 +650,7 @@ export class MapBox extends ViewBoxAnnotatableComponent { - console.log('deleting') + console.log('deleting'); if (this.selectedPinOrRoute) { // Removes filter Doc.setDocFilter(this.Document, 'latitude', this.selectedPinOrRoute.latitude, 'remove'); @@ -677,15 +677,12 @@ export class MapBox extends ViewBoxAnnotatableComponent { if (this.selectedPinOrRoute) { @@ -882,8 +879,8 @@ export class MapBox extends ViewBoxAnnotatableComponent { return ( <> @@ -1423,20 +1417,14 @@ export class MapBox extends ViewBoxAnnotatableComponent
|
- } - /> + } />
|
|
-
+
Select Line Color:
- this.setAnimationLineColor(color)} /> + this.setAnimationLineColor(color)} />
-
@@ -1478,7 +1466,7 @@ export class MapBox extends ViewBoxAnnotatableComponent) => { const bearing = parseInt(e.target.value); if (!isNaN(bearing) && this._mapRef.current) { - console.log('bearing change') + console.log('bearing change'); const fixedBearing = Math.max(0, Math.min(360, bearing)); this._mapRef.current.setBearing(fixedBearing); this.dataDoc.map_bearing = fixedBearing; @@ -1489,7 +1477,7 @@ export class MapBox extends ViewBoxAnnotatableComponent) => { const pitch = parseInt(e.target.value); if (!isNaN(pitch) && this._mapRef.current) { - console.log('pitch change') + console.log('pitch change'); const fixedPitch = Math.max(0, Math.min(85, pitch)); this._mapRef.current.setPitch(fixedPitch); this.dataDoc.map_pitch = fixedPitch; @@ -1648,7 +1636,7 @@ export class MapBox extends ViewBoxAnnotatableComponent = React.createRef(); -// @observable private _overlayAnnoInfo: Opt; +// @observable private _overlayAnnoInfo: Opt = undefined; // showInfo = action((anno: Opt) => (this._overlayAnnoInfo = anno)); // public static LayoutString(fieldKey: string) { // return FieldView.LayoutString(MapBox2, fieldKey); diff --git a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx index 6a14427c0..70037f29c 100644 --- a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx +++ b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx @@ -1,33 +1,31 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import BingMapsReact from 'bingmaps-react'; import { Button, EditableText, IconButton, Type } from 'browndash-components'; -import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx'; +import { IReactionDisposer, ObservableMap, action, computed, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { MapProvider, Map as MapboxMap } from 'react-map-gl'; +import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, setupMoveUpEvents } from '../../../../Utils'; import { Doc, DocListCast, Field, LinkedTo, Opt } from '../../../../fields/Doc'; import { DocCss, Highlight } from '../../../../fields/DocSymbols'; -import { Id } from '../../../../fields/FieldSymbols'; import { DocCast, NumCast, StrCast } from '../../../../fields/Types'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils'; -import { Docs, DocUtils } from '../../../documents/Documents'; import { DocumentType } from '../../../documents/DocumentTypes'; +import { DocUtils, Docs } from '../../../documents/Documents'; import { DocumentManager } from '../../../util/DocumentManager'; import { DragManager } from '../../../util/DragManager'; import { LinkManager } from '../../../util/LinkManager'; import { SnappingManager } from '../../../util/SnappingManager'; import { Transform } from '../../../util/Transform'; -import { undoable, UndoManager } from '../../../util/UndoManager'; -import { MarqueeOptionsMenu } from '../../collections/collectionFreeForm'; +import { UndoManager, undoable } from '../../../util/UndoManager'; import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent'; -import { Colors } from '../../global/globalEnums'; import { SidebarAnnos } from '../../SidebarAnnos'; +import { MarqueeOptionsMenu } from '../../collections/collectionFreeForm'; +import { Colors } from '../../global/globalEnums'; import { DocumentView } from '../DocumentView'; import { FieldView, FieldViewProps } from '../FieldView'; +import { MapAnchorMenu } from '../MapBox/MapAnchorMenu'; import { FormattedTextBox } from '../formattedText/FormattedTextBox'; import { PinProps, PresBox } from '../trails'; import './MapBox.scss'; -import { MapAnchorMenu } from '../MapBox/MapAnchorMenu'; -import { MapProvider, Map as MapboxMap } from 'react-map-gl'; // amongus /** @@ -351,7 +349,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent { diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 733febd2d..7f1d6b049 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -48,7 +48,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent(); @observable private _searching: boolean = false; - @observable private _pdf: Opt; + @observable private _pdf: Opt = undefined; @observable private _pageControls = false; @computed get pdfUrl() { diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx index e75b1ab6f..135db64e0 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx @@ -6,8 +6,9 @@ import QuestionMarkIcon from '@mui/icons-material/QuestionMark'; import ReplayIcon from '@mui/icons-material/Replay'; import { Box, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, FormControlLabel, FormGroup, IconButton, LinearProgress, Stack } from '@mui/material'; import Typography from '@mui/material/Typography'; -import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { IReactionDisposer, action, computed, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { NumListCast } from '../../../../fields/Doc'; import { List } from '../../../../fields/List'; import { BoolCast, NumCast, StrCast } from '../../../../fields/Types'; @@ -19,7 +20,6 @@ import questions from './PhysicsSimulationQuestions.json'; import tutorials from './PhysicsSimulationTutorial.json'; import Wall from './PhysicsSimulationWall'; import Weight from './PhysicsSimulationWeight'; -import * as React from 'react'; interface IWallProps { length: number; diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx index f5077a07e..3b232ddd0 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx @@ -1,7 +1,7 @@ import { computed, IReactionDisposer, makeObservable, reaction } from 'mobx'; import { observer } from 'mobx-react'; -import './PhysicsSimulationBox.scss'; import * as React from 'react'; +import './PhysicsSimulationBox.scss'; interface IWallProps { length: number; diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx index 061a46f03..3b2fc033d 100644 --- a/src/client/views/nodes/RadialMenu.tsx +++ b/src/client/views/nodes/RadialMenu.tsx @@ -1,6 +1,6 @@ -import * as React from 'react'; import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import './RadialMenu.scss'; import { RadialMenuItem, RadialMenuProps } from './RadialMenuItem'; diff --git a/src/client/views/nodes/RadialMenuItem.tsx b/src/client/views/nodes/RadialMenuItem.tsx index c931202f1..10a90befd 100644 --- a/src/client/views/nodes/RadialMenuItem.tsx +++ b/src/client/views/nodes/RadialMenuItem.tsx @@ -1,7 +1,7 @@ -import * as React from 'react'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { UndoManager } from '../../util/UndoManager'; export interface RadialMenuProps { diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx index f01642236..658cfb1ca 100644 --- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx @@ -8,15 +8,15 @@ import { List } from '../../../../fields/List'; import { BoolCast, DocCast } from '../../../../fields/Types'; import { VideoField } from '../../../../fields/URLField'; import { Upload } from '../../../../server/SharedMediaTypes'; -import { Docs } from '../../../documents/Documents'; import { DocumentType } from '../../../documents/DocumentTypes'; +import { Docs } from '../../../documents/Documents'; import { DocumentManager } from '../../../util/DocumentManager'; import { DragManager } from '../../../util/DragManager'; import { ScriptingGlobals } from '../../../util/ScriptingGlobals'; import { Presentation } from '../../../util/TrackMovements'; import { undoBatch } from '../../../util/UndoManager'; -import { CollectionFreeFormView } from '../../collections/collectionFreeForm/CollectionFreeFormView'; import { ViewBoxBaseComponent } from '../../DocComponent'; +import { CollectionFreeFormView } from '../../collections/collectionFreeForm/CollectionFreeFormView'; import { media_state } from '../AudioBox'; import { FieldView, FieldViewProps } from '../FieldView'; import { VideoBox } from '../VideoBox'; diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index d5d31b407..79ed69cdd 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import * as React from 'react'; // import { Canvas } from '@react-three/fiber'; import { computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx index 7e7eaee45..8e506ec64 100644 --- a/src/client/views/nodes/ScriptingBox.tsx +++ b/src/client/views/nodes/ScriptingBox.tsx @@ -2,25 +2,23 @@ let ReactTextareaAutocomplete = require('@webscopeio/react-textarea-autocomplete import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { returnAlways, returnEmptyString } from '../../../Utils'; import { Doc } from '../../../fields/Doc'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; import { ScriptField } from '../../../fields/ScriptField'; import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; -import { returnAlways, returnEmptyString, returnTrue } from '../../../Utils'; import { DragManager } from '../../util/DragManager'; -import { InteractionUtils } from '../../util/InteractionUtils'; +import { ScriptManager } from '../../util/ScriptManager'; import { CompileScript, ScriptParam } from '../../util/Scripting'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; -import { ScriptManager } from '../../util/ScriptManager'; import { ContextMenu } from '../ContextMenu'; import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent'; import { EditableView } from '../EditableView'; -import { FieldView, FieldViewProps } from '../nodes/FieldView'; import { OverlayView } from '../OverlayView'; +import { FieldView, FieldViewProps } from '../nodes/FieldView'; import { DocumentIconContainer } from './DocumentIcon'; -import { DocFocusOptions, DocumentView } from './DocumentView'; import './ScriptingBox.scss'; const _global = (window /* browser */ || global) /* node */ as any; diff --git a/src/client/views/nodes/TaskCompletedBox.tsx b/src/client/views/nodes/TaskCompletedBox.tsx index 9aab8c5a9..c9e15d314 100644 --- a/src/client/views/nodes/TaskCompletedBox.tsx +++ b/src/client/views/nodes/TaskCompletedBox.tsx @@ -1,15 +1,15 @@ -import * as React from 'react'; +import { Fade } from '@mui/material'; +import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import './TaskCompletedBox.scss'; -import { observable, action } from 'mobx'; -import { Fade } from '@mui/material'; @observer export class TaskCompletionBox extends React.Component<{}> { @observable public static taskCompleted: boolean = false; @observable public static popupX: number = 500; @observable public static popupY: number = 150; - @observable public static textDisplayed: string; + @observable public static textDisplayed: string = ''; @action public static toggleTaskCompleted = () => { diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index f205dbd56..8e9cfe3d7 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -74,8 +74,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent(); @observable _screenCapture = false; @observable _clicking = false; // used for transition between showing/hiding timeline @@ -86,7 +86,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent(){ +export class CalendarBox extends ViewBoxBaseComponent() { public static LayoutString(fieldKey: string = 'calendar') { return FieldView.LayoutString(CalendarBox, fieldKey); } - componentDidMount(): void { - - } + componentDidMount(): void {} - componentWillUnmount(): void { - - } + componentWillUnmount(): void {} - _calendarRef = React.createRef() + _calendarRef = React.createRef(); - get dateRangeStr (){ + get dateRangeStr() { return StrCast(this.Document.date_range); } - // Choose a calendar view based on the date range - get calendarViewType (): CalendarView { + // Choose a calendar view based on the date range + get calendarViewType(): CalendarView { const [fromDate, toDate] = dateRangeStrToDates(this.dateRangeStr); if (fromDate.getFullYear() !== toDate.getFullYear() || fromDate.getMonth() !== toDate.getMonth()) return 'multi-month'; @@ -43,92 +38,83 @@ export class CalendarBox extends ViewBoxBaseComponent(){ return 'week'; } - get calendarStartDate () { - return this.dateRangeStr.split("|")[0]; + get calendarStartDate() { + return this.dateRangeStr.split('|')[0]; } - get calendarToDate () { - return this.dateRangeStr.split("|")[1]; + get calendarToDate() { + return this.dateRangeStr.split('|')[1]; } - get childDocs (): Doc[] { + get childDocs(): Doc[] { return this.childDocs; // get all sub docs for a calendar } - docBackgroundColor (type: string): string { + docBackgroundColor(type: string): string { // TODO: Return a different color based on the event type return 'blue'; } - get calendarEvents (): EventSourceInput | undefined { + get calendarEvents(): EventSourceInput | undefined { if (this.childDocs.length === 0) return undefined; return this.childDocs.map((doc, idx) => { const docTitle = StrCast(doc.title); const docDateRange = StrCast(doc.date_range); const [startDate, endDate] = dateRangeStrToDates(docDateRange); const docType = doc.type; - const docDescription = doc.description ? StrCast(doc.description): ""; + const docDescription = doc.description ? StrCast(doc.description) : ''; return { title: docTitle, start: startDate, end: endDate, allDay: false, - classNames:[StrCast(docType)], // will determine the style + classNames: [StrCast(docType)], // will determine the style editable: false, // subject to change in the future backgroundColor: this.docBackgroundColor(StrCast(doc.type)), color: 'white', extendedProps: { - description: docDescription + description: docDescription, }, - - } - - }) + }; + }); } handleEventClick = (arg: EventClickArg) => { // TODO: open popover with event description, option to open CalendarManager and change event date, delete event, etc. - } + }; calendarEl: HTMLElement = document.getElementById('calendar-box-v1')!; // https://fullcalendar.io get calendar() { - return new Calendar(this.calendarEl, - { - plugins: [this.calendarViewType === 'multi-month' ? multiMonthPlugin : dayGridPlugin], - headerToolbar: { - left: 'prev,next today', - center: 'title', - right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' - }, - initialDate: this.calendarStartDate, - navLinks: true, - editable: false, - displayEventTime: false, - displayEventEnd: false, - events: this.calendarEvents, - eventClick: this.handleEventClick - } - ) - + return new Calendar(this.calendarEl, { + plugins: [this.calendarViewType === 'multi-month' ? multiMonthPlugin : dayGridPlugin], + headerToolbar: { + left: 'prev,next today', + center: 'title', + right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek', + }, + initialDate: this.calendarStartDate, + navLinks: true, + editable: false, + displayEventTime: false, + displayEventEnd: false, + events: this.calendarEvents, + eventClick: this.handleEventClick, + }); } - - constructor(props: any){ + constructor(props: any) { super(props); makeObservable(this); } - render(){ + render() { return ( -
-
- -
-
+
+
+
); - } -} \ No newline at end of file +} diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx index 6332b200d..1002ee403 100644 --- a/src/client/views/nodes/formattedText/DashDocView.tsx +++ b/src/client/views/nodes/formattedText/DashDocView.tsx @@ -1,17 +1,17 @@ import { action, IReactionDisposer, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import { NodeSelection } from 'prosemirror-state'; +import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; import { Doc } from '../../../../fields/Doc'; import { Height, Width } from '../../../../fields/DocSymbols'; import { NumCast, StrCast } from '../../../../fields/Types'; -import { emptyFunction, returnFalse, returnTrue, Utils } from '../../../../Utils'; +import { emptyFunction, returnFalse, Utils } from '../../../../Utils'; import { DocServer } from '../../../DocServer'; import { Docs, DocUtils } from '../../../documents/Documents'; import { Transform } from '../../../util/Transform'; import { DocFocusOptions, DocumentView } from '../DocumentView'; import { FormattedTextBox } from './FormattedTextBox'; -import * as React from 'react'; export class DashDocView { dom: HTMLSpanElement; // container for label and value @@ -83,7 +83,7 @@ export class DashDocViewInternal extends React.Component { _disposers: { [name: string]: IReactionDisposer } = {}; _textBox: FormattedTextBox; @observable _dashDoc: Doc | undefined = undefined; - @observable _finalLayout: any; + @observable _finalLayout: any = undefined; @observable _width: number = 0; @observable _height: number = 0; diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx index 331ed1980..7e655531e 100644 --- a/src/client/views/nodes/formattedText/EquationView.tsx +++ b/src/client/views/nodes/formattedText/EquationView.tsx @@ -1,14 +1,13 @@ -import EquationEditor from './EquationEditor'; -import { IReactionDisposer, trace } from 'mobx'; +import { IReactionDisposer } from 'mobx'; import { observer } from 'mobx-react'; import { TextSelection } from 'prosemirror-state'; +import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; import { Doc } from '../../../../fields/Doc'; import { StrCast } from '../../../../fields/Types'; import './DashFieldView.scss'; +import EquationEditor from './EquationEditor'; import { FormattedTextBox } from './FormattedTextBox'; -import * as React from 'react'; -import { AnyArray } from 'mongoose'; export class EquationView { dom: HTMLDivElement; // container for label and value diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index ad2fab8b0..8bf8abafa 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -11,6 +11,7 @@ import { keymap } from 'prosemirror-keymap'; import { Fragment, Mark, Node, Slice } from 'prosemirror-model'; import { EditorState, NodeSelection, Plugin, TextSelection, Transaction } from 'prosemirror-state'; import { EditorView } from 'prosemirror-view'; +import * as React from 'react'; import { BsMarkdownFill } from 'react-icons/bs'; import { DateField } from '../../../../fields/DateField'; import { Doc, DocListCast, Field, Opt } from '../../../../fields/Doc'; @@ -70,9 +71,8 @@ import { RichTextMenu, RichTextMenuPlugin } from './RichTextMenu'; import { RichTextRules } from './RichTextRules'; import { schema } from './schema_rts'; import { SummaryView } from './SummaryView'; -// import * as applyDevTools from 'prosemirror-dev-tools'; -import * as React from 'react'; export const GoogleRef = 'googleDocId'; +// import * as applyDevTools from 'prosemirror-dev-tools'; type PullHandler = (exportState: Opt, dataDoc: Doc) => void; export interface FormattedTextBoxProps {} diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 4881070fd..3b31f2d17 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -32,7 +32,7 @@ export class RichTextMenu extends AntimodeMenu { private _linkToRef = React.createRef(); layoutDoc: Doc | undefined; - @observable public view?: EditorView; + @observable public view?: EditorView = undefined; public editorProps: FieldViewProps | undefined; public _brushMap: Map> = new Map(); diff --git a/src/client/views/nodes/importBox/ImportElementBox.tsx b/src/client/views/nodes/importBox/ImportElementBox.tsx index 9dc0c5180..b573f7c48 100644 --- a/src/client/views/nodes/importBox/ImportElementBox.tsx +++ b/src/client/views/nodes/importBox/ImportElementBox.tsx @@ -1,13 +1,11 @@ import { computed } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { returnFalse } from '../../../../Utils'; import { Doc } from '../../../../fields/Doc'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue } from '../../../../Utils'; -import { Transform } from '../../../util/Transform'; import { ViewBoxBaseComponent } from '../../DocComponent'; -import { DefaultStyleProvider } from '../../StyleProvider'; -import { DocumentView, DocumentViewInternal } from '../DocumentView'; +import { DocumentView } from '../DocumentView'; import { FieldView, FieldViewProps } from '../FieldView'; -import * as React from 'react'; @observer export class ImportElementBox extends ViewBoxBaseComponent() { diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index e213b2fc5..0305689e7 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -1,8 +1,8 @@ -import * as React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { action, computed, IReactionDisposer, makeObservable, observable, ObservableSet, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, DocListCast, FieldResult, NumListCast, Opt, StrListCast } from '../../../../fields/Doc'; import { Animation } from '../../../../fields/DocSymbols'; import { Copy, Id } from '../../../../fields/FieldSymbols'; @@ -24,7 +24,7 @@ import { SerializationHelper } from '../../../util/SerializationHelper'; import { SettingsManager } from '../../../util/SettingsManager'; import { undoBatch, UndoManager } from '../../../util/UndoManager'; import { CollectionDockingView } from '../../collections/CollectionDockingView'; -import { CollectionFreeFormView, computeTimelineLayout, MarqueeViewBounds } from '../../collections/collectionFreeForm'; +import { CollectionFreeFormView, MarqueeViewBounds } from '../../collections/collectionFreeForm'; import { CollectionStackedTimeline } from '../../collections/CollectionStackedTimeline'; import { CollectionView } from '../../collections/CollectionView'; import { TreeView } from '../../collections/TreeView'; @@ -83,12 +83,12 @@ export class PresBox extends ViewBoxBaseComponent() { _batch: UndoManager.Batch | undefined = undefined; // undo batch for dragging sliders which generate multiple scene edit events as the cursor moves _keyTimer: NodeJS.Timeout | undefined; // timer for turning off transition flag when key frame change has completed. Need to clear this if you do a second navigation before first finishes, or else first timer can go off during second naviation. _unmounting = false; // flag that view is unmounting used to block RemFromMap from deleting things + _presTimer: NodeJS.Timeout | undefined; @observable public static Instance: PresBox; @observable _isChildActive = false; @observable _moveOnFromAudio: boolean = true; - @observable _presTimer!: NodeJS.Timeout; @observable _eleArray: HTMLElement[] = []; @observable _dragArray: HTMLElement[] = []; diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx index cf19ff6bc..5ea9e9979 100644 --- a/src/client/views/pdf/Annotation.tsx +++ b/src/client/views/pdf/Annotation.tsx @@ -1,18 +1,17 @@ -import * as React from 'react'; import { action, computed } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../fields/Types'; import { LinkFollower } from '../../util/LinkFollower'; +import { LinkManager } from '../../util/LinkManager'; import { undoBatch } from '../../util/UndoManager'; import { OpenWhere } from '../nodes/DocumentView'; import { FieldViewProps } from '../nodes/FieldView'; import { AnchorMenu } from './AnchorMenu'; import './Annotation.scss'; -import { LinkManager } from '../../util/LinkManager'; -import { Rect } from 'react-measure'; interface IAnnotationProps extends FieldViewProps { anno: Doc; diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx index db21d9a3d..da8a88803 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx +++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx @@ -1,20 +1,20 @@ -import * as React from 'react'; -import './GPTPopup.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Button, IconButton, Type } from 'browndash-components'; import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { CgClose } from 'react-icons/cg'; import ReactLoading from 'react-loading'; import { TypeAnimation } from 'react-type-animation'; +import { Utils } from '../../../../Utils'; import { Doc } from '../../../../fields/Doc'; -import { DocUtils, Docs } from '../../../documents/Documents'; -import { Button, IconButton, Type } from 'browndash-components'; import { NumCast, StrCast } from '../../../../fields/Types'; -import { CgClose } from 'react-icons/cg'; -import { AnchorMenu } from '../AnchorMenu'; -import { gptImageCall } from '../../../apis/gpt/GPT'; import { Networking } from '../../../Network'; -import { Utils } from '../../../../Utils'; +import { gptImageCall } from '../../../apis/gpt/GPT'; +import { DocUtils, Docs } from '../../../documents/Documents'; import { ObservableReactComponent } from '../../ObservableReactComponent'; +import { AnchorMenu } from '../AnchorMenu'; +import './GPTPopup.scss'; export enum GPTPopupMode { SUMMARY, diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index e342c25b3..b6d027d30 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -302,7 +302,7 @@ export class PDFViewer extends ObservableReactComponent { } }; - @observable private _scrollTimer: any; + @observable private _scrollTimer: any = undefined; onScroll = (e: React.UIEvent) => { if (this._mainCont.current && !this._forcedScroll) { diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index ccfccb771..14187833f 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -2,24 +2,23 @@ import { Tooltip } from '@mui/material'; import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Doc, DocListCast, DocListCastAsync, Field, Opt } from '../../../fields/Doc'; +import { Doc, DocListCastAsync, Field } from '../../../fields/Doc'; import { DirectLinks } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { DocCast, StrCast } from '../../../fields/Types'; -import { DocUtils } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; +import { DocUtils } from '../../documents/Documents'; import { DocumentManager } from '../../util/DocumentManager'; import { LinkManager } from '../../util/LinkManager'; +import { SearchUtil } from '../../util/SearchUtil'; +import { SettingsManager } from '../../util/SettingsManager'; import { undoBatch } from '../../util/UndoManager'; -import { CollectionDockingView } from '../collections/CollectionDockingView'; import { ViewBoxBaseComponent } from '../DocComponent'; +import { CollectionDockingView } from '../collections/CollectionDockingView'; +import { IRecommendation, Recommendation } from '../newlightbox/components'; +import { fetchRecommendations } from '../newlightbox/utils'; import { FieldView, FieldViewProps } from '../nodes/FieldView'; import './SearchBox.scss'; -import { fetchRecommendations } from '../newlightbox/utils'; -import { IRecommendation, Recommendation } from '../newlightbox/components'; -import { Colors } from '../global/globalEnums'; -import { SettingsManager } from '../../util/SettingsManager'; -import { SearchUtil } from '../../util/SearchUtil'; const DAMPENING_FACTOR = 0.9; const MAX_ITERATIONS = 25; diff --git a/src/client/views/selectedDoc/SelectedDocView.tsx b/src/client/views/selectedDoc/SelectedDocView.tsx index 39e778b76..daacb368b 100644 --- a/src/client/views/selectedDoc/SelectedDocView.tsx +++ b/src/client/views/selectedDoc/SelectedDocView.tsx @@ -1,14 +1,14 @@ -import * as React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ListBox } from 'browndash-components'; import { computed } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { emptyFunction } from '../../../Utils'; import { Doc } from '../../../fields/Doc'; import { StrCast } from '../../../fields/Types'; import { DocumentManager } from '../../util/DocumentManager'; -import { DocFocusOptions } from '../nodes/DocumentView'; -import { emptyFunction } from '../../../Utils'; import { SettingsManager } from '../../util/SettingsManager'; +import { DocFocusOptions } from '../nodes/DocumentView'; export interface SelectedDocViewProps { selectedDocs: Doc[]; diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index 0f3487cd1..575d5849e 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -16,15 +16,15 @@ import { ReportManager } from '../../util/reportManager/ReportManager'; import { ServerStats } from '../../util/ServerStats'; import { SettingsManager } from '../../util/SettingsManager'; import { SharingManager } from '../../util/SharingManager'; +import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { CollectionDockingView } from '../collections/CollectionDockingView'; import { CollectionLinearView } from '../collections/collectionLinear'; import { DashboardView } from '../DashboardView'; import { Colors } from '../global/globalEnums'; -import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView'; +import { DocumentViewInternal } from '../nodes/DocumentView'; import { DefaultStyleProvider } from '../StyleProvider'; import './TopBar.scss'; -import { SnappingManager } from '../../util/SnappingManager'; /** * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx index f1739a41a..94458563e 100644 --- a/src/client/views/webcam/DashWebRTCVideo.tsx +++ b/src/client/views/webcam/DashWebRTCVideo.tsx @@ -3,16 +3,15 @@ import { faPhoneSlash, faSync } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc } from '../../../fields/Doc'; import { InkTool } from '../../../fields/InkField'; +import { SnappingManager } from '../../util/SnappingManager'; import '../../views/nodes/WebBox.scss'; import { CollectionFreeFormDocumentViewProps } from '../nodes/CollectionFreeFormDocumentView'; -import { DocumentView } from '../nodes/DocumentView'; import { FieldView, FieldViewProps } from '../nodes/FieldView'; import './DashWebRTCVideo.scss'; import { hangup, initialize, refreshVideos } from './WebCamLogic'; -import * as React from 'react'; -import { SnappingManager } from '../../util/SnappingManager'; /** * This models the component that will be rendered, that can be used as a doc that will reflect the video cams. diff --git a/src/debug/Repl.tsx b/src/debug/Repl.tsx index b8081648f..a9f7c085f 100644 --- a/src/debug/Repl.tsx +++ b/src/debug/Repl.tsx @@ -1,13 +1,13 @@ +import { computed, observable } from 'mobx'; +import { observer } from 'mobx-react'; import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; -import { observer } from 'mobx-react'; -import { observable, computed } from 'mobx'; +import { DocServer } from '../client/DocServer'; +import { resolvedPorts } from '../client/util/CurrentUserUtils'; import { CompileScript } from '../client/util/Scripting'; -import { makeInterface } from '../fields/Schema'; import { ObjectField } from '../fields/ObjectField'; import { RefField } from '../fields/RefField'; -import { DocServer } from '../client/DocServer'; -import { resolvedPorts } from '../client/util/CurrentUserUtils'; +import { makeInterface } from '../fields/Schema'; @observer class Repl extends React.Component { diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx index 02038c426..f46adef77 100644 --- a/src/debug/Viewer.tsx +++ b/src/debug/Viewer.tsx @@ -1,19 +1,19 @@ -import { action, configure, observable, ObservableMap, Lambda } from 'mobx'; +import { action, configure, observable } from 'mobx'; +import { observer } from 'mobx-react'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { observer } from 'mobx-react'; -import { Doc, Field, FieldResult, Opt } from '../fields/Doc'; import { DocServer } from '../client/DocServer'; +import { resolvedPorts } from '../client/util/CurrentUserUtils'; +import { CompileScript } from '../client/util/Scripting'; +import { EditableView } from '../client/views/EditableView'; +import CursorField from '../fields/CursorField'; +import { DateField } from '../fields/DateField'; +import { Doc, Field, FieldResult } from '../fields/Doc'; import { Id } from '../fields/FieldSymbols'; import { List } from '../fields/List'; -import { URLField } from '../fields/URLField'; -import { EditableView } from '../client/views/EditableView'; -import { CompileScript } from '../client/util/Scripting'; import { RichTextField } from '../fields/RichTextField'; -import { DateField } from '../fields/DateField'; import { ScriptField } from '../fields/ScriptField'; -import CursorField from '../fields/CursorField'; -import { resolvedPorts } from '../client/util/CurrentUserUtils'; +import { URLField } from '../fields/URLField'; DateField; URLField; diff --git a/src/fields/CursorField.ts b/src/fields/CursorField.ts index 46f5a8e1c..84917ae53 100644 --- a/src/fields/CursorField.ts +++ b/src/fields/CursorField.ts @@ -1,8 +1,7 @@ -import { ObjectField } from './ObjectField'; -import { observable } from 'mobx'; +import { createSimpleSchema, object, serializable } from 'serializr'; import { Deserializable } from '../client/util/SerializationHelper'; -import { serializable, createSimpleSchema, object, date } from 'serializr'; -import { FieldChanged, ToScriptString, ToString, Copy } from './FieldSymbols'; +import { Copy, FieldChanged, ToScriptString, ToString } from './FieldSymbols'; +import { ObjectField } from './ObjectField'; export type CursorPosition = { x: number; diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 8903a9f97..9dc3c173d 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -265,8 +265,8 @@ export class Doc extends RefField { @observable public [DocAcl]: { [key: string]: symbol } = {}; @observable public [DocCss]: number = 0; // incrementer denoting a change to CSS layout @observable public [DirectLinks] = new ObservableSet(); - @observable public [AudioPlay]: any; // meant to store sound object from Howl - @observable public [Animation]: Opt; + @observable public [AudioPlay]: any = undefined; // meant to store sound object from Howl + @observable public [Animation]: Opt = undefined; @observable public [Highlight]: boolean = false; @observable public [Brushed]: boolean = false; @observable public [DocViews] = new ObservableSet(); diff --git a/src/fields/List.ts b/src/fields/List.ts index 8c8ff1ea3..b8ad552d2 100644 --- a/src/fields/List.ts +++ b/src/fields/List.ts @@ -2,7 +2,7 @@ import { action, computed, makeObservable, observable } from 'mobx'; import { alias, list, serializable } from 'serializr'; import { DocServer } from '../client/DocServer'; import { ScriptingGlobals } from '../client/util/ScriptingGlobals'; -import { afterDocDeserialize, autoObject, Deserializable } from '../client/util/SerializationHelper'; +import { Deserializable, afterDocDeserialize, autoObject } from '../client/util/SerializationHelper'; import { Field } from './Doc'; import { FieldTuples, Self, SelfProxy } from './DocSymbols'; import { Copy, FieldChanged, Parent, ToScriptString, ToString } from './FieldSymbols'; @@ -11,7 +11,7 @@ import { ProxyField } from './Proxy'; import { RefField } from './RefField'; import { listSpec } from './Schema'; import { Cast } from './Types'; -import { deleteProperty, getter, setter, containedFieldChangedHandler } from './util'; +import { containedFieldChangedHandler, deleteProperty, getter, setter } from './util'; function toObjectField(field: Field) { return field instanceof RefField ? new ProxyField(field) : field; @@ -102,8 +102,8 @@ class ListImpl extends ObjectField { items.length === 0 && deleteCount ? { op: '$remFromSet', items: removed, hint: { start, deleteCount }, length: list.__fieldTuples.length } : items.length && !deleteCount && start === list.__fieldTuples.length - ? { op: '$addToSet', items, length: list.__fieldTuples.length } - : undefined + ? { op: '$addToSet', items, length: list.__fieldTuples.length } + : undefined ); return res.map(toRealField); }), diff --git a/src/fields/Proxy.ts b/src/fields/Proxy.ts index c076f5fe1..3a46e3581 100644 --- a/src/fields/Proxy.ts +++ b/src/fields/Proxy.ts @@ -1,12 +1,12 @@ -import { Deserializable } from '../client/util/SerializationHelper'; -import { Field, FieldWaiting, Opt } from './Doc'; +import { action, computed, observable, runInAction } from 'mobx'; import { primitive, serializable } from 'serializr'; -import { observable, action, runInAction, computed } from 'mobx'; import { DocServer } from '../client/DocServer'; -import { RefField } from './RefField'; -import { ObjectField } from './ObjectField'; -import { Id, Copy, ToScriptString, ToString, ToValue } from './FieldSymbols'; import { scriptingGlobal } from '../client/util/ScriptingGlobals'; +import { Deserializable } from '../client/util/SerializationHelper'; +import { Field, FieldWaiting, Opt } from './Doc'; +import { Copy, Id, ToScriptString, ToString, ToValue } from './FieldSymbols'; +import { ObjectField } from './ObjectField'; +import { RefField } from './RefField'; function deserializeProxy(field: any) { if (!field.cache.field) { diff --git a/src/fields/util.ts b/src/fields/util.ts index 545fe4478..b73520999 100644 --- a/src/fields/util.ts +++ b/src/fields/util.ts @@ -1,11 +1,11 @@ import { $mobx, action, observable, runInAction, trace } from 'mobx'; import { computedFn } from 'mobx-utils'; +import { returnZero } from '../Utils'; import { DocServer } from '../client/DocServer'; import { LinkManager } from '../client/util/LinkManager'; import { SerializationHelper } from '../client/util/SerializationHelper'; import { UndoManager } from '../client/util/UndoManager'; -import { returnZero } from '../Utils'; -import { aclLevel, Doc, DocListCast, Field, FieldResult, HierarchyMapping, ReverseHierarchyMap, StrListCast, updateCachedAcls } from './Doc'; +import { Doc, DocListCast, Field, FieldResult, HierarchyMapping, ReverseHierarchyMap, StrListCast, aclLevel, updateCachedAcls } from './Doc'; import { AclAdmin, AclAugment, AclEdit, AclPrivate, DocAcl, DocData, DocLayout, FieldKeys, ForceServerWrite, Height, Initializing, SelfProxy, UpdatingFromServer, Width } from './DocSymbols'; import { FieldChanged, Id, Parent, ToValue } from './FieldSymbols'; import { List } from './List'; diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index d2598c2db..e333e6a2e 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -1,19 +1,19 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import * as rp from 'request-promise'; +import { Utils } from '../Utils'; import { DocServer } from '../client/DocServer'; -import { Docs } from '../client/documents/Documents'; import { Networking } from '../client/Network'; +import { Docs } from '../client/documents/Documents'; import { MainViewModal } from '../client/views/MainViewModal'; import { Doc, Opt } from '../fields/Doc'; import { List } from '../fields/List'; import { listSpec } from '../fields/Schema'; import { Cast } from '../fields/Types'; -import { Utils } from '../Utils'; import './ImageUpload.scss'; import { MobileInterface } from './MobileInterface'; -import * as React from 'react'; const { default: { DFLT_IMAGE_NATIVE_DIM } } = require('../client/views/global/globalCssVariables.module.scss'); // prettier-ignore export interface ImageUploadProps { Document: Doc; // Target document for upload (upload location) diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx index 2e595e4bc..23e19585a 100644 --- a/src/mobile/MobileInkOverlay.tsx +++ b/src/mobile/MobileInkOverlay.tsx @@ -1,6 +1,6 @@ -import * as React from 'react'; import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { DocServer } from '../client/DocServer'; import { DragManager } from '../client/util/DragManager'; import { Doc } from '../fields/Doc'; diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index bdd657575..e3d8f9394 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1,52 +1,33 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { - faTasks, - faReply, - faQuoteLeft, - faHandPointLeft, - faFolderOpen, + faAddressCard, + faAlignLeft, + faAlignRight, faAngleDoubleLeft, - faExternalLinkSquareAlt, - faMobile, - faThLarge, - faWindowClose, - faEdit, - faTrashAlt, - faPalette, faAngleRight, + faArrowDown, + faArrowLeft, + faArrowRight, + faArrowUp, + faArrowsAltH, + faAsterisk, + faBars, faBell, - faTrash, + faBolt, + faBook, + faBrain, + faBullseye, + faCalculator, faCamera, - faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, - faArrowsAltH, - faPlus, - faMinus, - faTerminal, - faToggleOn, - faFile as fileSolid, - faExternalLinkAlt, - faLocationArrow, - faSearch, - faFileDownload, - faStop, - faCalculator, - faWindowMaximize, - faAddressCard, - faQuestionCircle, - faArrowLeft, - faArrowRight, - faArrowDown, - faArrowUp, - faBolt, - faBullseye, faCaretUp, faCat, faCheck, + faChevronLeft, faChevronRight, faClipboard, faClone, @@ -54,76 +35,95 @@ import { faCommentAlt, faCompressArrowsAlt, faCut, + faEdit, faEllipsisV, faEraser, faExclamation, + faExpand, + faExternalLinkAlt, + faExternalLinkSquareAlt, + faEye, faFileAlt, faFileAudio, + faFileDownload, faFilePdf, faFilm, faFilter, + faFolderOpen, faFont, faGlobeAsia, + faHandPointLeft, faHighlighter, + faHome, + faImage, + faLocationArrow, + faLongArrowAltLeft, faLongArrowAltRight, faMicrophone, + faMinus, + faMobile, faMousePointer, faMusic, faObjectGroup, + faPaintBrush, + faPalette, faPause, faPen, faPenNib, faPhone, faPlay, + faPlus, faPortrait, + faQuestionCircle, + faQuoteLeft, faRedoAlt, + faReply, + faSearch, faStamp, faStickyNote, + faStop, + faTasks, + faTerminal, + faTh, + faThLarge, faThumbtack, + faTimes, + faToggleOn, + faTrash, + faTrashAlt, faTree, faTv, - faBook, faUndoAlt, faVideo, - faAsterisk, - faBrain, - faImage, - faPaintBrush, - faTimes, - faEye, - faHome, - faLongArrowAltLeft, - faBars, - faTh, - faChevronLeft, - faAlignRight, - faAlignLeft, + faWindowClose, + faWindowMaximize, + faFile as fileSolid, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Docs, DocumentOptions, DocUtils } from '../client/documents/Documents'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../Utils'; import { CollectionViewType, DocumentType } from '../client/documents/DocumentTypes'; +import { Docs, DocumentOptions } from '../client/documents/Documents'; import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; import { ScriptingGlobals } from '../client/util/ScriptingGlobals'; -import { SettingsManager, ColorScheme } from '../client/util/SettingsManager'; +import { SettingsManager } from '../client/util/SettingsManager'; import { Transform } from '../client/util/Transform'; import { UndoManager } from '../client/util/UndoManager'; -import { TabDocView } from '../client/views/collections/TabDocView'; import { GestureOverlay } from '../client/views/GestureOverlay'; +import { TabDocView } from '../client/views/collections/TabDocView'; import { AudioBox } from '../client/views/nodes/AudioBox'; import { DocumentView } from '../client/views/nodes/DocumentView'; -import { RichTextMenu } from '../client/views/nodes/formattedText/RichTextMenu'; import { RadialMenu } from '../client/views/nodes/RadialMenu'; +import { RichTextMenu } from '../client/views/nodes/formattedText/RichTextMenu'; import { Doc, DocListCast } from '../fields/Doc'; import { InkTool } from '../fields/InkField'; import { List } from '../fields/List'; import { ScriptField } from '../fields/ScriptField'; import { Cast, FieldValue, StrCast } from '../fields/Types'; -import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero } from '../Utils'; -import { Uploader } from './ImageUpload'; import './AudioUpload.scss'; +import { Uploader } from './ImageUpload'; import './ImageUpload.scss'; import './MobileInterface.scss'; diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts index 8f21966ae..d46977816 100644 --- a/src/typings/index.d.ts +++ b/src/typings/index.d.ts @@ -14,9 +14,7 @@ declare module 'pdfjs-dist/web/pdf_viewer'; declare module 'react-jsx-parser'; declare module 'express-flash'; -declare module 'connect-flash' { - interface flash {} -} +declare module 'connect-flash'; declare module 'connect-mongo'; declare module '@mui/material'; diff --git a/test/test.ts b/test/test.ts index 489aa3025..ee14a9340 100644 --- a/test/test.ts +++ b/test/test.ts @@ -1,37 +1,41 @@ import { expect } from 'chai'; import 'mocha'; const { JSDOM } = require('jsdom'); -const dom = new JSDOM("", { - url: `http://localhost:${resolvedPorts.server}` +const dom = new JSDOM('', { + url: `http://localhost:${resolvedPorts.server}`, }); (global as any).window = dom.window; - -import { autorun, reaction } from "mobx"; +import { reaction } from 'mobx'; +import { resolvedPorts } from '../src/client/util/CurrentUserUtils'; import { Doc } from '../src/fields/Doc'; +import { createSchema, defaultSpec, makeInterface } from '../src/fields/Schema'; import { Cast } from '../src/fields/Types'; -import { createSchema, makeInterface, defaultSpec } from '../src/fields/Schema'; import { ImageField } from '../src/fields/URLField'; -import { resolvedPorts } from '../src/client/util/CurrentUserUtils'; -describe("Document", () => { +describe('Document', () => { it('should hold fields', () => { - const key = "Test"; - const key2 = "Test2"; + const key = 'Test'; + const key2 = 'Test2'; const field = 15; const doc = new Doc(); doc[key] = field; - const getField = Cast(doc[key], "number"); - const getField2 = Cast(doc[key2], "number"); + const getField = Cast(doc[key], 'number'); + const getField2 = Cast(doc[key2], 'number'); expect(getField).to.equal(field); expect(getField2).to.equal(undefined); }); it('should update', () => { const doc = new Doc(); - const key = "Test"; - const key2 = "Test2"; + const key = 'Test'; + const key2 = 'Test2'; let ran = false; - reaction(() => doc[key], (field) => { ran = true; }); + reaction( + () => doc[key], + field => { + ran = true; + } + ); expect(ran).to.equal(false); doc[key2] = 4; @@ -44,55 +48,55 @@ describe("Document", () => { }); const testSchema1 = createSchema({ - a: "number", - b: "string", - c: "boolean", + a: 'number', + b: 'string', + c: 'boolean', d: ImageField, - e: Doc + e: Doc, }); type TestDoc = makeInterface<[typeof testSchema1]>; const TestDoc = makeInterface(testSchema1); const testSchema2 = createSchema({ - a: defaultSpec("boolean", true), - b: defaultSpec("number", 5), - c: defaultSpec("string", "hello world") + a: defaultSpec('boolean', true), + b: defaultSpec('number', 5), + c: defaultSpec('string', 'hello world'), }); type TestDoc2 = makeInterface<[typeof testSchema2]>; const TestDoc2 = makeInterface(testSchema2); const testSchema3 = createSchema({ - a: TestDoc2 + a: TestDoc2, }); type TestDoc3 = makeInterface<[typeof testSchema3]>; const TestDoc3 = makeInterface(testSchema3); -describe("Schema", () => { - it("should do the right thing 1", () => { - const test1 = new Doc; - const test2 = new Doc; - const ifield = new ImageField(new URL("http://google.com")); +describe('Schema', () => { + it('should do the right thing 1', () => { + const test1 = new Doc(); + const test2 = new Doc(); + const ifield = new ImageField(new URL('http://google.com')); test1.a = 5; - test1.b = "hello"; + test1.b = 'hello'; test1.c = true; test1.d = ifield; test1.e = test2; const doc = TestDoc(test1); expect(doc.a).to.equal(5); - expect(doc.b).to.equal("hello"); + expect(doc.b).to.equal('hello'); expect(doc.c).to.equal(true); expect(doc.d).to.equal(ifield); expect(doc.e).to.equal(test2); }); - it("should do the right thing 2", () => { - const test1 = new Doc; - const test2 = new Doc; - const ifield = new ImageField(new URL("http://google.com")); - test1.a = "hello"; + it('should do the right thing 2', () => { + const test1 = new Doc(); + const test2 = new Doc(); + const ifield = new ImageField(new URL('http://google.com')); + test1.a = 'hello'; test1.b = 5; test1.c = test2; test1.d = true; @@ -105,11 +109,11 @@ describe("Schema", () => { expect(doc.e).to.equal(undefined); }); - it("should do the right thing 3", () => { - const test1 = new Doc; - const test2 = new Doc; - const ifield = new ImageField(new URL("http://google.com")); - test1.a = "hello"; + it('should do the right thing 3', () => { + const test1 = new Doc(); + const test2 = new Doc(); + const ifield = new ImageField(new URL('http://google.com')); + test1.a = 'hello'; test1.b = 5; test1.c = test2; test1.d = true; @@ -122,40 +126,40 @@ describe("Schema", () => { expect(doc.e).to.equal(undefined); }); - it("should do the right thing 4", () => { + it('should do the right thing 4', () => { const doc = TestDoc2(); expect(doc.a).to.equal(true); expect(doc.b).to.equal(5); - expect(doc.c).to.equal("hello world"); + expect(doc.c).to.equal('hello world'); - const d2 = new Doc; + const d2 = new Doc(); d2.a = false; d2.b = 4; - d2.c = "goodbye"; + d2.c = 'goodbye'; const doc2 = TestDoc2(d2); expect(doc2.a).to.equal(false); expect(doc2.b).to.equal(4); - expect(doc2.c).to.equal("goodbye"); + expect(doc2.c).to.equal('goodbye'); - const d3 = new Doc; - d3.a = "hello"; + const d3 = new Doc(); + d3.a = 'hello'; d3.b = false; d3.c = 5; const doc3 = TestDoc2(d3); expect(doc3.a).to.equal(true); expect(doc3.b).to.equal(5); - expect(doc3.c).to.equal("hello world"); + expect(doc3.c).to.equal('hello world'); }); - it("should do the right thing 5", async () => { - const test1 = new Doc; - const test2 = new Doc; + it('should do the right thing 5', async () => { + const test1 = new Doc(); + const test2 = new Doc(); const doc = TestDoc3(test1); expect(doc.a).to.equal(undefined); test1.a = test2; const doc2 = (await doc.a)!; expect(doc2.a).to.equal(true); expect(doc2.b).to.equal(5); - expect(doc2.c).to.equal("hello world"); + expect(doc2.c).to.equal('hello world'); }); }); -- cgit v1.2.3-70-g09d2 From fdc0bf7c54af252178f587709630d36726484b91 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 2 Jan 2024 13:26:53 -0500 Subject: fixing more .props => ._props refernces. --- src/client/util/BranchingTrailManager.tsx | 2 +- src/client/util/CaptureManager.tsx | 2 +- src/client/util/DictationManager.ts | 8 +-- src/client/util/DragManager.ts | 2 +- src/client/util/GroupMemberView.tsx | 29 +++++---- src/client/util/SelectionManager.ts | 10 +-- src/client/util/SharingManager.tsx | 2 +- src/client/util/TrackMovements.ts | 4 +- src/client/views/DocComponent.tsx | 3 +- src/client/views/DocumentButtonBar.tsx | 74 +++------------------- src/client/views/DocumentDecorations.tsx | 10 +-- src/client/views/FilterPanel.tsx | 18 ++++-- src/client/views/InkStrokeProperties.ts | 2 +- src/client/views/PropertiesButtons.tsx | 6 +- src/client/views/StyleProvider.tsx | 2 +- src/client/views/TemplateMenu.tsx | 6 +- .../views/collections/CollectionCarousel3DView.tsx | 4 +- .../views/collections/CollectionCarouselView.tsx | 2 +- .../views/collections/CollectionDockingView.tsx | 2 +- src/client/views/collections/CollectionMenu.tsx | 4 +- .../views/collections/CollectionNoteTakingView.tsx | 2 +- .../views/collections/CollectionPileView.tsx | 4 +- .../collections/CollectionStackedTimeline.tsx | 2 +- src/client/views/collections/TreeView.tsx | 6 +- .../CollectionFreeFormLinkView.tsx | 4 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- .../collectionGrid/CollectionGridView.tsx | 72 ++++++++++----------- .../collectionMulticolumn/MulticolumnResizer.tsx | 11 +--- .../collectionMulticolumn/MultirowResizer.tsx | 11 +--- .../nodes/DataVizBox/components/LineChart.tsx | 6 +- .../views/nodes/DataVizBox/components/TableBox.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 16 ++--- src/client/views/nodes/MapBox/MapBox2.tsx | 34 +++++----- src/client/views/nodes/MapBox/MapPushpinBox.tsx | 4 +- .../views/nodes/MapboxMapBox/MapboxContainer.tsx | 54 ++++++++-------- .../nodes/PhysicsBox/PhysicsSimulationBox.tsx | 34 +++++----- .../views/nodes/RecordingBox/RecordingBox.tsx | 6 +- src/client/views/nodes/ScreenshotBox.tsx | 50 +++++++-------- src/client/views/nodes/ScriptingBox.tsx | 14 ++-- src/client/views/nodes/audio/AudioWaveform.tsx | 2 +- .../views/nodes/formattedText/DashDocView.tsx | 16 ++--- .../views/nodes/formattedText/EquationView.tsx | 4 +- .../views/nodes/formattedText/RichTextMenu.tsx | 16 ++--- .../views/nodes/importBox/ImportElementBox.tsx | 4 +- src/client/views/pdf/Annotation.tsx | 55 ++++++++-------- src/client/views/search/SearchBox.tsx | 10 +-- src/client/views/selectedDoc/SelectedDocView.tsx | 6 +- 47 files changed, 289 insertions(+), 350 deletions(-) (limited to 'src/client/util/CaptureManager.tsx') diff --git a/src/client/util/BranchingTrailManager.tsx b/src/client/util/BranchingTrailManager.tsx index 11f16493f..02879e3c4 100644 --- a/src/client/util/BranchingTrailManager.tsx +++ b/src/client/util/BranchingTrailManager.tsx @@ -54,7 +54,7 @@ export class BranchingTrailManager extends React.Component { @observable private docIdToDocMap: Map = new Map(); observeDocumentChange = (targetDoc: Doc, pres: PresBox) => { - const presId = pres.props.Document[Id]; + const presId = pres.Document[Id]; if (this.prevPresId === presId) { return; } diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx index c1e0a5b2e..2e13aff2f 100644 --- a/src/client/util/CaptureManager.tsx +++ b/src/client/util/CaptureManager.tsx @@ -84,7 +84,7 @@ export class CaptureManager extends React.Component<{}> { onClick={() => { const selected = SelectionManager.Views.slice(); SelectionManager.DeselectAll(); - selected.map(dv => dv.props.removeDocument?.(dv.props.Document)); + selected.map(dv => dv.props.removeDocument?.(dv.Document)); this.close(); }}> Cancel diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts index 039bb360e..82c63695c 100644 --- a/src/client/util/DictationManager.ts +++ b/src/client/util/DictationManager.ts @@ -290,7 +290,7 @@ export namespace DictationManager { if (!ctor) { return false; } - return Cast(Doc.GetProto(view.props.Document).data, ctor) !== undefined; + return Cast(Doc.GetProto(view.Document).data, ctor) !== undefined; }; const validate = (target: DocumentView, types: DocumentType[]) => { @@ -318,7 +318,7 @@ export namespace DictationManager { [ 'clear', { - action: (target: DocumentView) => (Doc.GetProto(target.props.Document).data = new List()), + action: (target: DocumentView) => (Doc.GetProto(target.Document).data = new List()), restrictTo: [DocumentType.COL], }, ], @@ -347,7 +347,7 @@ export namespace DictationManager { action: (target: DocumentView, matches: RegExpExecArray) => { const count = interpretNumber(matches[1]); const what = matches[2]; - const dataDoc = Doc.GetProto(target.props.Document); + const dataDoc = Doc.GetProto(target.Document); const fieldKey = 'data'; if (isNaN(count)) { return; @@ -372,7 +372,7 @@ export namespace DictationManager { expression: /view as (freeform|stacking|masonry|schema|tree)/g, action: (target: DocumentView, matches: RegExpExecArray) => { const mode = matches[1]; - mode && (target.props.Document._type_collection = mode); + mode && (target.Document._type_collection = mode); }, restrictTo: [DocumentType.COL], } diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index fe3a52be7..9ede18ed5 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -142,7 +142,7 @@ export namespace DragManager { this.linkSourceGetAnchor = linkSourceGetAnchor; } get dragDocument() { - return this.linkDragView.props.Document; + return this.linkDragView.Document; } linkSourceGetAnchor: () => Doc; linkSourceDoc?: Doc; diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx index 7de0f336f..894583711 100644 --- a/src/client/util/GroupMemberView.tsx +++ b/src/client/util/GroupMemberView.tsx @@ -19,35 +19,38 @@ interface GroupMemberViewProps { @observer export class GroupMemberView extends React.Component { @observable private memberSort: 'ascending' | 'descending' | 'none' = 'none'; + get group() { + return this.props.group; + } private get editingInterface() { - let members: string[] = this.props.group ? JSON.parse(StrCast(this.props.group.members)) : []; + let members: string[] = this.group ? JSON.parse(StrCast(this.group.members)) : []; members = this.memberSort === 'ascending' ? members.sort() : this.memberSort === 'descending' ? members.sort().reverse() : members; - const options: UserOptions[] = this.props.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.props.group.members)) as string[]).includes(option.value)) : []; + const options: UserOptions[] = this.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.group.members)) as string[]).includes(option.value)) : []; - const hasEditAccess = GroupManager.Instance.hasEditAccess(this.props.group); + const hasEditAccess = GroupManager.Instance.hasEditAccess(this.group); - return !this.props.group ? null : ( + return !this.group ? null : (
(this.props.group.title = e.currentTarget.value)} + value={StrCast(this.group.title || this.group.groupName)} + onChange={e => (this.group.title = e.currentTarget.value)} disabled={!hasEditAccess}>
- {GroupManager.Instance.hasEditAccess(this.props.group) ? ( + {GroupManager.Instance.hasEditAccess(this.group) ? (
diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx index ea99bff2e..c38c6dc4e 100644 --- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx +++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx @@ -18,12 +18,8 @@ interface ResizerProps { select: (isCtrlPressed: boolean) => void; } -const resizerOpacity = 1; - @observer export default class ResizeBar extends React.Component { - @observable private isHoverActive = false; - @observable private isResizingActive = false; private _resizeUndo?: UndoManager.Batch; @action @@ -35,7 +31,6 @@ export default class ResizeBar extends React.Component { window.removeEventListener('pointerup', this.onPointerUp); window.addEventListener('pointermove', this.onPointerMove); window.addEventListener('pointerup', this.onPointerUp); - this.isResizingActive = true; this._resizeUndo = UndoManager.StartBatch('multcol resizing'); }; @@ -80,8 +75,6 @@ export default class ResizeBar extends React.Component { @action private onPointerUp = () => { - this.isResizingActive = false; - this.isHoverActive = false; window.removeEventListener('pointermove', this.onPointerMove); window.removeEventListener('pointerup', this.onPointerUp); this._resizeUndo?.end(); @@ -96,9 +89,7 @@ export default class ResizeBar extends React.Component { pointerEvents: this.props.isContentActive?.() ? 'all' : 'none', width: this.props.width, backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor), - }} - onPointerEnter={action(() => (this.isHoverActive = true))} - onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}> + }}>
this.registerResizing(e)} />
); diff --git a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx index 7dee65e58..6f1b3b425 100644 --- a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx +++ b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx @@ -17,12 +17,8 @@ interface ResizerProps { toBottom?: Doc; } -const resizerOpacity = 1; - @observer export default class ResizeBar extends React.Component { - @observable private isHoverActive = false; - @observable private isResizingActive = false; private _resizeUndo?: UndoManager.Batch; @action @@ -33,7 +29,6 @@ export default class ResizeBar extends React.Component { window.removeEventListener('pointerup', this.onPointerUp); window.addEventListener('pointermove', this.onPointerMove); window.addEventListener('pointerup', this.onPointerUp); - this.isResizingActive = true; this._resizeUndo = UndoManager.StartBatch('multcol resizing'); }; @@ -78,8 +73,6 @@ export default class ResizeBar extends React.Component { @action private onPointerUp = () => { - this.isResizingActive = false; - this.isHoverActive = false; window.removeEventListener('pointermove', this.onPointerMove); window.removeEventListener('pointerup', this.onPointerUp); this._resizeUndo?.end(); @@ -94,9 +87,7 @@ export default class ResizeBar extends React.Component { pointerEvents: this.props.isContentActive?.() ? 'all' : 'none', height: this.props.height, backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor), - }} - onPointerEnter={action(() => (this.isHoverActive = true))} - onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}> + }}>
this.registerResizing(e)} />
); diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx index a69f083d1..50a8bf83d 100644 --- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx @@ -358,7 +358,7 @@ export class LineChart extends ObservableReactComponent { const selectedPt = this._currSelected ? `{ ${this._props.axes[0]}: ${this._currSelected.x} ${this._props.axes[1]}: ${this._currSelected.y} }` : 'none'; if (this._lineChartData.length > 0 || !this.parentViz || this.parentViz.length == 0) { return this._props.axes.length >= 2 && /\d/.test(this._props.records[0][this._props.axes[0]]) && /\d/.test(this._props.records[0][this._props.axes[1]]) ? ( -
+
{
) : null} diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index f127fecf3..5365fe1b2 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -169,7 +169,7 @@ export class TableBox extends ObservableReactComponent { return (
{ if (this._props.layoutDoc && e.key === 'a' && (e.ctrlKey || e.metaKey)) { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index f8f4b94a2..d07824099 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -881,7 +881,7 @@ export class DocumentViewInternal extends DocComponent this._rootSelected; panelHeight = () => this._props.PanelHeight() - this.headerMargin; - screenToLocal = () => this._props.ScreenToLocalTransform().translate(0, -this.headerMargin); + contentScreenToLocal = () => this._props.ScreenToLocalTransform().translate(0, -this.headerMargin); onClickFunc: any = () => (this.disableClickScriptFunc ? undefined : this.onClickHandler); setHeight = (height: number) => !this._props.suppressSetHeight && (this.layoutDoc._height = height); setContentView = action((view: { getAnchor?: (addAsAnnotation: boolean) => Doc; forward?: () => boolean; back?: () => boolean }) => (this._componentView = view)); @@ -925,7 +925,7 @@ export class DocumentViewInternal extends DocComponent { } @observable _selected = false; - public get SELECTED() { + public get IsSelected() { return this._selected; } - public set SELECTED(val) { + public set IsSelected(val) { runInAction(() => (this._selected = val)); } @observable public static LongPress = false; @@ -1431,9 +1431,9 @@ export class DocumentView extends ObservableReactComponent { return this._props.LayoutTemplateString?.includes('link_anchor_2') ? DocCast(this.Document['link_anchor_2']) : this._props.LayoutTemplateString?.includes('link_anchor_1') ? DocCast(this.Document['link_anchor_1']) : undefined; } @computed get hideLinkButton() { - return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.HideLinkBtn + (this.SELECTED ? ':selected' : '')); + return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.HideLinkBtn + (this.IsSelected ? ':selected' : '')); } - hideLinkCount = () => this._props.renderDepth === -1 || (this.SELECTED && this._props.renderDepth) || !this._isHovering || this.hideLinkButton; + hideLinkCount = () => this._props.renderDepth === -1 || (this.IsSelected && this._props.renderDepth) || !this._isHovering || this.hideLinkButton; @computed get linkCountView() { return ; } @@ -1568,9 +1568,9 @@ export class DocumentView extends ObservableReactComponent { layout_fitWidthFunc = (doc: Doc) => BoolCast(this.layout_fitWidth); scaleToScreenSpace = () => (1 / (this._props.NativeDimScaling?.() || 1)) * this.screenToLocalTransform().Scale; docViewPathFunc = () => this.docViewPath; - isSelected = () => this.SELECTED; + isSelected = () => this.IsSelected; select = (extendSelection: boolean, focusSelection?: boolean) => { - if (this.SELECTED && SelectionManager.Views.length > 1) SelectionManager.DeselectView(this); + if (this.IsSelected && SelectionManager.Views.length > 1) SelectionManager.DeselectView(this); else { SelectionManager.SelectView(this, extendSelection); if (focusSelection) { diff --git a/src/client/views/nodes/MapBox/MapBox2.tsx b/src/client/views/nodes/MapBox/MapBox2.tsx index 1dbbbb633..722a347f1 100644 --- a/src/client/views/nodes/MapBox/MapBox2.tsx +++ b/src/client/views/nodes/MapBox/MapBox2.tsx @@ -127,7 +127,7 @@ // private _ref: React.RefObject = React.createRef(); // componentDidMount() { -// this.props.setContentView?.(this); +// this._props.setContentView?.(this); // } // @action @@ -358,9 +358,9 @@ // e, // (e, down, delta) => // runInAction(() => { -// const localDelta = this.props +// const localDelta = this._props // .ScreenToLocalTransform() -// .scale(this.props.NativeDimScaling?.() || 1) +// .scale(this._props.NativeDimScaling?.() || 1) // .transformDirection(delta[0], delta[1]); // const fullWidth = NumCast(this.layoutDoc._width); // const mapWidth = fullWidth - this.sidebarWidth(); @@ -380,12 +380,12 @@ // ); // }; -// sidebarWidth = () => (Number(this.layout_sidebarWidthPercent.substring(0, this.layout_sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth(); +// sidebarWidth = () => (Number(this.layout_sidebarWidthPercent.substring(0, this.layout_sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth(); // @computed get layout_sidebarWidthPercent() { // return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); // } // @computed get sidebarColor() { -// return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.props.fieldKey + '_backgroundColor'], '#e4e4e4')); +// return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this._props.fieldKey + '_backgroundColor'], '#e4e4e4')); // } // /** @@ -444,7 +444,7 @@ // key="sidebar" // title="Toggle Sidebar" // style={{ -// display: !this.props.isContentActive() ? 'none' : undefined, +// display: !this._props.isContentActive() ? 'none' : undefined, // top: StrCast(this.layoutDoc._layout_showTitle) === 'title' ? 20 : 5, // backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK, // }} @@ -481,7 +481,7 @@ // }; // pointerEvents = () => { -// return this.props.isContentActive() === false ? 'none' : this.props.isContentActive() && this.props.pointerEvents?.() !== 'none' && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : SnappingManager.IsDragging ? undefined : 'none'; +// return this._props.isContentActive() === false ? 'none' : this._props.isContentActive() && this._props.pointerEvents?.() !== 'none' && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : SnappingManager.IsDragging ? undefined : 'none'; // }; // @computed get annotationLayer() { // return ( @@ -489,7 +489,7 @@ // {this.inlineTextAnnotations // .sort((a, b) => NumCast(a.y) - NumCast(b.y)) // .map(anno => ( -// +// // ))} //
// ); @@ -515,13 +515,13 @@ // // } // }; -// panelWidth = () => this.props.PanelWidth() / (this.props.NativeDimScaling?.() || 1) - this.sidebarWidth(); -// panelHeight = () => this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1); -// scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop)); -// transparentFilter = () => [...this.props.childFilters(), Utils.TransparentBackgroundFilter]; -// opaqueFilter = () => [...this.props.childFilters(), Utils.OpaqueBackgroundFilter]; -// infoWidth = () => this.props.PanelWidth() / 5; -// infoHeight = () => this.props.PanelHeight() / 5; +// panelWidth = () => this._props.PanelWidth() / (this._props.NativeDimScaling?.() || 1) - this.sidebarWidth(); +// panelHeight = () => this._props.PanelHeight() / (this._props.NativeDimScaling?.() || 1); +// scrollXf = () => this._props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop)); +// transparentFilter = () => [...this._props.childFilters(), Utils.TransparentBackgroundFilter]; +// opaqueFilter = () => [...this._props.childFilters(), Utils.OpaqueBackgroundFilter]; +// infoWidth = () => this._props.PanelWidth() / 5; +// infoHeight = () => this._props.PanelHeight() / 5; // anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick; // savedAnnotations = () => this._savedAnnotations; @@ -556,7 +556,7 @@ // .map(marker => ( // // () { } get mapBoxView() { - return this.props.DocumentView?.()?._props.docViewPath().lastElement()?.ComponentView as MapBox; + return this._props.DocumentView?.()?._props.docViewPath().lastElement()?.ComponentView as MapBox; } get mapBox() { - return this.props.DocumentView?.()._props.docViewPath().lastElement()?.Document; + return this._props.DocumentView?.()._props.docViewPath().lastElement()?.Document; } render() { diff --git a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx index 70037f29c..2c31bbab7 100644 --- a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx +++ b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx @@ -89,7 +89,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent runInAction(() => { - const localDelta = this.props + const localDelta = this._props .ScreenToLocalTransform() - .scale(this.props.NativeDimScaling?.() || 1) + .scale(this._props.NativeDimScaling?.() || 1) .transformDirection(delta[0], delta[1]); const fullWidth = NumCast(this.layoutDoc._width); const mapWidth = fullWidth - this.sidebarWidth(); @@ -183,7 +183,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent UndoManager.RunInBatch(this.toggleSidebar, 'toggle sidebar map') ); }; - sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth(); + sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth(); /** * Handles toggle of sidebar on click the little comment button @@ -195,7 +195,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent { if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) { - e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.Document; + e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this._props.Document; e.annoDragData.linkSourceDoc.followLinkZoom = false; } }, @@ -276,15 +276,15 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent this.addDocument(doc, annotationKey); - pointerEvents = () => (this.props.isContentActive() && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : 'none'); + pointerEvents = () => (this._props.isContentActive() && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : 'none'); - panelWidth = () => this.props.PanelWidth() / (this.props.NativeDimScaling?.() || 1) - this.sidebarWidth(); - panelHeight = () => this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1); - scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop)); - transparentFilter = () => [...this.props.childFilters(), Utils.TransparentBackgroundFilter]; - opaqueFilter = () => [...this.props.childFilters(), Utils.OpaqueBackgroundFilter]; - infoWidth = () => this.props.PanelWidth() / 5; - infoHeight = () => this.props.PanelHeight() / 5; + panelWidth = () => this._props.PanelWidth() / (this._props.NativeDimScaling?.() || 1) - this.sidebarWidth(); + panelHeight = () => this._props.PanelHeight() / (this._props.NativeDimScaling?.() || 1); + scrollXf = () => this._props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop)); + transparentFilter = () => [...this._props.childFilters(), Utils.TransparentBackgroundFilter]; + opaqueFilter = () => [...this._props.childFilters(), Utils.OpaqueBackgroundFilter]; + infoWidth = () => this._props.PanelWidth() / 5; + infoHeight = () => this._props.PanelHeight() / 5; anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick; savedAnnotations = () => this._savedAnnotations; @@ -399,9 +399,9 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent { - this.props.select(false); + this._props.select(false); this.deselectPin(); }; /* @@ -677,9 +677,9 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent ( {/* [this.props.PanelWidth(), this.props.PanelHeight()], this.setupSimulation, { fireImmediately: true }); + this._widthDisposer = reaction(() => [this._props.PanelWidth(), this._props.PanelHeight()], this.setupSimulation, { fireImmediately: true }); // Create walls this.wallPositions = [ { length: 100, xPos: 0, yPos: 0, angleInDegrees: 0 }, { length: 100, xPos: 0, yPos: 100, angleInDegrees: 0 }, { length: 100, xPos: 0, yPos: 0, angleInDegrees: 90 }, - { length: 100, xPos: (this.xMax / this.props.PanelWidth()) * 100, yPos: 0, angleInDegrees: 90 }, + { length: 100, xPos: (this.xMax / this._props.PanelWidth()) * 100, yPos: 0, angleInDegrees: 90 }, ]; } - componentDidUpdate(prevProps: Readonly>) { + componentDidUpdate(prevProps: Readonly) { super.componentDidUpdate(prevProps); - if (this.xMax !== this.props.PanelWidth() * 0.6 || this.yMax != this.props.PanelHeight()) { - this.xMax = this.props.PanelWidth() * 0.6; - this.yMax = this.props.PanelHeight(); + if (this.xMax !== this._props.PanelWidth() * 0.6 || this.yMax != this._props.PanelHeight()) { + this.xMax = this._props.PanelWidth() * 0.6; + this.yMax = this._props.PanelHeight(); this.setupSimulation(); } } @@ -632,7 +632,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent { - const length = (300 * this.props.PanelWidth()) / 1000; + const length = (300 * this._props.PanelWidth()) / 1000; const angle = 30; const x = length * Math.cos(((90 - angle) * Math.PI) / 180); const y = length * Math.sin(((90 - angle) * Math.PI) / 180); @@ -808,8 +808,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent
@@ -923,8 +923,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent
this.props.isContentActive() && e.stopPropagation()} - style={{ overflow: 'auto', height: `${Math.max(1, 800 / this.props.PanelWidth()) * 100}%`, transform: `scale(${Math.min(1, this.props.PanelWidth() / 850)})` }}> + onWheel={e => this._props.isContentActive() && e.stopPropagation()} + style={{ overflow: 'auto', height: `${Math.max(1, 800 / this._props.PanelWidth()) * 100}%`, transform: `scale(${Math.min(1, this._props.PanelWidth() / 850)})` }}>
{this.dataDoc.simulation_paused && this.simulationMode != 'Tutorial' && ( diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx index 658cfb1ca..c04a81f7d 100644 --- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx @@ -31,7 +31,7 @@ export class RecordingBox extends ViewBoxBaseComponent() { private _ref: React.RefObject = React.createRef(); componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentView?.(this); Doc.SetNativeWidth(this.dataDoc, 1280); Doc.SetNativeHeight(this.dataDoc, 720); } @@ -49,7 +49,7 @@ export class RecordingBox extends ViewBoxBaseComponent() { this.dataDoc[this.fieldKey + '_duration'] = this.videoDuration; this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey); - this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.client); + this.dataDoc[this._props.fieldKey] = new VideoField(this.result.accessPaths.client); this.dataDoc[this.fieldKey + '_recorded'] = true; // stringify the presentation and store it if (presentation?.movements) { @@ -135,7 +135,7 @@ export class RecordingBox extends ViewBoxBaseComponent() { @action public static addRecToWorkspace(value: RecordingBox) { let ffView = Array.from(DocumentManager.Instance.DocumentViews).find(view => view.ComponentView instanceof CollectionFreeFormView); - (ffView?.ComponentView as CollectionFreeFormView).props.addDocument?.(value.Document); + (ffView?.ComponentView as CollectionFreeFormView)._props.addDocument?.(value.Document); Doc.RemoveDocFromList(Doc.UserDoc(), 'workspaceRecordings', value.Document); Doc.RemFromMyOverlay(value.Document); Doc.UserDoc().currentRecording = undefined; diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index 79ed69cdd..36527c311 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -47,8 +47,8 @@ declare class MediaRecorder { // _mesh: any = undefined; // render() { -// const topLeft = [this.props.x, this.props.y]; -// const raised = this.props.raised; +// const topLeft = [this._props.x, this._props.y]; +// const raised = this._props.raised; // const find = (raised: { coord: Vector2, off: Vector3 }[], what: Vector2) => raised.find(r => r.coord.x === what.x && r.coord.y === what.y); // const tl1 = find(raised, new Vector2(topLeft[0], topLeft[1] + 1)); // const tl2 = find(raised, new Vector2(topLeft[0] + 1, topLeft[1] + 1)); @@ -69,11 +69,11 @@ declare class MediaRecorder { // const normals = new Float32Array(quad_normals); // const uvs = new Float32Array(quad_uvs); // Each vertex has one uv coordinate for texture mapping // const indices = new Uint32Array(quad_indices); // Use the four vertices to draw the two triangles that make up the square. -// const popOut = () => NumCast(this.props.Document.popOut); -// const popOff = () => NumCast(this.props.Document.popOff); +// const popOut = () => NumCast(this.Document.popOut); +// const popOff = () => NumCast(this.Document.popOff); // return ( // { -// this.props.setRaised([ +// this._props.setRaised([ // { coord: new Vector2(topLeft[0], topLeft[1]), off: new Vector3(-popOff(), -popOff(), popOut()) }, // { coord: new Vector2(topLeft[0] + 1, topLeft[1]), off: new Vector3(popOff(), -popOff(), popOut()) }, // { coord: new Vector2(topLeft[0], topLeft[1] + 1), off: new Vector3(-popOff(), popOff(), popOut()) }, @@ -99,7 +99,7 @@ declare class MediaRecorder { // r?.setAttribute('uv', new BufferAttribute(uvs, 2)); // r?.setIndex(new BufferAttribute(indices, 1)); // }} /> -// {!this._videoRef ? : +// {!this._videoRef ? : // // // } @@ -118,7 +118,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent ({ width: this.props.PanelWidth(), height: this.props.PanelHeight() }), + this._props.setContentView?.(this); // this tells the DocumentView that this ScreenshotBox is the "content" of the document. this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link. + // this.layoutDoc.videoWall && reaction(() => ({ width: this._props.PanelWidth(), height: this._props.PanelHeight() }), // ({ width, height }) => { // if (this._camera) { // const angle = -Math.abs(1 - width / height); @@ -201,7 +201,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent numberRange(this._numScreens).forEach(y => screens.push( // ))); - // return { + // return { // this._camera = props.camera; // props.camera.position.set(this._numScreens / 2, this._numScreens / 2, this._numScreens - 2); // props.camera.lookAt(this._numScreens / 2, this._numScreens / 2, 0); @@ -224,15 +224,15 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent { const [{ result }] = await Networking.UploadFilesToServer(aud_chunks.map((file: any) => ({ file }))); if (!(result instanceof Error)) { - this.dataDoc[this.props.fieldKey + '_audio'] = new AudioField(result.accessPaths.agnostic.client); + this.dataDoc[this._props.fieldKey + '_audio'] = new AudioField(result.accessPaths.agnostic.client); } }; this._videoRef!.srcObject = await (navigator.mediaDevices as any).getDisplayMedia({ video: true }); this._videoRec = new MediaRecorder(this._videoRef!.srcObject); const vid_chunks: any = []; this._videoRec.onstart = () => { - if (this.dataDoc[this.props.fieldKey + '_trackScreen']) TrackMovements.Instance.start(); - this.dataDoc[this.props.fieldKey + '_recordingStart'] = new DateField(new Date()); + if (this.dataDoc[this._props.fieldKey + '_trackScreen']) TrackMovements.Instance.start(); + this.dataDoc[this._props.fieldKey + '_recordingStart'] = new DateField(new Date()); }; this._videoRec.ondataavailable = (e: any) => vid_chunks.push(e.data); this._videoRec.onstop = async (e: any) => { @@ -252,7 +252,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent (NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], NumCast(this.layoutDoc._height)) / NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], NumCast(this.layoutDoc._width))) * this.props.PanelWidth(); - formattedPanelHeight = () => Math.max(0, this.props.PanelHeight() - this.videoPanelHeight()); + videoPanelHeight = () => (NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], NumCast(this.layoutDoc._height)) / NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], NumCast(this.layoutDoc._width))) * this._props.PanelWidth(); + formattedPanelHeight = () => Math.max(0, this._props.PanelHeight() - this.videoPanelHeight()); render() { TraceMobx(); return ( @@ -296,14 +296,14 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent
+ ScreenToLocalTransform={this._props.ScreenToLocalTransform} + renderDepth={this._props.renderDepth + 1}> <> {this.threed} {this.content} @@ -324,7 +324,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent {!(this.dataDoc[this.fieldKey + '_dictation'] instanceof Doc) ? null : ( )}
- {!this.props.isSelected() ? null : ( + {!this._props.isSelected() ? null : (
diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx index 8e506ec64..73ad3a004 100644 --- a/src/client/views/nodes/ScriptingBox.tsx +++ b/src/client/views/nodes/ScriptingBox.tsx @@ -60,7 +60,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent !p.startsWith('_')) @@ -116,7 +116,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent { @@ -294,7 +294,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent { const copy = Doc.MakeCopy(this.Document, true); copy.x = NumCast(this.Document.x) + NumCast(this.dataDoc._width); - this.props.addDocument?.(copy); + this._props.addDocument?.(copy); }; // adds option to create a copy to the context menu @@ -310,7 +310,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent (this.functionName = e.target.value)} placeholder="enter name here" value={this.functionName} />; return ( -
this.props.isSelected() && e.stopPropagation()}> +
this._props.isSelected() && e.stopPropagation()}>
@@ -687,7 +687,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent this.props.isSelected() && e.stopPropagation()}> +
this._props.isSelected() && e.stopPropagation()}>
{this.renderScriptingBox} {definedParameters} @@ -745,7 +745,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent this.props.isSelected() && e.stopPropagation()}> +
this._props.isSelected() && e.stopPropagation()}> {!this.compileParams.length || !this.paramsNames ? null : (
{this.paramsNames.map((parameter: string, i: number) => ( @@ -812,7 +812,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent -
this.props.isSelected() && e.stopPropagation()}> +
this._props.isSelected() && e.stopPropagation()}> {this._paramSuggestion ? (
{' '} diff --git a/src/client/views/nodes/audio/AudioWaveform.tsx b/src/client/views/nodes/audio/AudioWaveform.tsx index 3e46ff4e6..7fd799952 100644 --- a/src/client/views/nodes/audio/AudioWaveform.tsx +++ b/src/client/views/nodes/audio/AudioWaveform.tsx @@ -109,7 +109,7 @@ export class AudioWaveform extends ObservableReactComponent progressColor={Colors.MEDIUM_BLUE_ALT} progress={this._props.progress ?? 1} barWidth={200 / this.audioBuckets.length} - //gradientColors={this.props.gradientColors} + //gradientColors={this._props.gradientColors} peaks={this.audioBuckets} width={(this._props.PanelWidth ?? 0) * window.devicePixelRatio} height={this.waveHeight * window.devicePixelRatio} diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx index 1002ee403..5a13fa8b4 100644 --- a/src/client/views/nodes/formattedText/DashDocView.tsx +++ b/src/client/views/nodes/formattedText/DashDocView.tsx @@ -177,7 +177,7 @@ export class DashDocViewInternal extends React.Component { }; componentWillUnmount = () => Object.values(this._disposers).forEach(disposer => disposer?.()); - isContentActive = () => this.props.tbox.props.isSelected() || this.props.tbox.isAnyChildContentActive?.(); + isContentActive = () => this.props.tbox._props.isSelected() || this.props.tbox.isAnyChildContentActive?.(); render() { return !this._dashDoc || !this._finalLayout || this.props.hidden ? null : ( @@ -205,21 +205,21 @@ export class DashDocViewInternal extends React.Component { removeDocument={this.removeDoc} isDocumentActive={returnFalse} isContentActive={this.isContentActive} - styleProvider={this._textBox.props.styleProvider} - docViewPath={this._textBox.props.docViewPath} + styleProvider={this._textBox._props.styleProvider} + docViewPath={this._textBox._props.docViewPath} ScreenToLocalTransform={this.getDocTransform} - addDocTab={this._textBox.props.addDocTab} + addDocTab={this._textBox._props.addDocTab} pinToPres={returnFalse} - renderDepth={this._textBox.props.renderDepth + 1} + renderDepth={this._textBox._props.renderDepth + 1} PanelWidth={this._finalLayout[Width]} PanelHeight={this._finalLayout[Height]} focus={this.outerFocus} whenChildContentsActiveChanged={this.props.tbox.whenChildContentsActiveChanged} bringToFront={emptyFunction} dontRegisterView={false} - childFilters={this.props.tbox?.props.childFilters} - childFiltersByRanges={this.props.tbox?.props.childFiltersByRanges} - searchFilterDocs={this.props.tbox?.props.searchFilterDocs} + childFilters={this.props.tbox?._props.childFilters} + childFiltersByRanges={this.props.tbox?._props.childFiltersByRanges} + searchFilterDocs={this.props.tbox?._props.searchFilterDocs} />
); diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx index 7e655531e..b786c5ffb 100644 --- a/src/client/views/nodes/formattedText/EquationView.tsx +++ b/src/client/views/nodes/formattedText/EquationView.tsx @@ -65,8 +65,8 @@ export class EquationViewInternal extends React.Component constructor(props: any) { super(props); - this._fieldKey = this.props.fieldKey; - this._textBoxDoc = this.props.tbox.props.Document; + this._fieldKey = props.fieldKey; + this._textBoxDoc = props.tbox.Document; } componentWillUnmount() { diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 3b31f2d17..5858c3b11 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -186,7 +186,7 @@ export class RichTextMenu extends AntimodeMenu { // finds font sizes and families in selection getActiveAlignment() { - if (this.view && this.TextView?.props.rootSelected?.()) { + if (this.view && this.TextView?._props.rootSelected?.()) { const path = (this.view.state.selection.$from as any).path; for (let i = path.length - 3; i < path.length && i >= 0; i -= 3) { if (path[i]?.type === this.view.state.schema.nodes.paragraph || path[i]?.type === this.view.state.schema.nodes.heading) { @@ -199,7 +199,7 @@ export class RichTextMenu extends AntimodeMenu { // finds font sizes and families in selection getActiveListStyle() { - if (this.view && this.TextView?.props.rootSelected?.()) { + if (this.view && this.TextView?._props.rootSelected?.()) { const path = (this.view.state.selection.$from as any).path; for (let i = 0; i < path.length; i += 3) { if (path[i].type === this.view.state.schema.nodes.ordered_list) { @@ -219,7 +219,7 @@ export class RichTextMenu extends AntimodeMenu { const activeSizes = new Set(); const activeColors = new Set(); const activeHighlights = new Set(); - if (this.view && this.TextView?.props.rootSelected?.()) { + if (this.view && this.TextView?._props.rootSelected?.()) { const state = this.view.state; const pos = this.view.state.selection.$from; const marks: Mark[] = [...(state.storedMarks ?? [])]; @@ -254,7 +254,7 @@ export class RichTextMenu extends AntimodeMenu { //finds all active marks on selection in given group getActiveMarksOnSelection() { let activeMarks: MarkType[] = []; - if (!this.view || !this.TextView?.props.rootSelected?.()) return activeMarks; + if (!this.view || !this.TextView?._props.rootSelected?.()) return activeMarks; const markGroup = [schema.marks.noAutoLinkAnchor, schema.marks.strong, schema.marks.em, schema.marks.underline, schema.marks.strikethrough, schema.marks.superscript, schema.marks.subscript]; if (this.view.state.storedMarks) return this.view.state.storedMarks.map(mark => mark.type); @@ -447,7 +447,7 @@ export class RichTextMenu extends AntimodeMenu { this.layoutDoc && (this.layoutDoc.layout_centered = !this.layoutDoc.layout_centered); }; align = (view: EditorView, dispatch: any, alignment: 'left' | 'right' | 'center') => { - if (this.TextView?.props.rootSelected?.()) { + if (this.TextView?._props.rootSelected?.()) { var tr = view.state.tr; view.state.doc.nodesBetween(view.state.selection.from, view.state.selection.to, (node, pos, parent, index) => { if ([schema.nodes.paragraph, schema.nodes.heading].includes(node.type)) { @@ -581,7 +581,7 @@ export class RichTextMenu extends AntimodeMenu { return (this.view as any)?.TextView as FormattedTextBox; } get TextViewFieldKey() { - return this.TextView?.props.fieldKey; + return this.TextView?._props.fieldKey; } @action setActiveHighlight(color: string) { @@ -774,11 +774,11 @@ export class RichTextMenu extends AntimodeMenu { //
// {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size", action((val: string) => { // this.activeFontSize = val; - // SelectionManager.Views.map(dv => dv.props.Document._text_fontSize = val); + // SelectionManager.Views.map(dv => dv.Document._text_fontSize = val); // })), // this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family", action((val: string) => { // this.activeFontFamily = val; - // SelectionManager.Views.map(dv => dv.props.Document._text_fontFamily = val); + // SelectionManager.Views.map(dv => dv.Document._text_fontFamily = val); // })), //
, // this.createNodesDropdown(this.activeListType, this.listTypeOptions, "list type", () => ({})), diff --git a/src/client/views/nodes/importBox/ImportElementBox.tsx b/src/client/views/nodes/importBox/ImportElementBox.tsx index b573f7c48..1a92acea1 100644 --- a/src/client/views/nodes/importBox/ImportElementBox.tsx +++ b/src/client/views/nodes/importBox/ImportElementBox.tsx @@ -13,12 +13,12 @@ export class ImportElementBox extends ViewBoxBaseComponent() { return FieldView.LayoutString(ImportElementBox, fieldKey); } - screenToLocalXf = () => this.props.ScreenToLocalTransform().scale(1 * (this.props.NativeDimScaling?.() || 1)); + screenToLocalXf = () => this._props.ScreenToLocalTransform().scale(1 * (this._props.NativeDimScaling?.() || 1)); @computed get mainItem() { return (
Opt; } @observer -export class Annotation extends React.Component { +export class Annotation extends ObservableReactComponent { + constructor(props: any) { + super(props); + makeObservable(this); + } render() { return ( -
- {DocListCast(this.props.anno.text_inlineAnnotations).map(a => ( - +
+ {DocListCast(this._props.anno.text_inlineAnnotations).map(a => ( + ))}
); @@ -38,23 +43,23 @@ interface IRegionAnnotationProps extends IAnnotationProps { pointerEvents?: () => Opt; } @observer -class RegionAnnotation extends React.Component { +class RegionAnnotation extends ObservableReactComponent { private _mainCont: React.RefObject = React.createRef(); @computed get annoTextRegion() { - return Cast(this.props.document.annoTextRegion, Doc, null) || this.props.document; + return Cast(this._props.document.annoTextRegion, Doc, null) || this._props.document; } @undoBatch deleteAnnotation = () => { - const docAnnotations = DocListCast(this.props.dataDoc[this.props.fieldKey]); - this.props.dataDoc[this.props.fieldKey] = new List(docAnnotations.filter(a => a !== this.annoTextRegion)); + const docAnnotations = DocListCast(this._props.dataDoc[this._props.fieldKey]); + this._props.dataDoc[this._props.fieldKey] = new List(docAnnotations.filter(a => a !== this.annoTextRegion)); AnchorMenu.Instance.fadeOut(true); - this.props.select(false); + this._props.select(false); }; @undoBatch - pinToPres = () => this.props.pinToPres(this.annoTextRegion, {}); + pinToPres = () => this._props.pinToPres(this.annoTextRegion, {}); @undoBatch makeTargretToggle = () => (this.annoTextRegion.followLinkToggle = !this.annoTextRegion.followLinkToggle); @@ -65,7 +70,7 @@ class RegionAnnotation extends React.Component { const trail = DocCast(anchor.presentationTrail); if (trail) { Doc.ActivePresentation = trail; - this.props.addDocTab(trail, OpenWhere.replaceRight); + this._props.addDocTab(trail, OpenWhere.replaceRight); } }; @@ -94,9 +99,9 @@ class RegionAnnotation extends React.Component { }; @computed get linkHighlighted() { - for (const link of LinkManager.Instance.getAllDirectLinks(this.props.document)) { - const a1 = LinkManager.getOppositeAnchor(link, this.props.document); - if (a1 && Doc.GetBrushStatus(DocCast(a1.annotationOn, this.props.document))) return true; + for (const link of LinkManager.Instance.getAllDirectLinks(this._props.document)) { + const a1 = LinkManager.getOppositeAnchor(link, this._props.document); + if (a1 && Doc.GetBrushStatus(DocCast(a1.annotationOn, this._props.document))) return true; } } @@ -107,24 +112,24 @@ class RegionAnnotation extends React.Component { className="htmlAnnotation" ref={this._mainCont} onPointerEnter={action(() => { - Doc.BrushDoc(this.props.anno); - this.props.showInfo?.(this.props.anno); + Doc.BrushDoc(this._props.anno); + this._props.showInfo?.(this._props.anno); })} onPointerLeave={action(() => { - Doc.UnBrushDoc(this.props.anno); - this.props.showInfo?.(undefined); + Doc.UnBrushDoc(this._props.anno); + this._props.showInfo?.(undefined); })} onPointerDown={this.onPointerDown} onContextMenu={this.onContextMenu} style={{ - left: NumCast(this.props.document.x), - top: NumCast(this.props.document.y), - width: NumCast(this.props.document._width), - height: NumCast(this.props.document._height), + left: NumCast(this._props.document.x), + top: NumCast(this._props.document.y), + width: NumCast(this._props.document._width), + height: NumCast(this._props.document._height), opacity: brushed === Doc.DocBrushStatus.highlighted ? 0.5 : undefined, - pointerEvents: this.props.pointerEvents?.() as any, + pointerEvents: this._props.pointerEvents?.() as any, outline: brushed === Doc.DocBrushStatus.unbrushed && this.linkHighlighted ? 'solid 1px lightBlue' : undefined, - backgroundColor: brushed === Doc.DocBrushStatus.highlighted ? 'orange' : StrCast(this.props.document.backgroundColor), + backgroundColor: brushed === Doc.DocBrushStatus.highlighted ? 'orange' : StrCast(this._props.document.backgroundColor), }} /> ); diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 14187833f..4d29573d4 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -122,10 +122,10 @@ export class SearchBox extends ViewBoxBaseComponent() { @undoBatch makeLink = action((linkTo: Doc) => { - const linkFrom = this.props.linkCreateAnchor?.(); + const linkFrom = this._props.linkCreateAnchor?.(); if (linkFrom) { const link = DocUtils.MakeLink(linkFrom, linkTo, {}); - link && this.props.linkCreated?.(link); + link && this._props.linkCreated?.(link); } }); @@ -292,7 +292,7 @@ export class SearchBox extends ViewBoxBaseComponent() { const query = StrCast(this._searchString); Doc.SetSearchQuery(query); - if (!this.props.linkSearch) Array.from(this._results.keys()).forEach(doc => DocumentManager.Instance.getFirstDocumentView(doc)?.ComponentView?.search?.(this._searchString, undefined, true)); + if (!this._props.linkSearch) Array.from(this._results.keys()).forEach(doc => DocumentManager.Instance.getFirstDocumentView(doc)?.ComponentView?.search?.(this._searchString, undefined, true)); this._results.clear(); if (query) { @@ -375,13 +375,13 @@ export class SearchBox extends ViewBoxBaseComponent() { render() { var validResults = 0; - const isLinkSearch: boolean = this.props.linkSearch; + const isLinkSearch: boolean = this._props.linkSearch; const sortedResults = Array.from(this._results.entries()).sort((a, b) => (this._pageRanks.get(b[0]) ?? 0) - (this._pageRanks.get(a[0]) ?? 0)); // sorted by page rank const resultsJSX = Array(); - const fromDoc = this.props.linkFrom?.(); + const fromDoc = this._props.linkFrom?.(); sortedResults.forEach(result => { var className = 'searchBox-results-scroll-view-result'; diff --git a/src/client/views/selectedDoc/SelectedDocView.tsx b/src/client/views/selectedDoc/SelectedDocView.tsx index daacb368b..39e778b76 100644 --- a/src/client/views/selectedDoc/SelectedDocView.tsx +++ b/src/client/views/selectedDoc/SelectedDocView.tsx @@ -1,14 +1,14 @@ +import * as React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ListBox } from 'browndash-components'; import { computed } from 'mobx'; import { observer } from 'mobx-react'; -import * as React from 'react'; -import { emptyFunction } from '../../../Utils'; import { Doc } from '../../../fields/Doc'; import { StrCast } from '../../../fields/Types'; import { DocumentManager } from '../../util/DocumentManager'; -import { SettingsManager } from '../../util/SettingsManager'; import { DocFocusOptions } from '../nodes/DocumentView'; +import { emptyFunction } from '../../../Utils'; +import { SettingsManager } from '../../util/SettingsManager'; export interface SelectedDocViewProps { selectedDocs: Doc[]; -- cgit v1.2.3-70-g09d2