From f01b842a5d6ef6b9deb9807fa0c3a8cd2c81a25a Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Fri, 26 Apr 2019 17:08:38 -0400 Subject: TreeView and others --- src/client/views/collections/CollectionView.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 675e720e2..e7bf1e121 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -7,7 +7,6 @@ import { CollectionDockingView } from './CollectionDockingView'; import { CollectionTreeView } from './CollectionTreeView'; import { ContextMenu } from '../ContextMenu'; import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils'; -import { KeyStore } from '../../../fields/KeyStore'; import { observer } from 'mobx-react'; import { undoBatch } from '../../util/UndoManager'; import { trace } from 'mobx'; @@ -29,13 +28,13 @@ export class CollectionView extends React.Component { return (null); } - get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey.Id === KeyStore.Annotations.Id; } // bcz: ? Why do we need to compare Id's? + get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey === "annotations"; } // bcz: ? Why do we need to compare Id's? onContextMenu = (e: React.MouseEvent): void => { if (!this.isAnnotationOverlay && !e.isPropagationStopped() && this.props.Document.Id !== CurrentUserUtils.MainDocId) { // 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: undoBatch(() => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform)) }); - ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema)) }); - ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree)) }); + ContextMenu.Instance.addItem({ description: "Freeform", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Freeform) }); + ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema) }); + ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree) }); } } -- cgit v1.2.3-70-g09d2 From 506af03831bf3cc002f93ad8708eafb909c0a194 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sat, 27 Apr 2019 22:27:26 -0400 Subject: Various fixes --- src/client/DocServer.ts | 24 ++++++++++++++++++---- src/client/documents/Documents.ts | 2 +- src/client/northstar/dash-nodes/HistogramBox.tsx | 2 +- src/client/views/collections/CollectionPDFView.tsx | 2 +- src/client/views/collections/CollectionSubView.tsx | 1 + .../views/collections/CollectionVideoView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/FieldView.tsx | 4 ++-- src/client/views/nodes/FormattedTextBox.tsx | 2 +- src/client/views/nodes/KeyValueBox.tsx | 2 +- src/new_fields/util.ts | 5 +++-- src/server/database.ts | 21 +++++++++++++------ src/server/index.ts | 10 +++++---- 14 files changed, 55 insertions(+), 26 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts index c7cbfce37..07997f072 100644 --- a/src/client/DocServer.ts +++ b/src/client/DocServer.ts @@ -55,12 +55,28 @@ export namespace DocServer { map[id] = cached; } } - const prom = Utils.EmitCallback(_socket, MessageStore.GetFields, requestedIds); - requestedIds.map((id, index) => _cache[id] = prom.then((fields: RefField[]) => fields[index])); + const prom = Utils.EmitCallback(_socket, MessageStore.GetRefFields, requestedIds).then(fields => { + for (const key in fields) { + const field = fields[key]; + if (field) { + fields[key] = SerializationHelper.Deserialize(field); + } + } + return fields; + }); + requestedIds.forEach((id, index) => _cache[id] = prom.then((fields: RefField[]) => fields[index])); const fields = await prom; - requestedIds.map((id, index) => map[id] = fields[index]); + requestedIds.forEach((id, index) => { + const field = fields[index]; + if (field) { + _cache[id] = field; + } else { + delete _cache[id]; + } + map[id] = field; + }); const otherFields = await Promise.all(promises); - waitingIds.map((id, index) => map[id] = otherFields[index]); + waitingIds.forEach((id, index) => map[id] = otherFields[index]); return map; } diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index c30fb21d5..2a9687bda 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -138,7 +138,7 @@ export namespace Docs { return webProto; } function CreateCollectionPrototype(): Doc { - let collProto = setupPrototypeOptions(collProtoId, "COLLECTION_PROTO", CollectionView.LayoutString("DataKey"), + let collProto = setupPrototypeOptions(collProtoId, "COLLECTION_PROTO", CollectionView.LayoutString("data"), { panX: 0, panY: 0, scale: 1, width: 500, height: 500 }); return collProto; } diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx index a9c68ccba..19d108676 100644 --- a/src/client/northstar/dash-nodes/HistogramBox.tsx +++ b/src/client/northstar/dash-nodes/HistogramBox.tsx @@ -26,7 +26,7 @@ import { Id } from "../../../new_fields/RefField"; @observer export class HistogramBox extends React.Component { - public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(HistogramBox, fieldStr); } + public static LayoutString(fieldStr: string = "data") { return FieldView.LayoutString(HistogramBox, fieldStr); } private _dropXRef = React.createRef(); private _dropYRef = React.createRef(); private _dropXDisposer?: DragManager.DragDropDisposer; diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index e73b7b4a6..99438b4e8 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -13,7 +13,7 @@ import { NumCast } from "../../../new_fields/Types"; @observer export class CollectionPDFView extends React.Component { - public static LayoutString(fieldKey: string = "DataKey") { + public static LayoutString(fieldKey: string = "data") { return FieldView.LayoutString(CollectionPDFView, fieldKey); } diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 4d090b680..2c2d74302 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -53,6 +53,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T) { @action protected async setCursorPosition(position: [number, number]) { + return; let ind; let doc = this.props.Document; let id = CurrentUserUtils.id; diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index d314e3fc0..d45be228a 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -18,7 +18,7 @@ export class CollectionVideoView extends React.Component { @observable _currentTimecode: number = 0; @observable _isPlaying: boolean = false; - public static LayoutString(fieldKey: string = "DataKey") { + public static LayoutString(fieldKey: string = "data") { return FieldView.LayoutString(CollectionVideoView, fieldKey); } private get uIButtons() { diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index e7bf1e121..b72065bca 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -13,7 +13,7 @@ import { trace } from 'mobx'; @observer export class CollectionView extends React.Component { - public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(CollectionView, fieldStr); } + public static LayoutString(fieldStr: string = "data") { return FieldView.LayoutString(CollectionView, fieldStr); } private SubView = (type: CollectionViewType, renderProps: CollectionRenderProps) => { let props = { ...this.props, ...renderProps }; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 18107e98a..dfacca204 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -314,7 +314,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { {this.childViews} - + {/* */} diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index dc36c5914..df76f7cea 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -45,8 +45,8 @@ export interface FieldViewProps { @observer export class FieldView extends React.Component { - public static LayoutString(fieldType: { name: string }, fieldStr: string = "DataKey") { - return `<${fieldType.name} {...props} fieldKey={${fieldStr}} />`; + public static LayoutString(fieldType: { name: string }, fieldStr: string = "data") { + return `<${fieldType.name} {...props} fieldKey={"${fieldStr}"} />`; } @computed diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 7a85c9dd3..96512718f 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -55,7 +55,7 @@ const RichTextDocument = makeInterface(richTextSchema); @observer export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTextBoxOverlay), RichTextDocument>(RichTextDocument) { - public static LayoutString(fieldStr: string = "DataKey") { + public static LayoutString(fieldStr: string = "data") { return FieldView.LayoutString(FormattedTextBox, fieldStr); } private _ref: React.RefObject; diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index ae39ebe2d..876a3c173 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -14,7 +14,7 @@ import { Doc, IsField } from "../../../new_fields/Doc"; export class KeyValueBox extends React.Component { private _mainCont = React.createRef(); - public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr); } + public static LayoutString(fieldStr: string = "data") { return FieldView.LayoutString(KeyValueBox, fieldStr); } @observable private _keyInput: string = ""; @observable private _valueInput: string = ""; @computed get splitPercentage() { return NumCast(this.props.Document.schemaSplitPercentage, 50); } diff --git a/src/new_fields/util.ts b/src/new_fields/util.ts index 011e8c8d9..b2299f34a 100644 --- a/src/new_fields/util.ts +++ b/src/new_fields/util.ts @@ -5,8 +5,9 @@ import { ProxyField } from "./Proxy"; import { FieldValue } from "./Types"; import { RefField, Id } from "./RefField"; import { ObjectField, Parent, OnUpdate } from "./ObjectField"; +import { action } from "mobx"; -export function setter(target: any, prop: string | symbol | number, value: any, receiver: any): boolean { +export const setter = action(function (target: any, prop: string | symbol | number, value: any, receiver: any): boolean { if (SerializationHelper.IsSerializing()) { target[prop] = value; return true; @@ -46,7 +47,7 @@ export function setter(target: any, prop: string | symbol | number, value: any, undo: () => receiver[prop] = curValue }); return true; -} +}); export function getter(target: any, prop: string | symbol | number, receiver: any): any { if (typeof prop === "symbol") { diff --git a/src/server/database.ts b/src/server/database.ts index 6b3b6797f..4775c0eeb 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -60,19 +60,28 @@ export class Database { } public getDocument(id: string, fn: (result?: Transferable) => void, collectionName = Database.DocumentsCollection) { - console.log("getDocument"); - this.db && this.db.collection(collectionName).findOne({ id: id }, (err, result) => - fn(result ? ({ id: result._id, type: result.type, data: result.data }) : undefined)); + this.db && this.db.collection(collectionName).findOne({ _id: id }, (err, result) => { + if (result) { + result.id = result._id; + delete result._id; + fn(result); + } else { + fn(undefined); + } + }); } public getDocuments(ids: string[], fn: (result: Transferable[]) => void, collectionName = Database.DocumentsCollection) { - console.log("getDocuments"); - this.db && this.db.collection(collectionName).find({ id: { "$in": ids } }).toArray((err, docs) => { + this.db && this.db.collection(collectionName).find({ _id: { "$in": ids } }).toArray((err, docs) => { if (err) { console.log(err.message); console.log(err.errmsg); } - fn(docs.map(doc => ({ id: doc._id, type: doc.type, data: doc.data }))); + fn(docs.map(doc => { + doc.id = doc._id; + delete doc._id; + return doc; + })); }); } diff --git a/src/server/index.ts b/src/server/index.ts index 10158eb96..6801b3132 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -234,16 +234,18 @@ server.on("connection", function (socket: Socket) { Utils.AddServerHandler(socket, MessageStore.CreateField, CreateField); Utils.AddServerHandler(socket, MessageStore.UpdateField, diff => UpdateField(socket, diff)); - Utils.AddServerHandler(socket, MessageStore.GetRefField, GetRefField); - Utils.AddServerHandler(socket, MessageStore.GetRefFields, GetRefFields); + Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField); + Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields); }); -function deleteFields() { - return Database.Instance.deleteAll(); +async function deleteFields() { + await Database.Instance.deleteAll(); + await Database.Instance.deleteAll('newDocuments'); } async function deleteAll() { await Database.Instance.deleteAll(); + await Database.Instance.deleteAll('newDocuments'); await Database.Instance.deleteAll('sessions'); await Database.Instance.deleteAll('users'); } -- cgit v1.2.3-70-g09d2 From a2751d16babb38cde2b86b1cb8fc5d74c15762d7 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sun, 28 Apr 2019 00:23:18 -0400 Subject: Decent amount of stuff is working --- src/client/views/Main.tsx | 2 +- src/client/views/collections/CollectionBaseView.tsx | 2 +- src/client/views/collections/CollectionPDFView.tsx | 3 ++- src/client/views/collections/CollectionVideoView.tsx | 3 ++- src/client/views/collections/CollectionView.tsx | 3 ++- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 1 + src/client/views/nodes/DocumentView.tsx | 4 ++-- src/client/views/nodes/FormattedTextBox.tsx | 3 ++- src/client/views/nodes/PDFBox.tsx | 2 +- src/new_fields/RichTextField.ts | 2 ++ src/new_fields/Types.ts | 2 +- 12 files changed, 18 insertions(+), 11 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 4a68d1c68..98c5a5306 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -165,7 +165,7 @@ export class Main extends React.Component { @action openWorkspace = async (doc: Doc, fromHistory = false) => { this.mainContainer = doc; - fromHistory || window.history.pushState(null, StrCast(doc.title), "/doc/" + doc.Id); + fromHistory || window.history.pushState(null, StrCast(doc.title), "/doc/" + doc[Id]); const col = await Cast(CurrentUserUtils.UserDocument.optionalRightCollection, Doc); // if there is a pending doc, and it has new data, show it (syip: we use a timeout to prevent collection docking view from being uninitialized) setTimeout(async () => { diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index b2fba1415..ed761d3f3 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -95,7 +95,7 @@ export class CollectionBaseView extends React.Component { //TODO This won't create the field if it doesn't already exist const value = Cast(props.Document[props.fieldKey], listSpec(Doc)); if (value !== undefined) { - if (allowDuplicates || !value.some(v => v.Id === doc.Id)) { + if (allowDuplicates || !value.some(v => v[Id] === doc[Id])) { value.push(doc); } } else { diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 99438b4e8..5a1af354a 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -8,6 +8,7 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView"; import { CollectionRenderProps, CollectionBaseView, CollectionViewType } from "./CollectionBaseView"; import { emptyFunction } from "../../../Utils"; import { NumCast } from "../../../new_fields/Types"; +import { Id } from "../../../new_fields/RefField"; @observer @@ -33,7 +34,7 @@ export class CollectionPDFView extends React.Component { } onContextMenu = (e: React.MouseEvent): void => { - 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 + 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: emptyFunction }); } } diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index d45be228a..7232ecea2 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -8,6 +8,7 @@ import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormV import { FieldView, FieldViewProps } from "../nodes/FieldView"; import { emptyFunction } from "../../../Utils"; import { NumCast } from "../../../new_fields/Types"; +import { Id } from "../../../new_fields/RefField"; @observer @@ -107,7 +108,7 @@ export class CollectionVideoView extends React.Component { } onContextMenu = (e: React.MouseEvent): void => { - 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 + 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: "VideoOptions", event: emptyFunction }); } } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index b72065bca..c2049a09a 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -10,6 +10,7 @@ import { CurrentUserUtils } from '../../../server/authentication/models/current_ import { observer } from 'mobx-react'; import { undoBatch } from '../../util/UndoManager'; import { trace } from 'mobx'; +import { Id } from '../../../new_fields/RefField'; @observer export class CollectionView extends React.Component { @@ -31,7 +32,7 @@ export class CollectionView extends React.Component { get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey === "annotations"; } // bcz: ? Why do we need to compare Id's? onContextMenu = (e: React.MouseEvent): void => { - if (!this.isAnnotationOverlay && !e.isPropagationStopped() && this.props.Document.Id !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + if (!this.isAnnotationOverlay && !e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // 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: undoBatch(() => this.props.Document.viewType = CollectionViewType.Freeform) }); ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema) }); ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree) }); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index dfacca204..dcded7648 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -257,7 +257,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { moveDocument: this.props.moveDocument, ScreenToLocalTransform: this.getTransform, isTopMost: false, - selectOnLoad: document.Id === this._selectOnLoaded, + selectOnLoad: document[Id] === this._selectOnLoaded, PanelWidth: () => Cast(document.width, "number", 0),//TODO Types These are inline functions PanelHeight: () => Cast(document.height, "number", 0), ContentScaling: returnOne, diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 376af0b36..8766eb7ea 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -20,6 +20,7 @@ const schema = createSchema({ zIndex: "number" }); +//TODO Types: The import order is wrong, so positionSchema is undefined type FreeformDocument = makeInterface<[typeof schema, typeof positionSchema]>; const FreeformDocument = makeInterface(schema, positionSchema); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index c304b6a35..3814eeb9c 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -139,7 +139,7 @@ export class DocumentView extends DocComponent(Docu } onClick = (e: React.MouseEvent): void => { - if (CurrentUserUtils.MainDocId !== this.props.Document.Id && + if (CurrentUserUtils.MainDocId !== this.props.Document[Id] && (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) { SelectionManager.SelectDoc(this, e.ctrlKey); @@ -247,7 +247,7 @@ export class DocumentView extends DocComponent(Docu ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked }); ContextMenu.Instance.addItem({ description: "Center", event: () => this.props.focus(this.props.Document) }); ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) }); - ContextMenu.Instance.addItem({ description: "Copy URL", event: () => Utils.CopyText(DocServer.prepend("/doc/" + this.props.Document.Id)) }); + ContextMenu.Instance.addItem({ description: "Copy URL", event: () => Utils.CopyText(DocServer.prepend("/doc/" + this.props.Document[Id])) }); ContextMenu.Instance.addItem({ description: "Copy ID", event: () => Utils.CopyText(this.props.Document[Id]) }); //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) }) ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 96512718f..c4c720ca9 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -22,6 +22,7 @@ import { observer } from "mobx-react"; import { InkingControl } from "../InkingControl"; import { StrCast, Cast } from "../../../new_fields/Types"; import { RichTextField } from "../../../new_fields/RichTextField"; +import { Id } from "../../../new_fields/RefField"; const { buildMenuItems } = require("prosemirror-example-setup"); const { menuBar } = require("prosemirror-menu"); @@ -108,7 +109,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe }; if (this.props.isOverlay) { - this._inputReactionDisposer = reaction(() => MainOverlayTextBox.Instance.TextDoc && MainOverlayTextBox.Instance.TextDoc.Id, + this._inputReactionDisposer = reaction(() => MainOverlayTextBox.Instance.TextDoc && MainOverlayTextBox.Instance.TextDoc[Id], () => { if (this._editorView) { this._editorView.destroy(); diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 7fbfed1c0..9f0849492 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -447,7 +447,7 @@ export class PDFBox extends DocComponent(PdfDocumen let pdfUrl = Cast(this.props.Document[this.props.fieldKey], PdfField); let xf = FieldValue(this.Document.nativeHeight, 0) / renderHeight; return
- + {({ measureRef }) =>
diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts index 0fa3cf73c..f2033d5a7 100644 --- a/src/new_fields/RichTextField.ts +++ b/src/new_fields/RichTextField.ts @@ -1,6 +1,8 @@ import { ObjectField } from "./ObjectField"; import { serializable } from "serializr"; +import { Deserializable } from "../client/util/SerializationHelper"; +@Deserializable("RichTextField") export class RichTextField extends ObjectField { @serializable(true) readonly Data: string; diff --git a/src/new_fields/Types.ts b/src/new_fields/Types.ts index 3f8eabd45..e179c2602 100644 --- a/src/new_fields/Types.ts +++ b/src/new_fields/Types.ts @@ -76,7 +76,7 @@ type WithoutList = T extends List ? R[] : T; export function FieldValue>(field: FieldResult, defaultValue: U): WithoutList; export function FieldValue(field: FieldResult): Opt; export function FieldValue(field: FieldResult, defaultValue?: T): Opt { - return field instanceof Promise ? defaultValue : field; + return (field instanceof Promise || field === undefined) ? defaultValue : field; } export interface PromiseLike { -- cgit v1.2.3-70-g09d2 From 5f8f133040918713ace577cfe82f38254ea07964 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 2 May 2019 12:19:31 -0400 Subject: library and workspace stuff. --- src/client/views/Main.tsx | 28 ++----- src/client/views/TemplateMenu.tsx | 7 +- .../views/collections/CollectionDockingView.tsx | 27 ++----- .../views/collections/CollectionTreeView.scss | 1 - .../views/collections/CollectionTreeView.tsx | 57 ++++++++++---- src/client/views/collections/CollectionView.tsx | 1 + src/client/views/nodes/DocumentView.tsx | 10 +-- .../authentication/controllers/WorkspacesMenu.css | 3 - .../authentication/controllers/WorkspacesMenu.tsx | 90 ---------------------- 9 files changed, 60 insertions(+), 164 deletions(-) delete mode 100644 src/server/authentication/controllers/WorkspacesMenu.css delete mode 100644 src/server/authentication/controllers/WorkspacesMenu.tsx (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 4e918221c..b2ca4a196 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -100,8 +100,7 @@ export class Main extends React.Component { onHistory = () => { if (window.location.pathname !== RouteStore.home) { let pathname = window.location.pathname.split("/"); - CurrentUserUtils.MainDocId = pathname[pathname.length - 1]; - DocServer.GetRefField(CurrentUserUtils.MainDocId).then(action((field: Opt) => { + DocServer.GetRefField(pathname[pathname.length - 1]).then(action((field: Opt) => { if (field instanceof Doc) { this.openWorkspace(field, true); } @@ -132,7 +131,6 @@ export class Main extends React.Component { if (!CurrentUserUtils.MainDocId) { const doc = await Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc); if (doc) { - CurrentUserUtils.MainDocId = doc[Id]; this.openWorkspace(doc); } else { this.createNewWorkspace(); @@ -148,11 +146,12 @@ export class Main extends React.Component { createNewWorkspace = async (id?: string) => { const list = Cast(CurrentUserUtils.UserDocument.data, listSpec(Doc)); if (list) { + let libraryDoc = Docs.TreeDocument([CurrentUserUtils.UserDocument], { x: 0, y: 400, title: `Library: ${CurrentUserUtils.email} ${list.length + 1}` }); + libraryDoc.excludeFromLibrary = true; let freeformDoc = Docs.FreeformDocument([], { x: 0, y: 400, title: `WS collection ${list.length + 1}` }); - var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(freeformDoc)] }] }; - let mainDoc = Docs.DockDocument([freeformDoc], JSON.stringify(dockingLayout), { title: `Workspace ${list.length + 1}` }); + var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(libraryDoc, 150), CollectionDockingView.makeDocumentConfig(freeformDoc, 600)] }] }; + let mainDoc = Docs.DockDocument([libraryDoc, freeformDoc], JSON.stringify(dockingLayout), { title: `Workspace ${list.length + 1}` }); list.push(mainDoc); - CurrentUserUtils.MainDocId = mainDoc[Id]; // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) setTimeout(() => { this.openWorkspace(mainDoc); @@ -164,6 +163,7 @@ export class Main extends React.Component { @action openWorkspace = async (doc: Doc, fromHistory = false) => { + CurrentUserUtils.MainDocId = doc[Id]; this.mainContainer = doc; fromHistory || window.history.pushState(null, StrCast(doc.title), "/doc/" + doc[Id]); const col = await Cast(CurrentUserUtils.UserDocument.optionalRightCollection, Doc); @@ -259,9 +259,7 @@ export class Main extends React.Component { /* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */ @computed get miscButtons() { - let workspacesRef = React.createRef(); let logoutRef = React.createRef(); - let toggleWorkspaces = () => runInAction(() => this._workspacesShown = !this._workspacesShown); return [ , @@ -270,24 +268,11 @@ export class Main extends React.Component {
, -
-
,
]; } - @computed - get workspaceMenu() { - let areWorkspacesShown = () => this._workspacesShown; - let toggleWorkspaces = () => runInAction(() => this._workspacesShown = !this._workspacesShown); - let workspaces = Cast(CurrentUserUtils.UserDocument.data, listSpec(Doc)); - return (!workspaces || !this.mainContainer) ? (null) : - ; - } - render() { return (
@@ -297,7 +282,6 @@ export class Main extends React.Component { {this.nodesMenu()} {this.miscButtons} - {this.workspaceMenu}
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index 7be846e05..f29d9c8a1 100644 --- a/src/client/views/TemplateMenu.tsx +++ b/src/client/views/TemplateMenu.tsx @@ -59,12 +59,9 @@ export class TemplateMenu extends React.Component { } render() { - trace(); let templateMenu: Array = []; - this.props.templates.forEach((checked, template) => { - console.log("checked + " + checked + " " + this.props.templates.get(template)); - templateMenu.push(); - }); + this.props.templates.forEach((checked, template) => + templateMenu.push()); return (
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 014773ab6..cfb1aef7d 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -19,15 +19,17 @@ import { List } from "../../../new_fields/List"; import { DocServer } from "../../DocServer"; import { listSpec } from "../../../new_fields/Schema"; import { Id, FieldId } from "../../../new_fields/RefField"; +import { faSignInAlt } from "@fortawesome/free-solid-svg-icons"; @observer export class CollectionDockingView extends React.Component { public static Instance: CollectionDockingView; - public static makeDocumentConfig(document: Doc) { + public static makeDocumentConfig(document: Doc, width?: number) { return { type: 'react-component', component: 'DocumentFrameRenderer', title: document.title, + width: width, props: { documentId: document[Id], //collectionDockingView: CollectionDockingView.Instance @@ -37,7 +39,6 @@ export class CollectionDockingView extends React.Component(); - private _fullScreen: any = null; private _flush: boolean = false; private _ignoreStateChange = ""; @@ -67,20 +68,9 @@ export class CollectionDockingView extends React.Component { - _mainCont = React.createRef(); @observable private _panelWidth = 0; @observable private _panelHeight = 0; @@ -347,10 +336,7 @@ export class DockedFrameRenderer extends React.Component { const nativeH = this.nativeHeight(); const nativeW = this.nativeWidth(); let wscale = this._panelWidth / nativeW; - if (wscale * nativeH > this._panelHeight) { - return this._panelHeight / nativeH; - } - return wscale; + return wscale * nativeH > this._panelHeight ? this._panelHeight / nativeH : wscale; } ScreenToLocalTransform = () => { @@ -364,6 +350,8 @@ export class DockedFrameRenderer extends React.Component { get previewPanelCenteringOffset() { return (this._panelWidth - this.nativeWidth() * this.contentScaling()) / 2; } get content() { + if (!this._document) + return (null); return (
@@ -385,9 +373,10 @@ export class DockedFrameRenderer extends React.Component { } render() { + let theContent = this.content; return !this._document ? (null) : { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}> - {({ measureRef }) =>
{this.content}
} + {({ measureRef }) =>
{theContent}
} ; } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 95df5edb9..ecb5f78bb 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -41,7 +41,6 @@ .coll-title { font-size: 24px; - margin-bottom: 20px; } .docContainer { diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index f148c2b2f..0520e0f88 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -9,10 +9,15 @@ import { CollectionSubView } from "./CollectionSubView"; import "./CollectionTreeView.scss"; import React = require("react"); import { Document, listSpec } from '../../../new_fields/Schema'; -import { Cast, StrCast, BoolCast } from '../../../new_fields/Types'; +import { Cast, StrCast, BoolCast, FieldValue } from '../../../new_fields/Types'; import { Doc } from '../../../new_fields/Doc'; import { Id } from '../../../new_fields/RefField'; import { Utils } from '../../../Utils'; +import { JSXElement } from 'babel-types'; +import { ContextMenu } from '../ContextMenu'; +import { undoBatch } from '../../util/UndoManager'; +import { Main } from '../Main'; +import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils'; export interface TreeViewProps { @@ -42,11 +47,14 @@ class TreeView extends React.Component { delete = () => this.props.deleteDoc(this.props.document); + get children() { + return Cast(this.props.document.data, listSpec(Doc), []).filter(doc => FieldValue(doc)); + } + @action remove = (document: Document) => { - var children = Cast(this.props.document.data, listSpec(Doc)); - if (children) { - children.splice(children.indexOf(document), 1); + if (this.children) { + this.children.splice(this.children.indexOf(document), 1); } } @@ -94,27 +102,38 @@ class TreeView extends React.Component {
); } + onWorkspaceContextMenu = (e: React.MouseEvent): void => { + if (!e.isPropagationStopped() && this.props.document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + if (!ContextMenu.Instance.getItems().some(item => item.description === "Open as Workspace")) { + ContextMenu.Instance.addItem({ description: "Open as Workspace", event: undoBatch(() => Main.Instance.openWorkspace(this.props.document)) }); + } + } + } render() { let bulletType = BulletType.List; - let childElements: JSX.Element | undefined = undefined; + let contentElement: JSX.Element | null = (null); var children = Cast(this.props.document.data, listSpec(Doc)); if (children) { // add children for a collection if (!this._collapsed) { bulletType = BulletType.Collapsible; - childElements =
    - {children.map(value => )} + contentElement =
      + {TreeView.GetChildElements(children, this.remove, this.move, this.props.copyOnDrag)}
    ; } else bulletType = BulletType.Collapsed; } - return
    + return
  • {this.renderBullet(bulletType)} {this.renderTitle()} - {childElements ? childElements : (null)} + {contentElement}
    • ; } + public static GetChildElements(docs: Doc[], remove: ((doc: Doc) => void), move: DragManager.MoveFunction, copyOnDrag: boolean) { + return docs.filter(child => !child.excludeFromLibrary).map(child => + ); + } } @observer @@ -128,21 +147,30 @@ export class CollectionTreeView extends CollectionSubView(Document) { } } + onContextMenu = (e: React.MouseEvent): void => { + if (!e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // 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: "Create Workspace", event: undoBatch(() => Main.Instance.createNewWorkspace()) }); + } + } render() { const children = this.children; let copyOnDrag = BoolCast(this.props.Document.copyDraggedItems, false); - let childrenElement = !children ? (null) : - (children.map(value => - )); + if (!children) { + return (null); + } + let testForLibrary = children && children.length === 1 && children[0] === CurrentUserUtils.UserDocument; + var subchildren = testForLibrary ? Cast(children[0].data, listSpec(Doc), children) : children; + let childElements = TreeView.GetChildElements(subchildren, this.remove, this.props.moveDocument, copyOnDrag); return (
    e.stopPropagation()} onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget}>
    StrCast(this.props.Document.title)} @@ -151,9 +179,8 @@ export class CollectionTreeView extends CollectionSubView(Document) { return true; }} />
    -
      - {childrenElement} + {childElements}
    ); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index c2049a09a..8c1442d38 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -11,6 +11,7 @@ import { observer } from 'mobx-react'; import { undoBatch } from '../../util/UndoManager'; import { trace } from 'mobx'; import { Id } from '../../../new_fields/RefField'; +import { Main } from '../Main'; @observer export class CollectionView extends React.Component { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 5588fa1ac..86d34725d 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -205,16 +205,8 @@ export class DocumentView extends DocComponent(Docu CollectionDockingView.Instance.OpenFullScreen(doc); } ContextMenu.Instance.clearItems(); - ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked }); - ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15); - } - closeFullScreenClicked = (e: React.MouseEvent): void => { - CollectionDockingView.Instance.CloseFullScreen(); - ContextMenu.Instance.clearItems(); - ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }); - ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15); + SelectionManager.DeselectAll(); } - @undoBatch @action drop = async (e: Event, de: DragManager.DropEvent) => { diff --git a/src/server/authentication/controllers/WorkspacesMenu.css b/src/server/authentication/controllers/WorkspacesMenu.css deleted file mode 100644 index b89039965..000000000 --- a/src/server/authentication/controllers/WorkspacesMenu.css +++ /dev/null @@ -1,3 +0,0 @@ -.ids:hover { - color: darkblue; -} \ No newline at end of file diff --git a/src/server/authentication/controllers/WorkspacesMenu.tsx b/src/server/authentication/controllers/WorkspacesMenu.tsx deleted file mode 100644 index 91756315d..000000000 --- a/src/server/authentication/controllers/WorkspacesMenu.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import * as React from 'react'; -import { observable, action, configure, reaction, computed, ObservableMap, runInAction } from 'mobx'; -import { observer } from "mobx-react"; -import './WorkspacesMenu.css'; -import { EditableView } from '../../../client/views/EditableView'; -import { Doc } from '../../../new_fields/Doc'; -import { StrCast } from '../../../new_fields/Types'; -import { Id } from '../../../new_fields/RefField'; - -export interface WorkspaceMenuProps { - active: Doc | undefined; - open: (workspace: Doc) => void; - new: () => void; - allWorkspaces: Doc[]; - isShown: () => boolean; - toggle: () => void; -} - -@observer -export class WorkspacesMenu extends React.Component { - constructor(props: WorkspaceMenuProps) { - super(props); - this.addNewWorkspace = this.addNewWorkspace.bind(this); - } - - @action - addNewWorkspace() { - this.props.new(); - this.props.toggle(); - } - - render() { - return ( -
    - - {this.props.allWorkspaces.map((s, i) => -
    { - e.preventDefault(); - this.props.open(s); - }} - style={{ - marginTop: 10, - color: s === this.props.active ? "red" : "black" - }} - > - {i + 1} - - StrCast(s.title)} - SetValue={(title: string): boolean => { - s.title = title; - return true; - }} - contents={s.Title} - height={20} - /> -
    - )} -
    - ); - } -} \ No newline at end of file -- cgit v1.2.3-70-g09d2