diff options
Diffstat (limited to 'src/client/views')
148 files changed, 3441 insertions, 3492 deletions
diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx index 303672d90..99dee6410 100644 --- a/src/client/views/AntimodeMenu.tsx +++ b/src/client/views/AntimodeMenu.tsx @@ -16,7 +16,7 @@ export abstract class AntimodeMenu<T extends AntimodeMenuProps> extends Observab protected _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); protected _dragging: boolean = false; - constructor(props: any) { + constructor(props: T) { super(props); makeObservable(this); } diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index 232362c5c..4aaf2d03b 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -38,7 +38,12 @@ background: whitesmoke; } -.contextMenu-item { +.contextMenuItem-Selected { + background: lightgoldenrodyellow; + border-style: none; +} + +.contextMenuItem { // width: 11vw; //10vw height: 25px; //2vh display: flex; //comment out to allow search icon to be inline with search text @@ -59,7 +64,7 @@ text-transform: uppercase; padding-right: 30px; - .contextMenu-item-background { + .contextMenuItem-background { width: 100%; height: 100%; position: absolute; @@ -69,13 +74,7 @@ filter: opacity(0); } - &:hover { - .contextMenu-item-background { - filter: opacity(0.2) !important; - } - } - - .contextMenu-item-icon-background { + .contextMenuItem-icon { pointer-events: all; background-color: transparent; width: 35px; @@ -103,6 +102,8 @@ letter-spacing: 1px; text-transform: uppercase; padding-right: 30px; + align-items: center; + align-self: center; } .contextMenu-item:hover { @@ -115,11 +116,6 @@ cursor: pointer; } -.contextMenu-itemSelected { - background: lightgoldenrodyellow; - border-style: none; -} - .contextMenu-group { // width: 11vw; //10vw height: 30px; //2vh @@ -145,23 +141,24 @@ padding-left: 5px; } -.contextMenu-inlineMenu { - // border-top: solid 1px; //TODO:glr clean -} - .contextMenu-description { margin-left: 5px; text-align: left; display: inline; //need this? } -.search-icon { +.contextMenu-search { margin: 10px; + display: flex; + .contextMenu-searchIcon { + margin-right: 5px; + } } -.search { +.contextMenu-searchInput { margin-left: 10px; padding-left: 10px; border: solid black 1px; border-radius: 5px; + width: 100%; } diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index d784a14b8..5edb5fc0d 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -2,17 +2,17 @@ /* eslint-disable react/jsx-props-no-spreading */ /* eslint-disable default-param-last */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { DivHeight, DivWidth } from '../../ClientUtils'; import { SnappingManager } from '../util/SnappingManager'; import './ContextMenu.scss'; -import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from './ContextMenuItem'; +import { ContextMenuItem, ContextMenuProps } from './ContextMenuItem'; import { ObservableReactComponent } from './ObservableReactComponent'; @observer -export class ContextMenu extends ObservableReactComponent<{}> { +export class ContextMenu extends ObservableReactComponent<{ noexpand?: boolean }> { // eslint-disable-next-line no-use-before-define static Instance: ContextMenu; @@ -39,7 +39,7 @@ export class ContextMenu extends ObservableReactComponent<{}> { @observable _mouseY: number = -1; @observable _shouldDisplay: boolean = false; - constructor(props: any) { + constructor(props: object) { super(props); makeObservable(this); ContextMenu.Instance = this; @@ -148,24 +148,24 @@ export class ContextMenu extends ObservableReactComponent<{}> { return wasOpen; }; - @computed get filteredItems(): (OriginalMenuProps | string[])[] { + @computed get filteredItems(): (ContextMenuProps | string[])[] { const searchString = this._searchString.toLowerCase().split(' '); const matches = (descriptions: string[]) => searchString.every(s => descriptions.some(desc => desc.toLowerCase().includes(s))); - const flattenItems = (items: ContextMenuProps[], groupFunc: (groupName: any) => string[]) => { - let eles: (OriginalMenuProps | string[])[] = []; + const flattenItems = (items: ContextMenuProps[], groupFunc: (groupName: string) => string[]) => { + let eles: (ContextMenuProps | string[])[] = []; - const leaves: OriginalMenuProps[] = []; + const leaves: ContextMenuProps[] = []; items.forEach(item => { const { description } = item; const path = groupFunc(description); - if ('subitems' in item) { + if (item.subitems) { const children = flattenItems(item.subitems, name => [...groupFunc(description), name]); if (children.length || matches(path)) { eles.push(path); eles = eles.concat(children); } } else if (matches(path)) { - leaves.push(item); + leaves.push(item as ContextMenuProps); } }); @@ -176,13 +176,13 @@ export class ContextMenu extends ObservableReactComponent<{}> { return flattenItems(this._items.slice(), name => [name]); } - @computed get flatItems(): OriginalMenuProps[] { - return this.filteredItems.filter(item => !Array.isArray(item)) as OriginalMenuProps[]; + @computed get flatItems(): ContextMenuProps[] { + return this.filteredItems.filter(item => !Array.isArray(item)) as ContextMenuProps[]; } @computed get menuItems() { if (!this._searchString) { - return this._items.map((item, ind) => <ContextMenuItem key={item.description + ind} {...item} noexpand={this.itemsNeedSearch ? true : (item as any).noexpand} closeMenu={this.closeMenu} />); + return this._items.map((item, ind) => <ContextMenuItem key={item.description + ind} {...item} noexpand={this.itemsNeedSearch ? true : item.noexpand} closeMenu={this.closeMenu} />); } return this.filteredItems.map((value, index) => Array.isArray(value) ? ( @@ -201,7 +201,7 @@ export class ContextMenu extends ObservableReactComponent<{}> { } @computed get itemsNeedSearch() { - return this._showSearch ? 1 : this._items.reduce((p, mi) => p + ((mi as any).noexpand ? 1 : (mi as any).subitems?.length || 1), 0) > 15; + return this._showSearch ? 1 : this._items.reduce((p, mi) => p + (mi.noexpand ? 1 : mi.subitems?.length || 1), 0) > 15; } _searchRef = React.createRef<HTMLInputElement>(); // bcz: we shouldn't need this, since we set autoFocus on the <input> tag, but for some reason we do... @@ -211,13 +211,15 @@ export class ContextMenu extends ObservableReactComponent<{}> { return ( <div className="contextMenu-cont" - ref={action((r: any) => { - if (r) { - this._width = DivWidth(r); - this._height = DivHeight(r); - } - this._searchRef.current?.focus(); - })} + ref={r => + runInAction(() => { + if (r) { + this._width = DivWidth(r); + this._height = DivHeight(r); + } + this._searchRef.current?.focus(); + }) + } style={{ display: this._display ? '' : 'none', left: this.pageX, @@ -226,22 +228,11 @@ export class ContextMenu extends ObservableReactComponent<{}> { color: SnappingManager.userColor, }}> {!this.itemsNeedSearch ? null : ( - <span className="search-icon"> - <span className="icon-background"> + <span className="contextMenu-search"> + <span className="contextMenu-searchIcon"> <FontAwesomeIcon icon="search" size="lg" /> </span> - <input - ref={this._searchRef} - style={{ color: 'black' }} - className="contextMenu-item contextMenu-description search" - type="text" - placeholder="Filter Menu..." - value={this._searchString} - onKeyDown={this.onKeyDown} - onChange={this.onChange} - // eslint-disable-next-line jsx-a11y/no-autofocus - autoFocus - /> + <input ref={this._searchRef} style={{ color: 'black' }} className="contextMenu-searchInput" type="text" placeholder="Filter Menu..." value={this._searchString} onKeyDown={this.onKeyDown} onChange={this.onChange} autoFocus /> </span> )} {this.menuItems} @@ -263,7 +254,7 @@ export class ContextMenu extends ObservableReactComponent<{}> { e.preventDefault(); } else if (e.key === 'Enter' || e.key === 'Tab') { const item = this.flatItems[this._selectedIndex]; - if (item) { + if (item.event) { item.event({ x: this.pageX, y: this.pageY }); } else { // if (this._searchString.startsWith(this._defaultPrefix)) { diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index eb1030eec..5b4eb704b 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -8,163 +8,91 @@ import { SnappingManager } from '../util/SnappingManager'; import { UndoManager } from '../util/UndoManager'; import { ObservableReactComponent } from './ObservableReactComponent'; -export interface OriginalMenuProps { +export interface ContextMenuProps { + icon: IconProp | JSX.Element; description: string; - event: (stuff?: any) => void; - undoable?: boolean; - icon: IconProp | JSX.Element; // maybe should be optional (icon?) - closeMenu?: () => void; -} - -export interface SubmenuProps { - description: string; - // eslint-disable-next-line no-use-before-define - subitems: ContextMenuProps[]; - noexpand?: boolean; addDivider?: boolean; - icon: IconProp; // maybe should be optional (icon?) closeMenu?: () => void; -} -export type ContextMenuProps = OriginalMenuProps | SubmenuProps; + subitems?: ContextMenuProps[]; + noexpand?: boolean; // whether to render the submenu items as a flyout from this item, or inline in place of this item + + undoable?: boolean; // whether to wrap the event callback in an UndoBatch or not + event?: (stuff?: unknown) => void; +} @observer export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps & { selected?: boolean }> { - @observable private _items: Array<ContextMenuProps> = []; - @observable private overItem = false; + static readonly HOVER_TIMEOUT = 100; + _hoverTimeout?: NodeJS.Timeout; + _overPosY = 0; + _overPosX = 0; + @observable _items: ContextMenuProps[] = []; + @observable _overItem = false; - constructor(props: any) { + constructor(props: ContextMenuProps & { selected?: boolean }) { super(props); makeObservable(this); } componentDidMount() { - runInAction(() => { - this._items.length = 0; - }); - if ((this._props as SubmenuProps)?.subitems) { - (this._props as SubmenuProps).subitems?.forEach(i => runInAction(() => this._items.push(i))); - } + runInAction(() => this._items.push(...(this._props.subitems ?? []))); } handleEvent = async (e: React.MouseEvent<HTMLDivElement>) => { - if ('event' in this._props) { + if (this._props.event) { this._props.closeMenu?.(); - const batch = this._props.undoable !== false ? UndoManager.StartBatch(`Click Menu item: ${this._props.description}`) : undefined; + const batch = this._props.undoable ? UndoManager.StartBatch(`Click Menu item: ${this._props.description}`) : undefined; await this._props.event({ x: e.clientX, y: e.clientY }); batch?.end(); } }; - currentTimeout?: any; - static readonly timeout = 300; - _overPosY = 0; - _overPosX = 0; + setOverItem = (over: boolean) => { + this._hoverTimeout = setTimeout( action(() => { this._overItem = over; }), ContextMenuItem.HOVER_TIMEOUT ); // prettier-ignore + }; + onPointerEnter = (e: React.MouseEvent) => { - if (this.currentTimeout) { - clearTimeout(this.currentTimeout); - this.currentTimeout = undefined; - } - if (this.overItem) { - return; - } + this._hoverTimeout && clearTimeout(this._hoverTimeout); this._overPosY = e.clientY; this._overPosX = e.clientX; - this.currentTimeout = setTimeout( - action(() => { - this.overItem = true; - }), - ContextMenuItem.timeout - ); + !this._overItem && this.setOverItem(true); }; onPointerLeave = () => { - if (this.currentTimeout) { - clearTimeout(this.currentTimeout); - this.currentTimeout = undefined; - } - if (!this.overItem) { - return; - } - this.currentTimeout = setTimeout( - action(() => { - this.overItem = false; - }), - ContextMenuItem.timeout - ); + this._hoverTimeout && clearTimeout(this._hoverTimeout); + this._overItem && this.setOverItem(false); }; - isJSXElement(val: any): val is JSX.Element { - return React.isValidElement(val); - } + renderItem = (submenu: JSX.Element[]) => { + const alignItems = this._overPosY < window.innerHeight / 3 ? 'flex-start' : this._overPosY > (window.innerHeight * 2) / 3 ? 'flex-end' : 'center'; + const marginTop = this._overPosY < window.innerHeight / 3 ? '20px' : this._overPosY > (window.innerHeight * 2) / 3 ? '-20px' : ''; + const marginLeft = window.innerWidth - this._overPosX - 50 > 0 ? '90%' : '20%'; - render() { - if ('event' in this._props) { - return ( - <div className={'contextMenu-item' + (this._props.selected ? ' contextMenu-itemSelected' : '')} onPointerDown={this.handleEvent}> - {this._props.icon ? <span className="contextMenu-item-icon-background">{this.isJSXElement(this._props.icon) ? this._props.icon : <FontAwesomeIcon icon={this._props.icon} size="sm" />}</span> : null} - <div className="contextMenu-description">{this._props.description.replace(':', '')}</div> - <div - className="contextMenu-item-background" - style={{ - background: SnappingManager.userColor, - }} - /> - </div> - ); - } - if ('subitems' in this._props) { - const where = !this.overItem ? '' : this._overPosY < window.innerHeight / 3 ? 'flex-start' : this._overPosY > (window.innerHeight * 2) / 3 ? 'flex-end' : 'center'; - const marginTop = !this.overItem ? '' : this._overPosY < window.innerHeight / 3 ? '20px' : this._overPosY > (window.innerHeight * 2) / 3 ? '-20px' : ''; + return ( + <div className={`contextMenuItem${this._props.selected ? '-Selected' : ''}`} // + onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave} onPointerDown={this.handleEvent} + style={{ alignItems, borderTop: this._props.addDivider ? 'solid 1px' : undefined }} + > + <div className="contextMenuItem-background" style={{ background: SnappingManager.userColor, filter: this._overItem ? 'opacity(0.2)' : '' }} /> + <span className="contextMenuItem-icon" style={{ alignItems: 'center', alignSelf: 'center' }}> + {React.isValidElement(this._props.icon) ? this._props.icon : this._props.icon ? <FontAwesomeIcon icon={this._props.icon as IconProp} size="sm" /> : null} + </span> + <div className="contextMenu-description"> {this._props.description} </div> + {!submenu.length ? null : ( + !this._overItem ? + <FontAwesomeIcon icon="angle-right" size="lg" style={{ position: 'absolute', right: '10px' }} /> : ( + <div className="contextMenu-subMenu-cont" style={{ marginLeft, marginTop, background: SnappingManager.userBackgroundColor }}> + {submenu} + </div> + ) + )} + </div> + ); // prettier-ignore + }; - // here - const submenu = !this.overItem ? null : ( - <div - className="contextMenu-subMenu-cont" - style={{ - marginLeft: window.innerWidth - this._overPosX - 50 > 0 ? '90%' : '20%', - marginTop, - background: SnappingManager.userBackgroundColor, - }}> - {this._items.map(prop => ( - <ContextMenuItem {...prop} key={prop.description} closeMenu={this._props.closeMenu} /> - ))} - </div> - ); - if (!(this._props as SubmenuProps).noexpand) { - return ( - <div className="contextMenu-inlineMenu"> - {this._items.map(prop => ( - <ContextMenuItem {...prop} key={prop.description} closeMenu={this._props.closeMenu} /> - ))} - </div> - ); - } - return ( - <div - className={'contextMenu-item' + (this._props.selected ? ' contextMenu-itemSelected' : '')} - style={{ alignItems: where, borderTop: this._props.addDivider ? 'solid 1px' : undefined }} - onMouseLeave={this.onPointerLeave} - onMouseEnter={this.onPointerEnter}> - {this._props.icon ? ( - <span className="contextMenu-item-icon-background" onMouseEnter={this.onPointerLeave} style={{ alignItems: 'center', alignSelf: 'center' }}> - <FontAwesomeIcon icon={this._props.icon} size="sm" /> - </span> - ) : null} - <div className="contextMenu-description" onMouseEnter={this.onPointerEnter} style={{ alignItems: 'center', alignSelf: 'center' }}> - {this._props.description} - <FontAwesomeIcon icon="angle-right" size="lg" style={{ position: 'absolute', right: '10px' }} /> - </div> - <div - className="contextMenu-item-background" - style={{ - background: SnappingManager.userColor, - }} - /> - {submenu} - </div> - ); - } - return null; + render() { + const submenu = this._items.map(prop => <ContextMenuItem {...prop} key={prop.description} closeMenu={this._props.closeMenu} />); + return this.props.event || this._props.noexpand ? this.renderItem(submenu) : <div className="contextMenu-inlineMenu">{submenu}</div>; } } diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx index b7383a37e..33e905a54 100644 --- a/src/client/views/DashboardView.tsx +++ b/src/client/views/DashboardView.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, ColorPicker, EditableText, Size, Type } from 'browndash-components'; import { action, computed, makeObservable, observable } from 'mobx'; @@ -46,7 +44,7 @@ export type DocConfig = { // DashboardView is the view with the dashboard previews, rendered when the app first loads @observer -export class DashboardView extends ObservableReactComponent<{}> { +export class DashboardView extends ObservableReactComponent<object> { public static _urlState: HistoryUtil.DocUrl; public static makeDocumentConfig(document: Doc, panelName?: string, width?: number, keyValue?: boolean) { return { @@ -82,7 +80,7 @@ export class DashboardView extends ObservableReactComponent<{}> { }); return doc; } - constructor(props: any) { + constructor(props: object) { super(props); makeObservable(this); } @@ -428,15 +426,15 @@ export class DashboardView extends ObservableReactComponent<{}> { const dashboardDoc = DashboardView.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: title }, id, 'row'); Doc.AddDocToList(Doc.MyHeaderBar, 'data', freeformDoc, undefined, undefined, true); + Doc.AddDocToList(Doc.MyDashboards, 'data', dashboardDoc); dashboardDoc.pane_count = 1; freeformDoc.embedContainer = dashboardDoc; dashboardDoc.myOverlayDocs = new List<Doc>(); - dashboardDoc.myPublishedDocs = new List<Doc>(); - - Doc.AddDocToList(Doc.MyDashboards, 'data', dashboardDoc); - - DashboardView.SetupDashboardTrails(dashboardDoc); - DashboardView.SetupDashboardCalendars(dashboardDoc); + dashboardDoc[DocData].myPublishedDocs = new List<Doc>(); + dashboardDoc[DocData].myTagCollections = new List<Doc>(); + dashboardDoc[DocData].myUniqueFaces = new List<Doc>(); + dashboardDoc[DocData].myTrails = DashboardView.SetupDashboardTrails(dashboardDoc); + dashboardDoc[DocData].myCalendars = DashboardView.SetupDashboardCalendars(dashboardDoc); // open this new dashboard Doc.ActiveDashboard = dashboardDoc; Doc.ActivePage = 'dashboard'; @@ -469,7 +467,7 @@ export class DashboardView extends ObservableReactComponent<{}> { }; const myCalendars = DocUtils.AssignScripts(Docs.Create.CalendarCollectionDocument([], reqdOpts)); // { treeView_ChildDoubleClick: 'openPresentation(documentView.rootDoc)' } - dashboardDoc.myCalendars = new PrefetchProxy(myCalendars); + return new PrefetchProxy(myCalendars); } public static SetupDashboardTrails(dashboardDoc: Doc) { @@ -515,12 +513,12 @@ export class DashboardView extends ObservableReactComponent<{}> { layout_explainer: 'All of the trails that you have created will appear here.', }; const myTrails = DocUtils.AssignScripts(Docs.Create.TreeDocument([], reqdOpts), { treeView_ChildDoubleClick: 'openPresentation(documentView.Document)' }); - dashboardDoc.myTrails = new PrefetchProxy(myTrails); const contextMenuScripts = [reqdBtnScript.onClick]; if (Cast(myTrails.contextMenuScripts, listSpec(ScriptField), null)?.length !== contextMenuScripts.length) { myTrails.contextMenuScripts = new List<ScriptField>(contextMenuScripts.map(script => ScriptField.MakeFunction(script)!)); } + return new PrefetchProxy(myTrails); } } diff --git a/src/client/views/DictationOverlay.tsx b/src/client/views/DictationOverlay.tsx index b242acdba..e33049d3b 100644 --- a/src/client/views/DictationOverlay.tsx +++ b/src/client/views/DictationOverlay.tsx @@ -17,7 +17,7 @@ export class DictationOverlay extends React.Component { // eslint-disable-next-line react/no-unused-class-component-methods public hasActiveModal = false; - constructor(props: any) { + constructor(props: object) { super(props); makeObservable(this); DictationOverlay.Instance = this; diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index e5752dcd2..e351e2dec 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -93,7 +93,7 @@ export function ViewBoxBaseComponent<P extends FieldViewProps>() { * This is the unique data repository for a dcoument that stores the intrinsic document data */ @computed get dataDoc() { - return this.Document.isTemplateForField || this.Document.isTemplateDoc ? this._props.TemplateDataDocument ?? this.Document[DocData] : this.Document[DocData]; + return this.Document.isTemplateForField || this.Document.isTemplateDoc ? (this._props.TemplateDataDocument ?? this.Document[DocData]) : this.Document[DocData]; } /** @@ -151,7 +151,7 @@ export function ViewBoxAnnotatableComponent<P extends FieldViewProps>() { * This is the unique data repository for a dcoument that stores the intrinsic document data */ @computed get dataDoc() { - return this.Document.isTemplateForField || this.Document.isTemplateDoc ? this._props.TemplateDataDocument ?? this.Document[DocData] : this.Document[DocData]; + return this.Document.isTemplateForField || this.Document.isTemplateDoc ? (this._props.TemplateDataDocument ?? this.Document[DocData]) : this.Document[DocData]; } /** diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index c61ebfb4c..f1820cdd1 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -1,6 +1,3 @@ -/* eslint-disable jsx-a11y/control-has-associated-label */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { IconLookup, IconProp } from '@fortawesome/fontawesome-svg-core'; import { faCalendarDays } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -20,7 +17,7 @@ import { DictationManager } from '../util/DictationManager'; import { DragManager } from '../util/DragManager'; import { dropActionType } from '../util/DropActionTypes'; import { SharingManager } from '../util/SharingManager'; -import { UndoManager, undoBatch } from '../util/UndoManager'; +import { UndoManager, undoable } from '../util/UndoManager'; import './DocumentButtonBar.scss'; import { ObservableReactComponent } from './ObservableReactComponent'; import { PinProps } from './PinFuncs'; @@ -34,12 +31,12 @@ import { DashFieldView } from './nodes/formattedText/DashFieldView'; import { DocData } from '../../fields/DocSymbols'; @observer -export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (DocumentView | undefined)[]; stack?: any }> { +export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (DocumentView | undefined)[]; stack?: unknown }> { private _dragRef = React.createRef<HTMLDivElement>(); // eslint-disable-next-line no-use-before-define public static Instance: DocumentButtonBar; - constructor(props: any) { + constructor(props: { views: () => (DocumentView | undefined)[]; stack?: unknown }) { super(props); makeObservable(this); DocumentButtonBar.Instance = this; @@ -84,7 +81,7 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( <div className="documentButtonBar-icon documentButtonBar-follow" style={{ backgroundColor: followLink ? Colors.LIGHT_BLUE : Colors.DARK_GRAY, color: followLink ? Colors.BLACK : Colors.WHITE }} - onClick={undoBatch(() => this._props.views().map(view => view?.toggleFollowLink(undefined, false)))}> + onClick={undoable(() => this._props.views().map(view => view?.toggleFollowLink(undefined, false)), 'follow link')}> <div className="documentButtonBar-followTypes"> {followBtn( true, diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index f3b4013f7..6ee492d28 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,3 +1,4 @@ +import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { IconButton } from 'browndash-components'; @@ -146,7 +147,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora titleEntered = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { e.stopPropagation(); - (e.target as any).blur(); + (e.target as HTMLElement).blur?.(); } }; @@ -240,7 +241,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora } }); if (!this._iconifyBatch) { - (document.activeElement as any).blur?.(); + (document.activeElement as HTMLElement).blur?.(); this._iconifyBatch = UndoManager.StartBatch(forceDeleteOrIconify ? 'delete selected docs' : 'iconifying'); } else { // eslint-disable-next-line no-param-reassign @@ -255,7 +256,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora setupMoveUpEvents(this, e, () => DragManager.StartWindowDrag?.(e, [DocumentView.SelectedDocs().lastElement()]) ?? false, emptyFunction, this.onMaximizeClick, false, false); e.stopPropagation(); }; - onMaximizeClick = (e: any): void => { + onMaximizeClick = (e: PointerEvent): void => { const selView = DocumentView.Selected()[0]; if (selView) { if (e.ctrlKey) { @@ -350,8 +351,10 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora setupMoveUpEvents( this, e, - (moveEv: PointerEvent, down: number[], delta: number[]) => // return false to keep getting events - this.setRotateCenter(seldocview, [this.rotCenter[0] + delta[0], this.rotCenter[1] + delta[1]]) as any as boolean, + (moveEv: PointerEvent, down: number[], delta: number[]) => { + this.setRotateCenter(seldocview, [this.rotCenter[0] + delta[0], this.rotCenter[1] + delta[1]]); + return false; + }, action(() => { this._isRotating = false; }), // upEvent action(() => { seldocview.Document._rotation_centerX = seldocview.Document._rotation_centerY = 0; }), true @@ -431,7 +434,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction); e.stopPropagation(); const id = (this._resizeHdlId = e.currentTarget.className); - const pad = id.includes('Left') || id.includes('Right') ? Number(getComputedStyle(e.target as any).width.replace('px', '')) / 2 : 0; + const pad = id.includes('Left') || id.includes('Right') ? Number(getComputedStyle(e.target as HTMLElement).width?.replace('px', '')) / 2 : 0; const bounds = e.currentTarget.getBoundingClientRect(); this._offset = { x: id.toLowerCase().includes('left') ? bounds.right - e.clientX - pad : bounds.left - e.clientX + pad, // @@ -479,7 +482,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora const scaleAspect = {x:scale.x === 1 && hasFixedAspect ? scale.y : scale.x, y: scale.x !== 1 && hasFixedAspect ? scale.x : scale.y}; DocumentView.Selected().forEach(docView => this.resizeView(docView, refPt, scaleAspect, { dragHdl, ctrlKey:e.ctrlKey })); // prettier-ignore - await new Promise<any>(res => { setTimeout(() => { res(this._interactionLock = undefined)})}); + await new Promise<void>(res => { setTimeout(() => { res(this._interactionLock = undefined)})}); }); // prettier-ignore return false; @@ -683,10 +686,10 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora const collectionAcl = docView.containerViewPath?.()?.lastElement() ? GetEffectiveAcl(docView.containerViewPath?.().lastElement().dataDoc) : AclEdit; return collectionAcl !== AclAdmin && collectionAcl !== AclEdit && GetEffectiveAcl(docView.Document) !== AclAdmin; }); - const topBtn = (key: string, icon: string, pointerDown: undefined | ((e: React.PointerEvent) => void), click: undefined | ((e: any) => void), title: string) => ( + const topBtn = (key: string, icon: IconProp, pointerDown: undefined | ((e: React.PointerEvent) => void), click: undefined | ((e: PointerEvent) => void), title: string) => ( <Tooltip key={key} title={<div className="dash-tooltip">{title}</div>} placement="top"> - <div className={`documentDecorations-${key}Button`} onContextMenu={e => e.preventDefault()} onPointerDown={pointerDown ?? (e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, clickEv => click!(clickEv)))}> - <FontAwesomeIcon icon={icon as any} /> + <div className={`documentDecorations-${key}Button`} onContextMenu={e => e.preventDefault()} onPointerDown={pointerDown ?? (e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, clickEv => click?.(clickEv)))}> + <FontAwesomeIcon icon={icon} /> </div> </Tooltip> ); diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 684b948af..23da5a666 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -1,10 +1,7 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { action, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import * as Autosuggest from 'react-autosuggest'; -import { ObjectField } from '../../fields/ObjectField'; import './EditableView.scss'; import { DocumentIconContainer } from './nodes/DocumentIcon'; import { FieldView, FieldViewProps } from './nodes/FieldView'; @@ -29,7 +26,7 @@ export interface EditableProps { /** * The contents to render when not editing */ - contents: any; + contents: JSX.Element | string; fieldContents?: FieldViewProps; fontStyle?: string; fontSize?: number; @@ -41,8 +38,8 @@ export interface EditableProps { autosuggestProps?: { resetValue: () => void; value: string; - onChange: (e: React.ChangeEvent, { newValue }: { newValue: string }) => void; - autosuggestProps: Autosuggest.AutosuggestProps<string, any>; + onChange: (e: React.FormEvent, { newValue }: { newValue: string }) => void; + autosuggestProps: Autosuggest.AutosuggestProps<string, unknown>; }; oneLine?: boolean; // whether to display the editable view as a single input line or as a textarea allowCRs?: boolean; // can carriage returns be entered @@ -112,8 +109,8 @@ export class EditableView extends ObservableReactComponent<EditableProps> { } onChange = (e: React.ChangeEvent) => { - const targVal = (e.target as any).value; - if (!(targVal.startsWith(':=') || targVal.startsWith('='))) { + const targVal = (e.target as HTMLSelectElement).value; + if (!(targVal?.startsWith(':=') || targVal?.startsWith('='))) { this._overlayDisposer?.(); this._overlayDisposer = undefined; } else if (!this._overlayDisposer) { @@ -230,13 +227,11 @@ export class EditableView extends ObservableReactComponent<EditableProps> { className: 'editableView-input', onKeyDown: this.onKeyDown, autoFocus: true, - // @ts-ignore - onBlur: e => this.finalizeEdit(e.currentTarget.value, false, true, false), + onBlur: e => this.finalizeEdit((e.currentTarget as HTMLSelectElement).value, false, true, false), onPointerDown: this.stopPropagation, onClick: this.stopPropagation, onPointerUp: this.stopPropagation, value: this._props.autosuggestProps.value, - // @ts-ignore onChange: this._props.autosuggestProps.onChange, }} /> @@ -248,7 +243,6 @@ export class EditableView extends ObservableReactComponent<EditableProps> { placeholder={this._props.placeholder} onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)} defaultValue={this._props.GetValue()} - // eslint-disable-next-line jsx-a11y/no-autofocus autoFocus onChange={this.onChange} onKeyDown={this.onKeyDown} @@ -264,7 +258,6 @@ export class EditableView extends ObservableReactComponent<EditableProps> { placeholder={this._props.placeholder} onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)} defaultValue={this._props.GetValue()} - // eslint-disable-next-line jsx-a11y/no-autofocus autoFocus onChange={this.onChange} onKeyDown={this.onKeyDown} @@ -288,7 +281,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> { ); } setTimeout(() => this._props.autosuggestProps?.resetValue()); - return this._props.contents instanceof ObjectField ? null : ( + return ( <div className={`editableView-container-editing${this._props.oneLine ? '-oneLine' : ''}`} ref={this._ref} @@ -308,10 +301,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> { fontStyle: this._props.fontStyle, fontSize: this._props.fontSize, }}> - { - // eslint-disable-next-line react/jsx-props-no-spreading - this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : '' - } + {this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : (this._props.contents ?? '')} </span> </div> ); diff --git a/src/client/views/ExtractColors.ts b/src/client/views/ExtractColors.ts index f6928c52a..eee1d3a04 100644 --- a/src/client/views/ExtractColors.ts +++ b/src/client/views/ExtractColors.ts @@ -126,7 +126,7 @@ export class ExtractColors { let hue = 0; let saturation = 0; - let lightness = intensity; + const lightness = intensity; if (area !== 0) { saturation = area / (1 - Math.abs(2 * intensity - 1)); diff --git a/src/client/views/FieldsDropdown.tsx b/src/client/views/FieldsDropdown.tsx index 0ea0ebd83..407031b40 100644 --- a/src/client/views/FieldsDropdown.tsx +++ b/src/client/views/FieldsDropdown.tsx @@ -29,7 +29,7 @@ interface fieldsDropdownProps { @observer export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps> { @observable _newField = ''; - constructor(props: any) { + constructor(props: fieldsDropdownProps) { super(props); makeObservable(this); } @@ -101,13 +101,13 @@ export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps }), }} placeholder={typeof this._props.placeholder === 'string' ? this._props.placeholder : this._props.placeholder?.()} - options={options as any} + options={options} isMulti={false} - onChange={val => this._props.selectFunc((val as any as { value: string; label: string }).value)} + onChange={val => this._props.selectFunc((val as { value: string; label: string }).value)} onKeyDown={e => { if (e.key === 'Enter') { runInAction(() => { - this._props.selectFunc((this._newField = (e.nativeEvent.target as any)?.value)); + this._props.selectFunc((this._newField = (e.nativeEvent.target as HTMLSelectElement)?.value)); }); } e.stopPropagation(); diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx index ca4e4df84..e15285007 100644 --- a/src/client/views/FilterPanel.tsx +++ b/src/client/views/FilterPanel.tsx @@ -1,6 +1,4 @@ /* eslint-disable react/jsx-props-no-spreading */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { action, computed, makeObservable, observable, ObservableMap } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -54,7 +52,7 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { public static Instance: FilterPanel; - constructor(props: any) { + constructor(props: filterProps) { super(props); makeObservable(this); FilterPanel.Instance = this; @@ -68,7 +66,7 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { } @computed get targetDocChildKey() { const targetView = DocumentView.getFirstDocumentView(this.Document); - return targetView?.ComponentView?.annotationKey ?? targetView?.ComponentView?.fieldKey ?? 'data'; + return targetView?.ComponentView?.annotationKey || (targetView?.ComponentView?.fieldKey ?? 'data'); } @computed get targetDocChildren() { return [...DocListCast(this.Document?.[this.targetDocChildKey] || Doc.ActiveDashboard?.data), ...DocListCast(this.Document[Doc.LayoutFieldKey(this.Document) + '_sidebar'])]; @@ -340,7 +338,7 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { {Array.from(this.activeRenderedFacetInfos.keys()).map( // iterate over activeFacetRenderInfos ==> renderInfo which you can renderInfo.facetHeader renderInfo => ( - <div> + <div key={renderInfo.facetHeader}> <div className="filterBox-facetHeader"> <div className="filterBox-facetHeader-Header"> </div> {renderInfo.facetHeader.charAt(0).toUpperCase() + renderInfo.facetHeader.slice(1)} @@ -417,7 +415,7 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { return this.facetValues(facetHeader).map(fval => { const facetValue = fval; return ( - <div> + <div key={facetValue}> <input style={{ width: 20, marginLeft: 20 }} checked={['check', 'exists'].includes( @@ -452,7 +450,7 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { <div className="slider-handles"> {handles.map(handle => ( // const value = i === 0 ? defaultValues[0] : defaultValues[1]; - <div> + <div key={handle.id}> <Handle key={handle.id} handle={handle} domain={domain} isActive={handle.id === activeHandleID} getHandleProps={getHandleProps} /> </div> ))} diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index e3e252593..3a2738c3b 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -2,9 +2,9 @@ import * as fitCurve from 'fit-curve'; import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, setupMoveUpEvents } from '../../ClientUtils'; +import { returnEmptyFilter, returnEmptyString, returnFalse, setupMoveUpEvents } from '../../ClientUtils'; import { emptyFunction } from '../../Utils'; -import { Doc, Opt } from '../../fields/Doc'; +import { Doc, Opt, returnEmptyDoclist } from '../../fields/Doc'; import { InkData, InkField, InkTool } from '../../fields/InkField'; import { NumCast } from '../../fields/Types'; import { @@ -21,15 +21,14 @@ import { SetActiveInkColor, SetActiveInkWidth, } from './nodes/DocumentView'; -// import MobileInkOverlay from '../../mobile/MobileInkOverlay'; import { Gestures } from '../../pen-gestures/GestureTypes'; import { GestureUtils } from '../../pen-gestures/GestureUtils'; -// import { MobileInkOverlayContent } from '../../server/Message'; import { InteractionUtils } from '../util/InteractionUtils'; import { ScriptingGlobals } from '../util/ScriptingGlobals'; import { Transform } from '../util/Transform'; import './GestureOverlay.scss'; import { ObservableReactComponent } from './ObservableReactComponent'; +import { returnEmptyDocViewList } from './StyleProvider'; import { ActiveFillColor, DocumentView } from './nodes/DocumentView'; export enum ToolglassTools { @@ -70,15 +69,13 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil return this.Tool !== ToolglassTools.None; } - // @observable private showMobileInkOverlay: boolean = false; - private _overlayRef = React.createRef<HTMLDivElement>(); private _d1: Doc | undefined; private _inkToTextDoc: Doc | undefined; private thumbIdentifier?: number; private pointerIdentifier?: number; - constructor(props: any) { + constructor(props: GestureOverlayProps) { super(props); makeObservable(this); GestureOverlay.Instances.push(this); @@ -94,7 +91,7 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil @action onPointerDown = (e: React.PointerEvent) => { - if (!(e.target as any)?.className?.toString().startsWith('lm_')) { + if (!(e.target as HTMLElement)?.className?.toString().startsWith('lm_')) { if ([InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { this._points.push({ X: e.clientX, Y: e.clientY }); setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction); @@ -173,8 +170,8 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil newPoints.pop(); const controlPoints: { X: number; Y: number }[] = []; - const bezierCurves = (fitCurve as any)(newPoints, 10); - Array.from(bezierCurves).forEach((curve: any) => { + const bezierCurves = fitCurve.default(newPoints, 10); + Array.from(bezierCurves).forEach(curve => { controlPoints.push({ X: curve[0][0], Y: curve[0][1] }); controlPoints.push({ X: curve[1][0], Y: curve[1][1] }); controlPoints.push({ X: curve[2][0], Y: curve[2][1] }); @@ -351,7 +348,7 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil return false; }; - dispatchGesture = (gesture: Gestures, stroke?: InkData, text?: any) => { + dispatchGesture = (gesture: Gestures, stroke?: InkData, text?: string) => { const points = (stroke ?? this._points).slice(); return ( document.elementFromPoint(points[0].X, points[0].Y)?.dispatchEvent( @@ -411,7 +408,7 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil ActiveDash(), 1, 1, - this.InkShape ?? '', + this.InkShape as Gestures, 'none', 1.0, false @@ -438,7 +435,7 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil ActiveDash(), 1, 1, - this.InkShape ?? '', + this.InkShape as Gestures, 'none', 1.0, false @@ -466,7 +463,7 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil isContentActive={returnFalse} renderDepth={0} styleProvider={returnEmptyString} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} focus={emptyFunction} whenChildContentsActiveChanged={emptyFunction} childFiltersByRanges={returnEmptyFilter} @@ -484,7 +481,6 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil render() { return ( <div className="gestureOverlay-cont" style={{ pointerEvents: this._props.isActive ? 'all' : 'none' }} ref={this._overlayRef} onPointerDown={this.onPointerDown}> - {/* {this.showMobileInkOverlay ? <MobileInkOverlay /> : null} */} {this.elements} <div @@ -516,13 +512,7 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil ScriptingGlobals.add('GestureOverlay', GestureOverlay); // eslint-disable-next-line prefer-arrow-callback -ScriptingGlobals.add(function setToolglass(tool: any) { - runInAction(() => { - GestureOverlay.Instance.Tool = tool; - }); -}); -// eslint-disable-next-line prefer-arrow-callback -ScriptingGlobals.add(function setPen(width: any, color: any, fill: any, arrowStart: any, arrowEnd: any, dash: any) { +ScriptingGlobals.add(function setPen(width: string, color: string, fill: string, arrowStart: string, arrowEnd: string, dash: string) { runInAction(() => { GestureOverlay.Instance.SavedColor = ActiveInkColor(); SetActiveInkColor(color); @@ -543,8 +533,8 @@ ScriptingGlobals.add(function resetPen() { }, 'resets the pen tool'); ScriptingGlobals.add( // eslint-disable-next-line prefer-arrow-callback - function createText(text: any, x: any, y: any) { - GestureOverlay.Instance.dispatchGesture(Gestures.Text, [{ X: x, Y: y }], text); + function createText(text: string, X: number, Y: number) { + GestureOverlay.Instance.dispatchGesture(Gestures.Text, [{ X, Y }], text); }, 'creates a text document with inputted text and coordinates', '(text: any, x: any, y: any)' diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 7d01bbabb..a85a03aab 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -56,7 +56,7 @@ export class KeyManager { window.addEventListener('keydown', KeyManager.Instance.handle); window.removeEventListener('keyup', KeyManager.Instance.unhandle); window.addEventListener('keyup', KeyManager.Instance.unhandle); - window.addEventListener('paste', KeyManager.Instance.paste as any); + window.addEventListener('paste', KeyManager.Instance.paste); } public unhandle = action((/* e: KeyboardEvent */) => { @@ -330,7 +330,7 @@ export class KeyManager { } break; case 'c': - if ((document.activeElement as any)?.type !== 'text' && !AnchorMenu.Instance.Active && DocumentDecorations.Instance.Bounds.r - DocumentDecorations.Instance.Bounds.x > 2) { + if (!AnchorMenu.Instance.Active && DocumentDecorations.Instance.Bounds.r - DocumentDecorations.Instance.Bounds.x > 2) { const bds = DocumentDecorations.Instance.Bounds; const pt = DocumentView.Selected()[0] .screenToViewTransform() diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx index 1ed8de1be..33db72960 100644 --- a/src/client/views/InkTranscription.tsx +++ b/src/client/views/InkTranscription.tsx @@ -240,7 +240,8 @@ // const text = exports['text/plain']; // if (this.currGroup) { -// this.currGroup.transcription = text; +// this.currGroup.text = text; // transcription text +// this.currGroup.icon_fieldKey = 'transcription'; // use the transcription icon template when iconifying // this.currGroup.title = text.split('\n')[0]; // } diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index a117ff3c3..067b11310 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -20,6 +20,7 @@ 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 { Property } from 'csstype'; import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -28,6 +29,7 @@ import { Doc } from '../../fields/Doc'; import { InkData, InkField } from '../../fields/InkField'; import { BoolCast, Cast, NumCast, RTFCast, StrCast } from '../../fields/Types'; import { TraceMobx } from '../../fields/util'; +import { Gestures } from '../../pen-gestures/GestureTypes'; import { CognitiveServices } from '../cognitive_services/CognitiveServices'; import { Docs } from '../documents/Documents'; import { DocumentType } from '../documents/DocumentTypes'; @@ -35,7 +37,6 @@ import { InteractionUtils } from '../util/InteractionUtils'; import { SnappingManager } from '../util/SnappingManager'; import { UndoManager } from '../util/UndoManager'; import { ContextMenu } from './ContextMenu'; -import { ViewBoxInterface } from './ViewBoxInterface'; import { ViewBoxAnnotatableComponent } from './DocComponent'; import { Colors } from './global/globalEnums'; import { InkControlPtHandles, InkEndPtHandles } from './InkControlPtHandles'; @@ -46,7 +47,9 @@ import { FieldView, FieldViewProps } from './nodes/FieldView'; import { FormattedTextBox, FormattedTextBoxProps } from './nodes/formattedText/FormattedTextBox'; import { PinDocView, PinProps } from './PinFuncs'; import { StyleProp } from './StyleProp'; +import { ViewBoxInterface } from './ViewBoxInterface'; +// eslint-disable-next-line @typescript-eslint/no-var-requires const { INK_MASK_SIZE } = require('./global/globalCssVariables.module.scss'); // prettier-ignore @observer @@ -292,7 +295,7 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>() * @param boundsTop the screen space top coordinate of the ink stroke * @returns the JSX controls for displaying an editing UI for the stroke (control point & tangent handles) */ - componentUI = (boundsLeft: number, boundsTop: number) => { + componentUI = (boundsLeft: number, boundsTop: number): null | JSX.Element => { const inkDoc = this.Document; const { inkData, inkStrokeWidth } = this.inkScaledData(); const screenSpaceCenterlineStrokeWidth = Math.min(3, inkStrokeWidth * this.ScreenToLocalBoxXf().inverse().Scale); // the width of the blue line widget that shows the centerline of the ink stroke @@ -317,8 +320,8 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>() Colors.MEDIUM_BLUE, screenInkWidth[0], screenSpaceCenterlineStrokeWidth, - StrCast(inkDoc.stroke_lineJoin), - StrCast(this.layoutDoc.stroke_lineCap), + StrCast(inkDoc.stroke_lineJoin) as Property.StrokeLinejoin, + StrCast(this.layoutDoc.stroke_lineCap) as Property.StrokeLinecap, StrCast(inkDoc.stroke_bezier), 'none', startMarker, @@ -327,7 +330,7 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>() StrCast(inkDoc.stroke_dash), 1, 1, - '', + '' as Gestures, 'none', 1.0, false @@ -344,12 +347,12 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>() }; @computed get fillColor(): string { 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) as 'string') ?? 'transparent'); } @computed get strokeColor() { const { inkData } = this.inkScaledData(); const { fillColor } = this; - 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) as 'string') ?? StrCast(this.layoutDoc.color)); } render() { TraceMobx(); @@ -370,8 +373,8 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>() }); } 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 { highlightIndex, highlightColor: hColor } = (highlight as { highlightIndex?: number; highlightColor?: string }) ?? { highlightIndex: undefined, highlightColor: undefined }; + const highlightColor = !this._props.isSelected() && !isInkMask && highlightIndex ? hColor : 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. @@ -382,8 +385,8 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>() this.strokeColor, inkStrokeWidth, inkStrokeWidth, - StrCast(this.layoutDoc.stroke_lineJoin), - StrCast(this.layoutDoc.stroke_lineCap), + StrCast(this.layoutDoc.stroke_lineJoin) as Property.StrokeLinejoin, + StrCast(this.layoutDoc.stroke_lineCap) as Property.StrokeLinecap, StrCast(this.layoutDoc.stroke_bezier), !closed ? 'none' : fillColor === 'transparent' ? 'none' : fillColor, startMarker, @@ -392,7 +395,7 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>() StrCast(this.layoutDoc.stroke_dash), inkScaleX, inkScaleY, - '', + '' as Gestures, 'none', 1.0, false, @@ -401,16 +404,16 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>() ); const higlightMargin = Math.min(12, Math.max(2, 0.3 * inkStrokeWidth)); // Invisible polygonal line that enables the ink to be selected by the user. - const clickableLine = (downHdlr?: (e: React.PointerEvent) => void, mask: boolean = false): any => + const clickableLine = (downHdlr?: (e: React.PointerEvent) => void, mask: boolean = false) => InteractionUtils.CreatePolyline( inkData, inkLeft, inkTop, - mask && color === 'transparent' ? this.strokeColor : highlightColor ?? color, + mask && color === 'transparent' ? this.strokeColor : (highlightColor ?? color), inkStrokeWidth, inkStrokeWidth + NumCast(this.layoutDoc.stroke_borderWidth) + (fillColor ? (closed ? higlightMargin : (highlightIndex ?? 0) + higlightMargin) : higlightMargin), - StrCast(this.layoutDoc.stroke_lineJoin), - StrCast(this.layoutDoc.stroke_lineCap), + StrCast(this.layoutDoc.stroke_lineJoin) as Property.StrokeLinejoin, + StrCast(this.layoutDoc.stroke_lineCap) as Property.StrokeLinecap, StrCast(this.layoutDoc.stroke_bezier), !closed || !fillColor || DashColor(fillColor).alpha() === 0 ? 'none' : fillColor, startMarker, @@ -419,8 +422,8 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>() StrCast(this.layoutDoc.stroke_dash), inkScaleX, inkScaleY, - '', - this._props.pointerEvents?.() ?? 'visiblepainted', + '' as Gestures, + this._props.pointerEvents?.() ?? 'visiblePainted', 0.0, false, downHdlr, diff --git a/src/client/views/KeyphraseQueryView.scss b/src/client/views/KeyphraseQueryView.scss deleted file mode 100644 index ac715e5e7..000000000 --- a/src/client/views/KeyphraseQueryView.scss +++ /dev/null @@ -1,8 +0,0 @@ -.fading { - animation: fanOut 1s -} - -@keyframes fanOut { - from {opacity: 0;} - to {opacity: 1;} -}
\ No newline at end of file diff --git a/src/client/views/KeyphraseQueryView.tsx b/src/client/views/KeyphraseQueryView.tsx deleted file mode 100644 index 81f004010..000000000 --- a/src/client/views/KeyphraseQueryView.tsx +++ /dev/null @@ -1,32 +0,0 @@ -/* eslint-disable jsx-a11y/label-has-associated-control */ -import { observer } from 'mobx-react'; -import * as React from 'react'; -import './KeyphraseQueryView.scss'; - -// tslint:disable-next-line: class-name -export interface KP_Props { - keyphrases: string; -} - -@observer -export class KeyphraseQueryView extends React.Component<KP_Props> { - render() { - const keyterms = this.props.keyphrases.split(','); - return ( - <div> - <h5>Select queries to send:</h5> - <form> - {keyterms.map((kp: string) => ( - // return (<p>{"-" + kp}</p>); - <p> - <label> - <input name="query" type="radio" /> - <span>{kp}</span> - </label> - </p> - ))} - </form> - </div> - ); - } -} diff --git a/src/client/views/KeywordBox.tsx b/src/client/views/KeywordBox.tsx deleted file mode 100644 index 68584a7fa..000000000 --- a/src/client/views/KeywordBox.tsx +++ /dev/null @@ -1,363 +0,0 @@ -import { Button, Colors, IconButton } from 'browndash-components'; -import { action, computed, makeObservable, observable, reaction } from 'mobx'; -import { observer } from 'mobx-react'; -import React from 'react'; -import { returnFalse, setupMoveUpEvents } from '../../ClientUtils'; -import { Doc, DocListCast } from '../../fields/Doc'; -import { DocData } from '../../fields/DocSymbols'; -import { List } from '../../fields/List'; -import { NumCast, StrCast } from '../../fields/Types'; -import { emptyFunction } from '../../Utils'; -import { DocumentType } from '../documents/DocumentTypes'; -import { DragManager } from '../util/DragManager'; -import { SnappingManager } from '../util/SnappingManager'; -import { DocumentView } from './nodes/DocumentView'; -import { ObservableReactComponent } from './ObservableReactComponent'; - -interface KeywordItemProps { - doc: Doc; - keyword: string; - keywordDoc: Doc; - setToEditing: () => void; - isEditing: boolean; -} - -/** - * A component that handles individual keywords. - */ -@observer -export class KeywordItem extends ObservableReactComponent<KeywordItemProps> { - constructor(props: any) { - super(props); - makeObservable(this); - this.ref = React.createRef(); - } - - private ref: React.RefObject<HTMLDivElement>; - - /** - * Gets the documents that a keyword is associated with. - * @returns An array of documents that contain the keyword. - */ - getKeywordCollectionDocs = () => { - for (const doc of DocListCast(Doc.ActiveDashboard?.myKeywordCollections)) { - if (doc.title === this._props.keyword) { - return doc[DocData].docs; - } - } - return null; - }; - - /** - * Creates a smart collection. - * @returns - */ - createCollection = () => { - // Get the documents that contain the keyword. - const selected = DocListCast(this.getKeywordCollectionDocs()!); - const newEmbeddings = selected.map(doc => Doc.MakeEmbedding(doc)); - - // Create a new collection and set up configurations. - const newCollection = ((doc: Doc) => { - const docData = doc[DocData]; - docData.data = new List<Doc>(newEmbeddings); - docData.title = this._props.keyword; - doc._freeform_panX = doc._freeform_panY = 0; - return doc; - })(Doc.MakeCopy(Doc.UserDoc().emptyCollection as Doc, true)); - newEmbeddings.forEach(embed => (embed.embedContainer = newCollection)); - newCollection._width = 900; - newCollection._height = 900; - newCollection.layout_fitWidth = true; - - // Add the collection to the keyword document's list of associated smart collections. - this._props.keywordDoc.collections = new List<Doc>([...DocListCast(this._props.keywordDoc.collections), newCollection]); - newCollection[DocData].data_labels = new List<string>([this._props.keyword]); - newCollection[DocData][`${this._props.keyword}`] = true; - newCollection[DocData].showLabels = true; - return newCollection; - }; - - @action - handleDragStart = (e: React.PointerEvent) => { - if (this._props.isEditing) { - const clone = this.ref.current?.cloneNode(true) as HTMLElement; - if (!clone) return; - - setupMoveUpEvents( - this, - e, - () => { - const dragData = new DragManager.DocumentDragData([this.createCollection()]); - DragManager.StartDocumentDrag([this.ref.current!], dragData, e.clientX, e.clientY, {}); - return true; - }, - returnFalse, - emptyFunction - ); - e.preventDefault(); - } - }; - - @action - removeLabel = () => { - if (this._props.doc[DocData].data_labels) { - if (this._props.doc.type === DocumentType.COL) { - const filtered_collections = new List<Doc>(DocListCast(this._props.keywordDoc.collections).filter(doc => doc !== this._props.doc)); - this._props.keywordDoc.collections = filtered_collections; - - for (const cur_doc of DocListCast(this.getKeywordCollectionDocs()!, [])) { - this._props.doc[DocData].data = new List<Doc>(DocListCast(this._props.doc[DocData].data).filter(doc => !Doc.AreProtosEqual(cur_doc, doc))); - } - } else { - const filtered_docs = new List<Doc>(DocListCast(this.getKeywordCollectionDocs()!).filter(doc => doc !== this._props.doc)); - this._props.keywordDoc[DocData].docs = filtered_docs; - - for (const collection of DocListCast(this._props.keywordDoc.collections)) { - collection[DocData].data = new List<Doc>(DocListCast(collection[DocData].data).filter(doc => !Doc.AreProtosEqual(this._props.doc, doc))); - } - } - } - this._props.doc[DocData].data_labels = (this._props.doc[DocData].data_labels as List<string>).filter(label => label !== this._props.keyword) as List<string>; - this._props.doc![DocData][`${this._props.keyword}`] = false; - }; - - render() { - return ( - <div className="keyword" onClick={this._props.setToEditing} onPointerDown={this.handleDragStart} ref={this.ref}> - {this._props.keyword} - {this.props.isEditing && <IconButton tooltip={'Remove label'} onPointerDown={this.removeLabel} icon={'X'} style={{ width: '8px', height: '8px', marginLeft: '10px' }} />} - </div> - ); - } -} - -interface KeywordBoxProps { - doc: Doc; - isEditing: boolean; -} - -/** - * A component that handles the keyword display for documents. - */ -@observer -export class KeywordBox extends ObservableReactComponent<KeywordBoxProps> { - @observable _currentInput: string = ''; - private height: number = 0; - private ref: React.RefObject<HTMLDivElement>; - - @computed - get currentScale() { - return NumCast((this._props.doc.embedContainer as Doc)?._freeform_scale, 1); - } - - @computed - get cur_height() { - return this.ref.current?.offsetHeight ? this.ref.current?.offsetHeight : 0; - } - - constructor(props: any) { - super(props); - makeObservable(this); - this.ref = React.createRef(); - - reaction( - () => this.cur_height, - () => { - this._props.doc[DocData].keywordHeight = this.height; - } - ); - } - - componentDidMount(): void { - this.height = this.ref.current?.offsetHeight ? this.ref.current?.offsetHeight : 0; - this._props.doc[DocData].keywordHeight = this.height; - } - - componentDidUpdate(prevProps: Readonly<KeywordBoxProps>): void { - this.height = this.ref.current?.offsetHeight ? this.ref.current?.offsetHeight : 0; - this._props.doc[DocData].keywordHeight = this.height; - } - - @action - setToEditing = () => { - this._props.isEditing = true; - }; - - @action - setToView = () => { - this._props.isEditing = false; - }; - - /** - * Gets the document associated with a keyword. - * @param keyword The keyword being searched for - * @returns A Doc containing keyword information - */ - getKeywordCollection = (keyword: string) => { - // Look for the keyword document. - for (const doc of DocListCast(Doc.ActiveDashboard!.myKeywordCollections)) { - if (doc.title === keyword) { - return doc; - } - } - - // If not contained, create a new document and add it to the active Dashboard's keyword list. - const keywordCollection = new Doc(); - keywordCollection.title = keyword; - keywordCollection[DocData].docs = new List<Doc>(); - keywordCollection.collections = new List<Doc>(); - if (Doc.ActiveDashboard) { - Doc.ActiveDashboard.myKeywordCollections = new List<Doc>([...DocListCast(Doc.ActiveDashboard.myKeywordCollections), keywordCollection]); - } - - return keywordCollection; - }; - - /** - * Adds the keyword to the document. - * @param keyword - */ - submitLabel = (keyword: string) => { - // If the active Dashboard does not have a keyword collection, create it. - if (Doc.ActiveDashboard && !Doc.ActiveDashboard.myKeywordCollections) { - Doc.ActiveDashboard.myKeywordCollections = new List<Doc>(); - } - - const submittedLabel = keyword.trim(); - if (submittedLabel && !this._props.doc![DocData][`${submittedLabel}`]) { - // If the keyword collection is not in active Dashboard, add it as a new doc, with the keyword as its title. - const keywordCollection = this.getKeywordCollection(submittedLabel); - - // If the document has no keywords field, create the field. - if (!this._props.doc[DocData].data_labels) { - this._props.doc[DocData].data_labels = new List<string>(); - } - - // If the document is of type COLLECTION, make it a smart collection, otherwise, add the keyword to the document. - if (this._props.doc.type === DocumentType.COL) { - keywordCollection.collections = new List<Doc>([...DocListCast(keywordCollection.collections), this._props.doc]); - - // Iterate through the keyword document's collections and add a copy of the document to each collection - for (const doc of DocListCast(keywordCollection[DocData].docs)) { - const newEmbedding = Doc.MakeEmbedding(doc); - this._props.doc[DocData].data = new List<Doc>([...DocListCast(this._props.doc[DocData].data), newEmbedding]); - newEmbedding.embedContainer = this._props.doc; - } - } else { - // Add this document to the keyword's collection of associated documents. - keywordCollection[DocData].docs = new List<Doc>([...DocListCast(keywordCollection[DocData].docs), this._props.doc]); - - // Iterate through the keyword document's collections and add a copy of the document to each collection - for (const collection of DocListCast(keywordCollection.collections)) { - const newEmbedding = Doc.MakeEmbedding(this._props.doc); - collection[DocData].data = new List<Doc>([...DocListCast(collection.data), newEmbedding]); - newEmbedding.embedContainer = collection; - } - } - - // Push the keyword to the document's keyword list field. - (this._props.doc![DocData].data_labels! as List<string>).push(submittedLabel); - this._props.doc![DocData][`${submittedLabel}`] = true; - this._currentInput = ''; // Clear the input box - } - }; - - @action - onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { - this._currentInput = e.target.value; - }; - - render() { - const keywordsList = this._props.doc[DocData].data_labels ? this._props.doc[DocData].data_labels : new List<string>(); - const seldoc = DocumentView.SelectedDocs().lastElement(); - if (SnappingManager.IsDragging || !(seldoc === this._props.doc) || !this._props.isEditing) { - setTimeout( - action(() => { - if ((keywordsList as List<string>).length === 0) { - this._props.doc[DocData].showLabels = false; - } - this.setToView(); - }) - ); - } - - return ( - <div - className="keywords-container" - ref={this.ref} - style={{ - transformOrigin: 'top left', - overflow: 'hidden', - transform: `scale(${1 / this.currentScale})`, - backgroundColor: this._props.isEditing ? Colors.LIGHT_GRAY : Colors.TRANSPARENT, - borderColor: this._props.isEditing ? Colors.BLACK : Colors.TRANSPARENT, - maxWidth: `400px`, - }}> - <div className="keywords-content"> - <div className="keywords-list"> - {(keywordsList as List<string>).map(keyword => { - return <KeywordItem doc={this._props.doc} keyword={keyword} keywordDoc={this.getKeywordCollection(keyword)} setToEditing={this.setToEditing} isEditing={this._props.isEditing}></KeywordItem>; - })} - </div> - {this._props.isEditing ? ( - <div className="keyword-editing-box"> - <div className="keyword-input-box"> - <input - value={this._currentInput} - autoComplete="off" - onChange={this.onInputChange} - onKeyDown={e => { - e.key === 'Enter' ? this.submitLabel(this._currentInput) : null; - e.stopPropagation(); - }} - type="text" - placeholder="Input keywords for document..." - aria-label="keyword-input" - className="keyword-input" - style={{ width: '100%', borderRadius: '5px' }} - /> - </div> - {Doc.ActiveDashboard?.myKeywordCollections ? ( - <div className="keyword-suggestions-box"> - {DocListCast(Doc.ActiveDashboard?.myKeywordCollections).map(doc => { - const keyword = StrCast(doc.title); - return ( - <Button - style={{ margin: '2px 2px', border: '1px solid black', backgroundColor: 'lightblue', color: 'black' }} - text={keyword} - color={SnappingManager.userVariantColor} - tooltip={'Add existing keyword'} - onClick={() => { - this.submitLabel(keyword); - }} - /> - ); - })} - </div> - ) : ( - <div></div> - )} - <div className="keyword-buttons"> - <IconButton - tooltip={'Close Menu'} - onPointerDown={() => { - if ((keywordsList as List<string>).length === 0) { - this._props.doc[DocData].showLabels = false; - } else { - this.setToView(); - } - }} - icon={'x'} - style={{ width: '4px' }} - /> - </div> - </div> - ) : ( - <div></div> - )} - </div> - </div> - ); - } -} diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index 7198c7f05..b8b73e7dd 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -1,34 +1,32 @@ /* eslint-disable no-use-before-define */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Toggle, ToggleType, Type } from 'browndash-components'; import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { ClientUtils, returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../ClientUtils'; +import { ClientUtils, returnEmptyFilter, returnTrue } from '../../ClientUtils'; import { emptyFunction } from '../../Utils'; -import { CreateLinkToActiveAudio, Doc, DocListCast, FieldResult, Opt } from '../../fields/Doc'; +import { CreateLinkToActiveAudio, Doc, DocListCast, FieldResult, Opt, returnEmptyDoclist } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { InkTool } from '../../fields/InkField'; -import { Cast, NumCast, toList } from '../../fields/Types'; +import { BoolCast, Cast, NumCast, toList } from '../../fields/Types'; +import { ScriptingGlobals } from '../util/ScriptingGlobals'; import { SnappingManager } from '../util/SnappingManager'; import { Transform } from '../util/Transform'; import { GestureOverlay } from './GestureOverlay'; import './LightboxView.scss'; import { ObservableReactComponent } from './ObservableReactComponent'; -import { DefaultStyleProvider, wavyBorderPath } from './StyleProvider'; +import { OverlayView } from './OverlayView'; +import { DefaultStyleProvider, returnEmptyDocViewList, wavyBorderPath } from './StyleProvider'; import { DocumentView } from './nodes/DocumentView'; import { OpenWhere, OpenWhereMod } from './nodes/OpenWhere'; -import { ScriptingGlobals } from '../util/ScriptingGlobals'; -import { OverlayView } from './OverlayView'; interface LightboxViewProps { PanelWidth: number; PanelHeight: number; maxBorder: number[]; - addSplit: (document: Doc, pullSide: OpenWhereMod, stack?: any, panelName?: string | undefined, keyValue?: boolean | undefined) => boolean; + addSplit: (document: Doc, pullSide: OpenWhereMod, stack?: unknown, panelName?: string | undefined, keyValue?: boolean | undefined) => boolean; } const savedKeys = ['freeform_panX', 'freeform_panY', 'freeform_scale', 'layout_scrollTop', 'layout_fieldKey']; @@ -63,7 +61,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> { @computed get leftBorder() { return Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]); } // prettier-ignore @computed get topBorder() { return Math.min(this._props.PanelHeight / 4, this._props.maxBorder[1]); } // prettier-ignore - constructor(props: any) { + constructor(props: LightboxViewProps) { super(props); makeObservable(this); LightboxView.Instance = this; @@ -214,7 +212,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> { lightboxDocTemplate = () => this._layoutTemplate; future = () => this._future; - renderNavBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: IconProp, display: any, click: () => void, color?: string) => ( + renderNavBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: IconProp, display: boolean, click: () => void, color?: string) => ( <div className="lightboxView-navBtn-frame" style={{ @@ -239,7 +237,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> { render() { let downx = 0; let downy = 0; - const toggleBtn = (classname: string, tooltip: string, toggleBackground: any, icon: IconProp, icon2: IconProp | string, onClick: () => void) => ( + const toggleBtn = (classname: string, tooltip: string, toggleBackground: boolean, icon: IconProp, icon2: IconProp | string, onClick: () => void) => ( <div className={classname}> <Toggle tooltip={tooltip} @@ -278,7 +276,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> { }}> <GestureOverlay isActive> <DocumentView - key={this._doc.title + this._doc[Id]} // this makes a new DocumentView when the document changes which makes link following work, otherwise no DocView is registered for the new Doc + key={this._doc[Id]} // this makes a new DocumentView when the document changes which makes link following work, otherwise no DocView is registered for the new Doc ref={action((r: DocumentView | null) => { this._docView = r !== null ? r : undefined; })} @@ -292,7 +290,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> { ScreenToLocalTransform={this.lightboxScreenToLocal} renderDepth={0} suppressSetHeight={!!this._doc._layout_fitWidth} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} @@ -306,18 +304,18 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> { </GestureOverlay> </div> - {this.renderNavBtn(0, undefined, this._props.PanelHeight / 2 - 12.5, 'chevron-left', this._doc && this._history.length, this.previous)} + {this.renderNavBtn(0, undefined, this._props.PanelHeight / 2 - 12.5, 'chevron-left', this._doc && this._history.length ? true : false, this.previous)} {this.renderNavBtn( this._props.PanelWidth - Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]), undefined, this._props.PanelHeight / 2 - 12.5, 'chevron-right', - this._doc && this._future.length, + this._doc && this._future.length ? true : false, this.next, this.future().length.toString() )} <LightboxTourBtn lightboxDoc={this.lightboxDoc} navBtn={this.renderNavBtn} future={this.future} stepInto={this.stepInto} /> - {toggleBtn('lightboxView-navBtn', 'toggle reading view', this._doc?._layout_fitWidth, 'book-open', 'book', this.toggleFitWidth)} + {toggleBtn('lightboxView-navBtn', 'toggle reading view', BoolCast(this._doc?._layout_fitWidth), 'book-open', 'book', this.toggleFitWidth)} {toggleBtn('lightboxView-tabBtn', 'open document in a tab', false, 'file-download', '', this.downloadDoc)} {toggleBtn('lightboxView-penBtn', 'toggle pen annotation', Doc.ActiveTool === InkTool.Pen, 'pen', '', this.togglePen)} {toggleBtn('lightboxView-exploreBtn', 'toggle navigate only mode', SnappingManager.ExploreMode, 'globe-americas', '', this.toggleExplore)} @@ -326,7 +324,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> { } } interface LightboxTourBtnProps { - navBtn: (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: IconProp, display: any, click: () => void, color?: string) => JSX.Element; + navBtn: (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: IconProp, display: boolean, click: () => void, color?: string) => JSX.Element; // eslint-disable-next-line react/no-unused-prop-types future: () => Opt<Doc[]>; stepInto: () => void; @@ -335,7 +333,7 @@ interface LightboxTourBtnProps { @observer export class LightboxTourBtn extends React.Component<LightboxTourBtnProps> { render() { - return this.props.navBtn('50%', 0, 0, 'chevron-down', this.props.lightboxDoc(), this.props.stepInto, ''); + return this.props.navBtn('50%', 0, 0, 'chevron-down', this.props.lightboxDoc() ? true : false, this.props.stepInto, ''); } } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 8242e7c27..f7cd0e925 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -50,6 +50,7 @@ import { ScreenshotBox } from './nodes/ScreenshotBox'; import { ScriptingBox } from './nodes/ScriptingBox'; import { VideoBox } from './nodes/VideoBox'; import { WebBox } from './nodes/WebBox'; +import { CalendarBox } from './nodes/calendarBox/CalendarBox'; import { DashDocCommentView } from './nodes/formattedText/DashDocCommentView'; import { DashDocView } from './nodes/formattedText/DashDocView'; import { DashFieldView } from './nodes/formattedText/DashFieldView'; @@ -61,6 +62,10 @@ import { ImportElementBox } from './nodes/importBox/ImportElementBox'; import { PresBox, PresElementBox } from './nodes/trails'; import { SearchBox } from './search/SearchBox'; import { ImageLabelBox } from './collections/collectionFreeForm/ImageLabelBox'; +import { FaceRecognitionHandler } from './search/FaceRecognitionHandler'; +import { FaceCollectionBox, UniqueFaceBox } from './collections/collectionFreeForm/FaceCollectionBox'; +import { Node } from 'prosemirror-model'; +import { EditorView } from 'prosemirror-view'; dotenv.config(); @@ -84,7 +89,7 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' }; setTimeout(() => { // prevent zooming browser document.getElementById('root')!.addEventListener('wheel', event => event.ctrlKey && event.preventDefault(), true); - const startload = (document as any).startLoad; + const startload = (document as unknown as { startLoad: number }).startLoad; // see index.html in deploy/ const loading = Date.now() - (startload ? Number(startload) : Date.now() - 3000); console.log('Loading Time = ' + loading); const d = new Date(); @@ -96,16 +101,17 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' }; new BranchingTrailManager({}); new PingManager(); new KeyManager(); + new FaceRecognitionHandler(); // initialize plugins and classes that require plugins CollectionDockingView.Init(TabDocView); FormattedTextBox.Init((tbox: FormattedTextBox) => ({ - dashComment(node: any, view: any, getPos: any) { return new DashDocCommentView(node, view, getPos); }, // prettier-ignore - dashDoc(node: any, view: any, getPos: any) { return new DashDocView(node, view, getPos, tbox); }, // prettier-ignore - dashField(node: any, view: any, getPos: any) { return new DashFieldView(node, view, getPos, tbox); }, // prettier-ignore - equation(node: any, view: any, getPos: any) { return new EquationView(node, view, getPos, tbox); }, // prettier-ignore - summary(node: any, view: any, getPos: any) { return new SummaryView(node, view, getPos); }, // prettier-ignore - footnote(node: any, view: any, getPos: any) { return new FootnoteView(node, view, getPos); }, // prettier-ignore + dashComment(node: Node, view: EditorView, getPos: () => number | undefined) { return new DashDocCommentView(node, view, getPos); }, // prettier-ignore + dashDoc(node: Node, view: EditorView, getPos: () => number | undefined) { return new DashDocView(node, view, getPos, tbox); }, // prettier-ignore + dashField(node: Node, view: EditorView, getPos: () => number | undefined) { return new DashFieldView(node, view, getPos, tbox); }, // prettier-ignore + equation(node: Node, view: EditorView, getPos: () => number | undefined) { return new EquationView(node, view, getPos, tbox); }, // prettier-ignore + summary(node: Node, view: EditorView, getPos: () => number | undefined) { return new SummaryView(node, view, getPos); }, // prettier-ignore + footnote(node: Node, view: EditorView, getPos: () => number | undefined) { return new FootnoteView(node, view, getPos); }, // prettier-ignore })); CollectionFreeFormInfoUI.Init(); LinkFollower.Init(); @@ -132,7 +138,9 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' }; PresBox, PresElementBox, SearchBox, - ImageLabelBox, //Here! + ImageLabelBox, + FaceCollectionBox, + UniqueFaceBox, FunctionPlotBox, InkingStroke, LinkBox, @@ -143,6 +151,7 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' }; ChatBox, DiagramBox, HTMLtag, + CalendarBox, ComparisonBox, LoadingBox, PhysicsSimulationBox, diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 9da359e1b..d2b604704 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -1,4 +1,3 @@ -/* eslint-disable node/no-unpublished-import */ import { library } from '@fortawesome/fontawesome-svg-core'; import { faBuffer, faHireAHelper } from '@fortawesome/free-brands-svg-icons'; import * as far from '@fortawesome/free-regular-svg-icons'; @@ -7,11 +6,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, configure, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -// eslint-disable-next-line import/no-relative-packages +import ResizeObserver from 'resize-observer-polyfill'; import '../../../node_modules/browndash-components/dist/styles/global.min.css'; -import { ClientUtils, lightOrDark, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero, setupMoveUpEvents } from '../../ClientUtils'; +import { ClientUtils, lightOrDark, returnEmptyFilter, returnFalse, returnTrue, returnZero, setupMoveUpEvents } from '../../ClientUtils'; import { emptyFunction } from '../../Utils'; -import { Doc, DocListCast, GetDocFromUrl, Opt } from '../../fields/Doc'; +import { Doc, DocListCast, GetDocFromUrl, Opt, returnEmptyDoclist } from '../../fields/Doc'; import { DocData } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; import { DocCast, StrCast, toList } from '../../fields/Types'; @@ -58,7 +57,6 @@ import { ImageLabelHandler } from './collections/collectionFreeForm/ImageLabelHa import { MarqueeOptionsMenu } from './collections/collectionFreeForm/MarqueeOptionsMenu'; import { CollectionLinearView } from './collections/collectionLinear'; import { LinkMenu } from './linking/LinkMenu'; -import { AudioBox } from './nodes/AudioBox'; import { SchemaCSVPopUp } from './nodes/DataVizBox/SchemaCSVPopUp'; import { DocButtonState } from './nodes/DocumentLinksButton'; import { DocumentView, DocumentViewInternal } from './nodes/DocumentView'; @@ -76,13 +74,12 @@ import { PresBox } from './nodes/trails'; import { AnchorMenu } from './pdf/AnchorMenu'; import { GPTPopup } from './pdf/GPTPopup/GPTPopup'; import { TopBar } from './topbar/TopBar'; -import { ImageLabelBox, ImageLabelBoxData } from './collections/collectionFreeForm/ImageLabelBox'; +// eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports const { LEFT_MENU_WIDTH, TOPBAR_HEIGHT } = require('./global/globalCssVariables.module.scss'); // prettier-ignore -const _global = (window /* browser */ || global) /* node */ as any; @observer -export class MainView extends ObservableReactComponent<{}> { +export class MainView extends ObservableReactComponent<object> { // eslint-disable-next-line no-use-before-define public static Instance: MainView; public static Live: boolean = false; @@ -93,7 +90,7 @@ export class MainView extends ObservableReactComponent<{}> { @observable _dashUIWidth: number = 0; // width of entire main dashboard region including left menu buttons and properties panel (but not including the dashboard selector button row) @observable private _dashUIHeight: number = 0; // height of entire main dashboard region including top menu buttons @observable private _panelContent: string = 'none'; - @observable private _sidebarContent: any = Doc.MyLeftSidebarPanel; + @observable private _sidebarContent: Doc = Doc.MyLeftSidebarPanel; @observable private _leftMenuFlyoutWidth: number = 0; @computed get _hideUI() { return this.mainDoc && this.mainDoc._type_collection !== CollectionViewType.Docking; @@ -153,7 +150,7 @@ export class MainView extends ObservableReactComponent<{}> { } }; headerBarDocWidth = () => this.mainDocViewWidth(); - headerBarDocHeight = () => (this._hideUI ? 0 : this.headerBarHeight ?? 0); + headerBarDocHeight = () => (this._hideUI ? 0 : (this.headerBarHeight ?? 0)); topMenuHeight = () => (this._hideUI ? 0 : 35); topMenuWidth = returnZero; // value is ignored ... leftMenuWidth = () => (this._hideUI ? 0 : Number(LEFT_MENU_WIDTH.replace('px', ''))); @@ -170,7 +167,7 @@ export class MainView extends ObservableReactComponent<{}> { 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 () => DocumentView.Selected().slice(), - views => views.length > 1 && (document.activeElement as any)?.blur !== undefined && (document.activeElement as any)!.blur() + views => views.length > 1 && document.activeElement instanceof HTMLElement && document.activeElement?.blur() ); reaction( () => Doc.MyDockedBtns.linearView_IsOpen, @@ -235,9 +232,9 @@ export class MainView extends ObservableReactComponent<{}> { tag.src = 'https://www.youtube.com/iframe_api'; const firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode!.insertBefore(tag, firstScriptTag); - document.addEventListener('dash', (e: any) => { + document.addEventListener('dash', (e: Event) => { // event used by chrome plugin to tell Dash which document to focus on - const id = GetDocFromUrl(e.detail); + const id = GetDocFromUrl((e as Event & { detail: string }).detail); DocServer.GetRefField(id).then(doc => (doc instanceof Doc ? DocumentView.showDocument(doc, { willPan: false }) : null)); }); document.addEventListener('linkAnnotationToDash', Hypothesis.linkListener); @@ -254,12 +251,12 @@ export class MainView extends ObservableReactComponent<{}> { // document.removeEventListener('linkAnnotationToDash', Hypothesis.linkListener); } - constructor(props: any) { + constructor(props: object) { super(props); makeObservable(this); DocumentViewInternal.addDocTabFunc = MainView.addDocTabFunc_impl; MainView.Instance = this; - DashboardView._urlState = HistoryUtil.parseUrl(window.location) || ({} as any); + DashboardView._urlState = HistoryUtil.parseUrl(window.location) ?? { type: 'doc', docId: '' }; // causes errors to be generated when modifying an observable outside of an action configure({ enforceActions: 'observed' }); @@ -294,7 +291,7 @@ export class MainView extends ObservableReactComponent<{}> { fa.faExternalLinkAlt, fa.faCalendar, fa.faSquare, - far.faSquare as any, + far.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, @@ -446,7 +443,7 @@ export class MainView extends ObservableReactComponent<{}> { fa.faHandPaper, fa.faMap, fa.faUser, - faHireAHelper as any, + faHireAHelper, fa.faTrashRestore, fa.faUsers, fa.faWrench, @@ -457,14 +454,14 @@ export class MainView extends ObservableReactComponent<{}> { fa.faArchive, fa.faBezierCurve, fa.faCircle, - far.faCircle as any, + far.faCircle, fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, fa.faAngleDoubleDown, fa.faAngleDoubleLeft, fa.faAngleDoubleUp, - faBuffer as any, + faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, @@ -575,7 +572,6 @@ export class MainView extends ObservableReactComponent<{}> { ); DocumentManager.removeOverlayViews(); Doc.linkFollowUnhighlight(); - AudioBox.Enabled = true; const targets = document.elementsFromPoint(e.x, e.y); if (targets.length) { let targClass = targets[0].className.toString(); @@ -595,18 +591,6 @@ export class MainView extends ObservableReactComponent<{}> { document.addEventListener('pointerdown', this.globalPointerDown, true); document.addEventListener('pointermove', this.globalPointerMove, true); document.addEventListener('pointerup', this.globalPointerClick, true); - document.addEventListener( - 'click', - (e: MouseEvent) => { - if (!e.cancelBubble) { - const pathstr = (e as any)?.path?.map((p: any) => p.classList?.toString()).join(); - if (pathstr?.includes('libraryFlyout')) { - DocumentView.DeselectAll(); - } - } - }, - false - ); document.oncontextmenu = () => false; }; @@ -647,7 +631,7 @@ export class MainView extends ObservableReactComponent<{}> { Document={this.headerBarDoc} addDocTab={DocumentViewInternal.addDocTabFunc} pinToPres={emptyFunction} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} styleProvider={DefaultStyleProvider} addDocument={this.addHeaderDoc} removeDocument={this.removeHeaderDoc} @@ -682,7 +666,7 @@ export class MainView extends ObservableReactComponent<{}> { addDocument={undefined} addDocTab={DocumentViewInternal.addDocTabFunc} pinToPres={emptyFunction} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} styleProvider={this._hideUI ? DefaultStyleProvider : undefined} isContentActive={returnTrue} removeDocument={undefined} @@ -782,11 +766,11 @@ export class MainView extends ObservableReactComponent<{}> { <div key="libFlyout" className="mainView-libraryFlyout" style={{ minWidth: this._leftMenuFlyoutWidth, width: this._leftMenuFlyoutWidth }}> <div className="mainView-contentArea"> <DocumentView - Document={this._sidebarContent.proto || this._sidebarContent} + Document={DocCast(this._sidebarContent.proto, this._sidebarContent)} addDocument={undefined} addDocTab={DocumentViewInternal.addDocTabFunc} pinToPres={DocumentView.PinDoc} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} styleProvider={this._sidebarContent.proto === Doc.MyDashboards || this._sidebarContent.proto === Doc.MyFilesystem || this._sidebarContent.proto === Doc.MyTrails ? DashboardStyleProvider : DefaultStyleProvider} removeDocument={returnFalse} ScreenToLocalTransform={this.mainContainerXf} @@ -819,7 +803,7 @@ export class MainView extends ObservableReactComponent<{}> { PanelWidth={this.leftMenuWidth} PanelHeight={this.leftMenuHeight} renderDepth={0} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} focus={emptyFunction} styleProvider={DefaultStyleProvider} isContentActive={returnTrue} @@ -894,7 +878,7 @@ export class MainView extends ObservableReactComponent<{}> { className="mainView-dashboardArea" ref={r => { r && - new _global.ResizeObserver( + new ResizeObserver( action(() => { this._dashUIWidth = r.getBoundingClientRect().width; this._dashUIHeight = r.getBoundingClientRect().height; @@ -981,11 +965,11 @@ export class MainView extends ObservableReactComponent<{}> { {[ ...SnappingManager.HorizSnapLines.map((l, i) => ( // eslint-disable-next-line react/no-array-index-key - <line key={'horiz' + i} x1="0" y1={l} x2="2000" y2={l} stroke={lightOrDark(dragPar.layoutDoc.backgroundColor ?? 'gray')} opacity={0.3} strokeWidth={1} strokeDasharray="2 2" /> + <line key={'horiz' + i} x1="0" y1={l} x2="2000" y2={l} stroke={lightOrDark(StrCast(dragPar.layoutDoc.backgroundColor, 'gray'))} opacity={0.3} strokeWidth={1} strokeDasharray="2 2" /> )), ...SnappingManager.VertSnapLines.map((l, i) => ( // eslint-disable-next-line react/no-array-index-key - <line key={'vert' + i} y1={this.topOfMainDocContent.toString()} x1={l} y2="2000" x2={l} stroke={lightOrDark(dragPar.layoutDoc.backgroundColor ?? 'gray')} opacity={0.3} strokeWidth={1} strokeDasharray="2 2" /> + <line key={'vert' + i} y1={this.topOfMainDocContent.toString()} x1={l} y2="2000" x2={l} stroke={lightOrDark(StrCast(dragPar.layoutDoc.backgroundColor, 'gray'))} opacity={0.3} strokeWidth={1} strokeDasharray="2 2" /> )), ]} </svg> @@ -1043,7 +1027,7 @@ export class MainView extends ObservableReactComponent<{}> { } ref={r => { r && - new _global.ResizeObserver( + new ResizeObserver( action(() => { this._windowWidth = r.getBoundingClientRect().width; this._windowHeight = r.getBoundingClientRect().height; diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx index a6dc5c62b..4a35805fb 100644 --- a/src/client/views/MainViewModal.tsx +++ b/src/client/views/MainViewModal.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable react/require-default-props */ import { isDark } from 'browndash-components'; import { observer } from 'mobx-react'; diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx index c18ac6738..8aed34d24 100644 --- a/src/client/views/MarqueeAnnotator.tsx +++ b/src/client/views/MarqueeAnnotator.tsx @@ -27,7 +27,7 @@ export interface MarqueeAnnotatorProps { containerOffset?: () => number[]; marqueeContainer: HTMLDivElement; docView: () => DocumentView; - savedAnnotations: () => ObservableMap<number, HTMLDivElement[]>; + savedAnnotations: () => ObservableMap<number, (HTMLDivElement& { marqueeing?: boolean})[]>; selectionText: () => string; annotationLayer: HTMLDivElement; addDocument: (doc: Doc) => boolean; @@ -41,7 +41,7 @@ export interface MarqueeAnnotatorProps { export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorProps> { private _start: { x: number; y: number } = { x: 0, y: 0 }; - constructor(props: any) { + constructor(props: MarqueeAnnotatorProps) { super(props); makeObservable(this); } @@ -60,13 +60,13 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP }); @undoBatch - makeAnnotationDocument = (color: string, isLinkButton?: boolean, savedAnnotations?: ObservableMap<number, HTMLDivElement[]>): Opt<Doc> => { + makeAnnotationDocument = (color: string, isLinkButton?: boolean, savedAnnotations?: ObservableMap<number, (HTMLDivElement& { marqueeing?: boolean})[]>): Opt<Doc> => { const savedAnnoMap = savedAnnotations?.values() && Array.from(savedAnnotations?.values()).length ? savedAnnotations : this.props.savedAnnotations(); if (savedAnnoMap.size === 0) return undefined; const savedAnnos = Array.from(savedAnnoMap.values())[0]; const doc = this.props.Document; const scale = (this.props.annotationLayerScaling?.() || 1) * NumCast(doc._freeform_scale, 1); - if (savedAnnos.length && (savedAnnos[0] as any).marqueeing) { + if (savedAnnos.length && savedAnnos[0].marqueeing) { const anno = savedAnnos[0]; const containerOffset = this.props.containerOffset?.() || [0, 0]; const marqueeAnno = Docs.Create.FreeformDocument([], { @@ -86,8 +86,9 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP const textRegionAnno = Docs.Create.ConfigDocument({ annotationOn: this.props.Document, - text: this.props.selectionText() as any, // text want an RTFfield, but strings are acceptable, too. - text_html: this.props.selectionText() as any, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + text: this.props.selectionText() as any, // text wants an RTFfield, but strings are acceptable, too. + text_html: this.props.selectionText(), backgroundColor: 'transparent', presentation_duration: 2100, presentation_transition: 500, @@ -136,7 +137,7 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP return annotationDoc as Doc; }; - public static previewNewAnnotation = action((savedAnnotations: ObservableMap<number, HTMLDivElement[]>, annotationLayer: HTMLDivElement, div: HTMLDivElement, page: number) => { + public static previewNewAnnotation = action((savedAnnotations: ObservableMap<number, (HTMLDivElement& { marqueeing?: boolean})[]>, annotationLayer: HTMLDivElement & { marqueeing?: boolean}, div: HTMLDivElement, page: number) => { div.style.backgroundColor = '#ACCEF7'; div.style.opacity = '0.5'; annotationLayer.append(div); @@ -264,17 +265,17 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP if (!this.isEmpty && marqueeStyle) { // configure and show the annotation/link menu if a the drag region is big enough // copy the temporary marquee to allow for multiple selections (not currently available though). - const copy = document.createElement('div'); + const copy: (HTMLDivElement & {marqueeing?: boolean}) = document.createElement('div'); const scale = (this.props.scaling?.() || 1) * NumCast(this.props.Document._freeform_scale, 1); ['border', 'opacity', 'top', 'left', 'width', 'height'].forEach(prop => { - copy.style[prop as any] = marqueeStyle[prop as any]; + copy.style[prop as unknown as number] = marqueeStyle[prop as unknown as number]; // bcz: hack to get around TS type checking for array index with strings }); copy.className = 'marqueeAnnotator-annotationBox'; copy.style.top = parseInt(marqueeStyle.top.toString().replace('px', '')) / scale + this.props.scrollTop + 'px'; copy.style.left = parseInt(marqueeStyle.left.toString().replace('px', '')) / scale + 'px'; copy.style.width = parseInt(marqueeStyle.width.toString().replace('px', '')) / scale + 'px'; copy.style.height = parseInt(marqueeStyle.height.toString().replace('px', '')) / scale + 'px'; - (copy as any).marqueeing = true; + copy.marqueeing = true; MarqueeAnnotator.previewNewAnnotation(this.props.savedAnnotations(), this.props.annotationLayer, copy, this.props.getPageFromScroll?.(this.top) || 0); AnchorMenu.Instance.jumpTo(x, y); } diff --git a/src/client/views/ObservableReactComponent.tsx b/src/client/views/ObservableReactComponent.tsx index 34da82b6c..bb7a07f0e 100644 --- a/src/client/views/ObservableReactComponent.tsx +++ b/src/client/views/ObservableReactComponent.tsx @@ -8,27 +8,27 @@ import JsxParser from 'react-jsx-parser'; * This is an abstract class that serves as the base for a PDF-style or Marquee-style * menu. To use this class, look at PDFMenu.tsx or MarqueeOptionsMenu.tsx for an example. */ -export abstract class ObservableReactComponent<T> extends React.Component<T, {}> { +export abstract class ObservableReactComponent<T> extends React.Component<T, object> { @observable _props: React.PropsWithChildren<T>; - constructor(props: any) { + constructor(props: React.PropsWithChildren<T>) { super(props); this._props = props; makeObservable(this); } componentDidUpdate(prevProps: Readonly<T>): void { Object.keys(prevProps) - .filter(pkey => (prevProps as any)[pkey] !== (this.props as any)[pkey]) + .filter(pkey => (prevProps as {[key:string]: unknown})[pkey] !== (this.props as {[key:string]: unknown})[pkey]) .forEach(action(pkey => { - (this._props as any)[pkey] = (this.props as any)[pkey]; + (this._props as {[key:string]: unknown})[pkey] = (this.props as {[key:string]: unknown})[pkey]; })); // prettier-ignore } } class ObserverJsxParser1 extends JsxParser { - constructor(props: any) { + constructor(props: object) { super(props); - observer(this as any); + observer(this as typeof JsxParser); } } -export const ObserverJsxParser: typeof JsxParser = ObserverJsxParser1 as any; +export const ObserverJsxParser = ObserverJsxParser1 as typeof JsxParser; diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx index a7907a565..5e9677b45 100644 --- a/src/client/views/OverlayView.tsx +++ b/src/client/views/OverlayView.tsx @@ -3,9 +3,10 @@ import { observer } from 'mobx-react'; import { computedFn } from 'mobx-utils'; import * as React from 'react'; import ReactLoading from 'react-loading'; -import { returnEmptyDoclist, returnEmptyFilter, returnTrue, setupMoveUpEvents } from '../../ClientUtils'; +import ResizeObserver from 'resize-observer-polyfill'; +import { returnEmptyFilter, returnTrue, setupMoveUpEvents } from '../../ClientUtils'; import { Utils, emptyFunction } from '../../Utils'; -import { Doc } from '../../fields/Doc'; +import { Doc, returnEmptyDoclist } from '../../fields/Doc'; import { Height, Width } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; import { NumCast, toList } from '../../fields/Types'; @@ -15,11 +16,9 @@ import { dropActionType } from '../util/DropActionTypes'; import { Transform } from '../util/Transform'; import { ObservableReactComponent } from './ObservableReactComponent'; import './OverlayView.scss'; -import { DefaultStyleProvider } from './StyleProvider'; +import { DefaultStyleProvider, returnEmptyDocViewList } from './StyleProvider'; import { DocumentView, DocumentViewInternal } from './nodes/DocumentView'; -const _global = (window /* browser */ || global) /* node */ as any; - export type OverlayDisposer = () => void; export type OverlayElementOptions = { @@ -109,19 +108,19 @@ export class OverlayWindow extends ObservableReactComponent<OverlayWindowProps> } @observer -export class OverlayView extends ObservableReactComponent<{}> { +export class OverlayView extends ObservableReactComponent<object> { // eslint-disable-next-line no-use-before-define public static Instance: OverlayView; @observable.shallow _elements: JSX.Element[] = []; - constructor(props: any) { + constructor(props: object) { super(props); makeObservable(this); if (!OverlayView.Instance) { OverlayView.Instance = this; - new _global.ResizeObserver( - action((entries: any) => { - Array.from(entries).forEach((entry: any) => { + new ResizeObserver( + action(entries => { + Array.from(entries).forEach(entry => { Doc.MyOverlayDocs.forEach(docIn => { const doc = docIn; if (NumCast(doc.overlayX) > entry.contentRect.width - 10) { @@ -162,17 +161,17 @@ export class OverlayView extends ObservableReactComponent<{}> { @action addWindow(contents: JSX.Element, options: OverlayElementOptions): OverlayDisposer { - const remove = action(() => { - const index = this._elements.indexOf(contents); + const remove = action((wincontents: JSX.Element) => { + const index = this._elements.indexOf(wincontents); if (index !== -1) this._elements.splice(index, 1); }); const wincontents = ( - <OverlayWindow onClick={remove} key={Utils.GenerateGuid()} overlayOptions={options}> + <OverlayWindow onClick={() => remove(wincontents)} key={Utils.GenerateGuid()} overlayOptions={options}> {contents} </OverlayWindow> ); this._elements.push(wincontents); - return remove; + return () => remove(wincontents); } removeOverlayDoc = (docs: Doc | Doc[]) => toList(docs).every(Doc.RemFromMyOverlay); @@ -227,7 +226,7 @@ export class OverlayView extends ObservableReactComponent<{}> { whenChildContentsActiveChanged={emptyFunction} focus={emptyFunction} styleProvider={DefaultStyleProvider} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} addDocTab={DocumentViewInternal.addDocTabFunc} pinToPres={emptyFunction} childFilters={returnEmptyFilter} diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index 034ade50b..7e597879d 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -7,13 +7,14 @@ import { Docs, DocumentOptions } from '../documents/Documents'; import { DocUtils } from '../documents/DocUtils'; import { ImageUtils } from '../util/Import & Export/ImageUtils'; import { Transform } from '../util/Transform'; -import { UndoManager, undoBatch } from '../util/UndoManager'; +import { UndoManager, undoable } from '../util/UndoManager'; import { ObservableReactComponent } from './ObservableReactComponent'; import './PreviewCursor.scss'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; +import { StrCast } from '../../fields/Types'; @observer -export class PreviewCursor extends ObservableReactComponent<{}> { +export class PreviewCursor extends ObservableReactComponent<object> { // eslint-disable-next-line no-use-before-define static _instance: PreviewCursor; public static get Instance() { @@ -29,7 +30,7 @@ export class PreviewCursor extends ObservableReactComponent<{}> { @observable _clickPoint: number[] = []; @observable public Visible = false; public Doc: Opt<Doc>; - constructor(props: any) { + constructor(props: object) { super(props); makeObservable(this); PreviewCursor._instance = this; @@ -46,7 +47,7 @@ export class PreviewCursor extends ObservableReactComponent<{}> { }); // tests for URL and makes web document - const re: any = /^https?:\/\//g; + const re = /^https?:\/\//g; const plain = e.clipboardData.getData('text/plain'); if (plain && newPoint) { // tests for youtube and makes video document @@ -64,17 +65,19 @@ export class PreviewCursor extends ObservableReactComponent<{}> { } else if (re.test(plain)) { const url = plain; if (!url.startsWith(window.location.href)) { - undoBatch(() => - this._addDocument?.( - Docs.Create.WebDocument(url, { - title: url, - _width: 500, - _height: 300, - data_useCors: true, - x: newPoint[0], - y: newPoint[1], - }) - ) + undoable( + () => + this._addDocument?.( + Docs.Create.WebDocument(url, { + title: url, + _width: 500, + _height: 300, + data_useCors: true, + x: newPoint[0], + y: newPoint[1], + }) + ), + 'paste web doc' )(); } else alert('cannot paste dash into itself'); } else if (plain.startsWith('__DashDocId(') || plain.startsWith('__DashCloneId(')) { @@ -94,11 +97,11 @@ export class PreviewCursor extends ObservableReactComponent<{}> { } // pasting in images else if (e.clipboardData.getData('text/html') !== '' && e.clipboardData.getData('text/html').includes('<img src=')) { - const regEx: any = /<img src="(.*?)"/g; - const arr: any[] = regEx.exec(e.clipboardData.getData('text/html')); + const regEx = /<img src="(.*?)"/g; + const arr = regEx.exec(e.clipboardData.getData('text/html')); - if (newPoint) { - undoBatch(() => { + if (newPoint && arr) { + undoable(() => { const doc = Docs.Create.ImageDocument(arr[1], { _width: 300, title: arr[1], @@ -107,7 +110,7 @@ export class PreviewCursor extends ObservableReactComponent<{}> { }); ImageUtils.ExtractImgInfo(doc); this._addDocument?.(doc); - })(); + }, 'paste image doc')(); } } else if (e.clipboardData.items.length && newPoint) { const batch = UndoManager.StartBatch('collection view drop'); @@ -196,8 +199,12 @@ export class PreviewCursor extends ObservableReactComponent<{}> { } render() { return !this._clickPoint || !this.Visible ? null : ( - // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex - <div className="previewCursor" onBlur={this.onBlur} tabIndex={0} ref={e => e?.focus()} style={{ color: lightOrDark(this.Doc?.backgroundColor ?? 'white'), transform: `translate(${this._clickPoint[0]}px, ${this._clickPoint[1]}px)` }}> + <div + className="previewCursor" + onBlur={this.onBlur} + tabIndex={0} + ref={e => e?.focus()} + style={{ color: lightOrDark(StrCast(this.Doc?.backgroundColor, 'white')), transform: `translate(${this._clickPoint[0]}px, ${this._clickPoint[1]}px)` }}> I </div> ); diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index edf6df2b9..f346d4ba8 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable react/no-unused-class-component-methods */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Dropdown, DropdownType, IListItemProps, Toggle, ToggleType, Type } from 'browndash-components'; @@ -18,7 +16,7 @@ import { TfiBarChart } from 'react-icons/tfi'; import { Doc, Opt } from '../../fields/Doc'; import { DocData } from '../../fields/DocSymbols'; import { ScriptField } from '../../fields/ScriptField'; -import { BoolCast, ScriptCast } from '../../fields/Types'; +import { BoolCast, ScriptCast, StrCast } from '../../fields/Types'; import { ImageField } from '../../fields/URLField'; import { DocUtils, IsFollowLinkScript } from '../documents/DocUtils'; import { CollectionViewType, DocumentType } from '../documents/DocumentTypes'; @@ -32,7 +30,7 @@ import { OpenWhere } from './nodes/OpenWhere'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; @observer -export class PropertiesButtons extends React.Component<{}, {}> { +export class PropertiesButtons extends React.Component { // eslint-disable-next-line no-use-before-define @observable public static Instance: PropertiesButtons; @@ -314,13 +312,6 @@ export class PropertiesButtons extends React.Component<{}, {}> { // ); // } - @undoBatch - handlePerspectiveChange = (e: any) => { - this.selectedDoc && (this.selectedDoc._type_collection = e.target.value); - DocumentView.Selected().forEach(docView => { - docView.layoutDoc._type_collection = e.target.value; - }); - }; @computed get onClickVal() { const linkButton = IsFollowLinkScript(this.selectedDoc.onClick); const followLoc = this.selectedDoc._followLinkLocation; @@ -452,7 +443,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { else this.selectedDoc && DocUtils.makeCustomViewClicked(this.selectedDoc, undefined, 'onClick'); }; - propertyToggleBtn = (label: (on?: any) => string, property: string, tooltip: (on?: any) => string, icon: (on?: any) => any, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => { + propertyToggleBtn = (label: (on?: unknown) => string, property: string, tooltip: (on?: unknown) => string, icon: (on?: unknown) => unknown, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => { const targetDoc = useUserDoc ? Doc.UserDoc() : this.selectedLayoutDoc; const onPropToggle = (dv: Opt<DocumentView>, doc: Doc, prop: string) => { (dv?.layoutDoc || doc)[prop] = !(dv?.layoutDoc || doc)[prop]; @@ -463,7 +454,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { tooltip={tooltip(BoolCast(targetDoc[property]))} text={label(targetDoc?.[property])} color={SettingsManager.userColor} - icon={icon(targetDoc?.[property] as any)} + icon={icon(targetDoc?.[property]) as string} iconPlacement="left" align="flex-start" fillWidth @@ -484,7 +475,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const isImage = layoutField instanceof ImageField; const isMap = this.selectedDoc?.type === DocumentType.MAP; const isCollection = this.selectedDoc?.type === DocumentType.COL; - const isStacking = [CollectionViewType.Stacking, CollectionViewType.Masonry, CollectionViewType.NoteTaking].includes(this.selectedDoc?._type_collection as any); + const isStacking = [CollectionViewType.Stacking, CollectionViewType.Masonry, CollectionViewType.NoteTaking].includes(StrCast(this.selectedDoc?._type_collection) as CollectionViewType); const isFreeForm = this.selectedDoc?._type_collection === CollectionViewType.Freeform; const isTree = this.selectedDoc?._type_collection === CollectionViewType.Tree; const toggle = (ele: JSX.Element | null, style?: React.CSSProperties) => ( diff --git a/src/client/views/PropertiesDocBacklinksSelector.tsx b/src/client/views/PropertiesDocBacklinksSelector.tsx index edb55f341..e30d14eae 100644 --- a/src/client/views/PropertiesDocBacklinksSelector.tsx +++ b/src/client/views/PropertiesDocBacklinksSelector.tsx @@ -16,7 +16,7 @@ import { DocumentView } from './nodes/DocumentView'; type PropertiesDocBacklinksSelectorProps = { Document: Doc; - Stack?: any; + Stack?: string; hideTitle?: boolean; addDocTab(doc: Doc, location: OpenWhere): void; }; diff --git a/src/client/views/PropertiesDocContextSelector.tsx b/src/client/views/PropertiesDocContextSelector.tsx index 1fea36d16..f494ff16a 100644 --- a/src/client/views/PropertiesDocContextSelector.tsx +++ b/src/client/views/PropertiesDocContextSelector.tsx @@ -1,6 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -/* eslint-disable jsx-a11y/anchor-is-valid */ import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -15,14 +12,14 @@ import { OpenWhere } from './nodes/OpenWhere'; type PropertiesDocContextSelectorProps = { DocView?: DocumentView; - Stack?: any; + Stack?: string; hideTitle?: boolean; addDocTab(doc: Doc, location: OpenWhere): void; }; @observer export class PropertiesDocContextSelector extends ObservableReactComponent<PropertiesDocContextSelectorProps> { - constructor(props: any) { + constructor(props: PropertiesDocContextSelectorProps) { super(props); makeObservable(this); } diff --git a/src/client/views/PropertiesSection.tsx b/src/client/views/PropertiesSection.tsx index b9a587719..12a46c7a4 100644 --- a/src/client/views/PropertiesSection.tsx +++ b/src/client/views/PropertiesSection.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable react/require-default-props */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed } from 'mobx'; @@ -12,7 +10,7 @@ export interface PropertiesSectionProps { title: string; children?: JSX.Element | string | null; isOpen: boolean; - setIsOpen: (bool: boolean) => any; + setIsOpen: (bool: boolean) => void; onDoubleClick?: () => void; } diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 58bb67120..daa8e1720 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1,7 +1,4 @@ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable prettier/prettier */ -import { IconLookup } from '@fortawesome/fontawesome-svg-core'; +import { IconLookup, IconProp } from '@fortawesome/fontawesome-svg-core'; import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Checkbox, Tooltip } from '@mui/material'; @@ -12,9 +9,10 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { ColorResult, SketchPicker } from 'react-color'; import * as Icons from 'react-icons/bs'; // {BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs" -import { ClientUtils, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../ClientUtils'; +import ResizeObserver from 'resize-observer-polyfill'; +import { ClientUtils, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../ClientUtils'; import { emptyFunction } from '../../Utils'; -import { Doc, Field, FieldResult, FieldType, HierarchyMapping, NumListCast, Opt, ReverseHierarchyMap, StrListCast } from '../../fields/Doc'; +import { Doc, Field, FieldResult, FieldType, HierarchyMapping, NumListCast, Opt, ReverseHierarchyMap, StrListCast, returnEmptyDoclist } from '../../fields/Doc'; import { AclAdmin, DocAcl, DocData } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; import { InkField } from '../../fields/InkField'; @@ -38,14 +36,12 @@ import { PropertiesDocBacklinksSelector } from './PropertiesDocBacklinksSelector import { PropertiesDocContextSelector } from './PropertiesDocContextSelector'; import { PropertiesSection } from './PropertiesSection'; import './PropertiesView.scss'; -import { DefaultStyleProvider, SetFilterOpener as SetPropertiesFilterOpener } from './StyleProvider'; +import { DefaultStyleProvider, SetFilterOpener as SetPropertiesFilterOpener, returnEmptyDocViewList } from './StyleProvider'; import { DocumentView } from './nodes/DocumentView'; import { StyleProviderFuncType } from './nodes/FieldView'; import { OpenWhere } from './nodes/OpenWhere'; import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails'; -const _global = (window /* browser */ || global) /* node */ as any; - interface PropertiesViewProps { width: number; height: number; @@ -58,8 +54,8 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps private _widthUndo?: UndoManager.Batch; // eslint-disable-next-line no-use-before-define - public static Instance: PropertiesView; - constructor(props: any) { + public static Instance: PropertiesView | undefined; + constructor(props: PropertiesViewProps) { super(props); makeObservable(this); PropertiesView.Instance = this; @@ -142,7 +138,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps return this.selectedDoc?.isGroup; } @computed get isStack() { - return [CollectionViewType.Masonry, CollectionViewType.Multicolumn, CollectionViewType.Multirow, CollectionViewType.Stacking, CollectionViewType.NoteTaking].includes(this.selectedDoc?.type_collection as any); + return [CollectionViewType.Masonry, CollectionViewType.Multicolumn, CollectionViewType.Multirow, CollectionViewType.Stacking, CollectionViewType.NoteTaking].includes(this.selectedDoc?.type_collection as CollectionViewType); } rtfWidth = () => (!this.selectedLayoutDoc ? 0 : Math.min(NumCast(this.selectedLayoutDoc?._width), this._props.width - 20)); @@ -275,7 +271,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps @observable transform: Transform = Transform.Identity(); getTransform = () => this.transform; propertiesDocViewRef = (ref: HTMLDivElement) => { - const resizeObserver = new _global.ResizeObserver( + const resizeObserver = new ResizeObserver( action(() => { const cliRect = ref.getBoundingClientRect(); this.transform = new Transform(-cliRect.x, -cliRect.y, 1); @@ -326,7 +322,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps renderDepth={1} fitContentsToBox={returnTrue} styleProvider={DefaultStyleProvider} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} dontCenter="y" isDocumentActive={returnFalse} isContentActive={emptyFunction} @@ -357,7 +353,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps * Handles the changing of a user's permissions from the permissions panel. */ @undoBatch - changePermissions = (e: any, user: string) => { + changePermissions = (e: React.ChangeEvent<HTMLSelectElement>, user: string) => { const docs = DocumentView.Selected().length < 2 ? [this.selectedDoc] : DocumentView.Selected().map(dv => (this.layoutDocAcls ? dv.layoutDoc : dv.dataDoc)); SharingManager.Instance.shareFromPropertiesSidebar(user, e.currentTarget.value as SharingPermissions, docs, this.layoutDocAcls); }; @@ -456,7 +452,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps /** * Sorting algorithm to sort users. */ - sortUsers = (u1: String, u2: String) => (u1 > u2 ? -1 : u1 === u2 ? 0 : 1); + sortUsers = (u1: string, u2: string) => (u1 > u2 ? -1 : u1 === u2 ? 0 : 1); /** * Sorting algorithm to sort groups. @@ -711,7 +707,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps ); } - inputBox = (key: string, value: any, setter: (val: string) => {}, title: string) => ( + inputBox = (key: string, value: string | number | undefined, setter: (val: string) => void, title: string) => ( <div className="inputBox" style={{ @@ -721,17 +717,29 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="inputBox-title"> {title} </div> <input className="inputBox-input" type="text" value={value} style={{ color: SnappingManager.userColor, backgroundColor: SnappingManager.userBackgroundColor }} onChange={e => setter(e.target.value)} onKeyDown={e => e.stopPropagation()} /> <div className="inputBox-button"> - <div className="inputBox-button-up" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons('up', key)))}> + <div + className="inputBox-button-up" + key="up2" + onPointerDown={undoable( + action(() => this.upDownButtons('up', key)), + 'down btn' + )}> <FontAwesomeIcon icon="caret-up" size="sm" /> </div> - <div className="inputbox-Button-down" key="down2" onPointerDown={undoBatch(action(() => this.upDownButtons('down', key)))}> + <div + className="inputbox-Button-down" + key="down2" + onPointerDown={undoable( + action(() => this.upDownButtons('down', key)), + 'up btn' + )}> <FontAwesomeIcon icon="caret-down" size="sm" /> </div> </div> </div> ); - inputBoxDuo = (key: string, value: any, setter: (val: string) => {}, title1: string, key2: string, value2: any, setter2: (val: string) => {}, title2: string) => ( + inputBoxDuo = (key: string, value: string | number | undefined, setter: (val: string) => void, title1: string, key2: string, value2: string | number | undefined, setter2: (val: string) => void, title2: string) => ( <div className="inputBox-duo"> {this.inputBox(key, value, setter, title1)} {title2 === '' ? null : this.inputBox(key2, value2, setter2, title2)} @@ -841,7 +849,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps @observable private _fillBtn = false; @observable private _lineBtn = false; - private _lastDash: any = '2'; + private _lastDash: string = '2'; @computed get colorFil() { return StrCast(this.selectedDoc?.[DocData].fillColor); } // prettier-ignore set colorFil(value) { this.selectedDoc && (this.selectedDoc[DocData].fillColor = value || undefined); } // prettier-ignore @@ -917,7 +925,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps ); } - @computed get dashdStk() { return this.selectedDoc?.stroke_dash || ''; } // prettier-ignore + @computed get dashdStk() { return StrCast(this.selectedDoc?.stroke_dash); } // prettier-ignore set dashdStk(value) { value && (this._lastDash = value); this.selectedDoc && (this.selectedDoc[DocData].stroke_dash = value ? this._lastDash : undefined); @@ -939,14 +947,26 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps this.selectedDoc && (this.selectedDoc[DocData].stroke_endMarker = value); } - regInput = (key: string, value: any, setter: (val: string) => {}) => ( + regInput = (key: string, value: string | number | undefined, setter: (val: string) => void) => ( <div className="inputBox"> <input className="inputBox-input" type="text" value={value} style={{ color: SnappingManager.userColor, backgroundColor: SnappingManager.userBackgroundColor }} onChange={e => setter(e.target.value)} /> <div className="inputBox-button"> - <div className="inputBox-button-up" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons('up', key)))}> + <div + className="inputBox-button-up" + key="up2" + onPointerDown={undoable( + action(() => this.upDownButtons('up', key)), + 'up' + )}> <FontAwesomeIcon icon="caret-up" size="sm" /> </div> - <div className="inputbox-Button-down" key="down2" onPointerDown={undoBatch(action(() => this.upDownButtons('down', key)))}> + <div + className="inputbox-Button-down" + key="down2" + onPointerDown={undoable( + action(() => this.upDownButtons('down', key)), + 'down' + )}> <FontAwesomeIcon icon="caret-down" size="sm" /> </div> </div> @@ -1002,7 +1022,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps className="arrows-head-input" type="checkbox" checked={this.markHead !== ''} - onChange={undoBatch(action(() => { this.markHead = this.markHead ? '' : 'arrow'; }))} + onChange={undoable(action(() => { this.markHead = this.markHead ? '' : 'arrow'; }), "change arrow head")} /> </div> <div className="arrows-tail"> @@ -1012,8 +1032,8 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps className="arrows-tail-input" type="checkbox" checked={this.markTail !== ''} - onChange={undoBatch( - action(() => { this.markTail = this.markTail ? '' : 'arrow'; }) + onChange={undoable( + action(() => { this.markTail = this.markTail ? '' : 'arrow'; }) ,"change arrow tail" )} /> </div> @@ -1044,7 +1064,8 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps setFinalNumber = () => { this._sliderBatch?.end(); }; - getNumber = (label: string, unit: string, min: number, max: number, number: number, setNumber: any, autorange?: number, autorangeMinVal?: number) => ( + + getNumber = (label: string, unit: string, min: number, max: number, number: number, setNumber: (val: number) => void, autorange?: number, autorangeMinVal?: number) => ( <div key={label + (this.selectedDoc?.title ?? '')}> <NumberInput formLabel={label} formLabelPlacement="left" type={Type.SEC} unit={unit} fillWidth color={this.color} number={number} setNumber={setNumber} min={min} max={max} /> <Slider @@ -1234,7 +1255,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps } @computed get description() { - return Field.toString(this.selectedLink?.link_description as any as FieldType); + return Field.toString(this.selectedLink?.link_description as FieldType); } @computed get relationship() { return StrCast(this.selectedLink?.link_relationship); @@ -1332,7 +1353,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div style={{ ...opts, border: direction === PresEffectDirection.Center ? `solid 2px ${color}` : undefined, borderRadius: '20%', cursor: 'pointer', gridColumn, gridRow, justifySelf: 'center', background: color, color: 'black' }} onClick={() => this.changeEffectDirection(direction)}> - {icon ? <FontAwesomeIcon icon={icon as any} /> : null} + {icon ? <FontAwesomeIcon icon={icon as IconProp} /> : null} </div> </Tooltip> ); @@ -1368,7 +1389,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps e, returnFalse, emptyFunction, - undoBatch(action(() => { this.selectedLink && (this.selectedLink[prop] = !this.selectedLink[prop]); })) // prettier-ignore + undoable(action(() => { this.selectedLink && (this.selectedLink[prop] = !this.selectedLink[prop]); }), `toggle prop: ${prop}`) // prettier-ignore ); }; @@ -1385,17 +1406,17 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps return selAnchor ?? (this.selectedLink && this.destinationAnchor ? Doc.getOppositeAnchor(this.selectedLink, this.destinationAnchor) : this.selectedLink); } - toggleAnchorProp = (e: React.PointerEvent, prop: string, anchor?: Doc, value: any = true, ovalue: any = false, cb: (val: any) => any = val => val) => { + toggleAnchorProp = (e: React.PointerEvent, prop: string, anchor?: Doc, value: FieldType = true, ovalue: FieldType = false, cb: (val: FieldType) => void = val => val) => { anchor && setupMoveUpEvents( this, e, returnFalse, emptyFunction, - undoBatch(action(() => { + undoable(action(() => { anchor[prop] = anchor[prop] === value ? ovalue : value; - this.selectedDoc && cb(anchor[prop]); - })) // prettier-ignore + this.selectedDoc && cb(anchor[prop] as boolean); + }), `toggle anchor prop: ${prop}`) // prettier-ignore ); }; @@ -1433,7 +1454,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps } // Converts seconds to ms and updates presTransition - setZoom = (number: String, change?: number) => { + setZoom = (number: string, change?: number) => { let scale = Number(number) / 100; if (change) scale += change; if (scale < 0.01) scale = 0.01; @@ -1530,7 +1551,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline"> <p>Play Target Audio</p> { - // eslint-disable-next-line jsx-a11y/control-has-associated-label <button type="button" style={{ background: !this.sourceAnchor?.followLinkAudio ? '' : '#4476f7', borderRadius: 3 }} @@ -1544,7 +1564,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline"> <p>Play Target Video</p> { - // eslint-disable-next-line jsx-a11y/control-has-associated-label <button type="button" style={{ background: !this.sourceAnchor?.followLinkVideo ? '' : '#4476f7', borderRadius: 3 }} @@ -1558,7 +1577,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline"> <p>Zoom Text Selections</p> { - // eslint-disable-next-line jsx-a11y/control-has-associated-label <button type="button" style={{ background: !this.sourceAnchor?.followLinkZoomText ? '' : '#4476f7', borderRadius: 3 }} @@ -1572,7 +1590,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline"> <p>Toggle Follow to Outer Context</p> { - // eslint-disable-next-line jsx-a11y/control-has-associated-label <button type="button" style={{ background: !this.sourceAnchor?.followLinkToOuterContext ? '' : '#4476f7', borderRadius: 3 }} @@ -1586,7 +1603,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline"> <p>Toggle Target (Show/Hide)</p> { - // eslint-disable-next-line jsx-a11y/control-has-associated-label <button type="button" style={{ background: !this.sourceAnchor?.followLinkToggle ? '' : '#4476f7', borderRadius: 3 }} @@ -1600,7 +1616,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline"> <p>Ease Transitions</p> { - // eslint-disable-next-line jsx-a11y/control-has-associated-label <button type="button" style={{ background: this.sourceAnchor?.followLinkEase === 'linear' ? '' : '#4476f7', borderRadius: 3 }} @@ -1614,7 +1629,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline"> <p>Capture Offset to Target</p> { - // eslint-disable-next-line jsx-a11y/control-has-associated-label <button type="button" style={{ background: this.sourceAnchor?.followLinkXoffset === undefined ? '' : '#4476f7', borderRadius: 3 }} @@ -1631,7 +1645,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline"> <p>Center Target (no zoom)</p> { - // eslint-disable-next-line jsx-a11y/control-has-associated-label <button type="button" style={{ background: this.sourceAnchor?.followLinkZoom ? '' : '#4476f7', borderRadius: 3 }} @@ -1647,16 +1660,15 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="ribbon-property" style={{ display: !targZoom ? 'none' : 'inline-flex' }}> <input className="presBox-input" style={{ width: '100%', color: SnappingManager.userColor, backgroundColor: SnappingManager.userBackgroundColor }} readOnly type="number" value={zoom} /> <div className="ribbon-propertyUpDown" style={{ display: 'flex', flexDirection: 'column' }}> - <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), 0.1))}> + <div className="ribbon-propertyUpDownItem" onClick={undoable(() => this.setZoom(String(zoom), 0.1), 'Zoom out')}> <FontAwesomeIcon icon="caret-up" /> </div> - <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), -0.1))}> + <div className="ribbon-propertyUpDownItem" onClick={undoable(() => this.setZoom(String(zoom), -0.1), 'Zoom in')}> <FontAwesomeIcon icon="caret-down" /> </div> </div> </div> { - // eslint-disable-next-line jsx-a11y/control-has-associated-label <button type="button" style={{ background: !targZoom || this.sourceAnchor?.followLinkZoomScale === 0 ? '' : '#4476f7', borderRadius: 3, gridColumn: 3 }} @@ -1746,8 +1758,8 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps } if (this.isPres && PresBox.Instance) { const selectedItem: boolean = PresBox.Instance.selectedArray.size > 0; - const type = [DocumentType.AUDIO, DocumentType.VID].includes(DocCast(PresBox.Instance.activeItem?.annotationOn)?.type as any as DocumentType) - ? (DocCast(PresBox.Instance.activeItem?.annotationOn)?.type as any as DocumentType) + const type = [DocumentType.AUDIO, DocumentType.VID].includes(DocCast(PresBox.Instance.activeItem?.annotationOn)?.type as DocumentType) + ? (DocCast(PresBox.Instance.activeItem?.annotationOn)?.type as DocumentType) : PresBox.targetRenderedDoc(PresBox.Instance.activeItem)?.type; return ( <div className="propertiesView" style={{ width: this._props.width }}> diff --git a/src/client/views/ScriptingRepl.tsx b/src/client/views/ScriptingRepl.tsx index 1a2eb460f..2de867746 100644 --- a/src/client/views/ScriptingRepl.tsx +++ b/src/client/views/ScriptingRepl.tsx @@ -1,6 +1,4 @@ /* eslint-disable react/no-array-index-key */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; @@ -14,21 +12,26 @@ import { OverlayView } from './OverlayView'; import './ScriptingRepl.scss'; import { DocumentIconContainer } from './nodes/DocumentIcon'; import { DocumentView } from './nodes/DocumentView'; +import { returnFalse, setupMoveUpEvents } from '../../ClientUtils'; +import { emptyFunction } from '../../Utils'; +import { ObjectField } from '../../fields/ObjectField'; +import { RefField } from '../../fields/RefField'; +import { Doc, FieldResult, FieldType, Opt } from '../../fields/Doc'; interface replValueProps { scrollToBottom: () => void; - value: any; + value: Opt<FieldResult | Promise<RefField | undefined>>; name?: string; } @observer export class ScriptingValueDisplay extends ObservableReactComponent<replValueProps> { - constructor(props: any) { + constructor(props: replValueProps) { super(props); makeObservable(this); } render() { - const val = this._props.name ? this._props.value[this._props.name] : this._props.value; + const val = this._props.value instanceof Doc && this._props.name ? this._props.value[this._props.name] : this._props.value; const title = (name: string) => ( <> {this._props.name ? <b>{this._props.name} : </b> : <> </>} @@ -47,13 +50,14 @@ export class ScriptingValueDisplay extends ObservableReactComponent<replValuePro } interface ReplProps { scrollToBottom: () => void; - value: { [key: string]: any }; + value: Opt<FieldResult | Promise<RefField | undefined>>; name?: string; } +@observer export class ScriptingObjectDisplay extends ObservableReactComponent<ReplProps> { @observable collapsed = true; - constructor(props: any) { + constructor(props: ReplProps) { super(props); makeObservable(this); } @@ -74,10 +78,12 @@ export class ScriptingObjectDisplay extends ObservableReactComponent<ReplProps> {name} </> ); + if (val === undefined) return '--undefined--'; + if (val instanceof Promise) return '...Promise...'; if (this.collapsed) { return ( <div className="scriptingObject-collapsed"> - <span onClick={this.toggle} className="scriptingObject-icon scriptingObject-iconCollapsed"> + <span onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, this.toggle)} className="scriptingObject-icon scriptingObject-iconCollapsed"> <FontAwesomeIcon icon="caret-right" size="sm" /> </span> {title} (+{Object.keys(val).length}) @@ -94,8 +100,7 @@ export class ScriptingObjectDisplay extends ObservableReactComponent<ReplProps> </div> <div className="scriptingObject-fields"> {Object.keys(val).map(key => ( - // eslint-disable-next-line react/jsx-props-no-spreading - <ScriptingValueDisplay {...this._props} name={key} /> + <ScriptingValueDisplay name={key} key={key} value={this._props.value} scrollToBottom={this._props.scrollToBottom} /> ))} </div> </div> @@ -104,13 +109,13 @@ export class ScriptingObjectDisplay extends ObservableReactComponent<ReplProps> } @observer -export class ScriptingRepl extends ObservableReactComponent<{}> { - constructor(props: any) { +export class ScriptingRepl extends ObservableReactComponent<object> { + constructor(props: object) { super(props); makeObservable(this); } - @observable private commands: { command: string; result: any }[] = []; + @observable private commands: { command: string; result: unknown }[] = []; private commandsHistory: string[] = []; @observable private commandString: string = ''; @@ -120,13 +125,11 @@ export class ScriptingRepl extends ObservableReactComponent<{}> { private commandsRef = React.createRef<HTMLDivElement>(); - private args: any = {}; - getTransformer = (): Transformer => ({ transformer: context => { const knownVars: { [name: string]: number } = {}; const usedDocuments: number[] = []; - ScriptingGlobals.getGlobals().forEach((global: any) => { + ScriptingGlobals.getGlobals().forEach((global: string) => { knownVars[global] = 1; }); return root => { @@ -168,7 +171,7 @@ export class ScriptingRepl extends ObservableReactComponent<{}> { switch (e.key) { case 'Enter': { e.stopPropagation(); - const docGlobals: { [name: string]: any } = {}; + const docGlobals: { [name: string]: FieldType } = {}; DocumentView.allViews().forEach((dv, i) => { docGlobals[`d${i}`] = dv.Document; }); @@ -176,19 +179,20 @@ export class ScriptingRepl extends ObservableReactComponent<{}> { const script = CompileScript(this.commandString, { typecheck: false, addReturn: true, editable: true, params: { args: 'any' }, transformer: this.getTransformer(), globals }); if (!script.compiled) { this.commands.push({ command: this.commandString, result: script.errors }); + this.maybeScrollToBottom(); return; } - const result = undoable(() => script.run({ args: this.args }, () => this.commands.push({ command: this.commandString, result: e.toString() })), 'run:' + this.commandString)(); + const result = undoable(() => script.run({}, e => this.commands.push({ command: this.commandString, result: e as string })), 'run:' + this.commandString)(); if (result.success) { this.commands.push({ command: this.commandString, result: result.result }); this.commandsHistory.push(this.commandString); - this.maybeScrollToBottom(); - this.commandString = ''; this.commandBuffer = ''; this.historyIndex = -1; } + + this.maybeScrollToBottom(); break; } case 'ArrowUp': { @@ -232,7 +236,7 @@ export class ScriptingRepl extends ObservableReactComponent<{}> { private shouldScroll: boolean = false; private maybeScrollToBottom = () => { const ele = this.commandsRef.current; - if (ele && ele.scrollTop === ele.scrollHeight - ele.offsetHeight) { + if (ele && Math.abs(Math.ceil(ele.scrollTop) - (ele.scrollHeight - ele.offsetHeight)) < 2) { this.shouldScroll = true; this.forceUpdate(); } @@ -240,14 +244,14 @@ export class ScriptingRepl extends ObservableReactComponent<{}> { private scrollToBottom() { const ele = this.commandsRef.current; - ele && ele.scroll({ behavior: 'auto', top: ele.scrollHeight }); + ele?.scroll({ behavior: 'smooth', top: ele.scrollHeight }); } - componentDidUpdate(prevProps: Readonly<{}>) { + componentDidUpdate(prevProps: Readonly<object>) { super.componentDidUpdate(prevProps); if (this.shouldScroll) { this.shouldScroll = false; - this.scrollToBottom(); + setTimeout(() => this.scrollToBottom(), 0); } } @@ -269,7 +273,7 @@ export class ScriptingRepl extends ObservableReactComponent<{}> { {command || <br />} </div> <div className="scriptingRepl-commandResult" style={{ background: SnappingManager.userBackgroundColor }}> - <ScriptingValueDisplay scrollToBottom={this.maybeScrollToBottom} value={result} /> + <ScriptingValueDisplay scrollToBottom={this.maybeScrollToBottom} value={result as ObjectField | RefField} /> </div> </div> ))} diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx index 9b70f1ca7..8f0a35df0 100644 --- a/src/client/views/SidebarAnnos.tsx +++ b/src/client/views/SidebarAnnos.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -40,7 +38,7 @@ interface ExtraProps { } @observer export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & ExtraProps> { - constructor(props: any) { + constructor(props: FieldViewProps & ExtraProps) { super(props); makeObservable(this); } @@ -85,7 +83,7 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr }); Doc.SetSelectOnLoad(target); FormattedTextBox.DontSelectInitialText = true; - const link = DocUtils.MakeLink(anchor, target, { link_relationship: 'inline comment:comment on' }); + DocUtils.MakeLink(anchor, target, { link_relationship: 'inline comment:comment on' }); const taggedContent = this.childFilters() .filter(data => data.split(':')[0]) @@ -102,7 +100,7 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr }); if (!anchor.text) anchor[DocData].text = '-selection-'; - const textLines: any = [ + const textLines: { type: string; attrs: object; content?: unknown[] }[] = [ { type: 'paragraph', attrs: { align: null, color: null, id: null, indent: null, inset: null, lineSpacing: null, paddingBottom: null, paddingTop: null }, @@ -222,7 +220,7 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr pointerEvents: this._props.isContentActive() ? 'all' : undefined, top: this._props.Document.type !== DocumentType.RTF && StrCast(this._props.Document._layout_showTitle) === 'title' ? 15 : 0, right: 0, - background: this._props.styleProvider?.(this._props.Document, this._props, StyleProp.WidgetColor), + background: this._props.styleProvider?.(this._props.Document, this._props, StyleProp.WidgetColor) as string, width: `100%`, height: '100%', }}> diff --git a/src/client/views/StyleProvider.scss b/src/client/views/StyleProvider.scss index 1d41697f5..ce00f6101 100644 --- a/src/client/views/StyleProvider.scss +++ b/src/client/views/StyleProvider.scss @@ -53,64 +53,3 @@ .styleProvider-treeView-icon { opacity: 0; } - -.keywords-container { - display: flex; - flex-wrap: wrap; - flex-direction: column; - border: 1px solid; - border-radius: 4px; -} - -.keywords-list { - display: flex; - flex-wrap: wrap; -} - -.keyword { - padding: 5px 5px; - background-color: lightblue; - border: 1px solid black; - border-radius: 5px; - white-space: nowrap; - display: flex; - align-items: center; -} - -.keyword-suggestions-box { - display: flex; - flex-wrap: wrap; - margin: auto; - align-self: center; - width: 90%; - border: 1px solid black; - border-radius: 2px; - margin-top: 8px; -} - -.keyword-suggestion { - cursor: pointer; - padding: 1px 1px; - margin: 2px 2px; - background-color: lightblue; - border: 1px solid black; - border-radius: 5px; - white-space: nowrap; - display: flex; - align-items: center; -} - -.keyword-editing-box { - margin-top: 8px; -} - -.keyword-input-box { - margin: auto; - align-self: center; - width: 90%; -} - -.keyword-buttons { - margin-left: auto; - width: 10%; -} diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 55e6217ff..12aaf0b39 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -1,6 +1,3 @@ -/* eslint-disable jsx-a11y/alt-text */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; @@ -12,20 +9,18 @@ import { BsArrowDown, BsArrowDownUp, BsArrowUp } from 'react-icons/bs'; import { FaFilter } from 'react-icons/fa'; import { ClientUtils, DashColor, lightOrDark } from '../../ClientUtils'; import { Doc, Opt, StrListCast } from '../../fields/Doc'; -import { DocData } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; -import { List } from '../../fields/List'; import { ScriptField } from '../../fields/ScriptField'; import { BoolCast, Cast, DocCast, ImageCast, NumCast, ScriptCast, StrCast } from '../../fields/Types'; import { AudioAnnoState } from '../../server/SharedMediaTypes'; -import { emptyPath } from '../../Utils'; import { CollectionViewType, DocumentType } from '../documents/DocumentTypes'; import { IsFollowLinkScript } from '../documents/DocUtils'; import { SnappingManager } from '../util/SnappingManager'; -import { undoBatch, UndoManager } from '../util/UndoManager'; +import { undoable, UndoManager } from '../util/UndoManager'; import { TreeSort } from './collections/TreeSort'; import { Colors } from './global/globalEnums'; -import { KeywordBox } from './KeywordBox'; +import { TagsView } from './TagsView'; +import { CollectionFreeFormDocumentView } from './nodes/CollectionFreeFormDocumentView'; import { DocumentView, DocumentViewProps } from './nodes/DocumentView'; import { FieldViewProps } from './nodes/FieldView'; import { StyleProp } from './StyleProp'; @@ -47,13 +42,13 @@ function togglePaintView(e: React.MouseEvent, doc: Opt<Doc>, props: Opt<FieldVie } export function styleFromLayoutString(doc: Doc, props: FieldViewProps, scale: number) { - const style: { [key: string]: any } = {}; + const style: { [key: string]: string } = {}; const divKeys = ['width', 'height', 'fontSize', 'transform', 'left', 'backgroundColor', 'left', 'right', 'top', 'bottom', 'pointerEvents', 'position']; - const replacer = (match: any, expr: string) => + const replacer = (match: string, expr: string) => // bcz: this executes a script to convert a property expression string: { script } into a value ScriptField.MakeFunction(expr, { this: Doc.name, scale: 'number' })?.script.run({ this: doc, scale }).result?.toString() ?? ''; divKeys.forEach((prop: string) => { - const p = (props as any)[prop]; + const p = (props as FieldViewProps & { [key: string]: unknown })[prop]; typeof p === 'string' && (style[prop] = p?.replace(/{([^.'][^}']+)}/g, replacer)); }); return style; @@ -76,7 +71,7 @@ export function SetFilterOpener(func: () => void) { // a preliminary implementation of a dash style sheet for setting rendering properties of documents nested within a Tab // -export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & DocumentViewProps>, property: string): any { +export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & DocumentViewProps>, property: string) { const remoteDocHeader = 'author;author_date;noMargin'; const isCaption = property.includes(':caption'); const isAnchor = property.includes(':anchor'); @@ -112,11 +107,11 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & const fieldKey = fieldKeyProp ? fieldKeyProp + '_' : isCaption ? 'caption_' : ''; const isInk = () => layoutDoc?._layout_isSvg && !LayoutTemplateString; const lockedPosition = () => doc && BoolCast(doc._lockedPosition); - const titleHeight = () => styleProvider?.(doc, props, StyleProp.TitleHeight); - const backgroundCol = () => styleProvider?.(doc, props, StyleProp.BackgroundColor + ':nonTransparent' + (isNonTransparentLevel + 1)); - const color = () => styleProvider?.(doc, props, StyleProp.Color); + const titleHeight = () => styleProvider?.(doc, props, StyleProp.TitleHeight) as number; + const backgroundCol = () => styleProvider?.(doc, props, StyleProp.BackgroundColor + ':nonTransparent' + (isNonTransparentLevel + 1)) as string; + const color = () => styleProvider?.(doc, props, StyleProp.Color) as string; const opacity = () => styleProvider?.(doc, props, StyleProp.Opacity); - const layoutShowTitle = () => styleProvider?.(doc, props, StyleProp.ShowTitle); + const layoutShowTitle = () => styleProvider?.(doc, props, StyleProp.ShowTitle) as string; // prettier-ignore switch (property.split(':')[0]) { case StyleProp.TreeViewIcon: { @@ -148,7 +143,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & highlightStyle: doc.isGroup ? "dotted": highlightStyle, highlightColor, highlightIndex, - highlightStroke: layoutDoc?.layout_isSvg, + highlightStroke: BoolCast(layoutDoc?.layout_isSvg), }; } } @@ -156,7 +151,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & case StyleProp.DocContents: return undefined; case StyleProp.WidgetColor: return isAnnotated ? Colors.LIGHT_BLUE : 'dimgrey'; case StyleProp.Opacity: return componentView?.isUnstyledView?.() ? 1 : Cast(doc?._opacity, "number", Cast(doc?.opacity, 'number', null)); - case StyleProp.FontColor: return StrCast(doc?.[fieldKey + 'fontColor'], isCaption ? lightOrDark(backgroundCol()) : StrCast(Doc.UserDoc().fontColor, color())); + case StyleProp.FontColor: return StrCast(doc?.[fieldKey + 'fontColor'], isCaption ? lightOrDark(backgroundCol()) : StrCast(Doc.UserDoc().fontColor, color())); case StyleProp.FontSize: return StrCast(doc?.[fieldKey + 'fontSize'], StrCast(Doc.UserDoc().fontSize)); case StyleProp.FontFamily: return StrCast(doc?.[fieldKey + 'fontFamily'], StrCast(Doc.UserDoc().fontFamily)); case StyleProp.FontWeight: return StrCast(doc?.[fieldKey + 'fontWeight'], StrCast(Doc.UserDoc().fontWeight)); @@ -172,7 +167,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & StrCast( doc._layout_showTitle, showTitle?.() || - (!Doc.IsSystem(doc) && [DocumentType.COL, DocumentType.FUNCPLOT, DocumentType.LABEL, DocumentType.RTF, DocumentType.IMG, DocumentType.VID].includes(doc.type as any) + (!Doc.IsSystem(doc) && [DocumentType.COL, DocumentType.FUNCPLOT, DocumentType.LABEL, DocumentType.RTF, DocumentType.IMG, DocumentType.VID].includes(doc.type as DocumentType) ? doc.author === ClientUtils.CurrentUserEmail() ? StrCast(Doc.UserDoc().layout_showTitle) : remoteDocHeader @@ -211,7 +206,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & }; } case StyleProp.HeaderMargin: - return ([CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._type_collection as any) || + return ([CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._type_collection as CollectionViewType) || (doc?.type === DocumentType.RTF && !layoutShowTitle()?.includes('noMargin')) || doc?.type === DocumentType.LABEL) && layoutShowTitle() && @@ -242,6 +237,8 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & case DocumentType.MAP: case DocumentType.SCREENSHOT: case DocumentType.VID: docColor = docColor || (Colors.LIGHT_GRAY); break; + case DocumentType.UFACE: docColor = docColor || "dimgray";break; + case DocumentType.FACECOLLECTION: docColor = docColor || Colors.DARK_GRAY;break; case DocumentType.COL: docColor = docColor || (doc && Doc.IsSystem(doc) ? SnappingManager.userBackgroundColor @@ -301,8 +298,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & if (SnappingManager.ExploreMode || doc?.layout_unrendered) return isInk() ? 'visiblePainted' : 'all'; if (pointerEvents?.() === 'none') return 'none'; if (opacity() === 0) return 'none'; - if (isGroupActive?.() ) return isInk() ? 'visiblePainted': (doc?. - isGroup )? undefined: 'all' + if (isGroupActive?.() ) return isInk() ? 'visiblePainted': (doc?.isGroup ) ? undefined: 'all'; if (isDocumentActive?.()) return isInk() ? 'visiblePainted' : 'all'; return undefined; // fixes problem with tree view elements getting pointer events when the tree view is not active case StyleProp.Decorations: { @@ -333,11 +329,12 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & // eslint-disable-next-line react/no-unstable-nested-components iconProvider={() => <div className='styleProvider-filterShift'><FaFilter/></div>} closeOnSelect - setSelectedVal={((dv: DocumentView) => { + setSelectedVal={((dvValue: unknown) => { + const dv = dvValue as DocumentView; dv.select(false); SnappingManager.SetPropertiesWidth(250); _filterOpener?.(); - }) as any // Dropdown assumes values are strings or numbers.. + }) // Dropdown assumes values are strings or numbers.. } size={Size.XSMALL} width={15} @@ -349,11 +346,9 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & background={showFilterIcon} items={[ ...(dashView ? [dashView]: []), ...(docViewPath?.()??[])] .filter(dv => StrListCast(dv?.Document.childFilters).length || StrListCast(dv?.Document.childRangeFilters).length) - .map(dv => ({ - text: StrCast(dv?.Document.title), - val: dv as any, - style: {color:SnappingManager.userColor, background:SnappingManager.userBackgroundColor}, - } as IListItemProps)) } + .map(dv => ({ text: StrCast(dv?.Document.title), + val: dv as unknown, + style: {color:SnappingManager.userColor, background:SnappingManager.userBackgroundColor} } as IListItemProps)) } /> </div> ); @@ -371,31 +366,22 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & </Tooltip> ); }; - const keywords = () => { - if (doc && doc![DocData].showLabels && (!doc[DocData].data_labels || (doc[DocData].data_labels as List<string>).length === 0)){ - return (<KeywordBox isEditing={true} doc={doc}></KeywordBox>) - } else if (doc && doc![DocData].data_labels && doc![DocData].showLabels) { - return (<KeywordBox isEditing={false} doc={doc}></KeywordBox>) - } - } + const tags = () => props?.DocumentView?.() && CollectionFreeFormDocumentView.from(props.DocumentView()) ? <TagsView View={props.DocumentView()}/> : null; - const iconTags = () => { - if (doc && doc![DocData].showIconTags) - {return (<IconTagBox doc= {doc}></IconTagBox>)} - } return ( <> {paint()} {lock()} {filter()} {audio()} - {keywords()} + {tags()} {iconTags()} </> ); } default: } + return undefined; } export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp, offIcon: IconProp, clickFunc?: () => void) { @@ -404,12 +390,13 @@ export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp, <IconButton size={Size.XSMALL} color={color} - icon={<FontAwesomeIcon icon={(doc[field] ? (onIcon as any) : offIcon) as IconProp} />} - onClick={undoBatch( + icon={<FontAwesomeIcon icon={doc[field] ? onIcon : offIcon} />} + onClick={undoable( action((e: React.MouseEvent) => { e.stopPropagation(); clickFunc ? clickFunc() : (doc[field] = doc[field] ? undefined : true); - }) + }), + 'toggle dashboard feature' )} /> ); @@ -427,5 +414,5 @@ export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps> } export function returnEmptyDocViewList() { - return emptyPath; + return [] as DocumentView[]; } diff --git a/src/client/views/TagsView.scss b/src/client/views/TagsView.scss new file mode 100644 index 000000000..24f9e86bc --- /dev/null +++ b/src/client/views/TagsView.scss @@ -0,0 +1,67 @@ +.tagsView-container { + display: flex; + flex-wrap: wrap; + flex-direction: column; + border: 1px solid; + border-radius: 4px; +} + +.tagsView-list { + display: flex; + flex-wrap: wrap; + .iconButton-container { + min-height: unset !important; + } +} + +.tagItem { + padding: 1px 5px; + background-color: lightblue; + border: 1px solid black; + border-radius: 5px; + white-space: nowrap; + display: flex; + align-items: center; +} + +.faceItem { + background-color: lightGreen; +} + +.tagsView-suggestions-box { + display: flex; + flex-wrap: wrap; + margin: auto; + align-self: center; + width: 90%; + border: 1px solid black; + border-radius: 2px; + margin-top: 8px; +} + +.tagsView-suggestion { + cursor: pointer; + padding: 1px 1px; + margin: 2px 2px; + background-color: lightblue; + border: 1px solid black; + border-radius: 5px; + white-space: nowrap; + display: flex; + align-items: center; +} + +.tagsView-editing-box { + margin-top: 8px; +} + +.tagsView-input-box { + margin: auto; + align-self: center; + width: 90%; +} + +.tagsView-buttons { + margin-left: auto; + width: 10%; +} diff --git a/src/client/views/TagsView.tsx b/src/client/views/TagsView.tsx new file mode 100644 index 000000000..0ac015b36 --- /dev/null +++ b/src/client/views/TagsView.tsx @@ -0,0 +1,390 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Button, Colors, IconButton } from 'browndash-components'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; +import { observer } from 'mobx-react'; +import React from 'react'; +import ResizeObserver from 'resize-observer-polyfill'; +import { returnFalse, setupMoveUpEvents } from '../../ClientUtils'; +import { emptyFunction } from '../../Utils'; +import { Doc, DocListCast, Field, Opt, StrListCast } from '../../fields/Doc'; +import { DocData } from '../../fields/DocSymbols'; +import { List } from '../../fields/List'; +import { DocCast, NumCast, StrCast } from '../../fields/Types'; +import { DocumentType } from '../documents/DocumentTypes'; +import { DragManager } from '../util/DragManager'; +import { SnappingManager } from '../util/SnappingManager'; +import { undoable } from '../util/UndoManager'; +import { ObservableReactComponent } from './ObservableReactComponent'; +import './TagsView.scss'; +import { DocumentView } from './nodes/DocumentView'; +import { FaceRecognitionHandler } from './search/FaceRecognitionHandler'; + +/** + * The TagsView is a metadata input/display panel shown at the bottom of a DocumentView in a freeform collection. + * + * This panel allow sthe user to add metadata tags to a Doc, and to display those tags, or any metadata field + * in a panel of 'buttons' (TagItems) just below the DocumentView. TagItems are interactive - + * the user can drag them off in order to display a collection of all documents that share the tag value. + * + * The tags that are added using the panel are the same as the #tags that can entered in a text Doc. + * Note that tags starting with #@ display a metadata key/value pair instead of the tag itself. + * e.g., '#@author' shows the document author + * + */ + +interface TagItemProps { + doc: Doc; + tag: string; + tagDoc: Opt<Doc>; + showRemoveUI: boolean; + setToEditing: () => void; +} + +/** + * Interactive component that display a single metadata tag or value. + * + * These items can be dragged and dropped to create a collection of Docs that + * share the same metadata tag / value. + */ +@observer +export class TagItem extends ObservableReactComponent<TagItemProps> { + /** + * return list of all tag Docs (ie, Doc that are collections of Docs sharing a specific tag / value) + */ + public static get AllTagCollectionDocs() { + return DocListCast(Doc.ActiveDashboard?.myTagCollections); + } + /** + * Find tag Doc that collects all Docs with given tag / value + * @param tag tag string + * @returns tag collection Doc or undefined + */ + public static findTagCollectionDoc = (tag: String) => TagItem.AllTagCollectionDocs.find(doc => doc.title === tag); + + /** + * Creates a Doc that collects Docs with the specified tag / value + * @param tag tag string + * @returns tag collection Doc + */ + public static createTagCollectionDoc = (tag: string) => { + const newTagCol = new Doc(); + newTagCol.title = tag; + newTagCol.collections = new List<Doc>(); + newTagCol[DocData].docs = new List<Doc>(); + Doc.ActiveDashboard && Doc.AddDocToList(Doc.ActiveDashboard, 'myTagCollections', newTagCol); + + return newTagCol; + }; + /** + * Gets all Docs that have the specified tag / value + * @param tag tag string + * @returns An array of documents that contain the tag. + */ + public static allDocsWithTag = (tag: string) => DocListCast(TagItem.findTagCollectionDoc(tag)?.[DocData].docs); + + /** + * Adds a tag to the metadata of this document and adds the Doc to the corresponding tag collection Doc (or creates it) + * @param tag tag string + */ + public static addTagToDoc = (doc: Doc, tag: string) => { + // If the tag collection is not in active Dashboard, add it as a new doc, with the tag as its title. + const tagCollection = TagItem.findTagCollectionDoc(tag) ?? TagItem.createTagCollectionDoc(tag); + + // If the document is of type COLLECTION, make it a smart collection, otherwise, add the tag to the document. + if (doc.type === DocumentType.COL) { + Doc.AddDocToList(tagCollection[DocData], 'collections', doc); + + // Iterate through the tag Doc collections and add a copy of the document to each collection + for (const cdoc of DocListCast(tagCollection[DocData].docs)) { + if (!DocListCast(doc[DocData].data).find(d => Doc.AreProtosEqual(d, cdoc))) { + const newEmbedding = Doc.MakeEmbedding(cdoc); + Doc.AddDocToList(doc[DocData], 'data', newEmbedding); + Doc.SetContainer(newEmbedding, doc); + } + } + } else { + // Add this document to the tag's collection of associated documents. + Doc.AddDocToList(tagCollection[DocData], 'docs', doc); + + // Iterate through the tag document's collections and add a copy of the document to each collection + for (const collection of DocListCast(tagCollection.collections)) { + if (!DocListCast(collection[DocData].data).find(d => Doc.AreProtosEqual(d, doc))) { + const newEmbedding = Doc.MakeEmbedding(doc); + Doc.AddDocToList(collection[DocData], 'data', newEmbedding); + Doc.SetContainer(newEmbedding, collection); + } + } + } + + if (!doc[DocData].tags) doc[DocData].tags = new List<string>(); + const tagList = doc[DocData].tags as List<string>; + if (!tagList.includes(tag)) tagList.push(tag); + }; + + /** + * Removes a tag from a Doc and removes the Doc from the corresponding tag collection Doc + * @param doc Doc to add tag + * @param tag tag string + * @param tagDoc doc that collections the Docs with the tag + */ + public static removeTagFromDoc = (doc: Doc, tag: string, tagDoc?: Doc) => { + if (doc[DocData].tags) { + if (doc.type === DocumentType.COL) { + tagDoc && Doc.RemoveDocFromList(tagDoc[DocData], 'collections', doc); + + for (const cur_doc of TagItem.allDocsWithTag(tag)) { + doc[DocData].data = new List<Doc>(DocListCast(doc[DocData].data).filter(d => !Doc.AreProtosEqual(cur_doc, d))); + } + } else { + tagDoc && Doc.RemoveDocFromList(tagDoc[DocData], 'docs', doc); + + for (const collection of DocListCast(tagDoc?.collections)) { + collection[DocData].data = new List<Doc>(DocListCast(collection[DocData].data).filter(d => !Doc.AreProtosEqual(doc, d))); + } + } + } + doc[DocData].tags = new List<string>((doc[DocData].tags as List<string>).filter(label => label !== tag)); + }; + + private _ref: React.RefObject<HTMLDivElement>; + + constructor(props: any) { + super(props); + makeObservable(this); + this._ref = React.createRef(); + } + + /** + * Creates a smart collection. + * @returns + */ + createTagCollection = () => { + if (!this._props.tagDoc) { + const face = FaceRecognitionHandler.FindUniqueFaceByName(this._props.tag); + return face ? Doc.MakeEmbedding(face) : undefined; + } + // Get the documents that contain the tag. + const newEmbeddings = TagItem.allDocsWithTag(this._props.tag).map(doc => Doc.MakeEmbedding(doc)); + + // Create a new collection and set up configurations. + const newCollection = ((doc: Doc) => { + const docData = doc[DocData]; + docData.data = new List<Doc>(newEmbeddings); + docData.title = this._props.tag; + docData.tags = new List<string>([this._props.tag]); + docData.showTags = true; + docData.freeform_fitContentsToBox = true; + doc._freeform_panX = doc._freeform_panY = 0; + doc._width = 900; + doc._height = 900; + doc.layout_fitWidth = true; + return doc; + })(Doc.MakeCopy(Doc.UserDoc().emptyCollection as Doc, true)); + newEmbeddings.forEach(embed => Doc.SetContainer(embed, newCollection)); + + // Add the collection to the tag document's list of associated smart collections. + this._props.tagDoc && Doc.AddDocToList(this._props.tagDoc, 'collections', newCollection); + return newCollection; + }; + + @action + handleDragStart = (e: React.PointerEvent) => { + setupMoveUpEvents( + this, + e, + () => { + const dragCollection = this.createTagCollection(); + if (dragCollection) { + const dragData = new DragManager.DocumentDragData([dragCollection]); + DragManager.StartDocumentDrag([this._ref.current!], dragData, e.clientX, e.clientY, {}); + return true; + } + return false; + }, + returnFalse, + emptyFunction + ); + e.preventDefault(); + }; + + render() { + this._props.tagDoc && setTimeout(() => TagItem.addTagToDoc(this._props.doc, this._props.tag)); // bcz: hack to make sure that Docs are added to their tag Doc collection since metadata can get set anywhere without a guard triggering an add to the collection + const tag = this._props.tag.replace(/^#/, ''); + const metadata = tag.startsWith('@') ? tag.replace(/^@/, '') : ''; + return ( + <div className={'tagItem' + (!this._props.tagDoc ? ' faceItem' : '')} onClick={this._props.setToEditing} onPointerDown={this.handleDragStart} ref={this._ref}> + {metadata ? ( + <span> + <b style={{ fontSize: 'smaller' }}>{tag} </b> + {Field.toString(this._props.doc[metadata])} + </span> + ) : ( + tag + )} + {this.props.showRemoveUI && this._props.tagDoc && ( + <IconButton + tooltip="Remove tag" + onPointerDown={undoable(() => TagItem.removeTagFromDoc(this._props.doc, this._props.tag, this._props.tagDoc), `remove tag ${this._props.tag}`)} + icon={<FontAwesomeIcon icon="times" size="sm" />} + style={{ width: '8px', height: '8px', marginLeft: '10px' }} + /> + )} + </div> + ); + } +} + +interface TagViewProps { + View: DocumentView; +} + +/** + * Displays a panel of tags that have been added to a Doc. Also allows for editing the applied tags through a dropdown UI. + */ +@observer +export class TagsView extends ObservableReactComponent<TagViewProps> { + constructor(props: any) { + super(props); + makeObservable(this); + } + + @observable _panelHeightDirty = 0; + @observable _currentInput = ''; + @observable _isEditing = !StrListCast(this._props.View.dataDoc.tags).length; + _heightDisposer: IReactionDisposer | undefined; + + componentDidMount() { + this._heightDisposer = reaction( + () => this._props.View.screenToContentsTransform(), + xf => { + this._panelHeightDirty = this._panelHeightDirty + 1; + } + ); + } + componentWillUnmount() { + this._heightDisposer?.(); + } + + @computed get currentScale() { + return NumCast(DocCast(this._props.View.Document.embedContainer)?._freeform_scale, 1); + } + @computed get isEditing() { + return this._isEditing && DocumentView.SelectedDocs().includes(this._props.View.Document); + } + + /** + * Shows or hides the editing UI for adding/removing Doc tags + * @param editing + */ + @action + setToEditing = (editing = true) => { + this._isEditing = editing; + editing && this._props.View.select(false); + }; + + /** + * Adds the specified tag to the Doc. If the tag is not prefixed with '#', then a '#' prefix is added. + * Whne the tag (after the '#') begins with '@', then a metadata key/value pair is displayed instead of + * just the tag. + * @param tag tag string to add + */ + submitTag = undoable( + action((tag: string) => { + const submittedLabel = tag.trim(); + submittedLabel && TagItem.addTagToDoc(this._props.View.Document, '#' + submittedLabel.replace(/^#/, '')); + this._currentInput = ''; // Clear the input box + }), + 'added doc label' + ); + + /** + * When 'showTags' is set on a Doc, this displays a wrapping panel of tagItemViews corresponding to all the tags set on the Doc). + * When the dropdown is clicked, this will toggle an extended UI that allows additional tags to be added/removed. + */ + render() { + const tagsList = new Set<string>(StrListCast(this._props.View.dataDoc.tags)); + const chatTagsList = new Set<string>(StrListCast(this._props.View.dataDoc.tags_chat)); + const facesList = new Set<string>( + DocListCast(this._props.View.dataDoc[Doc.LayoutFieldKey(this._props.View.Document) + '_annotations']) + .concat(this._props.View.Document) + .filter(d => d.face) + .map(doc => StrCast(DocCast(doc.face)?.title)) + ); + this._panelHeightDirty; + + return !this._props.View.Document.showTags ? null : ( + <div + className="tagsView-container" + ref={r => r && new ResizeObserver(action(() => (this._props.View.TagPanelHeight = r?.getBoundingClientRect().height ?? 0))).observe(r)} + style={{ + transformOrigin: 'top left', + maxWidth: `${100 * this.currentScale}%`, + width: 'max-content', + transform: `scale(${1 / this.currentScale})`, + backgroundColor: this.isEditing ? Colors.LIGHT_GRAY : Colors.TRANSPARENT, + borderColor: this.isEditing ? Colors.BLACK : Colors.TRANSPARENT, + }}> + <div className="tagsView-content" style={{ width: '100%' }}> + <div className="tagsView-list"> + {!tagsList.size && !facesList.size ? null : ( // + <IconButton style={{ width: '8px' }} tooltip="Close Menu" onPointerDown={() => this.setToEditing(!this._isEditing)} icon={<FontAwesomeIcon icon={this._isEditing ? 'chevron-up' : 'chevron-down'} size="sm" />} /> + )} + {Array.from(tagsList).map((tag, i) => ( + <TagItem key={i} doc={this._props.View.Document} tag={tag} tagDoc={TagItem.findTagCollectionDoc(tag) ?? TagItem.createTagCollectionDoc(tag)} setToEditing={this.setToEditing} showRemoveUI={this.isEditing} /> + ))} + {Array.from(facesList).map((tag, i) => ( + <TagItem key={i} doc={this._props.View.Document} tag={tag} tagDoc={undefined} setToEditing={this.setToEditing} showRemoveUI={this.isEditing} /> + ))} + </div> + {this.isEditing ? ( + <div className="tagsView-editing-box"> + <div className="tagsView-input-box"> + <input + value={this._currentInput} + autoComplete="off" + onChange={action(e => (this._currentInput = e.target.value))} + onKeyDown={e => { + e.key === 'Enter' ? this.submitTag(this._currentInput) : null; + e.stopPropagation(); + }} + type="text" + placeholder="Input tags for document..." + aria-label="tagsView-input" + className="tagsView-input" + style={{ width: '100%', borderRadius: '5px' }} + /> + </div> + <div className="tagsView-suggestions-box"> + {TagItem.AllTagCollectionDocs.map((doc, i) => { + const tag = StrCast(doc.title); + return ( + <Button + style={{ margin: '2px 2px', border: '1px solid black', backgroundColor: 'lightblue', color: 'black' }} + text={tag} + color={SnappingManager.userVariantColor} + tooltip="Add existing tag" + onClick={() => this.submitTag(tag)} + key={tag} + /> + ); + })} + {Array.from(chatTagsList).map(tag => { + return ( + <Button + style={{ margin: '2px 2px', border: '1px solid black', backgroundColor: 'lightpink', color: 'black' }} + text={tag} + color={SnappingManager.userVariantColor} + tooltip="Add existing tag" + onClick={() => this.submitTag(tag)} + key={tag} + /> + ); + })} + </div> + </div> + ) : null} + </div> + </div> + ); + } +} diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index cff32a557..680c8ed0e 100644 --- a/src/client/views/TemplateMenu.tsx +++ b/src/client/views/TemplateMenu.tsx @@ -1,8 +1,8 @@ import { computed, ObservableSet, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../ClientUtils'; -import { Doc, DocListCast } from '../../fields/Doc'; +import { returnEmptyFilter, returnFalse, returnTrue } from '../../ClientUtils'; +import { Doc, DocListCast, returnEmptyDoclist } from '../../fields/Doc'; import { DocData } from '../../fields/DocSymbols'; import { ScriptField } from '../../fields/ScriptField'; import { Cast, DocCast, StrCast } from '../../fields/Types'; @@ -48,7 +48,8 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { .forEach(key => runInAction(() => this._addedKeys.add(key.replace('layout_', '')))); // prettier-ignore } @computed get scriptField() { - const script = ScriptField.MakeScript('docs.map(d => switchView(d, this))', { this: Doc.name }, { docs: this.props.docViews.map(dv => dv.Document) as any }); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const script = ScriptField.MakeScript('docs.map(d => switchView(d, this))', { this: Doc.name }, { docs: this.props.docViews.map(dv => dv.Document) as any }); // allow a captured variable for Doc[] since this script isn't being saved to a Doc return script ? () => script : undefined; } diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx index 2d461c0ab..9b71d46ea 100644 --- a/src/client/views/UndoStack.tsx +++ b/src/client/views/UndoStack.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { Tooltip } from '@mui/material'; import { Popup, Type } from 'browndash-components'; import { observer } from 'mobx-react'; diff --git a/src/client/views/ViewBoxInterface.ts b/src/client/views/ViewBoxInterface.ts index c633f34fb..dce64ab92 100644 --- a/src/client/views/ViewBoxInterface.ts +++ b/src/client/views/ViewBoxInterface.ts @@ -18,6 +18,9 @@ export abstract class ViewBoxInterface<P> extends ObservableReactComponent<React abstract get Document(): Doc; abstract get dataDoc(): Doc; abstract get fieldKey(): string; + get annotationKey(): string { + return ''; // + } promoteCollection?: () => void; // moves contents of collection to parent updateIcon?: () => void; // updates the icon representation of the document getAnchor?: (addAsAnnotation: boolean, pinData?: PinProps) => Doc; // returns an Anchor Doc that represents the current state of the doc's componentview (e.g., the current playhead location of a an audio/video box) diff --git a/src/client/views/collections/CollectionCalendarView.tsx b/src/client/views/collections/CollectionCalendarView.tsx index a08a7c7c1..9eb16917b 100644 --- a/src/client/views/collections/CollectionCalendarView.tsx +++ b/src/client/views/collections/CollectionCalendarView.tsx @@ -6,11 +6,11 @@ import { dateRangeStrToDates, returnTrue } from '../../../ClientUtils'; import { Doc, DocListCast } from '../../../fields/Doc'; import { StrCast } from '../../../fields/Types'; import { CollectionStackingView } from './CollectionStackingView'; -import { CollectionSubView } from './CollectionSubView'; +import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; @observer export class CollectionCalendarView extends CollectionSubView() { - constructor(props: any) { + constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); } diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 4bd9a77b5..2390d162c 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -116,11 +116,11 @@ export class CollectionCardView extends CollectionSubView() { } @computed get cardSort_customField() { - return StrCast(this.Document.cardSort_customField) as any as 'chat' | 'star' | 'idea' | 'like'; + return StrCast(this.Document.cardSort_customField) as 'chat' | 'star' | 'idea' | 'like'; } @computed get cardSort() { - return StrCast(this.Document.cardSort) as any as cardSortings; + return StrCast(this.Document.cardSort) as cardSortings; } /** @@ -671,8 +671,8 @@ export class CollectionCardView extends CollectionSubView() { className="collectionCardView-outer" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} style={{ - background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor), - color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color), + background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string, + color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string, }}> <div className="card-wrapper" diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 38f681e87..c799eb3c8 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; @@ -15,7 +13,7 @@ import { StyleProp } from '../StyleProp'; import { DocumentView } from '../nodes/DocumentView'; import { FocusViewOptions } from '../nodes/FocusViewOptions'; import './CollectionCarousel3DView.scss'; -import { CollectionSubView } from './CollectionSubView'; +import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; // eslint-disable-next-line @typescript-eslint/no-var-requires const { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } = require('../global/globalCssVariables.module.scss'); @@ -25,7 +23,7 @@ export class CollectionCarousel3DView extends CollectionSubView() { @computed get scrollSpeed() { return this.layoutDoc._autoScrollSpeed ? NumCast(this.layoutDoc._autoScrollSpeed) : 1000; // default scroll speed } - constructor(props: any) { + constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); } @@ -181,8 +179,8 @@ export class CollectionCarousel3DView extends CollectionSubView() { className="collectionCarousel3DView-outer" ref={this.createDashEventsTarget} style={{ - background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor), - color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color), + background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string, + color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string, }}> <div className="carousel-wrapper" style={{ transform: `translateX(${this.translateX}px)` }}> {this.content} diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 4884db709..2f8d5adaf 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable react/jsx-props-no-spreading */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { computed, makeObservable } from 'mobx'; @@ -12,13 +10,12 @@ import { DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; import { ContextMenu } from '../ContextMenu'; -import { ContextMenuProps } from '../ContextMenuItem'; import { StyleProp } from '../StyleProp'; import { DocumentView } from '../nodes/DocumentView'; import { FieldViewProps } from '../nodes/FieldView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import './CollectionCarouselView.scss'; -import { CollectionSubView } from './CollectionSubView'; +import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; enum cardMode { PRACTICE = 'practice', @@ -35,7 +32,7 @@ export class CollectionCarouselView extends CollectionSubView() { get practiceField() { return this.fieldKey + "_practice"; } // prettier-ignore get starField() { return "star"; } // prettier-ignore - constructor(props: any) { + constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); } @@ -124,7 +121,7 @@ export class CollectionCarouselView extends CollectionSubView() { this.advance(e); }; - captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<FieldViewProps>, property: string): any => { + captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<FieldViewProps>, property: string) => { // first look for properties on the document in the carousel, then fallback to properties on the container const childValue = doc?.['caption_' + property] ? this._props.styleProvider?.(doc, captionProps, property) : undefined; return childValue ?? this._props.styleProvider?.(this.layoutDoc, captionProps, property); @@ -137,7 +134,7 @@ export class CollectionCarouselView extends CollectionSubView() { const cm = ContextMenu.Instance; const revealOptions = cm.findByDescription('Filter Flashcards'); - const revealItems: ContextMenuProps[] = revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : []; + const revealItems = revealOptions?.subitems ?? []; revealItems.push({description: 'All', event: () => {this.layoutDoc.filterOp = undefined;}, icon: 'layer-group',}); // prettier-ignore revealItems.push({description: 'Star', event: () => {this.layoutDoc.filterOp = cardMode.STAR;}, icon: 'star',}); // prettier-ignore revealItems.push({description: 'Practice Mode', event: () => {this.layoutDoc.filterOp = cardMode.PRACTICE;}, icon: 'check',}); // prettier-ignore @@ -161,7 +158,7 @@ export class CollectionCarouselView extends CollectionSubView() { onDoubleClickScript={this.onContentDoubleClick} onClickScript={this.onContentClick} isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive} - isContentActive={this._props.childContentsActive ?? this._props.isContentActive() === false ? returnFalse : emptyFunction} + isContentActive={(this._props.childContentsActive ?? this._props.isContentActive() === false) ? returnFalse : emptyFunction} hideCaptions={!!carouselShowsCaptions} // hide captions if the carousel is configured to show the captions renderDepth={this._props.renderDepth + 1} LayoutTemplate={this._props.childLayoutTemplate} @@ -177,7 +174,7 @@ export class CollectionCarouselView extends CollectionSubView() { key="caption" onWheel={StopEvent} style={{ - borderRadius: this._props.styleProvider?.(this.layoutDoc, captionProps, StyleProp.BorderRounding), + borderRadius: this._props.styleProvider?.(this.layoutDoc, captionProps, StyleProp.BorderRounding) as string, marginRight: this.marginX, marginLeft: this.marginX, width: `calc(100% - ${this.marginX * 2}px)`, @@ -218,8 +215,8 @@ export class CollectionCarouselView extends CollectionSubView() { ref={this.createDashEventsTarget} onContextMenu={this.specificMenu} style={{ - background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor), - color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color), + background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string, + color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string, }}> {this.content} {/* Displays a message to the user to add more flashcards if they are in practice mode and no flashcards are there. */} diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 2a36e96bf..e0aa79c7b 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -2,12 +2,14 @@ import { action, IReactionDisposer, makeObservable, observable, reaction } from import { observer } from 'mobx-react'; import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; +import ResizeObserver from 'resize-observer-polyfill'; import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, DivHeight, DivWidth, incrementTitleCopy, returnTrue, UpdateIcon } from '../../../ClientUtils'; import { Doc, DocListCast, Field, Opt } from '../../../fields/Doc'; import { AclAdmin, AclEdit, DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { InkTool } from '../../../fields/InkField'; import { List } from '../../../fields/List'; +import { FieldType } from '../../../fields/ObjectField'; import { ImageCast, NumCast, StrCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; import { GetEffectiveAcl, inheritParentAcls, SetPropSetterCb } from '../../../fields/util'; @@ -28,19 +30,17 @@ import { OverlayView } from '../OverlayView'; import { ScriptingRepl } from '../ScriptingRepl'; import { UndoStack } from '../UndoStack'; import './CollectionDockingView.scss'; -import { CollectionSubView } from './CollectionSubView'; - -const _global = (window /* browser */ || global) /* node */ as any; +import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; @observer export class CollectionDockingView extends CollectionSubView() { - static tabClass: JSX.Element | null = null; + static tabClass: unknown = null; /** * Initialize by assigning the add split method to DocumentView and by * configuring golden layout to render its documents using the specified React component * @param ele - typically would be set to TabDocView */ - public static Init(ele: any) { + public static Init(ele: unknown) { this.tabClass = ele; DocumentView.addSplit = CollectionDockingView.AddSplit; } @@ -53,20 +53,22 @@ export class CollectionDockingView extends CollectionSubView() { private _flush: UndoManager.Batch | undefined; private _unmounting = false; private _ignoreStateChange = ''; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + private _goldenLayout: any = null; + // eslint-disable-next-line @typescript-eslint/no-explicit-any public tabMap: Set<any> = new Set(); public get HasFullScreen() { return this._goldenLayout._maximisedItem !== null; } - private _goldenLayout: any = null; static _highlightStyleSheet = addStyleSheet(); - constructor(props: any) { + constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); if (this._props.renderDepth < 0) CollectionDockingView.Instance = this; // Why is this here? - (window as any).React = React; - (window as any).ReactDOM = ReactDOM; + (window as unknown as { React: unknown }).React = React; + (window as unknown as { ReactDOM: unknown }).ReactDOM = ReactDOM; DragManager.StartWindowDrag = this.StartOtherDrag; this.Document.myTrails; // this is equivalent to having a prefetchProxy for myTrails which is needed for the My Trails button in the UI which assumes that Doc.ActiveDashboard.myTrails is legit... } @@ -88,10 +90,11 @@ export class CollectionDockingView extends CollectionSubView() { }; tabItemDropped = () => DragManager.CompleteWindowDrag?.(false); + // eslint-disable-next-line @typescript-eslint/no-explicit-any tabDragStart = (proxy: any, finishDrag?: (aborted: boolean) => void) => { this._flush = this._flush ?? UndoManager.StartBatch('tab move'); - const dashDoc = proxy?._contentItem?.tab?.DashDoc as Doc; - dashDoc && (DragManager.DocDragData = new DragManager.DocumentDragData([proxy._contentItem.tab.DashDoc])); + //const dashDoc = proxy?._contentItem?.tab?.DashDoc as Doc; + //dashDoc && (DragManager.DocDragData = new DragManager.DocumentDragData([proxy._contentItem.tab.DashDoc])); DragManager.CompleteWindowDrag = (aborted: boolean) => { if (aborted) { proxy._dragListener.AbortDrag(); @@ -129,12 +132,13 @@ export class CollectionDockingView extends CollectionSubView() { } @undoBatch + // eslint-disable-next-line @typescript-eslint/no-explicit-any public static ReplaceTab(document: Doc, mods: OpenWhereMod, stack: any, panelName: string, addToSplit?: boolean, keyValue?: boolean): boolean { const instance = CollectionDockingView.Instance; if (!instance) return false; const newConfig = DashboardView.makeDocumentConfig(document, panelName, undefined, keyValue); if (!panelName && stack) { - const activeContentItemIndex = stack.contentItems.findIndex((item: any) => item.config === stack._activeContentItem.config); + const activeContentItemIndex = stack.contentItems.findIndex((item: { config: unknown }) => item.config === stack._activeContentItem.config); const newContentItem = stack.layoutManager.createContentItem(newConfig, instance._goldenLayout); stack.addChild(newContentItem.contentItems[0], undefined); stack.contentItems[activeContentItemIndex].remove(); @@ -154,6 +158,7 @@ export class CollectionDockingView extends CollectionSubView() { } @undoBatch + // eslint-disable-next-line @typescript-eslint/no-explicit-any public static ToggleSplit(doc: Doc, location: OpenWhereMod, stack?: any, panelName?: string, keyValue?: boolean) { return Array.from(CollectionDockingView.Instance?.tabMap.keys() ?? []).findIndex(tab => tab.DashDoc === doc) !== -1 ? CollectionDockingView.CloseSplit(doc) : CollectionDockingView.AddSplit(doc, location, stack, panelName, keyValue); } @@ -162,6 +167,7 @@ export class CollectionDockingView extends CollectionSubView() { // Creates a split on any side of the docking view based on the passed input pullSide and then adds the Document to the requested side // @action + // eslint-disable-next-line @typescript-eslint/no-explicit-any public static AddSplit(document: Doc, pullSide: OpenWhereMod, stack?: any, panelName?: string, keyValue?: boolean) { if (document?._type_collection === CollectionViewType.Docking && !keyValue) return DashboardView.openDashboard(document); if (!CollectionDockingView.Instance) return false; @@ -320,7 +326,7 @@ export class CollectionDockingView extends CollectionSubView() { * @param target * @param title */ - titleChanged = (target: any, value: any) => { + titleChanged = (target: Doc, value: FieldType) => { const title = Field.toString(value); if (title.startsWith('@') && !title.substring(1).match(/[()[\]@]/) && title.length > 1) { const embedding = DocListCast(target.proto_embeddings).lastElement(); @@ -339,7 +345,7 @@ export class CollectionDockingView extends CollectionSubView() { () => DocumentView.LightboxDoc(), doc => setTimeout(() => !doc && this.onResize()) ); - new _global.ResizeObserver(this.onResize).observe(this._containerRef.current); + new ResizeObserver(this.onResize).observe(this._containerRef.current); this._reactionDisposer = reaction( () => StrCast(this.Document.dockingConfig), config => { @@ -428,7 +434,7 @@ export class CollectionDockingView extends CollectionSubView() { @action onPointerDown = (e: React.PointerEvent): void => { let hitFlyout = false; - for (let par = e.target as any; !hitFlyout && par; par = par.parentElement) { + for (let par = e.target as HTMLElement | null; !hitFlyout && par; par = par.parentElement) { hitFlyout = par.className === 'dockingViewButtonSelector'; } if (!hitFlyout) { @@ -513,6 +519,7 @@ export class CollectionDockingView extends CollectionSubView() { return changesMade; }; + // eslint-disable-next-line @typescript-eslint/no-explicit-any tabDestroyed = (tab: any) => { this._flush = this._flush ?? UndoManager.StartBatch('tab movement'); const dashDoc = tab.DashDoc; @@ -530,18 +537,21 @@ export class CollectionDockingView extends CollectionSubView() { const { fieldKey } = CollectionDockingView.Instance.props; Doc.RemoveDocFromList(dview, fieldKey, dashDoc); this.tabMap.delete(tab); - tab._disposers && Object.values(tab._disposers).forEach((disposer: any) => disposer?.()); + tab._disposers && Object.values(tab._disposers).forEach(disposer => (disposer as () => void)()); this.stateChanged(); } }; - tabCreated = (tab: any) => { + tabCreated = (tab: { contentItem: { element: HTMLElement[] } }) => { this.tabMap.add(tab); - tab.contentItem.element[0]?.firstChild?.firstChild?.InitTab?.(tab); // have to explicitly initialize tabs that reuse contents from previous tabs (ie, when dragging a tab around a new tab is created for the old content) + // InitTab is added to the tab's HTMLElement in TabDocView + const tabdocviewContent = tab.contentItem.element[0]?.firstChild?.firstChild as unknown as { InitTab?: (tab: object) => void }; + tabdocviewContent?.InitTab?.(tab); // have to explicitly initialize tabs that reuse contents from previous tabs (ie, when dragging a tab around a new tab is created for the old content) }; + // eslint-disable-next-line @typescript-eslint/no-explicit-any stackCreated = (stackIn: any) => { const stack = stackIn.header ? stackIn : stackIn.origin; - stack.header?.element.on('mousedown', (e: any) => { + stack.header?.element.on('mousedown', (e: MouseEvent) => { const dashboard = Doc.ActiveDashboard; if (dashboard && e.target === stack.header?.element[0] && e.button === 2) { dashboard.pane_count = NumCast(dashboard.pane_count) + 1; @@ -594,7 +604,7 @@ export class CollectionDockingView extends CollectionSubView() { }) ); - stack.element.click((e: any) => { + stack.element.click((e: { originalEvent: MouseEvent }) => { if (stack.contentItems.length === 0 && Array.from(document.elementsFromPoint(e.originalEvent.x, e.originalEvent.y)).some(ele => ele?.className === 'empty-tabs-message')) { addNewDoc(); } @@ -632,7 +642,7 @@ export class CollectionDockingView extends CollectionSubView() { ScriptingGlobals.add( // eslint-disable-next-line prefer-arrow-callback - function openInLightbox(doc: any) { + function openInLightbox(doc: Doc) { CollectionDockingView.Instance?._props.addDocTab(doc, OpenWhere.lightboxAlways); }, 'opens up document in a lightbox', @@ -640,33 +650,22 @@ ScriptingGlobals.add( ); ScriptingGlobals.add( // eslint-disable-next-line prefer-arrow-callback - function openDoc(doc: any, where: OpenWhere) { + function openDoc(doc: Doc | string, where: OpenWhere) { switch (where) { case OpenWhere.addRight: - return CollectionDockingView.AddSplit(doc, OpenWhereMod.right); + return doc instanceof Doc && CollectionDockingView.AddSplit(doc, OpenWhereMod.right); case OpenWhere.overlay: default: - // prettier-ignore switch (doc) { case '<ScriptingRepl />': return OverlayView.Instance.addWindow(<ScriptingRepl />, { x: 300, y: 100, width: 200, height: 200, title: 'Scripting REPL' }); case "<UndoStack />": return OverlayView.Instance.addWindow(<UndoStack />, { x: 300, y: 100, width: 200, height: 200, title: 'Undo stack' }); - default: - } - Doc.AddToMyOverlay(doc); - return true; + default: return doc instanceof Doc && Doc.AddToMyOverlay(doc); + } // prettier-ignore } }, 'opens up document in location specified', '(doc: any)' ); -ScriptingGlobals.add( - // eslint-disable-next-line prefer-arrow-callback - function openRepl() { - return 'openRepl'; - }, - 'opens up document in screen overlay layer', - '(doc: any)' -); // eslint-disable-next-line prefer-arrow-callback ScriptingGlobals.add(async function snapshotDashboard() { const batch = UndoManager.StartBatch('snapshot'); diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx index 9a6f1e2eb..710c00841 100644 --- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx +++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx @@ -1,6 +1,3 @@ -/* eslint-disable jsx-a11y/control-has-associated-label */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -16,7 +13,7 @@ import { DragManager } from '../../util/DragManager'; import { CompileScript } from '../../util/Scripting'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; -import { undoBatch } from '../../util/UndoManager'; +import { undoBatch, undoable } from '../../util/UndoManager'; import { EditableView } from '../EditableView'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; @@ -37,13 +34,13 @@ interface CMVFieldRowProps { createDropTarget: (ele: HTMLDivElement) => void; screenToLocalTransform: () => Transform; setDocHeight: (key: string, thisHeight: number) => void; - refList: any[]; + refList: Element[]; showHandle: boolean; } @observer export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVFieldRowProps> { - constructor(props: any) { + constructor(props: CMVFieldRowProps) { super(props); makeObservable(this); } @@ -73,7 +70,7 @@ export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVF private _dropDisposer?: DragManager.DragDropDisposer; private _headerRef: React.RefObject<HTMLDivElement> = React.createRef(); private _contRef: React.RefObject<HTMLDivElement> = React.createRef(); - private _ele: any; + private _ele: HTMLDivElement | null = null; createRowDropRef = (ele: HTMLDivElement | null) => { this._dropDisposer?.(); @@ -118,7 +115,7 @@ export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVF return false; }); - getValue = (value: string): any => { + getValue = (value: string) => { const parsed = parseInt(value); if (!isNaN(parsed)) return parsed; if (value.toLowerCase().indexOf('true') > -1) return true; @@ -173,7 +170,7 @@ export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVF return docs ? !!docs.splice(0, 0, newDoc) : this._props.parent._props.addDocument?.(newDoc) || false; // should really extend addDocument to specify insertion point (at beginning of list) }; - deleteRow = undoBatch( + deleteRow = undoable( action(() => { this._createEmbeddingSelected = false; const key = this._props.pivotField; @@ -182,11 +179,12 @@ export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVF const index = this._props.parent.colHeaderData.indexOf(this._props.headingObject); this._props.parent.colHeaderData.splice(index, 1); } - }) + }), + 'delete row' ); @action - collapseSection = (e: any) => { + collapseSection = (e: PointerEvent) => { this._createEmbeddingSelected = false; this.toggleVisibility(); e.stopPropagation(); diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index b2f0280a5..dab1298d5 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -1,7 +1,3 @@ -/* eslint-disable jsx-a11y/label-has-associated-control */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -/* eslint-disable jsx-a11y/control-has-associated-label */ /* eslint-disable react/no-unused-class-component-methods */ /* eslint-disable react/sort-comp */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -10,9 +6,9 @@ import { Toggle, ToggleType, Type } from 'browndash-components'; import { Lambda, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { ClientUtils, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../../ClientUtils'; +import { ClientUtils, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../../ClientUtils'; import { emptyFunction } from '../../../Utils'; -import { Doc, DocListCast, Opt } from '../../../fields/Doc'; +import { Doc, DocListCast, Opt, returnEmptyDoclist } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { List } from '../../../fields/List'; import { ObjectField } from '../../../fields/ObjectField'; @@ -23,7 +19,7 @@ import { DragManager } from '../../util/DragManager'; import { dropActionType } from '../../util/DropActionTypes'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; -import { undoBatch } from '../../util/UndoManager'; +import { undoBatch, undoable } from '../../util/UndoManager'; import { AntimodeMenu } from '../AntimodeMenu'; import { EditableView } from '../EditableView'; import { DefaultStyleProvider, returnEmptyDocViewList } from '../StyleProvider'; @@ -185,7 +181,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu params: ['target', 'source'], title: 'item view', script: 'this.target.childLayoutTemplate = getDocTemplate(this.source?.[0])', - immediate: undoBatch((source: Doc[]) => { + immediate: undoable((source: Doc[]) => { let formatStr = source.length && Cast(source[0].text, RichTextField, null)?.Text; try { formatStr && JSON.parse(formatStr); @@ -200,25 +196,25 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu Doc.SetInPlace(this.target, 'childLayoutString', undefined, true); Doc.SetInPlace(this.target, 'childLayoutTemplate', undefined, true); } - }), + }, ''), initialize: emptyFunction, }; _narrativeCommand = { params: ['target', 'source'], title: 'child click view', script: 'this.target.childClickedOpenTemplateView = getDocTemplate(this.source?.[0])', - immediate: undoBatch((source: Doc[]) => { + immediate: undoable((source: Doc[]) => { source.length && (this.target.childClickedOpenTemplateView = Doc.getDocTemplate(source?.[0])); - }), + }, 'narrative command'), initialize: emptyFunction, }; _contentCommand = { params: ['target', 'source'], title: 'set content', script: 'getProto(this.target).data = copyField(this.source);', - immediate: undoBatch((source: Doc[]) => { + immediate: undoable((source: Doc[]) => { this.target[DocData].data = new List<Doc>(source); - }), + }, ''), initialize: emptyFunction, }; _onClickCommand = { @@ -229,19 +225,19 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu getProto(this.proxy[0]).target = this.target.target; getProto(this.proxy[0]).source = copyField(this.target.source); }}`, - immediate: undoBatch(() => {}), + immediate: undoable(() => {}, ''), initialize: emptyFunction, }; _viewCommand = { params: ['target'], title: 'bookmark view', script: "this.target._freeform_panX = this.target_freeform_panX; this.target._freeform_panY = this['target-freeform_panY']; this.target._freeform_scale = this['target_freeform_scale']; gotoFrame(this.target, this['target-currentFrame']);", - immediate: undoBatch(() => { + immediate: undoable(() => { this.target._freeform_panX = 0; this.target._freeform_panY = 0; this.target._freeform_scale = 1; this.target._currentFrame = this.target._currentFrame === undefined ? undefined : 0; - }), + }, ''), initialize: (button: Doc) => { button['target-panX'] = this.target._freeform_panX; button['target-panY'] = this.target._freeform_panY; @@ -253,18 +249,18 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu params: ['target'], title: 'fit content', script: 'this.target._freeform_fitContentsToBox = !this.target._freeform_fitContentsToBox;', - immediate: undoBatch(() => { + immediate: undoable(() => { this.target._freeform_fitContentsToBox = !this.target._freeform_fitContentsToBox; - }), + }, ''), initialize: emptyFunction, }; _fitContentCommand = { params: ['target'], title: 'toggle clusters', script: 'this.target._freeform_useClusters = !this.target._freeform_useClusters;', - immediate: undoBatch(() => { + immediate: undoable(() => { this.target._freeform_useClusters = !this.target._freeform_useClusters; - }), + }, ''), initialize: emptyFunction, }; _saveFilterCommand = { @@ -272,10 +268,10 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu title: 'save filter', script: `this.target._childFilters = compareLists(this.target_childFilters,this.target._childFilters) ? undefined : copyField(this.target_childFilters); this.target._searchFilterDocs = compareLists(this.target_searchFilterDocs,this.target._searchFilterDocs) ? undefined: copyField(this.target_searchFilterDocs);`, - immediate: undoBatch(() => { + immediate: undoable(() => { this.target._childFilters = undefined; this.target._searchFilterDocs = undefined; - }), + }, ''), initialize: (button: Doc) => { const activeDash = Doc.ActiveDashboard; if (activeDash) { @@ -598,9 +594,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu */ onNumColsChange = (e: React.ChangeEvent<HTMLInputElement>) => { if (e.currentTarget.valueAsNumber > 0) - undoBatch(() => { + undoable(() => { this.document.gridNumCols = e.currentTarget.valueAsNumber; - })(); + }, '')(); }; /** @@ -629,9 +625,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu onIncrementButtonClick = () => { this.clicked = true; this.entered && (this.document.gridNumCols as number)--; - undoBatch(() => { + undoable(() => { this.document.gridNumCols = this.numCols + 1; - })(); + }, '')(); this.entered = false; }; @@ -642,9 +638,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu this.clicked = true; if (this.numCols > 1 && !this.decrementLimitReached) { this.entered && (this.document.gridNumCols as number)++; - undoBatch(() => { + undoable(() => { this.document.gridNumCols = this.numCols - 1; - })(); + }, '')(); if (this.numCols === 1) this.decrementLimitReached = true; } this.entered = false; diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 16c474996..e1f0a3e41 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -30,9 +30,8 @@ import { StyleProp } from '../StyleProp'; import './CollectionNoteTakingView.scss'; import { CollectionNoteTakingViewColumn } from './CollectionNoteTakingViewColumn'; import { CollectionNoteTakingViewDivider } from './CollectionNoteTakingViewDivider'; -import { CollectionSubView } from './CollectionSubView'; - -const _global = (window /* browser */ || global) /* node */ as any; +import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; +import { Property } from 'csstype'; /** * CollectionNoteTakingView is a column-based view for displaying documents. In this view, the user can (1) @@ -52,9 +51,9 @@ export class CollectionNoteTakingView extends CollectionSubView() { public DividerWidth = 16; @observable docsDraggedRowCol: number[] = []; @observable _scroll = 0; - @observable _refList: any[] = []; + @observable _refList: HTMLElement[] = []; - constructor(props: any) { + constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); } @@ -78,7 +77,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { return colHeaderData ?? ([] as SchemaHeaderField[]); } @computed get headerMargin() { - return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.HeaderMargin); + return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.HeaderMargin) as number; } @computed get xMargin() { return NumCast(this.layoutDoc._xMargin, 5); @@ -216,7 +215,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { // let's dive in and get the actual document we want to drag/move around focusDocument = (doc: Doc, options: FocusViewOptions) => { Doc.BrushDoc(doc); - const found = this._mainCont && Array.from(this._mainCont.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]); + const found = this._mainCont && Array.from(this._mainCont.getElementsByClassName('documentView-node')).find(node => node.id === doc[Id]); if (found) { const { top } = found.getBoundingClientRect(); const localTop = this.ScreenToLocalBoxXf().transformPoint(0, top); @@ -295,7 +294,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { addDocument={this._props.addDocument} moveDocument={this._props.moveDocument} removeDocument={this._props.removeDocument} - contentPointerEvents={StrCast(this.layoutDoc.childContentPointerEvents) as any} + contentPointerEvents={StrCast(this.layoutDoc.childContentPointerEvents) as Property.PointerEvents} whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} addDocTab={this._props.addDocTab} pinToPres={this._props.pinToPres} @@ -313,14 +312,14 @@ export class CollectionNoteTakingView extends CollectionSubView() { // how to get the width of a document. Currently returns the width of the column (minus margins) // if a note doc. Otherwise, returns the normal width (for graphs, images, etc...) - getDocWidth(d: Doc) { + getDocWidth = (d: Doc) => { const heading = !d[this.notetakingCategoryField] ? 'unset' : Field.toString(d[this.notetakingCategoryField] as FieldType); const existingHeader = this.colHeaderData.find(sh => sh.heading === heading); const existingWidth = this.layoutDoc._notetaking_columns_autoSize ? 1 / (this.colHeaderData.length ?? 1) : existingHeader?.width ? existingHeader.width : 0; const maxWidth = existingWidth > 0 ? existingWidth * this.availableWidth : this.maxColWidth; const width = d.layout_fitWidth ? maxWidth : NumCast(d._width); return Math.min(maxWidth - CollectionNoteTakingViewColumn.ColumnMargin, width < maxWidth ? width : maxWidth); - } + }; // how to get the height of a document. Nothing special here. getDocHeight(d?: Doc) { @@ -364,7 +363,8 @@ export class CollectionNoteTakingView extends CollectionSubView() { // onPointerMove is used to preview where a document will drop in a column once a drag is complete. @action onPointerMove = (force: boolean, ex: number, ey: number) => { - if (this.childDocList?.includes(DragManager.DocDragData?.draggedDocuments?.lastElement() as any) || force || SnappingManager.CanEmbed) { + const dragDoc = DragManager.DraggedDocs?.lastElement(); + if ((dragDoc && this.childDocList?.includes(dragDoc)) || force || SnappingManager.CanEmbed) { // get the current docs for the column based on the mouse's x coordinate const xCoord = this.ScreenToLocalBoxXf().transformPoint(ex, ey)[0] - 2 * this.gridGap; const colDocs = this.getDocsFromXCoord(xCoord); @@ -500,7 +500,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { super.onExternalDrop( e, {}, - undoBatch( + undoable( action(docus => { this.onPointerMove(true, e.clientX, e.clientY); docus?.map((doc: Doc) => this.addDocument(doc)); @@ -513,7 +513,8 @@ export class CollectionNoteTakingView extends CollectionSubView() { docs.splice(targInd, 0, newDoc); } this.removeDocDragHighlight(); - }) + }), + 'drop into note view' ) ); }; @@ -673,7 +674,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { return this.isContentActive() === false ? 'none' : undefined; } - observer = new _global.ResizeObserver(() => this._props.setHeight?.(this.headerMargin + Math.max(...this._refList.map(DivHeight)))); + observer = new ResizeObserver(() => this._props.setHeight?.(this.headerMargin + Math.max(...this._refList.map(DivHeight)))); render() { TraceMobx(); diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index 44ab1968d..8c6a6b551 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jsx-a11y/control-has-associated-label */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; @@ -16,7 +15,7 @@ import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { undoBatch, undoable } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; -import { EditableView } from '../EditableView'; +import { EditableProps, EditableView } from '../EditableView'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import './CollectionNoteTakingView.scss'; @@ -24,7 +23,7 @@ import './CollectionNoteTakingView.scss'; interface CSVFieldColumnProps { Document: Doc; TemplateDataDocument: Opt<Doc>; - backgroundColor?: (() => string) | undefined; + backgroundColor?: () => string | undefined; docList: Doc[]; heading: string; pivotField: string; @@ -35,15 +34,15 @@ interface CSVFieldColumnProps { yMargin: number; numGroupColumns: number; gridGap: number; - headings: () => object[]; + headings: () => [SchemaHeaderField, Doc[]][]; select: (ctrlPressed: boolean) => void; isContentActive: () => boolean | undefined; renderChildren: (docs: Doc[]) => JSX.Element[]; addDocument: (doc: Doc | Doc[]) => boolean; createDropTarget: (ele: HTMLDivElement) => void; screenToLocalTransform: () => Transform; - refList: any[]; - editableViewProps: () => any; + refList: HTMLElement[]; + editableViewProps: () => EditableProps; resizeColumns: (headers: SchemaHeaderField[]) => boolean; maxColWidth: number; dividerWidth: number; @@ -103,7 +102,7 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV return true; }; - getValue = (value: string): any => { + getValue = (value: string) => { const parsed = parseInt(value); if (!isNaN(parsed)) return parsed; if (value.toLowerCase().indexOf('true') > -1) return true; @@ -272,7 +271,7 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV style={{ width: this.columnWidth, background: this._hover && SnappingManager.IsDragging ? '#b4b4b4' : 'inherit', - marginLeft: this._props.headings().findIndex((h: any) => h[0] === this._props.headingObject) === 0 ? NumCast(this._props.Document.xMargin) : 0, + marginLeft: this._props.headings().findIndex(h => h[0] === this._props.headingObject) === 0 ? NumCast(this._props.Document.xMargin) : 0, }}> <div className="collectionNoteTakingViewFieldColumn" key={this._heading} ref={this.createColumnDropRef}> {this.innards} diff --git a/src/client/views/collections/CollectionPileView.tsx b/src/client/views/collections/CollectionPileView.tsx index 5b3f625db..eea128803 100644 --- a/src/client/views/collections/CollectionPileView.tsx +++ b/src/client/views/collections/CollectionPileView.tsx @@ -1,10 +1,8 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { action, computed, IReactionDisposer, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { returnFalse, setupMoveUpEvents } from '../../../ClientUtils'; -import { Doc, DocListCast } from '../../../fields/Doc'; +import { Doc, DocListCast, FieldResult } from '../../../fields/Doc'; import { ScriptField } from '../../../fields/ScriptField'; import { NumCast, StrCast, toList } from '../../../fields/Types'; import { emptyFunction } from '../../../Utils'; @@ -15,15 +13,15 @@ import { OpenWhere } from '../nodes/OpenWhere'; import { computePassLayout, computeStarburstLayout } from './collectionFreeForm'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; import './CollectionPileView.scss'; -import { CollectionSubView } from './CollectionSubView'; +import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; import { DocumentView } from '../nodes/DocumentView'; @observer export class CollectionPileView extends CollectionSubView() { - _originalChrome: any = ''; + _originalChrome: FieldResult = ''; _disposers: { [name: string]: IReactionDisposer } = {}; - constructor(props: any) { + constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); } diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index fac885300..486c826b6 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -1,14 +1,11 @@ /* eslint-disable react/jsx-props-no-spreading */ -/* eslint-disable jsx-a11y/alt-text */ /* eslint-disable no-use-before-define */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { computedFn } from 'mobx-utils'; import * as React from 'react'; -import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnNone, returnTrue, returnZero, setupMoveUpEvents, smoothScrollHorizontal, StopEvent } from '../../../ClientUtils'; -import { Doc, Opt } from '../../../fields/Doc'; +import { returnEmptyFilter, returnFalse, returnNone, returnTrue, returnZero, setupMoveUpEvents, smoothScrollHorizontal, StopEvent } from '../../../ClientUtils'; +import { Doc, Opt, returnEmptyDoclist } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; @@ -34,7 +31,7 @@ import { LabelBox } from '../nodes/LabelBox'; import { OpenWhere } from '../nodes/OpenWhere'; import { ObservableReactComponent } from '../ObservableReactComponent'; import './CollectionStackedTimeline.scss'; -import { CollectionSubView } from './CollectionSubView'; +import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; export type CollectionStackedTimelineProps = { Play: () => void; @@ -72,7 +69,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack ); this.SelectingRegions.clear(); } - constructor(props: any) { + constructor(props: SubCollectionViewProps & CollectionStackedTimelineProps) { super(props); makeObservable(this); } @@ -182,7 +179,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack }); anchorStart = (anchor: Doc) => NumCast(anchor._timecodeToShow, NumCast(anchor[this._props.startTag])); - anchorEnd = (anchor: Doc, val: any = null) => NumCast(anchor._timecodeToHide, NumCast(anchor[this._props.endTag], val) ?? null); + anchorEnd = (anchor: Doc, val?: number) => NumCast(anchor._timecodeToHide, NumCast(anchor[this._props.endTag], val) ?? null); // converts screen pixel offset to time // prettier-ignore @@ -192,13 +189,13 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack @computed get rangeClick() { // prettier-ignore return ScriptField.MakeFunction('stackedTimeline.clickAnchor(this, clientX)', - { stackedTimeline: 'any', clientX: 'number' }, { stackedTimeline: this as any } + { stackedTimeline: 'any', clientX: 'number' }, { stackedTimeline: 'string' /* should be CollectionStackedTimeline */ } )!; } @computed get rangePlay() { // prettier-ignore return ScriptField.MakeFunction('stackedTimeline.playOnClick(this, clientX)', - { stackedTimeline: 'any', clientX: 'number' }, { stackedTimeline: this as any })!; + { stackedTimeline: 'any', clientX: 'number' }, { stackedTimeline: 'string' /* should be CollectionStackedTimeline */})!; } rangeClickScript = () => this.rangeClick; rangePlayScript = () => this.rangePlay; @@ -426,7 +423,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack const anchor = docAnchor ?? Docs.Create.LabelDocument({ - title: ComputedField.MakeFunction(`this["${endTag}"] ? "#" + formatToTime(this["${startTag}"]) + "-" + formatToTime(this["${endTag}"]) : "#" + formatToTime(this["${startTag}"])`) as any, + title: ComputedField.MakeFunction(`this["${endTag}"] ? "#" + formatToTime(this["${startTag}"]) + "-" + formatToTime(this["${endTag}"]) : "#" + formatToTime(this["${startTag}"])`) as unknown as string, // title can take a function or a string _label_minFontSize: 12, _label_maxFontSize: 24, _dragOnlyWithinContainer: true, @@ -777,8 +774,8 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch @action onAnchorDown = (e: React.PointerEvent, anchor: Doc, left: boolean): void => { const newTime = (timeDownEv: PointerEvent) => { - const rect = (timeDownEv.target as any).getBoundingClientRect(); - return this._props.toTimeline(timeDownEv.clientX - rect.x, rect.width); + const rect = (timeDownEv.target as HTMLElement).getBoundingClientRect?.(); + return !rect ? 0 : this._props.toTimeline(timeDownEv.clientX - rect.x, rect.width); }; const changeAnchor = (time: number | undefined) => { const timelineOnly = Cast(anchor[this._props.startTag], 'number', null) !== undefined; @@ -850,7 +847,7 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch styleProvider={this._props.styleProvider} renderDepth={this._props.renderDepth + 1} LayoutTemplate={undefined} - LayoutTemplateString={LabelBox.LayoutStringWithTitle('data', this.computeTitle())} + LayoutTemplateString={LabelBox.LayoutString('data')} isDocumentActive={this._props.isDocumentActive} PanelWidth={width} PanelHeight={height} @@ -892,7 +889,7 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch } } // eslint-disable-next-line prefer-arrow-callback -ScriptingGlobals.add(function formatToTime(time: number): any { +ScriptingGlobals.add(function formatToTime(time: number): string { return formatTime(time); }); // eslint-disable-next-line prefer-arrow-callback diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 56d2a6c9c..6402ef16c 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -1,11 +1,10 @@ /* eslint-disable react/jsx-props-no-spreading */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -// eslint-disable-next-line import/no-extraneous-dependencies import * as CSS from 'csstype'; import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { ClientUtils, DivHeight, returnEmptyDoclist, returnNone, returnZero, setupMoveUpEvents, smoothScroll } from '../../../ClientUtils'; +import { ClientUtils, DivHeight, returnNone, returnZero, setupMoveUpEvents, smoothScroll } from '../../../ClientUtils'; import { Doc, Opt } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; @@ -31,12 +30,11 @@ import { DocumentView } from '../nodes/DocumentView'; import { FieldViewProps } from '../nodes/FieldView'; import { FocusViewOptions } from '../nodes/FocusViewOptions'; import { StyleProp } from '../StyleProp'; +import { returnEmptyDocViewList } from '../StyleProvider'; import { CollectionMasonryViewFieldRow } from './CollectionMasonryViewFieldRow'; import './CollectionStackingView.scss'; import { CollectionStackingViewFieldColumn } from './CollectionStackingViewFieldColumn'; -import { CollectionSubView } from './CollectionSubView'; - -const _global = (window /* browser */ || global) /* node */ as any; +import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; export type collectionStackingViewProps = { sortFunc?: (a: Doc, b: Doc) => number; @@ -57,8 +55,9 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection _docXfs: { height: () => number; width: () => number; stackedDocTransform: () => Transform }[] = []; // Doesn't look like this field is being used anywhere. Obsolete? _columnStart: number = 0; + _oldWheel: HTMLElement | null = null; - @observable _refList: any[] = []; + @observable _refList: HTMLElement[] = []; // map of node headers to their heights. Used in Masonry @observable _heightMap = new Map<string, number>(); // Assuming that this is the current css cursor style @@ -85,7 +84,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection } // how much margin we give the header @computed get headerMargin() { - return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.HeaderMargin); + return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.HeaderMargin) as number; } @computed get xMargin() { return NumCast(this.layoutDoc._xMargin, Math.max(3, 0.05 * this._props.PanelWidth())); @@ -99,7 +98,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection } // are we stacking or masonry? @computed get isStackingView() { - return (this._props.type_collection ?? this.layoutDoc._type_collection) === CollectionViewType.Stacking; + return (this._props.type_collection ?? this.layoutDoc._type_collection) !== CollectionViewType.Masonry; } // this is the number of StackingViewFieldColumns that we have @computed get numGroupColumns() { @@ -118,7 +117,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection return this._props.PanelWidth() - this.gridGap; } - constructor(props: any) { + constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); if (this.colHeaderData === undefined) { @@ -260,7 +259,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection focusDocument = (doc: Doc, options: FocusViewOptions) => { Doc.BrushDoc(doc); - const found = this._mainCont && Array.from(this._mainCont.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]); + const found = this._mainCont && Array.from(this._mainCont.getElementsByClassName('documentView-node')).find(node => node.id === doc[Id]); if (found) { const { top } = found.getBoundingClientRect(); const localTop = this.ScreenToLocalBoxXf().transformPoint(0, top); @@ -321,7 +320,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection const dataDoc = doc.isTemplateDoc || doc.isTemplateForField ? this._props.TemplateDataDocument : undefined; const height = () => this.getDocHeight(doc); const panelHeight = () => (this.isStackingView ? height() : Math.min(height(), this._props.PanelHeight())); - const panelWidth = () => (this.isStackingView ? width() : this.columnWidth); + const panelWidth = () => this.columnWidth; const stackedDocTransform = () => this.getDocTransform(doc); this._docXfs.push({ stackedDocTransform, width, height }); return count > this._renderCount ? null : ( @@ -344,7 +343,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection LayoutTemplateString={this._props.childLayoutString} NativeWidth={this._props.childIgnoreNativeSize ? returnZero : this._props.childLayoutFitWidth?.(doc) || (this.childFitWidth(doc) && !Doc.NativeWidth(doc)) ? width : undefined} // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox NativeHeight={this._props.childIgnoreNativeSize ? returnZero : this._props.childLayoutFitWidth?.(doc) || (this.childFitWidth(doc) && !Doc.NativeHeight(doc)) ? height : undefined} - dontCenter={this._props.childIgnoreNativeSize ? 'xy' : (StrCast(this.layoutDoc.layout_dontCenter) as any)} + dontCenter={this._props.childIgnoreNativeSize ? 'xy' : (StrCast(this.layoutDoc.layout_dontCenter) as 'x' | 'y' | 'xy')} dontRegisterView={BoolCast(this.layoutDoc.childDontRegisterViews, this._props.dontRegisterView)} // used to be true if DataDoc existed, but template textboxes won't layout_autoHeight resize if dontRegisterView is set, but they need to. rootSelected={this.rootSelected} showTitle={this._props.childlayout_showTitle} @@ -356,6 +355,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection childFilters={this.childDocFilters} hideDecorationTitle={this._props.childHideDecorationTitle} hideResizeHandles={this._props.childHideResizeHandles} + hideDecorations={this._props.childHideDecorations} childFiltersByRanges={this.childDocRangeFilters} searchFilterDocs={this.searchFilterDocs} xPadding={NumCast(this.layoutDoc._childXPadding, this._props.childXPadding)} @@ -363,7 +363,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection addDocument={this._props.addDocument} moveDocument={this._props.moveDocument} removeDocument={this._props.removeDocument} - contentPointerEvents={StrCast(this.layoutDoc.childContentPointerEvents) as any} + contentPointerEvents={StrCast(this.layoutDoc.childContentPointerEvents) as CSS.Property.PointerEvents | undefined} whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} addDocTab={this._props.addDocTab} pinToPres={this._props.pinToPres} @@ -374,9 +374,10 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection getDocTransform(doc: Doc) { const dref = this.docRefs.get(doc); this._scroll; // must be referenced for document decorations to update when the text box container is scrolled - const { translateX, translateY } = ClientUtils.GetScreenTransform(dref?.ContentDiv); - // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform. so we have to subtract that off - return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.ScreenToLocalBoxXf().Scale); + const { translateX, translateY, scale } = ClientUtils.GetScreenTransform(dref?.ContentDiv); + return new Transform(-translateX + (dref?.centeringX || 0) * scale, + -translateY + (dref?.centeringY || 0) * scale, 1) + .scale(1 / scale); // prettier-ignore } getDocWidth(d?: Doc) { if (!d) return 0; @@ -623,7 +624,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection if (!e.isPropagationStopped()) { const cm = ContextMenu.Instance; const options = cm.findByDescription('Options...'); - const optionItems: ContextMenuProps[] = options && 'subitems' in options ? options.subitems : []; + const optionItems: ContextMenuProps[] = options?.subitems ?? []; optionItems.push({ description: `${this.layoutDoc._columnsFill ? 'Variable Size' : 'Autosize'} Column`, event: () => { this.layoutDoc._columnsFill = !this.layoutDoc._columnsFill; }, icon: 'plus' }); // prettier-ignore optionItems.push({ description: `${this.layoutDoc._layout_autoHeight ? 'Variable Height' : 'Auto Height'}`, event: () => { this.layoutDoc._layout_autoHeight = !this.layoutDoc._layout_autoHeight; }, icon: 'plus' }); // prettier-ignore optionItems.push({ description: 'Clear All', event: () => { this.dataDoc[this.fieldKey ?? 'data'] = new List([]); } , icon: 'times' }); // prettier-ignore @@ -663,7 +664,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection renderDepth={this._props.renderDepth} focus={emptyFunction} styleProvider={this._props.styleProvider} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} whenChildContentsActiveChanged={emptyFunction} childFilters={this._props.childFilters} childFiltersByRanges={this._props.childFiltersByRanges} @@ -688,10 +689,9 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection return this._props.isContentActive() === false ? 'none' : undefined; } - observer = new _global.ResizeObserver(() => this._props.setHeight?.(this.headerMargin + (this.isStackingView ? Math.max(...this._refList.map(DivHeight)) : this._refList.reduce((p, r) => p + DivHeight(r), 0)))); + observer = new ResizeObserver(() => this._props.setHeight?.(this.headerMargin + (this.isStackingView ? Math.max(...this._refList.map(DivHeight)) : this._refList.reduce((p, r) => p + DivHeight(r), 0)))); onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); - _oldWheel: any; render() { TraceMobx(); const editableViewProps = { @@ -722,8 +722,8 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection }} style={{ overflowY: this.isContentActive() ? 'auto' : 'hidden', - background: this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor), - pointerEvents: (this._props.pointerEvents?.() as any) ?? this.backgroundEvents, + background: this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor) as string, + pointerEvents: this._props.pointerEvents?.() ?? this.backgroundEvents, }} onScroll={action(e => { this._scroll = e.currentTarget.scrollTop; diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index e2ad5b31d..5ae08e535 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -1,6 +1,3 @@ -/* eslint-disable jsx-a11y/control-has-associated-label */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; @@ -51,7 +48,7 @@ interface CSVFieldColumnProps { addDocument: (doc: Doc | Doc[]) => boolean; createDropTarget: (ele: HTMLDivElement) => void; screenToLocalTransform: () => Transform; - refList: any[]; + refList: HTMLElement[]; } @observer @@ -64,7 +61,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent< @observable _heading = ''; @observable _color = ''; - constructor(props: any) { + constructor(props: CSVFieldColumnProps) { super(props); makeObservable(this); this._heading = this._props.headingObject ? this._props.headingObject.heading : this._props.heading; @@ -118,7 +115,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent< this._props.pivotField && drop.docs?.forEach(d => Doc.SetInPlace(d, this._props.pivotField, drop.val, false)); return true; }); - getValue = (value: string): any => { + getValue = (value: string) => { const parsed = parseInt(value); if (!isNaN(parsed)) return parsed; if (value.toLowerCase().indexOf('true') > -1) return true; @@ -212,7 +209,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent< <div className="colorOptions"> {colors.map(col => { const palette = PastelSchemaPalette.get(col); - return <div className={'colorPicker' + (selected === palette ? ' active' : '')} style={{ backgroundColor: palette }} onClick={() => this.changeColumnColor(palette!)} />; + return <div key={col} className={'colorPicker' + (selected === palette ? ' active' : '')} style={{ backgroundColor: palette }} onClick={() => this.changeColumnColor(palette!)} />; })} </div> </div> diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 26528b2b3..6aca8f2ca 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -1,4 +1,4 @@ -import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import * as React from 'react'; import * as rp from 'request-promise'; import { ClientUtils, returnFalse } from '../../../ClientUtils'; @@ -9,7 +9,7 @@ import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; import { ScriptField } from '../../../fields/ScriptField'; -import { BoolCast, Cast, DocCast, 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'; @@ -22,7 +22,7 @@ import { DragManager } from '../../util/DragManager'; import { dropActionType } from '../../util/DropActionTypes'; import { ImageUtils } from '../../util/Import & Export/ImageUtils'; import { SnappingManager } from '../../util/SnappingManager'; -import { UndoManager, undoBatch } from '../../util/UndoManager'; +import { UndoManager } from '../../util/UndoManager'; import { ViewBoxBaseComponent } from '../DocComponent'; import { FieldViewProps } from '../nodes/FieldView'; import { DocumentView } from '../nodes/DocumentView'; @@ -45,6 +45,7 @@ export interface CollectionViewProps extends React.PropsWithChildren<FieldViewPr childLayoutTemplate?: () => Doc | undefined; // specify a layout Doc template to use for children of the collection childHideDecorationTitle?: boolean; childHideResizeHandles?: boolean; + childHideDecorations?: boolean; childDragAction?: dropActionType; childXPadding?: number; childYPadding?: number; @@ -67,7 +68,7 @@ export function CollectionSubView<X>() { private gestureDisposer?: GestureUtils.GestureEventDisposer; protected _mainCont?: HTMLDivElement; - constructor(props: any) { + constructor(props: X & SubCollectionViewProps) { super(props); makeObservable(this); } @@ -227,7 +228,6 @@ export function CollectionSubView<X>() { } } - @undoBatch // eslint-disable-next-line @typescript-eslint/no-unused-vars protected onGesture(e: Event, ge: GestureUtils.GestureEvent) {} @@ -294,7 +294,6 @@ export function CollectionSubView<X>() { return false; } - @undoBatch protected async onExternalDrop(e: React.DragEvent, options: DocumentOptions, completed?: (docs: Doc[]) => void) { if (e.ctrlKey) { e.stopPropagation(); // bcz: this is a hack to stop propagation when dropping an image on a text document with shift+ctrl @@ -386,7 +385,7 @@ export function CollectionSubView<X>() { addDocument(htmlDoc); if (srcWeb) { const iframe = DocumentView.Selected()[0].ContentDiv?.getElementsByTagName('iframe')?.[0]; - const focusNode = iframe?.contentDocument?.getSelection()?.focusNode as any; + const focusNode = iframe?.contentDocument?.getSelection()?.focusNode; if (focusNode) { const anchor = srcWeb?.ComponentView?.getAnchor?.(true); anchor && DocUtils.MakeLink(htmlDoc, anchor, {}); @@ -465,23 +464,6 @@ export function CollectionSubView<X>() { if (item.kind === 'file') { const file = item.getAsFile(); file?.type && files.push(file); - - file?.type === 'application/json' && - ClientUtils.readUploadedFileAsText(file).then(result => { - const json = JSON.parse(result as string); - addDocument( - Docs.Create.TreeDocument( - json['rectangular-puzzle'].crossword.clues[0].clue.map((c: any) => { - const label = Docs.Create.LabelDocument({ title: c['#text'], _width: 120, _height: 20 }); - const proto = Doc.GetProto(label); - proto._width = 120; - proto._height = 20; - return proto; - }), - { _width: 150, _height: 600, title: 'across', backgroundColor: 'white', _createDocOnCR: true } - ) - ); - }); } } this.slowLoadDocuments(files, options, generatedDocuments, text, completed, addDocument).then(batch.end); diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx index 0369e4a2a..8a24db330 100644 --- a/src/client/views/collections/CollectionTimeView.tsx +++ b/src/client/views/collections/CollectionTimeView.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -18,7 +16,7 @@ import { ContextMenuProps } from '../ContextMenuItem'; import { FieldsDropdown } from '../FieldsDropdown'; import { PinDocView } from '../PinFuncs'; import { DocumentView } from '../nodes/DocumentView'; -import { CollectionSubView } from './CollectionSubView'; +import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; import './CollectionTimeView.scss'; import { ViewDefBounds, computePivotLayout, computeTimelineLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; @@ -32,7 +30,7 @@ export class CollectionTimeView extends CollectionSubView() { @observable _viewDefDivClick: Opt<ScriptField> = undefined; @observable _focusPivotField: Opt<string> = undefined; - constructor(props: any) { + constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); } @@ -51,7 +49,7 @@ export class CollectionTimeView extends CollectionSubView() { getAnchor = (addAsAnnotation: boolean) => { const anchor = Docs.Create.ConfigDocument({ - title: ComputedField.MakeFunction(`"${this.pivotField}"])`) as any, + title: ComputedField.MakeFunction(`"${this.pivotField}"])`) as unknown as string, // title can take a functiono or a string annotationOn: this.Document, }); PinDocView(anchor, { pinData: { type_collection: true, pivot: true, filters: true } }, this.Document); diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 285598600..a60cd98ac 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -1,10 +1,9 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { DivHeight, returnAll, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnNone, returnOne, returnTrue, returnZero } from '../../../ClientUtils'; -import { Doc, DocListCast, Opt, StrListCast } from '../../../fields/Doc'; +import ResizeObserver from 'resize-observer-polyfill'; +import { DivHeight, returnAll, returnEmptyFilter, returnFalse, returnNone, returnOne, returnTrue, returnZero } from '../../../ClientUtils'; +import { Doc, DocListCast, Opt, returnEmptyDoclist, StrListCast } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { listSpec } from '../../../fields/Schema'; @@ -19,21 +18,20 @@ import { dropActionType } from '../../util/DropActionTypes'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; -import { undoBatch, UndoManager } from '../../util/UndoManager'; +import { undoable, undoBatch, UndoManager } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { EditableView } from '../EditableView'; import { DocumentView } from '../nodes/DocumentView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { StyleProp } from '../StyleProp'; +import { returnEmptyDocViewList } from '../StyleProvider'; import { CollectionFreeFormView } from './collectionFreeForm'; -import { CollectionSubView } from './CollectionSubView'; +import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; import './CollectionTreeView.scss'; import { TreeViewType } from './CollectionTreeViewType'; import { TreeView } from './TreeView'; -const _global = (window /* browser */ || global) /* node */ as any; - export type collectionTreeViewProps = { treeViewExpandedView?: 'fields' | 'layout' | 'links' | 'data'; treeViewOpen?: boolean; @@ -55,10 +53,10 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree private _titleRef?: HTMLDivElement | HTMLInputElement | null; private _disposers: { [name: string]: IReactionDisposer } = {}; private _isDisposing = false; // notes that instance is in process of being disposed - private refList: Set<any> = new Set(); // list of tree view items to monitor for height changes - private observer: any; // observer for monitoring tree view items. + private refList: Set<HTMLElement> = new Set(); // list of tree view items to monitor for height changes + private observer: ResizeObserver | undefined; // observer for monitoring tree view items. - constructor(props: any) { + constructor(props: SubCollectionViewProps & collectionTreeViewProps) { super(props); makeObservable(this); } @@ -113,14 +111,14 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree !this._props.dontRegisterView && this._props.setHeight?.(bodyHeight + titleHeight); } }; - unobserveHeight = (ref: any) => { + unobserveHeight = (ref: HTMLElement) => { this.refList.delete(ref); this.layoutDoc.layout_autoHeight && this.computeHeight(); }; - observeHeight = (ref: any) => { + observeHeight = (ref: HTMLElement) => { if (ref) { this.refList.add(ref); - this.observer = new _global.ResizeObserver(() => { + this.observer = new ResizeObserver(() => { if (this.layoutDoc.layout_autoHeight && ref && this.refList.size && !SnappingManager.IsDragging) { this.computeHeight(); } @@ -216,7 +214,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree ContextMenu.Instance.addItem({ description: 'Options...', subitems: layoutItems, icon: 'eye' }); if (!Doc.noviceMode) { const existingOnClick = ContextMenu.Instance.findByDescription('OnClick...'); - const onClicks: ContextMenuProps[] = existingOnClick && 'subitems' in existingOnClick ? existingOnClick.subitems : []; + const onClicks: ContextMenuProps[] = existingOnClick?.subitems ?? []; onClicks.push({ description: 'Edit onChecked Script', event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.Document, undefined, 'onCheckedClick'), 'edit onCheckedClick'), icon: 'edit' }); !existingOnClick && ContextMenu.Instance.addItem({ description: 'OnClick...', noexpand: true, subitems: onClicks, icon: 'mouse-pointer' }); } @@ -229,16 +227,16 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree get editableTitle() { return ( <EditableView - contents={this.dataDoc.title} + contents={StrCast(this.dataDoc.title)} display="block" maxHeight={72} height="auto" GetValue={() => StrCast(this.dataDoc.title)} - SetValue={undoBatch((value: string, shift: boolean, enter: boolean) => { + SetValue={undoable((value: string, shift: boolean, enter: boolean) => { if (enter && this.Document.treeView_Type === TreeViewType.outline) this.makeTextCollection(this.treeChildren); this.dataDoc.title = value; return true; - })} + }, 'set doc title')} /> ); } @@ -285,7 +283,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree @observable _renderCount = 1; @computed get treeViewElements() { TraceMobx(); - const dragAction = StrCast(this.Document.childDragAction) as any as dropActionType; + const dragAction = StrCast(this.Document.childDragAction) as dropActionType; const treeAddDoc = (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => this.addDoc(doc, relativeTo, before); const moveDoc = (d: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => this._props.moveDocument?.(d, target, addDoc) || false; if (this._renderCount < this.treeChildren.length) @@ -333,9 +331,11 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree return this.dataDoc === null ? null : ( <div className="collectionTreeView-titleBar" - ref={action((r: any) => { - (this._titleRef = r) && (this._titleHeight = r.getBoundingClientRect().height * this.ScreenToLocalBoxXf().Scale); - })} + ref={r => + runInAction(() => { + (this._titleRef = r) && (this._titleHeight = r.getBoundingClientRect().height * this.ScreenToLocalBoxXf().Scale); + }) + } key={this.Document[Id]} style={!this.outlineMode ? { marginLeft: this.marginX(), paddingTop: this.marginTop() } : {}}> {this.outlineMode ? this.documentTitle : this.editableTitle} @@ -370,7 +370,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree renderDepth={this._props.renderDepth + 1} focus={emptyFunction} styleProvider={this._props.styleProvider} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} whenChildContentsActiveChanged={emptyFunction} childFilters={this._props.childFilters} childFiltersByRanges={this._props.childFiltersByRanges} @@ -410,8 +410,8 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree @observable _headerHeight = 0; @computed get content() { - const background = () => this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor); - const color = () => this._props.styleProvider?.(this.Document, this._props, StyleProp.Color); + const background = () => this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor) as string; + const color = () => this._props.styleProvider?.(this.Document, this._props, StyleProp.Color) as string; const pointerEvents = () => (this._props.isContentActive() === false ? 'none' : undefined); const titleBar = this._props.treeViewHideTitle || this.Document.treeView_HideTitle ? null : this.titleBar; return ( diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index a750b731a..ab93abab6 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -17,6 +17,7 @@ import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { FieldView } from '../nodes/FieldView'; import { OpenWhere } from '../nodes/OpenWhere'; import { CollectionCalendarView } from './CollectionCalendarView'; +import { CollectionCardView } from './CollectionCardDeckView'; import { CollectionCarousel3DView } from './CollectionCarousel3DView'; import { CollectionCarouselView } from './CollectionCarouselView'; import { CollectionDockingView } from './CollectionDockingView'; @@ -33,8 +34,6 @@ import { CollectionLinearView } from './collectionLinear'; import { CollectionMulticolumnView } from './collectionMulticolumn/CollectionMulticolumnView'; import { CollectionMultirowView } from './collectionMulticolumn/CollectionMultirowView'; import { CollectionSchemaView } from './collectionSchema/CollectionSchemaView'; -import { CollectionCardView } from './CollectionCardDeckView'; -import { DocData } from '../../../fields/DocSymbols'; @observer export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewProps>() { @@ -49,7 +48,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr private reactionDisposer: IReactionDisposer | undefined; @observable _isContentActive: boolean | undefined = undefined; - constructor(props: any) { + constructor(props: CollectionViewProps) { super(props); makeObservable(this); this._annotationKeySuffix = returnEmptyString; @@ -73,7 +72,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr } get collectionViewType(): CollectionViewType | undefined { - const viewField = StrCast(this.layoutDoc._type_collection) as any as CollectionViewType; + const viewField = StrCast(this.layoutDoc._type_collection) as CollectionViewType; if (CollectionView._safeMode) { switch (viewField) { case CollectionViewType.Freeform: @@ -133,7 +132,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr ]; const existingVm = ContextMenu.Instance.findByDescription(category); - const catItems = existingVm && 'subitems' in existingVm ? existingVm.subitems : []; + const catItems = existingVm?.subitems ?? []; catItems.push({ description: 'Add a Perspective...', addDivider: true, noexpand: true, subitems: subItems, icon: 'eye' }); !existingVm && ContextMenu.Instance.addItem({ description: category, subitems: catItems, icon: 'eye' }); } @@ -152,7 +151,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr }); const options = cm.findByDescription('Options...'); - const optionItems = options && 'subitems' in options ? options.subitems : []; + const optionItems = options?.subitems ?? []; !Doc.noviceMode ? optionItems.splice(0, 0, { description: `${this.Document.forceActive ? 'Select' : 'Force'} Contents Active`, event: () => {this.Document.forceActive = !this.Document.forceActive}, icon: 'project-diagram' }) : null; // prettier-ignore if (this.Document.childLayout instanceof Doc) { optionItems.push({ description: 'View Child Layout', event: () => this._props.addDocTab(this.Document.childLayout as Doc, OpenWhere.addRight), icon: 'project-diagram' }); @@ -166,7 +165,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr if (!Doc.noviceMode && !this.Document.annotationOn && !this._props.hideClickBehaviors) { const existingOnClick = cm.findByDescription('OnClick...'); - const onClicks = existingOnClick && 'subitems' in existingOnClick ? existingOnClick.subitems : []; + const onClicks = existingOnClick?.subitems ?? []; const funcs = [ { key: 'onChildClick', name: 'On Child Clicked' }, { key: 'onChildDoubleClick', name: 'On Child Double Clicked' }, @@ -196,7 +195,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr if (!Doc.noviceMode) { const more = cm.findByDescription('More...'); - const moreItems = more && 'subitems' in more ? more.subitems : []; + const moreItems = more?.subitems ?? []; moreItems.push({ description: 'Export Image Hierarchy', icon: 'columns', event: () => ImageUtils.ExportHierarchyToFileSystem(this.Document) }); !more && cm.addItem({ description: 'More...', subitems: moreItems, icon: 'hand-point-right' }); } diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 46f61290e..31b6be927 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -6,15 +6,16 @@ import { IReactionDisposer, ObservableSet, action, computed, makeObservable, obs import { observer } from 'mobx-react'; import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; -import { ClientUtils, DashColor, lightOrDark, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick } from '../../../ClientUtils'; +import ResizeObserver from 'resize-observer-polyfill'; +import { ClientUtils, DashColor, lightOrDark, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick } from '../../../ClientUtils'; import { emptyFunction } from '../../../Utils'; -import { Doc, Opt } from '../../../fields/Doc'; +import { Doc, Opt, returnEmptyDoclist } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { FieldId } from '../../../fields/RefField'; import { ComputedField } from '../../../fields/ScriptField'; -import { Cast, DocCast, NumCast, StrCast, toList } from '../../../fields/Types'; +import { Cast, NumCast, StrCast, toList } from '../../../fields/Types'; import { DocServer } from '../../DocServer'; import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes'; import { Docs } from '../../documents/Documents'; @@ -41,8 +42,6 @@ import { CollectionView } from './CollectionView'; import './TabDocView.scss'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; -const _global = (window /* browser */ || global) /* node */ as any; - interface TabMinimapViewProps { document: Doc; tabView: () => DocumentView | undefined; @@ -67,7 +66,7 @@ class TabMiniThumb extends React.Component<TabMiniThumbProps> { } @observer export class TabMinimapView extends ObservableReactComponent<TabMinimapViewProps> { - static miniStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string): any => { + static miniStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => { if (doc) { switch (property.split(':')[0]) { case StyleProp.PointerEvents: return 'none'; @@ -158,8 +157,8 @@ export class TabMinimapView extends ObservableReactComponent<TabMinimapViewProps addDocTab={this._props.addDocTab} // eslint-disable-next-line no-use-before-define pinToPres={TabDocView.PinDoc} - childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyDoclist} - childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyDoclist} + childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyFilter} + childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyFilter} searchFilterDocs={CollectionDockingView.Instance?.searchFilterDocs ?? returnEmptyDoclist} fitContentsToBox={returnTrue} xPadding={this.xPadding} @@ -183,6 +182,7 @@ export class TabMinimapView extends ObservableReactComponent<TabMinimapViewProps interface TabDocViewProps { documentId: FieldId; keyValue?: boolean; + // eslint-disable-next-line @typescript-eslint/no-explicit-any glContainer: any; } @observer @@ -274,7 +274,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> { } static Activate = (tabDoc: Doc) => { - const tab = Array.from(CollectionDockingView.Instance?.tabMap!).find(findTab => findTab.DashDoc === tabDoc && !findTab.contentItem.config.props.keyValue); + const tab = Array.from(CollectionDockingView.Instance?.tabMap ?? []).find(findTab => findTab.DashDoc === tabDoc && !findTab.contentItem.config.props.keyValue); tab?.header.parent.setActiveContentItem(tab.contentItem); // glr: Panning does not work when this is set - (this line is for trying to make a tab that is not topmost become topmost) return tab !== undefined; }; @@ -286,7 +286,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> { // } // return undefined; // } - constructor(props: any) { + constructor(props: TabDocViewProps) { super(props); makeObservable(this); DocumentView.activateTabView = TabDocView.Activate; @@ -327,10 +327,12 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> { get view() { return this._view; } + // eslint-disable-next-line @typescript-eslint/no-explicit-any _lastTab: any; _lastView: DocumentView | undefined; @action + // eslint-disable-next-line @typescript-eslint/no-explicit-any init = (tab: any, doc: Opt<Doc>) => { if (tab.contentItem === tab.header.parent.getActiveContentItem()) this._activated = true; if (tab.DashDoc !== doc && doc && tab.contentItem?.config.type !== 'stack') { @@ -357,10 +359,11 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> { titleEle.size = StrCast(doc.title).length + 3; titleEle.value = doc.title; titleEle.onkeydown = (e: KeyboardEvent) => e.stopPropagation(); - titleEle.onchange = (e: any) => { + titleEle.onchange = (e: InputEvent) => { undoable(() => { - titleEle.size = e.currentTarget.value.length + 3; - doc[DocData].title = e.currentTarget.value; + const target = e.currentTarget as unknown as { value: string }; + titleEle.size = target?.value.length + 3; + doc[DocData].title = target?.value ?? ''; }, 'edit tab title')(); }; @@ -399,9 +402,10 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> { tab._disposers.color = reaction( () => ({ variant: SnappingManager.userVariantColor, degree: Doc.GetBrushStatus(doc), highlight: DefaultStyleProvider(this._document, undefined, StyleProp.Highlighting) }), ({ variant, degree, highlight }) => { - const color = highlight?.highlightIndex === Doc.DocBrushStatus.highlighted ? highlight.highlightColor : degree ? ['transparent', variant, variant, 'orange'][degree] : variant; + const { highlightIndex, highlightColor } = (highlight as { highlightIndex: number; highlightColor: string }) ?? { highlightIndex: undefined, highlightColor: undefined }; + const color = highlightIndex === Doc.DocBrushStatus.highlighted ? highlightColor : degree ? ['transparent', variant, variant, 'orange'][degree] : variant; - const textColor = color === variant ? SnappingManager.userColor ?? '' : lightOrDark(color); + const textColor = color === variant ? (SnappingManager.userColor ?? '') : lightOrDark(color); titleEle.style.color = textColor; iconWrap.style.color = textColor; closeWrap.style.color = textColor; @@ -448,8 +452,8 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> { }; // select the tab document when the tab is directly clicked and activate the tab whenver the tab document is selected - titleEle.onpointerdown = action((e: any) => { - if (e.target.className !== 'lm_iconWrap') { + titleEle.onpointerdown = action((e: PointerEvent) => { + if ((e.target as HTMLElement)?.className !== 'lm_iconWrap') { if (this.view) DocumentView.SelectView(this.view, false); else this._activated = true; if (Date.now() - titleEle.lastClick < 1000) titleEle.select(); @@ -481,7 +485,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> { tab.closeElement .off('click') // unbind the current click handler .click(() => { - Object.values(tab._disposers).forEach((disposer: any) => disposer?.()); + Object.values(tab._disposers).forEach(disposer => (disposer as () => void)()); DocumentView.DeselectAll(); UndoManager.RunInBatch(() => tab.contentItem.remove(), 'delete tab'); }); @@ -489,8 +493,8 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> { }; componentDidMount() { - new _global.ResizeObserver( - action((entries: any) => { + new ResizeObserver( + action(entries => { // eslint-disable-next-line no-restricted-syntax for (const entry of entries) { this._panelWidth = entry.contentRect.width; @@ -523,6 +527,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> { public static DontSelectOnActivate = 'dontSelectOnActivate'; @action.bound + // eslint-disable-next-line @typescript-eslint/no-explicit-any private onActiveContentItemChanged(contentItem: any) { if (!contentItem || (this.stack === contentItem.parent && ((contentItem?.tab === this.tab && !this._isActive) || (contentItem?.tab !== this.tab && this._isActive)))) { this._activated = this._isActive = !contentItem || contentItem?.tab === this.tab; @@ -612,8 +617,8 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> { PanelWidth={this.PanelWidth} PanelHeight={this.PanelHeight} styleProvider={DefaultStyleProvider} - childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyDoclist} - childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyDoclist} + childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyFilter} + childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyFilter} searchFilterDocs={CollectionDockingView.Instance?.searchFilterDocs ?? returnEmptyDoclist} addDocument={undefined} removeDocument={this.remDocTab} @@ -623,7 +628,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> { dontCenter="y" whenChildContentsActiveChanged={this.whenChildContentActiveChanges} focus={this.focusFunc} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} pinToPres={TabDocView.PinDoc} /> {this.disableMinimap() ? null : <TabMinimapView key="minimap" addDocTab={this.addDocTab} PanelHeight={this.PanelHeight} PanelWidth={this.PanelWidth} background={this.miniMapColor} document={this._document} tabView={this.tabView} />} @@ -649,13 +654,13 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> { this._view && DocumentView.removeView(this._view); } this._lastTab = this.tab; - (this._mainCont as any).InitTab = (tab: any) => this.init(tab, this._document); + (this._mainCont as { InitTab?: (tab: object) => void }).InitTab = (tab: object) => this.init(tab, this._document); DocServer.GetRefField(this._props.documentId).then( action(doc => { doc instanceof Doc && (this._document = doc) && this.tab && this.init(this.tab, this._document); }) ); - new _global.ResizeObserver(action(() => this._forceInvalidateScreenToLocal++)).observe(ref); + ref && new ResizeObserver(action(() => this._forceInvalidateScreenToLocal++)).observe(ref); } }}> {this.docView} diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index f69aea2a7..b10a521ca 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -1,15 +1,12 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { IconButton, Size } from 'browndash-components'; -import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { ClientUtils, lightOrDark, return18, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, returnZero, setupMoveUpEvents, simulateMouseClick } from '../../../ClientUtils'; +import { ClientUtils, lightOrDark, return18, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, returnZero, setupMoveUpEvents, simulateMouseClick } from '../../../ClientUtils'; import { emptyFunction } from '../../../Utils'; -import { Doc, DocListCast, Field, FieldResult, FieldType, Opt, StrListCast } from '../../../fields/Doc'; +import { Doc, DocListCast, Field, FieldType, Opt, StrListCast, returnEmptyDoclist } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; @@ -41,14 +38,15 @@ import { CollectionView } from './CollectionView'; import { TreeSort } from './TreeSort'; import './TreeView.scss'; +// eslint-disable-next-line @typescript-eslint/no-var-requires const { TREE_BULLET_WIDTH } = require('../global/globalCssVariables.module.scss'); // prettier-ignore export interface TreeViewProps { treeView: CollectionTreeView; // eslint-disable-next-line no-use-before-define parentTreeView: TreeView | CollectionTreeView | undefined; - observeHeight: (ref: any) => void; - unobserveHeight: (ref: any) => void; + observeHeight: (ref: HTMLDivElement) => void; + unobserveHeight: (ref: HTMLDivElement) => void; prevSibling?: Doc; Document: Doc; dataDoc?: Doc; @@ -188,7 +186,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { moving: boolean = false; @undoBatch move = (doc: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => { if (this.Document !== target && addDoc !== returnFalse) { - const canAdd1 = (this._props.parentTreeView as any).dropping || !(ComputedField.WithoutComputed(() => FieldValue(this._props.parentTreeView?.Document.data)) instanceof ComputedField); + const canAdd1 = (this._props.parentTreeView as TreeView).dropping || !(ComputedField.WithoutComputed(() => FieldValue(this._props.parentTreeView?.Document.data)) instanceof ComputedField); // bcz: this should all be running in a Temp undo batch instead of hackily testing for returnFalse if (canAdd1 && this._props.removeDoc?.(doc) === true) { @@ -251,7 +249,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { return []; } - const runningChildren: FieldResult[] = []; + const runningChildren: Doc[] = []; childList.forEach(child => { if (child.runProcess && TreeView.GetRunningChildren.get(child)) { if (child.runProcess) { @@ -263,7 +261,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { return runningChildren; }; - static GetRunningChildren = new Map<Doc, any>(); + static GetRunningChildren = new Map<Doc, () => Doc[]>(); static ToggleChildrenRun = new Map<Doc, () => void>(); constructor(props: TreeViewProps) { super(props); @@ -285,7 +283,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { TreeView.GetRunningChildren.set(this.Document, () => this.getRunningChildren(this.childDocs)); } - _treeEle: any; + _treeEle: HTMLDivElement | null = null; protected createTreeDropTarget = (ele: HTMLDivElement) => { this._treedropDisposer?.(); ele && ((this._treedropDisposer = DragManager.MakeDropTarget(ele, this.treeDrop.bind(this), this.Document, this.preTreeDrop.bind(this))), this.Document); @@ -472,7 +470,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { refTransform = (ref: HTMLElement | undefined | null) => { if (!ref) return this.ScreenToLocalTransform(); const { translateX, translateY, scale } = ClientUtils.GetScreenTransform(ref); - return new Transform(-translateX, -translateY, 1).scale(1/scale); + return new Transform(-translateX, -translateY, 1).scale(1 / scale); }; docTransform = () => this.refTransform(this._dref?.ContentDiv); getTransform = () => this.refTransform(this._tref.current); @@ -524,7 +522,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { return toList(docs).reduce((flg, iDoc) => flg && innerAdd(iDoc), true as boolean); }; contentElement = TreeView.GetChildElements( - toList(contents as any), + contents instanceof Doc ? [contents] : DocListCast(contents), this.treeView, this, doc, @@ -572,9 +570,11 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { rows.push( <div style={{ display: 'flex', overflow: 'auto' }} key={key}> <span - ref={action((r: any) => { - if (r) leftOffset.width = r.getBoundingClientRect().width; - })} + ref={r => + runInAction(() => { + if (r) leftOffset.width = r.getBoundingClientRect().width; + }) + } style={{ fontWeight: 'bold' }}> {key + ':'} @@ -608,7 +608,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { return rows; } - _renderTimer: any; + _renderTimer: NodeJS.Timeout | undefined; @observable _renderCount = 1; @computed get renderContent() { TraceMobx(); @@ -754,7 +754,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { } get onCheckedClick() { - return this.Document.type === DocumentType.COL ? undefined : this._props.onCheckedClick?.() ?? ScriptCast(this.Document.onCheckedClick); + return this.Document.type === DocumentType.COL ? undefined : (this._props.onCheckedClick?.() ?? ScriptCast(this.Document.onCheckedClick)); } @action @@ -777,9 +777,9 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { @computed get renderBullet() { TraceMobx(); - const iconType = this.treeView._props.styleProvider?.(this.Document, this.treeView._props, StyleProp.TreeViewIcon + (this.treeViewOpen ? ':treeOpen' : !this.childDocs.length ? ':empty' : '')) || 'question'; + const iconType = (this.treeView._props.styleProvider?.(this.Document, this.treeView._props, StyleProp.TreeViewIcon + (this.treeViewOpen ? ':treeOpen' : !this.childDocs.length ? ':empty' : '')) as string) || 'question'; const color = SettingsManager.userColor; - const checked = this.onCheckedClick ? this.Document.treeView_Checked ?? 'unchecked' : undefined; + const checked = this.onCheckedClick ? (this.Document.treeView_Checked ?? 'unchecked') : undefined; return ( <div className={`bullet${this.treeView.outlineMode ? '-outline' : ''}`} @@ -789,7 +789,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { style={ this.treeView.outlineMode ? { - opacity: this.titleStyleProvider?.(this.Document, this.treeView._props, StyleProp.Opacity), + opacity: this.titleStyleProvider?.(this.Document, this.treeView._props, StyleProp.Opacity) as number, } : { pointerEvents: this._props.isContentActive() ? 'all' : undefined, @@ -829,7 +829,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { @action expandNextviewType = () => { if (this.treeViewOpen && !this.Document.isFolder && !this.treeView.outlineMode && !this.Document.treeView_ExpandedViewLock) { - const next = (modes: any[]) => modes[(modes.indexOf(StrCast(this.treeViewExpandedView)) + 1) % modes.length]; + const next = (modes: string[]) => modes[(modes.indexOf(StrCast(this.treeViewExpandedView)) + 1) % modes.length]; this.Document.treeView_ExpandedView = next(this.validExpandViewTypes); } this.treeViewOpen = true; @@ -897,13 +897,13 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { onChildDoubleClick = () => ScriptCast(this.treeView.Document.treeView_ChildDoubleClick, !this.treeView.outlineMode ? this._openScript?.() : null); refocus = () => this.treeView._props.focus(this.treeView.Document, {}); - ignoreEvent = (e: any) => { + ignoreEvent = (e: React.MouseEvent) => { if (this._props.isContentActive(true)) { e.stopPropagation(); e.preventDefault(); } }; - titleStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string): any => { + titleStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string) => { if (!doc || doc !== this.Document) return this._props?.treeView?._props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView const { treeView } = this; @@ -923,7 +923,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { style={{ // just render a title for a tree view label (identified by treeViewDoc being set in 'props') maxWidth: props?.PanelWidth() || undefined, - background: props?.styleProvider?.(doc, props, StyleProp.BackgroundColor), + background: props?.styleProvider?.(doc, props, StyleProp.BackgroundColor) as string, outline: SnappingManager.IsDragging ? undefined: `solid ${highlightColor} ${highlightIndex}px`, paddingLeft: NumCast(treeView.Document.childXPadding, NumCast(treeView._props.childXPadding, Doc.IsComicStyle(doc)?20:0)), paddingRight: NumCast(treeView.Document.childXPadding, NumCast(treeView._props.childXPadding, Doc.IsComicStyle(doc)?20:0)), @@ -938,7 +938,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { } return treeView._props.styleProvider?.(doc, props, property); }; - embeddedStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string): any => { + embeddedStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string) => { if (property.startsWith(StyleProp.Decorations)) return null; return this._props?.treeView?._props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView }; @@ -990,28 +990,30 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { this._editTitle = e; })} GetValue={() => StrCast(this.Document.title)} - OnTab={undoBatch((shift?: boolean) => { + OnTab={undoable((shift?: boolean) => { if (!shift) this._props.indentDocument?.(true); else this._props.outdentDocument?.(true); - })} - OnEmpty={undoBatch(() => this.treeView.outlineMode && this._props.removeDoc?.(this.Document))} + }, 'create new tree Doc')} + OnEmpty={undoable(() => this.treeView.outlineMode && this._props.removeDoc?.(this.Document), 'remove tree doc')} OnFillDown={() => this.treeView.fileSysMode && this.makeFolder()} - SetValue={undoBatch((value: string, shiftKey: boolean, enterKey: boolean) => { + SetValue={undoable((value: string, shiftKey: boolean, enterKey: boolean) => { Doc.SetInPlace(this.Document, 'title', value, false); - this.treeView.outlineMode && enterKey && this.makeTextCollection(); - })} + return this.treeView.outlineMode && enterKey && this.makeTextCollection(); + }, 'set tree doc title')} /> ) : ( <DocumentView key="title" - ref={action((r: any) => { - this._docRef = r || undefined; - if (this._docRef && TreeView._editTitleOnLoad?.id === this.Document[Id] && TreeView._editTitleOnLoad.parent === this._props.parentTreeView) { - this._docRef.select(false); - this.setEditTitle(this._docRef); - TreeView._editTitleOnLoad = undefined; - } - })} + ref={r => + runInAction(() => { + this._docRef = r || undefined; + if (this._docRef && TreeView._editTitleOnLoad?.id === this.Document[Id] && TreeView._editTitleOnLoad.parent === this._props.parentTreeView) { + this._docRef.select(false); + this.setEditTitle(this._docRef); + TreeView._editTitleOnLoad = undefined; + } + }) + } Document={this.Document} fitWidth={returnTrue} scriptContext={this} @@ -1068,9 +1070,11 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { </div> <div className="treeView-rightButtons" - ref={action((r: any) => { - r && (this.headerEleWidth = r.getBoundingClientRect().width); - })}> + ref={r => + runInAction(() => { + r && (this.headerEleWidth = r.getBoundingClientRect().width); + }) + }> {this.titleButtons} </div> </> @@ -1090,7 +1094,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { this, e, () => { - (this._dref ?? this._docRef)?.startDragging(e.clientX, e.clientY, '' as any); + (this._dref ?? this._docRef)?.startDragging(e.clientX, e.clientY, undefined); return true; }, returnFalse, @@ -1179,7 +1183,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { @computed get renderBorder() { const sorting = StrCast(this.Document.treeView_SortCriterion, TreeSort.WhenAdded); - const sortings = (this._props.styleProvider?.(this.Document, this.treeView._props, StyleProp.TreeViewSortings) ?? {}) as { [key: string]: { color: string; label: string } }; + const sortings = (this._props.styleProvider?.(this.Document, this.treeView._props, StyleProp.TreeViewSortings) ?? {}) as { [key: string]: { color: string; icon: JSX.Element } }; return ( <div className={`treeView-border${this.treeView.outlineMode ? TreeViewType.outline : ''}`} style={{ borderColor: sortings[sorting]?.color }}> {!this.treeViewOpen ? null : this.renderContent} @@ -1272,8 +1276,8 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { firstLevel: boolean, whenChildContentsActiveChanged: (isActive: boolean) => void, dontRegisterView: boolean | undefined, - observerHeight: (ref: any) => void, - unobserveHeight: (ref: any) => void, + observerHeight: (ref: HTMLElement) => void, + unobserveHeight: (ref: HTMLElement) => void, contextMenuItems: { script: ScriptField; filter: ScriptField; label: string; icon: string }[], // TODO: [AL] add these AddToMap?: (treeViewDoc: Doc, index: number[]) => void, diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx index fc39cafaa..c17371151 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx @@ -12,7 +12,7 @@ import './CollectionFreeFormView.scss'; * returns a truthy value */ // eslint-disable-next-line no-use-before-define -export type infoArc = [() => any, (res?: any) => infoState]; +export type infoArc = [() => unknown, (res?: unknown) => infoState]; export const StateMessage = Symbol('StateMessage'); export const StateMessageGIF = Symbol('StateMessageGIF'); @@ -20,9 +20,9 @@ export const StateEntryFunc = Symbol('StateEntryFunc'); export class infoState { [StateMessage]: string = ''; [StateMessageGIF]?: string = ''; - [StateEntryFunc]?: () => any; + [StateEntryFunc]?: () => unknown; [key: string]: infoArc; - constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => any) { + constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => unknown) { this[StateMessage] = message; Object.assign(this, arcs); this[StateMessageGIF] = messageGif; @@ -44,7 +44,7 @@ export function InfoState( msg: string, // arcs: { [key: string]: infoArc }, gif?: string, - entryFunc?: () => any + entryFunc?: () => unknown ) { // eslint-disable-next-line new-cap return new infoState(msg, arcs, gif, entryFunc); @@ -52,7 +52,7 @@ export function InfoState( export interface CollectionFreeFormInfoStateProps { infoState: infoState; - next: (state: infoState) => any; + next: (state: infoState) => unknown; close: () => void; } @@ -61,7 +61,7 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec _disposers: IReactionDisposer[] = []; @observable _expanded = false; - constructor(props: any) { + constructor(props: CollectionFreeFormInfoStateProps) { super(props); makeObservable(this); } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx index de51cc73c..79aad0ef2 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx @@ -9,7 +9,7 @@ import { aggregateBounds } from '../../../../Utils'; export interface ViewDefBounds { type: string; - payload: any; + payload: unknown; x: number; y: number; z?: number; @@ -72,11 +72,15 @@ function toLabel(target: FieldResult<FieldType>) { */ function getTextWidth(text: string, font: string): number { // re-use canvas object for better performance - const canvas = (getTextWidth as any).canvas || ((getTextWidth as any).canvas = document.createElement('canvas')); + const selfStoreHack = getTextWidth as unknown as { canvas: Element }; + const canvas = (selfStoreHack.canvas = (selfStoreHack.canvas as unknown as HTMLCanvasElement) ?? document.createElement('canvas')); const context = canvas.getContext('2d'); - context.font = font; - const metrics = context.measureText(text); - return metrics.width; + if (context) { + context.font = font; + const metrics = context.measureText(text); + return metrics.width; + } + return 0; } interface PivotColumn { @@ -131,13 +135,13 @@ export function computeStarburstLayout(poolData: Map<string, PoolData>, pivotDoc return normalizeResults(burstDiam, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]); } -export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) { +export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: unknown) { const docMap = new Map<string, PoolData>(); const fieldKey = 'data'; const pivotColumnGroups = new Map<FieldResult<FieldType>, PivotColumn>(); let nonNumbers = 0; - const pivotFieldKey = toLabel(engineProps?.pivotField ?? pivotDoc._pivotField) || 'author'; + const pivotFieldKey = toLabel((engineProps as { pivotField?: string })?.pivotField ?? pivotDoc._pivotField) || 'author'; childPairs.forEach(pair => { const listValue = Cast(pair.layout[pivotFieldKey], listSpec('string'), null); @@ -265,7 +269,7 @@ export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Do y: -maxColHeight + pivotAxisWidth, width: pivotAxisWidth * numCols * expander, height: maxColHeight, - payload: pivotColumnGroups.get(key)!.filters, + payload: pivotColumnGroups.get(key)?.filters, })); groupNames.push(...dividers); // eslint-disable-next-line no-use-before-define diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx index e543b4008..bc9dd022c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx @@ -54,8 +54,8 @@ export class CollectionFreeFormPannableContents extends ObservableReactComponent <div className={'collectionfreeformview' + (this._props.viewDefDivClick ? '-viewDef' : '-none')} onScroll={e => { - const target = e.target as any; - if (getComputedStyle(target)?.overflow === 'visible') { + const { target } = e; + if (target instanceof Element && getComputedStyle(target)?.overflow === 'visible') { target.scrollTop = target.scrollLeft = 0; // if collection is visible, scrolling messes things up since there are no scroll bars } }} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 5b7f09be3..c4cf8dee7 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1,16 +1,14 @@ /* eslint-disable react/jsx-props-no-spreading */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ import { Bezier } from 'bezier-js'; import { Colors } from 'browndash-components'; +import { Property } from 'csstype'; import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { computedFn } from 'mobx-utils'; import * as React from 'react'; import { ClientUtils, DashColor, lightOrDark, OmitKeys, returnFalse, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../../ClientUtils'; import { DateField } from '../../../../fields/DateField'; -import { Doc, DocListCast, Field, FieldType, Opt } from '../../../../fields/Doc'; -import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveEraserWidth, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, SetActiveInkColor, SetActiveInkWidth } from '../../nodes/DocumentView'; +import { Doc, DocListCast, Field, FieldType, Opt, StrListCast } from '../../../../fields/Doc'; import { DocData, Height, Width } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { InkData, InkField, InkTool, Segment } from '../../../../fields/InkField'; @@ -33,20 +31,20 @@ import { CompileScript } from '../../../util/Scripting'; import { ScriptingGlobals } from '../../../util/ScriptingGlobals'; import { freeformScrollMode, SnappingManager } from '../../../util/SnappingManager'; import { Transform } from '../../../util/Transform'; -import { undoable, undoBatch, UndoManager } from '../../../util/UndoManager'; +import { undoable, UndoManager } from '../../../util/UndoManager'; import { Timeline } from '../../animationtimeline/Timeline'; import { ContextMenu } from '../../ContextMenu'; import { InkingStroke } from '../../InkingStroke'; import { CollectionFreeFormDocumentView } from '../../nodes/CollectionFreeFormDocumentView'; import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp'; -import { ActiveFillColor, DocumentView } from '../../nodes/DocumentView'; +import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveEraserWidth, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, DocumentView, SetActiveInkColor, SetActiveInkWidth } from '../../nodes/DocumentView'; import { FieldViewProps } from '../../nodes/FieldView'; import { FocusViewOptions } from '../../nodes/FocusViewOptions'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { OpenWhere, OpenWhereMod } from '../../nodes/OpenWhere'; import { PinDocView, PinProps } from '../../PinFuncs'; import { StyleProp } from '../../StyleProp'; -import { CollectionSubView } from '../CollectionSubView'; +import { CollectionSubView, SubCollectionViewProps } from '../CollectionSubView'; import { TreeViewType } from '../CollectionTreeViewType'; import { CollectionFreeFormBackgroundGrid } from './CollectionFreeFormBackgroundGrid'; import { CollectionFreeFormClusters } from './CollectionFreeFormClusters'; @@ -71,7 +69,7 @@ export interface collectionFreeformViewProps { childPointerEvents?: () => string | undefined; viewField?: string; noOverlay?: boolean; // used to suppress docs in the overlay (z) layer (ie, for minimap since overlay doesn't scale) - engineProps?: any; + engineProps?: unknown; getScrollHeight?: () => number | undefined; } @@ -83,7 +81,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection public unprocessedDocs: Doc[] = []; public static collectionsWithUnprocessedInk = new Set<CollectionFreeFormView>(); public static from(dv?: DocumentView): CollectionFreeFormView | undefined { - const parent = CollectionFreeFormDocumentView.from(dv)?._props.parent; + const parent = CollectionFreeFormDocumentView.from(dv)?._props.reactParent; return parent instanceof CollectionFreeFormView ? parent : undefined; } @@ -123,14 +121,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @observable _marqueeViewRef = React.createRef<MarqueeView>(); @observable _brushedView: { width: number; height: number; panX: number; panY: number } | undefined = undefined; // highlighted region of freeform canvas used by presentations to indicate a region @observable GroupChildDrag: boolean = false; // child document view being dragged. needed to update drop areas of groups when a group item is dragged. - @observable _childPointerEvents: 'none' | 'all' | 'visiblepainted' | undefined = undefined; + @observable _childPointerEvents: Property.PointerEvents | undefined = undefined; @observable _lightboxDoc: Opt<Doc> = undefined; @observable _paintedId = 'id' + Utils.GenerateGuid().replace(/-/g, ''); @observable _keyframeEditing = false; @observable _eraserX: number = 0; @observable _eraserY: number = 0; @observable _showEraserCircle: boolean = false; // to determine whether the radius eraser should show - constructor(props: collectionFreeformViewProps) { + constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); } @@ -140,12 +138,12 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @computed get childPointerEvents() { return SnappingManager.IsResizing ? 'none' - : this._props.childPointerEvents?.() ?? + : (this._props.childPointerEvents?.() ?? (this._props.viewDefDivClick || // (this.layoutEngine === computePassLayout.name && !this._props.isSelected()) || this.isContentActive() === false ? 'none' - : this._props.pointerEvents?.()); + : this._props.pointerEvents?.())); } @computed get contentViews() { const viewsMask = this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z && ele.inkMask !== -1 && ele.inkMask !== undefined).map(ele => ele.ele); @@ -185,7 +183,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection .transform(this.panZoomXf); } @computed get backgroundColor() { - return this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor); + return this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor) as string; } @computed get fitWidth() { return this._props.fitWidth?.(this.Document) ?? this.layoutDoc.layout_fitWidth; @@ -357,7 +355,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection * @param options * @returns */ - focus = (anchor: Doc, options: FocusViewOptions): any => { + focus = (anchor: Doc, options: FocusViewOptions) => { if (anchor.isGroup && !options.docTransform && options.contextPath?.length) { // don't focus on group if there's a context path because we're about to focus on a group item // which will override any group focus. (If we allowed the group to focus, it would mark didMove even if there were no net movement) @@ -374,14 +372,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection const xfToCollection = options?.docTransform ?? Transform.Identity(); const savedState = { panX: NumCast(this.Document[this.panXFieldKey]), panY: NumCast(this.Document[this.panYFieldKey]), scale: options?.willZoomCentered ? this.Document[this.scaleFieldKey] : undefined }; const cantTransform = this.fitContentsToBox || ((this.Document.isGroup || this.layoutDoc._lockedTransform) && !DocumentView.LightboxDoc()); - const { panX, panY, scale } = cantTransform || (!options.willPan && !options.willZoomCentered) ? savedState : this.calculatePanIntoView(anchor, xfToCollection, options?.willZoomCentered ? options?.zoomScale ?? 0.75 : undefined); + const { panX, panY, scale } = cantTransform || (!options.willPan && !options.willZoomCentered) ? savedState : this.calculatePanIntoView(anchor, xfToCollection, options?.willZoomCentered ? (options?.zoomScale ?? 0.75) : undefined); // focus on the document in the collection const didMove = !cantTransform && !anchor.z && (panX !== savedState.panX || panY !== savedState.panY || scale !== savedState.scale); if (didMove) options.didMove = true; // glr: freeform transform speed can be set by adjusting presentation_transition field - needs a way of knowing when presentation is not active... if (didMove) { - const focusTime = options?.instant ? 0 : options.zoomTime ?? 500; + const focusTime = options?.instant ? 0 : (options.zoomTime ?? 500); (options.zoomScale ?? options.willZoomCentered) && scale && (this.Document[this.scaleFieldKey] = scale); this.setPan(panX, panY, focusTime); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow return focusTime; @@ -443,8 +441,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return true; } - @undoBatch - internalAnchorAnnoDrop(e: Event, de: DragManager.DropEvent, annoDragData: DragManager.AnchorAnnoDragData) { + internalAnchorAnnoDrop = undoable((e: Event, de: DragManager.DropEvent, annoDragData: DragManager.AnchorAnnoDragData) => { const dropCreator = annoDragData.dropDocCreator; const [xp, yp] = this.screenToFreeformContentsXf.transformPoint(de.x, de.y); annoDragData.dropDocCreator = (annotationOn: Doc | undefined) => { @@ -457,10 +454,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return dropDoc || this.Document; }; return true; - } + }, 'anchor drop'); - @undoBatch - internalLinkDrop(e: Event, de: DragManager.DropEvent, linkDragData: DragManager.LinkDragData) { + internalLinkDrop = undoable((e: Event, de: DragManager.DropEvent, linkDragData: DragManager.LinkDragData) => { if (this.DocumentView?.() && linkDragData.linkDragView.containerViewPath?.().includes(this.DocumentView())) { const [x, y] = this.screenToFreeformContentsXf.transformPoint(de.x, de.y); // do nothing if link is dropped into any freeform view parent of dragged document @@ -476,9 +472,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return added; } return false; - } + }, 'link drop'); - onInternalDrop = (e: Event, de: DragManager.DropEvent) => { + onInternalDrop = (e: Event, de: DragManager.DropEvent): boolean => { if (de.complete.annoDragData?.dragDocument && super.onInternalDrop(e, de)) return this.internalAnchorAnnoDrop(e, de, de.complete.annoDragData); if (de.complete.linkDragData) return this.internalLinkDrop(e, de, de.complete.linkDragData); if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData); @@ -524,8 +520,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } }; - @undoBatch - onGesture = (e: Event, ge: GestureUtils.GestureEvent) => { + onGesture = undoable((e: Event, ge: GestureUtils.GestureEvent) => { switch (ge.gesture) { case Gestures.Text: if (ge.text) { @@ -568,7 +563,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection e.stopPropagation(); } } - }; + }, 'gesture'); @action onEraserUp = (): void => { this._deleteList.lastElement()?._props.removeDocument?.(this._deleteList.map(ink => ink.Document)); @@ -1178,6 +1173,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection // for some reason bezier.js doesn't handle the case of intersecting a linear curve, so we wrap the intersection // call in a test for linearity bintersects = (curve: Bezier, otherCurve: Bezier) => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any if ((curve as any)._linear) { // bezier.js doesn't intersect properly if the curve is actually a line -- so get intersect other curve against this line, then figure out the t coordinates of the intersection on this line const intersections = otherCurve.lineIntersects({ p1: curve.points[0], p2: curve.points[3] }); @@ -1187,6 +1183,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return intT ? [intT] : []; } } + // eslint-disable-next-line @typescript-eslint/no-explicit-any if ((otherCurve as any)._linear) { return curve.lineIntersects({ p1: otherCurve.points[0], p2: otherCurve.points[3] }); } @@ -1478,17 +1475,17 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return ret; }; childPointerEventsFunc = () => this._childPointerEvents; - childContentsActive = () => (this._props.childContentsActive ?? this.isContentActive() === false ? returnFalse : emptyFunction)(); + childContentsActive = () => ((this._props.childContentsActive ?? this.isContentActive() === false) ? returnFalse : emptyFunction)(); getChildDocView(entry: PoolData) { const childLayout = entry.pair.layout; const childData = entry.pair.data; return ( <CollectionFreeFormDocumentView - // eslint-disable-next-line react/jsx-props-no-spreading - {...OmitKeys(entry, ['replica', 'pair']).omit} + // eslint-disable-next-line react/jsx-props-no-spreading, @typescript-eslint/no-explicit-any + {...(OmitKeys(entry, ['replica', 'pair']).omit as any)} key={childLayout[Id] + (entry.replica || '')} Document={childLayout} - parent={this} + reactParent={this} containerViewPath={this.DocumentView?.().docViewPath} styleProvider={this._clusters.styleProvider} TemplateDataDocument={childData} @@ -1603,7 +1600,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection }; } - onViewDefDivClick = (e: React.MouseEvent, payload: any) => { + onViewDefDivClick = (e: React.MouseEvent, payload: unknown) => { (this._props.viewDefDivClick || ScriptCast(this.Document.onViewDefDivClick))?.script.run({ this: this.Document, payload }); e.stopPropagation(); }; @@ -1637,7 +1634,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection ele: ( <div className="collectionFreeform-customDiv" - title={viewDef.payload?.join(' ')} + title={StrListCast(viewDef.payload as string).join(' ')} key={'div' + x + y + z + viewDef.payload} onClick={e => this.onViewDefDivClick(e, viewDef)} style={{ width, height, backgroundColor: color, transform }} @@ -1658,7 +1655,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection doEngineLayout( poolData: Map<string, PoolData>, - engine: (poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) => ViewDefResult[] + engine: (poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: unknown) => ViewDefResult[] ) { return engine(poolData, this.Document, this.childLayoutPairs, [this._props.PanelWidth(), this._props.PanelHeight()], this.viewDefsToJSX, this._props.engineProps); } @@ -1688,7 +1685,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection .forEach(entry => elements.push({ ele: this.getChildDocView(entry[1]), - bounds: (entry[1].opacity === 0 ? { payload:undefined, type:"", ...entry[1], width: 0, height: 0 } : { payload:undefined, type:"",...entry[1] }), + bounds: entry[1].opacity === 0 ? { payload: undefined, type: '', ...entry[1], width: 0, height: 0 } : { payload: undefined, type: '', ...entry[1] }, inkMask: BoolCast(entry[1].pair.layout.stroke_isInkMask) ? NumCast(entry[1].pair.layout.opacity, 1) : -1, }) ); @@ -1771,7 +1768,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection this._disposers.pointerevents = reaction( () => this.childPointerEvents, pointerevents => { - this._childPointerEvents = pointerevents as any; + this._childPointerEvents = pointerevents as Property.PointerEvents | undefined; }, { fireImmediately: true } ); @@ -1812,24 +1809,25 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection updateIcon = () => { const contentDiv = this.DocumentView?.().ContentDiv; - contentDiv && UpdateIcon( - this.layoutDoc[Id] + '-icon' + new Date().getTime(), - contentDiv, - NumCast(this.layoutDoc._width), - NumCast(this.layoutDoc._height), - this._props.PanelWidth(), - this._props.PanelHeight(), - 0, - 1, - false, - '', - (iconFile, nativeWidth, nativeHeight) => { - this.dataDoc.icon = new ImageField(iconFile); - this.dataDoc.icon_nativeWidth = nativeWidth; - this.dataDoc.icon_nativeHeight = nativeHeight; - } - ); - } + contentDiv && + UpdateIcon( + this.layoutDoc[Id] + '-icon' + new Date().getTime(), + contentDiv, + NumCast(this.layoutDoc._width), + NumCast(this.layoutDoc._height), + this._props.PanelWidth(), + this._props.PanelHeight(), + 0, + 1, + false, + '', + (iconFile, nativeWidth, nativeHeight) => { + this.dataDoc.icon = new ImageField(iconFile); + this.dataDoc.icon_nativeWidth = nativeWidth; + this.dataDoc.icon_nativeHeight = nativeHeight; + } + ); + }; @action onCursorMove = (e: React.PointerEvent) => { @@ -1848,8 +1846,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection this._showEraserCircle = true; }; - @undoBatch - promoteCollection = () => { + promoteCollection = undoable(() => { const childDocs = this.childDocs.slice(); childDocs.forEach(docIn => { const doc = docIn; @@ -1858,10 +1855,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection doc.y = scr?.[1]; }); this._props.addDocTab(childDocs, OpenWhere.inParentFromScreen); - }; + }, 'promote collection'); - @undoBatch - layoutDocsInGrid = () => { + layoutDocsInGrid = undoable(() => { const docs = this.childLayoutPairs.map(pair => pair.layout); const width = Math.max(...docs.map(doc => NumCast(doc._width))) + 20; const height = Math.max(...docs.map(doc => NumCast(doc._height))) + 20; @@ -1871,40 +1867,37 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection doc.x = NumCast(this.Document[this.panXFieldKey]) + (i % dim) * width - (width * dim) / 2; doc.y = NumCast(this.Document[this.panYFieldKey]) + Math.floor(i / dim) * height - (height * dim) / 2; }); - }; + }, 'layout docs in grid'); - @undoBatch - toggleNativeDimensions = () => Doc.toggleNativeDimensions(this.layoutDoc, 1, this.nativeWidth, this.nativeHeight); + toggleNativeDimensions = undoable(() => Doc.toggleNativeDimensions(this.layoutDoc, 1, this.nativeWidth, this.nativeHeight), 'toggle native dimensions'); /// /// resetView restores a freeform collection to unit scale and centered at (0,0) UNLESS /// the view is a group, in which case this does nothing (since Groups calculate their own scale and center) /// - @undoBatch - resetView = () => { + resetView = undoable(() => { this.layoutDoc[this.panXFieldKey] = NumCast(this.dataDoc[this.panXFieldKey + '_reset']); this.layoutDoc[this.panYFieldKey] = NumCast(this.dataDoc[this.panYFieldKey + '_reset']); this.layoutDoc[this.scaleFieldKey] = NumCast(this.dataDoc[this.scaleFieldKey + '_reset'], 1); - }; + }, 'reset view'); /// /// resetView restores a freeform collection to unit scale and centered at (0,0) UNLESS /// the view is a group, in which case this does nothing (since Groups calculate their own scale and center) /// - @undoBatch - toggleResetView = () => { + toggleResetView = undoable(() => { this.dataDoc[this.autoResetFieldKey] = !this.dataDoc[this.autoResetFieldKey]; if (this.dataDoc[this.autoResetFieldKey]) { this.dataDoc[this.panXFieldKey + '_reset'] = this.layoutDoc[this.panXFieldKey]; this.dataDoc[this.panYFieldKey + '_reset'] = this.layoutDoc[this.panYFieldKey]; this.dataDoc[this.scaleFieldKey + '_reset'] = this.layoutDoc[this.scaleFieldKey]; } - }; + }, 'toggle reset view'); onContextMenu = () => { if (this._props.isAnnotationOverlay || !ContextMenu.Instance) return; const appearance = ContextMenu.Instance.findByDescription('Appearance...'); - const appearanceItems = appearance && 'subitems' in appearance ? appearance.subitems : []; + const appearanceItems = appearance?.subitems ?? []; !this.Document.isGroup && appearanceItems.push({ description: 'Reset View', event: this.resetView, icon: 'compress-arrows-alt' }); !this.Document.isGroup && appearanceItems.push({ description: 'Toggle Auto Reset View', event: this.toggleResetView, icon: 'compress-arrows-alt' }); if (this._props.setContentViewBox === emptyFunction) { @@ -1931,7 +1924,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection !appearance && ContextMenu.Instance.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' }); const options = ContextMenu.Instance.findByDescription('Options...'); - const optionItems = options && 'subitems' in options ? options.subitems : []; + const optionItems = options?.subitems ?? []; !this._props.isAnnotationOverlay && !Doc.noviceMode && optionItems.push({ @@ -1955,12 +1948,11 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } !options && ContextMenu.Instance.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' }); const mores = ContextMenu.Instance.findByDescription('More...'); - const moreItems = mores && 'subitems' in mores ? mores.subitems : []; + const moreItems = mores?.subitems ?? []; !mores && ContextMenu.Instance.addItem({ description: 'More...', subitems: moreItems, icon: 'eye' }); }; - @undoBatch - transcribeStrokes = () => { + transcribeStrokes = undoable(() => { if (this.Document.isGroup && this.Document.transcription) { const text = StrCast(this.Document.transcription); const lines = text.split('\n'); @@ -1968,7 +1960,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection this.addDocument(Docs.Create.TextDocument(text, { title: lines[0], x: NumCast(this.layoutDoc.x) + NumCast(this.layoutDoc._width) + 20, y: NumCast(this.layoutDoc.y), _width: 200, _height: height })); } - }; + }, 'transcribe strokes'); @action dragEnding = () => { @@ -2134,7 +2126,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection onDragOver={e => e.preventDefault()} onContextMenu={this.onContextMenu} style={{ - pointerEvents: this._props.isContentActive() && SnappingManager.IsDragging ? 'all' : (this._props.pointerEvents?.() as any), + pointerEvents: this._props.isContentActive() && SnappingManager.IsDragging ? 'all' : this._props.pointerEvents?.(), textAlign: this.isAnnotationOverlay ? 'initial' : undefined, transform: `scale(${this.nativeDimScaling})`, width: `${100 / this.nativeDimScaling}%`, diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss new file mode 100644 index 000000000..0a001d84c --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss @@ -0,0 +1,104 @@ +.face-document-item { + display: flex; + height: max-content; + flex-direction: column; + top: 0; + position: absolute; + width: 100%; + height: 100%; + + h1 { + color: white; + font-size: 24px; + text-align: center; + .face-document-name { + text-align: center; + background: transparent; + width: 80%; + border: transparent; + } + } + + .face-collection-buttons { + position: absolute; + top: 0px; + right: 10px; + } + .face-collection-toggle { + position: absolute; + top: 0px; + left: 10px; + } + .face-document-top { + position: relative; + top: 0; + width: 100%; + left: 0; + } + + .face-document-image-container { + display: flex; + justify-content: center; + flex-wrap: wrap; + overflow-x: hidden; + overflow-y: auto; + position: relative; + padding: 10px; + + .image-wrapper { + position: relative; + width: 70px; + height: 70px; + margin: 10px; + display: flex; + align-items: center; // Center vertically + justify-content: center; // Center horizontally + + img { + width: 100%; + height: 100%; + object-fit: cover; // This ensures the image covers the container without stretching + border-radius: 5px; + border: 2px solid white; + transition: border-color 0.4s; + + &:hover { + border-color: orange; // Change this to your desired hover border color + } + } + + .remove-item { + position: absolute; + bottom: -5; + right: -5; + background-color: rgba(0, 0, 0, 0.5); // Optional: to add a background behind the icon for better visibility + border-radius: 30%; + width: 10px; // Adjust size as needed + height: 10px; // Adjust size as needed + display: flex; + align-items: center; + justify-content: center; + } + } + + // img { + // max-width: 60px; + // margin: 10px; + // border-radius: 5px; + // border: 2px solid white; + // transition: 0.4s; + + // &:hover { + // border-color: orange; + // } + // } + } +} + +.faceCollectionBox { + width: 100%; + height: 100%; + top: 0; + left: 0; + position: absolute; +} diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx new file mode 100644 index 000000000..717081666 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx @@ -0,0 +1,281 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { IconButton, Size } from 'browndash-components'; +import * as faceapi from 'face-api.js'; +import { FaceMatcher } from 'face-api.js'; +import 'ldrs/ring'; +import { IReactionDisposer, action, makeObservable, observable, reaction } from 'mobx'; +import { observer } from 'mobx-react'; +import React from 'react'; +import { DivHeight, lightOrDark, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils'; +import { emptyFunction } from '../../../../Utils'; +import { Doc, Opt } from '../../../../fields/Doc'; +import { DocData } from '../../../../fields/DocSymbols'; +import { List } from '../../../../fields/List'; +import { DocCast, ImageCast, NumCast, StrCast } from '../../../../fields/Types'; +import { DocumentType } from '../../../documents/DocumentTypes'; +import { Docs } from '../../../documents/Documents'; +import { DragManager } from '../../../util/DragManager'; +import { dropActionType } from '../../../util/DropActionTypes'; +import { undoable } from '../../../util/UndoManager'; +import { ViewBoxBaseComponent } from '../../DocComponent'; +import { DocumentView } from '../../nodes/DocumentView'; +import { FieldView, FieldViewProps } from '../../nodes/FieldView'; +import { FaceRecognitionHandler } from '../../search/FaceRecognitionHandler'; +import { CollectionStackingView } from '../CollectionStackingView'; +import './FaceCollectionBox.scss'; +import { MarqueeOptionsMenu } from './MarqueeOptionsMenu'; + +/** + * This code is used to render the sidebar collection of unique recognized faces, where each + * unique face in turn displays the set of images that correspond to the face. + */ + +/** + * Viewer for unique face Doc collections. + * + * This both displays a collection of images corresponding tp a unique face, and + * allows for editing the face collection by removing an image, or drag-and-dropping + * an image that was not recognized. + */ +@observer +export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() { + public static LayoutString(fieldKey: string) { + return FieldView.LayoutString(UniqueFaceBox, fieldKey); + } + private _dropDisposer?: DragManager.DragDropDisposer; + private _disposers: { [key: string]: IReactionDisposer } = {}; + private _lastHeight = 0; + + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); + } + + @observable _headerRef: HTMLDivElement | null = null; + @observable _listRef: HTMLDivElement | null = null; + + observer = new ResizeObserver(a => { + this._props.setHeight?.( + (this.props.Document._face_showImages ? 20 : 0) + // + (!this._headerRef ? 0 : DivHeight(this._headerRef)) + + (!this._listRef ? 0 : DivHeight(this._listRef)) + ); + }); + + componentDidMount(): void { + this._disposers.refList = reaction( + () => ({ refList: [this._headerRef, this._listRef], autoHeight: this.layoutDoc._layout_autoHeight }), + ({ refList, autoHeight }) => { + this.observer.disconnect(); + if (autoHeight) refList.filter(r => r).forEach(r => this.observer.observe(r!)); + }, + { fireImmediately: true } + ); + } + + componentWillUnmount(): void { + this.observer.disconnect(); + Object.keys(this._disposers).forEach(key => this._disposers[key]()); + } + + protected createDropTarget = (ele: HTMLDivElement) => { + this._dropDisposer?.(); + ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.Document)); + }; + + protected onInternalDrop(e: Event, de: DragManager.DropEvent): boolean { + de.complete.docDragData?.droppedDocuments + ?.filter(doc => doc.type === DocumentType.IMG) + .forEach(imgDoc => { + // If the current Face Document has no faces, and the doc has more than one face descriptor, don't let the user add the document first. Or should we just use the first face ? + if (FaceRecognitionHandler.UniqueFaceDescriptors(this.Document).length === 0 && FaceRecognitionHandler.ImageDocFaceAnnos(imgDoc).length > 1) { + alert('Cannot add a document with multiple faces as the first item!'); + } else { + // Loop through the documents' face descriptors and choose the face in the iage with the smallest distance (most similar to the face colleciton) + const faceDescriptorsAsFloat32Array = FaceRecognitionHandler.UniqueFaceDescriptors(this.Document).map(fd => new Float32Array(Array.from(fd))); + const labeledFaceDescriptor = new faceapi.LabeledFaceDescriptors(FaceRecognitionHandler.UniqueFaceLabel(this.Document), faceDescriptorsAsFloat32Array); + const faceMatcher = new FaceMatcher([labeledFaceDescriptor], 1); + const faceAnno = + FaceRecognitionHandler.ImageDocFaceAnnos(imgDoc).reduce( + (prev, faceAnno) => { + const match = faceMatcher.matchDescriptor(new Float32Array(Array.from(faceAnno.faceDescriptor as List<number>))); + return match.distance < prev.dist ? { dist: match.distance, faceAnno } : prev; + }, + { dist: 1, faceAnno: undefined as Opt<Doc> } + ).faceAnno ?? imgDoc; + + // assign the face in the image that's closest to the face collection's face + if (faceAnno) { + faceAnno.face && FaceRecognitionHandler.UniqueFaceRemoveFaceImage(faceAnno, DocCast(faceAnno.face)); + FaceRecognitionHandler.UniqueFaceAddFaceImage(faceAnno, this.Document); + faceAnno.face = this.Document; + } + } + }); + e.stopPropagation(); + return true; + } + + /** + * Toggles whether a Face Document displays its associated docs. This saves and restores the last height of the Doc since + * toggling the associated Documentss overwrites the Doc height. + */ + onDisplayClick() { + this.Document._face_showImages && (this._lastHeight = NumCast(this.Document.height)); + this.Document._face_showImages = !this.Document._face_showImages; + setTimeout(action(() => (!this.Document.layout_autoHeight || !this.Document._face_showImages) && (this.Document.height = this.Document._face_showImages ? this._lastHeight : 60))); + } + + /** + * Removes a unique face Doc from the colelction of unique faces. + */ + deleteUniqueFace = undoable(() => { + FaceRecognitionHandler.DeleteUniqueFace(this.Document); + }, 'delete face'); + + /** + * Removes a face image Doc from a unique face's list of images. + * @param imgDoc - image Doc to remove + */ + removeFaceImageFromUniqueFace = undoable((imgDoc: Doc) => { + FaceRecognitionHandler.UniqueFaceRemoveFaceImage(imgDoc, this.Document); + }, 'remove doc from face'); + + /** + * This stops scroll wheel events when they are used to scroll the face collection. + */ + onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); + + render() { + return ( + <div className="face-document-item" ref={ele => this.createDropTarget(ele!)}> + <div className="face-collection-buttons"> + <IconButton tooltip="Delete Face From Collection" onPointerDown={this.deleteUniqueFace} icon={'x'} style={{ width: '4px' }} size={Size.XSMALL} /> + </div> + <div className="face-document-top" ref={action((r: HTMLDivElement | null) => (this._headerRef = r))}> + <h1 style={{ color: lightOrDark(StrCast(this.Document.backgroundColor)) }}> + <input className="face-document-name" type="text" onChange={e => FaceRecognitionHandler.SetUniqueFaceLabel(this.Document, e.currentTarget.value)} value={FaceRecognitionHandler.UniqueFaceLabel(this.Document)} /> + </h1> + </div> + <div className="face-collection-toggle"> + <IconButton + tooltip="See image information" + onPointerDown={() => this.onDisplayClick()} + icon={<FontAwesomeIcon icon={this.Document._face_showImages ? 'caret-up' : 'caret-down'} />} + color={MarqueeOptionsMenu.Instance.userColor} + style={{ width: '19px' }} + /> + </div> + {this.props.Document._face_showImages ? ( + <div + className="face-document-image-container" + style={{ + pointerEvents: this._props.isContentActive() ? undefined : 'none', + }} + ref={action((ele: HTMLDivElement | null) => { + this._listRef?.removeEventListener('wheel', this.onPassiveWheel); + this._listRef = ele; + // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling + ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); + })}> + {FaceRecognitionHandler.UniqueFaceImages(this.Document).map((doc, i) => { + const [name, type] = ImageCast(doc[Doc.LayoutFieldKey(doc)]).url.href.split('.'); + return ( + <div + className="image-wrapper" + key={i} + onPointerDown={e => + setupMoveUpEvents( + this, + e, + () => { + DragManager.StartDocumentDrag([e.target as HTMLElement], new DragManager.DocumentDragData([doc], dropActionType.embed), e.clientX, e.clientY); + return true; + }, + emptyFunction, + emptyFunction + ) + }> + <img onClick={() => DocumentView.showDocument(doc, { willZoomCentered: true })} style={{ maxWidth: '60px', margin: '10px' }} src={`${name}_o.${type}`} /> + <div className="remove-item"> + <IconButton tooltip={'Remove Doc From Face Collection'} onPointerDown={() => this.removeFaceImageFromUniqueFace(doc)} icon={'x'} style={{ width: '4px' }} size={Size.XSMALL} /> + </div> + </div> + ); + })} + </div> + ) : null} + </div> + ); + } +} + +/** + * This renders the sidebar collection of the unique faces that have been recognized. + * + * Since the collection of recognized faces is stored on the active dashboard, this class + * does not itself store any Docs, but accesses the myUniqueFaces field of the current + * dashboard. (This should probably go away as Doc type in favor of it just being a + * stacking collection of uniqueFace docs) + */ +@observer +export class FaceCollectionBox extends ViewBoxBaseComponent<FieldViewProps>() { + public static LayoutString(fieldKey: string) { + return FieldView.LayoutString(FaceCollectionBox, fieldKey); + } + + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); + } + + moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => !!(this._props.removeDocument?.(doc) && addDocument?.(doc)); + addDocument = (doc: Doc | Doc[], annotationKey?: string) => { + const uniqueFaceDoc = doc instanceof Doc ? doc : doc[0]; + const added = uniqueFaceDoc.type === DocumentType.UFACE; + if (added) { + Doc.SetContainer(uniqueFaceDoc, Doc.MyFaceCollection); + Doc.ActiveDashboard && Doc.AddDocToList(Doc.ActiveDashboard[DocData], 'myUniqueFaces', uniqueFaceDoc); + } + return added; + }; + /** + * this changes style provider requests that target the dashboard to requests that target the face collection box which is what's actually being rendered. + * This is needed, for instance, to get the default background color from the face collection, not the dashboard. + */ + stackingStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string) => { + if (doc === Doc.ActiveDashboard) return this._props.styleProvider?.(this.Document, this._props, property); + return this._props.styleProvider?.(doc, this._props, property); + }; + + render() { + return !Doc.ActiveDashboard ? null : ( + <div className="faceCollectionBox"> + <div className="documentButtonMenu"> + <div className="documentExplanation" onClick={action(() => (Doc.UserDoc().recognizeFaceImages = !Doc.UserDoc().recognizeFaceImages))}>{`Face Recgognition is ${Doc.UserDoc().recognizeFaceImages ? 'on' : 'off'}`}</div> + </div> + <CollectionStackingView + {...this._props} // + styleProvider={this.stackingStyleProvider} + Document={Doc.ActiveDashboard} + fieldKey="myUniqueFaces" + moveDocument={this.moveDocument} + addDocument={this.addDocument} + isContentActive={returnTrue} + isAnyChildContentActive={returnTrue} + childHideDecorations={true} + /> + </div> + ); + } +} + +Docs.Prototypes.TemplateMap.set(DocumentType.FACECOLLECTION, { + layout: { view: FaceCollectionBox, dataField: 'data' }, + options: { acl: '', _width: 400, dropAction: dropActionType.embed }, +}); + +Docs.Prototypes.TemplateMap.set(DocumentType.UFACE, { + layout: { view: UniqueFaceBox, dataField: 'face_images' }, + options: { acl: '', _width: 400, _height: 400 }, +}); diff --git a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx index af01d6cbc..e419e522c 100644 --- a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx +++ b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx @@ -1,30 +1,30 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Colors, IconButton } from 'browndash-components'; +import similarity from 'compute-cosine-similarity'; +import { ring } from 'ldrs'; +import 'ldrs/ring'; import { action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import React from 'react'; +import { Utils, numberRange } from '../../../../Utils'; import { Doc, NumListCast, Opt } from '../../../../fields/Doc'; -import { Docs } from '../../../documents/Documents'; -import { DocumentType } from '../../../documents/DocumentTypes'; -import { ViewBoxBaseComponent } from '../../DocComponent'; -import { FieldView, FieldViewProps } from '../../nodes/FieldView'; -import { MarqueeOptionsMenu } from './MarqueeOptionsMenu'; -import './ImageLabelBox.scss'; -import { MainView } from '../../MainView'; -import 'ldrs/ring'; -import { ring } from 'ldrs'; -import { SnappingManager } from '../../../util/SnappingManager'; -import { ImageCast } from '../../../../fields/Types'; import { DocData } from '../../../../fields/DocSymbols'; -import { SettingsManager } from '../../../util/SettingsManager'; -import { CollectionCardView } from '../CollectionCardDeckView'; -import { gptGetEmbedding, gptImageLabel } from '../../../apis/gpt/GPT'; -import { numberRange, Utils } from '../../../../Utils'; import { List } from '../../../../fields/List'; +import { ImageCast } from '../../../../fields/Types'; +import { gptGetEmbedding, gptImageLabel } from '../../../apis/gpt/GPT'; +import { DocumentType } from '../../../documents/DocumentTypes'; +import { Docs } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; -import { OpenWhere } from '../../nodes/OpenWhere'; -import similarity from 'compute-cosine-similarity'; +import { SettingsManager } from '../../../util/SettingsManager'; +import { SnappingManager } from '../../../util/SnappingManager'; +import { ViewBoxBaseComponent } from '../../DocComponent'; +import { MainView } from '../../MainView'; import { DocumentView } from '../../nodes/DocumentView'; +import { FieldView, FieldViewProps } from '../../nodes/FieldView'; +import { OpenWhere } from '../../nodes/OpenWhere'; +import { CollectionCardView } from '../CollectionCardDeckView'; +import './ImageLabelBox.scss'; +import { MarqueeOptionsMenu } from './MarqueeOptionsMenu'; export class ImageInformationItem {} @@ -51,7 +51,7 @@ export class ImageLabelBoxData { label = label.toUpperCase().trim(); if (label.length > 0) { if (!this._labelGroups.includes(label)) { - this._labelGroups = [...this._labelGroups, label]; + this._labelGroups = [...this._labelGroups, label.startsWith('#') ? label : '#' + label]; } } }; @@ -139,9 +139,9 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() { toggleDisplayInformation = () => { this._displayImageInformation = !this._displayImageInformation; if (this._displayImageInformation) { - this._selectedImages.forEach(doc => (doc[DocData].showLabels = true)); + this._selectedImages.forEach(doc => (doc[DocData].showTags = true)); } else { - this._selectedImages.forEach(doc => (doc[DocData].showLabels = false)); + this._selectedImages.forEach(doc => (doc[DocData].showTags = false)); } }; @@ -163,7 +163,7 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() { // Converts the images into a Base64 format, afterwhich the information is sent to GPT to label them. const imageInfos = this._selectedImages.map(async doc => { - if (!doc[DocData].data_labels) { + if (!doc[DocData].tags_chat) { const [name, type] = ImageCast(doc[Doc.LayoutFieldKey(doc)]).url.href.split('.'); return CollectionCardView.imageUrlToBase64(`${name}_o.${type}`).then(hrefBase64 => !hrefBase64 ? undefined : @@ -174,13 +174,17 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() { (await Promise.all(imageInfos)).forEach(imageInfo => { if (imageInfo) { - imageInfo.doc[DocData].data_labels = new List<string>(); + imageInfo.doc[DocData].tags_chat = (imageInfo.doc[DocData].tags_chat as List<string>) ?? new List<string>(); const labels = imageInfo.labels.split('\n'); labels.forEach(label => { - label = label.replace(/^\d+\.\s*|-|\*/, '').trim(); - imageInfo.doc[DocData][`${label}`] = true; - (imageInfo.doc[DocData].data_labels as List<string>).push(label); + label = + '#' + + label + .replace(/^\d+\.\s*|-|f\*/, '') + .replace(/^#/, '') + .trim(); + (imageInfo.doc[DocData].tags_chat as List<string>).push(label); }); } }); @@ -195,10 +199,10 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() { this.startLoading(); for (const doc of this._selectedImages) { - for (let index = 0; index < (doc[DocData].data_labels as List<string>).length; index++) { - const label = (doc[DocData].data_labels as List<string>)[index]; + for (let index = 0; index < (doc[DocData].tags_chat as List<string>).length; index++) { + const label = (doc[DocData].tags_chat as List<string>)[index]; const embedding = await gptGetEmbedding(label); - doc[`data_labels_embedding_${index + 1}`] = new List<number>(embedding); + doc[DocData][`tags_embedding_${index + 1}`] = new List<number>(embedding); } } @@ -209,7 +213,7 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() { // For each image, loop through the labels, and calculate similarity. Associate it with the // most similar one. this._selectedImages.forEach(doc => { - const embedLists = numberRange((doc[DocData].data_labels as List<string>).length).map(n => Array.from(NumListCast(doc[`data_labels_embedding_${n + 1}`]))); + const embedLists = numberRange((doc[DocData].tags_chat as List<string>).length).map(n => Array.from(NumListCast(doc[DocData][`tags_embedding_${n + 1}`]))); const bestEmbedScore = (embedding: Opt<number[]>) => Math.max(...embedLists.map((l, index) => (embedding && similarity(Array.from(embedding), l)!) || 0)); const {label: mostSimilarLabelCollect} = this._labelGroups.map(label => ({ label, similarityScore: bestEmbedScore(labelToEmbedding.get(label)) })) @@ -316,7 +320,7 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() { await DocumentView.showDocument(doc, { willZoomCentered: true }); }}></img> <div className="image-information-labels" onClick={() => this._props.addDocTab(doc, OpenWhere.addRightKeyvalue)}> - {(doc[DocData].data_labels as List<string>).map(label => { + {(doc[DocData].tags_chat as List<string>).map(label => { return ( <div key={Utils.GenerateGuid()} className="image-label" style={{ backgroundColor: SettingsManager.userVariantColor, borderColor: SettingsManager.userColor }}> {label} diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx index b94a22d04..44c916ab9 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx @@ -18,10 +18,10 @@ export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> { public showMarquee: () => void = unimplementedFunction; public hideMarquee: () => void = unimplementedFunction; public pinWithView: (e: KeyboardEvent | React.PointerEvent | undefined) => void = unimplementedFunction; - public classifyImages: (e: React.MouseEvent | undefined) => void = unimplementedFunction; + public classifyImages: () => void = unimplementedFunction; public groupImages: () => void = unimplementedFunction; public isShown = () => this._opacity > 0; - constructor(props: any) { + constructor(props: AntimodeMenuProps) { super(props); makeObservable(this); MarqueeOptionsMenu.Instance = this; diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index d7a41df64..6cc75aa4b 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -1,28 +1,24 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -import similarity from 'compute-cosine-similarity'; import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { ClientUtils, lightOrDark, returnFalse } from '../../../../ClientUtils'; -import { intersectRect, numberRange } from '../../../../Utils'; -import { Doc, DocListCast, NumListCast, Opt } from '../../../../fields/Doc'; +import { intersectRect } from '../../../../Utils'; +import { Doc, DocListCast, Opt } from '../../../../fields/Doc'; import { AclAdmin, AclAugment, AclEdit, DocData } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; -import { InkData, InkField, InkTool } from '../../../../fields/InkField'; +import { InkTool } from '../../../../fields/InkField'; import { List } from '../../../../fields/List'; -import { RichTextField } from '../../../../fields/RichTextField'; -import { Cast, FieldValue, ImageCast, NumCast, StrCast } from '../../../../fields/Types'; +import { Cast, NumCast, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; import { GetEffectiveAcl } from '../../../../fields/util'; -import { gptGetEmbedding, gptImageLabel } from '../../../apis/gpt/GPT'; -import { CognitiveServices } from '../../../cognitive_services/CognitiveServices'; import { DocUtils } from '../../../documents/DocUtils'; -import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes'; +import { DocumentType } from '../../../documents/DocumentTypes'; import { Docs, DocumentOptions } from '../../../documents/Documents'; import { SnappingManager, freeformScrollMode } from '../../../util/SnappingManager'; import { Transform } from '../../../util/Transform'; import { UndoManager, undoBatch } from '../../../util/UndoManager'; import { ContextMenu } from '../../ContextMenu'; +import { MainView } from '../../MainView'; import { ObservableReactComponent } from '../../ObservableReactComponent'; import { MarqueeViewBounds } from '../../PinFuncs'; import { PreviewCursor } from '../../PreviewCursor'; @@ -30,15 +26,10 @@ import { DocumentView } from '../../nodes/DocumentView'; import { OpenWhere } from '../../nodes/OpenWhere'; import { pasteImageBitmap } from '../../nodes/WebBoxRenderer'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; -import { CollectionCardView } from '../CollectionCardDeckView'; import { SubCollectionViewProps } from '../CollectionSubView'; -import { CollectionFreeFormView } from './CollectionFreeFormView'; -import { ImageLabelHandler } from './ImageLabelHandler'; +import { ImageLabelBoxData } from './ImageLabelBox'; import { MarqueeOptionsMenu } from './MarqueeOptionsMenu'; import './MarqueeView.scss'; -import { MainView } from '../../MainView'; -import { ImageLabelBox, ImageLabelBoxData } from './ImageLabelBox'; -import { SearchBox } from '../../search/SearchBox'; interface MarqueeViewProps { getContainerTransform: () => Transform; @@ -68,7 +59,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps static Instance: MarqueeView; - constructor(props: any) { + constructor(props: SubCollectionViewProps & MarqueeViewProps) { super(props); makeObservable(this); MarqueeView.Instance = this; @@ -165,6 +156,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps } else if (e.key === 'b' && e.ctrlKey) { document.body.focus(); // so that we can access the clipboard without an error setTimeout(() => + // eslint-disable-next-line @typescript-eslint/no-explicit-any pasteImageBitmap((data: any, error: any) => { error && console.log(error); data && @@ -441,7 +433,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps * Classifies images and assigns the labels as document fields. */ @undoBatch - classifyImages = action(async (e: React.MouseEvent | undefined) => { + classifyImages = action(async () => { const groupButton = DocListCast(Doc.MyLeftSidebarMenu.data).find(d => d.target === Doc.MyImageGrouper); if (groupButton) { this._selectedDocs = this.marqueeSelect(false, DocumentType.IMG); @@ -496,71 +488,6 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps }); @undoBatch - syntaxHighlight = action((e: KeyboardEvent | React.PointerEvent | undefined) => { - const selected = this.marqueeSelect(false); - if (e instanceof KeyboardEvent ? e.key === 'i' : true) { - const inks = selected.filter(s => s.type === DocumentType.INK); - const setDocs = selected.filter(s => s.type === DocumentType.RTF && s.color); - const sets = setDocs.map(sd => Cast(sd.data, RichTextField)?.Text as string); - const colors = setDocs.map(sd => FieldValue(sd.color) as string); - const wordToColor = new Map<string, string>(); - sets.forEach((st: string, i: number) => st.split(',').forEach(word => wordToColor.set(word, colors[i]))); - const strokes: InkData[] = []; - inks.filter(i => Cast(i.data, InkField)).forEach(i => { - const d = Cast(i.data, InkField, null); - const left = Math.min(...(d?.inkData.map(pd => pd.X) ?? [0])); - const top = Math.min(...(d?.inkData.map(pd => pd.Y) ?? [0])); - strokes.push(d.inkData.map(pd => ({ X: pd.X + NumCast(i.x) - left, Y: pd.Y + NumCast(i.y) - top }))); - }); - CognitiveServices.Inking.Appliers.InterpretStrokes(strokes).then(results => { - // const wordResults = results.filter((r: any) => r.category === "inkWord"); - // for (const word of wordResults) { - // const indices: number[] = word.strokeIds; - // indices.forEach(i => { - // if (wordToColor.has(word.recognizedText.toLowerCase())) { - // inks[i].color = wordToColor.get(word.recognizedText.toLowerCase()); - // } - // else { - // for (const alt of word.alternates) { - // if (wordToColor.has(alt.recognizedString.toLowerCase())) { - // inks[i].color = wordToColor.get(alt.recognizedString.toLowerCase()); - // break; - // } - // } - // } - // }) - // } - // const wordResults = results.filter((r: any) => r.category === "inkWord"); - // for (const word of wordResults) { - // const indices: number[] = word.strokeIds; - // indices.forEach(i => { - // const otherInks: Doc[] = []; - // indices.forEach(i2 => i2 !== i && otherInks.push(inks[i2])); - // inks[i].relatedInks = new List<Doc>(otherInks); - // const uniqueColors: string[] = []; - // Array.from(wordToColor.values()).forEach(c => uniqueColors.indexOf(c) === -1 && uniqueColors.push(c)); - // inks[i].alternativeColors = new List<string>(uniqueColors); - // if (wordToColor.has(word.recognizedText.toLowerCase())) { - // inks[i].color = wordToColor.get(word.recognizedText.toLowerCase()); - // } - // else if (word.alternates) { - // for (const alt of word.alternates) { - // if (wordToColor.has(alt.recognizedString.toLowerCase())) { - // inks[i].color = wordToColor.get(alt.recognizedString.toLowerCase()); - // break; - // } - // } - // } - // }); - // } - const lines = results.filter((r: any) => r.category === 'line'); - const text = lines.map((l: any) => l.recognizedText).join('\r\n'); - this._props.addDocument?.(Docs.Create.TextDocument(text, { _width: this.Bounds.width, _height: this.Bounds.height, x: this.Bounds.left + this.Bounds.width, y: this.Bounds.top, title: text })); - }); - } - }); - - @undoBatch summary = action(() => { const selected = this.marqueeSelect(false).map(d => { this._props.removeDocument?.(d); @@ -589,13 +516,14 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps @action marqueeCommand = (e: KeyboardEvent) => { - if (this._commandExecuted || (e as any).propagationIsStopped) { + const ee = e as unknown as KeyboardEvent & { propagationIsStopped?: boolean }; + if (this._commandExecuted || ee.propagationIsStopped) { return; } if (e.key === 'Backspace' || e.key === 'Delete' || e.key === 'd' || e.key === 'h') { this._commandExecuted = true; e.stopPropagation(); - (e as any).propagationIsStopped = true; + ee.propagationIsStopped = true; this.delete(e, e.key === 'h'); e.stopPropagation(); } @@ -603,7 +531,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps this._commandExecuted = true; e.stopPropagation(); e.preventDefault(); - (e as any).propagationIsStopped = true; + ee.propagationIsStopped = true; if (e.key === 'g') this.collection(e, true); if (e.key === 'c' || e.key === 't') this.collection(e); if (e.key === 's' || e.key === 'S') this.summary(); @@ -704,8 +632,8 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps transform: `translate(${p[0]}px, ${p[1]}px)`, width: Math.abs(v[0]), height: Math.abs(v[1]), - color: lightOrDark(this._props.Document?.backgroundColor ?? 'white'), - borderColor: lightOrDark(this._props.Document?.backgroundColor ?? 'white'), + color: lightOrDark((this._props.Document?.backgroundColor as string) ?? 'white'), + borderColor: lightOrDark((this._props.Document?.backgroundColor as string) ?? 'white'), zIndex: 2000, }}> {' '} @@ -714,7 +642,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps <polyline // points={this._lassoPts.reduce((s, pt) => s + pt[0] + ',' + pt[1] + ' ', '')} fill="none" - stroke={lightOrDark(this._props.Document?.backgroundColor ?? 'white')} + stroke={lightOrDark((this._props.Document?.backgroundColor as string) ?? 'white')} strokeWidth="1" strokeDasharray="3" /> @@ -734,8 +662,9 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps */ @action onDragMovePause = (e: CustomEvent<React.DragEvent>) => { - if ((e as any).handlePan || this._props.isAnnotationOverlay) return; - (e as any).handlePan = true; + const ee = e as CustomEvent<React.DragEvent> & { handlePan?: boolean }; + if (ee.handlePan || this._props.isAnnotationOverlay) return; + ee.handlePan = true; const bounds = this.MarqueeRef?.getBoundingClientRect(); if (!this._props.Document._freeform_noAutoPan && !this._props.renderDepth && bounds) { @@ -753,10 +682,10 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps }; render() { return ( - // eslint-disable-next-line jsx-a11y/click-events-have-key-events <div className="marqueeView" ref={r => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any r?.addEventListener('dashDragMovePause', this.onDragMovePause as any); this.MarqueeRef = r; }} diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 2d9191dd7..61bd0241c 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -13,7 +13,7 @@ import { undoBatch } from '../../../util/UndoManager'; import { ContextMenu } from '../../ContextMenu'; import { ContextMenuProps } from '../../ContextMenuItem'; import { DocumentView } from '../../nodes/DocumentView'; -import { CollectionSubView } from '../CollectionSubView'; +import { CollectionSubView, SubCollectionViewProps } from '../CollectionSubView'; import './CollectionGridView.scss'; import Grid, { Layout } from './Grid'; @@ -26,7 +26,7 @@ export class CollectionGridView extends CollectionSubView() { @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 - constructor(props: any) { + constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); } @@ -200,7 +200,7 @@ export class CollectionGridView extends CollectionSubView() { whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} onClickScript={this.onChildClickHandler} renderDepth={this._props.renderDepth + 1} - dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as any} // 'y', 'x', 'xy' + dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as 'x' | 'y' | 'xy'} /> ); } diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx index eac0dc0e1..ceae43c04 100644 --- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx +++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx @@ -1,8 +1,7 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { Toggle, ToggleType, Type } from 'browndash-components'; +import { Property } from 'csstype'; import { IReactionDisposer, action, makeObservable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -22,7 +21,7 @@ import { UndoStack } from '../../UndoStack'; import { DocumentLinksButton } from '../../nodes/DocumentLinksButton'; import { DocumentView } from '../../nodes/DocumentView'; import { LinkDescriptionPopup } from '../../nodes/LinkDescriptionPopup'; -import { CollectionSubView } from '../CollectionSubView'; +import { CollectionSubView, SubCollectionViewProps } from '../CollectionSubView'; import './CollectionLinearView.scss'; /** @@ -39,7 +38,7 @@ export class CollectionLinearView extends CollectionSubView() { private _widthDisposer?: IReactionDisposer; private _selectedDisposer?: IReactionDisposer; - constructor(props: any) { + constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); } @@ -239,7 +238,7 @@ export class CollectionLinearView extends CollectionSubView() { className="collectionLinearView-content" style={{ height: this.dimension(), - flexDirection: flexDir as any, + flexDirection: flexDir as Property.FlexDirection, gap: flexGap, }}> {this.childLayoutPairs.map(pair => this.getDisplayDoc(pair.layout))} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss index f983fd815..06d78c39e 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss @@ -1,43 +1,50 @@ -.collectionMulticolumnView_contents { - display: flex; - //overflow: hidden; // bcz: turned of to allow highlighting to appear when there is no border (e.g, for a component of the slide template) - width: 100%; +.collectionMulticolumnView_drop { height: 100%; + top: 0; + left: 0; + position: absolute; - .document-wrapper { + .collectionMulticolumnView_contents { display: flex; - flex-direction: column; + //overflow: hidden; // bcz: turned of to allow highlighting to appear when there is no border (e.g, for a component of the slide template) width: 100%; - align-items: center; - position: relative; - > .iconButton-container { - top: 0; - left: 0; - position: absolute; - } - - .contentFittingDocumentView { - margin: auto; - } + height: 100%; - .label-wrapper { + .document-wrapper { display: flex; - flex-direction: row; - justify-content: center; - height: 20px; + flex-direction: column; + width: 100%; + align-items: center; + position: relative; + > .iconButton-container { + top: 0; + left: 0; + position: absolute; + } + + .contentFittingDocumentView { + margin: auto; + } + + .label-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + height: 20px; + } } - } - .multiColumnResizer { - cursor: ew-resize; - transition: 0.5s opacity ease; - display: flex; - flex-direction: column; + .multiColumnResizer { + cursor: ew-resize; + transition: 0.5s opacity ease; + display: flex; + flex-direction: column; - .multiColumnResizer-hdl { - width: 100%; - height: 100%; - transition: 0.5s background-color ease; + .multiColumnResizer-hdl { + width: 100%; + height: 100%; + transition: 0.5s background-color ease; + } } } } diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index b8509a005..d67e10c0b 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { Button, IconButton } from 'browndash-components'; @@ -12,13 +10,14 @@ import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types import { DragManager } from '../../../util/DragManager'; import { SettingsManager } from '../../../util/SettingsManager'; import { Transform } from '../../../util/Transform'; -import { undoBatch, undoable } from '../../../util/UndoManager'; +import { undoable } from '../../../util/UndoManager'; import { DocumentView } from '../../nodes/DocumentView'; -import { CollectionSubView } from '../CollectionSubView'; +import { CollectionSubView, SubCollectionViewProps } from '../CollectionSubView'; import './CollectionMulticolumnView.scss'; import ResizeBar from './MulticolumnResizer'; import WidthLabel from './MulticolumnWidthLabel'; import { dropActionType } from '../../../util/DropActionTypes'; +import { SnappingManager } from '../../../util/SnappingManager'; interface WidthSpecifier { magnitude: number; @@ -42,7 +41,7 @@ const resizerWidth = 8; export class CollectionMulticolumnView extends CollectionSubView() { @observable _startIndex = 0; - constructor(props: any) { + constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); } @@ -198,30 +197,28 @@ export class CollectionMulticolumnView extends CollectionSubView() { * documents before the target. */ private lookupIndividualTransform = (layout: Doc) => { - const { columnUnitLength } = this; - if (columnUnitLength === undefined) { + if (this.columnUnitLength === undefined) { return Transform.Identity(); // we're still waiting on promises to resolve } let offset = 0; // eslint-disable-next-line no-restricted-syntax for (const { layout: candidate } of this.childLayoutPairs) { if (candidate === layout) { - return this.ScreenToLocalBoxXf().translate(0, -offset / (this._props.NativeDimScaling?.() || 1)); + return this.ScreenToLocalBoxXf().translate(-offset / (this._props.NativeDimScaling?.() || 1), 0); } offset += this.lookupPixels(candidate) + resizerWidth; } return Transform.Identity(); }; - @undoBatch onInternalDrop = (e: Event, de: DragManager.DropEvent) => { let dropInd = -1; - if (de.complete.docDragData && this._mainCont) { + if (de.complete.docDragData && this._contRef.current) { let curInd = -1; de.complete.docDragData?.droppedDocuments.forEach(d => { curInd = this.childDocs.indexOf(d); }); - Array.from(this._mainCont.children).forEach((child, index) => { + Array.from(this._contRef.current.children).forEach((child, index) => { const brect = child.getBoundingClientRect(); if (brect.x < de.x && brect.x + brect.width > de.x) { if (curInd !== -1 && curInd === Math.floor(index / 2)) { @@ -305,7 +302,7 @@ export class CollectionMulticolumnView extends CollectionSubView() { whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} addDocTab={this._props.addDocTab} pinToPres={this._props.pinToPres} - dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as any} // 'y', 'x', 'xy' + dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as 'x' | 'y' | 'xy'} /> ); }; @@ -319,11 +316,11 @@ export class CollectionMulticolumnView extends CollectionSubView() { this.childLayouts.forEach((layout, i) => { collector.push( // eslint-disable-next-line react/no-array-index-key - <Tooltip title={'Tab: ' + StrCast(layout.title)} key={'wrapper' + i}> + <Tooltip title={'Doc: ' + StrCast(layout.title)} key={'wrapper' + i}> <div className="document-wrapper" style={{ flexDirection: 'column', width: this.lookupPixels(layout) }}> {this.getDisplayDoc(layout)} {this.layoutDoc._chromeHidden ? null : ( - <Button tooltip="Remove document from header bar" icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={undoable(() => this._props.removeDocument?.(layout), 'close doc')} color={SettingsManager.userColor} /> + <Button tooltip="Remove document" icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={undoable(() => this._props.removeDocument?.(layout), 'close doc')} color={SettingsManager.userColor} /> )} <WidthLabel layout={layout} collectionDoc={this.Document} /> </div> @@ -345,49 +342,53 @@ export class CollectionMulticolumnView extends CollectionSubView() { return collector; } + _contRef = React.createRef<HTMLDivElement>(); render() { return ( - <div - className="collectionMulticolumnView_contents" - ref={this.createDashEventsTarget} - style={{ - width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`, - height: `calc(100% - ${2 * NumCast(this.Document._yMargin)}px)`, - marginLeft: NumCast(this.Document._xMargin), - marginRight: NumCast(this.Document._xMargin), - marginTop: NumCast(this.Document._yMargin), - marginBottom: NumCast(this.Document._yMargin), - }}> - {this.contents} - {!this._startIndex ? null : ( - <Tooltip title="scroll back"> - <div - style={{ position: 'absolute', bottom: 0, left: 0, background: SettingsManager.userVariantColor }} - onClick={action(() => { - this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown); - })}> - <Button - tooltip="Scroll back" - icon={<FontAwesomeIcon icon="chevron-left" size="lg" />} + <div className="collectionMulticolumnView_drop" ref={this.createDashEventsTarget}> + <div + className="collectionMulticolumnView_contents" + ref={this._contRef} + style={{ + pointerEvents: this._props.isContentActive() && SnappingManager.IsDragging ? 'all' : this._props.pointerEvents?.(), + width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`, + height: `calc(100% - ${2 * NumCast(this.Document._yMargin)}px)`, + marginLeft: NumCast(this.Document._xMargin), + marginRight: NumCast(this.Document._xMargin), + marginTop: NumCast(this.Document._yMargin), + marginBottom: NumCast(this.Document._yMargin), + }}> + {this.contents} + {!this._startIndex ? null : ( + <Tooltip title="scroll back"> + <div + style={{ position: 'absolute', bottom: 0, left: 0, background: SettingsManager.userVariantColor }} + onClick={action(() => { + this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown); + })}> + <Button + tooltip="Scroll back" + icon={<FontAwesomeIcon icon="chevron-left" size="lg" />} + onClick={action(() => { + this._startIndex = Math.max(0, this._startIndex - this.maxShown); + })} + color={SettingsManager.userColor} + /> + </div> + </Tooltip> + )} + {this._startIndex > this.childLayoutPairs.length - 1 || !this.maxShown ? null : ( + <Tooltip title="scroll forward"> + <div + style={{ position: 'absolute', bottom: 0, right: 0, background: SettingsManager.userVariantColor }} onClick={action(() => { - this._startIndex = Math.max(0, this._startIndex - this.maxShown); - })} - color={SettingsManager.userColor} - /> - </div> - </Tooltip> - )} - {this._startIndex > this.childLayoutPairs.length - 1 || !this.maxShown ? null : ( - <Tooltip title="scroll forward"> - <div - style={{ position: 'absolute', bottom: 0, right: 0, background: SettingsManager.userVariantColor }} - onClick={action(() => { - this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown); - })}> - <IconButton icon={<FaChevronRight />} color={SettingsManager.userColor} /> - </div> - </Tooltip> - )} + this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown); + })}> + <IconButton icon={<FaChevronRight />} color={SettingsManager.userColor} /> + </div> + </Tooltip> + )} + </div> </div> ); } diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss index f44eacb2a..0d49fabaa 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss @@ -1,34 +1,41 @@ -.collectionMultirowView_contents { - display: flex; - //overflow: hidden; // bcz: turned of to allow highlighting to appear when there is no border (e.g, for a component of the slide template) - width: 100%; +.collectionMultirowView_drop { height: 100%; - flex-direction: column; + top: 0; + left: 0; + position: absolute; - .document-wrapper { + .collectionMultirowView_contents { display: flex; - flex-direction: row; + //overflow: hidden; // bcz: turned of to allow highlighting to appear when there is no border (e.g, for a component of the slide template) + width: 100%; height: 100%; - align-items: center; + flex-direction: column; - .label-wrapper { + .document-wrapper { display: flex; flex-direction: row; - justify-content: center; - height: 20px; + height: 100%; + align-items: center; + + .label-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + height: 20px; + } } - } - .multiRowResizer { - cursor: ns-resize; - transition: 0.5s opacity ease; - display: flex; - flex-direction: row; + .multiRowResizer { + cursor: ns-resize; + transition: 0.5s opacity ease; + display: flex; + flex-direction: row; - .multiRowResizer-hdl { - width: 100%; - height: 100%; - transition: 0.5s background-color ease; + .multiRowResizer-hdl { + width: 100%; + height: 100%; + transition: 0.5s background-color ease; + } } } } diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index 3fe3d5343..bda8e91ac 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -6,9 +6,8 @@ import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types import { DragManager } from '../../../util/DragManager'; import { dropActionType } from '../../../util/DropActionTypes'; import { Transform } from '../../../util/Transform'; -import { undoBatch } from '../../../util/UndoManager'; import { DocumentView } from '../../nodes/DocumentView'; -import { CollectionSubView } from '../CollectionSubView'; +import { CollectionSubView, SubCollectionViewProps } from '../CollectionSubView'; import './CollectionMultirowView.scss'; import HeightLabel from './MultirowHeightLabel'; import ResizeBar from './MultirowResizer'; @@ -33,7 +32,7 @@ const resizerHeight = 8; @observer export class CollectionMultirowView extends CollectionSubView() { - constructor(props: any) { + constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); } @@ -193,15 +192,14 @@ export class CollectionMultirowView extends CollectionSubView() { return Transform.Identity(); // type coersion, this case should never be hit }; - @undoBatch onInternalDrop = (e: Event, de: DragManager.DropEvent) => { let dropInd = -1; - if (de.complete.docDragData && this._mainCont) { + if (de.complete.docDragData && this._contRef.current) { let curInd = -1; de.complete.docDragData?.droppedDocuments.forEach(d => { curInd = this.childDocs.indexOf(d); }); - Array.from(this._mainCont.children).forEach((child, index) => { + Array.from(this._contRef.current.children).forEach((child, index) => { const brect = child.getBoundingClientRect(); if (brect.y < de.y && brect.y + brect.height > de.y) { if (curInd !== -1 && curInd === Math.floor(index / 2)) { @@ -284,7 +282,7 @@ export class CollectionMultirowView extends CollectionSubView() { whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} addDocTab={this._props.addDocTab} pinToPres={this._props.pinToPres} - dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as any} // 'y', 'x', 'xy' + dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as 'y' | 'x' | 'xy'} /> ); }; @@ -318,20 +316,23 @@ export class CollectionMultirowView extends CollectionSubView() { return collector; } + _contRef = React.createRef<HTMLDivElement>(); render() { return ( - <div - className="collectionMultirowView_contents" - style={{ - width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`, - height: `calc(100% - ${2 * NumCast(this.Document._yMargin)}px)`, - marginLeft: NumCast(this.Document._xMargin), - marginRight: NumCast(this.Document._xMargin), - marginTop: NumCast(this.Document._yMargin), - marginBottom: NumCast(this.Document._yMargin), - }} - ref={this.createDashEventsTarget}> - {this.contents} + <div className="collectionMultirowView_drop" ref={this.createDashEventsTarget}> + <div + ref={this._contRef} + className="collectionMultirowView_contents" + style={{ + width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`, + height: `calc(100% - ${2 * NumCast(this.Document._yMargin)}px)`, + marginLeft: NumCast(this.Document._xMargin), + marginRight: NumCast(this.Document._xMargin), + marginTop: NumCast(this.Document._yMargin), + marginBottom: NumCast(this.Document._yMargin), + }}> + {this.contents} + </div> </div> ); } diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx index 931e2c5e0..10a6fa2e9 100644 --- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx +++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx @@ -68,7 +68,7 @@ export default class ResizeBar extends React.Component<ResizerProps> { style={{ pointerEvents: this.props.isContentActive?.() ? 'all' : 'none', width: this.props.width, - backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor), + backgroundColor: !this.props.isContentActive?.() ? '' : (this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor) as string), }}> <div className="multiColumnResizer-hdl" onPointerDown={e => this.registerResizing(e)} /> </div> diff --git a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx index cff0a8b4c..918365700 100644 --- a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx +++ b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx @@ -66,7 +66,7 @@ export default class ResizeBar extends React.Component<ResizerProps> { style={{ pointerEvents: this.props.isContentActive?.() ? 'all' : 'none', height: this.props.height, - backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor), + backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor) as string, }}> <div className="multiRowResizer-hdl" onPointerDown={e => this.registerResizing(e)} /> </div> diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 6bea53355..8b0639b3b 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -4,7 +4,7 @@ import { Popup, PopupTrigger, Type } from 'browndash-components'; import { ObservableMap, action, computed, makeObservable, observable, observe, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils'; +import { returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils'; import { emptyFunction } from '../../../../Utils'; import { Doc, DocListCast, Field, FieldType, NumListCast, Opt, StrListCast } from '../../../../fields/Doc'; import { DocData } from '../../../../fields/DocSymbols'; @@ -22,12 +22,12 @@ import { ContextMenu } from '../../ContextMenu'; import { EditableView } from '../../EditableView'; import { ObservableReactComponent } from '../../ObservableReactComponent'; import { StyleProp } from '../../StyleProp'; -import { DefaultStyleProvider } from '../../StyleProvider'; +import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider'; import { Colors } from '../../global/globalEnums'; import { DocumentView } from '../../nodes/DocumentView'; import { FieldViewProps } from '../../nodes/FieldView'; import { FocusViewOptions } from '../../nodes/FocusViewOptions'; -import { CollectionSubView } from '../CollectionSubView'; +import { CollectionSubView, SubCollectionViewProps } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; @@ -49,14 +49,14 @@ const defaultColumnKeys: string[] = ['title', 'type', 'author', 'author_date', ' @observer export class CollectionSchemaView extends CollectionSubView() { - private _keysDisposer: any; + private _keysDisposer?: () => void; private _previewRef: HTMLDivElement | null = null; private _makeNewColumn: boolean = false; private _documentOptions: DocumentOptions = new DocumentOptions(); private _tableContentRef: HTMLDivElement | null = null; private _menuTarget = React.createRef<HTMLDivElement>(); - constructor(props: any) { + constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); } @@ -76,7 +76,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _columnMenuIndex: number | undefined = undefined; @observable _newFieldWarning: string = ''; @observable _makeNewField: boolean = false; - @observable _newFieldDefault: any = 0; + @observable _newFieldDefault: boolean | number | string | undefined = 0; @observable _newFieldType: ColumnType = ColumnType.Number; @observable _menuValue: string = ''; @observable _filterColumnIndex: number | undefined = undefined; @@ -161,11 +161,11 @@ export class CollectionSchemaView extends CollectionSubView() { Object.entries(this._documentOptions).forEach((pair: [string, FInfo]) => this.fieldInfos.set(pair[0], pair[1])); this._keysDisposer = observe( this.dataDoc[this.fieldKey ?? 'data'] as List<Doc>, - (change: any) => { + change => { switch (change.type) { case 'splice': // prettier-ignore - (change as any).added.forEach((doc: Doc) => // for each document added + change.added.filter(doc => doc instanceof Doc).map(doc => doc as Doc).forEach((doc: Doc) => // for each document added Doc.GetAllPrototypes(doc.value as Doc).forEach(proto => // for all of its prototypes (and itself) Object.keys(proto).forEach(action(key => // check if any of its keys are new, and add them !this.fieldInfos.get(key) && this.fieldInfos.set(key, new FInfo("-no description-", key === 'author')))))); @@ -270,7 +270,7 @@ export class CollectionSchemaView extends CollectionSubView() { addRow = (doc: Doc | Doc[]) => this.addDocument(doc); @undoBatch - changeColumnKey = (index: number, newKey: string, defaultVal?: any) => { + changeColumnKey = (index: number, newKey: string, defaultVal?: string | number | boolean) => { if (!this.documentKeys.includes(newKey)) { this.addNewKey(newKey, defaultVal); } @@ -281,7 +281,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; @undoBatch - addColumn = (key: string, defaultVal?: any) => { + addColumn = (key: string, defaultVal?: string | number | boolean) => { if (!this.documentKeys.includes(key)) { this.addNewKey(key, defaultVal); } @@ -298,7 +298,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - addNewKey = (key: string, defaultVal: any) => + addNewKey = (key: string, defaultVal?: string | number | boolean) => this.childDocs.forEach(doc => { doc[DocData][key] = defaultVal; }); @@ -317,7 +317,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - startResize = (e: any, index: number) => { + startResize = (e: React.PointerEvent, index: number) => { this._displayColumnWidths = this.storedColumnWidths; setupMoveUpEvents(this, e, moveEv => this.resizeColumn(moveEv, index), this.finishResize, emptyFunction); }; @@ -604,7 +604,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; scrollToDoc = (doc: Doc, options: FocusViewOptions) => { - const found = this._tableContentRef && Array.from(this._tableContentRef.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]); + const found = this._tableContentRef && Array.from(this._tableContentRef.getElementsByClassName('documentView-node')).find(node => node.id === doc[Id]); if (found) { const rect = found.getBoundingClientRect(); const localRect = this.ScreenToLocalBoxXf().transformBounds(rect.left, rect.top, rect.width, rect.height); @@ -625,9 +625,9 @@ export class CollectionSchemaView extends CollectionSubView() { type="number" name="" id="" - value={this._newFieldDefault ?? 0} + value={Number(this._newFieldDefault ?? 0)} onPointerDown={e => e.stopPropagation()} - onChange={action((e: any) => { + onChange={action(e => { this._newFieldDefault = e.target.value; })} /> @@ -637,11 +637,9 @@ export class CollectionSchemaView extends CollectionSubView() { <> <input type="checkbox" - name="" - id="" - value={this._newFieldDefault} + value={this._newFieldDefault?.toString()} onPointerDown={e => e.stopPropagation()} - onChange={action((e: any) => { + onChange={action(e => { this._newFieldDefault = e.target.checked; })} /> @@ -654,9 +652,9 @@ export class CollectionSchemaView extends CollectionSubView() { type="text" name="" id="" - value={this._newFieldDefault ?? ''} + value={this._newFieldDefault?.toString() ?? ''} onPointerDown={e => e.stopPropagation()} - onChange={action((e: any) => { + onChange={action(e => { this._newFieldDefault = e.target.value; })} /> @@ -683,7 +681,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - setKey = (key: string, defaultVal?: any) => { + setKey = (key: string, defaultVal?: string | number | boolean) => { if (this._makeNewColumn) { this.addColumn(key, defaultVal); } else { @@ -856,16 +854,16 @@ export class CollectionSchemaView extends CollectionSubView() { onKeysPassiveWheel = (e: WheelEvent) => { // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this) - if (!this._oldKeysWheel.scrollTop && e.deltaY <= 0) e.preventDefault(); + if (!this._oldKeysWheel?.scrollTop && e.deltaY <= 0) e.preventDefault(); e.stopPropagation(); }; - _oldKeysWheel: any; + _oldKeysWheel: HTMLDivElement | null = null; @computed get keysDropdown() { return ( <div className="schema-key-search"> <div className="schema-column-menu-button" - onPointerDown={action((e: any) => { + onPointerDown={action(e => { e.stopPropagation(); this._makeNewField = true; })}> @@ -880,6 +878,7 @@ export class CollectionSchemaView extends CollectionSubView() { }}> {this._menuKeys.map(key => ( <div + key={key} className="schema-search-result" onPointerDown={e => { e.stopPropagation(); @@ -962,7 +961,7 @@ export class CollectionSchemaView extends CollectionSubView() { {this.renderFilterOptions} <div className="schema-column-menu-button" - onPointerDown={action((e: any) => { + onPointerDown={action(e => { e.stopPropagation(); this.closeFilterMenu(); })}> @@ -1013,7 +1012,7 @@ export class CollectionSchemaView extends CollectionSubView() { screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0); previewWidthFunc = () => this.previewWidth; onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); - _oldWheel: any; + _oldWheel: HTMLDivElement | null = null; render() { return ( <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} onPointerMove={e => this.onPointerMove(e)}> @@ -1112,7 +1111,7 @@ export class CollectionSchemaView extends CollectionSubView() { childFiltersByRanges={this.childDocRangeFilters} searchFilterDocs={this.searchFilterDocs} styleProvider={DefaultStyleProvider} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} moveDocument={this._props.moveDocument} addDocument={this.addRow} removeDocument={this._props.removeDocument} @@ -1137,7 +1136,7 @@ interface CollectionSchemaViewDocProps { @observer class CollectionSchemaViewDoc extends ObservableReactComponent<CollectionSchemaViewDocProps> { - constructor(props: any) { + constructor(props: CollectionSchemaViewDocProps) { super(props); makeObservable(this); } diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 6b5a34ec0..e0ed8d01e 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -18,8 +18,8 @@ export interface SchemaColumnHeaderProps { setSort: (field: string | undefined, desc?: boolean) => void; removeColumn: (index: number) => void; rowHeight: () => number; - resizeColumn: (e: any, index: number) => void; - dragColumn: (e: any, index: number) => boolean; + resizeColumn: (e: React.PointerEvent, index: number) => void; + dragColumn: (e: PointerEvent, index: number) => boolean; openContextMenu: (x: number, y: number, index: number) => void; setColRef: (index: number, ref: HTMLDivElement) => void; } diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 760089ffb..a7e0e916b 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -58,8 +58,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { selectCell = (doc: Doc, col: number, shift: boolean, ctrl: boolean) => this.schemaView?.selectCell(doc, col, shift, ctrl); deselectCell = () => this.schemaView?.deselectAllCells(); selectedCells = () => this.schemaView?._selectedDocs; - setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false; - setSelectedColumnValues = (field: any, value: any) => this.schemaView?.setSelectedColumnValues(field, value) ?? false; + setColumnValues = (field: string, value: string) => this.schemaView?.setColumnValues(field, value) ?? false; + setSelectedColumnValues = (field: string, value: string) => this.schemaView?.setSelectedColumnValues(field, value) ?? false; columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth); render() { return ( diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 5874364e0..22506cac1 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jsx-a11y/alt-text */ /* eslint-disable react/jsx-props-no-spreading */ /* eslint-disable no-use-before-define */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -10,10 +9,10 @@ import * as React from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import Select from 'react-select'; -import { ClientUtils, StopEvent, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../ClientUtils'; +import { ClientUtils, StopEvent, returnEmptyFilter, returnFalse, returnZero } from '../../../../ClientUtils'; import { emptyFunction } from '../../../../Utils'; import { DateField } from '../../../../fields/DateField'; -import { Doc, DocListCast, Field } from '../../../../fields/Doc'; +import { Doc, DocListCast, Field, returnEmptyDoclist } from '../../../../fields/Doc'; import { RichTextField } from '../../../../fields/RichTextField'; import { ColumnType } from '../../../../fields/SchemaHeaderField'; import { BoolCast, Cast, DateCast, DocCast, FieldValue, StrCast, toList } from '../../../../fields/Types'; @@ -22,7 +21,7 @@ import { FInfo, FInfoFieldType } from '../../../documents/Documents'; import { dropActionType } from '../../../util/DropActionTypes'; import { SnappingManager } from '../../../util/SnappingManager'; import { Transform } from '../../../util/Transform'; -import { undoBatch, undoable } from '../../../util/UndoManager'; +import { undoable } from '../../../util/UndoManager'; import { EditableView } from '../../EditableView'; import { ObservableReactComponent } from '../../ObservableReactComponent'; import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider'; @@ -138,7 +137,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)} oneLine={this._props.oneLine} allowCRs={this._props.allowCRs} - contents={undefined} + contents={''} fieldContents={fieldProps} editing={selectedCell(this._props) ? undefined : false} GetValue={() => Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey)} @@ -209,7 +208,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro // mj: most of this is adapted from old schema code so I'm not sure what it does tbh @observer export class SchemaImageCell extends ObservableReactComponent<SchemaTableCellProps> { - constructor(props: any) { + constructor(props: SchemaTableCellProps) { super(props); makeObservable(this); } @@ -276,7 +275,7 @@ export class SchemaImageCell extends ObservableReactComponent<SchemaTableCellPro @observer export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProps> { - constructor(props: any) { + constructor(props: SchemaTableCellProps) { super(props); makeObservable(this); } @@ -324,7 +323,7 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp } @observer export class SchemaRTFCell extends ObservableReactComponent<SchemaTableCellProps> { - constructor(props: any) { + constructor(props: SchemaTableCellProps) { super(props); makeObservable(this); } @@ -343,7 +342,7 @@ export class SchemaRTFCell extends ObservableReactComponent<SchemaTableCellProps } @observer export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProps> { - constructor(props: any) { + constructor(props: SchemaTableCellProps) { super(props); makeObservable(this); } @@ -356,18 +355,19 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp style={{ marginRight: 4 }} type="checkbox" checked={BoolCast(this._props.Document[this._props.fieldKey])} - onChange={undoBatch((value: React.ChangeEvent<HTMLInputElement> | undefined) => { - if ((value?.nativeEvent as any).shiftKey) { + onChange={undoable((value: React.ChangeEvent<HTMLInputElement> | undefined) => { + if ((value?.nativeEvent as MouseEvent | PointerEvent).shiftKey) { this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? '')); } else Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? '')); - })} + }, 'set bool cell')} /> + <EditableView - contents={undefined} + contents="" fieldContents={fieldProps} editing={selectedCell(this._props) ? undefined : false} GetValue={() => Field.toKeyValueString(this._props.Document, this._props.fieldKey)} - SetValue={undoBatch((value: string, shiftDown?: boolean, enterKey?: boolean) => { + SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => { if (shiftDown && enterKey) { this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value); this._props.finishEdit?.(); @@ -376,7 +376,7 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp const set = Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), value, Doc.IsDataProto(this._props.Document) ? true : undefined); this._props.finishEdit?.(); return set; - })} + }, 'set bool cell')} /> </div> ); @@ -384,7 +384,7 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp } @observer export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableCellProps> { - constructor(props: any) { + constructor(props: SchemaTableCellProps) { super(props); makeObservable(this); } diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 1efcd84e4..8b9f128e0 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ import { Colors } from 'browndash-components'; import { action, runInAction } from 'mobx'; import { aggregateBounds } from '../../../Utils'; @@ -149,7 +150,7 @@ ScriptingGlobals.add(function showFreeform(attr: 'center' | 'grid' | 'snaplines' const map: Map<'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'chat' | 'up' | 'down' | 'pile' | 'toggle-chat' | 'tag', { waitForRender?: boolean; - checkResult: (doc: Doc) => any; + checkResult: (doc: Doc) => boolean; setDoc: (doc: Doc, dv: DocumentView) => void; }> = new Map([ ['grid', { @@ -507,25 +508,25 @@ ScriptingGlobals.add(function handleTags(value?: any, checkResult?: boolean) { // }); // eslint-disable-next-line prefer-arrow-callback -ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highlight' | 'fontSize' | 'alignment', value: any, checkResult?: boolean) { +ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highlight' | 'fontSize' | 'alignment', value: string | number, checkResult?: boolean) { const editorView = RichTextMenu.Instance?.TextView?.EditorView; // prettier-ignore - const map: Map<'font'|'fontColor'|'highlight'|'fontSize'|'alignment', { checkResult: () => any; setDoc: () => void;}> = new Map([ + const map: Map<'font'|'fontColor'|'highlight'|'fontSize'|'alignment', { checkResult: () => string | undefined; setDoc: () => void;}> = new Map([ ['font', { checkResult: () => RichTextMenu.Instance?.fontFamily, - setDoc: () => value && RichTextMenu.Instance?.setFontField(value, 'fontFamily'), + setDoc: () => value && RichTextMenu.Instance?.setFontField(value.toString(), 'fontFamily'), }], ['highlight', { checkResult: () => RichTextMenu.Instance?.fontHighlight, - setDoc: () => value && RichTextMenu.Instance?.setFontField(value, 'fontHighlight'), + setDoc: () => value && RichTextMenu.Instance?.setFontField(value.toString(), 'fontHighlight'), }], ['fontColor', { checkResult: () => RichTextMenu.Instance?.fontColor, - setDoc: () => value && RichTextMenu.Instance?.setFontField(value, 'fontColor'), + setDoc: () => value && RichTextMenu.Instance?.setFontField(value.toString(), 'fontColor'), }], ['alignment', { checkResult: () => RichTextMenu.Instance?.textAlign, - setDoc: () => { value && editorView?.state ? RichTextMenu.Instance?.align(editorView, editorView.dispatch, value):(Doc.UserDoc().textAlign = value); }, + setDoc: () => { value && editorView?.state ? RichTextMenu.Instance?.align(editorView, editorView.dispatch, value.toString() as "center"|"left"|"right"):(Doc.UserDoc().textAlign = value); }, }], ['fontSize', { checkResult: () => RichTextMenu.Instance?.fontSize.replace('px', ''), @@ -547,7 +548,7 @@ ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highligh }); type attrname = 'noAutoLink' | 'dictation' | 'bold' | 'italics' | 'elide' | 'underline' | 'left' | 'center' | 'right' | 'vcent' | 'bullet' | 'decimal'; -type attrfuncs = [attrname, { checkResult: () => boolean; toggle?: () => any }]; +type attrfuncs = [attrname, { checkResult: () => boolean; toggle?: () => unknown }]; // eslint-disable-next-line prefer-arrow-callback ScriptingGlobals.add(function toggleCharStyle(charStyle: attrname, checkResult?: boolean) { @@ -668,7 +669,7 @@ function setActiveTool(tool: InkTool | Gestures, keepPrim: boolean, checkResult? if (GestureOverlay.Instance) { GestureOverlay.Instance.KeepPrimitiveMode = keepPrim; } - if (Object.values(Gestures).includes(tool as any)) { + if (Object.values(Gestures).includes(tool as Gestures)) { if (GestureOverlay.Instance.InkShape === tool && !keepPrim) { Doc.ActiveTool = InkTool.None; GestureOverlay.Instance.InkShape = undefined; @@ -680,14 +681,14 @@ function setActiveTool(tool: InkTool | Gestures, keepPrim: boolean, checkResult? if (Doc.UserDoc().ActiveTool === tool) { Doc.ActiveTool = InkTool.None; } else { - if ([InkTool.StrokeEraser, InkTool.RadiusEraser, InkTool.SegmentEraser].includes(tool as any)) { + if ([InkTool.StrokeEraser, InkTool.RadiusEraser, InkTool.SegmentEraser].includes(tool as InkTool)) { Doc.UserDoc().activeEraserTool = tool; } // pen or eraser if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape && !keepPrim) { Doc.ActiveTool = InkTool.None; } else { - Doc.ActiveTool = tool as any; + Doc.ActiveTool = tool as InkTool; GestureOverlay.Instance.InkShape = undefined; } } @@ -706,10 +707,10 @@ ScriptingGlobals.add(function activeEraserTool() { // toggle: Set overlay status of selected document // eslint-disable-next-line prefer-arrow-callback -ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', value: any, checkResult?: boolean) { +ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', value: string | number, checkResult?: boolean) { const selected = DocumentView.SelectedDocs().lastElement() ?? Doc.UserDoc(); // prettier-ignore - const map: Map<'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', { checkResult: () => any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([ + const map: Map<'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', { checkResult: () => number|boolean|string|undefined; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([ ['inkMask', { checkResult: () => ((selected?._layout_isSvg ? BoolCast(selected[DocData].stroke_isInkMask) : ActiveIsInkMask())), setInk: (doc: Doc) => { doc[DocData].stroke_isInkMask = !doc.stroke_isInkMask; }, @@ -738,7 +739,7 @@ ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fil [ 'eraserWidth', { checkResult: () => ActiveEraserWidth(), setInk: (doc: Doc) => { }, - setMode: () => { SetEraserWidth(value.toString());}, + setMode: () => { SetEraserWidth(+value);}, }] ]); diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 12b83414c..b38213e08 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -24,7 +24,7 @@ interface Props { export class LinkMenu extends ObservableReactComponent<Props> { _editorRef = React.createRef<HTMLDivElement>(); @observable _linkMenuRef = React.createRef<HTMLDivElement>(); - constructor(props: any) { + constructor(props: Props) { super(props); makeObservable(this); } @@ -40,7 +40,7 @@ export class LinkMenu extends ObservableReactComponent<Props> { onPointerDown = action((e: PointerEvent) => { LinkInfo.Clear(); - if (!this._linkMenuRef.current?.contains(e.target as any) && !this._editorRef.current?.contains(e.target as any)) { + if (!this._linkMenuRef.current?.contains(e.target as HTMLElement) && !this._editorRef.current?.contains(e.target as HTMLElement)) { this.clear(); } }); diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx index cd735318e..c15508669 100644 --- a/src/client/views/linking/LinkMenuGroup.tsx +++ b/src/client/views/linking/LinkMenuGroup.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable react/require-default-props */ import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 9ce04ffac..f54d8311d 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { action, computed, makeObservable, observable } from 'mobx'; @@ -15,7 +13,7 @@ import { DragManager } from '../../util/DragManager'; import { dropActionType } from '../../util/DropActionTypes'; import { LinkManager } from '../../util/LinkManager'; import { SnappingManager } from '../../util/SnappingManager'; -import { undoBatch } from '../../util/UndoManager'; +import { undoable } from '../../util/UndoManager'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView'; import { LinkInfo } from '../nodes/LinkDocPreview'; @@ -56,7 +54,7 @@ export async function StartLinkTargetsDrag(dragEle: HTMLElement, docView: Docume export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { private _drag = React.createRef<HTMLDivElement>(); _editRef = React.createRef<HTMLDivElement>(); - constructor(props: any) { + constructor(props: LinkMenuItemProps) { super(props); makeObservable(this); } @@ -123,7 +121,7 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { this, e, moveEv => { - const eleClone: any = this._drag.current?.cloneNode(true); + const eleClone = this._drag.current?.cloneNode(true) as HTMLElement; if (eleClone) { eleClone.style.transform = `translate(${moveEv.x}px, ${moveEv.y}px)`; StartLinkTargetsDrag(eleClone, this._props.docView, moveEv.x, moveEv.y, this._props.sourceDoc, [this._props.linkDoc]); @@ -151,7 +149,17 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { ); }; - deleteLink = (e: React.PointerEvent): void => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => Doc.DeleteLink?.(this._props.linkDoc)))); + deleteLink = (e: React.PointerEvent): void => + setupMoveUpEvents( + this, + e, + returnFalse, + emptyFunction, + undoable( + action(() => Doc.DeleteLink?.(this._props.linkDoc)), + 'delete link' + ) + ); @observable _hover = false; docView = () => this._props.docView; render() { diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx index 2405e375d..b654f9bd0 100644 --- a/src/client/views/linking/LinkPopup.tsx +++ b/src/client/views/linking/LinkPopup.tsx @@ -1,9 +1,9 @@ /* eslint-disable react/require-default-props */ import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../ClientUtils'; +import { returnEmptyFilter, returnFalse, returnTrue } from '../../../ClientUtils'; import { emptyFunction } from '../../../Utils'; -import { Doc } from '../../../fields/Doc'; +import { Doc, returnEmptyDoclist } from '../../../fields/Doc'; import { Transform } from '../../util/Transform'; import { DefaultStyleProvider, returnEmptyDocViewList } from '../StyleProvider'; import { SearchBox } from '../search/SearchBox'; diff --git a/src/client/views/newlightbox/NewLightboxView.tsx b/src/client/views/newlightbox/NewLightboxView.tsx index c86ddb745..b060fc0b6 100644 --- a/src/client/views/newlightbox/NewLightboxView.tsx +++ b/src/client/views/newlightbox/NewLightboxView.tsx @@ -1,17 +1,15 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../../ClientUtils'; +import { returnEmptyFilter, returnTrue } from '../../../ClientUtils'; import { emptyFunction } from '../../../Utils'; -import { CreateLinkToActiveAudio, Doc, DocListCast, Opt } from '../../../fields/Doc'; +import { CreateLinkToActiveAudio, Doc, DocListCast, Opt, returnEmptyDoclist } from '../../../fields/Doc'; import { InkTool } from '../../../fields/InkField'; import { Cast, NumCast, StrCast, toList } from '../../../fields/Types'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { GestureOverlay } from '../GestureOverlay'; -import { DefaultStyleProvider } from '../StyleProvider'; +import { DefaultStyleProvider, returnEmptyDocViewList } from '../StyleProvider'; import { DocumentView } from '../nodes/DocumentView'; import { OpenWhere } from '../nodes/OpenWhere'; import { ExploreView } from './ExploreView'; @@ -68,7 +66,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { @action public static SetCookie(cookie: string) { if (this.LightboxDoc && cookie) { - this._docFilters = (f => (this._docFilters ? [this._docFilters.push(f) as any, this._docFilters][1] : [f]))(`cookies:${cookie}:provide`); + this._docFilters = (f => (this._docFilters ? ([this._docFilters.push(f) as unknown, this._docFilters][1] as string[]) : [f]))(`cookies:${cookie}:provide`); } } public static AddDocTab = (docsIn: Doc | Doc[], location: OpenWhere, layoutTemplate?: Doc | string) => { @@ -264,7 +262,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { styleProvider={DefaultStyleProvider} ScreenToLocalTransform={this.newLightboxScreenToLocal} renderDepth={0} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} childFilters={this.docFilters} childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} @@ -320,7 +318,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { </div> )} </div> - <RecommendationList keywords={NewLightboxView.Keywords} /> + <RecommendationList /* keywords={NewLightboxView.Keywords} */ /> </div> </div> ); diff --git a/src/client/views/newlightbox/RecommendationList/RecommendationList.tsx b/src/client/views/newlightbox/RecommendationList/RecommendationList.tsx index dc3339cd3..27413bac3 100644 --- a/src/client/views/newlightbox/RecommendationList/RecommendationList.tsx +++ b/src/client/views/newlightbox/RecommendationList/RecommendationList.tsx @@ -1,6 +1,4 @@ /* eslint-disable react/jsx-props-no-spreading */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable guard-for-in */ import { IconButton, Size, Type } from 'browndash-components'; import * as React from 'react'; @@ -168,7 +166,8 @@ export function RecommendationList() { <div className="keywords"> {keywordsLoc && keywordsLoc.map((word, ind) => ( - <div className="keyword"> + <div className="keyword" key={word}> + {' '} {word} <IconButton type={Type.PRIM} @@ -207,7 +206,7 @@ export function RecommendationList() { </div> )} </div> - <div className="recommendations">{recs && recs.map((rec: IRecommendation) => <Recommendation {...rec} />)}</div> + <div className="recommendations">{recs && recs.map(rec => <Recommendation key={rec.data} {...rec} />)}</div> </div> ); } diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 9deed4de4..59349da8b 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { action, computed, IReactionDisposer, makeObservable, observable, runInAction } from 'mobx'; @@ -7,7 +5,7 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { returnFalse, setupMoveUpEvents } from '../../../ClientUtils'; import { DateField } from '../../../fields/DateField'; -import { Doc } from '../../../fields/Doc'; +import { Doc, Opt } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { ComputedField } from '../../../fields/ScriptField'; import { Cast, DateCast, NumCast } from '../../../fields/Types'; @@ -44,9 +42,9 @@ import { OpenWhere } from './OpenWhere'; */ // used as a wrapper class for MediaStream from MediaDevices API -declare class MediaRecorder { - constructor(e: any); // whatever MediaRecorder has -} +// declare class MediaRecorder { +// constructor(e: unknown); // whatever MediaRecorder has +// } export enum mediaState { PendingRecording = 'pendingRecording', @@ -61,9 +59,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return FieldView.LayoutString(AudioBox, fieldKey); } - public static Enabled = false; - - constructor(props: any) { + constructor(props: FieldViewProps) { super(props); makeObservable(this); } @@ -74,12 +70,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { _dropDisposer?: DragManager.DragDropDisposer; _disposers: { [name: string]: IReactionDisposer } = {}; _ele: HTMLAudioElement | null = null; // <audio> ref - _recorder: any; // MediaRecorder + _recorder: Opt<MediaRecorder>; // MediaRecorder _recordStart = 0; _pauseStart = 0; // time when recording is paused (used to keep track of recording timecodes) _pausedTime = 0; _stream: MediaStream | undefined; // passed to MediaRecorder, records device input audio - _play: any = null; // timeout for playback + _play: NodeJS.Timeout | null = null; // timeout for playback @observable _stackedTimeline: CollectionStackedTimeline | null | undefined = undefined; // CollectionStackedTimeline ref @observable _finished: boolean = false; // has playback reached end of clip @@ -133,7 +129,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this.mediaState = mediaState.Paused; this.setPlayheadTime(NumCast(this.layoutDoc.clipStart)); } else { - this.mediaState = undefined as any as mediaState; + this.mediaState = undefined as unknown as mediaState; } } @@ -185,11 +181,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { // play back the audio from seekTimeInSeconds, fullPlay tells whether clip is being played to end vs link range @action playFrom = (seekTimeInSeconds: number, endTime?: number, fullPlay: boolean = false) => { - clearTimeout(this._play); // abort any previous clip ending + this._play && clearTimeout(this._play); // abort any previous clip ending if (isNaN(this._ele?.duration ?? Number.NaN)) { // audio element isn't loaded yet... wait 1/2 second and try again setTimeout(() => this.playFrom(seekTimeInSeconds, endTime), 500); - } else if (this.timeline && this._ele && AudioBox.Enabled) { + } else if (this.timeline && this._ele) { // trimBounds override requested playback bounds const end = Math.min(this.timeline.trimEnd, endTime ?? this.timeline.trimEnd); const start = Math.max(this.timeline.trimStart, seekTimeInSeconds); @@ -253,8 +249,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this._recorder = new MediaRecorder(this._stream); this.dataDoc[this.fieldKey + '_recordingStart'] = new DateField(); DocViewUtils.ActiveRecordings.push(this); - this._recorder.ondataavailable = async (e: any) => { - const [{ result }] = await Networking.UploadFilesToServer({ file: e.data }); + this._recorder.ondataavailable = async (e: BlobEvent) => { + const file: Blob & { name?: string; lastModified?: number; webkitRelativePath?: string } = e.data; + file.name = ''; + file.lastModified = 0; + file.webkitRelativePath = ''; + const [{ result }] = await Networking.UploadFilesToServer({ file: file as Blob & { name: string; lastModified: number; webkitRelativePath: string } }); if (!(result instanceof Error)) { this.Document[this.fieldKey] = new AudioField(result.accessPaths.agnostic.client); } @@ -331,9 +331,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }; // for play button - Play = (e?: any) => { - e?.stopPropagation?.(); - + Play = () => { if (this.timeline && this._ele) { const eleTime = this._ele.currentTime; @@ -363,7 +361,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this.mediaState = mediaState.Paused; // if paused in the middle of playback, prevents restart on next play - if (!this._finished) clearTimeout(this._play); + if (!this._finished && this._play) clearTimeout(this._play); } }; // pause playback and remove from playback list @@ -374,7 +372,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }; // for dictation button, creates a text document for dictation - onFile = (e: any) => { + onFile = (e: React.PointerEvent) => { setupMoveUpEvents( this, e, @@ -419,7 +417,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { action(() => { this._pauseStart = new Date().getTime(); this._paused = true; - this._recorder.pause(); + this._recorder?.pause(); }), false ); @@ -435,7 +433,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { action(() => { this._paused = false; this._pausedTime += new Date().getTime() - this._pauseStart; - this._recorder.resume(); + this._recorder?.resume(); }), false ); @@ -620,14 +618,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { <div className="audiobox-button" title={this.mediaState === mediaState.Paused ? 'play' : 'pause'} - onPointerDown={ - this.mediaState === mediaState.Paused - ? this.Play - : e => { - e.stopPropagation(); - this.Pause(); - } - }> + onPointerDown={e => { + e.stopPropagation(); + this.mediaState === mediaState.Paused ? this.Play() : this.Pause(); + }}> <FontAwesomeIcon icon={this.mediaState === mediaState.Paused ? 'play' : 'pause'} size="1x" /> </div> @@ -743,7 +737,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { // returns the html audio element @computed get audio() { return ( - // eslint-disable-next-line jsx-a11y/media-has-caption <audio ref={this.setRef} className={`audiobox-control${this._props.isContentActive() ? '-interactive' : ''}`} diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index ee67dd305..d51b1cd3a 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -47,7 +47,7 @@ interface freeFormProps { export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { RenderCutoffProvider: (doc: Doc) => boolean; isAnyChildContentActive: () => boolean; - parent: any; + reactParent: React.Component; } @observer export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeFormDocumentViewProps & freeFormProps>() { @@ -71,7 +71,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF public static animStringFields = ['backgroundColor', 'color', 'fillColor']; // fields that are configured to be animatable using animation frames public static animDataFields = (doc: Doc) => (Doc.LayoutFieldKey(doc) ? [Doc.LayoutFieldKey(doc)] : []); // fields that are configured to be animatable using animation frames public static from(dv?: DocumentView): CollectionFreeFormDocumentView | undefined { - return dv?._props.parent instanceof CollectionFreeFormDocumentView ? dv._props.parent : undefined; + return dv?._props.reactParent instanceof CollectionFreeFormDocumentView ? dv._props.reactParent : undefined; } constructor(props: CollectionFreeFormDocumentViewProps & freeFormProps) { @@ -119,7 +119,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF super.componentDidUpdate(prevProps); this.WrapperKeys.forEach( action(keys => { - (this as any)[keys.upper] = (this.props as any)[keys.lower]; + (this as unknown as { [key: string]: unknown })[keys.upper] = (this.props as { [key: string]: unknown })[keys.lower]; }) ); } @@ -148,7 +148,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF (p, val) => { p[val.key] = Cast(doc[`${val.key}_indexed`], listSpec('number'), fillIn ? [NumCast(doc[val.key], val.val)] : []).reduce( (prev, v, i) => ((i <= Math.round(time) && v !== undefined) || prev === undefined ? v : prev), - undefined as any as number + undefined as unknown as number ); return p; }, @@ -159,7 +159,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF public static getStringValues(doc: Doc, time: number) { return CollectionFreeFormDocumentView.animStringFields.reduce( (p, val) => { - p[val] = Cast(doc[`${val}_indexed`], listSpec('string'), [StrCast(doc[val])]).reduce((prev, v, i) => ((i <= Math.round(time) && v !== undefined) || prev === undefined ? v : prev), undefined as any as string); + p[val] = Cast(doc[`${val}_indexed`], listSpec('string'), [StrCast(doc[val])]).reduce((prev, v, i) => ((i <= Math.round(time) && v !== undefined) || prev === undefined ? v : prev), undefined as unknown as string); return p; }, {} as { [val: string]: Opt<string> } @@ -202,15 +202,15 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF docs.forEach(doc => { this.animFields.forEach(val => { const findexed = Cast(doc[`${val.key}_indexed`], listSpec('number'), null); - findexed?.length <= timecode + 1 && findexed.push(undefined as any as number); + findexed?.length <= timecode + 1 && findexed.push(undefined as unknown as number); }); this.animStringFields.forEach(val => { const findexed = Cast(doc[`${val}_indexed`], listSpec('string'), null); - findexed?.length <= timecode + 1 && findexed.push(undefined as any as string); + findexed?.length <= timecode + 1 && findexed.push(undefined as unknown as string); }); this.animDataFields(doc).forEach(val => { const findexed = Cast(doc[`${val}_indexed`], listSpec(InkField), null); - findexed?.length <= timecode + 1 && findexed.push(undefined as any); + findexed?.length <= timecode + 1 && findexed.push(undefined as unknown as InkField); }); }); return newTimer; @@ -286,7 +286,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF localRotation = () => this._props.rotation; render() { TraceMobx(); - return ( <div className={CollectionFreeFormDocumentView.CollectionFreeFormDocViewClassName} @@ -304,10 +303,19 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF <DocumentView // eslint-disable-next-line react/jsx-props-no-spreading {...OmitKeys(this._props,this.WrapperKeys.map(val => val.lower)).omit} // prettier-ignore - parent={this} + Document={this._props.Document} + renderDepth={this._props.renderDepth} + isContentActive={this._props.isContentActive} + childFilters={this._props.childFilters} + childFiltersByRanges={this._props.childFilters} + pinToPres={this._props.pinToPres} + addDocTab={this._props.addDocTab} + searchFilterDocs={this._props.searchFilterDocs} + focus={this._props.focus} + whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} + reactParent={this} DataTransition={this.DataTransition} LocalRotation={this.localRotation} - CollectionFreeFormDocumentView={this.returnThis} styleProvider={this.styleProvider} ScreenToLocalTransform={this.screenToLocalTransform} isGroupActive={this.isGroupActive} diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index efaf6807a..1eae163df 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -162,14 +162,14 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() () => this.clearDoc(which) ); }; - docStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string): any => { + docStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => { switch (property) { case StyleProp.PointerEvents: return 'none'; default: return this._props.styleProvider?.(doc, props, property); } // prettier-ignore }; - moveDoc1 = (docs: Doc | Doc[], targetCol: Doc | undefined, addDoc: any) => toList(docs).reduce((res, doc: Doc) => res && this.moveDoc(doc, addDoc, this.fieldKey + '_1'), true); - moveDoc2 = (docs: Doc | Doc[], targetCol: Doc | undefined, addDoc: any) => toList(docs).reduce((res, doc: Doc) => res && this.moveDoc(doc, addDoc, this.fieldKey + '_2'), true); + moveDoc1 = (docs: Doc | Doc[], targetCol: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => toList(docs).reduce((res, doc: Doc) => res && this.moveDoc(doc, addDoc, this.fieldKey + '_1'), true); + moveDoc2 = (docs: Doc | Doc[], targetCol: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => toList(docs).reduce((res, doc: Doc) => res && this.moveDoc(doc, addDoc, this.fieldKey + '_2'), true); remDoc1 = (docs: Doc | Doc[]) => toList(docs).reduce((res, doc) => res && this.remDoc(doc, this.fieldKey + '_1'), true); remDoc2 = (docs: Doc | Doc[]) => toList(docs).reduce((res, doc) => res && this.remDoc(doc, this.fieldKey + '_2'), true); @@ -420,7 +420,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() } Docs.Prototypes.TemplateMap.set(DocumentType.COMPARISON, { - data: '', layout: { view: ComparisonBox, dataField: 'data' }, options: { acl: '', diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 4d5f15a3e..df6e74d85 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -50,7 +50,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { sidebarAddDoc: ((doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean) | undefined; crop: ((region: Doc | undefined, addCrop?: boolean) => Doc | undefined) | undefined; @observable _marqueeing: number[] | undefined = undefined; - @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); + @observable _savedAnnotations = new ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>(); constructor(props: FieldViewProps) { super(props); @@ -150,7 +150,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const visibleAnchor = AnchorMenu.Instance.GetAnchor?.(undefined, addAsAnnotation); const anchor = !pinProps ? this.Document - : this._vizRenderer?.getAnchor(pinProps) ?? + : (this._vizRenderer?.getAnchor(pinProps) ?? visibleAnchor ?? Docs.Create.ConfigDocument({ title: 'ImgAnchor:' + this.Document.title, @@ -161,7 +161,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { // when we clear selection -> we should have it so chartBox getAnchor returns undefined // this is for when we want the whole doc (so when the chartBox getAnchor returns without a marker) /* put in some options */ - }); + })); anchor.config_dataViz = this.dataVizView; anchor.config_dataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined; anchor.dataViz_selectedRows = Field.Copy(this.layoutDoc.dataViz_selectedRows); @@ -376,8 +376,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this._props.select(false); MarqueeAnnotator.clearAnnotations(this._savedAnnotations); this._marqueeing = [e.clientX, e.clientY]; - const target = e.target as any; - if (e.target && (target.className.includes('endOfContent') || (target.parentElement.className !== 'textLayer' && target.parentElement.parentElement?.className !== 'textLayer'))) { + const target = e.target as HTMLElement; + if (e.target && (target.className.includes('endOfContent') || (target.parentElement?.className !== 'textLayer' && target.parentElement?.parentElement?.className !== 'textLayer'))) { /* empty */ } else { // if textLayer is hit, then we select text instead of using a marquee so clear out the marquee. @@ -429,7 +429,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { specificContextMenu = (): void => { const cm = ContextMenu.Instance; const options = cm.findByDescription('Options...'); - const optionItems = options && 'subitems' in options ? options.subitems : []; + const optionItems = options?.subitems ?? []; optionItems.push({ description: `Analyze with AI`, event: () => this.askGPT(), icon: 'lightbulb' }); !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' }); }; @@ -450,7 +450,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { * it appears to the right of this document, with the * parameters passed in being used to create an initial display */ - createFilteredDoc = (axes?: any) => { + createFilteredDoc = (axes?: string[]) => { const embedding = Doc.MakeEmbedding(this.Document!); embedding._layout_showSidebar = false; embedding._dataViz = DataVizView.LINECHART; diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx index 60bc8df18..a6a6a6b46 100644 --- a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx +++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/label-has-associated-control */ -/* eslint-disable jsx-a11y/alt-text */ import { IconButton } from 'browndash-components'; import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index d2e82284e..7179356b2 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-noninteractive-tabindex */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ import { Button, Type } from 'browndash-components'; import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -24,7 +22,7 @@ const { DATA_VIZ_TABLE_ROW_HEIGHT } = require('../../../global/globalCssVariable interface TableBoxProps { Document: Doc; layoutDoc: Doc; - records: { [key: string]: any }[]; + records: { [key: string]: unknown }[]; selectAxes: (axes: string[]) => void; selectTitleCol: (titleCol: string) => void; axes: string[]; @@ -48,14 +46,14 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { @observable settingTitle: boolean = false; // true when setting a title column @observable hasRowsToFilter: boolean = false; // true when any rows are selected @observable filtering: boolean = false; // true when the filtering menu is open - @observable filteringColumn: any = ''; // column to filter + @observable filteringColumn = ''; // column to filter @observable filteringType: string = 'Value'; // "Value" or "Range" - filteringVal: any[] = ['', '']; // value or range to filter the column with + filteringVal = ['', '']; // value or range to filter the column with @observable _scrollTop = -1; @observable _tableHeight = 0; @observable _tableContainerHeight = 0; - constructor(props: any) { + constructor(props: TableBoxProps) { super(props); makeObservable(this); } @@ -141,17 +139,21 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { e, moveEv => { // dragging off a column to create a brushed DataVizBox - const sourceAnchorCreator = () => this._props.docView?.()!.Document!; + const sourceAnchorCreator = () => this._props.docView?.()?.Document || this._props.Document; const targetCreator = (annotationOn: Doc | undefined) => { - const embedding = Doc.MakeEmbedding(this._props.docView?.()!.Document!); - embedding._dataViz = DataVizView.TABLE; - embedding._dataViz_axes = new List<string>([col]); - embedding._dataViz_parentViz = this._props.Document; - embedding.annotationOn = annotationOn; - embedding.histogramBarColors = Field.Copy(this._props.layoutDoc.histogramBarColors); - embedding.defaultHistogramColor = this._props.layoutDoc.defaultHistogramColor; - embedding.pieSliceColors = Field.Copy(this._props.layoutDoc.pieSliceColors); - return embedding; + const doc = this._props.docView?.()?.Document; + if (doc) { + const embedding = Doc.MakeEmbedding(doc); + embedding._dataViz = DataVizView.TABLE; + embedding._dataViz_axes = new List<string>([col]); + embedding._dataViz_parentViz = this._props.Document; + embedding.annotationOn = annotationOn; + embedding.histogramBarColors = Field.Copy(this._props.layoutDoc.histogramBarColors); + embedding.defaultHistogramColor = this._props.layoutDoc.defaultHistogramColor; + embedding.pieSliceColors = Field.Copy(this._props.layoutDoc.pieSliceColors); + return embedding; + } + return this._props.Document; }; if (this._props.docView?.() && !ClientUtils.isClick(moveEv.clientX, moveEv.clientY, downX, downY, Date.now())) { DragManager.StartAnchorAnnoDrag(moveEv.target instanceof HTMLElement ? [moveEv.target] : [], new DragManager.AnchorAnnoDragData(this._props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, { @@ -188,9 +190,9 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { /** * These functions handle the filtering popup for when the "filter" button is pressed to select rows */ - filter = undoable((e: any) => { - let start: any; - let end: any; + filter = undoable((e: React.MouseEvent) => { + let start: string | number; + let end: string | number; if (this.filteringType === 'Range') { start = Number.isNaN(Number(this.filteringVal[0])) ? this.filteringVal[0] : Number(this.filteringVal[0]); end = Number.isNaN(Number(this.filteringVal[1])) ? this.filteringVal[1] : Number(this.filteringVal[1]); @@ -204,8 +206,8 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { } } } else { - let compare = this._props.records[rowID][this.filteringColumn]; - if (compare as Number) compare = Number(compare); + let compare = this._props.records[rowID][this.filteringColumn] as string | number; + if (Number(compare) == compare) compare = Number(compare); if (start <= compare && compare <= end) { if (!NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowID)) { this.tableRowClick(e, rowID); @@ -218,11 +220,11 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { this.filteringVal = ['', '']; }, 'filter table'); @action - setFilterColumn = (e: any) => { + setFilterColumn = (e: React.ChangeEvent<HTMLSelectElement>) => { this.filteringColumn = e.currentTarget.value; }; @action - setFilterType = (e: any) => { + setFilterType = (e: React.ChangeEvent<HTMLSelectElement>) => { this.filteringType = e.currentTarget.value; }; changeFilterValue = action((e: React.ChangeEvent<HTMLInputElement>) => { @@ -240,7 +242,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { <div className="tableBox-filterPopup" style={{ right: this._props.width * 0.05 }}> <div className="tableBox-filterPopup-selectColumn"> Column: - <select className="tableBox-filterPopup-selectColumn-each" value={this.filteringColumn !== '' ? this.filteringColumn : this.columns[0]} onChange={e => this.setFilterColumn(e)}> + <select className="tableBox-filterPopup-selectColumn-each" value={this.filteringColumn !== '' ? this.filteringColumn : this.columns[0]} onChange={this.setFilterColumn}> {this.columns.map(column => ( <option className="" key={column} value={column}> {' '} @@ -250,7 +252,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { </select> </div> <div className="tableBox-filterPopup-setValue"> - <select className="tableBox-filterPopup-setValue-each" value={this.filteringType} onChange={e => this.setFilterType(e)}> + <select className="tableBox-filterPopup-setValue-each" value={this.filteringType} onChange={this.setFilterType}> <option className="" key="Value" value="Value"> {' '} {'Value'}{' '} @@ -307,7 +309,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { )} </div> <div className="tableBox-filterPopup-setFilter"> - <Button onClick={action(e => this.filter(e))} text="Set Filter" type={Type.SEC} color="black" /> + <Button onClick={this.filter} text="Set Filter" type={Type.SEC} color="black" /> </div> </div> ); @@ -451,7 +453,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { if (this._props.titleCol === col) colSelected = true; return ( <td key={this.columns.indexOf(col)} style={{ border: colSelected ? '3px solid black' : '1px solid black', fontWeight: colSelected ? 'bolder' : 'normal' }}> - <div className="tableBox-cell">{this._props.records[rowId][col]}</div> + <div className="tableBox-cell">{this._props.records[rowId][col] as string | number}</div> </td> ); })} diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss index d2749f1ad..323638bff 100644 --- a/src/client/views/nodes/DiagramBox.scss +++ b/src/client/views/nodes/DiagramBox.scss @@ -1,3 +1,5 @@ +$searchbarHeight: 50px; + .DIYNodeBox { width: 100%; height: 100%; @@ -6,83 +8,75 @@ align-items: center; justify-content: center; - .DIYNodeBox-wrapper { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - .DIYNodeBox { - /* existing code */ - - .DIYNodeBox-iframe { - height: 100%; - width: 100%; - border: none; + .DIYNodeBox { + /* existing code */ - } + .DIYNodeBox-iframe { + height: 100%; + width: 100%; + border: none; } + } - .search-bar { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - padding: 10px; + .DIYNodeBox-searchbar { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: $searchbarHeight; + padding: 10px; - input[type="text"] { - flex: 1; - margin-right: 10px; - } + input[type='text'] { + flex: 1; + margin-right: 10px; + } - button { - padding: 5px 10px; - } + button { + padding: 5px 10px; } + } - .content { + .DIYNodeBox-content { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: calc(100% - $searchbarHeight); + .diagramBox { flex: 1; display: flex; justify-content: center; align-items: center; - width:100%; - height:100%; - .diagramBox{ + width: 100%; + height: 100%; + svg { flex: 1; display: flex; justify-content: center; align-items: center; - width:100%; - height:100%; - svg{ - flex: 1; - display: flex; - justify-content: center; - align-items: center; - width:100%; - height:100%; - } + width: 100%; + height: 100%; } } + } - .loading-circle { - position: relative; - width: 50px; - height: 50px; - border-radius: 50%; - border: 3px solid #ccc; - border-top-color: #333; - animation: spin 1s infinite linear; - } + .loading-circle { + position: relative; + width: 50px; + height: 50px; + border-radius: 50%; + border: 3px solid #ccc; + border-top-color: #333; + animation: spin 1s infinite linear; + } - @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); } } -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx index 32969fa53..36deb2d8d 100644 --- a/src/client/views/nodes/DiagramBox.tsx +++ b/src/client/views/nodes/DiagramBox.tsx @@ -1,284 +1,198 @@ import mermaid from 'mermaid'; -import { action, makeObservable, observable, reaction } from 'mobx'; +import { action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast } from '../../../fields/Doc'; -import { List } from '../../../fields/List'; +import { DocData } from '../../../fields/DocSymbols'; import { RichTextField } from '../../../fields/RichTextField'; -import { DocCast, NumCast } from '../../../fields/Types'; +import { Cast, DocCast, NumCast } from '../../../fields/Types'; +import { Gestures } from '../../../pen-gestures/GestureTypes'; import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT'; import { DocumentType } from '../../documents/DocumentTypes'; import { Docs } from '../../documents/Documents'; import { DocumentManager } from '../../util/DocumentManager'; import { LinkManager } from '../../util/LinkManager'; +import { undoable } from '../../util/UndoManager'; import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { InkingStroke } from '../InkingStroke'; import './DiagramBox.scss'; import { FieldView, FieldViewProps } from './FieldView'; +import { FormattedTextBox } from './formattedText/FormattedTextBox'; @observer export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(DiagramBox, fieldKey); } - private _ref: React.RefObject<HTMLDivElement> = React.createRef(); - private _dragRef = React.createRef<HTMLDivElement>(); + static isPointInBox = (box: Doc, pt: number[]): boolean => { + if (typeof pt[0] === 'number' && typeof box.x === 'number' && typeof box.y === 'number' && typeof pt[1] === 'number') { + return pt[0] < box.x + NumCast(box.width) && pt[0] > box.x && pt[1] > box.y && pt[1] < box.y + NumCast(box.height); + } + return false; + }; + constructor(props: FieldViewProps) { super(props); makeObservable(this); } - @observable inputValue = ''; - @observable loading = false; - @observable errorMessage = ''; - @observable mermaidCode = ''; + @observable _showCode = false; + @observable _inputValue = ''; + @observable _generating = false; + @observable _errorMessage = ''; - @action handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { - this.inputValue = e.target.value; - }; - async componentDidMount() { + @computed get mermaidcode() { + return Cast(this.Document[DocData].text, RichTextField, null)?.Text ?? ''; + } + + componentDidMount() { this._props.setContentViewBox?.(this); mermaid.initialize({ securityLevel: 'loose', startOnLoad: true, flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' }, }); - this.mermaidCode = 'asdasdasd'; - const docArray: Doc[] = DocListCast(this.Document.data); - let mermaidCodeDoc = docArray.filter(doc => doc.type === 'rich text'); - mermaidCodeDoc = mermaidCodeDoc.filter(doc => (doc.text as RichTextField).Text === 'mermaidCodeTitle'); - if (mermaidCodeDoc[0]) { - if (typeof mermaidCodeDoc[0].title === 'string') { - console.log(mermaidCodeDoc[0].title); - if (mermaidCodeDoc[0].title !== '') { - this.renderMermaidAsync(mermaidCodeDoc[0].title); - } - } - } - // this will create a text doc far away where the user cant to save the mermaid code, where it will then be accessed when flipped to the diagram box side - // the code is stored in the title since it is much easier to change than in the text - else { - DocumentManager.Instance.AddViewRenderedCb(this.Document, docViewForYourCollection => { - if (docViewForYourCollection && docViewForYourCollection.ComponentView) { - if (docViewForYourCollection.ComponentView.addDocument && docViewForYourCollection.ComponentView.removeDocument) { - const newDoc = Docs.Create.TextDocument('mermaidCodeTitle', { title: '', x: 9999 + NumCast(this.layoutDoc._width), y: 9999 }); - docViewForYourCollection.ComponentView?.addDocument(newDoc); - } - } - }); - } - console.log(this.Document.title); - // this is so that ever time a new doc, text node or ink node, is created, this.createMermaidCode will run which will create a save + // when a new doc/text/ink/shape is created in the freeform view, this generates the corresponding mermaid diagram code reaction( () => DocListCast(this.Document.data), - () => this.convertDrawingToMermaidCode(), + docArray => docArray.length && this.convertDrawingToMermaidCode(docArray), { fireImmediately: true } ); } - renderMermaid = async (str: string) => { + renderMermaid = (str: string) => { try { - const { svg, bindFunctions } = await this.mermaidDiagram(str); - return { svg, bindFunctions }; + return mermaid.render('graph' + Date.now(), str); } catch (error) { - console.error('Error rendering mermaid diagram:', error); return { svg: '', bindFunctions: undefined }; } }; - mermaidDiagram = async (str: string) => mermaid.render('graph' + Date.now(), str); - async renderMermaidAsync(mermaidCode: string) { + renderMermaidAsync = async (mermaidCode: string, dashDiv: HTMLDivElement) => { try { const { svg, bindFunctions } = await this.renderMermaid(mermaidCode); - const dashDiv = document.getElementById('dashDiv' + this.Document.title); - if (dashDiv) { - dashDiv.innerHTML = svg; - if (bindFunctions) { - bindFunctions(dashDiv); - } - } + dashDiv.innerHTML = svg; + bindFunctions?.(dashDiv); } catch (error) { console.error('Error rendering Mermaid:', error); } - } - @action handleRenderClick = () => { - this.generateMermaidCode(); }; - @action async generateMermaidCode() { - console.log('Generating Mermaid Code'); - this.loading = true; - let prompt = ''; - // let docArray: Doc[] = DocListCast(this.Document.data); - // let mermaidCodeDoc = docArray.filter(doc => doc.type == 'rich text') - // mermaidCodeDoc=mermaidCodeDoc.filter(doc=>(doc.text as RichTextField).Text=='mermaidCodeTitle') - // if(mermaidCodeDoc[0]){ - // console.log(mermaidCodeDoc[0].title) - // if(typeof mermaidCodeDoc[0].title=='string'){ - // console.log(mermaidCodeDoc[0].title) - // if(mermaidCodeDoc[0].title!=""){ - // prompt="Edit this code "+this.inputValue+": "+mermaidCodeDoc[0].title - // console.log("you have to see me") - // } - // } - // } - // else{ - prompt = 'Write this in mermaid code and only give me the mermaid code: ' + this.inputValue; - console.log('there is no text save'); - // } - const res = await gptAPICall(prompt, GPTCallType.MERMAID); - this.loading = false; - if (res === 'Error connecting with API.') { - // If GPT call failed - console.error('GPT call failed'); - this.errorMessage = 'GPT call failed; please try again.'; - } else if (res !== null) { - // If GPT call succeeded, set htmlCode;;; TODO: check if valid html - if (this.isValidCode(res)) { - this.mermaidCode = res; - console.log('GPT call succeeded:' + res); - this.errorMessage = ''; - } else { - console.error('GPT call succeeded but invalid html; please try again.'); - this.errorMessage = 'GPT call succeeded but invalid html; please try again.'; - } - } - this.renderMermaidAsync.call(this, this.removeWords(this.mermaidCode)); - this.loading = false; - } - isValidCode = (html: string) => true; - removeWords(inputStrIn: string) { - const inputStr = inputStrIn.replace('```mermaid', ''); - return inputStr.replace('```', ''); - } + + setMermaidCode = undoable((res: string) => { + this.Document[DocData].text = new RichTextField( + JSON.stringify({ + doc: { + type: 'doc', + content: [ + { + type: 'code_block', + content: [ + { type: 'text', text: `^@mermaids\n` }, + { type: 'text', text: this.removeWords(res) }, + ], + }, + ], + }, + selection: { type: 'text', anchor: 1, head: 1 }, + }), + res + ); + }, 'set mermaid code'); + + generateMermaidCode = action(() => { + this._generating = true; + const prompt = 'Write this in mermaid code and only give me the mermaid code: ' + this._inputValue; + gptAPICall(prompt, GPTCallType.MERMAID).then( + action(res => { + this._generating = false; + if (res === 'Error connecting with API.') { + this._errorMessage = 'GPT call failed; please try again.'; + } + // If GPT call succeeded, set mermaid code on Doc which will trigger a rendering if _showCode is false + else if (res && this.isValidCode(res)) { + this.setMermaidCode(res); + this._errorMessage = ''; + } else { + this._errorMessage = 'GPT call succeeded but invalid html; please try again.'; + } + }) + ); + }); + isValidCode = (html: string) => (html ? true : false); + removeWords = (inputStrIn: string) => inputStrIn.replace('```mermaid', '').replace(`^@mermaids`, '').replace('```', ''); + // method to convert the drawings on collection node side the mermaid code - async convertDrawingToMermaidCode() { - let mermaidCode = ''; - let diagramExists = false; - if (this.Document.data instanceof List) { - const docArray: Doc[] = DocListCast(this.Document.data); - const rectangleArray = docArray.filter(doc => doc.title === 'rectangle' || doc.title === 'circle'); - const lineArray = docArray.filter(doc => doc.title === 'line' || doc.title === 'stroke'); - const textArray = docArray.filter(doc => doc.type === 'rich text'); - const timeoutPromise = () => - new Promise(resolve => { - setTimeout(resolve, 0); - }); - await timeoutPromise(); - const inkStrokeArray = lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).filter(inkView => inkView?.ComponentView instanceof InkingStroke); - console.log(inkStrokeArray.length); - console.log(lineArray.length); - if (inkStrokeArray[0] && inkStrokeArray.length === lineArray.length) { - mermaidCode = 'graph TD;'; - const inkingStrokeArray = inkStrokeArray.map(stroke => stroke?.ComponentView); - for (let i = 0; i < rectangleArray.length; i++) { - const rectangle = rectangleArray[i]; - for (let j = 0; j < lineArray.length; j++) { - const inkScaleX = (inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkScaleX; - const inkScaleY = (inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkScaleY; - const inkStrokeXArray = (inkingStrokeArray[j] as InkingStroke) - ?.inkScaledData() - .inkData.map(coord => coord.X) - .map(doc => doc * inkScaleX); - const inkStrokeYArray = (inkingStrokeArray[j] as InkingStroke) - ?.inkScaledData() - .inkData.map(coord => coord.Y) - .map(doc => doc * inkScaleY); - console.log(inkingStrokeArray.length); - console.log(lineArray.length); - // need to minX and minY to since the inkStroke.x and.y is not relative to the doc. so I have to do some calcluations - const minX: number = Math.min(...inkStrokeXArray); - const minY: number = Math.min(...inkStrokeYArray); - const startX = inkStrokeXArray[0] - minX + (lineArray[j]?.x as number); - const startY = inkStrokeYArray[0] - minY + (lineArray[j]?.y as number); - const endX = inkStrokeXArray[inkStrokeXArray.length - 1] - minX + (lineArray[j].x as number); - const endY = inkStrokeYArray[inkStrokeYArray.length - 1] - minY + (lineArray[j].y as number); - if (this.isPointInBox(rectangle, [startX, startY])) { - for (let k = 0; k < rectangleArray.length; k++) { - const rectangle2 = rectangleArray[k]; - if (this.isPointInBox(rectangle2, [endX, endY]) && typeof rectangle.x === 'number' && typeof rectangle2.x === 'number') { - diagramExists = true; - const linkedDocs: Doc[] = LinkManager.Instance.getAllRelatedLinks(lineArray[j]).map(d => DocCast(LinkManager.getOppositeAnchor(d, lineArray[j]))); - console.log(linkedDocs.length); - if (linkedDocs.length !== 0) { - const linkedText = (linkedDocs[0].text as RichTextField).Text; - mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '-->|' + linkedText + '|' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';'; - } else { - mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '-->' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';'; - } - } + convertDrawingToMermaidCode = async (docArray: Doc[]) => { + const rectangleArray = docArray.filter(doc => doc.title === Gestures.Rectangle || doc.title === Gestures.Circle); + const lineArray = docArray.filter(doc => doc.title === Gestures.Line || doc.title === Gestures.Stroke); + const textArray = docArray.filter(doc => doc.type === DocumentType.RTF); + await new Promise(resolve => setTimeout(resolve)); + const inkStrokeArray = lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).filter(inkView => inkView?.ComponentView instanceof InkingStroke); + if (inkStrokeArray[0] && inkStrokeArray.length === lineArray.length) { + let mermaidCode = `graph TD \n`; + const inkingStrokeArray = inkStrokeArray.map(stroke => stroke?.ComponentView as InkingStroke).filter(stroke => stroke); + for (const rectangle of rectangleArray) { + for (const inkStroke of inkingStrokeArray) { + const inkData = inkStroke.inkScaledData(); + const { inkScaleX, inkScaleY } = inkData; + const inkStrokeXArray = inkData.inkData.map(coord => coord.X * inkScaleX); + const inkStrokeYArray = inkData.inkData.map(coord => coord.Y * inkScaleY); + // need to minX and minY to since the inkStroke.x and.y is not relative to the doc. so I have to do some calcluations + const offX = Math.min(...inkStrokeXArray) - NumCast(inkStroke.Document.x); + const offY = Math.min(...inkStrokeYArray) - NumCast(inkStroke.Document.y); + + const startX = inkStrokeXArray[0] - offX; + const startY = inkStrokeYArray[0] - offY; + const endX = inkStrokeXArray.lastElement() - offX; + const endY = inkStrokeYArray.lastElement() - offY; + if (DiagramBox.isPointInBox(rectangle, [startX, startY])) { + for (const rectangle2 of rectangleArray) { + if (DiagramBox.isPointInBox(rectangle2, [endX, endY])) { + const linkedDocs = LinkManager.Instance.getAllRelatedLinks(inkStroke.Document).map(d => DocCast(LinkManager.getOppositeAnchor(d, inkStroke.Document))); + const linkedDocText = Cast(linkedDocs[0]?.text, RichTextField, null)?.Text; + const linkText = linkedDocText ? `|${linkedDocText}|` : ''; + mermaidCode += ' ' + Math.abs(NumCast(rectangle.x)) + this.getTextInBox(rectangle, textArray) + '-->' + linkText + Math.abs(NumCast(rectangle2.x)) + this.getTextInBox(rectangle2, textArray) + `\n`; } } } } - // this will save the text - DocumentManager.Instance.AddViewRenderedCb(this.Document, docViewForYourCollection => { - if (docViewForYourCollection && docViewForYourCollection.ComponentView) { - if (docViewForYourCollection.ComponentView.addDocument && docViewForYourCollection.ComponentView.removeDocument) { - let docs: Doc[] = DocListCast(this.Document.data); - docs = docs.filter(doc => doc.type === 'rich text'); - const mermaidCodeDoc = docs.filter(doc => (doc.text as RichTextField).Text === 'mermaidCodeTitle'); - if (mermaidCodeDoc[0]) { - if (diagramExists) { - mermaidCodeDoc[0].title = mermaidCode; - } else { - mermaidCodeDoc[0].title = ''; - } - } - } - } - }); + this.setMermaidCode(mermaidCode); } } - } - testInkingStroke = () => { - if (this.Document.data instanceof List) { - const docArray: Doc[] = DocListCast(this.Document.data); - const lineArray = docArray.filter(doc => doc.title === 'line' || doc.title === 'stroke'); - setTimeout(() => { - const inkStrokeArray = lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).filter(inkView => inkView?.ComponentView instanceof InkingStroke); - console.log(inkStrokeArray); - }); - } }; - getTextInBox = (box: Doc, richTextArray: Doc[]): string => { - for (let i = 0; i < richTextArray.length; i++) { - const textDoc = richTextArray[i]; - if (typeof textDoc.x === 'number' && typeof textDoc.y === 'number' && typeof box.x === 'number' && typeof box.height === 'number' && typeof box.width === 'number' && typeof box.y === 'number') { - if (textDoc.x > box.x && textDoc.x < box.x + box.width && textDoc.y > box.y && textDoc.y < box.y + box.height) { - if (box.title === 'rectangle') { - return '(' + ((textDoc.text as RichTextField)?.Text ?? '') + ')'; - } - if (box.title === 'circle') { - return '((' + ((textDoc.text as RichTextField)?.Text ?? '') + '))'; - } - } + + getTextInBox = (box: Doc, richTextArray: Doc[]) => { + for (const textDoc of richTextArray) { + if (DiagramBox.isPointInBox(box, [NumCast(textDoc.x), NumCast(textDoc.y)])) { + switch (box.title) { + case Gestures.Rectangle: return '(' + ((textDoc.text as RichTextField)?.Text ?? '') + ')'; + case Gestures.Circle: return '((' + ((textDoc.text as RichTextField)?.Text ?? '') + '))'; + default: + } // prettier-ignore } } return '( )'; }; - isPointInBox = (box: Doc, line: number[]): boolean => { - if (typeof line[0] === 'number' && typeof box.x === 'number' && typeof box.width === 'number' && typeof box.height === 'number' && typeof box.y === 'number' && typeof line[1] === 'number') { - return line[0] < box.x + box.width && line[0] > box.x && line[1] > box.y && line[1] < box.y + box.height; - } - return false; - }; render() { return ( - <div ref={this._ref} className="DIYNodeBox"> - <div ref={this._dragRef} className="DIYNodeBox-wrapper"> - <div className="search-bar"> - <input type="text" value={this.inputValue} onChange={this.handleInputChange} /> - <button type="button" onClick={this.handleRenderClick}> - Generate - </button> - </div> - <div className="content"> - {this.mermaidCode ? ( - <div id={'dashDiv' + this.Document.title} className="diagramBox" /> - ) : ( - <div>{this.loading ? <div className="loading-circle" /> : <div>{this.errorMessage ? this.errorMessage : 'Insert prompt to generate diagram'}</div>}</div> - )} - </div> + <div className="DIYNodeBox"> + <div className="DIYNodeBox-searchbar"> + <input type="text" value={this._inputValue} onKeyDown={action(e => e.key === 'Enter' && this.generateMermaidCode())} onChange={action(e => (this._inputValue = e.target.value))} /> + <button type="button" onClick={this.generateMermaidCode}> + Gen + </button> + <input type="checkbox" onClick={action(() => (this._showCode = !this._showCode))} /> + </div> + <div className="DIYNodeBox-content"> + {this._showCode ? ( + <FormattedTextBox {...this._props} fieldKey="text" /> + ) : this._generating ? ( + <div className="loading-circle" /> + ) : ( + <div className="diagramBox" ref={r => r && this.renderMermaidAsync.call(this, this.removeWords(this.mermaidcode), r)}> + {this._errorMessage || 'Type a prompt to generate a diagram'} + </div> + )} </div> </div> ); @@ -286,6 +200,14 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } Docs.Prototypes.TemplateMap.set(DocumentType.DIAGRAM, { - layout: { view: DiagramBox, dataField: 'dadta' }, - options: { _height: 300, _layout_fitWidth: true, _layout_nativeDimEditable: true, _layout_reflowVertical: true, waitForDoubleClickToClick: 'always', systemIcon: 'BsGlobe' }, + layout: { view: DiagramBox, dataField: 'data' }, + options: { + _height: 300, // + _layout_fitWidth: true, + _layout_nativeDimEditable: true, + _layout_reflowVertical: true, + _layout_reflowHorizontal: true, + waitForDoubleClickToClick: 'always', + systemIcon: 'BsGlobe', + }, }); diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 192c7875e..afc160297 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -4,7 +4,7 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import * as XRegExp from 'xregexp'; import { OmitKeys } from '../../../ClientUtils'; -import { Without, emptyPath } from '../../../Utils'; +import { Without } from '../../../Utils'; import { Doc, Opt } from '../../../fields/Doc'; import { AclPrivate, DocData } from '../../../fields/DocSymbols'; import { ScriptField } from '../../../fields/ScriptField'; @@ -43,26 +43,37 @@ interface HTMLtagProps { @observer export class HTMLtag extends React.Component<HTMLtagProps> { click = () => { - const clickScript = (this.props as any).onClick as Opt<ScriptField>; + const clickScript = this.props.onClick as Opt<ScriptField>; clickScript?.script.run({ this: this.props.Document, scale: this.props.scaling }); }; - onInput = (e: React.FormEvent<HTMLDivElement>) => { - const onInputScript = (this.props as any).onInput as Opt<ScriptField>; - onInputScript?.script.run({ this: this.props.Document, value: (e.target as any).textContent }); + onInput = (e: React.FormEvent<unknown>) => { + const onInputScript = this.props.onInput as Opt<ScriptField>; + onInputScript?.script.run({ this: this.props.Document, value: (e.target as HTMLElement).textContent }); }; render() { - const style: { [key: string]: any } = {}; - const divKeys = OmitKeys(this.props, ['children', 'dragStarting', 'dragEnding', 'htmltag', 'scaling', 'Document', 'key', 'onInput', 'onClick', '__proto__']).omit; - const replacer = (match: any, expr: string) => + const style: { [key: string]: unknown } = {}; + const divKeys = OmitKeys(this.props, [ + 'children', // + 'dragStarting', + 'dragEnding', + 'htmltag', + 'scaling', + 'Document', + 'key', + 'onInput', + 'onClick', + '__proto__', + ]).omit; + const replacer = (match: string, expr: string) => // bcz: this executes a script to convert a property expression string: { script } into a value (ScriptField.MakeFunction(expr, { this: Doc.name, scale: 'number' })?.script.run({ this: this.props.Document, scale: this.props.scaling }).result as string) || ''; Object.keys(divKeys).forEach((prop: string) => { - const p = (this.props as any)[prop] as string; + const p = (this.props as unknown as { [key: string]: string })[prop] as string; style[prop] = p?.replace(/{([^.'][^}']+)}/g, replacer); }); const Tag = this.props.htmltag as keyof JSX.IntrinsicElements; return ( - <Tag style={style} onClick={this.click} onInput={this.onInput as any}> + <Tag style={style} onClick={this.click} onInput={this.onInput}> {this.props.children} </Tag> ); @@ -78,12 +89,12 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte /** * Set of all available rendering componets for Docs (e.g., ImageBox, CollectionFreeFormView, etc) */ - private static Components: { [key: string]: any }; - public static Init(defaultLayoutString: string, components: { [key: string]: any }) { + private static Components: { [key: string]: unknown }; + public static Init(defaultLayoutString: string, components: { [key: string]: unknown }) { DocumentContentsView.DefaultLayoutString = defaultLayoutString; DocumentContentsView.Components = components; } - constructor(props: any) { + constructor(props: DocumentContentsViewProps) { super(props); makeObservable(this); } @@ -132,13 +143,13 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte ...this._props, Document: this.layoutDoc ?? this._props.Document, TemplateDataDocument: templateDataDoc instanceof Promise ? undefined : templateDataDoc, - onClick: onClick as any as React.MouseEventHandler, // pass onClick script as if it were a real function -- it will be interpreted properly in the HTMLtag - onInput: onInput as any as React.FormEventHandler, + onClick: onClick as unknown as React.MouseEventHandler, // pass onClick script as if it were a real function -- it will be interpreted properly in the HTMLtag + onInput: onInput as unknown as React.FormEventHandler, }; return { props: { ...OmitKeys(list, [...docOnlyProps], '').omit, - }, + } as BindingProps, }; } @@ -151,11 +162,11 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte let layoutFrame = this.layout; // replace code content with a script >{content}< as in <HTMLdiv>{this.title}</HTMLdiv> - const replacer = (match: any, prefix: string, expr: string, postfix: string) => prefix + ((ScriptField.MakeFunction(expr, { this: Doc.name })?.script.run({ this: this._props.Document }).result as string) || '') + postfix; + const replacer = (match: string, prefix: string, expr: string, postfix: string) => prefix + ((ScriptField.MakeFunction(expr, { this: Doc.name })?.script.run({ this: this._props.Document }).result as string) || '') + postfix; layoutFrame = layoutFrame.replace(/(>[^{]*)[^=]\{([^.'][^<}]+)\}([^}]*<)/g, replacer); // replace HTML<tag> with corresponding HTML tag as in: <HTMLdiv> becomes <HTMLtag Document={props.Document} htmltag='div'> - const replacer2 = (match: any, p1: string) => `<HTMLtag Document={props.Document} scaling='${this._props.NativeDimScaling?.() || 1}' htmltag='${p1}'`; + const replacer2 = (match: string, p1: string) => `<HTMLtag Document={props.Document} scaling='${this._props.NativeDimScaling?.() || 1}' htmltag='${p1}'`; layoutFrame = layoutFrame.replace(/<HTML([a-zA-Z0-9_-]+)/g, replacer2); // replace /HTML<tag> with </HTMLdiv> as in: </HTMLdiv> becomes </HTMLtag> @@ -181,6 +192,7 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte return { bindings, layoutFrame }; } + blacklistedAttrs = []; render() { TraceMobx(); const { bindings, layoutFrame } = this.renderData; @@ -188,12 +200,13 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte return this._props.renderDepth > 12 || !layoutFrame || !this.layoutDoc || GetEffectiveAcl(this.layoutDoc) === AclPrivate ? null : ( <ObserverJsxParser key={42} - blacklistedAttrs={emptyPath} + blacklistedAttrs={this.blacklistedAttrs} renderInWrapper={false} components={DocumentContentsView.Components} bindings={bindings} jsx={layoutFrame} showWarnings + // eslint-disable-next-line @typescript-eslint/no-explicit-any onError={(test: any) => { console.log('DocumentContentsView:' + test, bindings, layoutFrame); }} diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 0c5156339..c35a329c9 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { action, computed, makeObservable, observable, runInAction } from 'mobx'; @@ -55,7 +53,7 @@ export class DocumentLinksButton extends ObservableReactComponent<DocumentLinksB @observable public static StartLinkView: DocumentView | undefined = undefined; @observable public static AnnotationId: string | undefined = undefined; @observable public static AnnotationUri: string | undefined = undefined; - constructor(props: any) { + constructor(props: DocumentLinksButtonProps) { super(props); makeObservable(this); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index f09e0c73d..4c357cf45 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,13 +1,12 @@ /* eslint-disable no-use-before-define */ -/* eslint-disable react/jsx-props-no-spreading */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { Property } from 'csstype'; import { Howl } from 'howler'; import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Fade, JackInTheBox } from 'react-awesome-reveal'; -import { ClientUtils, DivWidth, isTargetChildOf as isParentOf, lightOrDark, returnFalse, returnVal, simulateMouseClick } from '../../../ClientUtils'; +import { ClientUtils, DivWidth, isTargetChildOf as isParentOf, lightOrDark, returnFalse, returnVal, simMouseEvent, simulateMouseClick } from '../../../ClientUtils'; import { Utils, emptyFunction } from '../../../Utils'; import { Doc, DocListCast, Field, FieldType, Opt, StrListCast } from '../../../fields/Doc'; import { AclAdmin, AclEdit, AclPrivate, Animation, AudioPlay, DocData, DocViews } from '../../../fields/DocSymbols'; @@ -33,7 +32,7 @@ import { UPDATE_SERVER_CACHE } from '../../util/LinkManager'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { SearchUtil } from '../../util/SearchUtil'; import { SnappingManager } from '../../util/SnappingManager'; -import { UndoManager, undoBatch, undoable } from '../../util/UndoManager'; +import { UndoManager, undoable } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { DocComponent } from '../DocComponent'; @@ -55,13 +54,6 @@ import { PresEffect, PresEffectDirection } from './trails/PresEnums'; import SpringAnimation from './trails/SlideEffect'; import { SpringType, springMappings } from './trails/SpringUtils'; -interface Window { - MediaRecorder: MediaRecorder; -} -declare class MediaRecorder { - constructor(e: any); // whatever MediaRecorder has -} - export interface DocumentViewProps extends FieldViewSharedProps { hideDecorations?: boolean; // whether to suppress all DocumentDecorations when doc is selected hideResizeHandles?: boolean; // whether to suppress resized handles on doc decorations when this document is selected @@ -73,7 +65,7 @@ export interface DocumentViewProps extends FieldViewSharedProps { hideLinkAnchors?: boolean; hideLinkButton?: boolean; hideCaptions?: boolean; - contentPointerEvents?: 'none' | 'all' | undefined; // pointer events allowed for content of a document view. eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents + contentPointerEvents?: Property.PointerEvents | undefined; // pointer events allowed for content of a document view. eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents dontCenter?: 'x' | 'y' | 'xy'; childHideDecorationTitle?: boolean; childHideResizeHandles?: boolean; @@ -89,7 +81,7 @@ export interface DocumentViewProps extends FieldViewSharedProps { dragStarting?: () => void; dragEnding?: () => void; - parent?: any; // parent React component view (see CollectionFreeFormDocumentView) + reactParent?: React.Component; // parent React component view (see CollectionFreeFormDocumentView) } @observer export class DocumentViewInternal extends DocComponent<FieldViewProps & DocumentViewProps>() { @@ -105,7 +97,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document private _disposers: { [name: string]: IReactionDisposer } = {}; private _doubleClickTimeout: NodeJS.Timeout | undefined; - private _singleClickFunc: undefined | (() => any); + private _singleClickFunc: undefined | (() => void); private _longPressSelector: NodeJS.Timeout | undefined; private _downX: number = 0; private _downY: number = 0; @@ -124,7 +116,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document @observable _titleDropDownInnerWidth = 0; // width of menu dropdown when setting doc title @observable _mounted = false; // turn off all pointer events if component isn't yet mounted (enables nested Docs in alternate UI textboxes that appear on hover which otherwise would grab focus from the text box, reverting to the original UI ) @observable _isContentActive: boolean | undefined = undefined; - @observable _pointerEvents: 'none' | 'all' | 'visiblePainted' | undefined = undefined; + @observable _pointerEvents: Property.PointerEvents | undefined = undefined; @observable _componentView: Opt<ViewBoxInterface<FieldViewProps>> = undefined; // needs to be accessed from DocumentView wrapper class @observable _animateScaleTime: Opt<number> = undefined; // milliseconds for animating between views. defaults to 300 if not uset @observable _animateScalingTo = 0; @@ -134,16 +126,16 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document animateScaleTime = () => this._animateScaleTime ?? 100; style = (doc: Doc, sprop: StyleProp | string) => this._props.styleProvider?.(doc, this._props, sprop); - @computed get opacity() { return this.style(this.layoutDoc, StyleProp.Opacity); } // prettier-ignore - @computed get boxShadow() { return this.style(this.layoutDoc, StyleProp.BoxShadow); } // prettier-ignore - @computed get borderRounding() { return this.style(this.layoutDoc, StyleProp.BorderRounding); } // prettier-ignore - @computed get widgetDecorations() { return this.style(this.layoutDoc, StyleProp.Decorations); } // prettier-ignore - @computed get backgroundBoxColor(){ return this.style(this.layoutDoc, StyleProp.BackgroundColor + ':docView'); } // prettier-ignore + @computed get opacity() { return this.style(this.layoutDoc, StyleProp.Opacity) as number; } // prettier-ignore + @computed get boxShadow() { return this.style(this.layoutDoc, StyleProp.BoxShadow) as string; } // prettier-ignore + @computed get borderRounding() { return this.style(this.layoutDoc, StyleProp.BorderRounding) as string; } // prettier-ignore + @computed get widgetDecorations() { return this.style(this.layoutDoc, StyleProp.Decorations) as JSX.Element; } // prettier-ignore + @computed get backgroundBoxColor(){ return this.style(this.layoutDoc, StyleProp.BackgroundColor + ':docView') as string; } // prettier-ignore @computed get showTitle() { return this.style(this.layoutDoc, StyleProp.ShowTitle) as Opt<string>; } // prettier-ignore - @computed get showCaption() { return this.style(this.layoutDoc, StyleProp.ShowCaption) ?? 0; } // prettier-ignore - @computed get headerMargin() { return this.style(this.layoutDoc, StyleProp.HeaderMargin) ?? 0; } // prettier-ignore - @computed get titleHeight() { return this.style(this.layoutDoc, StyleProp.TitleHeight) ?? 0; } // prettier-ignore - @computed get docContents() { return this.style(this.Document, StyleProp.DocContents); } // prettier-ignore + @computed get showCaption() { return this.style(this.layoutDoc, StyleProp.ShowCaption) as string ?? ""; } // prettier-ignore + @computed get headerMargin() { return this.style(this.layoutDoc, StyleProp.HeaderMargin) as number ?? 0; } // prettier-ignore + @computed get titleHeight() { return this.style(this.layoutDoc, StyleProp.TitleHeight) as number ?? 0; } // prettier-ignore + @computed get docContents() { return this.style(this.Document, StyleProp.DocContents) as JSX.Element; } // prettier-ignore @computed get highlighting() { return this.style(this.Document, StyleProp.Highlighting); } // prettier-ignore @computed get borderPath() { return this.style(this.Document, StyleProp.BorderPath); } // prettier-ignore @@ -164,13 +156,13 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document /// disable pointer events on content when there's an enabled onClick script (and not in explore mode) and the contents aren't forced active, or if contents are marked inactive @computed get _contentPointerEvents() { TraceMobx(); - return this._props.contentPointerEvents ?? + return (this._props.contentPointerEvents ?? ((!this.disableClickScriptFunc && // this.onClickHdlr && !SnappingManager.ExploreMode && !this.layoutDoc.layout_isSvg && this.isContentActive() !== true) || - this.isContentActive() === false) + this.isContentActive() === false)) ? 'none' : this._pointerEvents; } @@ -224,7 +216,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document { fireImmediately: true } ); this._disposers.pointerevents = reaction( - () => this.style(this.Document, StyleProp.PointerEvents), + () => this.style(this.Document, StyleProp.PointerEvents) as Property.PointerEvents | undefined, pointerevents => { this._pointerEvents = pointerevents; }, @@ -251,7 +243,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document Object.values(this._disposers).forEach(disposer => disposer?.()); } - startDragging(x: number, y: number, dropAction: dropActionType, hideSource = false) { + startDragging(x: number, y: number, dropAction: dropActionType | undefined, hideSource = false) { const docView = this._docView; if (this._mainCont.current && docView) { const views = DocumentView.Selected().filter(dv => dv.ContentDiv); @@ -318,7 +310,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document const defaultDblclick = this._props.defaultDoubleClick?.() || this.Document.defaultDoubleClick; undoable(() => { if (this.onDoubleClickHdlr?.script) { - this.onDoubleClickHdlr.script.run(scriptProps, console.log).result?.select && this._props.select(false); + const res = this.onDoubleClickHdlr.script.run(scriptProps, console.log).result as { select: boolean }; + res.select && this._props.select(false); } else if (!Doc.IsSystem(this.Document) && defaultDblclick !== 'ignore') { this._props.addDocTab(this.Document, OpenWhere.lightboxAlways); DocumentView.DeselectAll(); @@ -347,7 +340,6 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document if ((clickFunc && waitForDblClick !== 'never') || waitForDblClick === 'always') { this._doubleClickTimeout && clearTimeout(this._doubleClickTimeout); this._doubleClickTimeout = setTimeout(this._singleClickFunc, 300); - // eslint-disable-next-line no-use-before-define } else if (!SnappingManager.LongPress) { this._singleClickFunc(); this._singleClickFunc = undefined; @@ -360,7 +352,6 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document onPointerDown = (e: React.PointerEvent): void => { if (this._props.isGroupActive?.() === GroupActive.child && !this._props.isDocumentActive?.()) return; - // eslint-disable-next-line no-use-before-define this._longPressSelector = setTimeout(() => SnappingManager.LongPress && this._props.select(false), 1000); if (!DocumentView.DownDocView) DocumentView.DownDocView = this._docView; @@ -411,7 +402,6 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document this._doubleTap = (this.onDoubleClickHdlr?.script || this.Document.defaultDoubleClick !== 'ignore') && Date.now() - this._lastTap < ClientUtils.CLICK_TIME; if (!this.isContentActive()) this._lastTap = Date.now(); // don't want to process the start of a double tap if the doucment is selected } - // eslint-disable-next-line no-use-before-define if (SnappingManager.LongPress) e.preventDefault(); }; @@ -450,7 +440,11 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document if (this.Document === Doc.ActiveDashboard) { e.stopPropagation(); e.preventDefault(); - alert((e.target as any)?.closest?.('*.lm_content') ? "You can't perform this move most likely because you didn't drag the document's title bar to enable embedding in a different document." : 'Linking to document tabs not yet supported.'); + alert( + (e.target as HTMLElement)?.closest?.('*.lm_content') + ? "You can't perform this move most likely because you didn't drag the document's title bar to enable embedding in a different document." + : 'Linking to document tabs not yet supported.' + ); return true; } const annoData = de.complete.annoDragData; @@ -506,7 +500,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res; console.log(res); } catch (err) { - console.error('GPT call failed'); + console.error('GPT call failed', err); } }; @@ -532,9 +526,9 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document } const cm = ContextMenu.Instance; - if (!cm || (e as any)?.nativeEvent?.SchemaHandled || SnappingManager.ExploreMode) return; + if (!cm || SnappingManager.ExploreMode) return; - if (e && !(e.nativeEvent as any).dash) { + if (e && !(e.nativeEvent instanceof simMouseEvent ? e.nativeEvent.dash : false)) { const onDisplay = () => { if (this.Document.type !== DocumentType.MAP) DocumentViewInternal.SelectAfterContextMenu && this._props.select(false); // on a mac, the context menu is triggered on mouse down, but a YouTube video becaomes interactive when selected which means that the context menu won't show up. by delaying the selection until hopefully after the pointer up, the context menu will appear. setTimeout(() => simulateMouseClick(document.elementFromPoint(e.clientX, e.clientY), e.clientX, e.clientY, e.screenX, e.screenY)); @@ -562,7 +556,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document if (!this.Document.isFolder) { const templateDoc = Cast(this.Document[StrCast(this.Document.layout_fieldKey)], Doc, null); const appearance = cm.findByDescription('Appearance...'); - const appearanceItems: ContextMenuProps[] = appearance && 'subitems' in appearance ? appearance.subitems : []; + const appearanceItems = appearance?.subitems ?? []; if (this._props.renderDepth === 0) { appearanceItems.splice(0, 0, { description: 'Open in Lightbox', event: () => DocumentView.SetLightboxDoc(this.Document), icon: 'external-link-alt' }); @@ -578,7 +572,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document // creates menu for the user to select how to reveal the flashcards if (this.Document._layout_isFlashcard) { const revealOptions = cm.findByDescription('Reveal Options'); - const revealItems: ContextMenuProps[] = revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : []; + const revealItems = revealOptions?.subitems ?? []; revealItems.push({ description: 'Hover', event: () => { this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover'; }, icon: 'hand-point-up' }); // prettier-ignore revealItems.push({ description: 'Flip', event: () => { this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip'; }, icon: 'rotate' }); // prettier-ignore !revealOptions && cm.addItem({ description: 'Reveal Options', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' }); @@ -586,15 +580,16 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document if (this._props.bringToFront) { const zorders = cm.findByDescription('ZOrder...'); - const zorderItems: ContextMenuProps[] = zorders && 'subitems' in zorders ? zorders.subitems : []; + const zorderItems = zorders?.subitems ?? []; zorderItems.push({ description: 'Bring to Front', event: () => DocumentView.Selected().forEach(dv => dv._props.bringToFront?.(dv.Document, false)), icon: 'arrow-up' }); zorderItems.push({ description: 'Send to Back', event: () => DocumentView.Selected().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( + event: undoable( action(() => { this.layoutDoc._keepZWhenDragged = !this.layoutDoc._keepZWhenDragged; - }) + }), + 'set zIndex drag' ), icon: 'hand-point-up', }); @@ -603,7 +598,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document if (!Doc.IsSystem(this.Document) && !this.Document.hideClickBehaviors && !this._props.hideClickBehaviors) { const existingOnClick = cm.findByDescription('OnClick...'); - const onClicks: ContextMenuProps[] = existingOnClick && 'subitems' in existingOnClick ? existingOnClick.subitems : []; + const onClicks = existingOnClick?.subitems ?? []; onClicks.push({ description: 'Enter Portal', event: undoable(() => DocUtils.makeIntoPortal(this.Document, this.layoutDoc, this._allLinks), 'make into portal'), icon: 'window-restore' }); !Doc.noviceMode && onClicks.push({ description: 'Toggle Detail', event: this.setToggleDetail, icon: 'concierge-bell' }); @@ -628,7 +623,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document } const more = cm.findByDescription('More...'); - const moreItems = more && 'subitems' in more ? more.subitems : []; + const moreItems = more?.subitems ?? []; if (!Doc.IsSystem(this.Document)) { if (!Doc.noviceMode) { moreItems.push({ description: 'Make View of Metadata Field', event: () => Doc.MakeMetadataFieldTemplate(this.Document, this._props.TemplateDataDocument), icon: 'concierge-bell' }); @@ -652,7 +647,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document cm.addItem({ description: 'General...', noexpand: false, subitems: constantItems, icon: 'question' }); const help = cm.findByDescription('Help...'); - const helpItems: ContextMenuProps[] = help && 'subitems' in help ? help.subitems : []; + const helpItems = help?.subitems ?? []; !Doc.noviceMode && helpItems.push({ description: 'Text Shortcuts Ctrl+/', event: () => this._props.addDocTab(Docs.Create.PdfDocument('/assets/cheat-sheet.pdf', { _width: 300, _height: 300 }), OpenWhere.addRight), icon: 'keyboard' }); !Doc.noviceMode && helpItems.push({ description: 'Print Document in Console', event: () => console.log(this.Document), icon: 'hand-point-right' }); !Doc.noviceMode && helpItems.push({ description: 'Print DataDoc in Console', event: () => console.log(this.dataDoc), icon: 'hand-point-right' }); @@ -722,7 +717,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document anchorPanelWidth = () => this._props.PanelWidth() || 1; anchorPanelHeight = () => this._props.PanelHeight() || 1; - anchorStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string): any => { + anchorStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => { // prettier-ignore switch (property.split(':')[0]) { case StyleProp.ShowTitle: return ''; @@ -770,7 +765,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document captionStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => this._props?.styleProvider?.(doc, props, property + ':caption'); fieldsDropdown = (placeholder: string) => ( <div - ref={action((r: any) => { r && (this._titleDropDownInnerWidth = DivWidth(r));} )} // prettier-ignore + ref={r => { r && runInAction(() => (this._titleDropDownInnerWidth = DivWidth(r)));}} // prettier-ignore onPointerDown={action(() => { this._changingTitleField = true; })} // prettier-ignore style={{ width: 'max-content', background: SnappingManager.userBackgroundColor, color: SnappingManager.userColor, transformOrigin: 'left', transform: `scale(${this.titleHeight / 30 /* height of Dropdown */})` }}> <FieldsDropdown @@ -848,7 +843,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document .map(field => Field.toKeyValueString(this.Document, field)) .join('\\') } - SetValue={undoBatch((input: string) => { + SetValue={undoable((input: string) => { if (input?.startsWith('$')) { if (this.layoutDoc.layout_showTitle) { this.layoutDoc._layout_showTitle = input?.substring(1) ? input.substring(1) : undefined; @@ -859,7 +854,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document Doc.SetField(targetDoc, showTitle, input); } return true; - })} + }, 'set title')} /> </div> </div> @@ -897,7 +892,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document const showTitle = this.showTitle?.split(':')[0]; return !DocCast(this.Document) || GetEffectiveAcl(this.dataDoc) === AclPrivate ? null - : this.docContents ?? ( + : (this.docContents ?? ( <div className="documentView-node" id={this.Document.type !== DocumentType.LINK ? this._docView?.DocUniqueId : undefined} @@ -923,27 +918,33 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document )} {this.widgetDecorations ?? null} </div> - ); + )); }; render() { TraceMobx(); const { highlighting, borderPath } = this; + const { highlightIndex, highlightStyle, highlightColor, highlightStroke } = (highlighting as { highlightIndex: number; highlightStyle: string; highlightColor: string; highlightStroke: boolean }) ?? { + highlightIndex: undefined, + highlightStyle: undefined, + highlightColor: undefined, + highlightStroke: undefined, + }; + const { clipPath, jsx } = (borderPath as { clipPath: string; jsx: JSX.Element }) ?? { clipPath: undefined, jsx: undefined }; const boxShadow = !highlighting ? this.boxShadow - : highlighting && this.borderRounding && highlighting.highlightStyle !== 'dashed' - ? `0 0 0 ${highlighting.highlightIndex}px ${highlighting.highlightColor}` + : highlighting && this.borderRounding && highlightStyle !== 'dashed' + ? `0 0 0 ${highlightIndex}px ${highlightColor}` : this.boxShadow || (this.Document.isTemplateForField ? 'black 0.2vw 0.2vw 0.8vw' : undefined); const renderDoc = this.renderDoc({ borderRadius: this.borderRounding, - outline: highlighting && !this.borderRounding && !highlighting.highlightStroke ? `${highlighting.highlightColor} ${highlighting.highlightStyle} ${highlighting.highlightIndex}px` : 'solid 0px', - border: highlighting && this.borderRounding && highlighting.highlightStyle === 'dashed' ? `${highlighting.highlightStyle} ${highlighting.highlightColor} ${highlighting.highlightIndex}px` : undefined, + outline: highlighting && !this.borderRounding && !highlightStroke ? `${highlightColor} ${highlightStyle} ${highlightIndex}px` : 'solid 0px', + border: highlighting && this.borderRounding && highlightStyle === 'dashed' ? `${highlightStyle} ${highlightColor} ${highlightIndex}px` : undefined, boxShadow, - clipPath: borderPath?.clipPath, + clipPath, }); return ( - // eslint-disable-next-line jsx-a11y/click-events-have-key-events <div className={`${DocumentView.ROOT_DIV} docView-hack`} ref={this._mainCont} @@ -957,8 +958,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document borderRadius: this.borderRounding, pointerEvents: this._pointerEvents === 'visiblePainted' ? 'none' : this._pointerEvents, // visible painted means that the underlying doc contents are irregular and will process their own pointer events (otherwise, the contents are expected to fill the entire doc view box so we can handle pointer events here) }}> - {this._componentView?.isUnstyledView?.() || this.Document.type === DocumentType.CONFIG ? renderDoc : DocumentViewInternal.AnimationEffect(renderDoc, this.Document[Animation], this.Document)} - {borderPath?.jsx} + {this._componentView?.isUnstyledView?.() || this.Document.type === DocumentType.CONFIG || !renderDoc ? renderDoc : DocumentViewInternal.AnimationEffect(renderDoc, this.Document[Animation], this.Document)} + {jsx} </div> ); } @@ -968,7 +969,22 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document * @param presEffectDoc presentation effects document that specifies the animation effect parameters * @returns a function that will wrap a JSX animation element wrapping any JSX element */ - public static AnimationEffect(renderDoc: JSX.Element, presEffectDoc: Opt<Doc>, root: Doc) { + public static AnimationEffect( + renderDoc: JSX.Element, + presEffectDoc: Opt< + | Doc + | { + presentation_effectDirection?: string; + followLinkAnimDirection?: string; + presentation_transition?: number; + followLinkTransitionTime?: number; + presentation_effectTiming?: number; + presentation_effect?: string; + followLinkAnimEffect?: string; + } + >, + root: Doc + ) { const dir = ((presEffectDoc?.presentation_effectDirection ?? presEffectDoc?.followLinkAnimDirection) || PresEffectDirection.Center) as PresEffectDirection; const duration = Cast(presEffectDoc?.presentation_transition, 'number', Cast(presEffectDoc?.followLinkTransitionTime, 'number', null)); const effectProps = { @@ -982,7 +998,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document }; const timing = StrCast(presEffectDoc?.presentation_effectTiming); - const timingConfig = (timing ? JSON.parse(timing) : undefined) ?? { + const timingConfig = (timing ? JSON.parse(timing) : undefined) ?? { type: SpringType.GENTLE, ...springMappings.gentle, }; @@ -1054,7 +1070,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { public static allViews: () => DocumentView[]; public static addView: (dv: DocumentView) => void | undefined; public static removeView: (dv: DocumentView) => void | undefined; - public static addViewRenderedCb: (doc: Opt<Doc>, func: (dv: DocumentView) => any) => boolean; + public static addViewRenderedCb: (doc: Opt<Doc>, func: (dv: DocumentView) => void) => boolean; public static getViews = (doc?: Doc) => Array.from(doc?.[DocViews] ?? []) as DocumentView[]; public static getFirstDocumentView: (toFind: Doc) => DocumentView | undefined; public static getDocumentView: (target: Doc | undefined, preferredCollection?: DocumentView) => Opt<DocumentView>; @@ -1107,7 +1123,8 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { @observable private _htmlOverlayText: Opt<string> = undefined; @observable private _isHovering = false; @observable private _selected = false; - @observable public static CurrentlyPlaying: DocumentView[] = []; // audio or video media views that are currently playing + @observable public static CurrentlyPlaying: DocumentView[] = []; // audio or video media views that are currently playing + @observable public TagPanelHeight = 0; @computed private get shouldNotScale() { return (this.layout_fitWidth && !this.nativeWidth) || this.ComponentView?.isUnstyledView?.(); @@ -1228,7 +1245,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { public setToggleDetail = (scriptFieldKey = 'onClick') => this._docViewInternal?.setToggleDetail(scriptFieldKey); public onContextMenu = (e?: React.MouseEvent, pageX?: number, pageY?: number) => this._docViewInternal?.onContextMenu?.(e, pageX, pageY); public cleanupPointerEvents = () => this._docViewInternal?.cleanupPointerEvents(); - public startDragging = (x: number, y: number, dropAction: dropActionType, hideSource = false) => this._docViewInternal?.startDragging(x, y, dropAction, hideSource); + public startDragging = (x: number, y: number, dropAction: dropActionType | undefined, hideSource = false) => this._docViewInternal?.startDragging(x, y, dropAction, hideSource); public showContextMenu = (pageX: number, pageY: number) => this._docViewInternal?.onContextMenu(undefined, pageX, pageY); public toggleNativeDimensions = () => this._docViewInternal && this.Document.type !== DocumentType.INK && Doc.toggleNativeDimensions(this.layoutDoc, this.NativeDimScaling() ?? 1, this._props.PanelWidth(), this._props.PanelHeight()); @@ -1254,7 +1271,6 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { } public playAnnotation = () => { - const self = this; const audioAnnoState = this.dataDoc.audioAnnoState ?? AudioAnnoState.stopped; const audioAnnos = Cast(this.dataDoc[this.LayoutFieldKey + '_audioAnnotations'], listSpec(AudioField), null); const anno = audioAnnos?.lastElement(); @@ -1267,12 +1283,12 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { autoplay: true, loop: false, volume: 0.5, - onend: action(() => { self.dataDoc.audioAnnoState = AudioAnnoState.stopped; }), // prettier-ignore + onend: action(() => { this.dataDoc.audioAnnoState = AudioAnnoState.stopped; }), // prettier-ignore }); this.dataDoc.audioAnnoState = AudioAnnoState.playing; break; case AudioAnnoState.playing: - this.dataDoc[AudioPlay]?.stop(); + (this.dataDoc[AudioPlay] as Howl)?.stop(); this.dataDoc.audioAnnoState = AudioAnnoState.stopped; break; default: @@ -1426,9 +1442,10 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { <div className="documentView-htmlOverlayInner" style={{ transition: `all 500ms`, opacity: this._enableHtmlOverlayTransitions ? 0.9 : 0 }}> {DocumentViewInternal.AnimationEffect( <div className="webBox-textHighlight"> + {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */} <ObserverJsxParser autoCloseVoidElements key={42} onError={(e: any) => console.log('PARSE error', e)} renderInWrapper={false} jsx={StrCast(this._htmlOverlayText)} /> </div>, - { ...(this._htmlOverlayEffect ?? {}), presentation_effect: effect ?? PresEffect.Expand } as any as Doc, + { ...(this._htmlOverlayEffect ?? {}), presentation_effect: effect ?? PresEffect.Expand }, this.Document )} </div> @@ -1457,11 +1474,11 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { style={{ transform: `translate(${this.centeringX}px, ${this.centeringY}px)`, width: xshift ?? `${this._props.PanelWidth() - this.Xshift * 2}px`, - height: this._props.forceAutoHeight ? undefined : yshift ?? (this.layout_fitWidth ? `${this.panelHeight}px` : `${(this.effectiveNativeHeight / this.effectiveNativeWidth) * this._props.PanelWidth()}px`), + height: this._props.forceAutoHeight ? undefined : (yshift ?? (this.layout_fitWidth ? `${this.panelHeight}px` : `${(this.effectiveNativeHeight / this.effectiveNativeWidth) * this._props.PanelWidth()}px`)), }}> <DocumentViewInternal {...this._props} - parent={undefined} + reactParent={undefined} isHovering={this.isHovering} fieldKey={this.LayoutFieldKey} DataTransition={this.DataTransition} @@ -1519,7 +1536,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { ) ); } - // eslint-disable-next-line default-param-last + public static FocusOrOpen(docIn: Doc, optionsIn: FocusViewOptions = { willZoomCentered: true, zoomScale: 0, openLocation: OpenWhere.toggleRight }, containingDoc?: Doc) { let doc = docIn; const options = optionsIn; diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx index 1f5c9b84b..fefe25764 100644 --- a/src/client/views/nodes/EquationBox.tsx +++ b/src/client/views/nodes/EquationBox.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ import { action, makeObservable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -50,8 +49,8 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() { () => this._props.isSelected(), selected => { if (this._ref.current) { - if (selected) this._ref.current.element.current.children[0].addEventListener('keydown', this.keyPressed, true); - else this._ref.current.element.current.children[0].removeEventListener('keydown', this.keyPressed); + if (selected) (this._ref.current.element.current?.children[0] as HTMLElement).addEventListener('keydown', this.keyPressed, true); + else (this._ref.current.element.current?.children[0] as HTMLElement).removeEventListener('keydown', this.keyPressed); } }, { fireImmediately: true } @@ -60,8 +59,8 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() { @action keyPressed = (e: KeyboardEvent) => { - const _height = DivHeight(this._ref.current!.element.current); - const _width = DivWidth(this._ref.current!.element.current); + const _height = DivHeight(this._ref.current!.element?.current); + const _width = DivWidth(this._ref.current!.element?.current); if (e.key === 'Enter') { const nextEq = Docs.Create.EquationDocument(e.shiftKey ? StrCast(this.dataDoc.text) : 'x', { title: '# math', @@ -95,7 +94,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() { }; updateSize = () => { - const style = this._ref.current && getComputedStyle(this._ref.current.element.current); + const style = this._ref.current?.element.current && getComputedStyle(this._ref.current.element.current); if (style?.width.endsWith('px') && style?.height.endsWith('px')) { if (this.layoutDoc._nativeWidth) { // if equation has been scaled then editing the expression must also edit the native dimensions to keep the aspect ratio diff --git a/src/client/views/nodes/FaceRectangle.tsx b/src/client/views/nodes/FaceRectangle.tsx deleted file mode 100644 index 2b66b83fe..000000000 --- a/src/client/views/nodes/FaceRectangle.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { observable, runInAction } from 'mobx'; -import { observer } from 'mobx-react'; -import * as React from 'react'; -import { RectangleTemplate } from './FaceRectangles'; - -@observer -export default class FaceRectangle extends React.Component<{ rectangle: RectangleTemplate }> { - @observable private opacity = 0; - - componentDidMount() { - setTimeout( - () => - runInAction(() => { - this.opacity = 1; - }), - 500 - ); - } - - render() { - const { rectangle } = this.props; - return ( - <div - style={{ - ...rectangle.style, - opacity: this.opacity, - transition: '1s ease opacity', - position: 'absolute', - borderRadius: 5, - }} - /> - ); - } -} diff --git a/src/client/views/nodes/FaceRectangles.tsx b/src/client/views/nodes/FaceRectangles.tsx deleted file mode 100644 index ade4225d9..000000000 --- a/src/client/views/nodes/FaceRectangles.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { observer } from 'mobx-react'; -import * as React from 'react'; -import { Doc, DocListCast } from '../../../fields/Doc'; -import { Id } from '../../../fields/FieldSymbols'; -import { Cast, NumCast } from '../../../fields/Types'; -import FaceRectangle from './FaceRectangle'; - -interface FaceRectanglesProps { - document: Doc; - color: string; - backgroundColor: string; -} - -export interface RectangleTemplate { - id: string; - style: Partial<React.CSSProperties>; -} - -@observer -export class FaceRectangles extends React.Component<FaceRectanglesProps> { - render() { - const faces = DocListCast(this.props.document.faces); - const templates: RectangleTemplate[] = faces.map(faceDoc => { - const rectangle = Cast(faceDoc.faceRectangle, Doc) as Doc; - const style = { - top: NumCast(rectangle.top), - left: NumCast(rectangle.left), - width: NumCast(rectangle.width), - height: NumCast(rectangle.height), - backgroundColor: `${this.props.backgroundColor}33`, - border: `solid 2px ${this.props.color}`, - } as React.CSSProperties; - return { - id: rectangle[Id], - style: style, - }; - }); - return ( - <div> - {templates.map(rectangle => ( - <FaceRectangle key={rectangle.id} rectangle={rectangle} /> - ))} - </div> - ); - } -} diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 818d26956..dd71fd946 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -1,10 +1,11 @@ /* eslint-disable react/no-unused-prop-types */ /* eslint-disable react/require-default-props */ +import { Property } from 'csstype'; import { computed } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { DateField } from '../../../fields/DateField'; -import { Doc, Field, Opt } from '../../../fields/Doc'; +import { Doc, Field, FieldType, Opt } from '../../../fields/Doc'; import { List } from '../../../fields/List'; import { ScriptField } from '../../../fields/ScriptField'; import { WebField } from '../../../fields/URLField'; @@ -18,7 +19,26 @@ import { OpenWhere } from './OpenWhere'; export type FocusFuncType = (doc: Doc, options: FocusViewOptions) => Opt<number>; // eslint-disable-next-line no-use-before-define -export type StyleProviderFuncType = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => any; +export type StyleProviderFuncType = ( + doc: Opt<Doc>, + props: Opt<FieldViewProps>, + property: string +) => + | Opt<FieldType> + | { clipPath: string; jsx: JSX.Element } + | JSX.Element + | JSX.IntrinsicElements + | null + | { + [key: string]: + | { + color: string; + icon: JSX.Element | string; + } + | undefined; + } + | { highlightStyle: string; highlightColor: string; highlightIndex: number; highlightStroke: boolean } + | undefined; // // these properties get assigned through the render() method of the DocumentView when it creates this node. // However, that only happens because the properties are "defined" in the markup for the field view. @@ -30,7 +50,7 @@ export interface FieldViewSharedProps { LayoutTemplateString?: string; LayoutTemplate?: () => Opt<Doc>; renderDepth: number; - scriptContext?: any; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document + scriptContext?: unknown; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document xPadding?: number; yPadding?: number; dontRegisterView?: boolean; @@ -45,7 +65,7 @@ export interface FieldViewSharedProps { containerViewPath?: () => DocumentView[]; fitContentsToBox?: () => boolean; // used by freeformview to fit its contents to its panel. corresponds to _freeform_fitContentsToBox property on a Document isGroupActive?: () => string | undefined; // is this document part of a group that is active - setContentViewBox?: (view: ViewBoxInterface<any>) => any; // called by rendered field's viewBox so that DocumentView can make direct calls to the viewBox + setContentViewBox?: (view: ViewBoxInterface<FieldViewProps>) => void; // called by rendered field's viewBox so that DocumentView can make direct calls to the viewBox PanelWidth: () => number; PanelHeight: () => number; isDocumentActive?: () => boolean | undefined; // whether a document should handle pointer events @@ -76,7 +96,7 @@ export interface FieldViewSharedProps { bringToFront?: (doc: Doc, sendToBack?: boolean) => void; waitForDoubleClickToClick?: () => 'never' | 'always' | undefined; defaultDoubleClick?: () => 'default' | 'ignore' | undefined; - pointerEvents?: () => Opt<string>; + pointerEvents?: () => Opt<Property.PointerEvents>; suppressSetHeight?: boolean; } diff --git a/src/client/views/nodes/FontIconBox/ButtonInterface.ts b/src/client/views/nodes/FontIconBox/ButtonInterface.ts deleted file mode 100644 index 0d0d7b1c3..000000000 --- a/src/client/views/nodes/FontIconBox/ButtonInterface.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { IconProp } from '@fortawesome/fontawesome-svg-core'; -import { Doc } from '../../../../fields/Doc'; -import { ButtonType } from './FontIconBox'; - -export interface IButtonProps { - type: string | ButtonType; - Document: Doc; - label: any; - icon: IconProp; - color: string; - backgroundColor: string; -} diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx index 8317d62a6..1d84f13df 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx @@ -73,12 +73,12 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { Icon = (color: string, iconFalse?: boolean) => { let icon; if (iconFalse) { - icon = StrCast(this.dataDoc[this.fieldKey ?? 'iconFalse'] ?? this.dataDoc.icon, 'user') as any; + icon = StrCast(this.dataDoc[this.fieldKey ?? 'iconFalse'] ?? this.dataDoc.icon, 'user') as IconProp; if (icon) return <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />; return null; } - icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any; - return !icon ? null : icon === 'pres-trail' ? TrailsIcon(color) : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />; + icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as IconProp; + return !icon ? null : icon === ('pres-trail' as IconProp) ? TrailsIcon(color) : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />; }; @computed get dropdown() { return BoolCast(this.Document.dropDownOpen); @@ -117,7 +117,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { break; } // prettier-ignore const numScript = (value?: number) => ScriptCast(this.Document.script).script.run({ this: this.Document, value, _readOnly_: value === undefined }); - const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); + const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string; // Script for checking the outcome of the toggle const checkResult = Number(Number(numScript().result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3))); @@ -142,7 +142,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { setupMoveUpEvents( this, e, - () => ScriptCast(this.Document.onDragScript)?.script.run({ this: this.Document, value: { doc: value, e } }).result, + () => ScriptCast(this.Document.onDragScript)?.script.run({ this: this.Document, value: { doc: value, e } }).result as boolean, emptyFunction, emptyFunction ); // prettier-ignore @@ -157,11 +157,11 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { let noviceList: string[] = []; let text: string | undefined; - let getStyle: (val: string) => any = () => {}; + let getStyle: (val: string) => { [key: string]: string } = () => ({}); let icon: IconProp = 'caret-down'; const isViewDropdown = script?.script.originalScript.startsWith('{ return setView'); if (isViewDropdown) { - const selected = Array.from(script?.script.run({ _readOnly_: true }).result) as Doc[]; + const selected = Array.from(script?.script.run({ _readOnly_: true }).result as Doc[]); // const selected = DocumentView.SelectedDocs(); if (selected.lastElement()) { if (StrCast(selected.lastElement().type) === DocumentType.COL) { @@ -190,7 +190,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { } noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Carousel3D, CollectionViewType.Stacking, CollectionViewType.NoteTaking]; } else { - text = script?.script.run({ this: this.Document, value: '', _readOnly_: true }).result; + text = script?.script.run({ this: this.Document, value: '', _readOnly_: true }).result as string; // text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily); // getStyle = (val: string) => ({ fontFamily: val }); } @@ -231,8 +231,8 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { * Color button */ @computed get colorButton() { - const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); - const curColor = this.colorScript?.script.run({ this: this.Document, value: undefined, _readOnly_: true }).result ?? 'transparent'; + const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string; + const curColor = (this.colorScript?.script.run({ this: this.Document, value: undefined, _readOnly_: true }).result as string) ?? 'transparent'; const tooltip: string = StrCast(this.Document.toolTip); return ( @@ -251,7 +251,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { type={Type.PRIM} color={color} background={SnappingManager.userBackgroundColor} - icon={this.Icon(color)!} + icon={this.Icon(color) ?? undefined} tooltip={tooltip} label={this.label} /> @@ -262,9 +262,9 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { const tooltip: string = StrCast(this.Document.toolTip); const script = ScriptCast(this.Document.onClick)?.script; - const toggleStatus = script?.run({ this: this.Document, self: this.Document, value: undefined, _readOnly_: true }).result; + const toggleStatus = script?.run({ this: this.Document, self: this.Document, value: undefined, _readOnly_: true }).result as boolean; // Colors - const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); + const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string; const items = DocListCast(this.dataDoc.data); const multiDoc = this.Document; return ( @@ -272,13 +272,13 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { tooltip={`Toggle ${tooltip}`} type={Type.PRIM} color={color} - onPointerDown={e => script && !toggleStatus && setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => script.run({ this: multiDoc, value: undefined, _readOnly_: false }))} + onPointerDown={e => script && !toggleStatus && setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => script.run({ this: multiDoc, value: undefined, _readOnly_: false }))} isToggle={script ? true : false} toggleStatus={toggleStatus} //background={SnappingManager.userBackgroundColor} label={this.label} items={DocListCast(this.dataDoc.data).map(item => ({ - icon: <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={StrCast(item.icon) as any} color={color} />, + icon: <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={StrCast(item.icon) as IconProp} color={color} />, tooltip: StrCast(item.toolTip), val: StrCast(item.toolType), }))} @@ -300,9 +300,9 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { const script = ScriptCast(this.Document.onClick); const double = ScriptCast(this.Document.onDoubleClick); - const toggleStatus = script?.script.run({ this: this.Document, value: undefined, _readOnly_: true }).result ?? false; + const toggleStatus = (script?.script.run({ this: this.Document, value: undefined, _readOnly_: true }).result as boolean) ?? false; // Colors - const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); + const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string; // const backgroundColor = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor); return ( @@ -337,30 +337,30 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { * Default */ @computed get defaultButton() { - const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); - const tooltip: string = StrCast(this.Document.toolTip); + const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string; + const tooltip = StrCast(this.Document.toolTip); - return <IconButton tooltip={tooltip} icon={this.Icon(color)!} label={this.label} />; + return <IconButton tooltip={tooltip} icon={this.Icon(color) ?? undefined} label={this.label} />; } @computed get editableText() { const script = ScriptCast(this.Document.script); const checkResult = script?.script.run({ this: this.Document, value: '', _readOnly_: true }).result; - const setValue = (value: string): boolean => script?.script.run({ this: this.Document, value, _readOnly_: false }).result; + const setValue = (value: string) => script?.script.run({ this: this.Document, value, _readOnly_: false }).result as boolean; return ( <div className="menuButton editableText"> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon="lock" /> <div style={{ width: 'calc(100% - .875em)', paddingLeft: '4px' }}> - <EditableView GetValue={() => script?.script.run({ this: this.Document, value: '', _readOnly_: true }).result} SetValue={setValue} oneLine contents={checkResult} /> + <EditableView GetValue={() => script?.script.run({ this: this.Document, value: '', _readOnly_: true }).result as string} SetValue={setValue} oneLine contents={checkResult} /> </div> </div> ); } renderButton = () => { - const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); + const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string; const tooltip = StrCast(this.Document.toolTip); const scriptFunc = () => ScriptCast(this.Document.onClick)?.script.run({ this: this.Document, _readOnly_: false }); const btnProps = { tooltip, icon: this.Icon(color)!, label: this.label }; diff --git a/src/client/views/nodes/FunctionPlotBox.tsx b/src/client/views/nodes/FunctionPlotBox.tsx index 3d1bd7563..6b439cd64 100644 --- a/src/client/views/nodes/FunctionPlotBox.tsx +++ b/src/client/views/nodes/FunctionPlotBox.tsx @@ -1,4 +1,4 @@ -import functionPlot from 'function-plot'; +import functionPlot, { Chart } from 'function-plot'; import { computed, makeObservable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -22,11 +22,11 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps> return FieldView.LayoutString(FunctionPlotBox, fieldKey); } public static GraphCount = 0; - _plot: any; + _plot: Chart | undefined; _plotId = ''; - _plotEle: any; + _plotEle: HTMLDivElement | null = null; - constructor(props: any) { + constructor(props: FieldViewProps) { super(props); makeObservable(this); this._plotId = 'graph' + FunctionPlotBox.GraphCount++; @@ -42,8 +42,10 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps> getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { const anchor = Docs.Create.ConfigDocument({ annotationOn: this.Document }); PinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), datarange: true } }, this.Document); - anchor.config_xRange = new List<number>(Array.from(this._plot.options.xAxis.domain)); - anchor.config_yRange = new List<number>(Array.from(this._plot.options.yAxis.domain)); + if (this._plot) { + anchor.config_xRange = new List<number>(Array.from(this._plot.options.xAxis?.domain ?? [])); + anchor.config_yRange = new List<number>(Array.from(this._plot.options.yAxis?.domain ?? [])); + } if (addAsAnnotation) this.addDocument(anchor); return anchor; }; @@ -68,9 +70,9 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps> const width = this._props.PanelWidth(); const height = this._props.PanelHeight(); try { - this._plotEle.children.length && this._plotEle.removeChild(this._plotEle.children[0]); + this._plotEle?.children.length && this._plotEle.removeChild(this._plotEle.children[0]); this._plot = functionPlot({ - target: '#' + this._plotEle.id, + target: '#' + this._plotEle?.id, width, height, xAxis: { domain: Cast(this.layoutDoc.xRange, listSpec('number'), [-10, 10]) }, @@ -104,7 +106,7 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps> return false; }; - _dropDisposer: any; + _dropDisposer: DragManager.DragDropDisposer | undefined; protected createDropTarget = (ele: HTMLDivElement) => { this._dropDisposer?.(); if (ele) { diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index d940a96b9..d0a7fc6ac 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -1,6 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; -import zIndex from '@mui/material/styles/zIndex'; import { Colors } from 'browndash-components'; import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction } from 'mobx'; import { observer } from 'mobx-react'; @@ -11,7 +10,6 @@ import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { InkTool } from '../../../fields/InkField'; -import { List } from '../../../fields/List'; import { ObjectField } from '../../../fields/ObjectField'; import { Cast, ImageCast, NumCast, StrCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; @@ -22,6 +20,7 @@ import { DocumentType } from '../../documents/DocumentTypes'; import { DocUtils } from '../../documents/DocUtils'; import { Networking } from '../../Network'; import { DragManager } from '../../util/DragManager'; +import { SnappingManager } from '../../util/SnappingManager'; import { undoBatch } from '../../util/UndoManager'; import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView'; import { ContextMenu } from '../ContextMenu'; @@ -75,7 +74,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { private _marqueeref = React.createRef<MarqueeAnnotator>(); private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); - @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); + @observable _savedAnnotations = new ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>(); @observable _curSuffix = ''; @observable _error = ''; @observable _isHovering = false; // flag to switch between primary and alternate images on hover @@ -175,10 +174,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(targetDoc), this.fieldKey); } } - const layoutDoc = de.complete.docDragData?.draggedDocuments[0]; - const targetField = Doc.LayoutFieldKey(layoutDoc); - const targetDoc = layoutDoc[DocData]; - console.log(targetDoc[targetField]); added === false && e.preventDefault(); added !== undefined && e.stopPropagation(); return added; @@ -334,7 +329,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }) } style={{ - display: (this._props.isContentActive() !== false && DragManager.DocDragData?.canEmbed) || this.dataDoc[this.fieldKey + '_alternates'] ? 'block' : 'none', + display: (this._props.isContentActive() !== false && SnappingManager.CanEmbed) || this.dataDoc[this.fieldKey + '_alternates'] ? 'block' : 'none', width: 'min(10%, 25px)', height: 'min(10%, 25px)', background: usePath === undefined ? 'white' : usePath === 'alternate' ? 'black' : 'gray', @@ -352,7 +347,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const defaultUrl = new URL(ClientUtils.prepend('/assets/unknown-file-icon-hi.png')); const altpaths = alts - ?.map(doc => (doc instanceof Doc ? ImageCast(doc[Doc.LayoutFieldKey(doc)])?.url ?? defaultUrl : defaultUrl)) + ?.map(doc => (doc instanceof Doc ? (ImageCast(doc[Doc.LayoutFieldKey(doc)])?.url ?? defaultUrl) : defaultUrl)) .filter(url => url) .map(url => this.choosePath(url)) ?? []; // acc ess the primary layout data of the alternate documents const paths = field ? [this.choosePath(field.url), ...altpaths] : altpaths; @@ -362,7 +357,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { @computed get content() { TraceMobx(); - const backColor = DashColor(this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) ?? Colors.WHITE); + const backColor = DashColor((this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string) ?? Colors.WHITE); const backAlpha = backColor.red() === 0 && backColor.green() === 0 && backColor.blue() === 0 ? backColor.alpha() : 1; const srcpath = this.layoutDoc.hideImage ? '' : this.paths[0]; const fadepath = this.layoutDoc.hideImage ? '' : this.paths.lastElement(); @@ -462,7 +457,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { savedAnnotations = () => this._savedAnnotations; render() { TraceMobx(); - const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding); + const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding) as string; const borderRadius = borderRad?.includes('px') ? `${Number(borderRad.split('px')[0]) / (this._props.NativeDimScaling?.() || 1)}px` : borderRad; return ( <div diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index 66e210c03..95e344004 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jsx-a11y/control-has-associated-label */ import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -15,7 +14,6 @@ import { SetupDrag } from '../../util/DragManager'; import { CompiledScript } from '../../util/Scripting'; import { undoable } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; -import { ContextMenuProps } from '../ContextMenuItem'; import { ViewBoxBaseComponent } from '../DocComponent'; import { DocumentIconContainer } from './DocumentIcon'; import { FieldView, FieldViewProps } from './FieldView'; @@ -35,7 +33,7 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() { public static LayoutString() { return FieldView.LayoutString(KeyValueBox, 'data'); } - constructor(props: any) { + constructor(props: FieldViewProps) { super(props); makeObservable(this); } @@ -88,7 +86,7 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() { const type: 'computed' | 'script' | false = rawvalue.startsWith(':=') ? 'computed' : rawvalue.startsWith('$=') ? 'script' : false; rawvalue = type ? rawvalue.substring(2) : rawvalue; rawvalue = rawvalue.replace(/.*\(\((.*)\)\)/, 'dashCallChat(_setCacheResult_, this, `$1`)'); - const value = ["'", '"', '`'].includes(rawvalue.length ? rawvalue[0] : '') || !isNaN(rawvalue as any) ? rawvalue : '`' + rawvalue + '`'; + const value = ["'", '"', '`'].includes(rawvalue.length ? rawvalue[0] : '') || !isNaN(+rawvalue) ? rawvalue : '`' + rawvalue + '`'; let script = ScriptField.CompileScript(rawvalue, {}, true, undefined, DocumentIconContainer.getTransformer()); if (!script.compiled) { @@ -116,7 +114,7 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() { if (key) target[key] = script.originalScript; return false; } - field === undefined && (field = res.result instanceof Array ? new List<any>(res.result) : res.result); + field === undefined && (field = res.result instanceof Array ? new List<FieldType>(res.result) : (res.result as FieldType)); } } if (!key) return false; @@ -165,7 +163,6 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() { const rows: JSX.Element[] = []; let i = 0; - const self = this; const keys = Object.keys(ids).slice(); // for (const key of [...keys.filter(id => id !== 'layout' && !id.includes('_')).sort(), ...keys.filter(id => id === 'layout' || id.includes('_')).sort()]) { const sortedKeys = keys.sort((a: string, b: string) => { @@ -184,12 +181,12 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() { addDocTab={this._props.addDocTab} PanelWidth={this._props.PanelWidth} PanelHeight={this.rowHeight} - ref={(function () { + ref={(() => { let oldEl: KeyValuePair | undefined; return (el: KeyValuePair) => { - if (oldEl) self.rows.splice(self.rows.indexOf(oldEl), 1); + if (oldEl) this.rows.splice(this.rows.indexOf(oldEl), 1); oldEl = el; - if (el) self.rows.push(el); + if (el) this.rows.push(el); }; })()} keyWidth={100 - this._splitPercentage} @@ -298,7 +295,7 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() { specificContextMenu = (): void => { const cm = ContextMenu.Instance; const open = cm.findByDescription('Change Perspective...'); - const openItems: ContextMenuProps[] = open && 'subitems' in open ? open.subitems : []; + const openItems = open?.subitems ?? []; openItems.push({ description: 'Default Perspective', event: () => { diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index 0956be3e9..85aff04c3 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -1,15 +1,14 @@ -/* eslint-disable jsx-a11y/control-has-associated-label */ import { Tooltip } from '@mui/material'; import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../ClientUtils'; +import { returnEmptyFilter, returnFalse, returnZero } from '../../../ClientUtils'; import { emptyFunction } from '../../../Utils'; -import { Doc, Field } from '../../../fields/Doc'; +import { Doc, Field, returnEmptyDoclist } from '../../../fields/Doc'; import { DocCast } from '../../../fields/Types'; import { DocumentOptions, FInfo } from '../../documents/Documents'; import { Transform } from '../../util/Transform'; -import { undoBatch } from '../../util/UndoManager'; +import { undoable } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { EditableView } from '../EditableView'; import { ObservableReactComponent } from '../ObservableReactComponent'; @@ -34,7 +33,7 @@ export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> { @observable private isPointerOver = false; @observable public isChecked = false; private checkbox = React.createRef<HTMLInputElement>(); - constructor(props: any) { + constructor(props: KeyValuePairProps) { super(props); makeObservable(this); } @@ -91,11 +90,11 @@ export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> { type="button" style={hover} className="keyValuePair-td-key-delete" - onClick={undoBatch(() => { + onClick={undoable(() => { if (Object.keys(this._props.doc).indexOf(this._props.keyName) !== -1) { delete this._props.doc[this._props.keyName]; } else delete DocCast(this._props.doc.proto)?.[this._props.keyName]; - })}> + }, 'set key value')}> X </button> <input className="keyValuePair-td-key-check" type="checkbox" style={hover} onChange={this.handleCheck} ref={this.checkbox} /> @@ -111,7 +110,7 @@ export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> { <td className="keyValuePair-td-value" style={{ width: `${100 - this._props.keyWidth}%` }} onContextMenu={this.onContextMenu}> <div className="keyValuePair-td-value-container"> <EditableView - contents={undefined} + contents={''} fieldContents={{ Document: this._props.doc, childFilters: returnEmptyFilter, diff --git a/src/client/views/nodes/LabelBigText.js b/src/client/views/nodes/LabelBigText.js deleted file mode 100644 index 290152cd0..000000000 --- a/src/client/views/nodes/LabelBigText.js +++ /dev/null @@ -1,270 +0,0 @@ -/* -Brorlandi/big-text.js v1.0.0, 2017 -Adapted from DanielHoffmann/jquery-bigtext, v1.3.0, May 2014 -And from Jetroid/bigtext.js v1.0.0, September 2016 - -Usage: -BigText("#myElement",{ - rotateText: {Number}, (null) - fontSizeFactor: {Number}, (0.8) - maximumFontSize: {Number}, (null) - limitingDimension: {String}, ("both") - horizontalAlign: {String}, ("center") - verticalAlign: {String}, ("center") - textAlign: {String}, ("center") - whiteSpace: {String}, ("nowrap") -}); - - -Original Projects: -https://github.com/DanielHoffmann/jquery-bigtext -https://github.com/Jetroid/bigtext.js - -Options: - -rotateText: Rotates the text inside the element by X degrees. - -fontSizeFactor: This option is used to give some vertical spacing for letters that overflow the line-height (like 'g', 'Á' and most other accentuated uppercase letters). This does not affect the font-size if the limiting factor is the width of the parent div. The default is 0.8 - -maximumFontSize: maximum font size to use. - -minimumFontSize: minimum font size to use. if font is calculated smaller than this, text will be rendered at this size and wrapped - -limitingDimension: In which dimension the font size should be limited. Possible values: "width", "height" or "both". Defaults to both. Using this option with values different than "both" overwrites the element parent width or height. - -horizontalAlign: Where to align the text horizontally. Possible values: "left", "center", "right". Defaults to "center". - -verticalAlign: Where to align the text vertically. Possible values: "top", "center", "bottom". Defaults to "center". - -textAlign: Sets the text align of the element. Possible values: "left", "center", "right". Defaults to "center". This option is only useful if there are linebreaks (<br> tags) inside the text. - -whiteSpace: Sets whitespace handling. Possible values: "nowrap", "pre". Defaults to "nowrap". (Can also be set to enable wrapping but this doesn't work well.) - -Bruno Orlandi - 2017 - -Copyright (C) 2013 Daniel Hoffmann Bernardes, Ícaro Technologies -Copyright (C) 2016 Jet Holt - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -*/ - -function _calculateInnerDimensions(computedStyle) { - //Calculate the inner width and height - var innerWidth; - var innerHeight; - - var width = parseInt(computedStyle.getPropertyValue("width")); - var height = parseInt(computedStyle.getPropertyValue("height")); - var paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left")); - var paddingRight = parseInt(computedStyle.getPropertyValue("padding-right")); - var paddingTop = parseInt(computedStyle.getPropertyValue("padding-top")); - var paddingBottom = parseInt(computedStyle.getPropertyValue("padding-bottom")); - var borderLeft = parseInt(computedStyle.getPropertyValue("border-left-width")); - var borderRight = parseInt(computedStyle.getPropertyValue("border-right-width")); - var borderTop = parseInt(computedStyle.getPropertyValue("border-top-width")); - var borderBottom = parseInt(computedStyle.getPropertyValue("border-bottom-width")); - - //If box-sizing is border-box, we need to subtract padding and border. - var parentBoxSizing = computedStyle.getPropertyValue("box-sizing"); - if (parentBoxSizing == "border-box") { - innerWidth = width - (paddingLeft + paddingRight + borderLeft + borderRight); - innerHeight = height - (paddingTop + paddingBottom + borderTop + borderBottom); - } else { - innerWidth = width; - innerHeight = height; - } - var obj = {}; - obj["width"] = innerWidth; - obj["height"] = innerHeight; - return obj; -} - -export default function BigText(element, options) { - - if (typeof element === 'string') { - element = document.querySelector(element); - } else if (element.length) { - // Support for array based queries (such as jQuery) - element = element[0]; - } - - var defaultOptions = { - rotateText: null, - fontSizeFactor: 0.8, - maximumFontSize: null, - limitingDimension: "both", - horizontalAlign: "center", - verticalAlign: "center", - textAlign: "center", - whiteSpace: "nowrap", - singleLine: true - }; - - //Merge provided options and default options - options = options || {}; - for (var opt in defaultOptions) - if (defaultOptions.hasOwnProperty(opt) && !options.hasOwnProperty(opt)) - options[opt] = defaultOptions[opt]; - - //Get variables which we will reference frequently - var style = element.style; - var parent = element.parentNode; - var parentStyle = parent.style; - var parentComputedStyle = document.defaultView.getComputedStyle(parent); - - //hides the element to prevent "flashing" - style.visibility = "hidden"; - //Set some properties - style.display = "inline-block"; - style.clear = "both"; - style.float = "left"; - var fontSize = options.maximumFontSize; - if (options.singleLine) { - style.fontSize = (fontSize * options.fontSizeFactor) + "px"; - style.lineHeight = fontSize + "px"; - } else { - for (; fontSize > options.minimumFontSize; fontSize = fontSize - Math.min(fontSize / 2, Math.max(0, fontSize - 48) + 2)) { - style.fontSize = (fontSize * options.fontSizeFactor) + "px"; - style.lineHeight = "1"; - if (element.offsetHeight <= +parentComputedStyle.height.replace("px", "")) { - break; - } - } - } - style.whiteSpace = options.whiteSpace; - style.textAlign = options.textAlign; - style.position = "relative"; - style.padding = 0; - style.margin = 0; - style.left = "50%"; - style.top = "50%"; - var computedStyle = document.defaultView.getComputedStyle(element); - - //Get properties of parent to allow easier referencing later. - var parentPadding = { - top: parseInt(parentComputedStyle.getPropertyValue("padding-top")), - right: parseInt(parentComputedStyle.getPropertyValue("padding-right")), - bottom: parseInt(parentComputedStyle.getPropertyValue("padding-bottom")), - left: parseInt(parentComputedStyle.getPropertyValue("padding-left")), - }; - var parentBorder = { - top: parseInt(parentComputedStyle.getPropertyValue("border-top")), - right: parseInt(parentComputedStyle.getPropertyValue("border-right")), - bottom: parseInt(parentComputedStyle.getPropertyValue("border-bottom")), - left: parseInt(parentComputedStyle.getPropertyValue("border-left")), - }; - - //Calculate the parent inner width and height - var parentInnerDimensions = _calculateInnerDimensions(parentComputedStyle); - var parentInnerWidth = parentInnerDimensions["width"]; - var parentInnerHeight = parentInnerDimensions["height"]; - - var box = { - width: element.offsetWidth, //Note: This is slightly larger than the jQuery version - height: element.offsetHeight, - }; - if (!box.width || !box.height) return element; - - - if (options.rotateText !== null) { - if (typeof options.rotateText !== "number") - throw "bigText error: rotateText value must be a number"; - var rotate = "rotate(" + options.rotateText + "deg)"; - style.webkitTransform = rotate; - style.msTransform = rotate; - style.MozTransform = rotate; - style.OTransform = rotate; - style.transform = rotate; - //calculating bounding box of the rotated element - var sine = Math.abs(Math.sin(options.rotateText * Math.PI / 180)); - var cosine = Math.abs(Math.cos(options.rotateText * Math.PI / 180)); - box.width = element.offsetWidth * cosine + element.offsetHeight * sine; - box.height = element.offsetWidth * sine + element.offsetHeight * cosine; - } - - var parentWidth = (parentInnerWidth - parentPadding.left - parentPadding.right); - var parentHeight = (parentInnerHeight - parentPadding.top - parentPadding.bottom); - var widthFactor = parentWidth / box.width; - var heightFactor = parentHeight / box.height; - var lineHeight; - - if (options.limitingDimension.toLowerCase() === "width") { - lineHeight = Math.floor(widthFactor * fontSize); - } else if (options.limitingDimension.toLowerCase() === "height") { - lineHeight = Math.floor(heightFactor * fontSize); - } else if (widthFactor < heightFactor) - lineHeight = Math.floor(widthFactor * fontSize); - else if (widthFactor >= heightFactor) - lineHeight = Math.floor(heightFactor * fontSize); - - var fontSize = lineHeight * options.fontSizeFactor; - if (fontSize < options.minimumFontSize) { - parentStyle.display = "flex"; - parentStyle.alignItems = "center"; - style.textAlign = "center"; - style.visibility = ""; - style.fontSize = options.minimumFontSize + "px"; - style.lineHeight = ""; - style.overflow = "hidden"; - style.textOverflow = "ellipsis"; - style.top = ""; - style.left = ""; - style.margin = ""; - return element; - } - if (options.maximumFontSize && fontSize > options.maximumFontSize) { - fontSize = options.maximumFontSize; - lineHeight = fontSize / options.fontSizeFactor; - } - - style.fontSize = Math.floor(fontSize) + "px"; - style.lineHeight = Math.ceil(lineHeight) + "px"; - style.marginBottom = "0px"; - style.marginRight = "0px"; - - // if (options.limitingDimension.toLowerCase() === "height") { - // //this option needs the font-size to be set already so computedStyle.getPropertyValue("width") returns the right size - // //this +4 is to compensate the rounding erros that can occur due to the calls to Math.floor in the centering code - // parentStyle.width = (parseInt(computedStyle.getPropertyValue("width")) + 4) + "px"; - // } - - //Calculate the inner width and height - var innerDimensions = _calculateInnerDimensions(computedStyle); - var innerWidth = innerDimensions["width"]; - var innerHeight = innerDimensions["height"]; - - switch (options.verticalAlign.toLowerCase()) { - case "top": - style.top = "0%"; - break; - case "bottom": - style.top = "100%"; - style.marginTop = Math.floor(-innerHeight) + "px"; - break; - default: - style.marginTop = Math.ceil((-innerHeight / 2)) + "px"; - break; - } - - switch (options.horizontalAlign.toLowerCase()) { - case "left": - style.left = "0%"; - break; - case "right": - style.left = "100%"; - style.marginLeft = Math.floor(-innerWidth) + "px"; - break; - default: - style.marginLeft = Math.ceil((-innerWidth / 2)) + "px"; - break; - } - - //shows the element after the work is done - style.visibility = "visible"; - - return element; -} diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx index f80ff5f94..e39caecb6 100644 --- a/src/client/views/nodes/LabelBox.tsx +++ b/src/client/views/nodes/LabelBox.tsx @@ -1,21 +1,18 @@ -import { action, computed, makeObservable, observable } from 'mobx'; +import { Property } from 'csstype'; +import { action, computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Doc, DocListCast, Field, FieldType } from '../../../fields/Doc'; -import { List } from '../../../fields/List'; -import { listSpec } from '../../../fields/Schema'; -import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types'; +import * as textfit from 'textfit'; +import { Field, FieldType } from '../../../fields/Doc'; +import { BoolCast, NumCast, StrCast } from '../../../fields/Types'; +import { TraceMobx } from '../../../fields/util'; import { DocumentType } from '../../documents/DocumentTypes'; import { Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; -import { undoBatch } from '../../util/UndoManager'; -import { ContextMenu } from '../ContextMenu'; -import { ContextMenuProps } from '../ContextMenuItem'; import { ViewBoxBaseComponent } from '../DocComponent'; import { PinDocView, PinProps } from '../PinFuncs'; import { StyleProp } from '../StyleProp'; import { FieldView, FieldViewProps } from './FieldView'; -import BigText from './LabelBigText'; import './LabelBox.scss'; @observer @@ -23,28 +20,15 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(LabelBox, fieldKey); } - public static LayoutStringWithTitle(fieldStr: string, label?: string) { - return !label ? LabelBox.LayoutString(fieldStr) : `<LabelBox fieldKey={'${fieldStr}'} label={'${label}'} {...props} />`; // e.g., "<ImageBox {...props} fieldKey={"data} />" - } private dropDisposer?: DragManager.DragDropDisposer; - private _timeout: any; + private _timeout: NodeJS.Timeout | undefined; + _divRef: HTMLDivElement | null = null; constructor(props: FieldViewProps) { super(props); makeObservable(this); } - componentDidMount() { - this._props.setContentViewBox?.(this); - } - componentWillUnMount() { - this._timeout && clearTimeout(this._timeout); - } - - @computed get Title() { - return Field.toString(this.dataDoc[this.fieldKey] as FieldType) || StrCast(this.Document.title); - } - protected createDropTarget = (ele: HTMLDivElement) => { this.dropDisposer?.(); if (ele) { @@ -52,44 +36,27 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() { } }; - get paramsDoc() { - return Doc.AreProtosEqual(this.layoutDoc, this.dataDoc) ? this.dataDoc : this.layoutDoc; + @computed get Title() { + return Field.toString(this.dataDoc[this.fieldKey] as FieldType) || StrCast(this.Document.title); } - specificContextMenu = (): void => { - const funcs: ContextMenuProps[] = []; - !Doc.noviceMode && - funcs.push({ - description: 'Clear Script Params', - event: () => { - const params = Cast(this.paramsDoc['onClick-paramFieldKeys'], listSpec('string'), []); - params?.forEach(p => { - this.paramsDoc[p] = undefined; - }); - }, - icon: 'trash', - }); - funcs.length && ContextMenu.Instance.addItem({ description: 'OnClick...', noexpand: true, subitems: funcs, icon: 'mouse-pointer' }); - }; + @computed get backgroundColor() { + return this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor) as string; + } - @undoBatch - drop = (e: Event, de: DragManager.DropEvent) => { - const { docDragData } = de.complete; - const params = Cast(this.paramsDoc['onClick-paramFieldKeys'], listSpec('string'), []); - const missingParams = params?.filter(p => !this.paramsDoc[p]); - if (docDragData && missingParams?.includes((e.target as any).textContent)) { - this.paramsDoc[(e.target as any).textContent] = new List<Doc>(docDragData.droppedDocuments.map((d, i) => (d.onDragStart ? docDragData.draggedDocuments[i] : d))); - e.stopPropagation(); - return true; - } + componentDidMount() { + this._props.setContentViewBox?.(this); + } + componentWillUnMount() { + this._timeout && clearTimeout(this._timeout); + } + + specificContextMenu = (): void => {}; + + drop = (/* e: Event, de: DragManager.DropEvent */) => { return false; }; - @observable _mouseOver = false; - @computed get hoverColor() { - return this._mouseOver ? StrCast(this.layoutDoc._hoverBackgroundColor) : this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor); - } - getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { if (!pinProps) return this.Document; const anchor = Docs.Create.ConfigDocument({ title: StrCast(this.Document.title), annotationOn: this.Document }); @@ -104,101 +71,92 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() { }; fitTextToBox = ( - r: any - ): - | NodeJS.Timeout - | { - rotateText: null; - fontSizeFactor: number; - minimumFontSize: number; - maximumFontSize: number; - limitingDimension: string; - horizontalAlign: string; - verticalAlign: string; - textAlign: string; - singleLine: boolean; - whiteSpace: string; - } => { - const singleLine = BoolCast(this.layoutDoc._singleLine, true); - const params = { - rotateText: null, - fontSizeFactor: 1, - minimumFontSize: NumCast(this.layoutDoc._label_minFontSize, 8), - maximumFontSize: NumCast(this.layoutDoc._label_maxFontSize, 1000), - limitingDimension: 'both', - horizontalAlign: 'center', - verticalAlign: 'center', - textAlign: 'center', - singleLine, - whiteSpace: singleLine ? 'nowrap' : 'pre-wrap', + r: HTMLElement | null | undefined + ): { + minFontSize: number; + maxFontSize: number; + multiLine: boolean; + alignHoriz: boolean; + alignVert: boolean; + detectMultiLine: boolean; + } => { + this._timeout && clearTimeout(this._timeout); + const textfitParams = { + minFontSize: NumCast(this.layoutDoc._label_minFontSize, 1), + maxFontSize: NumCast(this.layoutDoc._label_maxFontSize, 100), + multiLine: BoolCast(this.layoutDoc._singleLine, true) ? false : true, + alignHoriz: true, + alignVert: true, + detectMultiLine: true, }; - this._timeout = undefined; - if (!r) return params; - if (!r.offsetHeight || !r.offsetWidth) { - this._timeout = setTimeout(() => this.fitTextToBox(r)); - return this._timeout; + if (r) { + if (!r.offsetHeight || !r.offsetWidth) { + console.log("CAN'T FIT TO EMPTY BOX"); + this._timeout && clearTimeout(this._timeout); + this._timeout = setTimeout(() => this.fitTextToBox(r)); + return textfitParams; + } + textfit(r, textfitParams); } - const parent = r.parentNode; - const parentStyle = parent.style; - parentStyle.display = ''; - parentStyle.alignItems = ''; - r.setAttribute('style', ''); - r.style.width = singleLine ? '' : '100%'; - - r.style.textOverflow = 'ellipsis'; - r.style.overflow = 'hidden'; - BigText(r, params); - return params; + return textfitParams; }; - // (!missingParams || !missingParams.length ? "" : "(" + missingParams.map(m => m + ":").join(" ") + ")") render() { - const boxParams = this.fitTextToBox(null); // this causes mobx to trigger re-render when data changes - const params = Cast(this.paramsDoc['onClick-paramFieldKeys'], listSpec('string'), []); - const missingParams = params?.filter(p => !this.paramsDoc[p]); - params?.map(p => DocListCast(this.paramsDoc[p])); // bcz: really hacky form of prefetching ... - const label = this.Title; + TraceMobx(); + const boxParams = this.fitTextToBox(undefined); // this causes mobx to trigger re-render when data changes + const label = this.Title.startsWith('#') ? null : this.Title; return ( - <div - className="labelBox-outerDiv" - onMouseLeave={action(() => { - this._mouseOver = false; - })} - // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events - onMouseOver={action(() => { - this._mouseOver = true; - })} - ref={this.createDropTarget} - onContextMenu={this.specificContextMenu} - style={{ boxShadow: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BoxShadow) }}> + <div key={label?.length} className="labelBox-outerDiv" ref={this.createDropTarget} onContextMenu={this.specificContextMenu} style={{ boxShadow: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BoxShadow) as string }}> <div className="labelBox-mainButton" style={{ - backgroundColor: this.hoverColor, - fontSize: StrCast(this.layoutDoc._text_fontSize), + backgroundColor: this.backgroundColor, + // fontSize: StrCast(this.layoutDoc._text_fontSize), color: StrCast(this.layoutDoc._color), fontFamily: StrCast(this.layoutDoc._text_fontFamily) || 'inherit', letterSpacing: StrCast(this.layoutDoc.letterSpacing), - textTransform: StrCast(this.layoutDoc.textTransform) as any, + textTransform: StrCast(this.layoutDoc.textTransform) as Property.TextTransform, paddingLeft: NumCast(this.layoutDoc._xPadding), paddingRight: NumCast(this.layoutDoc._xPadding), paddingTop: NumCast(this.layoutDoc._yPadding), paddingBottom: NumCast(this.layoutDoc._yPadding), width: this._props.PanelWidth(), height: this._props.PanelHeight(), - whiteSpace: 'singleLine' in boxParams && boxParams.singleLine ? 'pre' : 'pre-wrap', + whiteSpace: 'multiLine' in boxParams && boxParams.multiLine ? 'pre-wrap' : 'pre', }}> - <span style={{ width: 'singleLine' in boxParams ? '' : '100%' }} ref={action((r: any) => this.fitTextToBox(r))}> - {label.startsWith('#') ? null : label.replace(/([^a-zA-Z])/g, '$1\u200b')} - </span> - </div> - <div className="labelBox-fieldKeyParams"> - {!missingParams?.length - ? null - : missingParams.map(m => ( - <div key={m} className="labelBox-missingParam"> - {m} - </div> - ))} + <div + style={{ + width: this._props.PanelWidth() - 2 * NumCast(this.layoutDoc._xPadding), + height: this._props.PanelHeight() - 2 * NumCast(this.layoutDoc._yPadding), + outline: 'unset !important', + }} + onKeyDown={action(e => { + e.stopPropagation(); + })} + onKeyUp={action(e => { + e.stopPropagation(); + if (e.key === 'Enter') { + this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? ''; + setTimeout(() => this._props.select(false)); + } + })} + onBlur={() => { + this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? ''; + }} + contentEditable={this._props.onClickScript?.() ? false : true} + ref={r => { + this._divRef = r; + this.fitTextToBox(r); + if (this._props.isSelected() && this._divRef) { + const range = document.createRange(); + range.setStart(this._divRef, this._divRef.childNodes.length); + range.setEnd(this._divRef, this._divRef.childNodes.length); + const sel = window.getSelection(); + sel?.removeAllRanges(); + sel?.addRange(range); + } + }}> + {label} + </div> </div> </div> ); diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index 8d6ae9f73..4d9d2460e 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -27,6 +27,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { public static LayoutString(fieldKey: string = 'link') { return FieldView.LayoutString(LinkBox, fieldKey); } + _hackToSeeIfDeleted: NodeJS.Timeout | undefined; _disposers: { [name: string]: IReactionDisposer } = {}; @observable _forceAnimate: number = 0; // forces xArrow to animate when a transition animation is detected on something that affects an anchor @observable _hide = false; // don't render if anchor is not visible since that breaks xAnchor @@ -43,7 +44,6 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { const anchor = anch?.layout_unrendered ? DocCast(anch.annotationOn) : anch; return DocumentView.getDocumentView(anchor, this.DocumentView?.().containerViewPath?.().lastElement()); }; - _hackToSeeIfDeleted: any; componentWillUnmount() { this._hackToSeeIfDeleted && clearTimeout(this._hackToSeeIfDeleted); Object.keys(this._disposers).forEach(key => this._disposers[key]()); @@ -68,7 +68,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { let a1 = a && document.getElementById(a.ViewGuid); let a2 = b && document.getElementById(b.ViewGuid); // test whether the anchors themselves are hidden,... - if (!a1 || !a2 || (a?.ContentDiv as any)?.hidden || (b?.ContentDiv as any)?.hidden) this._hide = true; + if (!a1 || !a2 || a?.ContentDiv?.hidden || b?.ContentDiv?.hidden) this._hide = true; else { // .. or whether any of their DOM parents are hidden for (; a1 && !a1.hidden; a1 = a1.parentElement); @@ -151,11 +151,11 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { this._forceAnimate += 0.01; }) ); // this forces an update during a transition animation - const highlight = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Highlighting); + const highlight = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Highlighting) as { highlightStyle: string; highlightColor: string; highlightIndex: number; highlightStroke: boolean }; const highlightColor = highlight?.highlightIndex ? highlight?.highlightColor : undefined; - const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); - const fontFamily = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontFamily); - const fontSize = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontSize); + const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string; + const fontFamily = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontFamily) as string; + const fontSize = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontSize) as number; const fontColor = (c => (c !== 'transparent' ? c : undefined))(StrCast(this.layoutDoc.link_fontColor)); // eslint-disable-next-line camelcase const { stroke_markerScale: strokeMarkerScale, stroke_width: strokeRawWidth, stroke_startMarker: strokeStartMarker, stroke_endMarker: strokeEndMarker, stroke_dash: strokeDash } = this.Document; @@ -248,7 +248,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { 2 ); return ( - <div className={`linkBox-container${this._props.isContentActive() ? '-interactive' : ''}`} style={{ background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) }}> + <div className={`linkBox-container${this._props.isContentActive() ? '-interactive' : ''}`} style={{ background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string }}> <ComparisonBox // eslint-disable-next-line react/jsx-props-no-spreading {...this.props} // diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index 8f29600f6..5026f52fb 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -4,9 +4,9 @@ import { action, computed, makeObservable, observable, runInAction } from 'mobx' import { observer } from 'mobx-react'; import * as React from 'react'; import wiki from 'wikijs'; -import { returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnNone, setupMoveUpEvents } from '../../../ClientUtils'; +import { returnEmptyFilter, returnEmptyString, returnFalse, returnNone, setupMoveUpEvents } from '../../../ClientUtils'; import { emptyFunction } from '../../../Utils'; -import { Doc, Opt } from '../../../fields/Doc'; +import { Doc, Opt, returnEmptyDoclist } from '../../../fields/Doc'; import { Cast, DocCast, NumCast, PromiseValue, StrCast } from '../../../fields/Types'; import { DocServer } from '../../DocServer'; import { DocumentType } from '../../documents/DocumentTypes'; @@ -17,6 +17,7 @@ import { SearchUtil } from '../../util/SearchUtil'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { ObservableReactComponent } from '../ObservableReactComponent'; +import { returnEmptyDocViewList } from '../StyleProvider'; import { DocumentView } from './DocumentView'; import { StyleProviderFuncType } from './FieldView'; import './LinkDocPreview.scss'; @@ -67,7 +68,7 @@ export class LinkDocPreview extends ObservableReactComponent<LinkDocPreviewProps @observable _linkSrc: Opt<Doc> = undefined; @observable _toolTipText = ''; @observable _hrefInd = 0; - constructor(props: any) { + constructor(props: LinkDocPreviewProps) { super(props); makeObservable(this); } @@ -104,7 +105,7 @@ export class LinkDocPreview extends ObservableReactComponent<LinkDocPreviewProps } onPointerDown = (e: PointerEvent) => { - !this._linkDocRef.current?.contains(e.target as any) && LinkInfo.Clear(); // close preview when not clicking anywhere other than the info bar of the preview + !this._linkDocRef.current?.contains(e.target as HTMLElement) && LinkInfo.Clear(); // close preview when not clicking anywhere other than the info bar of the preview }; @action @@ -144,7 +145,7 @@ export class LinkDocPreview extends ObservableReactComponent<LinkDocPreviewProps this._linkSrc = anchor; const linkTarget = Doc.getOppositeAnchor(this._linkDoc, this._linkSrc); this._markerTargetDoc = linkTarget; - this._targetDoc = /* linkTarget?.type === DocumentType.MARKER && */ linkTarget?.annotationOn ? Cast(linkTarget.annotationOn, Doc, null) ?? linkTarget : linkTarget; + this._targetDoc = /* linkTarget?.type === DocumentType.MARKER && */ linkTarget?.annotationOn ? (Cast(linkTarget.annotationOn, Doc, null) ?? linkTarget) : linkTarget; } if (LinkInfo.Instance?.LinkInfo?.noPreview || this._linkSrc?.followLinkToggle || this._markerTargetDoc?.type === DocumentType.PRES) this.followLink(); } @@ -286,7 +287,7 @@ export class LinkDocPreview extends ObservableReactComponent<LinkDocPreviewProps Document={this._targetDoc!} moveDocument={returnFalse} styleProvider={this._props.styleProvider} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} ScreenToLocalTransform={Transform.Identity} isDocumentActive={returnFalse} isContentActive={returnFalse} diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx index 5f343bdfe..325ab18b4 100644 --- a/src/client/views/nodes/LoadingBox.tsx +++ b/src/client/views/nodes/LoadingBox.tsx @@ -39,7 +39,7 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return FieldView.LayoutString(LoadingBox, fieldKey); } - _timer: any; + _timer: NodeJS.Timeout | undefined; @observable progress = ''; componentDidMount() { if (!Doc.CurrentlyLoading?.includes(this.Document)) { diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index d7687e03e..c66f7c726 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ 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'; @@ -481,8 +479,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { console.log('deleting'); if (this._selectedPinOrRoute) { // Removes filter - Doc.setDocFilter(this.Document, 'latitude', this._selectedPinOrRoute.latitude, 'remove'); - Doc.setDocFilter(this.Document, 'longitude', this._selectedPinOrRoute.longitude, 'remove'); + Doc.setDocFilter(this.Document, 'latitude', NumCast(this._selectedPinOrRoute.latitude), 'remove'); + Doc.setDocFilter(this.Document, 'longitude', NumCast(this._selectedPinOrRoute.longitude), 'remove'); Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this._selectedPinOrRoute))}`, 'remove'); this.removePushpinOrRoute(this._selectedPinOrRoute); @@ -1152,7 +1150,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { _textRef = React.createRef<any>(); render() { const scale = this._props.NativeDimScaling?.() || 1; - const parscale = scale === 1 ? 1 : this.ScreenToLocalBoxXf().Scale ?? 1; + const parscale = scale === 1 ? 1 : (this.ScreenToLocalBoxXf().Scale ?? 1); return ( <div className="mapBox" ref={this._ref}> diff --git a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx index bfd40692b..a4557196e 100644 --- a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx +++ b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx @@ -1,12 +1,13 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, EditableText, IconButton, Type } from 'browndash-components'; import { IReactionDisposer, ObservableMap, action, computed, makeObservable, 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 { ClientUtils, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, setupMoveUpEvents } from '../../../../ClientUtils'; +import { ClientUtils, returnEmptyFilter, returnFalse, returnOne, setupMoveUpEvents } from '../../../../ClientUtils'; import { emptyFunction } from '../../../../Utils'; -import { Doc, DocListCast, Field, LinkedTo, Opt } from '../../../../fields/Doc'; +import { Doc, DocListCast, Field, LinkedTo, Opt, returnEmptyDoclist } from '../../../../fields/Doc'; import { DocCss, Highlight } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { DocCast, NumCast, StrCast, toList } from '../../../../fields/Types'; @@ -363,8 +364,8 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps> deselectPin = () => { if (this.selectedPin) { // Removes filter - Doc.setDocFilter(this.Document, 'latitude', this.selectedPin.latitude, 'remove'); - Doc.setDocFilter(this.Document, 'longitude', this.selectedPin.longitude, 'remove'); + Doc.setDocFilter(this.Document, 'latitude', NumCast(this.selectedPin.latitude), 'remove'); + Doc.setDocFilter(this.Document, 'longitude', NumCast(this.selectedPin.longitude), 'remove'); Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this.selectedPin))}`, 'remove'); const temp = this.selectedPin; @@ -536,8 +537,8 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps> deleteSelectedPin = undoable(() => { if (this.selectedPin) { // Removes filter - Doc.setDocFilter(this.Document, 'latitude', this.selectedPin.latitude, 'remove'); - Doc.setDocFilter(this.Document, 'longitude', this.selectedPin.longitude, 'remove'); + Doc.setDocFilter(this.Document, 'latitude', NumCast(this.selectedPin.latitude), 'remove'); + Doc.setDocFilter(this.Document, 'longitude', NumCast(this.selectedPin.longitude), 'remove'); Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this.selectedPin))}`, 'remove'); this.removePushpin(this.selectedPin); diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 8db68ddfe..b17275a1e 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/control-has-associated-label */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -24,7 +22,6 @@ import { undoBatch, UndoManager } from '../../util/UndoManager'; import { CollectionFreeFormView } from '../collections/collectionFreeForm'; import { CollectionStackingView } from '../collections/CollectionStackingView'; import { ContextMenu } from '../ContextMenu'; -import { ContextMenuProps } from '../ContextMenuItem'; import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { Colors } from '../global/globalEnums'; import { PDFViewer } from '../pdf/PDFViewer'; @@ -76,7 +73,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }); else if (PDFBox.pdfpromise.get(this.pdfUrl.url.href)) PDFBox.pdfpromise.get(this.pdfUrl.url.href)?.then( - action((pdf: any) => { + action(pdf => { this._pdf = pdf; }) ); @@ -108,7 +105,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }; crop = (region: Doc | undefined, addCrop?: boolean) => { - if (!region) return undefined; + const docViewContent = this.DocumentView?.().ContentDiv; + if (!region || !docViewContent) return undefined; const cropping = Doc.MakeCopy(region, true); cropping.layout_unrendered = false; // text selection have this cropping.text_inlineAnnotations = undefined; // text selections have this -- it causes them not to be rendered. @@ -120,7 +118,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { regionData.followLinkToggle = true; this.addDocument(region); - const docViewContent = this.DocumentView?.().ContentDiv!; const newDiv = docViewContent.cloneNode(true) as HTMLDivElement; newDiv.style.width = NumCast(this.layoutDoc._width).toString(); newDiv.style.height = NumCast(this.layoutDoc._height).toString(); @@ -162,7 +159,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { (NumCast(region.x) * this._props.PanelWidth()) / NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']), 4 ) - .then((dataUrl: any) => { + .then(dataUrl => { ClientUtils.convertDataUri(dataUrl, region[Id]).then(returnedfilename => setTimeout( action(() => { @@ -172,7 +169,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { ) ); }) - .catch((error: any) => { + .catch(error => { console.error('oops, something went wrong!', error); }); @@ -181,9 +178,10 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { updateIcon = () => { // currently we render pdf icons as text labels - const docViewContent = this.DocumentView?.().ContentDiv!; + const docViewContent = this.DocumentView?.().ContentDiv; const filename = this.layoutDoc[Id] + '-icon' + new Date().getTime(); this._pdfViewer?._mainCont.current && + docViewContent && UpdateIcon( filename, docViewContent, @@ -399,6 +397,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { </button> </> ); + const searchTitle = `${!this._searching ? 'Open' : 'Close'} Search Bar`; const curPage = NumCast(this.Document._layout_curPage) || 1; return !this._props.isContentActive() || this._pdfViewer?.isAnnotating ? null : ( @@ -474,13 +473,14 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { specificContextMenu = (): void => { const cm = ContextMenu.Instance; const options = cm.findByDescription('Options...'); - const optionItems: ContextMenuProps[] = options && 'subitems' in options ? options.subitems : []; + const optionItems = options?.subitems ?? []; + !Doc.noviceMode && optionItems.push({ description: 'Toggle Sidebar Type', event: this.toggleSidebarType, icon: 'expand-arrows-alt' }); !Doc.noviceMode && optionItems.push({ description: 'update icon', event: () => this.pdfUrl && this.updateIcon(), icon: 'expand-arrows-alt' }); // optionItems.push({ description: "Toggle Sidebar ", event: () => this.toggleSidebar(), icon: "expand-arrows-alt" }); !options && ContextMenu.Instance.addItem({ description: 'Options...', subitems: optionItems, icon: 'asterisk' }); const help = cm.findByDescription('Help...'); - const helpItems: ContextMenuProps[] = help && 'subitems' in help ? help.subitems : []; + const helpItems = help?.subitems ?? []; helpItems.push({ description: 'Copy path', event: () => this.pdfUrl && ClientUtils.CopyText(ClientUtils.prepend('') + this.pdfUrl.url.pathname), icon: 'expand-arrows-alt' }); !help && ContextMenu.Instance.addItem({ description: 'Help...', noexpand: true, subitems: helpItems, icon: 'asterisk' }); }; @@ -656,7 +656,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { else { if (!PDFBox.pdfpromise.get(href)) PDFBox.pdfpromise.set(href, Pdfjs.getDocument(href).promise); PDFBox.pdfpromise.get(href)?.then( - action((pdf: any) => { + action(pdf => { PDFBox.pdfcache.set(href, (this._pdf = pdf)); }) ); diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx index f88eb3bca..31a1a398b 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx @@ -1,8 +1,5 @@ /* eslint-disable camelcase */ -/* eslint-disable jsx-a11y/control-has-associated-label */ /* eslint-disable @typescript-eslint/no-unused-vars */ -/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable react/no-array-index-key */ /* eslint-disable react/jsx-props-no-spreading */ /* eslint-disable no-return-assign */ @@ -1009,7 +1006,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP <Dialog maxWidth="sm" fullWidth open={BoolCast(this.dataDoc.hintDialogueOpen)} onClose={() => (this.dataDoc.hintDialogueOpen = false)}> <DialogTitle>Hints</DialogTitle> <DialogContent> - {this.selectedQuestion.hints?.map((hint: any, index: number) => ( + {this.selectedQuestion.hints?.map((hint: { description: string; content: string }, index: number) => ( <div key={index}> <DialogContentText> <details> @@ -1985,7 +1982,13 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP } Docs.Prototypes.TemplateMap.set(DocumentType.SIMULATION, { - data: '', layout: { view: PhysicsSimulationBox, dataField: 'data' }, - options: { acl: '', _width: 1000, _height: 800, mass1: '', mass2: '', layout_nativeDimEditable: true, position: '', acceleration: '', pendulum: '', spring: '', wedge: '', simulation: '', review: '', systemIcon: 'BsShareFill' }, + options: { + acl: '', + _width: 1000, + _height: 800, + _layout_nativeDimEditable: true, + systemIcon: 'BsShareFill', + // mass1: '', mass2: '', position: '', acceleration: '', pendulum: '', spring: '', wedge: '', simulation: '', review: '' + }, }); diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx index 07381c7d0..7ba313e92 100644 --- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx @@ -55,8 +55,7 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { this.dataDoc[this._props.fieldKey] = new VideoField(this.result.accessPaths.client); // stringify the presentation and store it if (presentation?.movements) { - const presCopy = { ...presentation }; - presCopy.movements = presentation.movements.map(movement => ({ ...movement, doc: movement.doc[Id] })) as any; + const presCopy = { ...presentation, movements: presentation.movements.map(movement => ({ ...movement, doc: (movement.doc as Doc)[Id] })) }; this.dataDoc[this.fieldKey + '_presentation'] = JSON.stringify(presCopy); } }; @@ -210,7 +209,7 @@ ScriptingGlobals.add(function getCurrentRecording() { }); // eslint-disable-next-line prefer-arrow-callback ScriptingGlobals.add(function getWorkspaceRecordings() { - return new List<any>(['Record Workspace', `Record Webcam`, ...DocListCast(Doc.UserDoc().workspaceRecordings)]); + return new List<string | Doc>(['Record Workspace', `Record Webcam`, ...DocListCast(Doc.UserDoc().workspaceRecordings)]); }); // eslint-disable-next-line prefer-arrow-callback ScriptingGlobals.add(function isWorkspaceRecording() { diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx index b8451fe60..37ffca2d6 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx @@ -1,6 +1,4 @@ -/* eslint-disable jsx-a11y/label-has-associated-control */ /* eslint-disable react/button-has-type */ -/* eslint-disable jsx-a11y/control-has-associated-label */ import * as React from 'react'; import { useEffect, useRef, useState } from 'react'; import { IconContext } from 'react-icons'; @@ -14,7 +12,7 @@ import { ProgressBar } from './ProgressBar'; import './RecordingView.scss'; export interface MediaSegment { - videoChunks: any[]; + videoChunks: Blob[]; endTime: number; startTime: number; presentation?: Presentation; @@ -91,15 +89,15 @@ export function RecordingView(props: IRecordingViewProps) { }, []); useEffect(() => { - let interval: any = null; + let interval: null | NodeJS.Timeout = null; if (recording) { interval = setInterval(() => { setRecordingTimer(unit => unit + 1); }, 10); } else if (!recording && recordingTimer !== 0) { - clearInterval(interval); + interval && clearInterval(interval); } - return () => clearInterval(interval); + return interval ? () => clearInterval(interval!) : undefined; }, [recording]); const setVideoProgressHelper = (curProgrss: number) => { @@ -127,9 +125,9 @@ export function RecordingView(props: IRecordingViewProps) { if (!videoRecorder.current) videoRecorder.current = new MediaRecorder(await startShowingStream()); // temporary chunks of video - let videoChunks: any = []; + let videoChunks: Blob[] = []; - videoRecorder.current.ondataavailable = (event: any) => { + videoRecorder.current.ondataavailable = (event: BlobEvent) => { if (event.data.size > 0) videoChunks.push(event.data); }; diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index 3be50f5e6..6289470b6 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jsx-a11y/media-has-caption */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as React from 'react'; // import { Canvas } from '@react-three/fiber'; @@ -21,7 +20,7 @@ import { DocumentType } from '../../documents/DocumentTypes'; import { Docs } from '../../documents/Documents'; import { CaptureManager } from '../../util/CaptureManager'; import { SettingsManager } from '../../util/SettingsManager'; -import { TrackMovements } from '../../util/TrackMovements'; +import { Movement, TrackMovements } from '../../util/TrackMovements'; import { ContextMenu } from '../ContextMenu'; import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { DocViewUtils } from '../DocViewUtils'; @@ -32,10 +31,11 @@ import { FieldView, FieldViewProps } from './FieldView'; import './ScreenshotBox.scss'; import { VideoBox } from './VideoBox'; import { FormattedTextBox } from './formattedText/FormattedTextBox'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; -declare class MediaRecorder { - constructor(e: any, options?: any); // whatever MediaRecorder has -} +// declare class MediaRecorder { +// constructor(e: any, options?: any); // whatever MediaRecorder has +// } // interface VideoTileProps { // raised: { coord: Vector2, off: Vector3 }[]; @@ -118,8 +118,8 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<FieldViewProps>() public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ScreenshotBox, fieldKey); } - private _audioRec: any; - private _videoRec: any; + private _audioRec: MediaRecorder | undefined; + private _videoRec: MediaRecorder | undefined; @observable private _videoRef: HTMLVideoElement | null = null; @observable _screenCapture = false; @computed get recordingStart() { @@ -137,7 +137,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<FieldViewProps>() }; videoLoad = () => { - const aspect = this._videoRef!.videoWidth / this._videoRef!.videoHeight; + const aspect = (this._videoRef?.videoWidth || 0) / (this._videoRef?.videoHeight || 1); const nativeWidth = Doc.NativeWidth(this.layoutDoc); const nativeHeight = Doc.NativeHeight(this.layoutDoc); if (!nativeWidth || !nativeHeight) { @@ -167,7 +167,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<FieldViewProps>() } specificContextMenu = (): void => { - const subitems = [{ description: 'Screen Capture', event: this.toggleRecording, icon: 'expand-arrows-alt' as any }]; + const subitems = [{ description: 'Screen Capture', event: this.toggleRecording, icon: 'expand-arrows-alt' as IconProp }]; ContextMenu.Instance.addItem({ description: 'Options...', subitems, icon: 'video' }); }; @@ -222,29 +222,29 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<FieldViewProps>() Pause = () => this._screenCapture && this.toggleRecording(); toggleRecording = async () => { - if (!this._screenCapture) { + if (!this._screenCapture && this._videoRef) { this._audioRec = new MediaRecorder(await navigator.mediaDevices.getUserMedia({ audio: true })); - const audChunks: any = []; - this._audioRec.ondataavailable = (e: any) => audChunks.push(e.data); + const audChunks: Blob[] = []; + this._audioRec.ondataavailable = e => audChunks.push(e.data); this._audioRec.onstop = async () => { - const [{ result }] = await Networking.UploadFilesToServer(audChunks.map((file: any) => ({ file }))); + const [{ result }] = await Networking.UploadFilesToServer(audChunks.map(file => ({ file }))); if (!(result instanceof Error)) { 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 vidChunks: any = []; + this._videoRef.srcObject = await navigator.mediaDevices.getDisplayMedia({ video: true }); + this._videoRec = new MediaRecorder(this._videoRef.srcObject); + const vidChunks: Blob[] = []; this._videoRec.onstart = () => { 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) => vidChunks.push(e.data); + this._videoRec.ondataavailable = e => vidChunks.push(e.data); this._videoRec.onstop = async () => { const presentation = TrackMovements.Instance.yieldPresentation(); if (presentation?.movements) { const presCopy = { ...presentation }; - presCopy.movements = presentation.movements.map(movement => ({ ...movement, doc: movement.doc[Id] })) as any; + presCopy.movements = presentation.movements.map(movement => ({ ...movement, doc: (movement.doc as Doc)[Id] }) as Movement); this.dataDoc[this.fieldKey + '_presentation'] = JSON.stringify(presCopy); } TrackMovements.Instance.finish(); diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx index bc19d7ad1..8da422039 100644 --- a/src/client/views/nodes/ScriptingBox.tsx +++ b/src/client/views/nodes/ScriptingBox.tsx @@ -1,8 +1,8 @@ /* eslint-disable react/button-has-type */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import ResizeObserver from 'resize-observer-polyfill'; import { returnAlways, returnEmptyString } from '../../../ClientUtils'; import { Doc } from '../../../fields/Doc'; import { List } from '../../../fields/List'; @@ -10,21 +10,26 @@ 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 { DocumentType } from '../../documents/DocumentTypes'; +import { Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; import { ScriptManager } from '../../util/ScriptManager'; -import { CompileScript, ScriptParam } from '../../util/Scripting'; +import { CompileError, CompileScript, ScriptParam } from '../../util/Scripting'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { ContextMenu } from '../ContextMenu'; import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { EditableView } from '../EditableView'; import { OverlayView } from '../OverlayView'; -import { FieldView, FieldViewProps } from './FieldView'; import { DocumentIconContainer } from './DocumentIcon'; +import { FieldView, FieldViewProps } from './FieldView'; import './ScriptingBox.scss'; -import { Docs } from '../../documents/Documents'; -import { DocumentType } from '../../documents/DocumentTypes'; +import * as ts from 'typescript'; +import { FieldType } from '../../../fields/ObjectField'; + +// eslint-disable-next-line @typescript-eslint/no-var-requires +const getCaretCoordinates = require('textarea-caret'); -const _global = (window /* browser */ || global) /* node */ as any; +// eslint-disable-next-line @typescript-eslint/no-var-requires const ReactTextareaAutocomplete = require('@webscopeio/react-textarea-autocomplete').default; @observer @@ -41,9 +46,9 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() @observable private _function: boolean = false; @observable private _spaced: boolean = false; - @observable private _scriptKeys: any = ScriptingGlobals.getGlobals(); - @observable private _scriptingDescriptions: any = ScriptingGlobals.getDescriptions(); - @observable private _scriptingParams: any = ScriptingGlobals.getParameters(); + @observable private _scriptKeys = ScriptingGlobals.getGlobals(); + @observable private _scriptingDescriptions = ScriptingGlobals.getDescriptions(); + @observable private _scriptingParams = ScriptingGlobals.getParameters(); @observable private _currWord: string = ''; @observable private _suggestions: string[] = []; @@ -52,20 +57,20 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() @observable private _suggestionBoxY: number = 0; @observable private _lastChar: string = ''; - @observable private _suggestionRef: any = React.createRef(); - @observable private _scriptTextRef: any = React.createRef(); + @observable private _suggestionRef = React.createRef<HTMLDivElement>(); + @observable private _scriptTextRef = React.createRef<HTMLDivElement>(); - @observable private _selection: any = 0; + @observable private _selection = 0; @observable private _paramSuggestion: boolean = false; - @observable private _scriptSuggestedParams: any = ''; - @observable private _scriptParamsText: any = ''; + @observable private _scriptSuggestedParams: JSX.Element | string = ''; + @observable private _scriptParamsText = ''; constructor(props: FieldViewProps) { super(props); makeObservable(this); if (!this.compileParams.length) { - const params = ScriptCast(this.dataDoc[this._props.fieldKey])?.script.options.params as { [key: string]: any }; + const params = ScriptCast(this.dataDoc[this._props.fieldKey])?.script.options.params as { [key: string]: string }; if (params) { this.compileParams = Array.from(Object.keys(params)) .filter(p => !p.startsWith('_')) @@ -106,26 +111,16 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() this.dataDoc[this.fieldKey + '-params'] = new List<string>(value); } - getValue(result: any, descrip: boolean) { - if (typeof result === 'object') { - const text = descrip ? result[1] : result[2]; - return text !== undefined ? text : ''; - } - return ''; - } - onClickScriptDisable = returnAlways; @action componentDidMount() { this._props.setContentViewBox?.(this); this.rawText = this.rawScript; - const resizeObserver = new _global.ResizeObserver( + const resizeObserver = new ResizeObserver( action(() => { const area = document.querySelector('textarea'); if (area) { - // eslint-disable-next-line global-require - const getCaretCoordinates = require('textarea-caret'); const caret = getCaretCoordinates(area, this._selection); this.resetSuggestionPos(caret); } @@ -135,12 +130,12 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() } @action - resetSuggestionPos(caret: any) { + resetSuggestionPos(caret: { top: number; left: number; height: number }) { if (!this._suggestionRef.current || !this._scriptTextRef.current) return; const suggestionWidth = this._suggestionRef.current.offsetWidth; const scriptWidth = this._scriptTextRef.current.offsetWidth; const { top } = caret; - const { x } = this.dataDoc; + const x = NumCast(this.layoutDoc.x); let { left } = caret; if (left + suggestionWidth > x + scriptWidth) { const diff = left + suggestionWidth - (x + scriptWidth); @@ -171,8 +166,8 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() // displays error message @action - onError = (error: any) => { - this._errorMessage = error?.message ? error.message : error?.map((entry: any) => entry.messageText).join(' ') || ''; + onError = (errors: ts.Diagnostic[] | string) => { + this._errorMessage = typeof errors === 'string' ? errors : errors.map(entry => entry.toString()).join(' ') || ''; }; // checks if the script compiles using CompileScript method and inputting params @@ -184,7 +179,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() }); const result = !this.rawText.trim() - ? ({ compiled: false, errors: undefined } as any) + ? ({ compiled: false, errors: [] } as CompileError) : CompileScript(this.rawText, { editable: true, transformer: DocumentIconContainer.getTransformer(), @@ -192,7 +187,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() typecheck: false, }); this.dataDoc[this.fieldKey] = result.compiled ? new ScriptField(result, undefined, this.rawText) : undefined; - this.onError(result.compiled ? undefined : result.errors); + this.onError(result.compiled ? [] : result.errors); return result.compiled; }; @@ -200,7 +195,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() @action onRun = () => { if (this.onCompile()) { - const bindings: { [name: string]: any } = {}; + const bindings: { [name: string]: unknown } = {}; this.paramsNames.forEach(key => { bindings[key] = this.dataDoc[key]; }); @@ -294,8 +289,8 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() // sets field of the param name to the selected value in drop down box @action - viewChanged = (e: React.ChangeEvent, name: string) => { - const val = (e.target as any).selectedOptions[0].value; + viewChanged = (e: React.ChangeEvent<HTMLSelectElement>, name: string) => { + const val = e.target.selectedOptions[0].value; this.dataDoc[name] = val[0] === 'S' ? val.substring(1) : val[0] === 'N' ? parseInt(val.substring(1)) : val.substring(1) === 'true'; }; @@ -309,7 +304,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() // adds option to create a copy to the context menu specificContextMenu = (): void => { const existingOptions = ContextMenu.Instance.findByDescription('Options...'); - const options = existingOptions && 'subitems' in existingOptions ? existingOptions.subitems : []; + const options = existingOptions?.subitems ?? []; options.push({ description: 'Create a Copy', event: this.onCopy, icon: 'copy' }); !existingOptions && ContextMenu.Instance.addItem({ description: 'Options...', subitems: options, icon: 'hand-point-right' }); }; @@ -381,7 +376,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() const results = script.compiled && script.run(); if (results && results.success) { this._errorMessage = ''; - this.dataDoc[parameter] = results.result; + this.dataDoc[parameter] = results.result as FieldType; return true; } this._errorMessage = 'invalid document'; @@ -524,18 +519,17 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() @action suggestionPos = () => { - // eslint-disable-next-line global-require - const getCaretCoordinates = require('textarea-caret'); + // eslint-disable-next-line @typescript-eslint/no-this-alias const This = this; document.querySelector('textarea')?.addEventListener('input', function () { - const caret = getCaretCoordinates(this, this.selectionEnd); - This._selection = this; + const caret = getCaretCoordinates(this, this.selectionEnd) as { top: number; left: number; height: number }; + // This._selection = this; This.resetSuggestionPos(caret); }); }; @action - keyHandler(e: any, pos: number) { + keyHandler(e: React.KeyboardEvent, pos: number) { e.stopPropagation(); if (this._lastChar === 'Enter') { this.rawText += ' '; @@ -602,7 +596,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() } @action - handlePosChange(number: any) { + handlePosChange(number: number) { this._caretPos = number; if (this._caretPos === 0) { this.rawText = ' ' + this.rawText; @@ -625,7 +619,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() placeholder="write your script here" onFocus={this.onFocus} onBlur={() => this._overlayDisposer?.()} - onChange={action((e: any) => { + onChange={action((e: React.ChangeEvent<HTMLSelectElement>) => { this.rawText = e.target.value; })} value={this.rawText} @@ -633,24 +627,24 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() loadingComponent={() => <span>Loading</span>} trigger={{ ' ': { - dataProvider: (token: any) => this.handleToken(token), - component: (blob: any) => this.renderFuncListElement(blob.entity), - output: (item: any, trigger: any) => { + dataProvider: this.handleToken, + component: (blob: { entity: string }) => this.renderFuncListElement(blob.entity), + output: (item: string, trigger: string) => { this._spaced = true; return trigger + item.trim(); }, }, '.': { - dataProvider: (token: any) => this.handleToken(token), - component: (blob: any) => this.renderFuncListElement(blob.entity), - output: (item: any, trigger: any) => { + dataProvider: this.handleToken, + component: (blob: { entity: string }) => this.renderFuncListElement(blob.entity), + output: (item: string, trigger: string) => { this._spaced = true; return trigger + item.trim(); }, }, }} onKeyDown={(e: React.KeyboardEvent) => this.keyHandler(e, this._caretPos)} - onCaretPositionChange={(number: any) => this.handlePosChange(number)} + onCaretPositionChange={this.handlePosChange} /> </div> ); diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index fe7600fa3..4933869a7 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jsx-a11y/media-has-caption */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -59,8 +58,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { private _marqueeref = React.createRef<MarqueeAnnotator>(); private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); // outermost div private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); - private _playRegionTimer: any = null; // timeout for playback - private _controlsFadeTimer: any = null; // timeout for controls fade + private _playRegionTimer: NodeJS.Timeout | undefined; // timeout for playback + private _controlsFadeTimer: NodeJS.Timeout | undefined; // timeout for controls fade private _ffref = React.createRef<CollectionFreeFormView>(); constructor(props: FieldViewProps) { @@ -126,8 +125,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } override PlayerTime = () => this.player?.currentTime; - override Pause = (update: boolean = true) => { - this.pause(update); + override Pause = () => { + this.pause(true); !this._keepCurrentlyPlaying && this.removeCurrentlyPlaying(); }; @@ -142,7 +141,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { switch (e.key) { case 'ArrowLeft': case 'ArrowRight': - clearTimeout(this._controlsFadeTimer); + this._controlsFadeTimer && clearTimeout(this._controlsFadeTimer); this._scrubbing = true; this._controlsFadeTimer = setTimeout( action(() => { @@ -158,7 +157,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }; // plays video - @action public Play = (update: boolean = true) => { + @action public Play = () => { if (this._playRegionTimer) return; this._playing = true; @@ -173,8 +172,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } try { this._audioPlayer && this.player && (this._audioPlayer.currentTime = this.player?.currentTime); - update && this.player && this.playFrom(start, undefined, true); - update && this._audioPlayer?.play(); + this.player && this.playFrom(start, undefined, true); + this._audioPlayer?.play(); } catch (e) { console.log('Video Play Exception:', e); } @@ -217,7 +216,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this._playTimer = undefined; this.updateTimecode(); if (!this._finished) { - clearTimeout(this._playRegionTimer); // if paused in the middle of playback, prevents restart on next play + this._playRegionTimer && clearTimeout(this._playRegionTimer); // if paused in the middle of playback, prevents restart on next play } this._playRegionTimer = undefined; }; @@ -385,7 +384,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { getVideoThumbnails = () => { if (this.dataDoc[this.fieldKey + '_thumbnails'] !== undefined) return; this.dataDoc[this.fieldKey + '_thumbnails'] = new List<string>(); - const thumbnailPromises: Promise<any>[] = []; + const thumbnailPromises: Promise<string>[] = []; const video = document.createElement('video'); video.onloadedmetadata = () => { @@ -420,7 +419,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this._videoRef = vref; if (vref) { this._videoRef!.ontimeupdate = this.updateTimecode; - // @ts-ignore // vref.onfullscreenchange = action((e) => this._fullScreen = vref.webkitDisplayingFullscreen); this._disposers.reactionDisposer?.(); this._disposers.reactionDisposer = reaction( @@ -469,7 +467,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { runInAction(() => { this._screenCapture = !this._screenCapture; }); - this._videoRef!.srcObject = !this._screenCapture ? undefined : await (navigator.mediaDevices as any).getDisplayMedia({ video: true }); + this._videoRef!.srcObject = !this._screenCapture ? null : await navigator.mediaDevices.getDisplayMedia({ video: true }); }, icon: 'expand-arrows-alt', }); @@ -559,9 +557,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { style={this._fullScreen ? this.fullScreenSize() : this.isCropped ? { width: 'max-content', height: 'max-content', transform: `scale(${1 / NumCast(this.layoutDoc._freeform_scale)})`, transformOrigin: 'top left' } : {}} onCanPlay={this.videoLoad} controls={false} - onPlay={() => this.Play()} + onPlay={this.Play} onSeeked={this.updateTimecode} - onPause={() => this.Pause()} + onPause={this.Pause} onClick={this._fullScreen ? () => (this.playing() ? this.Pause() : this.Play()) : e => e.preventDefault()}> <source src={field.url.href} type="video/mp4" /> Not supported. @@ -877,7 +875,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return ( <div className="videoBox-stackPanel" style={{ transition: this.transition, height: `${100 - this.heightPercent}%`, display: this.heightPercent === 100 ? 'none' : '' }}> <CollectionStackedTimeline - ref={action((r: any) => { + ref={action((r: CollectionStackedTimeline) => { this._stackedTimeline = r; })} // eslint-disable-next-line react/jsx-props-no-spreading @@ -968,7 +966,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { focus = (anchor: Doc, options: FocusViewOptions) => (anchor.type === DocumentType.CONFIG ? undefined : this._ffref.current?.focus(anchor, options)); savedAnnotations = () => this._savedAnnotations; render() { - const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding); + const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding) as string; const borderRadius = borderRad?.includes('px') ? `${Number(borderRad.split('px')[0]) / this.scaling()}px` : borderRad; return ( <div diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index da947face..1fd73c226 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -1,6 +1,5 @@ -/* eslint-disable jsx-a11y/control-has-associated-label */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Property } from 'csstype'; import { htmlToText } from 'html-to-text'; import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -23,7 +22,7 @@ import { DocumentType } from '../../documents/DocumentTypes'; import { DocUtils } from '../../documents/DocUtils'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { SnappingManager } from '../../util/SnappingManager'; -import { undoBatch, UndoManager } from '../../util/UndoManager'; +import { undoable, UndoManager } from '../../util/UndoManager'; import { MarqueeOptionsMenu } from '../collections/collectionFreeForm'; import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView'; import { ContextMenu } from '../ContextMenu'; @@ -67,7 +66,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { private _sidebarRef = React.createRef<SidebarAnnos>(); private _searchRef = React.createRef<HTMLInputElement>(); private _searchString = ''; - private _scrollTimer: any; + private _scrollTimer: NodeJS.Timeout | undefined; private _getAnchor: (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => Opt<Doc> = () => undefined; @observable private _webUrl = ''; // url of the src parameter of the embedded iframe but not necessarily the rendered page - eg, when following a link, the rendered page changes but we don't want the src parameter to also change as that would cause an unnecessary re-render. @@ -85,7 +84,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this._marqueeing = val; } @observable private _iframe: HTMLIFrameElement | null = null; - @observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); + @observable private _savedAnnotations = new ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>(); @observable private _scrollHeight = NumCast(this.layoutDoc.scrollHeight); @computed get _url() { return this.webField?.toString() || ''; @@ -123,11 +122,12 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }); } try { + const contentWindow = this._iframe?.contentWindow; if (clear) { - this._iframe?.contentWindow?.getSelection()?.empty(); + contentWindow?.getSelection()?.empty(); } - if (searchString) { - (this._iframe?.contentWindow as any)?.find(searchString, false, bwd, true); + if (searchString && contentWindow && 'find' in contentWindow) { + (contentWindow.find as (str: string, caseSens?: boolean, backward?: boolean, wrapAround?: boolean) => void)(searchString, false, bwd, true); } } catch (e) { console.log('WebBox search error', e); @@ -144,7 +144,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } }; - updateThumb = async () => { + updateIcon = async () => { if (!this._iframe) return; const scrollTop = NumCast(this.layoutDoc._layout_scrollTop); const nativeWidth = NumCast(this.layoutDoc.nativeWidth); @@ -156,7 +156,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this.layoutDoc.thumb = undefined; this.Document.thumbLockout = true; // lock to prevent multiple thumb updates. CreateImage(this._webUrl.endsWith('/') ? this._webUrl.substring(0, this._webUrl.length - 1) : this._webUrl, this._iframe.contentDocument?.styleSheets ?? [], htmlString, nativeWidth, nativeHeight, scrollTop) - .then((dataUrl: any) => { + .then((dataUrl: string) => { if (dataUrl.includes('<!DOCTYPE')) { console.log('BAD DATA IN THUMB CREATION'); return; @@ -174,7 +174,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { ) ); }) - .catch((error: any) => { + .catch((error: object) => { console.error('oops, something went wrong!', error); }); }; @@ -361,8 +361,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return anchor; }; - _textAnnotationCreator: (() => ObservableMap<number, HTMLDivElement[]>) | undefined; - savedAnnotationsCreator: () => ObservableMap<number, HTMLDivElement[]> = () => this._textAnnotationCreator?.() || this._savedAnnotations; + _textAnnotationCreator: (() => ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>) | undefined; + savedAnnotationsCreator: () => ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]> = () => this._textAnnotationCreator?.() || this._savedAnnotations; @action iframeMove = (e: PointerEvent) => { @@ -399,7 +399,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { .transformPoint(e.clientX, e.clientY - NumCast(this.layoutDoc.layout_scrollTop)); if (!this._marqueeref.current?.isEmpty) this._marqueeref.current?.onEnd(theclick[0], theclick[1]); else { - if (!(e.target as any)?.tagName?.includes('INPUT')) this.finishMarquee(theclick[0], theclick[1]); + if (!(e.target as HTMLElement)?.tagName?.includes('INPUT')) this.finishMarquee(theclick[0], theclick[1]); this._getAnchor = AnchorMenu.Instance?.GetAnchor; this.marqueeing = undefined; } @@ -426,11 +426,12 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { sel.empty(); // Chrome else if (sel?.removeAllRanges) sel.removeAllRanges(); // Firefox // bcz: NEED TO unrotate e.clientX and e.clientY - const word = getWordAtPoint(e.target, e.clientX, e.clientY); + const target = e.target as HTMLElement; + const word = target && getWordAtPoint(target, e.clientX, e.clientY); this._setPreviewCursor?.(e.clientX, e.clientY, false, true, this.Document); MarqueeAnnotator.clearAnnotations(this._savedAnnotations); - if (!word && !(e.target as any)?.className?.includes('rangeslider') && !(e.target as any)?.onclick && !(e.target as any)?.parentNode?.onclick) { + if (!word && !target?.className?.includes('rangeslider') && !target?.onclick && !target?.parentElement?.onclick) { if (e.button !== 2) this.marqueeing = [e.clientX, e.clientY]; e.preventDefault(); } @@ -469,8 +470,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { .inverse() .transformPoint(e.clientX, e.clientY - NumCast(this.layoutDoc.layout_scrollTop)); MarqueeAnnotator.clearAnnotations(this._savedAnnotations); - const word = getWordAtPoint(e.target, e.clientX, e.clientY); - if (!word && !(e.target as any)?.className?.includes('rangeslider') && !(e.target as any)?.onclick && !(e.target as any)?.parentNode?.onclick) { + const target = e.target as HTMLElement; + const word = target && getWordAtPoint(target, e.clientX, e.clientY); + if (!word && !target?.className?.includes('rangeslider') && !target?.onclick && !target?.parentElement?.onclick) { this.marqueeing = theclick; this._marqueeref.current?.onInitiateSelection(this.marqueeing); this._iframe?.contentDocument?.addEventListener('pointermove', this.iframeMove); @@ -479,16 +481,16 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }; isFirefox = () => 'InstallTrigger' in window; // navigator.userAgent.indexOf("Chrome") !== -1; - addWebStyleSheet(document: any, styleType: string = 'text/css') { + addWebStyleSheet(document: Document | null | undefined, styleType: string = 'text/css') { if (document) { const style = document.createElement('style'); style.type = styleType; const sheets = document.head.appendChild(style); - return (sheets as any).sheet; + return sheets.sheet; } return undefined; } - addWebStyleSheetRule(sheet: any, selector: any, css: any, selectorPrefix = '.') { + addWebStyleSheetRule(sheet: CSSStyleSheet | null | undefined, selector: string, css: { [key: string]: string }, selectorPrefix = '.') { const propText = typeof css === 'string' ? css @@ -498,7 +500,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return sheet?.insertRule(selectorPrefix + selector + '{' + propText + '}', sheet.cssRules.length); } - _iframetimeout: any = undefined; + _iframetimeout: NodeJS.Timeout | undefined = undefined; @observable _warning = 0; @action iframeLoaded = () => { @@ -520,7 +522,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { if (requrlraw !== this._url.toString()) { if (requrlraw.match(/q=.*&/)?.length && this._url.toString().match(/q=.*&/)?.length) { const matches = requrlraw.match(/[^a-zA-z]q=[^&]*/g); - const newsearch = matches?.lastElement()!; + const newsearch = matches?.lastElement() || ''; if (matches) { requrlraw = requrlraw.substring(0, requrlraw.indexOf(newsearch)); for (let i = 1; i < Array.from(matches)?.length; i++) { @@ -567,11 +569,13 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { ); iframeContent.addEventListener( 'click', - undoBatch( + undoable( action((e: MouseEvent) => { let eleHref = ''; - for (let ele = e.target as any; ele; ele = ele.parentElement) { - eleHref = (typeof ele.href === 'string' ? ele.href : ele.href?.baseVal) || ele.parentElement?.href || eleHref; + for (let ele = e.target as HTMLElement | Element | null; ele; ele = ele.parentElement) { + if (ele instanceof HTMLAnchorElement) { + eleHref = (typeof ele.href === 'string' ? ele.href : eleHref) || (ele.parentElement && 'href' in ele.parentElement ? (ele.parentElement.href as string) : eleHref); + } } const origin = this.webField?.origin; if (eleHref && origin) { @@ -586,7 +590,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this._outerRef.current.scrollLeft = 0; } } - }) + }), + 'follow web link' ) ); iframe.contentDocument.addEventListener('wheel', this.iframeWheel, { passive: false }); @@ -790,7 +795,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }, icon: 'snowflake', }); - funcs.push({ description: 'Create Thumbnail', event: () => this.updateThumb(), icon: 'portrait' }); + !Doc.noviceMode && funcs.push({ description: 'Update Icon', event: () => this.updateIcon(), icon: 'portrait' }); cm.addItem({ description: 'Options...', subitems: funcs, icon: 'asterisk' }); } }; @@ -850,10 +855,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return ( <span className="webBox-htmlSpan" - ref={action((r: any) => { + ref={action((r: HTMLSpanElement) => { if (r) { this._scrollHeight = DivHeight(r); - this.lighttext = Array.from(r.children).some((c: any) => c instanceof HTMLElement && lightOrDark(getComputedStyle(c).color) !== Colors.WHITE); + this.lighttext = Array.from(r.children).some((c: Element) => c instanceof HTMLElement && lightOrDark(getComputedStyle(c).color) !== Colors.WHITE); } })} contentEditable @@ -1001,7 +1006,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }; _innerCollectionView: CollectionFreeFormView | undefined; zoomScaling = () => this._innerCollectionView?.zoomScaling() ?? 1; - setInnerContent = (component: ViewBoxInterface<any>) => { + setInnerContent = (component: ViewBoxInterface<FieldViewProps>) => { this._innerCollectionView = component as CollectionFreeFormView; }; @@ -1083,7 +1088,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { @computed get webpage() { TraceMobx(); const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1; - const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this._props.pointerEvents?.() as any); + const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this._props.pointerEvents?.() as Property.PointerEvents | undefined); const scale = previewScale * (this._props.NativeDimScaling?.() || 1); return ( <div @@ -1154,7 +1159,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick; transparentFilter = () => [...this._props.childFilters(), ClientUtils.TransparentBackgroundFilter]; opaqueFilter = () => [...this._props.childFilters(), ClientUtils.noDragDocsFilter, ...(SnappingManager.CanEmbed ? [] : [ClientUtils.OpaqueBackgroundFilter])]; - childStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string): any => { + childStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string) => { if (doc instanceof Doc && property === StyleProp.PointerEvents) { if (this.inlineTextAnnotations.includes(doc)) return 'none'; } @@ -1168,7 +1173,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { render() { TraceMobx(); const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1; - const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this._props.pointerEvents?.() as any); + const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this._props.pointerEvents?.() as Property.PointerEvents); const scale = previewScale * (this._props.NativeDimScaling?.() || 1); return ( <div @@ -1178,7 +1183,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { pointerEvents: this.pointerEvents(), // position: SnappingManager.IsDragging ? 'absolute' : undefined, }}> - <div className="webBox-background" style={{ backgroundColor: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) }} /> + <div className="webBox-background" style={{ backgroundColor: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string }} /> <div className="webBox-container" style={{ diff --git a/src/client/views/nodes/WebBoxRenderer.js b/src/client/views/nodes/WebBoxRenderer.js index 6fb8f4957..b727107a9 100644 --- a/src/client/views/nodes/WebBoxRenderer.js +++ b/src/client/views/nodes/WebBoxRenderer.js @@ -4,8 +4,6 @@ * @param {StyleSheetList} styleSheets */ const ForeignHtmlRenderer = function (styleSheets) { - const self = this; - /** * * @param {String} binStr @@ -252,15 +250,14 @@ const ForeignHtmlRenderer = function (styleSheets) { */ this.renderToImage = (webUrl, html, width, height, scroll, xoff) => new Promise(resolve => { - const img = new Image(); - img.onload = function () { - console.log(`IMAGE SVG created: ${webUrl}`); - resolve(img); - }; console.log(`BUILDING SVG for: ${webUrl}`); buildSvgDataUri(webUrl, html, width, height, scroll, xoff).then(uri => { + const img = new Image(); img.src = uri; - return img; + img.onload = () => { + console.log(`IMAGE SVG created: ${webUrl}`); + resolve(img); + }; }); }); @@ -272,7 +269,7 @@ const ForeignHtmlRenderer = function (styleSheets) { * @return {Promise<Image>} */ this.renderToCanvas = (webUrl, html, width, height, scroll, xoff, oversample) => - self.renderToImage(webUrl, html, width, height, scroll, xoff).then(img => { + this.renderToImage(webUrl, html, width, height, scroll, xoff).then(img => { const canvas = document.createElement('canvas'); canvas.width = img.width * oversample; canvas.height = img.height * oversample; @@ -290,8 +287,7 @@ const ForeignHtmlRenderer = function (styleSheets) { * @return {Promise<String>} */ this.renderToBase64Png = (webUrl, html, width, height, scroll, xoff, oversample) => - self - .renderToCanvas(webUrl, html, width, height, scroll, xoff, oversample) // + this.renderToCanvas(webUrl, html, width, height, scroll, xoff, oversample) // .then(canvas => canvas.toDataURL('image/png')); }; diff --git a/src/client/views/nodes/audio/AudioWaveform.tsx b/src/client/views/nodes/audio/AudioWaveform.tsx index 2d1d3d7db..297deb575 100644 --- a/src/client/views/nodes/audio/AudioWaveform.tsx +++ b/src/client/views/nodes/audio/AudioWaveform.tsx @@ -39,7 +39,7 @@ export class AudioWaveform extends ObservableReactComponent<AudioWaveformProps> public static NUMBER_OF_BUCKETS = 100; // number of buckets data is divided into to draw waveform lines _disposer: IReactionDisposer | undefined; - constructor(props: any) { + constructor(props: AudioWaveformProps) { super(props); makeObservable(this); } diff --git a/src/client/views/nodes/formattedText/DashDocCommentView.tsx b/src/client/views/nodes/formattedText/DashDocCommentView.tsx index 3ec49fa27..0304ddc86 100644 --- a/src/client/views/nodes/formattedText/DashDocCommentView.tsx +++ b/src/client/views/nodes/formattedText/DashDocCommentView.tsx @@ -5,18 +5,20 @@ import { IReactionDisposer, computed, reaction } from 'mobx'; import { Doc } from '../../../../fields/Doc'; import { DocServer } from '../../../DocServer'; import { NumCast } from '../../../../fields/Types'; +import { Node } from 'prosemirror-model'; +import { EditorView } from 'prosemirror-view'; interface IDashDocCommentViewInternal { docId: string; - view: any; - getPos: any; + view: EditorView; + getPos: () => number; setHeight: (height: number) => void; } export class DashDocCommentViewInternal extends React.Component<IDashDocCommentViewInternal> { _reactionDisposer: IReactionDisposer | undefined; - constructor(props: any) { + constructor(props: IDashDocCommentViewInternal) { super(props); this.onPointerLeaveCollapsed = this.onPointerLeaveCollapsed.bind(this); this.onPointerEnterCollapsed = this.onPointerEnterCollapsed.bind(this); @@ -43,19 +45,19 @@ export class DashDocCommentViewInternal extends React.Component<IDashDocCommentV return DocServer.GetRefField(this.props.docId); } - onPointerLeaveCollapsed = (e: any) => { + onPointerLeaveCollapsed = (e: React.PointerEvent) => { this._dashDoc.then(async dashDoc => dashDoc instanceof Doc && Doc.linkFollowUnhighlight()); e.preventDefault(); e.stopPropagation(); }; - onPointerEnterCollapsed = (e: any) => { + onPointerEnterCollapsed = (e: React.PointerEvent) => { this._dashDoc.then(async dashDoc => dashDoc instanceof Doc && Doc.linkFollowHighlight(dashDoc, false)); e.preventDefault(); e.stopPropagation(); }; - onPointerUpCollapsed = (e: any) => { + onPointerUpCollapsed = (e: React.PointerEvent) => { const target = this.targetNode(); if (target) { @@ -65,7 +67,7 @@ export class DashDocCommentViewInternal extends React.Component<IDashDocCommentV setTimeout(() => { expand && this._dashDoc.then(async dashDoc => dashDoc instanceof Doc && Doc.linkFollowHighlight(dashDoc)); try { - this.props.view.dispatch(this.props.view.state.tr.setSelection(TextSelection.create(this.props.view.state.tr.doc, this.props.getPos() + (expand ? 2 : 1)))); + this.props.view.dispatch(this.props.view.state.tr.setSelection(TextSelection.create(this.props.view.state.tr.doc, (this.props.getPos() ?? 0) + (expand ? 2 : 1)))); } catch (err) { /* empty */ } @@ -74,7 +76,7 @@ export class DashDocCommentViewInternal extends React.Component<IDashDocCommentV e.stopPropagation(); }; - onPointerDownCollapsed = (e: any) => { + onPointerDownCollapsed = (e: React.PointerEvent) => { e.stopPropagation(); }; @@ -84,7 +86,7 @@ export class DashDocCommentViewInternal extends React.Component<IDashDocCommentV for (let i = this.props.getPos() + 1; i < state.doc.content.size; i++) { const m = state.doc.nodeAt(i); if (m && m.type === state.schema.nodes.dashDoc && m.attrs.docId === this.props.docId) { - return { node: m, pos: i, hidden: m.attrs.hidden } as { node: any; pos: number; hidden: boolean }; + return { node: m, pos: i, hidden: m.attrs.hidden } as { node: Node; pos: number; hidden: boolean }; } } @@ -119,10 +121,10 @@ export class DashDocCommentViewInternal extends React.Component<IDashDocCommentV // the comment can be toggled on/off with the '<-' text anchor. export class DashDocCommentView { dom: HTMLDivElement; // container for label and value - root: any; - node: any; + root: ReactDOM.Root; + node: Node; - constructor(node: any, view: any, getPos: any) { + constructor(node: Node, view: EditorView, getPos: () => number | undefined) { this.node = node; this.dom = document.createElement('div'); this.dom.style.width = node.attrs.width; @@ -130,22 +132,22 @@ export class DashDocCommentView { this.dom.style.fontWeight = 'bold'; this.dom.style.position = 'relative'; this.dom.style.display = 'inline-block'; - this.dom.onkeypress = function (e: any) { + this.dom.onkeypress = function (e) { e.stopPropagation(); }; - this.dom.onkeydown = function (e: any) { + this.dom.onkeydown = function (e) { e.stopPropagation(); }; - this.dom.onkeyup = function (e: any) { + this.dom.onkeyup = function (e) { e.stopPropagation(); }; - this.dom.onmousedown = function (e: any) { + this.dom.onmousedown = function (e) { e.stopPropagation(); }; + const getPosition = () => getPos() ?? 0; this.root = ReactDOM.createRoot(this.dom); - this.root.render(<DashDocCommentViewInternal view={view} getPos={getPos} setHeight={this.setHeight} docId={node.attrs.docId} />); - (this as any).dom = this.dom; + this.root.render(<DashDocCommentViewInternal view={view} getPos={getPosition} setHeight={this.setHeight} docId={node.attrs.docId} />); } setHeight = (hgt: number) => { diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx index 93371685d..e7f2cdba8 100644 --- a/src/client/views/nodes/formattedText/DashDocView.tsx +++ b/src/client/views/nodes/formattedText/DashDocView.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import { NodeSelection } from 'prosemirror-state'; @@ -16,6 +15,8 @@ import { ObservableReactComponent } from '../../ObservableReactComponent'; import { DocumentView } from '../DocumentView'; import { FocusViewOptions } from '../FocusViewOptions'; import { FormattedTextBox } from './FormattedTextBox'; +import { EditorView } from 'prosemirror-view'; +import { Node } from 'prosemirror-model'; const horizPadding = 3; // horizontal padding to container to allow cursor to show up on either side. interface IDashDocViewInternal { @@ -26,9 +27,9 @@ interface IDashDocViewInternal { height: string; hidden: boolean; fieldKey: string; - view: any; - node: any; - getPos: any; + view: EditorView; + node: Node; + getPos: () => number; } @observer @@ -109,7 +110,7 @@ export class DashDocViewInternal extends ObservableReactComponent<IDashDocViewIn }; outerFocus = (target: Doc, options: FocusViewOptions) => this._textBox.focus(target, options); // ideally, this would scroll to show the focus target - onKeyDown = (e: any) => { + onKeyDown = (e: React.KeyboardEvent) => { e.stopPropagation(); if (e.key === 'Tab' || e.key === 'Enter') { e.preventDefault(); @@ -176,29 +177,31 @@ export class DashDocViewInternal extends ObservableReactComponent<IDashDocViewIn export class DashDocView { dom: HTMLSpanElement; // container for label and value - root: any; + root: ReactDOM.Root; - constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) { + constructor(node: Node, view: EditorView, getPos: () => number | undefined, tbox: FormattedTextBox) { this.dom = document.createElement('span'); this.dom.style.position = 'relative'; this.dom.style.textIndent = '0'; this.dom.style.width = (+node.attrs.width.toString().replace('px', '') + horizPadding).toString(); this.dom.style.height = node.attrs.height; this.dom.style.display = node.attrs.hidden ? 'none' : 'inline-block'; - (this.dom.style as any).float = node.attrs.float; - this.dom.onkeypress = function (e: any) { + this.dom.style.float = node.attrs.float; + this.dom.onkeypress = function (e: KeyboardEvent) { e.stopPropagation(); }; - this.dom.onkeydown = function (e: any) { + this.dom.onkeydown = function (e: KeyboardEvent) { e.stopPropagation(); }; - this.dom.onkeyup = function (e: any) { + this.dom.onkeyup = function (e: KeyboardEvent) { e.stopPropagation(); }; - this.dom.onmousedown = function (e: any) { + this.dom.onmousedown = function (e: MouseEvent) { e.stopPropagation(); }; + const getPosition = () => getPos() ?? 0; + this.root = ReactDOM.createRoot(this.dom); this.root.render( <DashDocViewInternal @@ -211,7 +214,7 @@ export class DashDocView { tbox={tbox} view={view} node={node} - getPos={getPos} + getPos={getPosition} /> ); } diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index 9903d0e8a..f0313fba4 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -1,6 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -/* eslint-disable jsx-a11y/control-has-associated-label */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; @@ -26,6 +23,8 @@ import { ObservableReactComponent } from '../../ObservableReactComponent'; import { OpenWhere } from '../OpenWhere'; import './DashFieldView.scss'; import { FormattedTextBox } from './FormattedTextBox'; +import { Node } from 'prosemirror-model'; +import { EditorView } from 'prosemirror-view'; @observer export class DashFieldViewMenu extends AntimodeMenu<AntimodeMenuProps> { @@ -34,7 +33,7 @@ export class DashFieldViewMenu extends AntimodeMenu<AntimodeMenuProps> { static createFieldView: (e: React.MouseEvent) => void = emptyFunction; static toggleFieldHide: () => void = emptyFunction; static toggleValueHide: () => void = emptyFunction; - constructor(props: any) { + constructor(props: AntimodeMenuProps) { super(props); DashFieldViewMenu.Instance = this; } @@ -100,8 +99,8 @@ interface IDashFieldViewInternal { height: number; editable: boolean; nodeSelected: () => boolean; - node: any; - getPos: any; + node: Node; + getPos: () => number; unclickable: () => boolean; } @@ -274,7 +273,9 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi <select className="dashFieldView-select" tabIndex={-1} defaultValue={this._dashDoc && Field.toKeyValueString(this._dashDoc, this._fieldKey)} onChange={this.selectVal}> <option value="-unset-">-unset-</option> {this.values.map(val => ( - <option value={val.value}>{val.label}</option> + <option key={val.value} value={val.value}> + {val.label} + </option> ))} </select> )} @@ -284,16 +285,17 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi } export class DashFieldView { dom: HTMLDivElement; // container for label and value - root: any; - node: any; + root: ReactDOM.Root; + node: Node; tbox: FormattedTextBox; - getpos: any; + getpos: () => number | undefined; @observable _nodeSelected = false; NodeSelected = () => this._nodeSelected; - unclickable = () => !this.tbox._props.rootSelected?.() && this.node.marks.some((m: any) => m.type === this.tbox.EditorView?.state.schema.marks.linkAnchor && m.attrs.noPreview); - constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) { + unclickable = () => !this.tbox._props.rootSelected?.() && this.node.marks.some(m => m.type === this.tbox.EditorView?.state.schema.marks.linkAnchor && m.attrs.noPreview); + constructor(node: Node, view: EditorView, getPos: () => number | undefined, tbox: FormattedTextBox) { makeObservable(this); + const getPosition = () => getPos() ?? 0; this.node = node; this.tbox = tbox; this.getpos = getPos; @@ -312,7 +314,7 @@ export class DashFieldView { const editor = tbox.EditorView; if (editor) { const { state } = editor; - for (let i = this.getpos() + 1; i < state.doc.content.size; i++) { + for (let i = getPosition() + 1; i < state.doc.content.size; i++) { if (state.doc.nodeAt(i)?.type.name === state.schema.nodes.dashField.name) { editor.dispatch(state.tr.setSelection(new NodeSelection(state.doc.resolve(i)))); return; @@ -321,10 +323,10 @@ export class DashFieldView { } } }; - this.dom.onkeyup = function (e: any) { + this.dom.onkeyup = function (e: KeyboardEvent) { e.stopPropagation(); }; - this.dom.onmousedown = function (e: any) { + this.dom.onmousedown = function (e: MouseEvent) { e.stopPropagation(); }; @@ -333,7 +335,7 @@ export class DashFieldView { <DashFieldViewInternal node={node} unclickable={this.unclickable} - getPos={getPos} + getPos={getPosition} fieldKey={node.attrs.fieldKey} docId={node.attrs.docId} width={node.attrs.width} diff --git a/src/client/views/nodes/formattedText/EquationEditor.tsx b/src/client/views/nodes/formattedText/EquationEditor.tsx index d9b1a2cf8..8bb4a0a26 100644 --- a/src/client/views/nodes/formattedText/EquationEditor.tsx +++ b/src/client/views/nodes/formattedText/EquationEditor.tsx @@ -3,15 +3,12 @@ import React, { Component, createRef } from 'react'; // Import JQuery, required for the functioning of the equation editor import $ from 'jquery'; - import './EquationEditor.scss'; -// @ts-ignore -window.jQuery = $; - -// @ts-ignore +// eslint-disable-next-line @typescript-eslint/no-explicit-any +(window as any).jQuery = $; require('mathquill/build/mathquill'); - +// eslint-disable-next-line @typescript-eslint/no-explicit-any (window as any).MathQuill = (window as any).MathQuill.getInterface(1); type EquationEditorProps = { @@ -36,17 +33,18 @@ type EquationEditorProps = { * @extends {Component<EquationEditorProps>} */ class EquationEditor extends Component<EquationEditorProps> { - element: any; + element: React.RefObject<HTMLSpanElement>; + // eslint-disable-next-line @typescript-eslint/no-explicit-any mathField: any; ignoreEditEvents: number; // 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: any) { + constructor(props: EquationEditorProps) { super(props); - this.element = createRef(); + this.element = createRef<HTMLSpanElement>(); this.mathField = null; // MathJax apparently fire 2 edit events on startup. @@ -74,6 +72,7 @@ class EquationEditor extends Component<EquationEditorProps> { autoOperatorNames, }; + // eslint-disable-next-line @typescript-eslint/no-explicit-any this.mathField = (window as any).MathQuill.MathField(this.element.current, config); this.mathField.latex(value || ''); } diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx index 5167c8f2a..df1421a33 100644 --- a/src/client/views/nodes/formattedText/EquationView.tsx +++ b/src/client/views/nodes/formattedText/EquationView.tsx @@ -1,22 +1,23 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ import { IReactionDisposer } from 'mobx'; import { observer } from 'mobx-react'; +import { Node } from 'prosemirror-model'; import { TextSelection } from 'prosemirror-state'; +import { EditorView } from 'prosemirror-view'; import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; import { Doc } from '../../../../fields/Doc'; +import { DocData } from '../../../../fields/DocSymbols'; import { StrCast } from '../../../../fields/Types'; import './DashFieldView.scss'; import EquationEditor from './EquationEditor'; import { FormattedTextBox } from './FormattedTextBox'; -import { DocData } from '../../../../fields/DocSymbols'; interface IEquationViewInternal { fieldKey: string; tbox: FormattedTextBox; width: number; height: number; - getPos: () => number; + getPos: () => number | undefined; setEditor: (editor: EquationEditor | undefined) => void; } @@ -27,7 +28,7 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal> _fieldKey: string; _ref: React.RefObject<EquationEditor> = React.createRef(); - constructor(props: any) { + constructor(props: IEquationViewInternal) { super(props); this._fieldKey = props.fieldKey; this._textBoxDoc = props.tbox.Document; @@ -46,7 +47,7 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal> className="equationView" onKeyDown={e => { if (e.key === 'Enter') { - this.props.tbox.EditorView!.dispatch(this.props.tbox.EditorView!.state.tr.setSelection(new TextSelection(this.props.tbox.EditorView!.state.doc.resolve(this.props.getPos() + 1)))); + this.props.tbox.EditorView!.dispatch(this.props.tbox.EditorView!.state.tr.setSelection(new TextSelection(this.props.tbox.EditorView!.state.doc.resolve((this.props.getPos() ?? 0) + 1)))); this.props.tbox.EditorView!.focus(); e.preventDefault(); } @@ -63,7 +64,7 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal> <EquationEditor ref={this._ref} value={StrCast(this._textBoxDoc[DocData][this._fieldKey])} - onChange={(str: any) => { + onChange={str => { this._textBoxDoc[DocData][this._fieldKey] = str; }} autoCommands="pi theta sqrt sum prod alpha beta gamma rho" @@ -77,25 +78,27 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal> export class EquationView { dom: HTMLDivElement; // container for label and value - root: any; + root: ReactDOM.Root; tbox: FormattedTextBox; - view: any; - constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) { + view: EditorView; + _editor: EquationEditor | undefined; + getPos: () => number | undefined; + constructor(node: Node, view: EditorView, getPos: () => number | undefined, tbox: FormattedTextBox) { this.tbox = tbox; this.view = view; + this.getPos = getPos; this.dom = document.createElement('div'); this.dom.style.width = node.attrs.width; this.dom.style.height = node.attrs.height; this.dom.style.position = 'relative'; this.dom.style.display = 'inline-block'; - this.dom.onmousedown = function (e: any) { + this.dom.onmousedown = (e: MouseEvent) => { e.stopPropagation(); }; this.root = ReactDOM.createRoot(this.dom); this.root.render(<EquationViewInternal fieldKey={node.attrs.fieldKey} width={node.attrs.width} height={node.attrs.height} getPos={getPos} setEditor={this.setEditor} tbox={tbox} />); } - _editor: EquationEditor | undefined; setEditor = (editor?: EquationEditor) => { this._editor = editor; }; @@ -106,6 +109,7 @@ export class EquationView { this._editor?.mathField.focus(); } selectNode() { + this.view.dispatch(this.view.state.tr.setSelection(new TextSelection(this.view.state.doc.resolve(this.getPos() ?? 0)))); this.tbox._applyingChange = this.tbox.fieldKey; // setting focus will make prosemirror lose focus, which will cause it to change its selection to a text selection, which causes this view to get rebuilt but it's no longer node selected, so the equationview won't have focus setTimeout(() => { this._editor?.mathField.focus(); diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 5b435e44a..a88bd8920 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1,9 +1,8 @@ /* eslint-disable no-use-before-define */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; -import { action, computed, IReactionDisposer, makeObservable, observable, ObservableSet, reaction, runInAction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, ObservableSet, reaction } from 'mobx'; import { observer } from 'mobx-react'; import { baseKeymap, selectAll } from 'prosemirror-commands'; import { history } from 'prosemirror-history'; @@ -14,7 +13,7 @@ import { EditorState, NodeSelection, Plugin, Selection, TextSelection, Transacti import { EditorView, NodeViewConstructor } from 'prosemirror-view'; import * as React from 'react'; import { BsMarkdownFill } from 'react-icons/bs'; -import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, ClientUtils, DivWidth, returnFalse, returnZero, setupMoveUpEvents, smoothScroll, StopEvent } from '../../../../ClientUtils'; +import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, ClientUtils, DivWidth, returnFalse, returnZero, setupMoveUpEvents, simMouseEvent, smoothScroll, StopEvent } from '../../../../ClientUtils'; import { DateField } from '../../../../fields/DateField'; import { CreateLinkToActiveAudio, Doc, DocListCast, Field, FieldType, Opt, StrListCast } from '../../../../fields/Doc'; import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, DocCss, DocData, ForceServerWrite, UpdatingFromServer } from '../../../../fields/DocSymbols'; @@ -76,6 +75,21 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB public static LayoutString(fieldStr: string) { return FieldView.LayoutString(FormattedTextBox, fieldStr); } + public static MakeConfig(rules?: RichTextRules, props?: FormattedTextBoxProps) { + const keymapping = buildKeymap(schema, props ?? {}); + return { + schema, + plugins: [ + inputRules(rules?.inpRules ?? { rules: [] }), + ...(props ? [FormattedTextBox.richTextMenuPlugin(props)] : []), + history(), + keymap(keymapping), + keymap(baseKeymap), + new Plugin({ props: { attributes: { class: 'ProseMirror-example-setup-style' } } }), + new Plugin({ view: () => new FormattedTextBoxComment() }), + ], + }; + } private static nodeViews: (self: FormattedTextBox) => { [key: string]: NodeViewConstructor }; /** * Initialize the class with all the plugin node view components @@ -91,12 +105,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB static _bulletStyleSheet = addStyleSheet(); static _userStyleSheet = addStyleSheet(); static _hadSelection: boolean = false; + private _oldWheel: HTMLDivElement | null = null; private _selectionHTML: string | undefined; private _sidebarRef = React.createRef<SidebarAnnos>(); private _sidebarTagRef = React.createRef<React.Component>(); private _ref: React.RefObject<HTMLDivElement> = React.createRef(); private _scrollRef: HTMLDivElement | null = null; - private _editorView: Opt<EditorView>; + private _editorView: Opt<EditorView & { TextView?: FormattedTextBox | undefined }>; public _applyingChange: string = ''; private _inDrop = false; private _finishingLink = false; @@ -108,79 +123,35 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB private _recordingStart: number = 0; private _ignoreScroll = false; private _focusSpeed: Opt<number>; - private _keymap: any = undefined; private _rules: RichTextRules | undefined; private _forceUncollapse = true; // if the cursor doesn't move between clicks, then the selection will disappear for some reason. This flags the 2nd click as happening on a selection which allows bullet points to toggle private _break = true; public ProseRef?: HTMLDivElement; - public get EditorView() { - return this._editorView; - } - public get SidebarKey() { - return this.fieldKey + '_sidebar'; - } - @computed get allSidebarDocs() { - return DocListCast(this.dataDoc[this.SidebarKey]); - } - - @computed get noSidebar() { - return this.DocumentView?.()._props.hideDecorationTitle || this._props.noSidebar || this.Document._layout_noSidebar; - } - @computed get layout_sidebarWidthPercent() { - return this._showSidebar ? '20%' : StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); - } - @computed get sidebarColor() { - return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.fieldKey + '_backgroundColor'], '#e4e4e4')); - } - @computed get layout_autoHeight() { - return (this._props.forceAutoHeight || this.layoutDoc._layout_autoHeight) && !this._props.ignoreAutoHeight; - } - @computed get textHeight() { - return NumCast(this.dataDoc[this.fieldKey + '_height']); - } - @computed get scrollHeight() { - return NumCast(this.dataDoc[this.fieldKey + '_scrollHeight']); - } - @computed get sidebarHeight() { - return !this.sidebarWidth() ? 0 : NumCast(this.dataDoc[this.SidebarKey + '_height']); - } - @computed get titleHeight() { - return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.HeaderMargin) || 0; - } - @computed get layout_autoHeightMargins() { - return this.titleHeight + NumCast(this.layoutDoc._layout_autoHeightMargins); - } - @computed get _recordingDictation() { - return this.dataDoc?.mediaState === mediaState.Recording; - } set _recordingDictation(value) { !this.dataDoc[`${this.fieldKey}_recordingSource`] && (this.dataDoc.mediaState = value ? mediaState.Recording : undefined); } + @computed get _recordingDictation() { return this.dataDoc?.mediaState === mediaState.Recording; } // prettier-ignore + @computed get allSidebarDocs() { return DocListCast(this.dataDoc[this.SidebarKey]); } // prettier-ignore + @computed get noSidebar() { return this.DocumentView?.()._props.hideDecorationTitle || this._props.noSidebar || this.Document._layout_noSidebar; } // prettier-ignore + @computed get layout_sidebarWidthPercent() { return this._showSidebar ? '20%' : StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); } // prettier-ignore + @computed get sidebarColor() { return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.fieldKey + '_backgroundColor'], '#e4e4e4')); } // prettier-ignore + @computed get layout_autoHeight() { return (this._props.forceAutoHeight || this.layoutDoc._layout_autoHeight) && !this._props.ignoreAutoHeight; } // prettier-ignore + @computed get textHeight() { return NumCast(this.dataDoc[this.fieldKey + '_height']); } // prettier-ignore + @computed get scrollHeight() { return NumCast(this.dataDoc[this.fieldKey + '_scrollHeight']); } // prettier-ignore + @computed get sidebarHeight() { return !this.sidebarWidth() ? 0 : NumCast(this.dataDoc[this.SidebarKey + '_height']); } // prettier-ignore + @computed get titleHeight() { return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.HeaderMargin) as number || 0; } // prettier-ignore + @computed get layout_autoHeightMargins() { return this.titleHeight + NumCast(this.layoutDoc._layout_autoHeightMargins); } // prettier-ignore @computed get config() { - this._keymap = buildKeymap(schema, this._props); this._rules = new RichTextRules(this.Document, this); - return { - schema, - plugins: [ - inputRules(this._rules.inpRules), - this.richTextMenuPlugin(), - history(), - keymap(this._keymap), - keymap(baseKeymap), - new Plugin({ props: { attributes: { class: 'ProseMirror-example-setup-style' } } }), - new Plugin({ - view(/* editorView */) { - return new FormattedTextBoxComment(); - }, - }), - ], - }; + return FormattedTextBox.MakeConfig(this._rules, this._props); } - // State for GPT - @observable - private gptRes: string = ''; - + public get EditorView() { + return this._editorView; + } + public get SidebarKey() { + return this.fieldKey + '_sidebar'; + } public makeAIFlashcards: () => void = unimplementedFunction; public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined; @@ -205,9 +176,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB if (state && a1 && a2 && this._editorView) { this.removeDocument(a1); this.removeDocument(a2); - let allFoundLinkAnchors: any[] = []; - state.doc.nodesBetween(0, state.doc.nodeSize - 2, (node: any /* , pos: number, parent: any */) => { - const foundLinkAnchors = findLinkMark(node.marks)?.attrs.allAnchors.filter((a: any) => a.anchorId === a1[Id] || a.anchorId === a2[Id]) || []; + let allFoundLinkAnchors: { href: string; title: string; anchorId: string }[] = []; + state.doc.nodesBetween(0, state.doc.nodeSize - 2, (node: Node /* , pos: number, parent: any */) => { + const foundLinkAnchors = findLinkMark(node.marks)?.attrs.allAnchors.filter((a: { href: string; title: string; anchorId: string }) => a.anchorId === a1[Id] || a.anchorId === a2[Id]) || []; allFoundLinkAnchors = foundLinkAnchors.length ? foundLinkAnchors : allFoundLinkAnchors; return true; }); @@ -255,7 +226,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB const target = this._sidebarRef.current?.anchorMenuClick(anchor); if (target) { anchor.followLinkAudio = true; - let stopFunc: any; + let stopFunc: () => void = emptyFunction; const targetData = target[DocData]; targetData.mediaState = mediaState.Recording; DictationManager.recordAudioAnnotation(targetData, Doc.LayoutFieldKey(target), stop => { stopFunc = stop }); // prettier-ignore @@ -273,10 +244,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB } }); }; - AnchorMenu.Instance.Highlight = undoable((color: string) => { - this._editorView?.state && RichTextMenu.Instance?.setFontField(color, 'fontHighlight'); - return undefined; - }, 'highlght text'); + AnchorMenu.Instance.Highlight = undoable((color: string) => this._editorView?.state && RichTextMenu.Instance?.setFontField(color, 'fontHighlight'), 'highlght text'); AnchorMenu.Instance.onMakeAnchor = () => this.getAnchor(true); AnchorMenu.Instance.StartCropDrag = unimplementedFunction; /** @@ -292,7 +260,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB return target; }; - DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(this.DocumentView?.()!, () => this.getAnchor(true), targetCreator), e.pageX, e.pageY); + const docView = this.DocumentView?.(); + docView && DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(docView, () => this.getAnchor(true), targetCreator), e.pageX, e.pageY); }); AnchorMenu.Instance.setSelectedText(window.getSelection()?.toString() ?? ''); @@ -345,7 +314,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB if ([AclEdit, AclAdmin, AclSelfEdit, AclAugment].includes(effectiveAcl)) { const accumTags = [] as string[]; - state.tr.doc.nodesBetween(0, state.doc.content.size, (node: any /* , pos: number, parent: any */) => { + state.tr.doc.nodesBetween(0, state.doc.content.size, (node: Node /* , pos: number, parent: any */) => { if (node.type === schema.nodes.dashField && node.attrs.fieldKey.startsWith('#')) { accumTags.push(node.attrs.fieldKey); } @@ -410,8 +379,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB }); if (this._editorView && linkTime) { const { state } = this._editorView; - const { path } = state.selection.$from as any; - if (linkAnchor && path[path.length - 3].type !== state.schema.nodes.code_block) { + const node = state.selection.$from.node(); + if (linkAnchor && node.type !== state.schema.nodes.code_block) { const time = linkTime + Date.now() / 1000 - this._recordingStart / 1000; this._break = false; const { from } = state.selection; @@ -476,7 +445,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB * function of a freeform view that is driven by the text box's text. The include directive will copy the code of the published * document into the code being evaluated. */ - hyperlinkTerm = (trIn: any, target: Doc, newAutoLinks: Set<Doc>) => { + hyperlinkTerm = (trIn: Transaction, target: Doc, newAutoLinks: Set<Doc>) => { let tr = trIn; const editorView = this._editorView; if (editorView && !Doc.AreProtosEqual(target, this.Document)) { @@ -493,7 +462,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB ) { const splitter = editorView.state.schema.marks.splitter.create({ id: Utils.GenerateGuid() }); tr = tr.addMark(sel.from, sel.to, splitter); - tr.doc.nodesBetween(sel.from, sel.to, (node: any, pos: number /* , parent: any */) => { + tr.doc.nodesBetween(sel.from, sel.to, (node: Node, pos: number /* , parent: any */) => { if (node.firstChild === null && !node.marks.find((m: Mark) => m.type.name === schema.marks.noAutoLinkAnchor.name) && node.marks.find((m: Mark) => m.type.name === schema.marks.splitter.name)) { alink = alink ?? @@ -646,15 +615,15 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB if (node.isBlock) { // tslint:disable-next-line: prefer-for-of - for (let i = 0; i < (context.content as any).content.length; i++) { - const result = this.getNodeEndpoints((context.content as any).content[i], node); + for (let i = 0; i < context.content.childCount; i++) { + const result = this.getNodeEndpoints(context.content.child(i), node); if (result) { return { from: result.from + offset + (context.type.name === 'doc' ? 0 : 1), to: result.to + offset + (context.type.name === 'doc' ? 0 : 1), }; } - offset += (context.content as any).content[i].nodeSize; + offset += context.content.child(i).nodeSize; } } return null; @@ -818,10 +787,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB specificContextMenu = (e: React.MouseEvent): void => { const cm = ContextMenu.Instance; - let target = e.target as any; // hrefs are stored on the database of the <a> node that wraps the hyerlink <span> - while (target && !target.dataset?.targethrefs) target = target.parentElement; + let target: Element | HTMLElement | null = e.target as HTMLElement; // hrefs are stored on the database of the <a> node that wraps the hyerlink <span> + while (target && (!(target instanceof HTMLElement) || !target.dataset?.targethrefs)) target = target.parentElement; const editor = this._editorView; - if (editor && target && !(e.nativeEvent as any).dash) { + if (editor && target && !(e.nativeEvent instanceof simMouseEvent ? e.nativeEvent.dash : false)) { const hrefs = (target.dataset?.targethrefs as string) ?.trim() .split(' ') @@ -830,10 +799,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB .lastElement() .replace(Doc.localServerPath(), '') .split('?')[0]; - const deleteMarkups = undoBatch(() => { + const deleteMarkups = undoable(() => { const { selection } = editor.state; editor.dispatch(editor.state.tr.removeMark(selection.from, selection.to, editor.state.schema.marks.linkAnchor)); - }); + }, 'delete markups'); e.persist(); anchorDoc && DocServer.GetRefField(anchorDoc).then( @@ -857,21 +826,21 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB const changeItems: ContextMenuProps[] = []; changeItems.push({ description: 'plain', - event: undoBatch(() => { + event: undoable(() => { Doc.setNativeView(this.Document); this.layoutDoc.layout_autoHeightMargins = undefined; - }), + }, 'set plain view'), icon: 'eye', }); changeItems.push({ description: 'metadata', - event: undoBatch(() => { + event: undoable(() => { this.dataDoc.layout_meta = Cast(Doc.UserDoc().emptyHeader, Doc, null)?.layout; this.Document.layout_fieldKey = 'layout_meta'; setTimeout(() => { this.layoutDoc._header_height = this.layoutDoc._layout_autoHeightMargins = 50; }, 50); - }), + }, 'set metadata view'), icon: 'eye', }); const noteTypesDoc = Cast(Doc.UserDoc().template_notes, Doc, null); @@ -879,11 +848,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB const icon: IconProp = StrCast(note.icon) as IconProp; changeItems.push({ description: StrCast(note.title), - event: undoBatch(() => { - this.layoutDoc.layout_autoHeightMargins = undefined; - Doc.setNativeView(this.Document); - DocUtils.makeCustomViewClicked(this.Document, Docs.Create.TreeDocument, StrCast(note.title), note); - }), + event: undoable( + () => { + this.layoutDoc.layout_autoHeightMargins = undefined; + Doc.setNativeView(this.Document); + DocUtils.makeCustomViewClicked(this.Document, Docs.Create.TreeDocument, StrCast(note.title), note); + }, + `set ${StrCast(note.title)} view}` + ), icon: icon, }); }); @@ -905,7 +877,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB }) ); const appearance = cm.findByDescription('Appearance...'); - const appearanceItems: ContextMenuProps[] = appearance && 'subitems' in appearance ? appearance.subitems : []; + const appearanceItems = appearance?.subitems ?? []; appearanceItems.push({ description: !this.Document._layout_noSidebar ? 'Hide Sidebar Handle' : 'Show Sidebar Handle', @@ -960,7 +932,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB !appearance && appearanceItems.length && cm.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' }); const options = cm.findByDescription('Options...'); - const optionItems = options && 'subitems' in options ? options.subitems : []; + const optionItems = options?.subitems ?? []; optionItems.push({ description: `Toggle auto update from template`, event: () => { @@ -989,7 +961,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB }); !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' }); const help = cm.findByDescription('Help...'); - const helpItems = help && 'subitems' in help ? help.subitems : []; + const helpItems = help?.subitems ?? []; helpItems.push({ description: `show markdown options`, event: () => RTFMarkup.Instance.setOpen(true), icon: <BsMarkdownFill /> }); !help && cm.addItem({ description: 'Help...', subitems: helpItems, icon: 'eye' }); }; @@ -1107,7 +1079,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB }); const href = targetHref ?? Doc.localServerPath(anchor); if (anchor !== anchorDoc && addAsAnnotation) this.addDocument(anchor); - tr.doc.nodesBetween(selection.from, selection.to, (node: any, pos: number /* , parent: any */) => { + tr.doc.nodesBetween(selection.from, selection.to, (node: Node, pos: number /* , parent: any */) => { if (node.firstChild === null && node.marks.find((m: Mark) => m.type.name === schema.marks.splitter.name)) { const allAnchors = [{ href, title, anchorId: anchor[Id] }]; allAnchors.push(...(node.marks.find((m: Mark) => m.type.name === schema.marks.linkAnchor.name)?.attrs.allAnchors ?? [])); @@ -1184,17 +1156,17 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB this._didScroll = false; // assume we don't need to scroll. if we do, this will get set to true in handleScrollToSelextion when we dispatch the setSelection below if (this._editorView && textAnchorId) { - const editor = this._editorView; - const ret = findAnchorFrag(editor.state.doc.content, editor); + const { state } = this._editorView; + const ret = findAnchorFrag(state.doc.content, this._editorView); - const content = (ret.frag as any)?.content; - if ((ret.frag.size || (content?.length && content[0].type === this._editorView.state.schema.nodes.dashDoc) || (content?.length && content[0].type === this._editorView.state.schema.nodes.audiotag)) && ret.start >= 0) { + const firstChild = ret.frag.childCount ? ret.frag.child(0) : undefined; + if (ret.start >= 0 && (ret.frag.size || (firstChild && [state.schema.nodes.dashDoc, state.schema.nodes.audioTag].includes(firstChild.type)))) { !options.instant && (this._focusSpeed = focusSpeed); - let selection = TextSelection.near(editor.state.doc.resolve(ret.start)); // default to near the start + let selection = TextSelection.near(state.doc.resolve(ret.start)); // default to near the start if (ret.frag.firstChild) { - selection = TextSelection.between(editor.state.doc.resolve(ret.start), editor.state.doc.resolve(ret.start + ret.frag.firstChild.nodeSize)); // bcz: looks better to not have the target selected + selection = TextSelection.between(state.doc.resolve(ret.start), state.doc.resolve(ret.start + ret.frag.firstChild.nodeSize)); // bcz: looks better to not have the target selected } - editor.dispatch(editor.state.tr.setSelection(new TextSelection(selection.$from, selection.$from)).scrollIntoView()); + this._editorView.dispatch(state.tr.setSelection(new TextSelection(selection.$from, selection.$from)).scrollIntoView()); const escAnchorId = textAnchorId[0] >= '0' && textAnchorId[0] <= '9' ? `\\3${textAnchorId[0]} ${textAnchorId.substr(1)}` : textAnchorId; addStyleSheetRule(FormattedTextBox._highlightStyleSheet, `${escAnchorId}`, { background: 'yellow', transform: 'scale(3)', 'transform-origin': 'left bottom' }); setTimeout(() => { @@ -1270,9 +1242,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB const protoData = DocCast(this.dataDoc.proto)?.[this.fieldKey]; const dataData = this.dataDoc[this.fieldKey]; const layoutData = Doc.AreProtosEqual(this.layoutDoc, this.dataDoc) ? undefined : this.layoutDoc[this.fieldKey]; - const dataTime = dataData ? DateCast(this.dataDoc[this.fieldKey + '_modificationDate'])?.date.getTime() ?? 0 : 0; - const layoutTime = layoutData && this.dataDoc[this.fieldKey + '_autoUpdate'] ? DateCast(DocCast(this.layoutDoc)[this.fieldKey + '_modificationDate'])?.date.getTime() ?? 0 : 0; - const protoTime = protoData && this.dataDoc[this.fieldKey + '_autoUpdate'] ? DateCast(DocCast(this.dataDoc.proto)[this.fieldKey + '_modificationDate'])?.date.getTime() ?? 0 : 0; + const dataTime = dataData ? (DateCast(this.dataDoc[this.fieldKey + '_modificationDate'])?.date.getTime() ?? 0) : 0; + const layoutTime = layoutData && this.dataDoc[this.fieldKey + '_autoUpdate'] ? (DateCast(DocCast(this.layoutDoc)[this.fieldKey + '_modificationDate'])?.date.getTime() ?? 0) : 0; + const protoTime = protoData && this.dataDoc[this.fieldKey + '_autoUpdate'] ? (DateCast(DocCast(this.dataDoc.proto)[this.fieldKey + '_modificationDate'])?.date.getTime() ?? 0) : 0; const recentData = dataTime >= layoutTime ? (protoTime >= dataTime ? protoData : dataData) : layoutTime >= protoTime ? layoutData : protoData; const whichData = recentData ?? (this.layoutDoc.isTemplateDoc ? layoutData : protoData) ?? protoData; return !whichData ? undefined : { data: RTFCast(whichData), str: Field.toString(DocCast(whichData) ?? StrCast(whichData)) }; @@ -1405,41 +1377,38 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB let el = elIn; while (el && el !== document.body) { if (getComputedStyle(el).display === 'none') return false; - el = el.parentNode as any; + el = el.parentElement; } return true; } - richTextMenuPlugin() { - const self = this; + static richTextMenuPlugin(props: FormattedTextBoxProps) { return new Plugin({ - view(newView) { - runInAction(() => { - self._props.rootSelected?.() && RichTextMenu.Instance && (RichTextMenu.Instance.view = newView); - }); - return new RichTextMenuPlugin({ editorProps: this._props }); - }, + view: action((newView: EditorView) => { + props?.rootSelected?.() && RichTextMenu.Instance && (RichTextMenu.Instance.view = newView); + return new RichTextMenuPlugin({ editorProps: props }); + }), }); } _didScroll = false; _scrollStopper: undefined | (() => void); + // eslint-disable-next-line @typescript-eslint/no-explicit-any setupEditor(config: any, fieldKey: string) { const curText = Cast(this.dataDoc[this.fieldKey], RichTextField, null) || StrCast(this.dataDoc[this.fieldKey]); const rtfField = Cast((!curText && this.layoutDoc[this.fieldKey]) || this.dataDoc[fieldKey], RichTextField); if (this.ProseRef) { - const self = this; this._editorView?.destroy(); this._editorView = new EditorView(this.ProseRef, { state: rtfField?.Data ? EditorState.fromJSON(config, JSON.parse(rtfField.Data)) : EditorState.create(config), handleScrollToSelection: editorView => { const docPos = editorView.coordsAtPos(editorView.state.selection.to); - const viewRect = self._ref.current!.getBoundingClientRect(); - const scrollRef = self._scrollRef; + const viewRect = this._ref.current!.getBoundingClientRect(); + const scrollRef = this._scrollRef; const topOff = docPos.top < viewRect.top ? docPos.top - viewRect.top : undefined; const botOff = docPos.bottom > viewRect.bottom ? docPos.bottom - viewRect.bottom : undefined; if (((topOff && Math.abs(Math.trunc(topOff)) > 0) || (botOff && Math.abs(Math.trunc(botOff)) > 0)) && scrollRef) { const shift = Math.min(topOff ?? Number.MAX_VALUE, botOff ?? Number.MAX_VALUE); - const scrollPos = scrollRef.scrollTop + shift * self.ScreenToLocalBoxXf().Scale; + const scrollPos = scrollRef.scrollTop + shift * this.ScreenToLocalBoxXf().Scale; if (this._focusSpeed !== undefined) { setTimeout(() => { scrollPos && (this._scrollStopper = smoothScroll(this._focusSpeed || 0, scrollRef, scrollPos, 'ease', this._scrollStopper)); @@ -1470,7 +1439,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB }); } } - (this._editorView as any).TextView = this; + this._editorView.TextView = this; } const selectOnLoad = Doc.AreProtosEqual(this._props.TemplateDataDocument ?? this.Document, Doc.SelectOnLoad) && (!DocumentView.LightboxDoc() || DocumentView.LightboxContains(this.DocumentView?.())); @@ -1495,7 +1464,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB } else if (!FormattedTextBox.DontSelectInitialText) { const mark = schema.marks.user_mark.create({ userid: ClientUtils.CurrentUserEmail(), modified: Math.floor(Date.now() / 1000) }); selectAll(this._editorView.state, (tx: Transaction) => { - this._editorView?.dispatch(tx.deleteSelection().addStoredMark(mark)); + this._editorView?.dispatch(tx.addStoredMark(mark)); }); this.tryUpdateDoc(true); // calling select() above will make isContentActive() true only after a render .. which means the selectAll() above won't write to the Document and the incomingValue will overwrite the selection with the non-updated data } else { @@ -1548,18 +1517,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB } onPointerDown = (e: React.PointerEvent): void => { - if ((e.nativeEvent as any).handledByInnerReactInstance) { - return; // e.stopPropagation(); - } - (e.nativeEvent as any).handledByInnerReactInstance = true; - if (this.Document.forceActive) e.stopPropagation(); this.tryUpdateScrollHeight(); // if a doc a fitWidth doc is being viewed in different embedContainer (eg freeform & lightbox), then it will have conflicting heights. so when the doc is clicked on, we want to make sure it has the appropriate height for the selected view. - if ((e.target as any).tagName === 'AUDIOTAG') { + const target = e.target as HTMLElement; + if (target.tagName === 'AUDIOTAG') { e.preventDefault(); e.stopPropagation(); - const timecode = Number((e.target as any)?.dataset?.timecode); - DocServer.GetRefField((e.target as any)?.dataset?.audioid || 0).then(anchor => { + const timecode = Number(target.dataset?.timecode); + DocServer.GetRefField(target.dataset?.audioid || '').then(anchor => { if (anchor instanceof Doc) { // const timecode = NumCast(anchor.timecodeToShow, 0); const audiodoc = anchor.annotationOn as Doc; @@ -1583,7 +1548,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB // stop propagation if not in sidebar, otherwise nested boxes will lose focus to outer boxes. e.stopPropagation(); // if the text box's content is active, then it consumes all down events document.addEventListener('pointerup', this.onSelectEnd); - (this.ProseRef?.children?.[0] as any).focus(); + (this.ProseRef?.children?.[0] as HTMLElement).focus(); } } if (e.button === 2 || (e.button === 0 && e.ctrlKey)) { @@ -1599,10 +1564,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB const state = this.EditorView?.state; if (state && this.ProseRef?.children[0].className.includes('-focused') && this._props.isContentActive() && !e.button) { if (!state.selection.empty && !(state.selection instanceof NodeSelection)) this.setupAnchorMenu(); - let clickTarget = e.target as any; // hrefs are stored on the dataset of the <a> node that wraps the hyerlink <span> - for (let { target } = e as any; target && !target.dataset?.targethrefs; target = target.parentElement); - while (clickTarget && !clickTarget.dataset?.targethrefs) clickTarget = clickTarget.parentElement; - FormattedTextBoxComment.update(this, this.EditorView!, undefined, clickTarget?.dataset?.targethrefs, clickTarget?.dataset.linkdoc, clickTarget?.dataset.nopreview === 'true'); + let clickTarget: HTMLElement | Element | null = e.target as HTMLElement; // hrefs are stored on the dataset of the <a> node that wraps the hyerlink <span> + for (let target: HTMLElement | Element | null = clickTarget as HTMLElement; target instanceof HTMLElement && !target.dataset?.targethrefs; target = target.parentElement); + while (clickTarget instanceof HTMLElement && !clickTarget.dataset?.targethrefs) clickTarget = clickTarget.parentElement; + const dataset = clickTarget instanceof HTMLElement ? clickTarget?.dataset : undefined; + FormattedTextBoxComment.update(this, this.EditorView!, undefined, dataset?.targethrefs, dataset?.linkdoc, dataset?.nopreview === 'true'); } }; @action @@ -1626,27 +1592,24 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB setFocus = (ipos?: number) => { const pos = ipos ?? (this._editorView?.state.selection.$from.pos || 1); setTimeout(() => this._editorView?.dispatch(this._editorView.state.tr.setSelection(TextSelection.near(this._editorView.state.doc.resolve(pos)))), 100); - setTimeout(() => (this.ProseRef?.children?.[0] as any).focus(), 200); + setTimeout(() => (this.ProseRef?.children?.[0] as HTMLElement).focus(), 200); }; @action onFocused = (e: React.FocusEvent): void => { // applyDevTools.applyDevTools(this._editorView); - this.ProseRef?.children[0] === e.nativeEvent.target && this._editorView && RichTextMenu.Instance?.updateMenu(this._editorView, undefined, this._props, this.layoutDoc); e.stopPropagation(); }; onClick = (e: React.MouseEvent): void => { if (!this._props.isContentActive()) return; - if ((e.nativeEvent as any).handledByInnerReactInstance) { - e.stopPropagation(); - return; - } - if (!this._forceUncollapse || (this._editorView!.root as any).getSelection().isCollapsed) { + const editorView = this._editorView; + const editorRoot = editorView?.root instanceof Document ? editorView.root : undefined; + if (editorView && (!this._forceUncollapse || editorRoot?.getSelection()?.isCollapsed)) { // this is a hack to allow the cursor to be placed at the end of a document when the document ends in an inline dash comment. Apparently Chrome on Windows has a bug/feature which breaks this when clicking after the end of the text. - const pcords = this._editorView!.posAtCoords({ left: e.clientX, top: e.clientY }); - const node = pcords && this._editorView!.state.doc.nodeAt(pcords.pos); // get what prosemirror thinks the clicked node is (if it's null, then we didn't click on any text) - if (pcords && node?.type === this._editorView!.state.schema.nodes.dashComment) { - this._editorView!.dispatch(this._editorView!.state.tr.setSelection(TextSelection.create(this._editorView!.state.doc, pcords.pos + 2))); + const pcords = editorView.posAtCoords({ left: e.clientX, top: e.clientY }); + const node = pcords && editorView.state.doc.nodeAt(pcords.pos); // get what prosemirror thinks the clicked node is (if it's null, then we didn't click on any text) + if (pcords && node?.type === editorView.state.schema.nodes.dashComment) { + this._editorView!.dispatch(editorView.state.tr.setSelection(TextSelection.create(editorView.state.doc, pcords.pos + 2))); e.preventDefault(); } if (!node && this.ProseRef) { @@ -1654,19 +1617,19 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB const boundsRect = lastNode?.getBoundingClientRect(); if (e.clientX > boundsRect.left && e.clientX < boundsRect.right && e.clientY > boundsRect.bottom) { // if we clicked below the last prosemirror div, then set the selection to be the end of the document - this._editorView?.focus(); - this._editorView!.dispatch(this._editorView!.state.tr.setSelection(TextSelection.create(this._editorView!.state.doc, this._editorView!.state.doc.content.size))); + editorView.focus(); + editorView.dispatch(editorView.state.tr.setSelection(TextSelection.create(editorView.state.doc, editorView.state.doc.content.size))); } - } else if (node && [this._editorView!.state.schema.nodes.ordered_list, this._editorView!.state.schema.nodes.listItem].includes(node.type) && node !== (this._editorView!.state.selection as NodeSelection)?.node && pcords) { - this._editorView!.dispatch(this._editorView!.state.tr.setSelection(NodeSelection.create(this._editorView!.state.doc, pcords.pos))); + } else if (node && [editorView.state.schema.nodes.ordered_list, editorView.state.schema.nodes.listItem].includes(node.type) && node !== (editorView.state.selection as NodeSelection)?.node && pcords) { + editorView.dispatch(editorView.state.tr.setSelection(NodeSelection.create(editorView.state.doc, pcords.pos))); } } - if (this._props.rootSelected?.()) { + if (editorView && this._props.rootSelected?.()) { // if text box is selected, then it consumes all click events - (e.nativeEvent as any).handledByInnerReactInstance = true; - this.hitBulletTargets(e.clientX, e.clientY, !this._editorView?.state.selection.empty || this._forceUncollapse, false, e.shiftKey); + e.stopPropagation(); + this.hitBulletTargets(e.clientX, e.clientY, !editorView.state.selection.empty || this._forceUncollapse, false, e.shiftKey); } - this._forceUncollapse = !(this._editorView!.root as any).getSelection().isCollapsed; + this._forceUncollapse = !editorRoot?.getSelection()?.isCollapsed; }; // this hackiness handles clicking on the list item bullets to do expand/collapse. the bullets are ::before pseudo elements so there's no real way to hit test against them. hitBulletTargets(x: number, y: number, collapse: boolean, highlightOnly: boolean, selectOrderedList: boolean = false) { @@ -1682,9 +1645,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB let $olistPos = this._editorView?.state.doc.resolve(olistPos); let olistNode = (nodeBef !== null || clickNode?.type === this._editorView?.state.schema.nodes.list_item) && olistPos === clickPos?.pos ? clickNode : nodeBef; if (olistNode?.type === this._editorView?.state.schema.nodes.list_item) { - if ($olistPos && ($olistPos as any).path.length > 3) { + if ($olistPos && $olistPos.depth) { olistNode = $olistPos.parent; - $olistPos = this._editorView?.state.doc.resolve(($olistPos as any).path[($olistPos as any).path.length - 4]); + $olistPos = this._editorView?.state.doc.resolve($olistPos.start($olistPos.depth - 1)); } } const maxSize = this._editorView?.state.doc.content.size ?? 0; @@ -1715,7 +1678,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB } @action - onBlur = (e: any) => { + onBlur = (e: React.FocusEvent) => { if (this.ProseRef?.children[0] !== e.nativeEvent.target) return; if (!(this.EditorView?.state.selection instanceof NodeSelection) || this.EditorView.state.selection.node.type !== this.EditorView.state.schema.nodes.footnote) { const stordMarks = this._editorView?.state.storedMarks?.slice(); @@ -1780,7 +1743,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB switch (e.key) { case 'Escape': this._editorView!.dispatch(state.tr.setSelection(TextSelection.create(state.doc, state.selection.from, state.selection.from))); - (document.activeElement as any).blur?.(); + (document.activeElement as HTMLElement).blur?.(); DocumentView.DeselectAll(); RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined, undefined); return; @@ -1886,7 +1849,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB TraceMobx(); const annotated = DocListCast(this.dataDoc[this.SidebarKey]).filter(d => d?.author).length; const color = !annotated ? Colors.WHITE : Colors.BLACK; - const backgroundColor = !annotated ? (this.sidebarWidth() ? Colors.MEDIUM_BLUE : Colors.BLACK) : this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.WidgetColor + (annotated ? ':annotated' : '')); + const backgroundColor = !annotated ? (this.sidebarWidth() ? Colors.MEDIUM_BLUE : Colors.BLACK) : (this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.WidgetColor + (annotated ? ':annotated' : '')) as string); return !annotated && (!this._props.isContentActive() || SnappingManager.IsDragging || Doc.ActiveTool !== InkTool.None) ? null : ( <div @@ -1903,6 +1866,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB } @computed get sidebarCollection() { const renderComponent = (tag: string) => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any const ComponentTag: any = tag === CollectionViewType.Tree ? CollectionTreeView : tag === 'translation' ? FormattedTextBox : CollectionStackingView; return ComponentTag === CollectionStackingView ? ( <SidebarAnnos @@ -2029,19 +1993,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB e.stopPropagation(); } }; - _oldWheel: any; - @computed get fontColor() { - return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontColor); - } - @computed get fontSize() { - return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontSize); - } - @computed get fontFamily() { - return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontFamily); - } - @computed get fontWeight() { - return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontWeight); - } + @computed get fontColor() { return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontColor) as string; } // prettier-ignore + @computed get fontSize() { return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontSize) as string; } // prettier-ignore + @computed get fontFamily() { return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontFamily) as string; } // prettier-ignore + @computed get fontWeight() { return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontWeight) as string; } // prettier-ignore render() { TraceMobx(); const scale = this._props.NativeDimScaling?.() || 1; @@ -2135,6 +2090,7 @@ Docs.Prototypes.TemplateMap.set(DocumentType.RTF, { _layout_nativeDimEditable: true, _layout_reflowVertical: true, _layout_reflowHorizontal: true, + _layout_noSidebar: true, defaultDoubleClick: 'ignore', systemIcon: 'BsFileEarmarkTextFill', }, diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 01c46edeb..6c0eac103 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -1,4 +1,4 @@ -import { Mark, ResolvedPos } from 'prosemirror-model'; +import { Mark, Node, ResolvedPos } from 'prosemirror-model'; import { EditorState } from 'prosemirror-state'; import { EditorView } from 'prosemirror-view'; import { ClientUtils } from '../../../../ClientUtils'; @@ -61,8 +61,8 @@ export class FormattedTextBoxComment { tooltip.style.display = 'none'; tooltip.appendChild(tooltipText); tooltip.onpointerdown = (e: PointerEvent) => { - const { textBox, startUserMarkRegion, endUserMarkRegion, userMark } = FormattedTextBoxComment; - false && startUserMarkRegion !== undefined && textBox?.adoptAnnotation(startUserMarkRegion, endUserMarkRegion, userMark); + // const { textBox, startUserMarkRegion, endUserMarkRegion, userMark } = FormattedTextBoxComment; + // startUserMarkRegion !== undefined && textBox?.adoptAnnotation(startUserMarkRegion, endUserMarkRegion, userMark); e.stopPropagation(); e.preventDefault(); }; @@ -73,7 +73,7 @@ export class FormattedTextBoxComment { FormattedTextBoxComment.textBox = undefined; FormattedTextBoxComment.tooltip.style.display = 'none'; } - public static saveMarkRegion(textBox: any, start: number, end: number, mark: Mark) { + public static saveMarkRegion(textBox: FormattedTextBox, start: number, end: number, mark: Mark) { FormattedTextBoxComment.textBox = textBox; FormattedTextBoxComment.startUserMarkRegion = start; FormattedTextBoxComment.endUserMarkRegion = end; @@ -87,7 +87,7 @@ export class FormattedTextBoxComment { const start = view.coordsAtPos(state.selection.from - nbef); const end = view.coordsAtPos(state.selection.from - nbef); // The box in which the tooltip is positioned, to use as base - const box = (document.getElementsByClassName('mainView-container') as any)[0].getBoundingClientRect(); + const box = document.getElementsByClassName('mainView-container')[0].getBoundingClientRect(); // Find a center-ish x position from the selection endpoints (when crossing lines, end may be more to the left) const left = Math.max((start.left + end.left) / 2, start.left + 3); FormattedTextBoxComment.tooltip.style.left = left - box.left + 'px'; @@ -118,8 +118,8 @@ export class FormattedTextBoxComment { const nbef = findStartOfMark(state.selection.$from, view, findOtherUserMark); const naft = findEndOfMark(state.selection.$from, view, findOtherUserMark); const noselection = state.selection.$from === state.selection.$to; - let child: any = null; - state.doc.nodesBetween(state.selection.from, state.selection.to, (node: any /* , pos: number, parent: any */) => { + let child: Node | undefined; + state.doc.nodesBetween(state.selection.from, state.selection.to, (node: Node /* , pos: number, parent: any */) => { !child && node.marks.length && (child = node); }); const mark = child && findOtherUserMark(child.marks); diff --git a/src/client/views/nodes/formattedText/ParagraphNodeSpec.ts b/src/client/views/nodes/formattedText/ParagraphNodeSpec.ts index 8799964b3..d41938698 100644 --- a/src/client/views/nodes/formattedText/ParagraphNodeSpec.ts +++ b/src/client/views/nodes/formattedText/ParagraphNodeSpec.ts @@ -1,18 +1,18 @@ -import { Node, DOMOutputSpec } from 'prosemirror-model'; +import { Node, DOMOutputSpec, AttributeSpec, TagParseRule } from 'prosemirror-model'; import clamp from '../../../util/clamp'; import convertToCSSPTValue from '../../../util/convertToCSSPTValue'; import toCSSLineSpacing from '../../../util/toCSSLineSpacing'; // import type { NodeSpec } from './Types'; type NodeSpec = { - attrs?: { [key: string]: any }; + attrs?: { [key: string]: AttributeSpec }; content?: string; draggable?: boolean; group?: string; inline?: boolean; name?: string; - parseDOM?: Array<any>; - toDOM?: (node: any) => DOMOutputSpec; + parseDOM?: Array<TagParseRule>; + toDOM?: (node: Node) => DOMOutputSpec; }; // This assumes that every 36pt maps to one indent level. @@ -30,7 +30,7 @@ function convertMarginLeftToIndentValue(marginLeft: string): number { return clamp(MIN_INDENT_LEVEL, Math.floor(ptValue / INDENT_MARGIN_PT_SIZE), MAX_INDENT_LEVEL); } -function getAttrs(dom: HTMLElement): Object { +export function getAttrs(dom: HTMLElement): object { const { lineHeight, textAlign, marginLeft, paddingTop, paddingBottom } = dom.style; let align = dom.getAttribute('align') || textAlign || ''; @@ -50,9 +50,31 @@ function getAttrs(dom: HTMLElement): Object { return { align, indent, lineSpacing, paddingTop, paddingBottom, id }; } -function toDOM(node: Node): DOMOutputSpec { +export function getHeadingAttrs(dom: HTMLElement): { align?: string; indent?: number; lineSpacing?: string; paddingTop?: string; paddingBottom?: string; id: string; level?: number } { + const { lineHeight, textAlign, marginLeft, paddingTop, paddingBottom } = dom.style; + + let align = dom.getAttribute('align') || textAlign || ''; + align = ALIGN_PATTERN.test(align) ? align : ''; + + let indent = parseInt(dom.getAttribute(ATTRIBUTE_INDENT) || '', 10); + + if (!indent && marginLeft) { + indent = convertMarginLeftToIndentValue(marginLeft); + } + + indent = indent || MIN_INDENT_LEVEL; + + const lineSpacing = lineHeight ? toCSSLineSpacing(lineHeight) : undefined; + + const level = Number(dom.nodeName.substring(1)) || 1; + + const id = dom.getAttribute('id') || ''; + return { align, indent, lineSpacing, paddingTop, paddingBottom, id, level }; +} + +export function toDOM(node: Node): DOMOutputSpec { const { align, indent, inset, lineSpacing, paddingTop, paddingBottom, id } = node.attrs; - const attrs: { [key: string]: any } | null = {}; + const attrs: { [key: string]: unknown } | null = {}; let style = ''; if (align && align !== 'left') { diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index a612f3c65..738f6d699 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -1,11 +1,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; -import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; -import { lift, wrapIn } from 'prosemirror-commands'; +import { lift, toggleMark, wrapIn } from 'prosemirror-commands'; import { Mark, MarkType } from 'prosemirror-model'; import { wrapInList } from 'prosemirror-schema-list'; -import { EditorState, NodeSelection, TextSelection } from 'prosemirror-state'; +import { EditorState, NodeSelection, TextSelection, Transaction } from 'prosemirror-state'; import { EditorView } from 'prosemirror-view'; import * as React from 'react'; import { Doc } from '../../../../fields/Doc'; @@ -17,13 +17,11 @@ import { ObservableReactComponent } from '../../ObservableReactComponent'; import { DocumentView } from '../DocumentView'; import { EquationBox } from '../EquationBox'; import { FieldViewProps } from '../FieldView'; -import { FormattedTextBox } from './FormattedTextBox'; +import { FormattedTextBox, FormattedTextBoxProps } from './FormattedTextBox'; import { updateBullets } from './ProsemirrorExampleTransfer'; import './RichTextMenu.scss'; import { schema } from './schema_rts'; -const { toggleMark } = require('prosemirror-commands'); - @observer export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { // eslint-disable-next-line no-use-before-define @@ -35,8 +33,8 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { private _linkToRef = React.createRef<HTMLInputElement>(); layoutDoc: Doc | undefined; - @observable public view?: EditorView = undefined; - public editorProps: FieldViewProps | undefined; + @observable public view?: EditorView & { TextView?: FormattedTextBox } = undefined; + public editorProps: FieldViewProps | AntimodeMenuProps | undefined; public _brushMap: Map<string, Set<Mark>> = new Map(); @@ -114,17 +112,17 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { } _disposer: IReactionDisposer | undefined; componentDidMount() { - this._disposer = reaction( - () => DocumentView.Selected().slice(), - () => this.updateMenu(undefined, undefined, undefined, undefined) - ); + // this._disposer = reaction( + // () => DocumentView.Selected().slice(), + // () => this.updateMenu(undefined, undefined, undefined, undefined) + // ); } componentWillUnmount() { this._disposer?.(); } @action - public updateMenu(view: EditorView | undefined, lastState: EditorState | undefined, props: any, layoutDoc: Doc | undefined) { + public updateMenu(view: EditorView | undefined, lastState: EditorState | undefined, props: FormattedTextBoxProps | AntimodeMenuProps | undefined, layoutDoc: Doc | undefined) { if (this._linkToRef.current?.getBoundingClientRect().width) { return; } @@ -158,7 +156,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { this.getTextLinkTargetTitle().then(targetTitle => this.setCurrentLink(targetTitle)); } - setMark = (mark: Mark, state: EditorState, dispatch: any, dontToggle: boolean = false) => { + setMark = (mark: Mark, state: EditorState, dispatch: (tr: Transaction) => void, dontToggle: boolean = false) => { if (mark) { const newPos = state.selection.$anchor.node()?.type === schema.nodes.ordered_list ? state.selection.from : state.selection.from; const node = (state.selection as NodeSelection).node ?? (newPos >= 0 ? state.doc.nodeAt(newPos) : undefined); @@ -177,25 +175,26 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { toggleMark(mark.type, mark.attrs)(state, dispatch); } } - this.updateMenu(this.view, undefined, undefined, this.layoutDoc); + // this.updateMenu(this.view, undefined, undefined, this.layoutDoc); } }; // finds font sizes and families in selection - getActiveAlignment() { + getActiveAlignment = () => { if (this.view && this.TextView?._props.rootSelected?.()) { - const { path } = this.view.state.selection.$from as any; - 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) { - return path[i].attrs.align || 'left'; + const from = this.view.state.selection.$from; + for (let i = from.depth; i >= 0; i--) { + const node = from.node(i); + if (node.type === this.view.state.schema.nodes.paragraph || node.type === this.view.state.schema.nodes.heading) { + return node.attrs.align || 'left'; } } } return 'left'; - } + }; // finds font sizes and families in selection - getActiveListStyle() { + getActiveListStyle = () => { const state = this.view?.state; if (state) { const pos = state.selection.$anchor; @@ -207,7 +206,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { } } return ''; - } + }; // finds font sizes and families in selection getActiveFontStylesOnSelection() { @@ -321,7 +320,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { if (this.view) { const mark = this.view.state.schema.mark(this.view.state.schema.marks.noAutoLinkAnchor); this.setMark(mark, this.view.state, this.view.dispatch, false); - this.TextView.autoLink(); + this.TextView?.autoLink(); this.view.focus(); } }; @@ -350,7 +349,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { }; setFontField = (value: string, fontField: 'fontSize' | 'fontFamily' | 'fontColor' | 'fontHighlight') => { - if (this.view) { + if (this.TextView && this.view) { const { text, paragraph } = this.view.state.schema.nodes; const selNode = this.view.state.selection.$anchor.node(); if (this.view.state.selection.from === 1 && this.view.state.selection.empty && [undefined, text, paragraph].includes(selNode?.type)) { @@ -360,11 +359,11 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { const attrs: { [key: string]: string } = {}; attrs[fontField] = value; const fmark = this.view?.state.schema.marks['pF' + fontField.substring(1)].create(attrs); - this.setMark(fmark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(fmark)), true); + this.setMark(fmark, this.view.state, (tx: Transaction) => this.view!.dispatch(tx.addStoredMark(fmark)), true); this.view.focus(); } else { Doc.UserDoc()[fontField] = value; - this.updateMenu(this.view, undefined, this.props, this.layoutDoc); + // this.updateMenu(this.view, undefined, this.props, this.layoutDoc); } }; @@ -383,17 +382,17 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { marks && tx2.setStoredMarks([...marks]); this.view.dispatch(tx2); } else - !wrapInList(schema.nodes.ordered_list)(this.view.state, (tx2: any) => { + !wrapInList(schema.nodes.ordered_list)(this.view.state, (tx2: Transaction) => { const tx3 = updateBullets(tx2, schema, newMapStyle, this.view!.state.selection.from - 1, this.view!.state.selection.to + 1); marks && tx3.ensureMarks([...marks]); marks && tx3.setStoredMarks([...marks]); this.view!.dispatch(tx3); }); this.view.focus(); - this.updateMenu(this.view, undefined, this.props, this.layoutDoc); + // this.updateMenu(this.view, undefined, this.props, this.layoutDoc); }; - insertSummarizer(state: EditorState, dispatch: any) { + insertSummarizer(state: EditorState, dispatch: (tr: Transaction) => void) { if (state.selection.empty) return false; const mark = state.schema.marks.summarize.create(); const { tr } = state; @@ -407,7 +406,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { vcenterToggle = () => { this.layoutDoc && (this.layoutDoc._layout_centered = !this.layoutDoc._layout_centered); }; - align = (view: EditorView, dispatch: any, alignment: 'left' | 'right' | 'center') => { + align = (view: EditorView, dispatch: (tr: Transaction) => void, alignment: 'left' | 'right' | 'center') => { if (this.TextView?._props.rootSelected?.()) { let { tr } = view.state; view.state.doc.nodesBetween(view.state.selection.from, view.state.selection.to, (node, pos) => { @@ -423,7 +422,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { } }; - paragraphSetup(state: EditorState, dispatch: any, field: 'inset' | 'indent', value?: 0 | 10 | -10) { + paragraphSetup(state: EditorState, dispatch: (tr: Transaction) => void, field: 'inset' | 'indent', value?: 0 | 10 | -10) { let { tr } = state; state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos) => { if (node.type === schema.nodes.paragraph || node.type === schema.nodes.heading) { @@ -439,9 +438,9 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { return true; } - insertBlockquote(state: EditorState, dispatch: any) { - const { path } = state.selection.$from as any; - if (path.length > 6 && path[path.length - 6].type === schema.nodes.blockquote) { + insertBlockquote(state: EditorState, dispatch: (tr: Transaction) => void) { + const node = state.selection.$from.depth ? state.selection.$from.node(state.selection.$from.depth - 1) : undefined; + if (node?.type === schema.nodes.blockquote) { lift(state, dispatch); } else { wrapIn(schema.nodes.blockquote)(state, dispatch); @@ -449,7 +448,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { return true; } - insertHorizontalRule(state: EditorState, dispatch: any) { + insertHorizontalRule(state: EditorState, dispatch: (tr: Transaction) => void) { dispatch(state.tr.replaceSelectionWith(state.schema.nodes.horizontal_rule.create()).scrollIntoView()); return true; } @@ -497,7 +496,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { } get TextView() { - return (this.view as any)?.TextView as FormattedTextBox; + return this.view?.TextView; } get TextViewFieldKey() { return this.TextView?._props.fieldKey; @@ -512,19 +511,16 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { } createLinkButton() { - const self = this; - - function onLinkChange(e: React.ChangeEvent<HTMLInputElement>) { - self.TextView?.endUndoTypingBatch(); - UndoManager.RunInBatch(() => self.setCurrentLink(e.target.value), 'link change'); - } + const onLinkChange = (e: React.ChangeEvent<HTMLInputElement>) => { + this.TextView?.endUndoTypingBatch(); + UndoManager.RunInBatch(() => this.setCurrentLink(e.target.value), 'link change'); + }; const link = this.currentLink ? this.currentLink : ''; const button = ( <Tooltip title={<div className="dash-tooltip">set hyperlink</div>} placement="bottom"> { - // eslint-disable-next-line jsx-a11y/control-has-associated-label <button type="button" className="antimodeMenu-button color-preview-button"> <FontAwesomeIcon icon="link" size="lg" /> </button> @@ -589,7 +585,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { // TODO: should check for valid URL @undoBatch makeLinkToURL = (target: string) => { - ((this.view as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, 'onRadd:rightight', target, target); + this.TextView?.makeLinkAnchor(undefined, 'onRadd:rightight', target, target); }; @undoBatch @@ -597,12 +593,12 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { if (this.view) { const linkAnchor = this.view.state.selection.$from.nodeAfter?.marks.find(m => m.type === this.view!.state.schema.marks.linkAnchor); if (linkAnchor) { - const allAnchors = linkAnchor.attrs.allAnchors.slice(); - this.TextView.RemoveAnchorFromSelection(allAnchors); + const allAnchors = (linkAnchor.attrs.allAnchors as { href: string; title: string; linkId: string; targetId: string }[]).slice(); + this.TextView?.RemoveAnchorFromSelection(allAnchors); // bcz: Argh ... this will remove the link from the document even it's anchored somewhere else in the text which happens if only part of the anchor text was selected. allAnchors - .filter((aref: any) => aref?.href.indexOf(Doc.localServerPath()) === 0) - .forEach((aref: any) => { + .filter(aref => aref?.href.indexOf(Doc.localServerPath()) === 0) + .forEach(aref => { const anchorId = aref.href.replace(Doc.localServerPath(), '').split('?')[0]; anchorId && DocServer.GetRefField(anchorId).then(linkDoc => Doc.DeleteLink?.(linkDoc as Doc)); }); @@ -629,7 +625,7 @@ export class ButtonDropdown extends ObservableReactComponent<ButtonDropdownProps @observable private showDropdown: boolean = false; private ref: HTMLDivElement | null = null; - constructor(props: any) { + constructor(props: ButtonDropdownProps) { super(props); makeObservable(this); } @@ -683,7 +679,6 @@ export class ButtonDropdown extends ObservableReactComponent<ButtonDropdownProps <> {this._props.button} { - // eslint-disable-next-line jsx-a11y/control-has-associated-label <button type="button" className="dropdown-button antimodeMenu-button" key="antimodebutton" onPointerDown={this.onDropdownClick}> <FontAwesomeIcon icon="caret-down" size="sm" /> </button> @@ -697,12 +692,12 @@ export class ButtonDropdown extends ObservableReactComponent<ButtonDropdownProps } interface RichTextMenuPluginProps { - editorProps: any; + editorProps: FormattedTextBoxProps; } export class RichTextMenuPlugin extends React.Component<RichTextMenuPluginProps> { // eslint-disable-next-line react/no-unused-class-component-methods - update(view: EditorView, lastState: EditorState | undefined) { - RichTextMenu.Instance?.updateMenu(view, lastState, this.props.editorProps, (view as any).TextView?.layoutDoc); + update(view: EditorView & { TextView?: FormattedTextBox }, lastState: EditorState | undefined) { + RichTextMenu.Instance?.updateMenu(view, lastState, this.props.editorProps, view.TextView?.layoutDoc); } render() { return null; diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts index bf11dfe62..e0d6c7c05 100644 --- a/src/client/views/nodes/formattedText/RichTextRules.ts +++ b/src/client/views/nodes/formattedText/RichTextRules.ts @@ -1,4 +1,5 @@ import { ellipsis, emDash, InputRule, smartQuotes, textblockTypeInputRule } from 'prosemirror-inputrules'; +import { NodeType } from 'prosemirror-model'; import { NodeSelection, TextSelection } from 'prosemirror-state'; import { ClientUtils } from '../../../../ClientUtils'; import { Doc, DocListCast, FieldResult, StrListCast } from '../../../../fields/Doc'; @@ -6,7 +7,7 @@ import { DocData } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; import { NumCast, StrCast } from '../../../../fields/Types'; -import { Utils } from '../../../../Utils'; +import { emptyFunction, Utils } from '../../../../Utils'; import { Docs } from '../../../documents/Documents'; import { CollectionViewType } from '../../../documents/DocumentTypes'; import { DocUtils } from '../../../documents/DocUtils'; @@ -35,13 +36,7 @@ export class RichTextRules { wrappingInputRule(/%>$/, schema.nodes.blockquote), // 1. create numerical ordered list - wrappingInputRule( - /^1\.\s$/, - schema.nodes.ordered_list, - () => ({ mapStyle: 'decimal', bulletStyle: 1 }), - (match: any, node: any) => node.childCount + node.attrs.order === +match[1], - ((type: any) => ({ type: type, attrs: { mapStyle: 'decimal', bulletStyle: 1 } })) as any - ), + wrappingInputRule(/^1\.\s$/, schema.nodes.ordered_list, () => ({ mapStyle: 'decimal', bulletStyle: 1 }), emptyFunction, ((type: unknown) => ({ type, attrs: { mapStyle: 'decimal', bulletStyle: 1 } })) as unknown as null), // A. create alphabetical ordered list wrappingInputRule( @@ -49,9 +44,8 @@ export class RichTextRules { schema.nodes.ordered_list, // match => { () => ({ mapStyle: 'multi', bulletStyle: 1 }), - // return ({ order: +match[1] }) - (match: any, node: any) => node.childCount + node.attrs.order === +match[1], - ((type: any) => ({ type: type, attrs: { mapStyle: 'multi', bulletStyle: 1 } })) as any + emptyFunction, + ((type: NodeType) => ({ type, attrs: { mapStyle: 'multi', bulletStyle: 1 } })) as unknown as null ), // * + - create bullet list @@ -60,8 +54,8 @@ export class RichTextRules { schema.nodes.ordered_list, // match => { () => ({ mapStyle: 'bullet' }), // ({ order: +match[1] }) - (match: any, node: any) => node.childCount + node.attrs.order === +match[1], - ((type: any) => ({ type: type, attrs: { mapStyle: 'bullet' } })) as any + emptyFunction, + ((type: NodeType) => ({ type: type, attrs: { mapStyle: 'bullet' } })) as unknown as null ), // ``` create code block @@ -93,7 +87,7 @@ export class RichTextRules { const textDoc = this.Document[DocData]; const numInlines = NumCast(textDoc.inlineTextCount); textDoc.inlineTextCount = numInlines + 1; - const node = (state.doc.resolve(start) as any).nodeAfter; + const node = state.doc.resolve(start).nodeAfter; const newNode = schema.nodes.dashComment.create({ docId: doc[Id], reflow: false }); const dashDoc = schema.nodes.dashDoc.create({ width: 75, height: 35, title: 'dashDoc', docId: doc[Id], float: 'right' }); const sm = state.storedMarks || undefined; @@ -137,7 +131,7 @@ export class RichTextRules { textDocInline.proto = textDoc; // make the annotation inherit from the outer text doc so that it can resolve any nested field references, e.g., [[field]] textDoc[inlineLayoutKey] = FormattedTextBox.LayoutString(inlineFieldKey); // create a layout string for the layout key that will render the annotation text textDoc[inlineFieldKey] = ''; // set a default value for the annotation - const node = (state.doc.resolve(start) as any).nodeAfter; + const node = state.doc.resolve(start).nodeAfter; const newNode = schema.nodes.dashComment.create({ docId: textDocInline[Id], reflow: true }); const dashDoc = schema.nodes.dashDoc.create({ width: 75, height: 35, title: 'dashDoc', docId: textDocInline[Id], float: 'right' }); const sm = state.storedMarks || undefined; @@ -154,8 +148,8 @@ export class RichTextRules { // set the First-line indent node type for the selection's paragraph (assumes % was used to initiate an EnteringStyle mode) new InputRule(/(%d|d)$/, (state, match, start, end) => { if (!match[0].startsWith('%') && !this.EnteringStyle) return null; - const pos = state.doc.resolve(start) as any; - for (let depth = pos.path.length / 3 - 1; depth >= 0; depth--) { + const pos = state.doc.resolve(start); + for (let depth = pos.depth; depth >= 0; depth--) { const node = pos.node(depth); if (node.type === schema.nodes.paragraph) { const replaced = state.tr.setNodeMarkup(pos.pos - pos.parentOffset - 1, node.type, { ...node.attrs, indent: node.attrs.indent === 25 ? undefined : 25 }); @@ -169,8 +163,8 @@ export class RichTextRules { // set the Hanging indent node type for the current selection's paragraph (assumes % was used to initiate an EnteringStyle mode) new InputRule(/(%h|h)$/, (state, match, start, end) => { if (!match[0].startsWith('%') && !this.EnteringStyle) return null; - const pos = state.doc.resolve(start) as any; - for (let depth = pos.path.length / 3 - 1; depth >= 0; depth--) { + const pos = state.doc.resolve(start); + for (let depth = pos.depth; depth >= 0; depth--) { const node = pos.node(depth); if (node.type === schema.nodes.paragraph) { const replaced = state.tr.setNodeMarkup(pos.pos - pos.parentOffset - 1, node.type, { ...node.attrs, indent: node.attrs.indent === -25 ? undefined : -25 }); @@ -184,12 +178,12 @@ export class RichTextRules { // set the Quoted indent node type for the current selection's paragraph (assumes % was used to initiate an EnteringStyle mode) new InputRule(/(%q|q)$/, (state, match, start, end) => { if (!match[0].startsWith('%') && !this.EnteringStyle) return null; - const pos = state.doc.resolve(start) as any; + const pos = state.doc.resolve(start); if (state.selection instanceof NodeSelection && state.selection.node.type === schema.nodes.ordered_list) { const { node } = state.selection; return state.tr.setNodeMarkup(pos.pos, node.type, { ...node.attrs, indent: node.attrs.indent === 30 ? undefined : 30 }); } - for (let depth = pos.path.length / 3 - 1; depth >= 0; depth--) { + for (let depth = pos.depth; depth >= 0; depth--) { const node = pos.node(depth); if (node.type === schema.nodes.paragraph) { const replaced = state.tr.setNodeMarkup(pos.pos - pos.parentOffset - 1, node.type, { ...node.attrs, inset: node.attrs.inset === 30 ? undefined : 30 }); @@ -202,9 +196,9 @@ export class RichTextRules { // center justify text new InputRule(/%\^/, (state, match, start, end) => { - const resolved = state.doc.resolve(start) as any; + const resolved = state.doc.resolve(start); if (resolved?.parent.type.name === 'paragraph') { - return state.tr.deleteRange(start, end).setNodeMarkup(resolved.path[resolved.path.length - 4], schema.nodes.paragraph, { ...resolved.parent.attrs, align: 'center' }, resolved.parent.marks); + return state.tr.deleteRange(start, end).setNodeMarkup(resolved.start() - 1, schema.nodes.paragraph, { ...resolved.parent.attrs, align: 'center' }, resolved.parent.marks); } const node = resolved.nodeAfter; const sm = state.storedMarks || undefined; @@ -214,9 +208,9 @@ export class RichTextRules { // left justify text new InputRule(/%\[/, (state, match, start, end) => { - const resolved = state.doc.resolve(start) as any; + const resolved = state.doc.resolve(start); if (resolved?.parent.type.name === 'paragraph') { - return state.tr.deleteRange(start, end).setNodeMarkup(resolved.path[resolved.path.length - 4], schema.nodes.paragraph, { ...resolved.parent.attrs, align: 'left' }, resolved.parent.marks); + return state.tr.deleteRange(start, end).setNodeMarkup(resolved.start() - 1, schema.nodes.paragraph, { ...resolved.parent.attrs, align: 'left' }, resolved.parent.marks); } const node = resolved.nodeAfter; const sm = state.storedMarks || undefined; @@ -226,9 +220,9 @@ export class RichTextRules { // right justify text new InputRule(/%\]/, (state, match, start, end) => { - const resolved = state.doc.resolve(start) as any; + const resolved = state.doc.resolve(start); if (resolved?.parent.type.name === 'paragraph') { - return state.tr.deleteRange(start, end).setNodeMarkup(resolved.path[resolved.path.length - 4], schema.nodes.paragraph, { ...resolved.parent.attrs, align: 'right' }, resolved.parent.marks); + return state.tr.deleteRange(start, end).setNodeMarkup(resolved.start() - 1, schema.nodes.paragraph, { ...resolved.parent.attrs, align: 'right' }, resolved.parent.marks); } const node = resolved.nodeAfter; const sm = state.storedMarks || undefined; @@ -402,7 +396,7 @@ export class RichTextRules { }), // create an inline view of a tag stored under the '#' field - new InputRule(/#([a-zA-Z_-]+[a-zA-Z_\-0-9]*)\s$/, (state, match, start, end) => { + new InputRule(/#(@?[a-zA-Z_-]+[a-zA-Z_\-0-9]*)\s$/, (state, match, start, end) => { const tag = match[1]; if (!tag) return state.tr; // this.Document[DocData]['#' + tag] = '#' + tag; @@ -410,6 +404,7 @@ export class RichTextRules { if (!tags.includes(tag)) { tags.push(tag); this.Document[DocData].tags = new List<string>(tags); + this.Document[DocData].showTags = true; } const fieldView = state.schema.nodes.dashField.create({ fieldKey: '#' + tag }); return state.tr @@ -426,9 +421,9 @@ export class RichTextRules { if (state.selection.to === state.selection.from || !this.EnteringStyle) return null; const tag = match[0] === 't' ? 'todo' : match[0] === 'i' ? 'ignore' : match[0] === 'x' ? 'disagree' : match[0] === '!' ? 'important' : '??'; - const node = (state.doc.resolve(start) as any).nodeAfter; + const node = state.doc.resolve(start).nodeAfter; - if (node?.marks.findIndex((m: any) => m.type === schema.marks.user_tag) !== -1) return state.tr.removeMark(start, end, schema.marks.user_tag); + if (node?.marks.findIndex(m => m.type === schema.marks.user_tag) !== -1) return state.tr.removeMark(start, end, schema.marks.user_tag); return node ? state.tr .removeMark(start, end, schema.marks.user_mark) @@ -438,7 +433,7 @@ export class RichTextRules { }), new InputRule(/%\(/, (state, match, start, end) => { - const node = (state.doc.resolve(start) as any).nodeAfter; + const node = state.doc.resolve(start).nodeAfter; const sm = state.storedMarks?.slice() || []; const mark = state.schema.marks.summarizeInclusive.create(); @@ -447,7 +442,7 @@ export class RichTextRules { const content = selected.selection.content(); const replaced = node ? selected.replaceRangeWith(start, end, schema.nodes.summary.create({ visibility: true, text: content, textslice: content.toJSON() })) : state.tr; - return replaced.setSelection(new TextSelection(replaced.doc.resolve(end))).setStoredMarks([...node.marks, ...sm]); + return replaced.setSelection(new TextSelection(replaced.doc.resolve(end))).setStoredMarks([...(node?.marks ?? []), ...sm]); }), new InputRule(/%\)/, (state, match, start, end) => state.tr.deleteRange(start, end).removeStoredMark(state.schema.marks.summarizeInclusive.create())), diff --git a/src/client/views/nodes/formattedText/marks_rts.ts b/src/client/views/nodes/formattedText/marks_rts.ts index 6e1f325cf..ba8e4faed 100644 --- a/src/client/views/nodes/formattedText/marks_rts.ts +++ b/src/client/views/nodes/formattedText/marks_rts.ts @@ -34,14 +34,14 @@ export const marks: { [index: string]: MarkSpec } = { parseDOM: [ { tag: 'a[href]', - getAttrs(dom: any) { + getAttrs: dom => { return { title: dom.getAttribute('title'), }; }, }, ], - toDOM(node: any) { + toDOM: node => { const targethrefs = node.attrs.allAnchors.reduce((p: string, item: { href: string; title: string; anchorId: string }) => (p ? p + ' ' + item.href : item.href), ''); const anchorids = node.attrs.allAnchors.reduce((p: string, item: { href: string; title: string; anchorId: string }) => (p ? p + ' ' + item.anchorId : item.anchorId), ''); return ['a', { id: Utils.GenerateGuid(), class: anchorids, 'data-targethrefs': targethrefs, /* 'data-noPreview': 'true', */ 'data-linkdoc': node.attrs.linkDoc, title: node.attrs.title, style: `background: lightBlue` }, 0]; @@ -53,7 +53,7 @@ export const marks: { [index: string]: MarkSpec } = { parseDOM: [ { tag: 'div', - getAttrs(dom: any) { + getAttrs: dom => { return { noAutoLink: dom.getAttribute('data-noAutoLink'), }; @@ -80,7 +80,7 @@ export const marks: { [index: string]: MarkSpec } = { parseDOM: [ { tag: 'a[href]', - getAttrs(dom: any) { + getAttrs: dom => { return { title: dom.getAttribute('title'), noPreview: dom.getAttribute('noPreview'), @@ -88,7 +88,7 @@ export const marks: { [index: string]: MarkSpec } = { }, }, ], - toDOM(node: any) { + toDOM: node => { const targethrefs = node.attrs.allAnchors.reduce((p: string, item: { href: string; title: string; anchorId: string }) => (p ? p + ' ' + item.href : item.href), ''); const anchorids = node.attrs.allAnchors.reduce((p: string, item: { href: string; title: string; anchorId: string }) => (p ? p + ' ' + item.anchorId : item.anchorId), ''); return node.attrs.docref && node.attrs.title @@ -117,7 +117,7 @@ export const marks: { [index: string]: MarkSpec } = { parseDOM: [ { tag: 'span', - getAttrs(dom: any) { + getAttrs: dom => { return { fontSize: dom.style.fontSize ? dom.style.fontSize.toString() : '' }; }, }, @@ -131,7 +131,7 @@ export const marks: { [index: string]: MarkSpec } = { parseDOM: [ { tag: 'span', - getAttrs(dom: any) { + getAttrs: dom => { const cstyle = getComputedStyle(dom); if (cstyle.font) { if (cstyle.font.indexOf('Times New Roman') !== -1) return { fontFamily: 'Times New Roman' }; @@ -154,7 +154,7 @@ export const marks: { [index: string]: MarkSpec } = { parseDOM: [ { tag: 'span', - getAttrs(dom: any) { + getAttrs: dom => { return { color: dom.getAttribute('color') }; }, }, @@ -170,12 +170,12 @@ export const marks: { [index: string]: MarkSpec } = { parseDOM: [ { tag: 'span', - getAttrs(dom: any) { + getAttrs: dom => { return { fontHighlight: dom.getAttribute('background-color') }; }, }, ], - toDOM(node: any) { + toDOM: node => { return node.attrs.fontHighlight ? ['span', { style: 'background-color:' + node.attrs.fontHighlight }] : ['span', { style: 'background-color: transparent' }]; }, }, @@ -224,7 +224,7 @@ export const marks: { [index: string]: MarkSpec } = { attrs: { bulletType: { default: 'decimal' }, }, - toDOM(node: any) { + toDOM: node => { return [ 'span', { @@ -238,11 +238,11 @@ export const marks: { [index: string]: MarkSpec } = { parseDOM: [ { tag: 'span', - getAttrs: (p: any) => { + getAttrs: p => { if (typeof p !== 'string') { const style = getComputedStyle(p); if (style.textDecoration === 'underline') return null; - if (p.parentElement.outerHTML.indexOf('text-decoration: underline') !== -1 && p.parentElement.outerHTML.indexOf('text-decoration-style: solid') !== -1) { + if (p.parentElement?.outerHTML.indexOf('text-decoration: underline') !== -1 && p.parentElement?.outerHTML.indexOf('text-decoration-style: solid') !== -1) { return null; } } @@ -266,11 +266,11 @@ export const marks: { [index: string]: MarkSpec } = { parseDOM: [ { tag: 'span', - getAttrs: (p: any) => { + getAttrs: p => { if (typeof p !== 'string') { const style = getComputedStyle(p); if (style.textDecoration === 'underline') return null; - if (p.parentElement.outerHTML.indexOf('text-decoration: underline') !== -1 && p.parentElement.outerHTML.indexOf('text-decoration-style: dotted') !== -1) { + if (p.parentElement?.outerHTML.indexOf('text-decoration: underline') !== -1 && p.parentElement?.outerHTML.indexOf('text-decoration-style: dotted') !== -1) { return null; } } @@ -292,10 +292,10 @@ export const marks: { [index: string]: MarkSpec } = { parseDOM: [ { tag: 'span', - getAttrs: (p: any) => { + getAttrs: p => { if (typeof p !== 'string') { const style = getComputedStyle(p); - if (style.textDecoration === 'underline' || p.parentElement.outerHTML.indexOf('text-decoration-style:line') !== -1) { + if (style.textDecoration === 'underline' || p.parentElement?.outerHTML.indexOf('text-decoration-style:line') !== -1) { return null; } } @@ -317,7 +317,7 @@ export const marks: { [index: string]: MarkSpec } = { selected: { default: false }, }, parseDOM: [{ style: 'background: yellow' }], - toDOM(node: any) { + toDOM: node => { return ['span', { style: `background: ${node.attrs.selected ? 'orange' : 'yellow'}` }]; }, }, @@ -330,7 +330,7 @@ export const marks: { [index: string]: MarkSpec } = { }, excludes: 'user_mark', group: 'inline', - toDOM(node: any) { + toDOM: node => { const uid = node.attrs.userid.replace(/\./g, '').replace(/@/g, ''); const min = Math.round(node.attrs.modified / 60); const hr = Math.round(min / 60); @@ -348,7 +348,7 @@ export const marks: { [index: string]: MarkSpec } = { }, group: 'inline', inclusive: false, - toDOM(node: any) { + toDOM: node => { const uid = node.attrs.userid.replace('.', '').replace('@', ''); return ['span', { class: 'UT-' + uid + ' UT-' + node.attrs.tag }, 0]; }, diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts index 5bf942218..02ded3103 100644 --- a/src/client/views/nodes/formattedText/nodes_rts.ts +++ b/src/client/views/nodes/formattedText/nodes_rts.ts @@ -1,6 +1,6 @@ import { DOMOutputSpec, Node, NodeSpec } from 'prosemirror-model'; import { listItem, orderedList } from 'prosemirror-schema-list'; -import { ParagraphNodeSpec, toParagraphDOM, getParagraphNodeAttrs } from './ParagraphNodeSpec'; +import { ParagraphNodeSpec, toParagraphDOM, getHeadingAttrs } from './ParagraphNodeSpec'; import { DocServer } from '../../../DocServer'; import { Doc, Field, FieldType } from '../../../../fields/Doc'; import { schema } from './schema_rts'; @@ -53,7 +53,7 @@ export const nodes: { [index: string]: NodeSpec } = { parseDOM: [ { tag: 'audiotag', - getAttrs(dom: any) { + getAttrs: dom => { return { timeCode: dom.getAttribute('data-timecode'), audioId: dom.getAttribute('data-audioid'), @@ -123,24 +123,57 @@ export const nodes: { [index: string]: NodeSpec } = { level: { default: 1 }, }, parseDOM: [ - { tag: 'h1', attrs: { level: 1 } }, - { tag: 'h2', attrs: { level: 2 } }, - { tag: 'h3', attrs: { level: 3 } }, - { tag: 'h4', attrs: { level: 4 } }, - { tag: 'h5', attrs: { level: 5 } }, - { tag: 'h6', attrs: { level: 6 } }, + { + tag: 'h1', + attrs: { level: 1 }, + getAttrs(dom) { + return getHeadingAttrs(dom); + }, + }, + { + tag: 'h2', + attrs: { level: 2 }, + getAttrs(dom) { + return getHeadingAttrs(dom); + }, + }, + { + tag: 'h3', + attrs: { level: 3 }, + getAttrs(dom) { + return getHeadingAttrs(dom); + }, + }, + { + tag: 'h4', + attrs: { level: 4 }, + getAttrs(dom) { + return getHeadingAttrs(dom); + }, + }, + { + tag: 'h5', + attrs: { level: 5 }, + getAttrs(dom) { + return getHeadingAttrs(dom); + }, + }, + { + tag: 'h6', + attrs: { level: 6 }, + getAttrs(dom) { + return getHeadingAttrs(dom); + }, + }, ], toDOM(node) { - const dom = toParagraphDOM(node) as any; - dom[0] = `h${node.attrs.level || 1}`; + const dom = toParagraphDOM(node); + if (dom instanceof Array) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (dom as any)[0] = `h${node.attrs.level || 1}`; // [0] is readonly so cast away to any + } return dom; }, - getAttrs(dom: any) { - const attrs = getParagraphNodeAttrs(dom) as any; - const level = Number(dom.nodeName.substring(1)) || 1; - attrs.level = level; - return attrs; - }, }, // :: NodeSpec A code listing. Disallows marks or non-text inline @@ -221,7 +254,7 @@ export const nodes: { [index: string]: NodeSpec } = { parseDOM: [ { tag: 'img[src]', - getAttrs(dom: any) { + getAttrs: dom => { return { src: dom.getAttribute('src'), title: dom.getAttribute('title'), @@ -300,7 +333,7 @@ export const nodes: { [index: string]: NodeSpec } = { parseDOM: [ { tag: 'video[src]', - getAttrs(dom: any) { + getAttrs: dom => { return { src: dom.getAttribute('src'), title: dom.getAttribute('title'), @@ -341,33 +374,31 @@ export const nodes: { [index: string]: NodeSpec } = { parseDOM: [ { tag: 'ul', - getAttrs(dom: any) { + getAttrs: dom => { return { bulletStyle: dom.getAttribute('data-bulletStyle'), mapStyle: dom.getAttribute('data-mapStyle'), fontColor: dom.style.color, - fontSize: dom.style['font-size'], - fontFamily: dom.style['font-family'], - indent: dom.style['margin-left'], + fontSize: dom.style.fontSize, + fontFamily: dom.style.fontFamily, + indent: dom.style.marginLeft, }; }, }, { style: 'list-style-type=disc', - getAttrs() { - return { mapStyle: 'bullet' }; - }, + getAttrs: () => ({ mapStyle: 'bullet' }), }, { tag: 'ol', - getAttrs(dom: any) { + getAttrs: dom => { return { bulletStyle: dom.getAttribute('data-bulletStyle'), mapStyle: dom.getAttribute('data-mapStyle'), fontColor: dom.style.color, - fontSize: dom.style['font-size'], - fontFamily: dom.style['font-family'], - indent: dom.style['margin-left'], + fontSize: dom.style.fontSize, + fontFamily: dom.style.fontFamily, + indent: dom.style.marginLeft, }; }, }, @@ -416,7 +447,7 @@ export const nodes: { [index: string]: NodeSpec } = { parseDOM: [ { tag: 'li', - getAttrs(dom: any) { + getAttrs: dom => { return { mapStyle: dom.getAttribute('data-mapStyle'), bulletStyle: dom.getAttribute('data-bulletStyle') }; }, }, diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 0c73400a9..7448fa898 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -1,10 +1,8 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import Slider from '@mui/material/Slider'; import { Button, Dropdown, DropdownType, IconButton, Toggle, ToggleType, Type } from 'browndash-components'; -import { action, computed, IReactionDisposer, makeObservable, observable, ObservableSet, reaction, runInAction } from 'mobx'; +import { IReactionDisposer, ObservableSet, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { AiOutlineSend } from 'react-icons/ai'; @@ -12,7 +10,8 @@ import { BiMicrophone } from 'react-icons/bi'; import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp } from 'react-icons/fa'; import ReactLoading from 'react-loading'; import ReactTextareaAutosize from 'react-textarea-autosize'; -import { lightOrDark, returnFalse, returnOne, setupMoveUpEvents, StopEvent } from '../../../../ClientUtils'; +import { StopEvent, lightOrDark, returnFalse, returnOne, setupMoveUpEvents } from '../../../../ClientUtils'; +import { emptyFunction, stringHash } from '../../../../Utils'; import { Doc, DocListCast, Field, FieldResult, FieldType, NumListCast, Opt, StrListCast } from '../../../../fields/Doc'; import { Animation, DocData, TransitionTimer } from '../../../../fields/DocSymbols'; import { Copy } from '../../../../fields/FieldSymbols'; @@ -22,24 +21,23 @@ import { ObjectField } from '../../../../fields/ObjectField'; import { listSpec } from '../../../../fields/Schema'; import { ComputedField, ScriptField } from '../../../../fields/ScriptField'; import { BoolCast, Cast, DocCast, NumCast, StrCast, toList } from '../../../../fields/Types'; -import { emptyFunction, emptyPath, stringHash } from '../../../../Utils'; -import { getSlideTransitionSuggestions, gptSlideProperties, gptTrailSlideCustomization } from '../../../apis/gpt/PresCustomization'; import { DocServer } from '../../../DocServer'; -import { Docs } from '../../../documents/Documents'; +import { getSlideTransitionSuggestions, gptSlideProperties, gptTrailSlideCustomization } from '../../../apis/gpt/PresCustomization'; import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes'; +import { Docs } from '../../../documents/Documents'; import { DictationManager } from '../../../util/DictationManager'; import { dropActionType } from '../../../util/DropActionTypes'; import { ScriptingGlobals } from '../../../util/ScriptingGlobals'; import { SerializationHelper } from '../../../util/SerializationHelper'; import { SnappingManager } from '../../../util/SnappingManager'; -import { undoBatch, UndoManager } from '../../../util/UndoManager'; -import { CollectionFreeFormView } from '../../collections/collectionFreeForm'; -import { CollectionFreeFormPannableContents } from '../../collections/collectionFreeForm/CollectionFreeFormPannableContents'; +import { UndoManager, undoBatch, undoable } from '../../../util/UndoManager'; +import { ViewBoxBaseComponent } from '../../DocComponent'; +import { pinDataTypes as dataTypes } from '../../PinFuncs'; import { CollectionView } from '../../collections/CollectionView'; import { TreeView } from '../../collections/TreeView'; -import { ViewBoxBaseComponent } from '../../DocComponent'; +import { CollectionFreeFormView } from '../../collections/collectionFreeForm'; +import { CollectionFreeFormPannableContents } from '../../collections/collectionFreeForm/CollectionFreeFormPannableContents'; import { Colors } from '../../global/globalEnums'; -import { pinDataTypes as dataTypes } from '../../PinFuncs'; import { DocumentView } from '../DocumentView'; import { FieldView, FieldViewProps } from '../FieldView'; import { FocusViewOptions } from '../FocusViewOptions'; @@ -49,7 +47,7 @@ import CubicBezierEditor, { EaseFuncToPoints, TIMING_DEFAULT_MAPPINGS } from './ import './PresBox.scss'; import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums'; import SlideEffect from './SlideEffect'; -import { AnimationSettings, easeItems, effectItems, effectTimings, movementItems, presEffectDefaultTimings, springMappings, springPreviewColors, SpringSettings, SpringType } from './SpringUtils'; +import { AnimationSettings, SpringSettings, SpringType, easeItems, effectItems, effectTimings, movementItems, presEffectDefaultTimings, springMappings, springPreviewColors } from './SpringUtils'; @observer export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { @@ -191,7 +189,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { @computed get isTreeOrStack() { - return [CollectionViewType.Tree, CollectionViewType.Stacking].includes(StrCast(this.layoutDoc._type_collection) as any); + return [CollectionViewType.Tree, CollectionViewType.Stacking].includes(StrCast(this.layoutDoc._type_collection) as CollectionViewType); } @computed get isTree() { return this.layoutDoc._type_collection === CollectionViewType.Tree; @@ -304,7 +302,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { // 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played startTempMedia = (targetDoc: Doc, activeItem: Doc) => { const duration: number = NumCast(activeItem.config_clipEnd) - NumCast(activeItem.config_clipStart); - if ([DocumentType.VID, DocumentType.AUDIO].includes(targetDoc.type as any)) { + if ([DocumentType.VID, DocumentType.AUDIO].includes(targetDoc.type as DocumentType)) { const targMedia = DocumentView.getDocumentView(targetDoc); targMedia?.ComponentView?.playFrom?.(NumCast(activeItem.config_clipStart), NumCast(activeItem.config_clipStart) + duration); } @@ -312,7 +310,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { stopTempMedia = (targetDocField: FieldResult) => { const targetDoc = DocCast(DocCast(targetDocField).annotationOn) ?? DocCast(targetDocField); - if ([DocumentType.VID, DocumentType.AUDIO].includes(targetDoc.type as any)) { + if ([DocumentType.VID, DocumentType.AUDIO].includes(targetDoc.type as DocumentType)) { const targMedia = DocumentView.getDocumentView(targetDoc); targMedia?.ComponentView?.Pause?.(); } @@ -364,7 +362,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { this.setIsRecording(false); this.setIsLoading(true); - const currSlideProperties: { [key: string]: any } = {}; + const currSlideProperties: { [key: string]: FieldResult } = {}; gptSlideProperties.forEach(key => { if (this.activeItem[key]) { currSlideProperties[key] = this.activeItem[key]; @@ -554,7 +552,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } }); static pinDataTypes(target?: Doc): dataTypes { - const targetType = target?.type as any; + const targetType = target?.type as DocumentType; const inkable = [DocumentType.INK].includes(targetType); const scrollable = [DocumentType.PDF, DocumentType.RTF, DocumentType.WEB].includes(targetType) || target?._type_collection === CollectionViewType.Stacking; const pannable = [DocumentType.IMG, DocumentType.PDF].includes(targetType) || (targetType === DocumentType.COL && target?._type_collection === CollectionViewType.Freeform); @@ -759,8 +757,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { const doc = DocCast(DocServer.GetCachedRefField(data.id)); if (doc) { transitioned.add(doc); - const field = !data.data ? undefined : await SerializationHelper.Deserialize(data.data); - const tfield = !data.text ? undefined : await SerializationHelper.Deserialize(data.text); + const field = !data.data ? undefined : ((await SerializationHelper.Deserialize(data.data)) as FieldType); + const tfield = !data.text ? undefined : ((await SerializationHelper.Deserialize(data.text)) as FieldType); doc._dataTransition = `all ${transTime}ms`; doc.x = data.x; doc.y = data.y; @@ -858,7 +856,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { effect: activeItem, noSelect: true, openLocation: targetDoc.type === DocumentType.PRES ? ((OpenWhere.replace + ':' + PresBox.PanelName) as OpenWhere) : OpenWhere.addLeft, - easeFunc: StrCast(activeItem.presentation_easeFunc, 'ease') as any, + easeFunc: StrCast(activeItem.presentation_easeFunc, 'ease') as 'linear' | 'ease', zoomTextSelections: BoolCast(activeItem.presentation_zoomText), playAudio: BoolCast(activeItem.presentation_playAudio), playMedia: activeItem.presentation_mediaStart === 'auto', @@ -1101,7 +1099,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { */ @undoBatch viewChanged = action((e: React.ChangeEvent) => { - const typeCollection = (e.target as any).selectedOptions[0].value as CollectionViewType; + const typeCollection = (e.target as HTMLSelectElement).selectedOptions[0].value as CollectionViewType; this.layoutDoc.presFieldKey = this.fieldKey + (typeCollection === CollectionViewType.Tree ? '-linearized' : ''); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here [CollectionViewType.Tree || CollectionViewType.Stacking].includes(typeCollection) && (this.Document._pivotField = undefined); @@ -1111,30 +1109,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } }); - /** - * Called when the user changes the view type - * Either 'List' (stacking) or 'Slides' (carousel) - */ - // @undoBatch - mediaStopChanged = action((e: React.ChangeEvent) => { - const { activeItem } = this; - const stopDoc = (e.target as any).selectedOptions[0].value as string; - const stopDocIndex = Number(stopDoc[0]); - activeItem.mediaStopDoc = stopDocIndex; - if (this.childDocs[stopDocIndex - 1].mediaStopTriggerList) { - const list = DocListCast(this.childDocs[stopDocIndex - 1].mediaStopTriggerList); - list.push(activeItem); - // this.childDocs[stopDocIndex - 1].mediaStopTriggerList = list;\ - } else { - this.childDocs[stopDocIndex - 1].mediaStopTriggerList = new List<Doc>(); - const list = DocListCast(this.childDocs[stopDocIndex - 1].mediaStopTriggerList); - list.push(activeItem); - // this.childDocs[stopDocIndex - 1].mediaStopTriggerList = list; - } - }); - movementName = action((activeItem: Doc) => { - if (![PresMovement.Zoom, PresMovement.Pan, PresMovement.Center, PresMovement.Jump, PresMovement.None].includes(StrCast(activeItem.presentation_movement) as any)) { + if (![PresMovement.Zoom, PresMovement.Pan, PresMovement.Center, PresMovement.Jump, PresMovement.None].includes(StrCast(activeItem.presentation_movement) as PresMovement)) { return PresMovement.Zoom; } return StrCast(activeItem.presentation_movement); @@ -1185,7 +1161,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { * Method to get the list of selected items in the order in which they have been selected */ @computed get listOfSelected() { - return Array.from(this.selectedArray).map((doc: Doc, index: any) => { + return Array.from(this.selectedArray).map((doc, index) => { const curDoc = Cast(doc, Doc, null); const tagDoc = Cast(curDoc.presentation_targetDoc, Doc, null); if (curDoc && curDoc === this.activeItem) @@ -1193,7 +1169,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { // eslint-disable-next-line react/no-array-index-key <div key={index} className="selectedList-items"> <b> - {index + 1}. {curDoc.title} + {index + 1}. {StrCast(curDoc.title)}) </b> </div> ); @@ -1201,14 +1177,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { return ( // eslint-disable-next-line react/no-array-index-key <div key={index} className="selectedList-items"> - {index + 1}. {curDoc.title} + {index + 1}. {StrCast(curDoc.title)} </div> ); if (curDoc) return ( // eslint-disable-next-line react/no-array-index-key <div key={index} className="selectedList-items"> - {index + 1}. {curDoc.title} + {index + 1}. {StrCast(curDoc.title)} </div> ); return null; @@ -1301,13 +1277,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { switch (e.key) { case 'Backspace': if (this.layoutDoc.presentation_status === 'edit') { - undoBatch( + undoable( action(() => { Array.from(this.selectedArray).forEach(doc => this.removeDocument(doc)); this.clearSelectedArray(); this._eleArray.length = 0; this._dragArray.length = 0; - }) + }), + 'delete slides' )(); handled = true; } @@ -1488,7 +1465,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { ); }; // Converts seconds to ms and updates presentation_transition - public static SetTransitionTime = (number: String, setter: (timeInMS: number) => void, change?: number) => { + public static SetTransitionTime = (number: string, setter: (timeInMS: number) => void, change?: number) => { let timeInMS = Number(number) * 1000; if (change) timeInMS += change; if (timeInMS < 100) timeInMS = 100; @@ -1497,7 +1474,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { }; @undoBatch - updateTransitionTime = (number: String, change?: number) => { + updateTransitionTime = (number: string, change?: number) => { PresBox.SetTransitionTime( number, (timeInMS: number) => @@ -1510,7 +1487,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { // Converts seconds to ms and updates presentation_transition @undoBatch - updateZoom = (number: String, change?: number) => { + updateZoom = (number: string, change?: number) => { let scale = Number(number) / 100; if (change) scale += change; if (scale < 0.01) scale = 0.01; @@ -1524,7 +1501,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { * Converts seconds to ms and updates presentation_duration */ @undoBatch - updateDurationTime = (number: String, change?: number) => { + updateDurationTime = (number: string, change?: number) => { let timeInMS = Number(number) * 1000; if (change) timeInMS += change; if (timeInMS < 100) timeInMS = 100; @@ -1608,9 +1585,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { }); }; - static _sliderBatch: any; + static _sliderBatch: UndoManager.Batch | undefined; static endBatch = () => { - PresBox._sliderBatch.end(); + PresBox._sliderBatch?.end(); document.removeEventListener('pointerup', PresBox.endBatch, true); }; public static inputter = (min: string, step: string, max: string, value: number, active: boolean, change: (val: string) => void, hmargin?: number) => ( @@ -1704,7 +1681,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { </div> </Tooltip> </div> - {[DocumentType.AUDIO, DocumentType.VID].includes(targetType as any as DocumentType) ? null : ( + {[DocumentType.AUDIO, DocumentType.VID].includes(targetType as DocumentType) ? null : ( <> <div className="ribbon-doubleButton"> <div className="presBox-subheading">Slide Duration</div> @@ -1847,7 +1824,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { if (activeItem && this.targetDoc) { const transitionSpeed = activeItem.presentation_transition ? NumCast(activeItem.presentation_transition) / 1000 : 0.5; const zoom = NumCast(activeItem.config_zoom, 1) * 100; - const effect = StrCast(activeItem.presentation_effect) ? (StrCast(activeItem.presentation_effect) as any as PresEffect) : PresEffect.None; + const effect = StrCast(activeItem.presentation_effect) ? (StrCast(activeItem.presentation_effect) as PresEffect) : PresEffect.None; const direction = StrCast(activeItem.presentation_effectDirection) as PresEffectDirection; return ( @@ -2660,24 +2637,26 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { <div className={`dropdown-play ${this._presentTools ? 'active' : ''}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> <div className="dropdown-play-button" - onClick={undoBatch( + onClick={undoable( action(() => { this.enterMinimize(); this.turnOffEdit(true); this.gotoDocument(this.itemIndex, this.activeItem); - }) + }), + 'minimze presentation' )}> Mini-player </div> <div className="dropdown-play-button" - onClick={undoBatch( + onClick={undoable( action(() => { this.layoutDoc.presentation_status = 'manual'; this.initializePresState(this.itemIndex); this.turnOffEdit(true); this.gotoDocument(this.itemIndex, this.activeItem); - }) + }), + 'make presentation manual' )}> Sidebar player </div> @@ -2773,13 +2752,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { <span className={`presBox-button ${this.layoutDoc.presentation_status === PresStatus.Edit ? 'present' : ''}`}> <div className="presBox-button-left" - onClick={undoBatch(() => { + onClick={undoable(() => { if (this.childDocs.length) { this.layoutDoc.presentation_status = 'manual'; this.initializePresState(this.itemIndex); this.gotoDocument(this.itemIndex, this.activeItem); } - })}> + }, 'start presentation')}> <FontAwesomeIcon icon="play-circle" /> <div style={{ display: this._props.PanelWidth() > 200 ? 'inline-flex' : 'none' }}> Present</div> </div> @@ -2911,11 +2890,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { {this._props.PanelWidth() > 250 ? ( <div className="presPanel-button-text" - onClick={undoBatch( + onClick={undoable( action(() => { this.layoutDoc.presentation_status = PresStatus.Edit; clearTimeout(this._presTimer); - }) + }), + 'edit presetnation' )}> EXIT </div> @@ -2988,7 +2968,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { }; sort = (treeViewMap: Map<Doc, number>) => [...treeViewMap.entries()].sort((a: [Doc, number], b: [Doc, number]) => (a[1] > b[1] ? 1 : a[1] < b[1] ? -1 : 0)).map(kv => kv[0]); - + emptyHierarchy = []; render() { // needed to ensure that the childDocs are loaded for looking up fields this.childDocs.slice(); @@ -3086,7 +3066,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { ScreenToLocalTransform={this.getTransform} AddToMap={this.AddToMap} RemFromMap={this.RemFromMap} - hierarchyIndex={emptyPath} + hierarchyIndex={this.emptyHierarchy} /> ) : null} </div> diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index 25adfba23..a76805960 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -1,11 +1,9 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils'; +import { returnFalse, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils'; import { Doc, DocListCast, Opt } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; @@ -23,6 +21,7 @@ import { EditableView } from '../../EditableView'; import { Colors } from '../../global/globalEnums'; import { PinDocView } from '../../PinFuncs'; import { StyleProp } from '../../StyleProp'; +import { returnEmptyDocViewList } from '../../StyleProvider'; import { DocumentView } from '../DocumentView'; import { FieldView, FieldViewProps } from '../FieldView'; import { PresBox } from './PresBox'; @@ -105,7 +104,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { embedHeight = () => this.collapsedHeight + this.expandViewHeight; embedWidth = () => this._props.PanelWidth() / 2; // prettier-ignore - styleProvider = ( doc: Doc | undefined, props: Opt<FieldViewProps>, property: string ): any => + styleProvider = ( doc: Doc | undefined, props: Opt<FieldViewProps>, property: string ) => (property === StyleProp.Opacity ? 1 : this._props.styleProvider?.(doc, props, property)); /** * The function that is responsible for rendering a preview or not for this @@ -123,7 +122,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { hideLinkButton ScreenToLocalTransform={Transform.Identity} renderDepth={this._props.renderDepth + 1} - containerViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDocViewList} childFilters={this._props.childFilters} childFiltersByRanges={this._props.childFiltersByRanges} searchFilterDocs={this._props.searchFilterDocs} @@ -144,6 +143,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { const childDocs = DocListCast(this.targetDoc.data); const groupSlides = childDocs.map((doc: Doc, ind: number) => ( <div + key={doc[Id]} className="presItem-groupSlide" onClick={e => { e.stopPropagation(); @@ -156,7 +156,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { <EditableView ref={this._titleRef} editing={undefined} - contents={doc.title} + contents={StrCast(doc.title)} overflow="ellipsis" GetValue={() => StrCast(doc.title)} SetValue={(value: string) => { @@ -179,7 +179,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { @action headerDown = (e: React.PointerEvent<HTMLDivElement>) => { - const element = e.target as any; + const element = e.target as HTMLDivElement; e.stopPropagation(); e.preventDefault(); if (element && !(e.ctrlKey || e.metaKey || e.button === 2)) { @@ -580,7 +580,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { className={`presItem-slide ${isCurrent ? 'active' : ''}${activeItem.runProcess ? ' testingv2' : ''}`} style={{ display: 'infline-block', - backgroundColor: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor), + backgroundColor: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string, // layout_boxShadow: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? '0 0 0px 1.5px' + presBoxColor : undefined) : undefined, border: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? presBoxColor + ' solid 2.5px' : undefined) : undefined, }}> @@ -602,7 +602,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { } }} onClick={e => e.stopPropagation()}>{`${this.indexInPres + 1}. `}</div> - <EditableView ref={this._titleRef} oneLine editing={!isSelected ? false : undefined} contents={activeItem.title} overflow="ellipsis" GetValue={() => StrCast(activeItem.title)} SetValue={this.onSetValue} /> + <EditableView ref={this._titleRef} oneLine editing={!isSelected ? false : undefined} contents={StrCast(activeItem.title)} overflow="ellipsis" GetValue={() => StrCast(activeItem.title)} SetValue={this.onSetValue} /> </div> {/* <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip> */} {/* <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip> */} diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx index 00039e3cb..a114c231f 100644 --- a/src/client/views/nodes/trails/SlideEffect.tsx +++ b/src/client/views/nodes/trails/SlideEffect.tsx @@ -103,7 +103,7 @@ export default function SpringAnimation({ doc, dir, springSettings, presEffect, api.start({ loop: infinite, delay: infinite ? 500 : 0 }); } }, [inView]); - const animatedDiv = (style: any) => ( + const animatedDiv = (style: object) => ( <animated.div ref={ref} style={{ ...style, opacity: to(springs.opacity, val => `${val}`) }}> {children} </animated.div> diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx index 96f025ca0..f5f758ad2 100644 --- a/src/client/views/pdf/AnchorMenu.tsx +++ b/src/client/views/pdf/AnchorMenu.tsx @@ -25,7 +25,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { private _commentRef = React.createRef<HTMLDivElement>(); private _cropRef = React.createRef<HTMLDivElement>(); - constructor(props: any) { + constructor(props: AntimodeMenuProps) { super(props); makeObservable(this); AnchorMenu.Instance = this; @@ -50,7 +50,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { public OnAudio: (e: PointerEvent) => void = unimplementedFunction; public StartDrag: (e: PointerEvent, ele: HTMLElement) => void = unimplementedFunction; public StartCropDrag: (e: PointerEvent, ele: HTMLElement) => void = unimplementedFunction; - public Highlight: (color: string) => Opt<Doc> = (/* color: string */) => undefined; + public Highlight: (color: string) => void = emptyFunction; public GetAnchor: (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => Opt<Doc> = emptyFunction; public Delete: () => void = unimplementedFunction; public PinToPres: () => void = unimplementedFunction; diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx index 7dd4047c1..1891cfd4c 100644 --- a/src/client/views/pdf/Annotation.tsx +++ b/src/client/views/pdf/Annotation.tsx @@ -13,6 +13,7 @@ import { FieldViewProps } from '../nodes/FieldView'; import { OpenWhere } from '../nodes/OpenWhere'; import { AnchorMenu } from './AnchorMenu'; import './Annotation.scss'; +import { Property } from 'csstype'; interface IRegionAnnotationProps { x: number; @@ -45,7 +46,7 @@ interface IAnnotationProps extends FieldViewProps { annoDoc: Doc; containerDataDoc: Doc; fieldKey: string; - pointerEvents?: () => Opt<string>; + pointerEvents?: () => Opt<Property.PointerEvents>; } @observer export class Annotation extends ObservableReactComponent<IAnnotationProps> { @@ -111,6 +112,7 @@ export class Annotation extends ObservableReactComponent<IAnnotationProps> { outline = () => (this.linkHighlighted ? 'solid 1px lightBlue' : undefined); background = () => (this._props.annoDoc[Highlight] ? 'orange' : StrCast(this._props.annoDoc.backgroundColor)); render() { + const forceRenderHack = [this.background(), this.outline(), this.opacity()]; // forces a re-render when these change -- because RegionAnnotation doesn't do this internally.. return ( <div style={{ display: this._props.annoDoc.textCopied && !Doc.GetBrushHighlightStatus(this._props.annoDoc) ? 'none' : undefined }}> {StrListCast(this._props.annoDoc.text_inlineAnnotations) diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx index 13196f06d..002e82332 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx +++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jsx-a11y/label-has-associated-control */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, IconButton, Type } from 'browndash-components'; import { action, makeObservable, observable } from 'mobx'; @@ -269,7 +268,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { public addDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean = () => false; - public createFilteredDoc: (axes?: any) => boolean = () => false; + public createFilteredDoc: (axes?: string[]) => boolean = () => false; public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined; @observable quizRespText: string = '' @@ -439,7 +438,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { * Transfers the image urls to actual image docs */ private transferToImage = (source: string) => { - const textAnchor = this.imgTargetDoc; + const textAnchor = this.textAnchor ?? this.imgTargetDoc; if (!textAnchor) return; const newDoc = Docs.Create.ImageDocument(source, { x: NumCast(textAnchor.x) + NumCast(textAnchor._width) + 10, @@ -641,8 +640,8 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}> {this.heading('GENERATED IMAGE')} <div className="image-content-wrapper"> - {this.imgUrls.map(rawSrc => ( - <div className="img-wrapper"> + {this.imgUrls.map((rawSrc, i) => ( + <div key={rawSrc[0] + i} className="img-wrapper"> <div className="img-container"> <img key={rawSrc[0]} src={rawSrc[0]} width={150} height={150} alt="dalle generation" /> </div> diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 709e9a23c..dee0edfae 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -1,10 +1,8 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as Pdfjs from 'pdfjs-dist'; -import 'pdfjs-dist/web/pdf_viewer.css'; import * as PDFJSViewer from 'pdfjs-dist/web/pdf_viewer.mjs'; +import 'pdfjs-dist/webpack.mjs'; // sets the PDF workerSrc import * as React from 'react'; import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, ClientUtils, returnAll, returnFalse, returnNone, returnZero, smoothScroll } from '../../../ClientUtils'; import { CreateLinkToActiveAudio, Doc, DocListCast, Opt } from '../../../fields/Doc'; @@ -30,10 +28,8 @@ import { AnchorMenu } from './AnchorMenu'; import { Annotation } from './Annotation'; import { GPTPopup } from './GPTPopup/GPTPopup'; import './PDFViewer.scss'; - -// pdfjsLib.GlobalWorkerOptions.workerSrc = `/assets/pdf.worker.js`; // The workerSrc property shall be specified. -Pdfjs.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@4.2.67/build/pdf.worker.mjs'; +// Pdfjs.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@4.4.168/build/pdf.worker.mjs'; interface IViewerProps extends FieldViewProps { pdfBox: PDFBox; @@ -64,13 +60,13 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { } @observable _pageSizes: { width: number; height: number }[] = []; - @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); + @observable _savedAnnotations = new ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>(); @observable _textSelecting = true; @observable _showWaiting = true; @observable Index: number = -1; - private _pdfViewer: any; - private _styleRule: any; // stylesheet rule for making hyperlinks clickable + private _pdfViewer!: PDFJSViewer.PDFViewer; + private _styleRule: number | undefined; // stylesheet rule for making hyperlinks clickable private _retries = 0; // number of times tried to create the PDF viewer private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void); private _marqueeref = React.createRef<MarqueeAnnotator>(); @@ -107,7 +103,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { }); this.setupPdfJsViewer(); this._mainCont.current?.addEventListener('scroll', e => { - (e.target as any).scrollLeft = 0; + (e.target as HTMLElement).scrollLeft = 0; }); this._disposers.layout_autoHeight = reaction( @@ -211,18 +207,12 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { }; pagesinit = () => { - if (this._pdfViewer._setDocumentViewerElement?.offsetParent) { - runInAction(() => { - this._pdfViewer.currentScaleValue = this._props.layoutDoc._freeform_scale = 1; - }); - this.gotoPage(NumCast(this._props.Document._layout_curPage, 1)); - } document.removeEventListener('pagesinit', this.pagesinit); let quickScroll: { loc?: string; easeFunc?: 'ease' | 'linear' } | undefined = { loc: this._initialScroll ? this._initialScroll.loc?.toString() : '', easeFunc: this._initialScroll ? this._initialScroll.easeFunc : undefined }; this._disposers.scale = reaction( () => NumCast(this._props.layoutDoc._freeform_scale, 1), scale => { - this._pdfViewer.currentScaleValue = scale; + this._pdfViewer.currentScaleValue = scale + ''; }, { fireImmediately: true } ); @@ -321,7 +311,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { } }; - @observable private _scrollTimer: any = undefined; + @observable private _scrollTimer: NodeJS.Timeout | undefined = undefined; onScroll = () => { if (this._mainCont.current && !this._forcedScroll) { @@ -330,7 +320,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { this._props.layoutDoc._layout_scrollTop = this._mainCont.current.scrollTop; } this._ignoreScroll = false; - if (this._scrollTimer) clearTimeout(this._scrollTimer); // wait until a scrolling pause, then create an anchor to audio + this._scrollTimer && clearTimeout(this._scrollTimer); // wait until a scrolling pause, then create an anchor to audio this._scrollTimer = setTimeout(() => { CreateLinkToActiveAudio(() => this._props.pdfBox.getAnchor(true)!, false); this._scrollTimer = undefined; @@ -390,8 +380,8 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { this._props.select(false); MarqueeAnnotator.clearAnnotations(this._savedAnnotations); this.isAnnotating = true; - const target = e.target as any; - if (e.target && (target.className.includes('endOfContent') || (target.parentElement.className !== 'textLayer' && target.parentElement.parentElement?.className !== 'textLayer'))) { + const target = e.target as HTMLElement; + if (e.target && (target.className.includes('endOfContent') || (target.parentElement?.className !== 'textLayer' && target.parentElement?.parentElement?.className !== 'textLayer'))) { this._textSelecting = false; } else { // if textLayer is hit, then we select text instead of using a marquee so clear out the marquee. @@ -491,7 +481,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { e.stopPropagation(); if (e.ctrlKey) { const curScale = Number(this._pdfViewer.currentScaleValue); - this._pdfViewer.currentScaleValue = Math.max(1, Math.min(10, curScale - (curScale * e.deltaY) / 1000)); + this._pdfViewer.currentScaleValue = Math.max(1, Math.min(10, curScale - (curScale * e.deltaY) / 1000)) + ''; this._props.layoutDoc._freeform_scale = Number(this._pdfViewer.currentScaleValue); } } @@ -520,21 +510,22 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> { panelHeight = () => this._props.PanelHeight() / (this._props.NativeDimScaling?.() || 1); transparentFilter = () => [...this._props.childFilters(), ClientUtils.TransparentBackgroundFilter]; opaqueFilter = () => [...this._props.childFilters(), ClientUtils.noDragDocsFilter, ...(SnappingManager.CanEmbed && this._props.isContentActive() ? [] : [ClientUtils.OpaqueBackgroundFilter])]; - childStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string): any => { + childStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string) => { if (doc instanceof Doc && property === StyleProp.PointerEvents) { if (this.inlineTextAnnotations.includes(doc) || this._props.isContentActive() === false) return 'none'; const isInk = doc.layout_isSvg && !props?.LayoutTemplateString; - return isInk ? 'visiblePainted' : 'all'; + if (isInk) return 'visiblePainted'; + //return isInk ? 'visiblePainted' : 'all'; } return this._props.styleProvider?.(doc, props, property); }; childPointerEvents = () => (this._props.isContentActive() !== false ? 'all' : 'none'); - renderAnnotations = (childFilters: () => string[], mixBlendMode?: any, display?: string) => ( + renderAnnotations = (childFilters: () => string[], mixBlendMode?: 'hard-light' | 'multiply', display?: string) => ( <div className="pdfViewerDash-overlay" style={{ - mixBlendMode: mixBlendMode, + mixBlendMode, display: display, pointerEvents: Doc.ActiveTool !== InkTool.None ? 'all' : undefined, }}> diff --git a/src/client/views/search/FaceRecognitionHandler.tsx b/src/client/views/search/FaceRecognitionHandler.tsx new file mode 100644 index 000000000..4f6f5d314 --- /dev/null +++ b/src/client/views/search/FaceRecognitionHandler.tsx @@ -0,0 +1,249 @@ +import * as faceapi from 'face-api.js'; +import { FaceMatcher } from 'face-api.js'; +import { Doc, DocListCast } from '../../../fields/Doc'; +import { DocData } from '../../../fields/DocSymbols'; +import { List } from '../../../fields/List'; +import { ComputedField } from '../../../fields/ScriptField'; +import { DocCast, ImageCast, NumCast, StrCast } from '../../../fields/Types'; +import { ImageField } from '../../../fields/URLField'; +import { DocumentType } from '../../documents/DocumentTypes'; +import { Docs } from '../../documents/Documents'; +import { DocumentManager } from '../../util/DocumentManager'; + +/** + * A singleton class that handles face recognition and manages face Doc collections for each face found. + * Displaying an image doc anywhere will trigger this class to test if the image contains any faces. + * If it does, each recognized face will be compared to a stored, global set of faces (each face is represented + * as a face collection Doc). If the face matches a face collection Doc, then it will be added to that + * collection along with the numerical representation of the face, its face descriptor. + * + * Image Doc's that are added to one or more face collection Docs will be given an annotation rectangle that + * highlights where the face is, and the annotation will have these fields: + * faceDescriptor - the numerical face representations found in the image. + * face - the unique face Docs corresponding to recognized face in the image. + * annotationOn - the image where the face was found + * + * unique face Doc's are created for each person identified and are stored in the Dashboard's myUniqueFaces field + * + * Each unique face Doc represents a unique face and collects all matching face images for that person. It has these fields: + * face - a string label for the person that was recognized (TODO: currently it's just a 'face#') + * face_annos - a list of face annotations, where each anno has + */ +export class FaceRecognitionHandler { + static _instance: FaceRecognitionHandler; + private _apiModelReady = false; + private _pendingAPIModelReadyDocs: Doc[] = []; + + public static get Instance() { + return FaceRecognitionHandler._instance ?? new FaceRecognitionHandler(); + } + + /** + * Loads an image + */ + private static loadImage = (imgUrl: ImageField): Promise<HTMLImageElement> => { + const [name, type] = imgUrl.url.href.split('.'); + const imageURL = `${name}_o.${type}`; + + return new Promise((resolve, reject) => { + const img = new Image(); + img.crossOrigin = 'anonymous'; + img.onload = () => resolve(img); + img.onerror = err => reject(err); + img.src = imageURL; + }); + }; + + /** + * Returns an array of faceDocs for each face recognized in the image + * @param imgDoc image with faces + * @returns faceDoc array + */ + public static ImageDocFaceAnnos = (imgDoc: Doc) => DocListCast(imgDoc[`${Doc.LayoutFieldKey(imgDoc)}_annotations`]).filter(doc => doc.face); + + /** + * returns a list of all face collection Docs on the current dashboard + * @returns face collection Doc list + */ + public static UniqueFaces = () => DocListCast(Doc.ActiveDashboard?.[DocData].myUniqueFaces); + + /** + * Find a unique face from its name + * @param name name of unique face + * @returns unique face or undefined + */ + public static FindUniqueFaceByName = (name: string) => FaceRecognitionHandler.UniqueFaces().find(faceDoc => faceDoc.title === name); + + /** + * Removes a unique face from the set of recognized unique faces + * @param faceDoc unique face Doc + * @returns + */ + public static DeleteUniqueFace = (faceDoc: Doc) => Doc.ActiveDashboard && Doc.RemoveDocFromList(Doc.ActiveDashboard[DocData], 'myUniqueFaces', faceDoc); + + /** + * returns the labels associated with a face collection Doc + * @param faceDoc unique face Doc + * @returns label string + */ + public static UniqueFaceLabel = (faceDoc: Doc) => StrCast(faceDoc[DocData].face); + + public static SetUniqueFaceLabel = (faceDoc: Doc, value: string) => (faceDoc[DocData].face = value); + /** + * Returns all the face descriptors associated with a unique face Doc + * @param faceDoc unique face Doc + * @returns face descriptors + */ + public static UniqueFaceDescriptors = (faceDoc: Doc) => DocListCast(faceDoc[DocData].face_annos).map(face => face.faceDescriptor as List<number>); + + /** + * Returns a list of all face image Docs associated with a unique face Doc + * @param faceDoc unique face Doc + * @returns image Docs + */ + public static UniqueFaceImages = (faceDoc: Doc) => DocListCast(faceDoc[DocData].face_annos).map(face => DocCast(face.annotationOn, face)); + + /** + * Adds a face image to a unique face Doc, adds the unique face Doc to the images list of reognized faces, + * and updates the unique face's set of face image descriptors + * @param img - image with faces to add to a face collection Doc + * @param faceAnno - a face annotation + */ + public static UniqueFaceAddFaceImage = (faceAnno: Doc, faceDoc: Doc) => { + Doc.AddDocToList(faceDoc, 'face_annos', faceAnno); + }; + + /** + * Removes a face from a unique Face Doc, and updates the unique face's set of face image descriptors + * @param img - image with faces to remove + * @param faceDoc - unique face Doc + */ + public static UniqueFaceRemoveFaceImage = (faceAnno: Doc, faceDoc: Doc) => { + Doc.RemoveDocFromList(faceDoc[DocData], 'face_annos', faceAnno); + faceAnno.face = undefined; + }; + + constructor() { + FaceRecognitionHandler._instance = this; + this.loadAPIModels().then(() => this._pendingAPIModelReadyDocs.forEach(this.classifyFacesInImage)); + DocumentManager.Instance.AddAnyViewRenderedCB(dv => FaceRecognitionHandler.Instance.classifyFacesInImage(dv.Document)); + } + + /** + * Loads the face detection models. + */ + private loadAPIModels = async () => { + const MODEL_URL = `/models`; + await faceapi.loadFaceDetectionModel(MODEL_URL); + await faceapi.loadFaceLandmarkModel(MODEL_URL); + await faceapi.loadFaceRecognitionModel(MODEL_URL); + this._apiModelReady = true; + }; + + /** + * Creates a new, empty unique face Doc + * @returns a unique face Doc + */ + private createUniqueFaceDoc = (dashboard: Doc) => { + const faceDocNum = NumCast(dashboard[DocData].myUniqueFaces_count) + 1; + dashboard[DocData].myUniqueFaces_count = faceDocNum; // TODO: improve to a better name + + const uniqueFaceDoc = Docs.Create.UniqeFaceDocument({ + title: ComputedField.MakeFunction('this.face', undefined, undefined, 'this.face = value') as unknown as string, + _layout_reflowHorizontal: true, + _layout_reflowVertical: true, + _layout_nativeDimEditable: true, + _layout_borderRounding: '20px', + _layout_fitWidth: true, + _layout_autoHeight: true, + _face_showImages: true, + _width: 400, + _height: 100, + }); + const uface = uniqueFaceDoc[DocData]; + uface.face = `Face${faceDocNum}`; + uface.face_annos = new List<Doc>(); + Doc.SetContainer(uniqueFaceDoc, Doc.MyFaceCollection); + + Doc.ActiveDashboard && Doc.AddDocToList(Doc.ActiveDashboard[DocData], 'myUniqueFaces', uniqueFaceDoc); + return uniqueFaceDoc; + }; + + /** + * Finds the most similar matching Face Document to a face descriptor + * @param faceDescriptor face descriptor number list + * @returns face Doc + */ + private findMatchingFaceDoc = (faceDescriptor: Float32Array) => { + if (!Doc.ActiveDashboard || FaceRecognitionHandler.UniqueFaces().length < 1) { + return undefined; + } + + const faceDescriptors = FaceRecognitionHandler.UniqueFaces().map(faceDoc => { + const float32Array = FaceRecognitionHandler.UniqueFaceDescriptors(faceDoc).map(fd => new Float32Array(Array.from(fd))); + return new faceapi.LabeledFaceDescriptors(FaceRecognitionHandler.UniqueFaceLabel(faceDoc), float32Array); + }); + const faceMatcher = new FaceMatcher(faceDescriptors, 0.6); + const match = faceMatcher.findBestMatch(faceDescriptor); + if (match.label !== 'unknown') { + for (const faceDoc of FaceRecognitionHandler.UniqueFaces()) { + if (FaceRecognitionHandler.UniqueFaceLabel(faceDoc) === match.label) { + return faceDoc; + } + } + } + return undefined; + }; + + /** + * When a document is added, this finds faces in the images and tries to + * match them to existing unique faces, otherwise new unique face(s) are created. + * @param imgDoc The document being analyzed. + */ + private classifyFacesInImage = async (imgDoc: Doc) => { + if (!Doc.UserDoc().recognizeFaceImages) return; + const activeDashboard = Doc.ActiveDashboard; + if (!this._apiModelReady || !activeDashboard) { + this._pendingAPIModelReadyDocs.push(imgDoc); + } else if (imgDoc.type === DocumentType.LOADING && !imgDoc.loadingError) { + setTimeout(() => this.classifyFacesInImage(imgDoc), 1000); + } else { + const imgUrl = ImageCast(imgDoc[Doc.LayoutFieldKey(imgDoc)]); + if (imgUrl && !DocListCast(Doc.MyFaceCollection.examinedFaceDocs).includes(imgDoc[DocData])) { + // only examine Docs that have an image and that haven't already been examined. + Doc.AddDocToList(Doc.MyFaceCollection, 'examinedFaceDocs', imgDoc[DocData]); + FaceRecognitionHandler.loadImage(imgUrl).then( + // load image and analyze faces + img => faceapi + .detectAllFaces(img) + .withFaceLandmarks() + .withFaceDescriptors() + .then(imgDocFaceDescriptions => { // For each face detected, find a match. + const annos = [] as Doc[]; + const scale = NumCast(imgDoc.data_nativeWidth) / img.width; + imgDocFaceDescriptions.forEach((fd, i) => { + const faceDescriptor = new List<number>(Array.from(fd.descriptor)); + const matchedUniqueFace = this.findMatchingFaceDoc(fd.descriptor) ?? this.createUniqueFaceDoc(activeDashboard); + const faceAnno = Docs.Create.FreeformDocument([], { + title: ComputedField.MakeFunction(`this.face.face`, undefined, undefined, 'this.face.face = value') as unknown as string, // + annotationOn: imgDoc, + face: matchedUniqueFace[DocData], + faceDescriptor: faceDescriptor, + backgroundColor: 'transparent', + x: fd.alignedRect.box.left * scale, + y: fd.alignedRect.box.top * scale, + _width: fd.alignedRect.box.width * scale, + _height: fd.alignedRect.box.height * scale, + }) + FaceRecognitionHandler.UniqueFaceAddFaceImage(faceAnno, matchedUniqueFace); // add image/faceDescriptor to matched unique face + annos.push(faceAnno); + }); + + imgDoc[DocData].data_annotations = new List<Doc>(annos); + return imgDocFaceDescriptions; + }) + ); // prettier-ignore + } + } + }; +} diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index e558e14e3..a85606bc4 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -5,8 +5,8 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { Flip } from 'react-awesome-reveal'; import { FaBug } from 'react-icons/fa'; -import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../ClientUtils'; -import { Doc, DocListCast } from '../../../fields/Doc'; +import { returnEmptyFilter, returnFalse, returnTrue } from '../../../ClientUtils'; +import { Doc, DocListCast, returnEmptyDoclist } from '../../../fields/Doc'; import { AclAdmin, DashVersion } from '../../../fields/DocSymbols'; import { StrCast } from '../../../fields/Types'; import { GetEffectiveAcl } from '../../../fields/util'; @@ -33,11 +33,11 @@ import './TopBar.scss'; * and settings and help buttons. Future scope for this bar is to include the collaborators that are on the same Dashboard. */ @observer -export class TopBar extends ObservableReactComponent<{}> { +export class TopBar extends ObservableReactComponent<object> { // eslint-disable-next-line no-use-before-define static Instance: TopBar; @observable private _flipDocumentation = 0; - constructor(props: any) { + constructor(props: object) { super(props); makeObservable(this); TopBar.Instance = this; |