From b9cfa458a6535e7ee0ff8b81398afa1e123cf458 Mon Sep 17 00:00:00 2001 From: Andrew Kim Date: Sat, 9 Mar 2019 18:21:06 -0500 Subject: added audio and video nodes --- src/client/documents/Documents.ts | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) (limited to 'src/client/documents') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 1d24ff7d2..f81ad3188 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -15,6 +15,10 @@ import { Key } from "../../fields/Key" import { Field } from "../../fields/Field"; import { KeyValueBox } from "../views/nodes/KeyValueBox" import { KVPField } from "../../fields/KVPField"; +import { VideoField } from "../../fields/VideoField" +import { VideoBox } from "../views/nodes/VideoBox"; +import { AudioField } from "../../fields/AudioField"; +import { AudioBox } from "../views/nodes/AudioBox"; export interface DocumentOptions { x?: number; @@ -38,11 +42,15 @@ export namespace Documents { let webProto: Document; let collProto: Document; let kvpProto: Document; + let videoProto: Document; + let audioProto: Document; const textProtoId = "textProto"; const imageProtoId = "imageProto"; const webProtoId = "webProto"; const collProtoId = "collectionProto"; const kvpProtoId = "kvpProto"; + const videoProtoId = "videoProto" + const audioProtoId = "audioProto"; export function initProtos(mainDocId: string, callback: (mainDoc?: Document) => void) { Server.GetFields([collProtoId, textProtoId, imageProtoId, mainDocId], (fields) => { @@ -108,6 +116,17 @@ export namespace Documents { kvpProto = setupPrototypeOptions(kvpProtoId, "KVP_PROTO", KeyValueBox.LayoutString(), { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] }) } + function GetVideoPrototype(): Document { + return videoProto ? videoProto : + videoProto = setupPrototypeOptions(videoProtoId, "VIDEO_PROTO", VideoBox.LayoutString(), + { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] }) + } + function GetAudioPrototype(): Document { + return audioProto ? audioProto : + audioProto = setupPrototypeOptions(audioProtoId, "AUDIO_PROTO", AudioBox.LayoutString(), + { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] }) + } + export function ImageDocument(url: string, options: DocumentOptions = {}) { let doc = SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, @@ -117,6 +136,22 @@ export namespace Documents { doc.SetText(KeyStore.OverlayLayout, FixedCaption()); return doc; } + export function VideoDocument(url: string, options: DocumentOptions = {}){ + let doc = SetInstanceOptions(GetVideoPrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, + new URL(url), VideoField); + doc.SetText(KeyStore.Caption, "my caption..."); + doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption()); + doc.SetText(KeyStore.OverlayLayout, FixedCaption()); + return doc; + } + export function AudioDocument(url: string, options: DocumentOptions = {}){ + let doc = SetInstanceOptions(GetAudioPrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, + new URL(url), AudioField); + doc.SetText(KeyStore.Caption, "my caption..."); + doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption()); + doc.SetText(KeyStore.OverlayLayout, FixedCaption()); + return doc; + } export function TextDocument(options: DocumentOptions = {}) { return SetInstanceOptions(GetTextPrototype(), options, "", TextField); } -- cgit v1.2.3-70-g09d2 From 845a7989a6ff66b1c922d1f7f69c7560b6783dd8 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 10 Mar 2019 22:20:31 -0400 Subject: fixed type of FormattedTextBox to RichTextField --- src/client/documents/Documents.ts | 11 ++++++----- src/client/views/nodes/FormattedTextBox.tsx | 2 +- 2 files changed, 7 insertions(+), 6 deletions(-) (limited to 'src/client/documents') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index a91834cca..b78762018 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -22,6 +22,7 @@ import { AudioBox } from "../views/nodes/AudioBox"; import { PDFField } from "../../fields/PDFField"; import { PDFBox } from "../views/nodes/PDFBox"; import { CollectionPDFView } from "../views/collections/CollectionPDFView"; +import { RichTextField } from "../../fields/RichTextField"; export interface DocumentOptions { x?: number; @@ -45,8 +46,8 @@ export namespace Documents { let webProto: Document; let collProto: Document; let kvpProto: Document; - let videoProto: Document; - let audioProto: Document; + let videoProto: Document; + let audioProto: Document; let pdfProto: Document; const textProtoId = "textProto"; const pdfProtoId = "pdfProto"; @@ -150,7 +151,7 @@ export namespace Documents { doc.SetText(KeyStore.OverlayLayout, FixedCaption()); return doc; } - export function VideoDocument(url: string, options: DocumentOptions = {}){ + export function VideoDocument(url: string, options: DocumentOptions = {}) { let doc = SetInstanceOptions(GetVideoPrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, new URL(url), VideoField); doc.SetText(KeyStore.Caption, "my caption..."); @@ -158,7 +159,7 @@ export namespace Documents { doc.SetText(KeyStore.OverlayLayout, FixedCaption()); return doc; } - export function AudioDocument(url: string, options: DocumentOptions = {}){ + export function AudioDocument(url: string, options: DocumentOptions = {}) { let doc = SetInstanceOptions(GetAudioPrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, new URL(url), AudioField); doc.SetText(KeyStore.Caption, "my caption..."); @@ -167,7 +168,7 @@ export namespace Documents { return doc; } export function TextDocument(options: DocumentOptions = {}) { - return SetInstanceOptions(GetTextPrototype(), options, "", TextField); + return SetInstanceOptions(GetTextPrototype(), options, "", RichTextField); } export function PdfDocument(url: string, options: DocumentOptions = {}) { return SetInstanceOptions(GetPdfPrototype(), options, new URL(url), PDFField); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index f5063f9b1..ad7ddf37a 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -69,7 +69,7 @@ export class FormattedTextBox extends React.Component { }; let field = this.props.doc.GetT(this.props.fieldKey, RichTextField); - if (field && field != FieldWaiting) { + if (field && field != FieldWaiting && field.Data) { state = EditorState.fromJSON(config, JSON.parse(field.Data)); } else { state = EditorState.create(config); -- cgit v1.2.3-70-g09d2 From 618e66a5a070f1aac9224bd3f44b76a5ac314bfa Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 11 Mar 2019 16:56:36 -0400 Subject: fixed dragging of link button. made web views clips. added delete on marquee. --- src/client/documents/Documents.ts | 14 ++--------- src/client/util/DragManager.ts | 1 + src/client/views/DocumentDecorations.scss | 28 +++++++++++++++------- src/client/views/DocumentDecorations.tsx | 6 +++-- .../views/collections/CollectionFreeFormView.tsx | 21 +++++++++++++--- src/client/views/nodes/WebBox.scss | 1 + 6 files changed, 45 insertions(+), 26 deletions(-) (limited to 'src/client/documents') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index b78762018..7b30dff98 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -152,20 +152,10 @@ export namespace Documents { return doc; } export function VideoDocument(url: string, options: DocumentOptions = {}) { - let doc = SetInstanceOptions(GetVideoPrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, - new URL(url), VideoField); - doc.SetText(KeyStore.Caption, "my caption..."); - doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption()); - doc.SetText(KeyStore.OverlayLayout, FixedCaption()); - return doc; + return SetInstanceOptions(GetVideoPrototype(), options, new URL(url), VideoField); } export function AudioDocument(url: string, options: DocumentOptions = {}) { - let doc = SetInstanceOptions(GetAudioPrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, - new URL(url), AudioField); - doc.SetText(KeyStore.Caption, "my caption..."); - doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption()); - doc.SetText(KeyStore.OverlayLayout, FixedCaption()); - return doc; + return SetInstanceOptions(GetAudioPrototype(), options, new URL(url), AudioField); } export function TextDocument(options: DocumentOptions = {}) { return SetInstanceOptions(GetTextPrototype(), options, "", RichTextField); diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 0dcaa9c77..4a61220a5 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -99,6 +99,7 @@ export namespace DragManager { export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options?: DragOptions) { if (!dragDiv) { dragDiv = document.createElement("div"); + dragDiv.className = "dragManager-dragDiv" DragManager.Root().appendChild(dragDiv); } const w = ele.offsetWidth, h = ele.offsetHeight; diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index f88bf9c14..fb9091dfc 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -29,13 +29,23 @@ #documentDecorations-rightResizer { cursor: ew-resize; } - #linkButton { - height: 20px; - width: 20px; - margin-top: 10px; - border-radius: 50%; - opacity: 0.6; - pointer-events: auto; - background-color: #2B6091; - } + +} +.linkButton-empty { + height: 20px; + width: 20px; + margin-top: 10px; + border-radius: 50%; + opacity: 0.6; + pointer-events: auto; + background-color: #2B6091; +} +.linkButton-nonempty { + height: 20px; + width: 20px; + margin-top: 10px; + border-radius: 50%; + opacity: 0.6; + pointer-events: auto; + background-color: rgb(35, 165, 42); } \ No newline at end of file diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 8c3913232..dc62f97cf 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -8,6 +8,7 @@ import { NumberField } from "../../fields/NumberField"; import { props } from "bluebird"; import { DragManager } from "../util/DragManager"; import { LinkMenu } from "./nodes/LinkMenu"; +import { ListField } from "../../fields/ListField"; const higflyout = require("@hig/flyout"); const { anchorPoints } = higflyout; const Flyout = higflyout.default; @@ -204,13 +205,14 @@ export class DocumentDecorations extends React.Component { let linkButton = null; if (SelectionManager.SelectedDocuments().length > 0) { + let selFirst = SelectionManager.SelectedDocuments()[0]; linkButton = ( + }> -
+
); } return ( diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index cd5f92623..b0cd7e017 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -100,7 +100,8 @@ export class CollectionFreeFormView extends CollectionViewBase { if (!e.shiftKey) { SelectionManager.DeselectAll(); } - this.marqueeSelect(); + var selectedDocs = this.marqueeSelect(); + selectedDocs.map(s => this.props.CollectionView.SelectedDocs.push(s.Id)); this._marquee = false; } else if (!this._marquee && Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) { @@ -122,7 +123,6 @@ export class CollectionFreeFormView extends CollectionViewBase { r2.bottom < r1.top); } - @action marqueeSelect() { this.props.CollectionView.SelectedDocs.length = 0; var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1); @@ -132,6 +132,7 @@ export class CollectionFreeFormView extends CollectionViewBase { var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1); const lvalue = this.props.Document.GetT>(this.props.fieldKey, ListField); + let selection: Document[] = []; if (lvalue && lvalue != FieldWaiting) { lvalue.Data.map(doc => { var page = doc.GetNumber(KeyStore.Page, 0); @@ -141,10 +142,11 @@ export class CollectionFreeFormView extends CollectionViewBase { var w = doc.GetNumber(KeyStore.Width, 0); var h = doc.GetNumber(KeyStore.Height, 0); if (this.intersectRect({ left: x, top: y, right: x + w, bottom: y + h }, selRect)) - this.props.CollectionView.SelectedDocs.push(doc.Id) + selection.push(doc) } }) } + return selection; } @action @@ -152,7 +154,11 @@ export class CollectionFreeFormView extends CollectionViewBase { if (!e.cancelBubble && this.props.active()) { e.stopPropagation(); e.preventDefault(); + let wasMarquee = this._marquee; this._marquee = e.buttons != 2; + if (this._marquee && !wasMarquee) { + document.addEventListener("keydown", this.marqueeCommand); + } if (!this._marquee) { let x = this.props.Document.GetNumber(KeyStore.PanX, 0); @@ -166,6 +172,15 @@ export class CollectionFreeFormView extends CollectionViewBase { this._lastY = e.pageY; } + @action + marqueeCommand = (e: KeyboardEvent) => { + if (e.key == "Backspace") { + this.marqueeSelect().map(d => this.props.removeDocument(d)); + } + if (e.key == "c") { + } + } + @action onPointerWheel = (e: React.WheelEvent): void => { e.stopPropagation(); diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index e72b3c4da..a535b2638 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -4,6 +4,7 @@ position: absolute; width: 100%; height: 100%; + overflow: scroll; } .webBox-button { -- cgit v1.2.3-70-g09d2 From 7f13e25550761bd174b26a64ed73374c2d5da964 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 11 Mar 2019 19:19:40 -0400 Subject: fixed marquee issues and got rid of captions for images. --- src/client/documents/Documents.ts | 12 +++++----- .../views/collections/CollectionDockingView.tsx | 10 ++++++--- .../views/collections/CollectionFreeFormView.tsx | 26 ++++++++++++++++++++++ src/server/database.ts | 4 ++-- src/server/index.ts | 5 +++-- 5 files changed, 45 insertions(+), 12 deletions(-) (limited to 'src/client/documents') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 7b30dff98..bb463b36f 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -34,6 +34,7 @@ export interface DocumentOptions { title?: string; panx?: number; pany?: number; + page?: number; scale?: number; layout?: string; layoutKeys?: Key[]; @@ -78,6 +79,7 @@ export namespace Documents { if (options.title !== undefined) { doc.SetText(KeyStore.Title, options.title); } if (options.panx !== undefined) { doc.SetNumber(KeyStore.PanX, options.panx); } if (options.pany !== undefined) { doc.SetNumber(KeyStore.PanY, options.pany); } + if (options.page !== undefined) { doc.SetNumber(KeyStore.Page, options.page); } if (options.scale !== undefined) { doc.SetNumber(KeyStore.Scale, options.scale); } if (options.viewType !== undefined) { doc.SetNumber(KeyStore.ViewType, options.viewType); } if (options.layout !== undefined) { doc.SetText(KeyStore.Layout, options.layout); } @@ -146,9 +148,9 @@ export namespace Documents { export function ImageDocument(url: string, options: DocumentOptions = {}) { let doc = SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, new URL(url), ImageField); - doc.SetText(KeyStore.Caption, "my caption..."); - doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption()); - doc.SetText(KeyStore.OverlayLayout, FixedCaption()); + // doc.SetText(KeyStore.Caption, "my caption..."); + // doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption()); + // doc.SetText(KeyStore.OverlayLayout, FixedCaption()); return doc; } export function VideoDocument(url: string, options: DocumentOptions = {}) { @@ -194,10 +196,10 @@ export namespace Documents { + FormattedTextBox.LayoutString("CaptionKey") + `
` }; - function FixedCaption() { + function FixedCaption(fieldName: string = "Caption") { return `
` - + FormattedTextBox.LayoutString("CaptionKey") + + + FormattedTextBox.LayoutString(fieldName + "Key") + `
` }; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 6a0404663..94005a4c0 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -150,9 +150,13 @@ export class CollectionDockingView extends React.Component void = () => { - this._goldenLayout.unbind('itemDropped', this.itemDropped); - this._goldenLayout.unbind('tabCreated', this.tabCreated); - this._goldenLayout.unbind('stackCreated', this.stackCreated); + try { + this._goldenLayout.unbind('itemDropped', this.itemDropped); + this._goldenLayout.unbind('tabCreated', this.tabCreated); + this._goldenLayout.unbind('stackCreated', this.stackCreated); + } catch (e) { + + } this._goldenLayout.destroy(); this._goldenLayout = null; window.removeEventListener('resize', this.onResize); diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index b0cd7e017..2dba62ee0 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -92,6 +92,9 @@ export class CollectionFreeFormView extends CollectionViewBase { @action onPointerUp = (e: PointerEvent): void => { + if (this._marquee) { + document.removeEventListener("keydown", this.marqueeCommand); + } document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); e.stopPropagation(); @@ -115,6 +118,13 @@ export class CollectionFreeFormView extends CollectionViewBase { } + @action + clearMarquee = () => { + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + this._marquee = false; + } + intersectRect(r1: { left: number, right: number, top: number, bottom: number }, r2: { left: number, right: number, top: number, bottom: number }) { return !(r2.left > r1.right || @@ -157,6 +167,7 @@ export class CollectionFreeFormView extends CollectionViewBase { let wasMarquee = this._marquee; this._marquee = e.buttons != 2; if (this._marquee && !wasMarquee) { + this._previewCursorVisible = false; document.addEventListener("keydown", this.marqueeCommand); } @@ -176,8 +187,23 @@ export class CollectionFreeFormView extends CollectionViewBase { marqueeCommand = (e: KeyboardEvent) => { if (e.key == "Backspace") { this.marqueeSelect().map(d => this.props.removeDocument(d)); + this.clearMarquee(); } if (e.key == "c") { + let p = this.getTransform().transformPoint(this._downX, this._downY); + let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); + let selected = this.marqueeSelect().map(m => m); + this.marqueeSelect().map(d => this.props.removeDocument(d)); + //setTimeout(() => { + this.props.CollectionView.addDocument(Documents.FreeformDocument(selected.map(d => { + d.SetNumber(KeyStore.X, d.GetNumber(KeyStore.X, 0) - p[0] - 400); + d.SetNumber(KeyStore.Y, d.GetNumber(KeyStore.Y, 0) - p[1] - 400); + d.SetNumber(KeyStore.Page, this.props.Document.GetNumber(KeyStore.Page, 0)); + d.SetText(KeyStore.Title, "" + d.GetNumber(KeyStore.Width, 0) + " " + d.GetNumber(KeyStore.Height, 0)); + return d; + }), { x: p[0], y: p[1], panx: 0, pany: 0, width: 800, height: 800, title: "a nested collection" })); + // }, 100); + this.clearMarquee(); } } diff --git a/src/server/database.ts b/src/server/database.ts index 07c5819ab..f3c1c9427 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -16,12 +16,12 @@ export class Database { }) } - public update(id: string, value: any) { + public update(id: string, value: any, callback: () => void) { if (this.db) { let collection = this.db.collection('documents'); collection.update({ _id: id }, { $set: value }, { upsert: true - }); + }, callback); } } diff --git a/src/server/index.ts b/src/server/index.ts index 0d0b65b22..83fa84746 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -173,8 +173,9 @@ function getFields([ids, callback]: [string[], (result: any) => void]) { } function setField(socket: Socket, newValue: Transferable) { - Database.Instance.update(newValue._id, newValue) - socket.broadcast.emit(MessageStore.SetField.Message, newValue) + Database.Instance.update(newValue._id, newValue, () => { + socket.broadcast.emit(MessageStore.SetField.Message, newValue); + }) } server.listen(serverPort); -- cgit v1.2.3-70-g09d2