diff options
Diffstat (limited to 'src/client/views/MarqueeAnnotator.tsx')
-rw-r--r-- | src/client/views/MarqueeAnnotator.tsx | 22 |
1 files changed, 16 insertions, 6 deletions
diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx index bd6be2519..9fa20f642 100644 --- a/src/client/views/MarqueeAnnotator.tsx +++ b/src/client/views/MarqueeAnnotator.tsx @@ -34,7 +34,7 @@ export interface MarqueeAnnotatorProps { annotationLayer: HTMLDivElement; addDocument: (doc: Doc) => boolean; getPageFromScroll?: (top: number) => number; - finishMarquee: (x?: number, y?: number, PointerEvent?: PointerEvent) => void; + finishMarquee: (x?: number, y?: number) => void; anchorMenuClick?: () => undefined | ((anchor: Doc) => void); anchorMenuCrop?: (anchor: Doc | undefined, addCrop: boolean) => Doc | undefined; highlightDragSrcColor?: string; @@ -86,9 +86,10 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP return marqueeAnno; } - const textRegionAnno = Docs.Create.HTMLMarkerDocument([], { + 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, backgroundColor: 'transparent', presentation_duration: 2100, presentation_transition: 500, @@ -168,7 +169,6 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP @action public onInitiateSelection(down: number[]) { - console.log('DOWN = ' + down[0] + ' ' + down[1]); this._width = this._height = 0; this._start = this.getTransformedScreenPt(down); @@ -241,6 +241,13 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP } @action + onMove = (pt: number[]) => { + const movLoc = this.getTransformedScreenPt(pt); + this._width = movLoc.x - this._start.x; + this._height = movLoc.y - this._start.y; + }; + + @action onSelectMove = (e: PointerEvent) => { const movLoc = this.getTransformedScreenPt([e.clientX, e.clientY]); this._width = movLoc.x - this._start.x; @@ -248,9 +255,12 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP //e.stopPropagation(); // overlay documents are all 'active', yet they can be dragged. if we stop propagation, then they can be marqueed but not dragged. if we don't stop, then they will be marqueed and dragged, but the marquee will be zero width since the doc will move along with the cursor. }; - @action onSelectEnd = (e: PointerEvent) => { e.stopPropagation(); + this.onEnd(e.clientX, e.clientY); + }; + @action + onEnd = (x: number, y: number) => { const marquees = this.props.marqueeContainer.getElementsByClassName('marqueeAnnotator-dragBox'); const marqueeStyle = (Array.from(marquees).lastElement() as HTMLDivElement)?.style; if (!this.isEmpty && marqueeStyle) { @@ -266,9 +276,9 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP copy.style.height = parseInt(marqueeStyle.height.toString().replace('px', '')) / scale + 'px'; (copy as any).marqueeing = true; MarqueeAnnotator.previewNewAnnotation(this.props.savedAnnotations(), this.props.annotationLayer, copy, this.props.getPageFromScroll?.(this.top) || 0); - AnchorMenu.Instance.jumpTo(e.clientX, e.clientY); + AnchorMenu.Instance.jumpTo(x, y); } - this.props.finishMarquee(this.isEmpty ? e.clientX : undefined, this.isEmpty ? e.clientY : undefined, e); + this.props.finishMarquee(this.isEmpty ? x : undefined, this.isEmpty ? y : undefined); this._width = this._height = 0; }; |