From 7a25dcc004de773fbdee229f79338b81001d3077 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 13 Mar 2021 21:26:01 -0500 Subject: cleaned up dropping link button on collections / alternate annotation views (eg pdf sidebar) - new docs are created only for internal drops within, say, a PDF. Otherwise links are made. --- .../views/collections/CollectionStackingView.tsx | 10 ++++++++-- .../collectionFreeForm/CollectionFreeFormView.tsx | 21 +++++++++------------ 2 files changed, 17 insertions(+), 14 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index df39ed3e1..e69dbf3ac 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -12,7 +12,7 @@ import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents, smoothScroll, Utils } from "../../../Utils"; -import { DocUtils } from "../../documents/Documents"; +import { DocUtils, Docs } from "../../documents/Documents"; import { DragManager, dropActionType } from "../../util/DragManager"; import { SnappingManager } from "../../util/SnappingManager"; import { Transform } from "../../util/Transform"; @@ -334,7 +334,13 @@ export class CollectionStackingView extends CollectionSubView { const [xp, yp] = this.getTransform().transformPoint(de.x, de.y); if (de.complete.annoDragData?.dragDocument && super.onInternalDrop(e, de)) return this.internalAnchorAnnoDrop(e, de.complete.annoDragData, xp, yp); - else if (this.isAnnotationOverlay !== true && de.complete.linkDragData) return this.internalLinkDrop(e, de, de.complete.linkDragData, xp, yp); + else if (de.complete.linkDragData) return this.internalLinkDrop(e, de, de.complete.linkDragData, xp, yp); else if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData, xp, yp); return false; } -- cgit v1.2.3-70-g09d2 From c5ea9a228d97974250194cbe41e0f356c3c3906f Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 14 Mar 2021 00:09:37 -0500 Subject: added sidebar annotations to webBox. Fixed PdfBox to allow marqueeing when sidebar annotation is selected. --- src/client/documents/Documents.ts | 2 +- src/client/views/DocComponent.tsx | 2 +- .../views/collections/CollectionStackingView.tsx | 5 +- src/client/views/nodes/PDFBox.tsx | 5 +- src/client/views/nodes/WebBox.scss | 23 +++ src/client/views/nodes/WebBox.tsx | 195 +++++++++++++++------ src/client/views/pdf/AnchorMenu.tsx | 6 +- src/client/views/pdf/PDFViewer.tsx | 16 +- 8 files changed, 185 insertions(+), 69 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index e8ecd8362..2ed69a993 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -816,7 +816,7 @@ export namespace Docs { export function PdfDocument(url: string, options: DocumentOptions = {}) { const pdfProto = Prototypes.get(DocumentType.PDF); pdfProto._fitWidth = true; // backward compatibility -- can be removed after db is reset - return InstanceFromProto(pdfProto, new PdfField(new URL(url)), { _viewType: "stacking", ...options }); + return InstanceFromProto(pdfProto, new PdfField(new URL(url)), { ...options }); } export function WebDocument(url: string, options: DocumentOptions = {}) { diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 589cfafc5..f8aede717 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -201,7 +201,7 @@ export function ViewBoxAnnotatableComponent

this.props.whenActiveChanged(this._isChildActive = isActive)); - active = (outsideReaction?: boolean) => ((CurrentUserUtils.SelectedTool === InkTool.None && !this.props.Document._) && + active = (outsideReaction?: boolean) => (CurrentUserUtils.SelectedTool === InkTool.None && (this.props.rootSelected(outsideReaction) || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0 || BoolCast((this.layoutDoc as any).forceActive)) ? true : false) annotationsActive = (outsideReaction?: boolean) => (CurrentUserUtils.SelectedTool !== InkTool.None || (this.props.layerProvider?.(this.props.Document) === false && this.props.active()) || (this.props.Document.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index e69dbf3ac..f3c1c4464 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -37,6 +37,7 @@ const StackingDocument = makeInterface(collectionSchema, documentSchema); export type collectionStackingViewProps = { chromeStatus?: string; + viewType?: CollectionViewType; NativeWidth?: () => number; NativeHeight?: () => number; }; @@ -60,7 +61,7 @@ export class CollectionStackingView extends CollectionSubView pos[0] && where[0] < pos1[0] && where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) { dropInd = i; - const axis = this.Document._viewType === CollectionViewType.Masonry ? 0 : 1; + const axis = this.isStackingView ? 1 : 0; dropAfter = where[axis] > (pos[axis] + pos1[axis]) / 2 ? 1 : 0; } }); diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 4e4db323c..a474293e6 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -179,6 +179,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent @@ -216,7 +217,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent this.props.whenActiveChanged(this._isChildActive = isActive)); setPdfViewer = (pdfViewer: PDFViewer) => { this._pdfViewer = pdfViewer; if (this.initialScrollTarget) { @@ -306,7 +306,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent ; } - isChildActive = (outsideReaction?: boolean) => this._isChildActive; @computed get renderPdfView() { TraceMobx(); const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField); @@ -316,12 +315,12 @@ export class PDFBox extends ViewBoxAnnotatableComponent; @@ -461,6 +466,7 @@ export class WebBox extends ViewBoxAnnotatableComponent this.layoutDoc.useCors = !this.layoutDoc.useCors, icon: "snowflake" }); funcs.push({ description: (this.layoutDoc[this.fieldKey + "-contentWidth"] ? "Unfreeze" : "Freeze") + " Content Width", event: () => this.layoutDoc[this.fieldKey + "-contentWidth"] = this.layoutDoc[this.fieldKey + "-contentWidth"] ? undefined : Doc.NativeWidth(this.layoutDoc), icon: "snowflake" }); + funcs.push({ description: "Toggle Annotation View ", event: () => this.Document._showSidebar = !this.Document._showSidebar, icon: "expand-arrows-alt" }); cm.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" }); } @@ -483,6 +489,83 @@ export class WebBox extends ViewBoxAnnotatableComponent { + this.Document._showSidebar = true; + const startup = StrListCast(this.rootDoc.docFilters).map(filter => filter.split(":")[0]).join(" "); + const target = Docs.Create.TextDocument(startup, { + title: "anno", + annotationOn: this.rootDoc, _width: 200, _height: 50, _fitWidth: true, _autoHeight: true, _fontSize: StrCast(Doc.UserDoc().fontSize), + _fontFamily: StrCast(Doc.UserDoc().fontFamily) + }); + FormattedTextBox.SelectOnLoad = target[Id]; + FormattedTextBox.DontSelectInitialText = true; + this.allTags.map(tag => target[tag] = tag); + DocUtils.MakeLink({ doc: anchor }, { doc: target }, "inline markup", "annotation"); + this.sidebarAddDocument(target); + } + sidebarKey = () => this.fieldKey + "-sidebar"; + sidebarFiltersHeight = () => 50; + sidebarTransform = () => this.props.ScreenToLocalTransform().translate(Doc.NativeWidth(this.dataDoc), 0).scale(this.props.scaling?.() || 1); + sidebarWidth = () => !this.layoutDoc._showSidebar ? 0 : (NumCast(this.layoutDoc.nativeWidth) - Doc.NativeWidth(this.dataDoc)) * this.props.PanelWidth() / NumCast(this.layoutDoc.nativeWidth); + sidebarHeight = () => this.props.PanelHeight() - this.sidebarFiltersHeight() - 20; + sidebarAddDocument = (doc: Doc | Doc[]) => this.addDocument(doc, this.sidebarKey()); + sidebarMoveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => this.moveDocument(doc, targetCollection, addDocument, this.sidebarKey()); + sidebarRemDocument = (doc: Doc | Doc[]) => this.removeDocument(doc, this.sidebarKey()); + sidebarDocFilters = () => [...StrListCast(this.layoutDoc._docFilters), ...StrListCast(this.layoutDoc[this.sidebarKey() + "-docFilters"])]; + @computed get allTags() { + const keys = new Set(); + DocListCast(this.rootDoc[this.sidebarKey()]).forEach(doc => SearchBox.documentKeys(doc).forEach(key => keys.add(key))); + return Array.from(keys.keys()).filter(key => key[0]).filter(key => !key.startsWith("_") && (key[0] === "#" || key[0] === key[0].toUpperCase())).sort(); + } + renderTag = (tag: string) => { + const active = StrListCast(this.rootDoc[this.sidebarKey() + "-docFilters"]).includes(`${tag}:${tag}:check`); + return

