diff options
Diffstat (limited to 'src/client')
19 files changed, 290 insertions, 282 deletions
diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts index c8f381cc0..3c2f923ea 100644 --- a/src/client/apis/google_docs/GoogleApiClientUtils.ts +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -1,22 +1,20 @@ -import { docs_v1 } from "googleapis"; -import { Opt } from "../../../fields/Doc"; -import { isArray } from "util"; -import { EditorState } from "prosemirror-state"; -import { Networking } from "../../Network"; +import { docs_v1 } from 'googleapis'; +import { isArray } from 'util'; +import { EditorState } from 'prosemirror-state'; +import { Opt } from '../../../fields/Doc'; +import { Networking } from '../../Network'; -export const Pulls = "googleDocsPullCount"; -export const Pushes = "googleDocsPushCount"; +export const Pulls = 'googleDocsPullCount'; +export const Pushes = 'googleDocsPushCount'; export namespace GoogleApiClientUtils { - export enum Actions { - Create = "create", - Retrieve = "retrieve", - Update = "update" + Create = 'create', + Retrieve = 'retrieve', + Update = 'update', } export namespace Docs { - export type RetrievalResult = Opt<docs_v1.Schema$Document>; export type UpdateResult = Opt<docs_v1.Schema$BatchUpdateDocumentResponse>; @@ -27,7 +25,7 @@ export namespace GoogleApiClientUtils { export enum WriteMode { Insert, - Replace + Replace, } export type DocumentId = string; @@ -38,8 +36,8 @@ export namespace GoogleApiClientUtils { } export type IdHandler = (id: DocumentId) => any; export type CreationResult = Opt<DocumentId>; - export type ReadLinesResult = Opt<{ title?: string, bodyLines?: string[] }>; - export type ReadResult = { title: string, body: string }; + export type ReadLinesResult = Opt<{ title?: string; bodyLines?: string[] }>; + export type ReadResult = { title: string; body: string }; export interface ImportResult { title: string; text: string; @@ -67,20 +65,20 @@ export namespace GoogleApiClientUtils { } /** - * After following the authentication routine, which connects this API call to the current signed in account - * and grants the appropriate permissions, this function programmatically creates an arbitrary Google Doc which - * should appear in the user's Google Doc library instantaneously. - * - * @param options the title to assign to the new document, and the information necessary - * to store the new documentId returned from the creation process - * @returns the documentId of the newly generated document, or undefined if the creation process fails. - */ + * After following the authentication routine, which connects this API call to the current signed in account + * and grants the appropriate permissions, this function programmatically creates an arbitrary Google Doc which + * should appear in the user's Google Doc library instantaneously. + * + * @param options the title to assign to the new document, and the information necessary + * to store the new documentId returned from the creation process + * @returns the documentId of the newly generated document, or undefined if the creation process fails. + */ export const create = async (options: CreateOptions): Promise<CreationResult> => { const path = `/googleDocs/Documents/${Actions.Create}`; const parameters = { requestBody: { - title: options.title || `Dash Export (${new Date().toDateString()})` - } + title: options.title || `Dash Export (${new Date().toDateString()})`, + }, }; try { const schema: docs_v1.Schema$Document = await Networking.PostToServer(path, parameters); @@ -91,18 +89,24 @@ export namespace GoogleApiClientUtils { }; export namespace Utils { - - export type ExtractResult = { text: string, paragraphs: DeconstructedParagraph[] }; + export type ExtractResult = { text: string; paragraphs: DeconstructedParagraph[] }; export const extractText = (document: docs_v1.Schema$Document, removeNewlines = false): ExtractResult => { const paragraphs = extractParagraphs(document); - let text = paragraphs.map(paragraph => paragraph.contents.filter(content => !("inlineObjectId" in content)).map(run => (run as docs_v1.Schema$TextRun).content).join("")).join(""); + let text = paragraphs + .map(paragraph => + paragraph.contents + .filter(content => !('inlineObjectId' in content)) + .map(run => (run as docs_v1.Schema$TextRun).content) + .join('') + ) + .join(''); text = text.substring(0, text.length - 1); - removeNewlines && text.replace(/\n/g, ""); + removeNewlines && text.replace(/\n/g, ''); return { text, paragraphs }; }; export type ContentArray = (docs_v1.Schema$TextRun | docs_v1.Schema$InlineObjectElement)[]; - export type DeconstructedParagraph = { contents: ContentArray, bullet: Opt<number> }; + export type DeconstructedParagraph = { contents: ContentArray; bullet: Opt<number> }; const extractParagraphs = (document: docs_v1.Schema$Document, filterEmpty = true): DeconstructedParagraph[] => { const fragments: DeconstructedParagraph[] = []; if (document.body && document.body.content) { @@ -148,8 +152,7 @@ export namespace GoogleApiClientUtils { } }; - export const initialize = async (reference: Reference) => typeof reference === "string" ? reference : create(reference); - + export const initialize = async (reference: Reference) => (typeof reference === 'string' ? reference : create(reference)); } export const retrieve = async (options: RetrieveOptions): Promise<RetrievalResult> => { @@ -168,8 +171,8 @@ export namespace GoogleApiClientUtils { const parameters = { documentId: options.documentId, requestBody: { - requests: options.requests - } + requests: options.requests, + }, }; try { const replies: UpdateResult = await Networking.PostToServer(path, parameters); @@ -193,9 +196,9 @@ export namespace GoogleApiClientUtils { return retrieve({ documentId: options.documentId }).then(document => { if (document) { const title = document.title; - let bodyLines = Utils.extractText(document).text.split("\n"); + let bodyLines = Utils.extractText(document).text.split('\n'); options.removeNewlines && (bodyLines = bodyLines.filter(line => line.length)); - return { title: title ?? "", bodyLines }; + return { title: title ?? '', bodyLines }; } }); }; @@ -203,10 +206,10 @@ export namespace GoogleApiClientUtils { export const setStyle = async (options: UpdateOptions) => { const replies: any = await update({ documentId: options.documentId, - requests: options.requests + requests: options.requests, }); - if ("errors" in replies) { - console.log("Write operation failed:"); + if ('errors' in replies) { + console.log('Write operation failed:'); console.log(replies.errors.map((error: any) => error.message)); } return replies; @@ -227,35 +230,35 @@ export namespace GoogleApiClientUtils { } } if (mode === WriteMode.Replace) { - index > 1 && requests.push({ - deleteContentRange: { - range: { - startIndex: 1, - endIndex: index - } - } - }); + index > 1 && + requests.push({ + deleteContentRange: { + range: { + startIndex: 1, + endIndex: index, + }, + }, + }); index = 1; } const text = options.content.text; - text.length && requests.push({ - insertText: { - text: isArray(text) ? text.join("\n") : text, - location: { index } - } - }); + text.length && + requests.push({ + insertText: { + text: isArray(text) ? text.join('\n') : text, + location: { index }, + }, + }); if (!requests.length) { return undefined; } requests.push(...options.content.requests); const replies: any = await update({ documentId, requests }); - if ("errors" in replies) { - console.log("Write operation failed:"); + if ('errors' in replies) { + console.log('Write operation failed:'); console.log(replies.errors.map((error: any) => error.message)); } return replies; }; - } - -}
\ No newline at end of file +} diff --git a/src/client/views/PropertiesDocBacklinksSelector.tsx b/src/client/views/PropertiesDocBacklinksSelector.tsx index be5b7ec1f..e079b5cde 100644 --- a/src/client/views/PropertiesDocBacklinksSelector.tsx +++ b/src/client/views/PropertiesDocBacklinksSelector.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/require-default-props */ /* eslint-disable react/no-unused-prop-types */ import { action } from 'mobx'; import { observer } from 'mobx-react'; diff --git a/src/client/views/newlightbox/ExploreView/index.ts b/src/client/views/newlightbox/ExploreView/index.ts index bf94eedcd..f2ebf511f 100644 --- a/src/client/views/newlightbox/ExploreView/index.ts +++ b/src/client/views/newlightbox/ExploreView/index.ts @@ -1 +1 @@ -export * from './ExploreView'
\ No newline at end of file +export * from './ExploreView'; diff --git a/src/client/views/newlightbox/Header/LightboxHeader.tsx b/src/client/views/newlightbox/Header/LightboxHeader.tsx index f89d3173a..51bfaa4e5 100644 --- a/src/client/views/newlightbox/Header/LightboxHeader.tsx +++ b/src/client/views/newlightbox/Header/LightboxHeader.tsx @@ -12,13 +12,13 @@ import { getType } from '../utils'; import './LightboxHeader.scss'; import { INewLightboxHeader } from './utils'; -export const NewLightboxHeader = (props: INewLightboxHeader) => { +export function NewLightboxHeader(props: INewLightboxHeader) { const { height = 100, width } = props; const [doc, setDoc] = React.useState<Doc | undefined>(LightboxView.LightboxDoc); const [editing, setEditing] = React.useState<boolean>(false); const [title, setTitle] = React.useState<JSX.Element | null>(null); React.useEffect(() => { - let lbDoc = LightboxView.LightboxDoc; + const lbDoc = LightboxView.LightboxDoc; setDoc(lbDoc); if (lbDoc) { setTitle( @@ -37,24 +37,23 @@ export const NewLightboxHeader = (props: INewLightboxHeader) => { const [saved, setSaved] = React.useState<boolean>(false); if (!doc) return null; - else - return ( - <div className={`newLightboxHeader-container`} onPointerDown={e => e.stopPropagation()} style={{ minHeight: height, height: height, width: width }}> - <div className={`title-container`}> - <div className={`lb-label`}>Title</div> - {title} - </div> - <div className={`type-container`}> - <div className={`lb-label`}>Type</div> - <div className={`type`}>{getType(StrCast(doc.type))}</div> - </div> - <div style={{ gridColumn: 2, gridRow: 1, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> - <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill /> : <BsBookmark />} /> - <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill /> : <BsBookmark />} /> - </div> - <div style={{ gridColumn: 2, gridRow: 2, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> - <Button onClick={() => NewLightboxView.SetExploreMode(!NewLightboxView.ExploreMode)} size={Size.XSMALL} color={Colors.DARK_GRAY} type={Type.SEC} text={'t-SNE 2D Embeddings'} icon={<MdTravelExplore />} /> - </div> + return ( + <div className="newLightboxHeader-container" onPointerDown={e => e.stopPropagation()} style={{ minHeight: height, height: height, width: width }}> + <div className="title-container"> + <div className="lb-label">Title</div> + {title} </div> - ); -}; + <div className="type-container"> + <div className="lb-label">Type</div> + <div className="type">{getType(StrCast(doc.type))}</div> + </div> + <div style={{ gridColumn: 2, gridRow: 1, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> + <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill /> : <BsBookmark />} /> + <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill /> : <BsBookmark />} /> + </div> + <div style={{ gridColumn: 2, gridRow: 2, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> + <Button onClick={() => NewLightboxView.SetExploreMode(!NewLightboxView.ExploreMode)} size={Size.XSMALL} color={Colors.DARK_GRAY} type={Type.SEC} text="t-SNE 2D Embeddings" icon={<MdTravelExplore />} /> + </div> + </div> + ); +} diff --git a/src/client/views/newlightbox/Header/index.ts b/src/client/views/newlightbox/Header/index.ts index 090677c16..88a533585 100644 --- a/src/client/views/newlightbox/Header/index.ts +++ b/src/client/views/newlightbox/Header/index.ts @@ -1 +1 @@ -export * from './LightboxHeader'
\ No newline at end of file +export * from './LightboxHeader'; diff --git a/src/client/views/newlightbox/NewLightboxView.tsx b/src/client/views/newlightbox/NewLightboxView.tsx index 6de4efc0d..6616abad1 100644 --- a/src/client/views/newlightbox/NewLightboxView.tsx +++ b/src/client/views/newlightbox/NewLightboxView.tsx @@ -1,3 +1,5 @@ +/* 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, observable } from 'mobx'; import { observer } from 'mobx-react'; @@ -26,11 +28,11 @@ import './NewLightboxView.scss'; import { RecommendationList } from './RecommendationList'; import { IRecommendation } from './components'; -enum LightboxStatus { - RECOMMENDATIONS = 'recommendations', - ANNOTATIONS = 'annotations', - NONE = 'none', -} +// enum LightboxStatus { +// RECOMMENDATIONS = 'recommendations', +// ANNOTATIONS = 'annotations', +// NONE = 'none', +// } interface LightboxViewProps { PanelWidth: number; @@ -47,10 +49,6 @@ type LightboxSavedState = { }; @observer export class NewLightboxView extends React.Component<LightboxViewProps> { - @computed public static get LightboxDoc() { - return this._doc; - } - private static LightboxDocTemplate = () => NewLightboxView._layoutTemplate; @observable private static _layoutTemplate: Opt<Doc> = undefined; @observable private static _layoutTemplateString: Opt<string> = undefined; @observable private static _doc: Opt<Doc> = undefined; @@ -63,59 +61,39 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { // keywords @observable private static _keywords: string[] = []; - @action public static SetKeywords(kw: string[]) { - this._keywords = kw; - } - @computed public static get Keywords() { - return this._keywords; - } - - // query @observable private static _query: string = ''; - @action public static SetQuery(query: string) { - this._query = query; - } - @computed public static get Query() { - return this._query; - } - - // keywords @observable private static _recs: IRecommendation[] = []; - @action public static SetRecs(recs: IRecommendation[]) { - this._recs = recs; - } - @computed public static get Recs() { - return this._recs; - } - - // bounds @observable private static _bounds: IBounds = emptyBounds; - @action public static SetBounds(bounds: IBounds) { - this._bounds = bounds; - } - @computed public static get Bounds() { - return this._bounds; - } - - // explore @observable private static _explore: Opt<boolean> = false; - @action public static SetExploreMode(status: Opt<boolean>) { - this._explore = status; - } - @computed public static get ExploreMode() { - return this._explore; - } - - // newLightbox sidebar status @observable private static _sidebarStatus: Opt<string> = ''; - @action public static SetSidebarStatus(sidebarStatus: Opt<string>) { - this._sidebarStatus = sidebarStatus; + static path: { doc: Opt<Doc>; target: Opt<Doc>; history: Opt<{ doc: Doc; target?: Doc }[]>; future: Opt<Doc[]>; saved: Opt<LightboxSavedState> }[] = []; + private static LightboxDocTemplate = () => NewLightboxView._layoutTemplate; + public static GetSavedState(doc: Doc) { + return this.LightboxDoc === doc && this._savedState ? this._savedState : undefined; } - @computed public static get SidebarStatus() { - return this._sidebarStatus; + // adds a cookie to the newLightbox view - the cookie becomes part of a filter which will display any documents whose cookie metadata field matches this cookie + @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`); + } } + public static AddDocTab = (docsIn: Doc | Doc[], location: OpenWhere, layoutTemplate?: Doc | string) => { + SelectionManager.DeselectAll(); + const doc = toList(docsIn).lastElement(); + return ( + doc && + NewLightboxView.SetNewLightboxDoc( + doc, + undefined, + [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...(NewLightboxView._future ?? [])].sort( + (a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow) + ), + layoutTemplate + ) + ); + }; - static path: { doc: Opt<Doc>; target: Opt<Doc>; history: Opt<{ doc: Doc; target?: Doc }[]>; future: Opt<Doc[]>; saved: Opt<LightboxSavedState> }[] = []; @action public static SetNewLightboxDoc(doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc | string) { if (this.LightboxDoc && this.LightboxDoc !== doc && this._savedState) { if (this._savedState.panX !== undefined) this.LightboxDoc._freeform_panX = this._savedState.panX; @@ -133,7 +111,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement(); l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen'); CollectionStackedTimeline.CurrentlyPlaying?.forEach(dv => dv.ComponentView?.Pause?.()); - //TabDocView.PinDoc(doc, { hidePresBox: true }); + // TabDocView.PinDoc(doc, { hidePresBox: true }); this._history ? this._history.push({ doc, target }) : (this._history = [{ doc, target }]); if (doc !== LightboxView.LightboxDoc) { this._savedState = { @@ -167,60 +145,6 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { public static IsNewLightboxDocView(path: DocumentView[]) { return (path ?? []).includes(this._docView!); } - @computed get leftBorder() { - return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]); - } - @computed get topBorder() { - return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]); - } - newLightboxWidth = () => this.props.PanelWidth - 420; - newLightboxHeight = () => this.props.PanelHeight - 140; - newLightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1); - navBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => { - return ( - <div - className="newLightboxView-navBtn-frame" - style={{ - display: display(), - left, - width: bottom !== undefined ? undefined : Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), - bottom, - }}> - <div className="newLightboxView-navBtn" title={color} style={{ top, color: color ? 'red' : 'white', background: color ? 'white' : undefined }} onClick={click}> - <div style={{ height: 10 }}>{color}</div> - <FontAwesomeIcon icon={icon as any} size="3x" /> - </div> - </div> - ); - }; - public static GetSavedState(doc: Doc) { - return this.LightboxDoc === doc && this._savedState ? this._savedState : undefined; - } - - // adds a cookie to the newLightbox view - the cookie becomes part of a filter which will display any documents whose cookie metadata field matches this cookie - @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`); - } - } - public static AddDocTab = (docsIn: Doc | Doc[], location: OpenWhere, layoutTemplate?: Doc | string) => { - SelectionManager.DeselectAll(); - const doc = toList(docsIn).lastElement(); - return ( - doc && - NewLightboxView.SetNewLightboxDoc( - doc, - undefined, - [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...(NewLightboxView._future ?? [])].sort( - (a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow) - ), - layoutTemplate - ) - ); - }; - docFilters = () => NewLightboxView._docFilters || []; - addDocTab = NewLightboxView.AddDocTab; @action public static Next() { const doc = NewLightboxView._doc!; const target = (NewLightboxView._docTarget = this._future?.pop()); @@ -230,26 +154,24 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen'); DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 }); if (NewLightboxView._history?.lastElement().target !== target) NewLightboxView._history?.push({ doc, target }); - } else { - if (!target && NewLightboxView.path.length) { - const saved = NewLightboxView._savedState; - if (LightboxView.LightboxDoc && saved) { - LightboxView.LightboxDoc._freeform_panX = saved.panX; - LightboxView.LightboxDoc._freeform_panY = saved.panY; - LightboxView.LightboxDoc._freeform_scale = saved.scale; - LightboxView.LightboxDoc._layout_scrollTop = saved.scrollTop; - } - const pop = NewLightboxView.path.pop(); - if (pop) { - NewLightboxView._doc = pop.doc; - NewLightboxView._docTarget = pop.target; - NewLightboxView._future = pop.future; - NewLightboxView._history = pop.history; - NewLightboxView._savedState = pop.saved; - } - } else { - NewLightboxView.SetNewLightboxDoc(target); + } else if (!target && NewLightboxView.path.length) { + const saved = NewLightboxView._savedState; + if (LightboxView.LightboxDoc && saved) { + LightboxView.LightboxDoc._freeform_panX = saved.panX; + LightboxView.LightboxDoc._freeform_panY = saved.panY; + LightboxView.LightboxDoc._freeform_scale = saved.scale; + LightboxView.LightboxDoc._layout_scrollTop = saved.scrollTop; + } + const pop = NewLightboxView.path.pop(); + if (pop) { + NewLightboxView._doc = pop.doc; + NewLightboxView._docTarget = pop.target; + NewLightboxView._future = pop.future; + NewLightboxView._history = pop.history; + NewLightboxView._savedState = pop.saved; } + } else { + NewLightboxView.SetNewLightboxDoc(target); } } @@ -269,6 +191,118 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { } if (NewLightboxView._future?.lastElement() !== previous.target || previous.doc) NewLightboxView._future?.push(previous.target || previous.doc); } + + @action public static SetKeywords(kw: string[]) { + this._keywords = kw; + } + @computed public static get Keywords() { + return this._keywords; + } + @computed public static get LightboxDoc() { + return this._doc; + } + + // query + @action public static SetQuery(query: string) { + this._query = query; + } + @computed public static get Query() { + return this._query; + } + + // keywords + @action public static SetRecs(recs: IRecommendation[]) { + this._recs = recs; + } + @computed public static get Recs() { + return this._recs; + } + + // bounds + @action public static SetBounds(bounds: IBounds) { + this._bounds = bounds; + } + @computed public static get Bounds() { + return this._bounds; + } + // newLightbox sidebar status + @action public static SetSidebarStatus(sidebarStatus: Opt<string>) { + this._sidebarStatus = sidebarStatus; + } + + // explore + @action public static SetExploreMode(status: Opt<boolean>) { + this._explore = status; + } + + addDocTab = NewLightboxView.AddDocTab; + + @computed public static get ExploreMode() { + return this._explore; + } + + @computed public static get SidebarStatus() { + return this._sidebarStatus; + } + @computed get leftBorder() { + return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]); + } + @computed get topBorder() { + return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]); + } + + @computed + get documentView() { + if (!LightboxView.LightboxDoc) return null; + return ( + <GestureOverlay isActive> + <DocumentView + ref={action((r: DocumentView | null) => { + NewLightboxView._docView = r !== null ? r : undefined; + })} + Document={LightboxView.LightboxDoc} + PanelWidth={this.newLightboxWidth} + PanelHeight={this.newLightboxHeight} + LayoutTemplate={NewLightboxView.LightboxDocTemplate} + isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected. + isContentActive={returnTrue} + styleProvider={DefaultStyleProvider} + ScreenToLocalTransform={this.newLightboxScreenToLocal} + renderDepth={0} + containerViewPath={returnEmptyDoclist} + childFilters={this.docFilters} + childFiltersByRanges={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + addDocument={undefined} + removeDocument={undefined} + whenChildContentsActiveChanged={emptyFunction} + addDocTab={this.addDocTab} + pinToPres={TabDocView.PinDoc} + focus={emptyFunction} + /> + </GestureOverlay> + ); + } + newLightboxWidth = () => this.props.PanelWidth - 420; + newLightboxHeight = () => this.props.PanelHeight - 140; + newLightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1); + navBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => ( + <div + className="newLightboxView-navBtn-frame" + style={{ + display: display(), + left, + width: bottom !== undefined ? undefined : Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), + bottom, + }}> + <div className="newLightboxView-navBtn" title={color} style={{ top, color: color ? 'red' : 'white', background: color ? 'white' : undefined }} onClick={click}> + <div style={{ height: 10 }}>{color}</div> + <FontAwesomeIcon icon={icon as any} size="3x" /> + </div> + </div> + ); + + docFilters = () => NewLightboxView._docFilters || []; @action stepInto = () => { NewLightboxView.path.push({ @@ -290,43 +324,11 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { } }; - @computed - get documentView() { - if (!LightboxView.LightboxDoc) return null; - else - return ( - <GestureOverlay isActive={true}> - <DocumentView - ref={action((r: DocumentView | null) => (NewLightboxView._docView = r !== null ? r : undefined))} - Document={LightboxView.LightboxDoc} - PanelWidth={this.newLightboxWidth} - PanelHeight={this.newLightboxHeight} - LayoutTemplate={NewLightboxView.LightboxDocTemplate} - isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected. - isContentActive={returnTrue} - styleProvider={DefaultStyleProvider} - ScreenToLocalTransform={this.newLightboxScreenToLocal} - renderDepth={0} - containerViewPath={returnEmptyDoclist} - childFilters={this.docFilters} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - addDocument={undefined} - removeDocument={undefined} - whenChildContentsActiveChanged={emptyFunction} - addDocTab={this.addDocTab} - pinToPres={TabDocView.PinDoc} - focus={emptyFunction} - /> - </GestureOverlay> - ); - } - future = () => NewLightboxView._future; render() { - let newLightboxHeaderHeight = 100; - let downx = 0, - downy = 0; + const newLightboxHeaderHeight = 100; + let downx = 0; + let downy = 0; return !LightboxView.LightboxDoc ? null : ( <div className="newLightboxView-frame" @@ -339,7 +341,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { NewLightboxView.SetNewLightboxDoc(undefined); } }}> - <div className={`app-document`} style={{ gridTemplateColumns: `calc(100% - 400px) 400px` }}> + <div className="app-document" style={{ gridTemplateColumns: `calc(100% - 400px) 400px` }}> <div className="newLightboxView-contents" style={{ @@ -354,7 +356,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { {this.documentView} </div> ) : ( - <div className={`explore`}> + <div className="explore"> <ExploreView recs={NewLightboxView.Recs} bounds={NewLightboxView.Bounds} /> </div> )} @@ -367,6 +369,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { } interface NewLightboxTourBtnProps { navBtn: (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => JSX.Element; + // eslint-disable-next-line react/no-unused-prop-types future: () => Opt<Doc[]>; stepInto: () => void; } @@ -378,7 +381,7 @@ export class NewLightboxTourBtn extends React.Component<NewLightboxTourBtnProps> 0, 0, 'chevron-down', - () => (LightboxView.LightboxDoc /*&& this.props.future()?.length*/ ? '' : 'none'), + () => (LightboxView.LightboxDoc /* && this.props.future()?.length */ ? '' : 'none'), e => { e.stopPropagation(); this.props.stepInto(); diff --git a/src/client/views/newlightbox/RecommendationList/index.ts b/src/client/views/newlightbox/RecommendationList/index.ts index f4555c1f2..226eafb7e 100644 --- a/src/client/views/newlightbox/RecommendationList/index.ts +++ b/src/client/views/newlightbox/RecommendationList/index.ts @@ -1 +1 @@ -export * from './RecommendationList'
\ No newline at end of file +export * from './RecommendationList'; diff --git a/src/client/views/newlightbox/RecommendationList/utils.ts b/src/client/views/newlightbox/RecommendationList/utils.ts index cdfff3258..fbf8ac19f 100644 --- a/src/client/views/newlightbox/RecommendationList/utils.ts +++ b/src/client/views/newlightbox/RecommendationList/utils.ts @@ -1,9 +1,8 @@ -import { IRecommendation } from "../components"; +import { IRecommendation } from '../components'; export interface IRecommendationList { - loading?: boolean, - keywords?: string[], - recs?: IRecommendation[] - getRecs?: any + loading?: boolean; + keywords?: string[]; + recs?: IRecommendation[]; + getRecs?: any; } - diff --git a/src/client/views/newlightbox/components/EditableText/index.ts b/src/client/views/newlightbox/components/EditableText/index.ts index e3367b175..444881a74 100644 --- a/src/client/views/newlightbox/components/EditableText/index.ts +++ b/src/client/views/newlightbox/components/EditableText/index.ts @@ -1 +1 @@ -export * from './EditableText' +export * from './EditableText'; diff --git a/src/client/views/newlightbox/components/Recommendation/index.ts b/src/client/views/newlightbox/components/Recommendation/index.ts index 12ebf9d6e..4fce185ec 100644 --- a/src/client/views/newlightbox/components/Recommendation/index.ts +++ b/src/client/views/newlightbox/components/Recommendation/index.ts @@ -1,2 +1,2 @@ -export * from './utils' -export * from './Recommendation'
\ No newline at end of file +export * from './utils'; +export * from './Recommendation'; diff --git a/src/client/views/newlightbox/components/SkeletonDoc/index.ts b/src/client/views/newlightbox/components/SkeletonDoc/index.ts index 396b7272b..98379f404 100644 --- a/src/client/views/newlightbox/components/SkeletonDoc/index.ts +++ b/src/client/views/newlightbox/components/SkeletonDoc/index.ts @@ -1 +1 @@ -export * from './SkeletonDoc'
\ No newline at end of file +export * from './SkeletonDoc'; diff --git a/src/client/views/newlightbox/components/Template/index.ts b/src/client/views/newlightbox/components/Template/index.ts index 36b5f3f46..f5b83ad09 100644 --- a/src/client/views/newlightbox/components/Template/index.ts +++ b/src/client/views/newlightbox/components/Template/index.ts @@ -1 +1 @@ -export * from './Template'
\ No newline at end of file +export * from './Template'; diff --git a/src/client/views/newlightbox/components/index.ts b/src/client/views/newlightbox/components/index.ts index 3f9128690..1c266c5d8 100644 --- a/src/client/views/newlightbox/components/index.ts +++ b/src/client/views/newlightbox/components/index.ts @@ -1,3 +1,3 @@ -export * from './Template' -export * from './Recommendation' -export * from './SkeletonDoc'
\ No newline at end of file +export * from './Template'; +export * from './Recommendation'; +export * from './SkeletonDoc'; diff --git a/src/client/views/newlightbox/utils.ts b/src/client/views/newlightbox/utils.ts index c879718e3..a0d6b9f4a 100644 --- a/src/client/views/newlightbox/utils.ts +++ b/src/client/views/newlightbox/utils.ts @@ -1,5 +1,5 @@ +/* eslint-disable no-use-before-define */ import { DocumentType } from '../../documents/DocumentTypes'; -import { IRecommendation } from './components'; export interface IDocRequest { id: string; @@ -12,7 +12,7 @@ export const fetchRecommendations = async (src: string, query: string, docs?: ID console.log('[rec] making request'); if (dummy) { return { - recommendations: [], //dummyRecs, + recommendations: [], // dummyRecs, keywords: dummyKeywords, num_recommendations: 4, max_x: 100, @@ -79,6 +79,7 @@ export const getType = (type: DocumentType | string) => { } }; +/* const dummyRecs = { a: { title: 'Vannevar Bush - American Engineer', @@ -117,4 +118,6 @@ const dummyRecs = { }, }; +*/ + const dummyKeywords = ['user control', 'vannevar bush', 'hypermedia', 'hypertext']; diff --git a/src/client/views/nodes/SliderBox-components.tsx b/src/client/views/nodes/SliderBox-components.tsx index b9f215d77..04efaac8e 100644 --- a/src/client/views/nodes/SliderBox-components.tsx +++ b/src/client/views/nodes/SliderBox-components.tsx @@ -101,8 +101,8 @@ export class TooltipRail extends Component<TooltipRailProps> { interface HandleProps { key: string; handle: SliderItem; - isActive: Boolean; - disabled?: Boolean; + isActive: boolean; + disabled?: boolean; domain: number[]; getHandleProps: (id: string, config: object) => object; } @@ -184,7 +184,7 @@ export class Handle extends Component<HandleProps> { interface TrackProps { source: SliderItem; target: SliderItem; - disabled: Boolean; + disabled: boolean; getTrackProps: () => object; } @@ -215,7 +215,7 @@ interface TickProps { format: (val: number) => string; } -const defaultFormat = (d: number) => `d`; +const defaultFormat = () => `d`; export function Tick({ tick, count, format = defaultFormat }: TickProps) { return ( diff --git a/src/client/views/nodes/TaskCompletedBox.tsx b/src/client/views/nodes/TaskCompletedBox.tsx index c9e15d314..6f11cd73a 100644 --- a/src/client/views/nodes/TaskCompletedBox.tsx +++ b/src/client/views/nodes/TaskCompletedBox.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import './TaskCompletedBox.scss'; @observer -export class TaskCompletionBox extends React.Component<{}> { +export class TaskCompletionBox extends React.Component { @observable public static taskCompleted: boolean = false; @observable public static popupX: number = 500; @observable public static popupY: number = 150; diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx index 5893c346f..8b9e3cc5d 100644 --- a/src/client/views/nodes/calendarBox/CalendarBox.tsx +++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx @@ -1,4 +1,4 @@ -import { Calendar, EventClickArg, EventSourceInput } from '@fullcalendar/core'; +import { Calendar, EventSourceInput } from '@fullcalendar/core'; import dayGridPlugin from '@fullcalendar/daygrid'; import multiMonthPlugin from '@fullcalendar/multimonth'; import { makeObservable } from 'mobx'; diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx index b195654ce..87b7a4069 100644 --- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx +++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx @@ -28,11 +28,11 @@ import { PointerHandler } from './generativeFillUtils/PointerHandler'; import { activeColor, canvasSize, eraserColor, freeformRenderSize, newCollectionSize, offsetDistanceY, offsetX } from './generativeFillUtils/generativeFillConstants'; import { CursorData, ImageDimensions, Point } from './generativeFillUtils/generativeFillInterfaces'; -enum BrushStyle { - ADD, - SUBTRACT, - MARQUEE, -} +// enum BrushStyle { +// ADD, +// SUBTRACT, +// MARQUEE, +// } interface GenerativeFillProps { imageEditorOpen: boolean; @@ -57,7 +57,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD // format: array of [image source, corresponding image Doc] const [edits, setEdits] = useState<(string | Doc)[][]>([]); const [edited, setEdited] = useState(false); - const [brushStyle] = useState<BrushStyle>(BrushStyle.ADD); + // const [brushStyle] = useState<BrushStyle>(BrushStyle.ADD); const [input, setInput] = useState(''); const [loading, setLoading] = useState(false); const [canvasDims, setCanvasDims] = useState<ImageDimensions>({ @@ -135,7 +135,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD setIsBrushing(true); const { x, y } = PointerHandler.getPointRelativeToElement(canvas, e, canvasScale); - BrushHandler.brushCircleOverlay(x, y, cursorData.width / 2 / canvasScale, ctx, eraserColor, brushStyle === BrushStyle.SUBTRACT); + BrushHandler.brushCircleOverlay(x, y, cursorData.width / 2 / canvasScale, ctx, eraserColor /* , brushStyle === BrushStyle.SUBTRACT */); }; // stop brushing, push to undo stack @@ -160,7 +160,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD x: currPoint.x - e.movementX / canvasScale, y: currPoint.y - e.movementY / canvasScale, }; - BrushHandler.createBrushPathOverlay(lastPoint, currPoint, cursorData.width / 2 / canvasScale, ctx, eraserColor, brushStyle === BrushStyle.SUBTRACT); + BrushHandler.createBrushPathOverlay(lastPoint, currPoint, cursorData.width / 2 / canvasScale, ctx, eraserColor /* , brushStyle === BrushStyle.SUBTRACT */); }; drawingAreaRef.current?.addEventListener('pointermove', handlePointerMove); diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/BrushHandler.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/BrushHandler.ts index f4ec70fbc..16d529d93 100644 --- a/src/client/views/nodes/generativeFill/generativeFillUtils/BrushHandler.ts +++ b/src/client/views/nodes/generativeFill/generativeFillUtils/BrushHandler.ts @@ -3,7 +3,7 @@ import { eraserColor } from './generativeFillConstants'; import { Point } from './generativeFillInterfaces'; export class BrushHandler { - static brushCircleOverlay = (x: number, y: number, brushRadius: number, ctx: CanvasRenderingContext2D, fillColor: string, erase: boolean) => { + static brushCircleOverlay = (x: number, y: number, brushRadius: number, ctx: CanvasRenderingContext2D, fillColor: string /* , erase: boolean */) => { ctx.globalCompositeOperation = 'destination-out'; ctx.fillStyle = fillColor; ctx.shadowColor = eraserColor; @@ -14,12 +14,12 @@ export class BrushHandler { ctx.closePath(); }; - static createBrushPathOverlay = (startPoint: Point, endPoint: Point, brushRadius: number, ctx: CanvasRenderingContext2D, fillColor: string, erase: boolean) => { + static createBrushPathOverlay = (startPoint: Point, endPoint: Point, brushRadius: number, ctx: CanvasRenderingContext2D, fillColor: string /* , erase: boolean */) => { const dist = GenerativeFillMathHelpers.distanceBetween(startPoint, endPoint); for (let i = 0; i < dist; i += 5) { const s = i / dist; - BrushHandler.brushCircleOverlay(startPoint.x * (1 - s) + endPoint.x * s, startPoint.y * (1 - s) + endPoint.y * s, brushRadius, ctx, fillColor, erase); + BrushHandler.brushCircleOverlay(startPoint.x * (1 - s) + endPoint.x * s, startPoint.y * (1 - s) + endPoint.y * s, brushRadius, ctx, fillColor /* , erase */); } }; } |