aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/MarqueeAnnotator.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2024-04-14 16:32:50 -0400
committerbobzel <zzzman@gmail.com>2024-04-14 16:32:50 -0400
commit116b2d692e93a14d7ef68c859edf4b7f723a9f54 (patch)
treedc9be8a9e36b6cc2a8a2d94bfd6b713f526bed37 /src/client/views/MarqueeAnnotator.tsx
parentd8e4ff91b55736608a02d1ac68cb5c165841d6bb (diff)
parenta6577f0c085d206db11e491bd4a1e4bae70e0ee6 (diff)
update to master
Diffstat (limited to 'src/client/views/MarqueeAnnotator.tsx')
-rw-r--r--src/client/views/MarqueeAnnotator.tsx26
1 files changed, 18 insertions, 8 deletions
diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx
index f59042b04..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,14 +86,15 @@ 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,
presentation_zoomText: true,
- title: 'Selection on ' + this.props.Document.title,
+ title: '>' + this.props.Document.title,
});
let minX = Number.MAX_VALUE;
let maxX = -Number.MAX_VALUE;
@@ -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);
@@ -184,7 +184,7 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
};
AnchorMenu.Instance.OnClick = undoable((e: PointerEvent) => this.props.anchorMenuClick?.()?.(this.highlight(this.props.highlightDragSrcColor ?? 'rgba(173, 216, 230, 0.75)', true, undefined, true)), 'make sidebar annotation');
AnchorMenu.Instance.OnAudio = unimplementedFunction;
- AnchorMenu.Instance.Highlight = this.highlight;
+ AnchorMenu.Instance.Highlight = (color: string) => this.highlight(color, false, undefined, true);
AnchorMenu.Instance.GetAnchor = (savedAnnotations?: ObservableMap<number, HTMLDivElement[]>, addAsAnnotation?: boolean) => this.highlight('rgba(173, 216, 230, 0.75)', true, savedAnnotations, true);
AnchorMenu.Instance.onMakeAnchor = () => AnchorMenu.Instance.GetAnchor(undefined, true);
@@ -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;
};