From f82aba302c493ec535263142b3b1dff65173f7b5 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 17 Jun 2021 18:26:49 -0400 Subject: fixed drawing on images/videos/photos --- src/client/views/nodes/ImageBox.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/client/views/nodes/ImageBox.tsx') diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index e2e08a0e6..13dfad0fe 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -26,6 +26,8 @@ import { FaceRectangles } from './FaceRectangles'; import { FieldView, FieldViewProps } from './FieldView'; import "./ImageBox.scss"; import React = require("react"); +import { InkTool } from '../../../fields/InkField'; +import { CurrentUserUtils } from '../../util/CurrentUserUtils'; const path = require('path'); export const pageSchema = createSchema({ @@ -321,7 +323,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent { - if (!e.altKey && e.button === 0 && this.layoutDoc._viewScale === 1 && this.isContentActive(true)) this._marqueeing = [e.clientX, e.clientY]; + if (!e.altKey && e.button === 0 && this.layoutDoc._viewScale === 1 && this.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen].includes(CurrentUserUtils.SelectedTool)) this._marqueeing = [e.clientX, e.clientY]; } @action finishMarquee = () => { -- cgit v1.2.3-70-g09d2 From 7995c8b9b810df4ed5ade1db71fcb0e2de3d3da2 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 14 Jul 2021 09:47:18 -0400 Subject: fixed selections so that they persist on deselect to allow linking a selection on one document directly to a selection on another document. Also fixed recently closed to move closed document to top of list. --- src/client/views/DocComponent.tsx | 5 ++++- src/client/views/MarqueeAnnotator.tsx | 23 ++++++++++++----------- src/client/views/nodes/ImageBox.tsx | 15 ++++++++++++--- src/client/views/nodes/WebBox.tsx | 2 +- src/client/views/pdf/AnchorMenu.tsx | 4 ++-- 5 files changed, 31 insertions(+), 18 deletions(-) (limited to 'src/client/views/nodes/ImageBox.tsx') diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index a878a7afb..0b54e3cd6 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -154,7 +154,10 @@ export function ViewBoxAnnotatableComponent

