From 41f458fb4f383bfbf8d5b651189c2f4731262ff8 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 13 Mar 2019 20:33:51 -0400 Subject: added annotations for videos. added custom play controls for videos. --- src/client/views/collections/CollectionPDFView.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) (limited to 'src/client/views/collections/CollectionPDFView.tsx') diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index f22c07060..91ffc9500 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -18,13 +18,12 @@ 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; + private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, -1); } + private get numPages() { return this.props.Document.GetNumber(KeyStore.NumPages, 0); } + @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : -1; + @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : -1; - @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() { + private get uIButtons() { return (
@@ -33,7 +32,7 @@ export class CollectionPDFView extends React.Component { } // "inherited" CollectionView API starts here... - + public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } -- cgit v1.2.3-70-g09d2 From f905d60fecaf7301c1ffb716529d6e5b86130798 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 14 Mar 2019 02:11:39 -0400 Subject: fixed marquee --- src/client/views/collections/CollectionPDFView.tsx | 3 ++- src/client/views/collections/CollectionSchemaView.scss | 5 +++++ src/client/views/collections/CollectionVideoView.tsx | 1 + src/client/views/collections/CollectionView.tsx | 5 ++--- 4 files changed, 10 insertions(+), 4 deletions(-) (limited to 'src/client/views/collections/CollectionPDFView.tsx') diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 91ffc9500..be3a281f2 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.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 { KeyStore } from "../../../fields/KeyStore"; @@ -32,6 +32,7 @@ export class CollectionPDFView extends React.Component { } // "inherited" CollectionView API starts here... + @observable public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index d40e6d314..c4e6528e5 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -71,6 +71,11 @@ max-width: 100%; height: 100% } + .videobox-cont { + object-fit: contain; + max-width: 100%; + height: 100% + } } .rt-tr-group { border-width: 1; diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index 058325b21..9856a1284 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -23,6 +23,7 @@ export class CollectionVideoView extends React.Component { private _mainCont = React.createRef(); // "inherited" CollectionView API starts here... + @observable public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index bbb4a5d83..303379fc4 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -27,15 +27,14 @@ 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} isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`; } + @observable + public SelectedDocs: FieldId[] = []; 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); } -- cgit v1.2.3-70-g09d2 From 7921253dfc1e115b9e8beaa845f952fa5c3eb226 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 14 Mar 2019 09:54:04 -0400 Subject: fixed zoom behavior of pdf / video buttons. --- .../views/collections/CollectionFreeFormView.tsx | 2 +- .../views/collections/CollectionPDFView.scss | 28 +++++++++ src/client/views/collections/CollectionPDFView.tsx | 10 ++-- .../views/collections/CollectionVideoView.scss | 10 +++- .../views/collections/CollectionVideoView.tsx | 67 ++++++++++++---------- src/client/views/collections/PreviewCursor.tsx | 8 ++- src/client/views/nodes/PDFBox.scss | 2 +- 7 files changed, 87 insertions(+), 40 deletions(-) create mode 100644 src/client/views/collections/CollectionPDFView.scss (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 08f3a338b..98fb23fa4 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -335,7 +335,7 @@ export class CollectionFreeFormView extends CollectionViewBase { ref={this._canvasRef}> {this.backgroundView} - + {this.views}
diff --git a/src/client/views/collections/CollectionPDFView.scss b/src/client/views/collections/CollectionPDFView.scss new file mode 100644 index 000000000..28878c6fa --- /dev/null +++ b/src/client/views/collections/CollectionPDFView.scss @@ -0,0 +1,28 @@ +.collectionPdfView-buttonTray { + width: 100%; + height: 100%; + top : 25px; + left : 20px; + position: relative; + transform-origin: left top; + position: absolute; +} +.collectionPdfView-cont{ + width: 100%; + height: 100%; + position: absolute; +} +.collectionPdfView-backward { + color : white; + top :0px; + left : 0px; + position: absolute; + background-color: rgba(50, 50, 50, 0.2); +} +.collectionPdfView-forward { + color : white; + top :0px; + left : 25px; + position: absolute; + background-color: rgba(50, 50, 50, 0.2); +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index be3a281f2..124d82c8b 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -5,6 +5,7 @@ import { KeyStore } from "../../../fields/KeyStore"; import { ContextMenu } from "../ContextMenu"; import { CollectionView, CollectionViewType } from "./CollectionView"; import { CollectionViewProps } from "./CollectionViewBase"; +import "./CollectionPDFView.scss" import React = require("react"); import { FieldId } from "../../../fields/Field"; @@ -24,10 +25,11 @@ export class CollectionPDFView extends React.Component { @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : -1; private get uIButtons() { + let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]); return ( -
- - +
+ +
); } @@ -49,7 +51,7 @@ export class CollectionPDFView extends React.Component { get subView(): any { return CollectionView.SubView(this); } render() { - return (
+ return (
{this.subView} {this.props.isSelected() ? this.uIButtons : (null)}
) diff --git a/src/client/views/collections/CollectionVideoView.scss b/src/client/views/collections/CollectionVideoView.scss index 6c2f5a62a..ec3c0327d 100644 --- a/src/client/views/collections/CollectionVideoView.scss +++ b/src/client/views/collections/CollectionVideoView.scss @@ -1,4 +1,9 @@ -.collectionVideoView-controls{ +.collectionVideoView-buttonTray{ + width: 100%; + height: 100%; + position: absolute; +} +.collectionVideoView-cont{ width: 100%; height: 100%; position: absolute; @@ -9,6 +14,7 @@ left : 25px; position: absolute; background-color: rgba(50, 50, 50, 0.2); + transform-origin: left top; } .collectionVideoView-play { width: 25px; @@ -20,6 +26,7 @@ background-color: rgba(50, 50, 50, 0.2); border-radius: 4px; text-align: center; + transform-origin: left bottom; } .collectionVideoView-full { width: 25px; @@ -31,5 +38,6 @@ background-color: rgba(50, 50, 50, 0.2); border-radius: 4px; text-align: center; + transform-origin: right bottom; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index 9856a1284..9b01c23c9 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -7,7 +7,6 @@ import { CollectionView, CollectionViewType } from "./CollectionView"; import { CollectionViewProps } from "./CollectionViewBase"; import React = require("react"); import { FieldId } from "../../../fields/Field"; -import { ReplaceAroundStep } from "prosemirror-transform"; import "./CollectionVideoView.scss" @@ -21,6 +20,25 @@ export class CollectionVideoView extends React.Component { } private _mainCont = React.createRef(); + + private get uIButtons() { + let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]); + return ( +
+
+ {"" + Math.round(this.ctime)} + {" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)} +
+
+ {this.playing ? "\"" : ">"} +
+
+ F +
+
); + } + + // "inherited" CollectionView API starts here... @observable @@ -40,20 +58,20 @@ export class CollectionVideoView extends React.Component { get subView(): any { return CollectionView.SubView(this); } componentDidMount() { - this.repete(); + this.updateTimecode(); } - player = (): HTMLVideoElement => { - return this._mainCont.current!.getElementsByTagName("video")[0]; + get player(): HTMLVideoElement | undefined { + return this._mainCont.current ? this._mainCont.current.getElementsByTagName("video")[0] : undefined; } @action - repete = () => { - if (this.player()) { - this.ctime = this.player().currentTime; + updateTimecode = () => { + if (this.player) { + this.ctime = this.player.currentTime; this.props.Document.SetNumber(KeyStore.CurPage, Math.round(this.ctime)); } - setTimeout(() => this.repete(), 100) + setTimeout(() => this.updateTimecode(), 100) } @@ -64,20 +82,20 @@ export class CollectionVideoView extends React.Component { @action onPlayDown = () => { - if (this.player()) { - if (this.player().paused) { - this.player().play(); + if (this.player) { + if (this.player.paused) { + this.player.play(); this.playing = true; } else { - this.player().pause(); + this.player.pause(); this.playing = false; } } } @action onFullDown = (e: React.PointerEvent) => { - if (this.player()) { - this.player().requestFullscreen(); + if (this.player) { + this.player.requestFullscreen(); e.stopPropagation(); e.preventDefault(); } @@ -85,28 +103,17 @@ export class CollectionVideoView extends React.Component { @action onResetDown = () => { - if (this.player()) { - this.player().pause(); - this.player().currentTime = 0; + if (this.player) { + this.player.pause(); + this.player.currentTime = 0; } } render() { return (
-
- {this.subView} -
- {"" + Math.round(this.ctime)} - {" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)} -
-
- {this.playing ? "\"" : ">"} -
-
- F -
-
+ {this.subView} + {this.uIButtons}
) } } \ No newline at end of file diff --git a/src/client/views/collections/PreviewCursor.tsx b/src/client/views/collections/PreviewCursor.tsx index ab68fbc46..a1411250a 100644 --- a/src/client/views/collections/PreviewCursor.tsx +++ b/src/client/views/collections/PreviewCursor.tsx @@ -16,7 +16,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView"; export interface PreviewCursorProps { getTransform: () => Transform; container: CollectionFreeFormView; - addLiveTextDocuemnt: (doc: Document) => void; + addLiveTextDocument: (doc: Document) => void; } @observer @@ -57,11 +57,13 @@ export class PreviewCursor extends React.Component { @action onKeyPress = (e: KeyboardEvent) => { //if not these keys, make a textbox if preview cursor is active! - if (!e.ctrlKey && !e.altKey) { + if (!e.ctrlKey && !e.altKey && !e.defaultPrevented) { //make textbox and add it to this collection let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY); let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "new" }); - this.props.addLiveTextDocuemnt(newBox); + this.props.addLiveTextDocument(newBox); + e.stopPropagation(); + e.preventDefault(); } } diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 9f92410d4..ad947afd5 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -11,5 +11,5 @@ } .pdfBox-contentContainer { position: absolute; - transform-origin: "left top"; + transform-origin: left top; } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 8418b842b16da68150243e1750aa8b40eb8a8792 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 18 Mar 2019 11:48:24 -0400 Subject: fixed removing from schemas. fixed dragging link button to move quickly. cleaned up drag/drop code a little --- src/client/util/DragManager.ts | 12 +++----- src/client/views/DocumentDecorations.tsx | 14 ++++----- src/client/views/InkingControl.tsx | 3 +- .../views/collections/CollectionFreeFormView.tsx | 4 +-- src/client/views/collections/CollectionPDFView.tsx | 2 +- .../views/collections/CollectionSchemaView.tsx | 4 +-- .../views/collections/CollectionVideoView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 7 +++-- .../views/collections/CollectionViewBase.tsx | 36 ++++++++-------------- src/client/views/collections/MarqueeView.tsx | 15 +++++++-- src/client/views/nodes/DocumentView.tsx | 16 +++++----- 11 files changed, 57 insertions(+), 58 deletions(-) (limited to 'src/client/views/collections/CollectionPDFView.tsx') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index c0abec407..54784f2d2 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -2,18 +2,18 @@ import { DocumentDecorations } from "../views/DocumentDecorations"; import { CollectionDockingView } from "../views/collections/CollectionDockingView"; import { Document } from "../../fields/Document" import { action } from "mobx"; -import { DocumentView } from "../views/nodes/DocumentView"; import { ImageField } from "../../fields/ImageField"; import { KeyStore } from "../../fields/KeyStore"; +import { CollectionView } from "../views/collections/CollectionView"; -export function setupDrag(_reference: React.RefObject, docFunc: () => Document) { +export function setupDrag(_reference: React.RefObject, docFunc: () => Document, removeFunc: (containingCollection: CollectionView) => void = () => { }) { let onRowMove = action((e: PointerEvent): void => { e.stopPropagation(); e.preventDefault(); document.removeEventListener("pointermove", onRowMove); document.removeEventListener('pointerup', onRowUp); - DragManager.StartDrag(_reference.current!, { document: docFunc() }); + DragManager.StartDrag(_reference.current!, { draggedDocument: docFunc(), removeDocument: removeFunc }); }); let onRowUp = action((e: PointerEvent): void => { document.removeEventListener("pointermove", onRowMove); @@ -122,9 +122,7 @@ export namespace DragManager { // bcz: PDFs don't show up if you clone them because they contain a canvas. // however, PDF's have a thumbnail field that contains an image of their canvas. // So we replace the pdf's canvas with the image thumbnail - const docView: DocumentView = dragData["documentView"]; - const doc: Document = dragData["document"]; - + const doc: Document = dragData["draggedDocument"]; if (doc) { var pdfBox = dragElement.getElementsByClassName("pdfBox-cont")[0] as HTMLElement; let thumbnail = doc.GetT(KeyStore.Thumbnail, ImageField); @@ -138,7 +136,6 @@ export namespace DragManager { } } - dragDiv.appendChild(dragElement); let hideSource = false; @@ -191,6 +188,7 @@ export namespace DragManager { if (!target) { return; } + dragData["droppedDocument"] = dragData["aliasOnDrop"] ? (dragData["draggedDocument"] as Document).CreateAlias() : dragData["draggedDocument"]; target.dispatchEvent(new CustomEvent("dashOnDrop", { bubbles: true, detail: { diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 3bdb7d5b3..1145fbe7f 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -77,7 +77,6 @@ export class DocumentDecorations extends React.Component { } onLinkButtonUp = (e: PointerEvent): void => { - console.log("up"); document.removeEventListener("pointermove", this.onLinkButtonMoved) document.removeEventListener("pointerup", this.onLinkButtonUp) e.stopPropagation(); @@ -85,10 +84,11 @@ export class DocumentDecorations extends React.Component { onLinkButtonMoved = (e: PointerEvent): void => { - console.log("moved"); - let dragData: { [id: string]: any } = {}; - dragData["linkSourceDoc"] = SelectionManager.SelectedDocuments()[0]; if (this._linkButton.current != null) { + document.removeEventListener("pointermove", this.onLinkButtonMoved) + document.removeEventListener("pointerup", this.onLinkButtonUp) + let dragData: { [id: string]: any } = {}; + dragData["linkSourceDoc"] = SelectionManager.SelectedDocuments()[0]; DragManager.StartDrag(this._linkButton.current, dragData, { handlers: { dragComplete: action(() => { }), @@ -96,8 +96,6 @@ export class DocumentDecorations extends React.Component { hideSource: false }) } - document.removeEventListener("pointermove", this.onLinkButtonMoved) - document.removeEventListener("pointerup", this.onLinkButtonUp) e.stopPropagation(); } @@ -217,7 +215,7 @@ export class DocumentDecorations extends React.Component { }> -
{linkCount}
+
{linkCount}
); } return ( @@ -237,7 +235,7 @@ export class DocumentDecorations extends React.Component {
e.preventDefault()}>
e.preventDefault()}>
-
{linkButton}
+
{linkButton}
) diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index 6616f68d8..ad6bbd476 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -11,6 +11,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPen, faHighlighter, faEraser, faBan } from '@fortawesome/free-solid-svg-icons'; import { SelectionManager } from "../util/SelectionManager"; import { KeyStore } from "../../fields/KeyStore"; +import { TextField } from "../../fields/TextField"; library.add(faPen, faHighlighter, faEraser, faBan); @@ -39,7 +40,7 @@ export class InkingControl extends React.Component { if (SelectionManager.SelectedDocuments().length == 1) { var sdoc = SelectionManager.SelectedDocuments()[0]; if (sdoc.props.ContainingCollectionView && sdoc.props.ContainingCollectionView) { - sdoc.props.Document.SetText(KeyStore.BackgroundColor, color.hex); + sdoc.props.Document.SetOnPrototype(KeyStore.BackgroundColor, new TextField(color.hex)); } } } diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 728076ef8..85ea2d121 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -28,7 +28,7 @@ export class CollectionFreeFormView extends CollectionViewBase { // mark this collection so that when the text box is created we can send it the SelectOnLoad prop to focus itself this._selectOnLoaded = newBox.Id; //set text to be the typed key and get focus on text box - this.props.addDocument(newBox); + this.props.addDocument(newBox, false); //remove cursor from screen this.PreviewCursorVisible = false; } @@ -79,7 +79,7 @@ export class CollectionFreeFormView extends CollectionViewBase { let screenX = de.x - (de.data["xOffset"] as number || 0); let screenY = de.y - (de.data["yOffset"] as number || 0); const [x, y] = this.getTransform().transformPoint(screenX, screenY); - let doc: Document = de.data["document"]; + let doc: Document = de.data["droppedDocument"]; if (doc) { doc.SetNumber(KeyStore.X, x); doc.SetNumber(KeyStore.Y, y); diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 124d82c8b..e64b4c945 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -38,7 +38,7 @@ export class CollectionPDFView extends React.Component { public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); - addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } + addDocument = (doc: Document, allowDuplicates: boolean): void => { CollectionView.AddDocument(this.props, doc, allowDuplicates); } removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } specificContextMenu = (e: React.MouseEvent): void => { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index f88a62a0f..ced08a14e 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -14,7 +14,7 @@ import { EditableView } from "../EditableView"; import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; -import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; +import { COLLECTION_BORDER_WIDTH, CollectionView } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import { setupDrag } from "../../util/DragManager"; @@ -47,7 +47,7 @@ export class CollectionSchemaView extends CollectionViewBase { ) let reference = React.createRef(); - let onItemDown = setupDrag(reference, () => props.doc); + let onItemDown = setupDrag(reference, () => props.doc, (containingCollection: CollectionView) => this.props.removeDocument(props.doc)); return (
{ public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); - addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } + addDocument = (doc: Document, allowDuplicates: boolean): void => { CollectionView.AddDocument(this.props, doc, allowDuplicates); } removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } specificContextMenu = (e: React.MouseEvent): void => { diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 40acf466e..303099c16 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -36,7 +36,7 @@ export class CollectionView extends React.Component { @observable public SelectedDocs: FieldId[] = []; public active: () => boolean = () => CollectionView.Active(this); - addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } + addDocument = (doc: Document, allowDuplicates: boolean): void => { CollectionView.AddDocument(this.props, doc, allowDuplicates); } removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } get subView() { return CollectionView.SubView(this); } @@ -48,12 +48,13 @@ export class CollectionView extends React.Component { } @action - public static AddDocument(props: CollectionViewProps, doc: Document) { + public static AddDocument(props: CollectionViewProps, doc: Document, allowDuplicates: boolean) { doc.SetNumber(KeyStore.Page, props.Document.GetNumber(KeyStore.CurPage, -1)); 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()) - value.push(doc); + if (!value.some(v => v.Id == doc.Id) || allowDuplicates) + value.push(doc); } else { props.Document.SetOnPrototype(props.fieldKey, new ListField([doc])); } diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 3d1a76a07..0358b5907 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -27,7 +27,7 @@ export interface CollectionViewProps { } export interface SubCollectionViewProps extends CollectionViewProps { active: () => boolean; - addDocument: (doc: Document) => void; + addDocument: (doc: Document, allowDuplicates: boolean) => void; removeDocument: (doc: Document) => boolean; CollectionView: CollectionView; } @@ -46,28 +46,16 @@ export class CollectionViewBase extends React.Component @undoBatch @action protected drop(e: Event, de: DragManager.DropEvent) { - let docToAlias = de.data["documentToAlias"]; - let docView = de.data["documentView"]; - let doc = docToAlias ? docToAlias.CreateAlias() : de.data["document"]; - if (docToAlias) { - [KeyStore.Width, KeyStore.Height].map(key => - docToAlias.GetTAsync(key, NumberField, (f: Opt) => { - if (f) { - doc.SetNumber(key, f.Data) - } - }) - ); - de.data["document"] = doc; - this.props.addDocument(doc); - } else if (docView) { - if (doc && docView.props.RemoveDocument && docView.props.ContainingCollectionView !== this.props.CollectionView) { - docView.props.RemoveDocument(doc); - this.props.removeDocument(doc); // bcz: not good -- want to check if it's there and then add if it isn't - this.props.addDocument(doc); + let dropped = de.data["droppedDocument"]; + if (dropped) { + if (de.data["aliasOnDrop"]) { + let dragged = de.data["draggedDocument"]; + [KeyStore.Width, KeyStore.Height, KeyStore.CurPage].map(key => + dragged.GetTAsync(key, NumberField, (f: Opt) => f ? dropped.SetNumber(key, f.Data) : null)); + } else if (de.data["removeDocument"]) { + de.data["removeDocument"](this.props.CollectionView); } - } else if (doc) { - this.props.removeDocument(doc); // bcz: not good -- want to check if it's there and then add if it isn't - this.props.addDocument(doc); + this.props.addDocument(dropped, false); } e.stopPropagation(); } @@ -89,7 +77,7 @@ export class CollectionViewBase extends React.Component console.log("not good"); let htmlDoc = Documents.HtmlDocument(html, { ...options, width: 300, height: 300 }); htmlDoc.SetText(KeyStore.DocumentText, text); - this.props.addDocument(htmlDoc); + this.props.addDocument(htmlDoc, false); return; } @@ -99,7 +87,7 @@ export class CollectionViewBase extends React.Component const upload = window.location.origin + "/upload"; let item = e.dataTransfer.items[i]; if (item.kind === "string" && item.type.indexOf("uri") != -1) { - e.dataTransfer.items[i].getAsString(action((s: string) => this.props.addDocument(Documents.WebDocument(s, options)))) + e.dataTransfer.items[i].getAsString(action((s: string) => this.props.addDocument(Documents.WebDocument(s, options), false))) } let type = item.type console.log(type) diff --git a/src/client/views/collections/MarqueeView.tsx b/src/client/views/collections/MarqueeView.tsx index f5c83a934..8c2f3443c 100644 --- a/src/client/views/collections/MarqueeView.tsx +++ b/src/client/views/collections/MarqueeView.tsx @@ -17,7 +17,7 @@ interface MarqueeViewProps { getMarqueeTransform: () => Transform; getTransform: () => Transform; container: CollectionFreeFormView; - addDocument: (doc: Document) => void; + addDocument: (doc: Document, allowDuplicates: false) => void; activeDocuments: () => Document[]; selectDocuments: (docs: Document[]) => void; removeDocument: (doc: Document) => boolean; @@ -111,7 +111,18 @@ export class MarqueeView extends React.Component let liftedInk = this.marqueeInkSelect(true); this.props.container.props.Document.SetData(KeyStore.Ink, this.marqueeInkSelect(false), InkField); //setTimeout(() => { - this.props.addDocument(Documents.FreeformDocument(selected, { x: bounds.left, y: bounds.top, panx: 0, pany: 0, width: bounds.width, backgroundColor: "Transparent", height: bounds.height, ink: liftedInk, title: "a nested collection" })); + let newCollection = Documents.FreeformDocument(selected, { + x: bounds.left, + y: bounds.top, + panx: 0, + pany: 0, + width: bounds.width, + height: bounds.height, + backgroundColor: "Transparent", + ink: liftedInk, + title: "a nested collection" + }); + this.props.addDocument(newCollection, false); // }, 100); this.cleanupInteractions(); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index fbd58ef7e..e98815fa6 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -23,7 +23,7 @@ import React = require("react"); export interface DocumentViewProps { ContainingCollectionView: Opt; Document: Document; - AddDocument?: (doc: Document) => void; + AddDocument?: (doc: Document, allowDuplicates: boolean) => void; RemoveDocument?: (doc: Document) => boolean; ScreenToLocalTransform: () => Transform; isTopMost: boolean; @@ -164,12 +164,15 @@ export class DocumentView extends React.Component { if (this._mainCont.current) { const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); let dragData: { [id: string]: any } = {}; - dragData["documentView"] = this; - if (dropAliasOfDraggedDoc) - dragData["documentToAlias"] = this.props.Document; - dragData["document"] = this.props.Document; + dragData["aliasOnDrop"] = dropAliasOfDraggedDoc; + dragData["draggedDocument"] = this.props.Document; dragData["xOffset"] = x - left; dragData["yOffset"] = y - top; + dragData["removeDocument"] = (dropCollectionView: CollectionView) => { + if (this.props.RemoveDocument && this.props.ContainingCollectionView !== dropCollectionView) { + this.props.RemoveDocument(this.props.Document); + } + } DragManager.StartDrag(this._mainCont.current, dragData, { handlers: { dragComplete: action(() => { }), @@ -213,7 +216,7 @@ export class DocumentView extends React.Component { fieldsClicked = (e: React.MouseEvent): void => { if (this.props.AddDocument) { - this.props.AddDocument(Documents.KVPDocument(this.props.Document, { width: 300, height: 300 })); + this.props.AddDocument(Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }), false); } } fullScreenClicked = (e: React.MouseEvent): void => { @@ -232,7 +235,6 @@ export class DocumentView extends React.Component { @action drop = (e: Event, de: DragManager.DropEvent) => { - console.log("drop"); const sourceDocView: DocumentView = de.data["linkSourceDoc"]; if (!sourceDocView) { return; -- cgit v1.2.3-70-g09d2