From ecaf1da499b41d0f873c64cb128118a6a291229e Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 15 Mar 2021 23:42:19 -0400 Subject: fixed warnings. made savedAnnotations an ObservableMap. turned off annotationLayer when there are no annotations - text is blurry on windows Chrome with mix-blend-mode overlay --- src/Utils.ts | 22 ++++++------ src/client/documents/Documents.ts | 2 +- src/client/util/DragManager.ts | 4 +-- src/client/views/LightboxView.tsx | 7 ++-- src/client/views/MarqueeAnnotator.tsx | 41 +++++++++++----------- .../views/collections/CollectionDockingView.tsx | 2 +- src/client/views/nodes/ImageBox.tsx | 18 +++++++--- src/client/views/nodes/WebBox.tsx | 17 +++++---- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- src/client/views/pdf/PDFViewer.tsx | 11 +++--- 10 files changed, 70 insertions(+), 56 deletions(-) (limited to 'src') diff --git a/src/Utils.ts b/src/Utils.ts index d2713762d..dab3548b3 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -484,12 +484,12 @@ const easeInOutQuad = (currentTime: number, start: number, change: number, durat export function smoothScroll(duration: number, element: HTMLElement | HTMLElement[], to: number) { const elements = (element instanceof HTMLElement ? [element] : element); - let starts = elements.map(element => element.scrollTop); - let startDate = new Date().getTime(); + const starts = elements.map(element => element.scrollTop); + const startDate = new Date().getTime(); const animateScroll = () => { const currentDate = new Date().getTime(); - let currentTime = currentDate - startDate; + const currentTime = currentDate - startDate; elements.map((element, i) => element.scrollTop = easeInOutQuad(currentTime, starts[i], to - starts[i], duration)); if (currentTime < duration) { @@ -599,12 +599,12 @@ export function lightOrDark(color: any) { } -export function getWordAtPoint(elem: any, x: number, y: number): Opt { - if (elem.nodeType == elem.TEXT_NODE) { +export function getWordAtPoint(elem: any, x: number, y: number): string | undefined { + if (elem.nodeType === elem.TEXT_NODE) { var range = elem.ownerDocument.createRange(); range.selectNodeContents(elem); var currentPos = 0; - var endPos = range.endOffset; + const endPos = range.endOffset; while (currentPos + 1 < endPos) { range.setStart(elem, currentPos); range.setEnd(elem, currentPos + 1); @@ -612,21 +612,21 @@ export function getWordAtPoint(elem: any, x: number, y: number): Opt { if (rangeRect.left <= x && rangeRect.right >= x && rangeRect.top <= y && rangeRect.bottom >= y) { range.expand("word"); - var ret = range.toString(); + const ret = range.toString(); range.detach(); return (ret); } currentPos += 1; } } else { - for (var i = 0; i < elem.childNodes.length; i++) { - var range = elem.childNodes[i].ownerDocument.createRange(); - range.selectNodeContents(elem.childNodes[i]); + for (let childNode of elem.childNodes) { + const range = childNode.ownerDocument.createRange(); + range.selectNodeContents(childNode); const rangeRect = range.getBoundingClientRect(); if (rangeRect.left <= x && rangeRect.right >= x && rangeRect.top <= y && rangeRect.bottom >= y) { range.detach(); - const word = getWordAtPoint(elem.childNodes[i], x, y); + const word = getWordAtPoint(childNode, x, y); if (word) return word; } else { range.detach(); diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 8059509ab..6e892cb6e 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -324,7 +324,7 @@ export namespace Docs { }], [DocumentType.WEB, { layout: { view: WebBox, dataField: defaultDataKey }, - options: { _height: 300, scrollHeight: 100000, _fitWidth: true } + options: { _height: 300, _fitWidth: true } }], [DocumentType.COL, { layout: { view: CollectionView, dataField: defaultDataKey }, diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 0d154bc3a..dc95193ea 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -157,8 +157,8 @@ export namespace DragManager { // used by PDFs,Text,Image,Video,Web to conditionally (if the drop completes) create a text annotation when dragging the annotate button from the AnchorMenu when a text/region selection has been made. // this is pretty clunky and should be rethought out using linkDrag or DocumentDrag export class AnchorAnnoDragData extends LinkDragData { - constructor(dragDoc: Doc, linkSourceGetAnchor: () => Doc, dropDocCreator: (annotationOn: Doc | undefined) => Doc) { - super(dragDoc, linkSourceGetAnchor); + constructor(dragView: DocumentView, linkSourceGetAnchor: () => Doc, dropDocCreator: (annotationOn: Doc | undefined) => Doc) { + super(dragView, linkSourceGetAnchor); this.dropDocCreator = dropDocCreator; this.offset = [0, 0]; } diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index 9b14c180e..731d46502 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -30,15 +30,16 @@ export class LightboxView extends React.Component { @observable private static _docTarget: Opt; @observable private static _docFilters: string[] = []; // filters @observable private static _tourMap: Opt = []; // list of all tours available from the current target - private static _savedState: Opt<{ panX: Opt, panY: Opt, scale: Opt }>; + private static _savedState: Opt<{ panX: Opt, panY: Opt, scale: Opt, scrollTop: Opt }>; private static _history: Opt<{ doc: Doc, target?: Doc }[]> = []; private static _future: Opt = []; private static _docView: Opt; - static path: { doc: Opt, target: Opt, history: Opt<{ doc: Doc, target?: Doc }[]>, future: Opt, saved: Opt<{ panX: Opt, panY: Opt, scale: Opt }> }[] = []; + static path: { doc: Opt, target: Opt, history: Opt<{ doc: Doc, target?: Doc }[]>, future: Opt, saved: Opt<{ panX: Opt, panY: Opt, scale: Opt, scrollTop: Opt }> }[] = []; @action public static SetLightboxDoc(doc: Opt, target?: Doc, future?: Doc[]) { if (this.LightboxDoc && this.LightboxDoc !== doc && this._savedState) { this.LightboxDoc._panX = this._savedState.panX; this.LightboxDoc._panY = this._savedState.panY; + this.LightboxDoc._scrollTop = this._savedState.scrollTop; this.LightboxDoc._viewScale = this._savedState.scale; this.LightboxDoc._viewTransition = undefined; } @@ -53,6 +54,7 @@ export class LightboxView extends React.Component { panX: Cast(doc._panX, "number", null), panY: Cast(doc._panY, "number", null), scale: Cast(doc._viewScale, "number", null), + scrollTop: Cast(doc._scrollTop, "number", null), }; } } @@ -123,6 +125,7 @@ export class LightboxView extends React.Component { LightboxView.LightboxDoc._panX = saved.panX; LightboxView.LightboxDoc._panY = saved.panY; LightboxView.LightboxDoc._viewScale = saved.scale; + LightboxView.LightboxDoc._scrollTop = saved.scrollTop; LightboxView.LightboxDoc._viewTransition = undefined; } const pop = LightboxView.path.pop(); diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx index 77ace7ddb..1e97f9b41 100644 --- a/src/client/views/MarqueeAnnotator.tsx +++ b/src/client/views/MarqueeAnnotator.tsx @@ -1,22 +1,22 @@ -import { action, observable, runInAction } from "mobx"; +import { action, observable, runInAction, ObservableMap } from "mobx"; import { observer } from "mobx-react"; import { Dictionary } from "typescript-collections"; import { AclAddonly, AclAdmin, AclEdit, DataSym, Doc, Opt } from "../../fields/Doc"; import { Id } from "../../fields/FieldSymbols"; +import { List } from "../../fields/List"; +import { NumCast } from "../../fields/Types"; import { GetEffectiveAcl } from "../../fields/util"; -import { DocUtils, Docs } from "../documents/Documents"; +import { Utils } from "../../Utils"; +import { Docs } from "../documents/Documents"; +import { DocumentType } from "../documents/DocumentTypes"; import { CurrentUserUtils } from "../util/CurrentUserUtils"; import { DragManager } from "../util/DragManager"; +import { undoBatch } from "../util/UndoManager"; +import "./MarqueeAnnotator.scss"; +import { DocumentView } from "./nodes/DocumentView"; import { FormattedTextBox } from "./nodes/formattedText/FormattedTextBox"; import { AnchorMenu } from "./pdf/AnchorMenu"; -import "./MarqueeAnnotator.scss"; import React = require("react"); -import { undoBatch } from "../util/UndoManager"; -import { NumCast } from "../../fields/Types"; -import { DocumentType } from "../documents/DocumentTypes"; -import { List } from "../../fields/List"; -import { Utils } from "../../Utils"; -import { util } from "chai"; const _global = (window /* browser */ || global /* node */) as any; export interface MarqueeAnnotatorProps { @@ -26,7 +26,8 @@ export interface MarqueeAnnotatorProps { scaling?: () => number; containerOffset?: () => number[]; mainCont: HTMLDivElement; - savedAnnotations: Dictionary; + docView: DocumentView; + savedAnnotations: ObservableMap; annotationLayer: HTMLDivElement; addDocument: (doc: Doc) => boolean; getPageFromScroll?: (top: number) => number; @@ -48,7 +49,7 @@ export class MarqueeAnnotator extends React.Component { AnchorMenu.Instance.Status = "marquee"; AnchorMenu.Instance.fadeOut(true); // clear out old marquees and initialize menu for new selection - this.props.savedAnnotations.values().forEach(v => v.forEach(a => a.remove())); + Array.from(this.props.savedAnnotations.values()).forEach(v => v.forEach(a => a.remove())); this.props.savedAnnotations.clear(); }); } @@ -81,7 +82,7 @@ export class MarqueeAnnotator extends React.Component { FormattedTextBox.SelectOnLoad = target[Id]; return target; }; - DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(this.props.rootDoc, sourceAnchorCreator, targetCreator), e.pageX, e.pageY, { + DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(this.props.docView, sourceAnchorCreator, targetCreator), e.pageX, e.pageY, { dragComplete: e => { if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) { e.annoDragData.linkSourceDoc.isPushpin = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc; @@ -98,10 +99,10 @@ export class MarqueeAnnotator extends React.Component { @undoBatch @action makeAnnotationDocument = (color: string): Opt => { - if (this.props.savedAnnotations.size() === 0) return undefined; - if ((this.props.savedAnnotations.values()[0][0] as any).marqueeing) { + if (this.props.savedAnnotations.size === 0) return undefined; + if ((Array.from(this.props.savedAnnotations.values())[0][0] as any).marqueeing) { const scale = this.props.scaling?.() || 1; - const anno = this.props.savedAnnotations.values()[0][0]; + const anno = Array.from(this.props.savedAnnotations.values())[0][0]; const containerOffset = this.props.containerOffset?.() || [0, 0]; const marqueeAnno = Docs.Create.FreeformDocument([], { backgroundColor: color, annotationOn: this.props.rootDoc, title: "Annotation on " + this.props.rootDoc.title }); marqueeAnno.x = (parseInt(anno.style.left || "0") - containerOffset[0]) / scale; @@ -117,7 +118,7 @@ export class MarqueeAnnotator extends React.Component { let maxX = -Number.MAX_VALUE; let minY = Number.MAX_VALUE; const annoDocs: Doc[] = []; - this.props.savedAnnotations.forEach((key: number, value: HTMLDivElement[]) => value.map(anno => { + this.props.savedAnnotations.forEach((value: HTMLDivElement[], key: number) => value.map(anno => { const textRegion = new Doc(); textRegion.x = parseInt(anno.style.left ?? "0"); textRegion.y = parseInt(anno.style.top ?? "0"); @@ -149,20 +150,20 @@ export class MarqueeAnnotator extends React.Component { return annotationDoc as Doc ?? undefined; } - public static previewNewAnnotation = action((savedAnnotations: Dictionary, annotationLayer: HTMLDivElement, div: HTMLDivElement, page: number) => { + public static previewNewAnnotation = action((savedAnnotations: ObservableMap, annotationLayer: HTMLDivElement, div: HTMLDivElement, page: number) => { if (div.style.top) { div.style.top = (parseInt(div.style.top)/*+ this.getScrollFromPage(page)*/).toString(); } annotationLayer.append(div); div.style.backgroundColor = "#ACCEF7"; div.style.opacity = "0.5"; - const savedPage = savedAnnotations.getValue(page); + const savedPage = savedAnnotations.get(page); if (savedPage) { savedPage.push(div); - savedAnnotations.setValue(page, savedPage); + savedAnnotations.set(page, savedPage); } else { - savedAnnotations.setValue(page, [div]); + savedAnnotations.set(page, [div]); } }); diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 3556e74bc..b9757dde3 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -381,7 +381,7 @@ export class CollectionDockingView extends CollectionSubView(doc => doc) { const otherSet = new Set(); otherdocs?.filter(doc => !docs.includes(doc)).forEach(doc => otherSet.add(doc)); tabdocs?.filter(doc => !docs.includes(doc) && doc.type !== DocumentType.KVP).forEach(doc => otherSet.add(doc)); - const vals = Array.from(otherSet.values()).filter(val => val instanceof Doc).map(d => d as Doc).filter(d => d.type !== DocumentType.KVP); + const vals = Array.from(otherSet.values()).filter(val => val instanceof Doc).map(d => d).filter(d => d.type !== DocumentType.KVP); other && (Doc.GetProto(other).data = new List(vals)); }, 0); } diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index bc01acdfd..0be0b5f30 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -1,4 +1,4 @@ -import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +import { action, computed, IReactionDisposer, observable, reaction, runInAction, ObservableMap } from 'mobx'; import { observer } from "mobx-react"; import { Dictionary } from 'typescript-collections'; import { DataSym, Doc, DocListCast, WidthSym } from '../../../fields/Doc'; @@ -63,7 +63,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent this.props.isSelected(), selected => !selected && setTimeout(() => { - this._savedAnnotations.values().forEach(v => v.forEach(a => a.remove())); + Array.from(this._savedAnnotations.values()).forEach(v => v.forEach(a => a.remove())); this._savedAnnotations.clear(); })); this._disposers.path = reaction(() => ({ nativeSize: this.nativeSize, width: this.layoutDoc[WidthSym]() }), @@ -337,7 +337,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent = React.createRef(); private _annotationLayer: React.RefObject = React.createRef(); @observable _marqueeing: number[] | undefined; - @observable _savedAnnotations: Dictionary = new Dictionary(); + @observable _savedAnnotations = new ObservableMap(); @computed get annotationLayer() { return
; } @@ -388,7 +388,17 @@ export class ImageBox extends ViewBoxAnnotatableComponent {this.annotationLayer} {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) : - } + }
); } + } diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 19a5945e2..bc20c3b47 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx"; +import { action, computed, IReactionDisposer, observable, reaction, runInAction, ObservableMap } from "mobx"; import { observer } from "mobx-react"; import { Dictionary } from "typescript-collections"; import * as WebRequest from 'web-request'; @@ -58,7 +58,7 @@ export class WebBox extends ViewBoxAnnotatableComponent = new Dictionary(); + @observable private _savedAnnotations = new ObservableMap(); @observable private _scrollHeight = 1500; @computed get scrollHeight() { return this._scrollHeight; } @computed get inlineTextAnnotations() { return this.allAnnotations.filter(a => a.textInlineAnnotations); } @@ -111,7 +111,7 @@ export class WebBox extends ViewBoxAnnotatableComponent iframeHeight) - this.layoutDoc._scrollTop = this._outerRef.current.scrollTop = iframeHeight; - else this.layoutDoc._scrollTop = this._outerRef.current.scrollTop = scrollTop; + this.layoutDoc._scrollTop = this._outerRef.current.scrollTop = scrollTop > iframeHeight ? iframeHeight : scrollTop; } }), timeout); } @@ -194,7 +192,7 @@ export class WebBox extends ViewBoxAnnotatableComponent this.props.isSelected(), selected => !selected && setTimeout(() => { - this._savedAnnotations.values().forEach(v => v.forEach(a => a.remove())); + Array.from(this._savedAnnotations.values()).forEach(v => v.forEach(a => a.remove())); this._savedAnnotations.clear(); })); @@ -515,7 +513,7 @@ export class WebBox extends ViewBoxAnnotatableComponent + return
{this.inlineTextAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno => ) } @@ -590,6 +588,7 @@ export class WebBox extends ViewBoxAnnotatableComponent(PdfDocument) { static _annotationStyle: any = addStyleSheet(); @observable private _pageSizes: { width: number, height: number }[] = []; - @observable private _savedAnnotations: Dictionary = new Dictionary(); + @observable private _savedAnnotations = new ObservableMap(); @observable private _script: CompiledScript = CompileScript("return true") as CompiledScript; @observable private _marqueeing: number[] | undefined; @observable private _textSelecting = true; @@ -140,8 +140,8 @@ export class PDFViewer extends ViewBoxAnnotatableComponent this.props.isSelected(), selected => { if (!selected) { - this._savedAnnotations.values().forEach(v => v.forEach(a => a.remove())); - this._savedAnnotations.keys().forEach(k => this._savedAnnotations.setValue(k, [])); + Array.from(this._savedAnnotations.values()).forEach(v => v.forEach(a => a.remove())); + Array.from(this._savedAnnotations.keys()).forEach(k => this._savedAnnotations.set(k, [])); } (SelectionManager.Views().length === 1) && this.setupPdfJsViewer(); }, @@ -390,7 +390,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent this._marqueeing = undefined), 100); // bcz: hack .. anchor menu is setup within MarqueeAnnotator so we need to at least create the marqueeAnnotator even though we aren't using it. // clear out old marquees and initialize menu for new selection AnchorMenu.Instance.Status = "marquee"; - this._savedAnnotations.values().forEach(v => v.forEach(a => a.remove())); + Array.from(this._savedAnnotations.values()).forEach(v => v.forEach(a => a.remove())); this._savedAnnotations.clear(); this._styleRule = addStyleSheetRule(PDFViewer._annotationStyle, "pdfAnnotation", { "pointer-events": "none" }); document.addEventListener("pointerup", this.onSelectEnd); @@ -574,6 +574,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent} -- cgit v1.2.3-70-g09d2