From c4eff83d814b1f9b94b7fc75ca06e8f0474de20d Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 8 Mar 2019 11:44:28 -0500 Subject: working version of pdfs with annotations. --- src/client/views/collections/CollectionPDFView.tsx | 74 ++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 src/client/views/collections/CollectionPDFView.tsx (limited to 'src/client/views/collections/CollectionPDFView.tsx') diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx new file mode 100644 index 000000000..90da43921 --- /dev/null +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -0,0 +1,74 @@ +import { action, computed } from "mobx"; +import { observer } from "mobx-react"; +import { Document } from "../../../fields/Document"; +import { ListField } from "../../../fields/ListField"; +import { SelectionManager } from "../../util/SelectionManager"; +import { ContextMenu } from "../ContextMenu"; +import React = require("react"); +import { KeyStore } from "../../../fields/KeyStore"; +import { NumberField } from "../../../fields/NumberField"; +import { CollectionFreeFormView } from "./CollectionFreeFormView"; +import { CollectionDockingView } from "./CollectionDockingView"; +import { CollectionSchemaView } from "./CollectionSchemaView"; +import { CollectionViewProps } from "./CollectionViewBase"; +import { CollectionTreeView } from "./CollectionTreeView"; +import { Field } from "../../../fields/Field"; +import { CollectionViewType, CollectionView } from "./CollectionView"; +import { JSXElement } from "babel-types"; + + +@observer +export class CollectionPDFView extends React.Component { + + public static LayoutString(fieldKey: string = "DataKey") { + return `<${CollectionPDFView.name} Document={Document} + ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings} + isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`; + } + + @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : 0; + @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : 0; + + @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, 0); } + @computed private get numPages() { return this.props.Document.GetNumber(KeyStore.NumPages, 0); } + @computed private get uIButtons() { + return ( +
+ + +
); + } + + // CollectionView API starts here... + + public active: () => boolean = () => CollectionView.Active(this); + + @action + addDocument = (doc: Document): void => { + doc.SetNumber(KeyStore.Page, this.curPage); + CollectionView.AddDocument(this.props, doc); + } + + @action removeDocument = (doc: Document): boolean => { + return CollectionView.RemoveDocument(this.props, doc); + } + + specificContextMenu = (e: React.MouseEvent): void => { + if (!e.isPropagationStopped) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + ContextMenu.Instance.addItem({ description: "PDFOptions", event: () => { } }) + } + } + + get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; } + + + @computed + get subView(): any { return CollectionView.SubView(this); } + + render() { + return (
+ {this.subView} + {this.props.isSelected() ? this.uIButtons : (null)} +
) + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From d3e66a67406447682c59045a0130d884fe1045a6 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 8 Mar 2019 13:03:57 -0500 Subject: bug fixes and hack to make context menu appear again --- src/client/documents/Documents.ts | 2 +- src/client/views/collections/CollectionPDFView.tsx | 35 ++++----------- src/client/views/collections/CollectionView.tsx | 52 +++++----------------- src/client/views/nodes/PDFBox.tsx | 4 +- 4 files changed, 24 insertions(+), 69 deletions(-) (limited to 'src/client/views/collections/CollectionPDFView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index fb1c3d867..fc210e9a2 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -100,7 +100,7 @@ export namespace Documents { if (!pdfProto) { pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionPDFView.LayoutString("AnnotationsKey"), { x: 0, y: 0, nativeWidth: 600, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations] }); - pdfProto.SetNumber(KeyStore.Page, 1); + pdfProto.SetNumber(KeyStore.CurPage, 1); pdfProto.SetText(KeyStore.BackgroundLayout, PDFBox.LayoutString()); } return pdfProto; diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 90da43921..7fd9f0f11 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -1,20 +1,11 @@ import { action, computed } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; -import { ListField } from "../../../fields/ListField"; -import { SelectionManager } from "../../util/SelectionManager"; -import { ContextMenu } from "../ContextMenu"; -import React = require("react"); import { KeyStore } from "../../../fields/KeyStore"; -import { NumberField } from "../../../fields/NumberField"; -import { CollectionFreeFormView } from "./CollectionFreeFormView"; -import { CollectionDockingView } from "./CollectionDockingView"; -import { CollectionSchemaView } from "./CollectionSchemaView"; +import { ContextMenu } from "../ContextMenu"; +import { CollectionView, CollectionViewType } from "./CollectionView"; import { CollectionViewProps } from "./CollectionViewBase"; -import { CollectionTreeView } from "./CollectionTreeView"; -import { Field } from "../../../fields/Field"; -import { CollectionViewType, CollectionView } from "./CollectionView"; -import { JSXElement } from "babel-types"; +import React = require("react"); @observer @@ -39,30 +30,20 @@ export class CollectionPDFView extends React.Component { ); } - // CollectionView API starts here... + // "inherited" CollectionView API starts here... public active: () => boolean = () => CollectionView.Active(this); - @action - addDocument = (doc: Document): void => { - doc.SetNumber(KeyStore.Page, this.curPage); - CollectionView.AddDocument(this.props, doc); - } - - @action removeDocument = (doc: Document): boolean => { - return CollectionView.RemoveDocument(this.props, doc); - } + addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } + removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } specificContextMenu = (e: React.MouseEvent): void => { - if (!e.isPropagationStopped) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 - ContextMenu.Instance.addItem({ description: "PDFOptions", event: () => { } }) + if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + ContextMenu.Instance.addItem({ description: "PDFOptions", event: () => { } }); } } get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; } - - - @computed get subView(): any { return CollectionView.SubView(this); } render() { diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 504538e85..49df04163 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -34,6 +34,9 @@ export class CollectionView extends React.Component { } public active: () => boolean = () => CollectionView.Active(this); + addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } + removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } + get subView() { return CollectionView.SubView(this); } public static Active(self: CollectionView): boolean { var isSelected = self.props.isSelected(); @@ -42,15 +45,9 @@ export class CollectionView extends React.Component { return isSelected || childSelected || topMost; } - addDocument = (doc: Document): void => { - CollectionView.AddDocument(this.props, doc); - } - removeDocument = (doc: Document): boolean => { - return CollectionView.RemoveDocument(this.props, doc); - } - @action public static AddDocument(props: CollectionViewProps, doc: Document) { + doc.SetNumber(KeyStore.Page, props.Document.GetNumber(KeyStore.CurPage, 0)); if (props.Document.Get(props.fieldKey) instanceof Field) { //TODO This won't create the field if it doesn't already exist const value = props.Document.GetData(props.fieldKey, ListField, new Array()) @@ -94,13 +91,8 @@ export class CollectionView extends React.Component { } } - set collectionViewType(type: CollectionViewType) { - let Document = this.props.Document; - Document.SetData(KeyStore.ViewType, type, NumberField); - } - specificContextMenu = (e: React.MouseEvent): void => { - if (!e.isPropagationStopped) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) }) ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) }) ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) }) @@ -108,35 +100,15 @@ export class CollectionView extends React.Component { } } - @computed - get subView() { return CollectionView.SubView(this); } - public static SubView(self: CollectionView) { - let viewType = self.collectionViewType; - let subView = (null); - switch (viewType) { - case CollectionViewType.Freeform: - subView = () - break; - case CollectionViewType.Schema: - subView = () - break; - case CollectionViewType.Docking: - subView = () - break; - case CollectionViewType.Tree: - subView = () - break; + let subProps = { ...self.props, addDocument: self.addDocument, removeDocument: self.removeDocument, active: self.active, CollectionView: self } + switch (self.collectionViewType) { + case CollectionViewType.Freeform: return () + case CollectionViewType.Schema: return () + case CollectionViewType.Docking: return () + case CollectionViewType.Tree: return () } - return subView; + return (null); } render() { diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index fb3e24659..70a70c7c8 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -432,7 +432,9 @@ export class PDFBox extends React.Component { @computed get pdfContent() { - const page = this.curPage; + let page = this.curPage; + if (page == 0) + page = 1; const renderHeight = 2400; let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight; -- cgit v1.2.3-70-g09d2 From 933cfacdeed99da38070790c5ec17cbdeb755267 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 11 Mar 2019 12:54:32 -0400 Subject: added marquee selection. --- .../views/collections/CollectionFreeFormView.tsx | 16 +++++++++++--- src/client/views/collections/CollectionPDFView.tsx | 2 ++ src/client/views/collections/CollectionView.tsx | 7 ++++-- src/client/views/nodes/DocumentView.tsx | 25 +++++++++++++++++++--- 4 files changed, 42 insertions(+), 8 deletions(-) (limited to 'src/client/views/collections/CollectionPDFView.tsx') diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index bc6d02757..37b3d6adb 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -27,6 +27,7 @@ import { CollectionViewBase } from "./CollectionViewBase"; import React = require("react"); import { Utils } from "../../../Utils"; import { SelectionManager } from "../../util/SelectionManager"; +import anymatch = require("anymatch"); const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @observer @@ -115,12 +116,22 @@ export class CollectionFreeFormView extends CollectionViewBase { } + intersectRect(r1: { left: number, right: number, top: number, bottom: number }, + r2: { left: number, right: number, top: number, bottom: number }) { + return !(r2.left > r1.right || + r2.right < r1.left || + r2.top > r1.bottom || + r2.bottom < r1.top); + } + @action marqueeSelect() { var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1); let p = this.getTransform().transformPoint(this._downX, this._downY); let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); + let selRect = { left: p[0], top: p[1], right: p[0] + v[0], bottom: p[1] + v[1] } + this.props.CollectionView.SelectedDocs.length = 0; var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1); const lvalue = this.props.Document.GetT>(this.props.fieldKey, ListField); if (lvalue && lvalue != FieldWaiting) { @@ -131,9 +142,8 @@ export class CollectionFreeFormView extends CollectionViewBase { var y = doc.GetNumber(KeyStore.Y, 0); var w = doc.GetNumber(KeyStore.Width, 0); var h = doc.GetNumber(KeyStore.Height, 0); - if (x > p[0] && x < p[0] + v[0] && y > p[1] && y < p[1] + v[1]) { - // SelectionManager.SelectDoc(doc as any as DocumentView, true); - } + if (this.intersectRect({ left: x, top: y, right: x + w, bottom: y + h }, selRect)) + this.props.CollectionView.SelectedDocs.push(doc.Id) } }) } diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 7fd9f0f11..f22c07060 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -6,6 +6,7 @@ import { ContextMenu } from "../ContextMenu"; import { CollectionView, CollectionViewType } from "./CollectionView"; import { CollectionViewProps } from "./CollectionViewBase"; import React = require("react"); +import { FieldId } from "../../../fields/Field"; @observer @@ -17,6 +18,7 @@ export class CollectionPDFView extends React.Component { isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`; } + public SelectedDocs: FieldId[] = [] @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : 0; @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : 0; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index f154909bb..548a51bf1 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -1,4 +1,4 @@ -import { action, computed } from "mobx"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { ListField } from "../../../fields/ListField"; @@ -12,7 +12,7 @@ import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; import { CollectionTreeView } from "./CollectionTreeView"; -import { Field } from "../../../fields/Field"; +import { Field, FieldId } from "../../../fields/Field"; export enum CollectionViewType { Invalid, @@ -27,6 +27,9 @@ export const COLLECTION_BORDER_WIDTH = 2; @observer export class CollectionView extends React.Component { + @observable + public SelectedDocs: FieldId[] = []; + public static LayoutString(fieldKey: string = "DataKey") { return `<${CollectionView.name} Document={Document} ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 263bb31d7..7627fbf6c 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,4 +1,4 @@ -import { action, computed } from "mobx"; +import { action, computed, IReactionDisposer, reaction } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { Field, FieldWaiting, Opt } from "../../../fields/Field"; @@ -16,8 +16,8 @@ import { CollectionPDFView } from "../collections/CollectionPDFView"; import { ContextMenu } from "../ContextMenu"; import { FormattedTextBox } from "../nodes/FormattedTextBox"; import { ImageBox } from "../nodes/ImageBox"; -import { VideoBox } from "../nodes/VideoBox"; -import { AudioBox } from "../nodes/AudioBox"; +import { VideoBox } from "../nodes/VideoBox"; +import { AudioBox } from "../nodes/AudioBox"; import { Documents } from "../../documents/Documents" import { KeyValueBox } from "./KeyValueBox" import { WebBox } from "../nodes/WebBox"; @@ -88,6 +88,7 @@ export class DocumentView extends React.Component { private _documentBindings: any = null; private _downX: number = 0; private _downY: number = 0; + private _reactionDisposer: Opt; @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); } @computed get topMost(): boolean { return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; } @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "

Error loading layout data

"); } @@ -113,6 +114,24 @@ export class DocumentView extends React.Component { } } } + + + componentDidMount() { + this._reactionDisposer = reaction( + () => this.props.ContainingCollectionView && this.props.ContainingCollectionView.SelectedDocs.slice(), + () => { + if (this.props.ContainingCollectionView && this.props.ContainingCollectionView.SelectedDocs.indexOf(this.props.Document.Id) != -1) + SelectionManager.SelectDoc(this, true); + }); + } + + componentWillUnmount() { + if (this._reactionDisposer) { + this._reactionDisposer(); + } + } + + onPointerMove = (e: PointerEvent): void => { if (e.cancelBubble) { return; -- cgit v1.2.3-70-g09d2