Doc.setDocFilter(this.rootDoc, tag, tag, "check", true, this.sidebarKey())}> + {tag} +
; + } + @computed get sidebarOverlay() { + return !this.layoutDoc._showSidebar ? (null) : +
+
+ +
+
+ {this.allTags.map(tag => this.renderTag(tag))} +
+
; + } + @computed get content() { const frozen = !this.props.isSelected() || DocumentDecorations.Instance?.Interacting; @@ -521,63 +604,73 @@ export class WebBox extends ViewBoxAnnotatableComponent { - if (!e.altKey && e.button === 0 && this.active(true)) this._marqueeing = [e.clientX, e.clientY]; + if (!e.altKey && e.button === 0 && this.active(true)) { + this._marqueeing = [e.clientX, e.clientY]; + this.props.select(false); + } } @action - finishMarquee = () => { - this._marqueeing = undefined; - this.props.select(true); - } + finishMarquee = () => this._marqueeing = undefined; - panelWidth = () => this.props.PanelWidth() / (this.props.scaling?.() || 1); // (this.Document.scrollHeight || Doc.NativeHeight(this.Document) || 0); + panelWidth = () => this.props.PanelWidth() / (this.props.scaling?.() || 1) - this.sidebarWidth(); // (this.Document.scrollHeight || Doc.NativeHeight(this.Document) || 0); panelHeight = () => this.props.PanelHeight() / (this.props.scaling?.() || 1); // () => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : Doc.NativeWidth(this.Document); scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._scrollTop)); render() { const inactiveLayer = this.props.layerProvider?.(this.layoutDoc) === false; const scale = this.props.scaling?.() || 1; - return (
-
- - {this.content} -
-
- + return ( +
+
+ + {this.content} +
+
+ +
-
- {this.annotationLayer} - {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) : - } -
- {this.props.isSelected() ? this.editToggleBtn() : null} -
); + {this.annotationLayer} + {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) : + } +
+ {this.sidebarOverlay} + {this.props.isSelected() ? this.editToggleBtn() : null} +
); } } \ No newline at end of file diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx index 5a3c2103e..0a1e0ba8f 100644 --- a/src/client/views/pdf/AnchorMenu.tsx +++ b/src/client/views/pdf/AnchorMenu.tsx @@ -15,6 +15,7 @@ import { SelectionManager } from "../../util/SelectionManager"; export class AnchorMenu extends AntimodeMenu { static Instance: AnchorMenu; + private _disposer: IReactionDisposer | undefined; private _commentCont = React.createRef(); private _palette = [ "rgba(208, 2, 27, 0.8)", @@ -60,12 +61,9 @@ export class AnchorMenu extends AntimodeMenu { AnchorMenu.Instance._canFade = false; } - _disposer: IReactionDisposer | undefined; componentDidMount() { this._disposer = reaction(() => SelectionManager.Views(), - selected => { - AnchorMenu.Instance.fadeOut(true); - }); + selected => AnchorMenu.Instance.fadeOut(true)); } pointerDown = (e: React.PointerEvent) => { diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index c7359f74e..c9bee5101 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -8,14 +8,16 @@ import { documentSchema } from "../../../fields/documentSchemas"; import { Id } from "../../../fields/FieldSymbols"; import { InkTool } from "../../../fields/InkField"; import { createSchema, makeInterface } from "../../../fields/Schema"; -import { Cast, NumCast, StrCast, ScriptCast } from "../../../fields/Types"; +import { Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types"; import { PdfField } from "../../../fields/URLField"; import { TraceMobx } from "../../../fields/util"; import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, OmitKeys, smoothScroll, Utils } from "../../../Utils"; import { DocUtils } from "../../documents/Documents"; import { Networking } from "../../Network"; +import { CurrentUserUtils } from "../../util/CurrentUserUtils"; import { CompiledScript, CompileScript } from "../../util/Scripting"; import { SelectionManager } from "../../util/SelectionManager"; +import { SharingManager } from "../../util/SharingManager"; import { SnappingManager } from "../../util/SnappingManager"; import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; import { ViewBoxAnnotatableComponent } from "../DocComponent"; @@ -27,8 +29,6 @@ import { Annotation } from "./Annotation"; import "./PDFViewer.scss"; const pdfjs = require('pdfjs-dist/es5/build/pdf.js'); import React = require("react"); -import { SharingManager } from "../../util/SharingManager"; -import { CurrentUserUtils } from "../../util/CurrentUserUtils"; const PDFJSViewer = require("pdfjs-dist/web/pdf_viewer"); const pdfjsLib = require("pdfjs-dist"); const _global = (window /* browser */ || global /* node */) as any; @@ -52,7 +52,6 @@ interface IViewerProps extends FieldViewProps { url: string; startupLive: boolean; loaded?: (nw: number, nh: number, np: number) => void; - isChildActive: (outsideReaction?: boolean) => boolean; setPdfViewer: (view: PDFViewer) => void; ContentScaling?: () => number; sidebarWidth: () => number; @@ -69,6 +68,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent = new Dictionary(); @observable private _script: CompiledScript = CompileScript("return true") as CompiledScript; @observable private _marqueeing: number[] | undefined; + @observable private _textSelecting = true; @observable private _showWaiting = true; @observable private _showCover = false; @observable private _zoomed = 1; @@ -379,9 +379,11 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { this._marqueeing = undefined; + this._textSelecting = true; document.removeEventListener("pointermove", this.onSelectMove); - this.props.select(false); } onSelectMove = (e: PointerEvent) => e.stopPropagation(); @@ -541,7 +543,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent; } @computed get pdfViewerDiv() { - return
; + return
; } @computed get contentScaling() { return this.props.ContentScaling?.() || 1; } @computed get standinViews() { -- cgit v1.2.3-70-g09d2