{ AnchorMenu.Instance.OnClick = (e: PointerEvent) => this.props.anchorMenuClick?.()?.(this.highlight("rgba(173, 216, 230, 0.75)", true)); AnchorMenu.Instance.Highlight = this.highlight; - AnchorMenu.Instance.GetAnchor = () => this.highlight("rgba(173, 216, 230, 0.75)", true); + AnchorMenu.Instance.GetAnchor = (savedAnnotations?: ObservableMap) => this.highlight("rgba(173, 216, 230, 0.75)", true, savedAnnotations); /** * This function is used by the AnchorMenu to create an anchor highlight and a new linked text annotation. * It also initiates a Drag/Drop interaction to place the text annotation. @@ -102,12 +102,13 @@ export class MarqueeAnnotator extends React.Component { @undoBatch @action - makeAnnotationDocument = (color: string, isLinkButton?: boolean): Opt => { - if (this.props.savedAnnotations.size === 0) return undefined; - const savedAnnos = Array.from(this.props.savedAnnotations.values())[0]; + makeAnnotationDocument = (color: string, isLinkButton?: boolean, savedAnnotations?: ObservableMap): Opt => { + const savedAnnoMap = savedAnnotations ?? this.props.savedAnnotations; + if (savedAnnoMap.size === 0) return undefined; + const savedAnnos = Array.from(savedAnnoMap.values())[0]; if (savedAnnos.length && (savedAnnos[0] as any).marqueeing) { const scale = this.props.scaling?.() || 1; - const anno = Array.from(this.props.savedAnnotations.values())[0][0]; + const anno = savedAnnos[0]; const containerOffset = this.props.containerOffset?.() || [0, 0]; const marqueeAnno = Docs.Create.FreeformDocument([], { _isLinkButton: isLinkButton, backgroundColor: color, annotationOn: this.props.rootDoc, title: "Annotation on " + this.props.rootDoc.title }); marqueeAnno.x = (parseInt(anno.style.left || "0") - containerOffset[0]) / scale; @@ -115,7 +116,7 @@ export class MarqueeAnnotator extends React.Component { marqueeAnno._height = parseInt(anno.style.height || "0") / scale; marqueeAnno._width = parseInt(anno.style.width || "0") / scale; anno.remove(); - this.props.savedAnnotations.clear(); + savedAnnoMap.clear(); return marqueeAnno; } @@ -123,7 +124,7 @@ export class MarqueeAnnotator extends React.Component { let maxX = -Number.MAX_VALUE; let minY = Number.MAX_VALUE; const annoDocs: Doc[] = []; - this.props.savedAnnotations.forEach((value: HTMLDivElement[], key: number) => value.map(anno => { + savedAnnoMap.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"); @@ -142,15 +143,15 @@ export class MarqueeAnnotator extends React.Component { textRegionAnnoProto.x = Math.max(maxX, 0); // mainAnnoDocProto.text = this._selectionText; textRegionAnnoProto.textInlineAnnotations = new List(annoDocs); - this.props.savedAnnotations.clear(); + savedAnnoMap.clear(); return textRegionAnno; } @action - highlight = (color: string, isLinkButton: boolean) => { + highlight = (color: string, isLinkButton: boolean, savedAnnotations?: ObservableMap) => { // creates annotation documents for current highlights const effectiveAcl = GetEffectiveAcl(this.props.rootDoc[DataSym]); - const annotationDoc = [AclAddonly, AclEdit, AclAdmin].includes(effectiveAcl) && this.makeAnnotationDocument(color, isLinkButton); - annotationDoc && this.props.addDocument(annotationDoc); + const annotationDoc = [AclAddonly, AclEdit, AclAdmin].includes(effectiveAcl) && this.makeAnnotationDocument(color, isLinkButton, savedAnnotations); + !savedAnnotations && annotationDoc && this.props.addDocument(annotationDoc); return annotationDoc as Doc ?? undefined; } diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 13dfad0fe..b803c94ba 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -7,7 +7,7 @@ import { List } from '../../../fields/List'; import { ObjectField } from '../../../fields/ObjectField'; import { createSchema, makeInterface } from '../../../fields/Schema'; import { ComputedField } from '../../../fields/ScriptField'; -import { Cast, NumCast } from '../../../fields/Types'; +import { Cast, NumCast, StrCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; import { TraceMobx } from '../../../fields/util'; import { emptyFunction, OmitKeys, returnOne, Utils } from '../../../Utils'; @@ -28,6 +28,8 @@ import "./ImageBox.scss"; import React = require("react"); import { InkTool } from '../../../fields/InkField'; import { CurrentUserUtils } from '../../util/CurrentUserUtils'; +import { AnchorMenu } from '../pdf/AnchorMenu'; +import { Docs } from '../../documents/Documents'; const path = require('path'); export const pageSchema = createSchema({ @@ -62,6 +64,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent { + const anchor = AnchorMenu.Instance?.GetAnchor(this._savedAnnotations); + anchor && this.addDocument(anchor); + return anchor ?? this.rootDoc; + } + componentDidMount() { this.props.setContentView?.(this); // bcz: do not remove this. without it, stepping into an image in the lightbox causes an infinite loop.... this._disposers.sizer = reaction(() => ( @@ -74,8 +83,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent this.props.isSelected(), selected => !selected && setTimeout(() => { - Array.from(this._savedAnnotations.values()).forEach(v => v.forEach(a => a.remove())); - this._savedAnnotations.clear(); + // 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]() }), ({ nativeSize, width }) => { diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index a16881b66..5791e2310 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -176,7 +176,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { const anchor = - AnchorMenu.Instance?.GetAnchor() ?? + AnchorMenu.Instance?.GetAnchor(this._savedAnnotations) ?? Docs.Create.TextanchorDocument({ title: StrCast(this.rootDoc.title + " " + this.layoutDoc._scrollTop), annotationOn: this.rootDoc, diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx index 86b124de5..c24c4eaaf 100644 --- a/src/client/views/pdf/AnchorMenu.tsx +++ b/src/client/views/pdf/AnchorMenu.tsx @@ -1,7 +1,7 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Tooltip } from "@material-ui/core"; -import { action, computed, observable, IReactionDisposer, reaction } from "mobx"; +import { action, computed, observable, IReactionDisposer, reaction, ObservableMap } from "mobx"; import { observer } from "mobx-react"; import { ColorState } from "react-color"; import { Doc, Opt } from "../../../fields/Doc"; @@ -46,7 +46,7 @@ export class AnchorMenu extends AntimodeMenu { public OnClick: (e: PointerEvent) => void = unimplementedFunction; public StartDrag: (e: PointerEvent, ele: HTMLElement) => void = unimplementedFunction; public Highlight: (color: string, isPushpin: boolean) => Opt = (color: string, isPushpin: boolean) => undefined; - public GetAnchor: () => Opt = () => undefined; + public GetAnchor: (savedAnnotations?: ObservableMap) => Opt = () => undefined; public Delete: () => void = unimplementedFunction; public AddTag: (key: string, value: string) => boolean = returnFalse; public PinToPres: () => void = unimplementedFunction; -- cgit v1.2.3-70-g09d2 From 6b5c40fda530337f3dcb70aa640b085d0d4f1adf Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 14 Jul 2021 13:47:46 -0400 Subject: fixed dragging marquees on nested images. fixed images to allow marquees on nested images. changed drag titlebar message. --- src/client/util/DragManager.ts | 2 +- src/client/views/GlobalKeyHandler.ts | 2 -- src/client/views/nodes/ImageBox.tsx | 15 +++++++++------ src/client/views/nodes/WebBox.tsx | 8 ++++---- 4 files changed, 14 insertions(+), 13 deletions(-) (limited to 'src/client/views/nodes/ImageBox.tsx') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index d8c2f913e..88bf6f36d 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -340,7 +340,7 @@ export namespace DragManager { dragLabel.style.zIndex = "100001"; dragLabel.style.fontSize = "10px"; dragLabel.style.position = "absolute"; - dragLabel.innerText = "press 'a' to embed on drop"; // bcz: need to move this to a status bar + dragLabel.innerText = "drag titlebar to embed on drop"; // bcz: need to move this to a status bar dragDiv.appendChild(dragLabel); DragManager.Root().appendChild(dragDiv); } diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index cbaa706e0..c4162a6bb 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -89,8 +89,6 @@ export class KeyManager { private unmodified = action((keyname: string, e: KeyboardEvent) => { switch (keyname) { - case "a": SnappingManager.GetIsDragging() && (DragManager.CanEmbed = true); - break; case "u": if (document.activeElement?.tagName === "INPUT" || document.activeElement?.tagName === "TEXTAREA") { return { stopPropagation: false, preventDefault: false }; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index b803c94ba..6f249d27d 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -10,7 +10,7 @@ import { ComputedField } from '../../../fields/ScriptField'; import { Cast, NumCast, StrCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; import { TraceMobx } from '../../../fields/util'; -import { emptyFunction, OmitKeys, returnOne, Utils } from '../../../Utils'; +import { emptyFunction, OmitKeys, returnOne, Utils, returnFalse } from '../../../Utils'; import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils'; import { CognitiveServices, Confidence, Service, Tag } from '../../cognitive_services/CognitiveServices'; import { Networking } from '../../Network'; @@ -332,12 +332,15 @@ export class ImageBox extends ViewBoxAnnotatableComponent { - if (!e.altKey && e.button === 0 && this.layoutDoc._viewScale === 1 && this.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen].includes(CurrentUserUtils.SelectedTool)) this._marqueeing = [e.clientX, e.clientY]; + if (!e.altKey && e.button === 0 && this.layoutDoc._viewScale === 1 && this.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen].includes(CurrentUserUtils.SelectedTool)) { + this._marqueeing = [e.clientX, e.clientY]; + e.stopPropagation(); + } } @action finishMarquee = () => { this._marqueeing = undefined; - this.props.select(true); + this.props.select(false); } render() { @@ -353,16 +356,16 @@ export class ImageBox extends ViewBoxAnnotatableComponent {this.content} {this.annotationLayer} -- cgit v1.2.3-70-g09d2 From 0400d09d8fc52e5c5ded50d9b8c0dfab400fd111 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 14 Jul 2021 14:25:48 -0400 Subject: from last --- src/client/views/nodes/ImageBox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/views/nodes/ImageBox.tsx') diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 6f249d27d..d876ae818 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -340,7 +340,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent { this._marqueeing = undefined; - this.props.select(false); + this.props.select(false) } render() { @@ -365,7 +365,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent