From c835f47a32336c12e6ad7497b72694bb06dc2487 Mon Sep 17 00:00:00 2001 From: laurawilsonri Date: Sat, 16 Feb 2019 15:34:20 -0500 Subject: added blinking preview text cursor on click --- package.json | 2 ++ 1 file changed, 2 insertions(+) (limited to 'package.json') diff --git a/package.json b/package.json index 6697b5f47..f94a8712d 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "@types/webpack": "^4.4.24", "express": "^4.16.4", "flexlayout-react": "^0.3.3", + "font-awesome": "^4.7.0", "golden-layout": "^1.5.9", "mobx": "^5.9.0", "mobx-react": "^5.3.5", @@ -67,6 +68,7 @@ "prosemirror-view": "^1.7.1", "react": "^16.5.2", "react-dom": "^16.7.0", + "react-fontawesome": "^1.6.1", "react-golden-layout": "^1.0.6", "react-image-lightbox": "^5.1.0", "react-jsx-parser": "^1.13.0", -- cgit v1.2.3-70-g09d2 From 498f915675c1a7e6a3c3b332a2ecc77222bb4785 Mon Sep 17 00:00:00 2001 From: laurawilsonri Date: Tue, 26 Feb 2019 17:46:27 -0500 Subject: removed a bunch of stuff --- build/index.html | 2 - package-lock.json | 71 ++++++++++++++++++++++ package.json | 5 +- src/PreviewTextCursor.tsx | 15 ----- src/client/util/SelectionManager.ts | 1 - .../views/collections/CollectionFreeFormView.tsx | 8 --- src/client/views/collections/CollectionView.tsx | 1 - src/client/views/nodes/DocumentView.tsx | 2 - src/client/views/nodes/FormattedTextBox.tsx | 29 ++------- src/fields/KeyStore.ts | 3 - src/server/database.ts | 11 +--- 11 files changed, 81 insertions(+), 67 deletions(-) delete mode 100644 src/PreviewTextCursor.tsx (limited to 'package.json') diff --git a/build/index.html b/build/index.html index 5ce31e1ce..fda212af4 100644 --- a/build/index.html +++ b/build/index.html @@ -2,8 +2,6 @@ Dash Web - - diff --git a/package-lock.json b/package-lock.json index 761af7f92..fe90f7b96 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2137,6 +2137,11 @@ "sha.js": "^2.4.8" } }, + "crel": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/crel/-/crel-3.1.0.tgz", + "integrity": "sha512-VIGY44ERxx8lXVkOEfcB0A49OkjxkQNK+j+fHvoLy7GsGX1KKgAaQ+p9N0YgvQXu+X+ryUWGDeLx/fSI+w7+eg==" + }, "cross-spawn": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz", @@ -10004,6 +10009,43 @@ "prosemirror-transform": "^1.0.0" } }, + "prosemirror-dropcursor": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.1.1.tgz", + "integrity": "sha512-GeUyMO/tOEf8MXrP7Xb7UIMrfK86OGh0fnyBrHfhav4VjY9cw65mNoqHy87CklE5711AhCP5Qzfp8RL/hVKusg==", + "requires": { + "prosemirror-state": "^1.0.0", + "prosemirror-transform": "^1.1.0", + "prosemirror-view": "^1.1.0" + } + }, + "prosemirror-example-setup": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/prosemirror-example-setup/-/prosemirror-example-setup-1.0.1.tgz", + "integrity": "sha512-4NKWpdmm75Zzgq/dIrypRnkBNPx+ONKyoGF42a9g3VIVv0TWglf1CBNxt5kzCgli9xdfut/xE5B42F9DR6BLHw==", + "requires": { + "prosemirror-commands": "^1.0.0", + "prosemirror-dropcursor": "^1.0.0", + "prosemirror-gapcursor": "^1.0.0", + "prosemirror-history": "^1.0.0", + "prosemirror-inputrules": "^1.0.0", + "prosemirror-keymap": "^1.0.0", + "prosemirror-menu": "^1.0.0", + "prosemirror-schema-list": "^1.0.0", + "prosemirror-state": "^1.0.0" + } + }, + "prosemirror-gapcursor": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.0.3.tgz", + "integrity": "sha512-X+hJhr42PcHWiSWL+lI5f/UeOhXCxlBFb8M6O8aG1hssmaRrW7sS2/Fjg5jFV+pTdS1REFkmm1occh01FMdDIQ==", + "requires": { + "prosemirror-keymap": "^1.0.0", + "prosemirror-model": "^1.0.0", + "prosemirror-state": "^1.0.0", + "prosemirror-view": "^1.0.0" + } + }, "prosemirror-history": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.0.3.tgz", @@ -10014,6 +10056,15 @@ "rope-sequence": "^1.2.0" } }, + "prosemirror-inputrules": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.0.1.tgz", + "integrity": "sha512-UHy22NmwxS5WIMQYkzraDttQAF8mpP82FfbJsmKFfx6jwkR/SZa+ZhbkLY0zKQ5fBdJN7euj36JG/B5iAlrpxA==", + "requires": { + "prosemirror-state": "^1.0.0", + "prosemirror-transform": "^1.0.0" + } + }, "prosemirror-keymap": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.0.1.tgz", @@ -10023,6 +10074,17 @@ "w3c-keyname": "^1.1.8" } }, + "prosemirror-menu": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.0.5.tgz", + "integrity": "sha512-9Vrn7CC191v7FA4QrAkL8W1SrR73V3CRIYCDuk94R8oFVk4VxSFdoKVLHuvGzxZ8b5LCu3DMJfh86YW9uL4RkQ==", + "requires": { + "crel": "^3.0.0", + "prosemirror-commands": "^1.0.0", + "prosemirror-history": "^1.0.0", + "prosemirror-state": "^1.0.0" + } + }, "prosemirror-model": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.7.0.tgz", @@ -10039,6 +10101,15 @@ "prosemirror-model": "^1.0.0" } }, + "prosemirror-schema-list": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.0.2.tgz", + "integrity": "sha512-IJ4DEpUEymfO+NNA4DAgCMF39XiQqpmCoPYY3SXa1jYcVgObGpGfJlSjZYVFEpimoLI7/mLoOLDhCtpGCRhTfg==", + "requires": { + "prosemirror-model": "^1.0.0", + "prosemirror-transform": "^1.0.0" + } + }, "prosemirror-state": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.2.2.tgz", diff --git a/package.json b/package.json index bd4655816..8568a7bef 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,6 @@ "express-validator": "^5.3.1", "expressjs": "^1.0.1", "flexlayout-react": "^0.3.3", - "font-awesome": "^4.7.0", "golden-layout": "^1.5.9", "jsonwebtoken": "^8.4.0", "jsx-to-string": "^1.4.0", @@ -92,6 +91,7 @@ "passport": "^0.4.0", "passport-local": "^1.0.0", "prosemirror-commands": "^1.0.7", + "prosemirror-example-setup": "^1.0.1", "prosemirror-history": "^1.0.3", "prosemirror-keymap": "^1.0.1", "prosemirror-model": "^1.7.0", @@ -103,7 +103,6 @@ "react": "^16.5.2", "react-dimensions": "^1.3.1", "react-dom": "^16.7.0", - "react-fontawesome": "^1.6.1", "react-golden-layout": "^1.0.6", "react-image-lightbox": "^5.1.0", "react-jsx-parser": "^1.13.0", @@ -117,4 +116,4 @@ "url-loader": "^1.1.2", "uuid": "^3.3.2" } -} +} \ No newline at end of file diff --git a/src/PreviewTextCursor.tsx b/src/PreviewTextCursor.tsx deleted file mode 100644 index 6818bf28c..000000000 --- a/src/PreviewTextCursor.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React = require("react"); -import { observer } from "mobx-react"; - -@observer -export class PreviewTextCursor extends React.Component { - - render() { - return ( -
- -
- ) - }; - -} \ No newline at end of file diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index c349e7631..1a711ae64 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -8,7 +8,6 @@ export namespace SelectionManager { @action SelectDoc(doc: DocumentView, ctrlPressed: boolean): void { - // if doc is not in SelectedDocuments, add it if (!ctrlPressed) { manager.SelectedDocuments = []; diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index cd88c931b..63ecec0df 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -2,8 +2,6 @@ import { observable, action, computed } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { FieldWaiting } from "../../../fields/Field"; -import { Server } from "tls"; -import { RichTextField } from "../../../fields/RichTextField"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; import { TextField } from "../../../fields/TextField"; @@ -12,7 +10,6 @@ import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionSchemaView } from "../collections/CollectionSchemaView"; -import { CollectionTreeView } from "../collections/CollectionTreeView"; import { CollectionView } from "../collections/CollectionView"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { DocumentView } from "../nodes/DocumentView"; @@ -41,8 +38,6 @@ export class CollectionFreeFormView extends CollectionViewBase { @observable private _previewCursorVisible: boolean = false; - @computed get colFocus(): boolean { return this.props.CollectionView.isFocusOn() } - @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0) } @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0) } @computed get scale(): number { return this.props.Document.GetNumber(KeyStore.Scale, 1); } @@ -165,7 +160,6 @@ export class CollectionFreeFormView extends CollectionViewBase { @action onKeyDown = (e: React.KeyboardEvent) => { - console.log("KEY PRESSED"); //if not these keys, make a textbox if preview cursor is active! if (!e.ctrlKey && !e.altKey && !e.shiftKey) { if (this._previewCursorVisible) { @@ -174,9 +168,7 @@ export class CollectionFreeFormView extends CollectionViewBase { let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "new" }); //set text to be the typed key and get focus on text box this.props.CollectionView.addDocument(newBox); - newBox.SetText(KeyStore.Data, e.key); newBox.SetNumber(KeyStore.SelectOnLoaded, 1); - //remove cursor from screen this._previewCursorVisible = false; } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 11cc6d28e..35ac48177 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -11,7 +11,6 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView"; import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; -var ReactDOM = require('react-dom'); import { CollectionTreeView } from "./CollectionTreeView"; import { Field } from "../../../fields/Field"; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 9f80c4e3a..50dc9ddc1 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -113,14 +113,12 @@ export class DocumentView extends React.Component { } } - onPointerMove = (e: PointerEvent): void => { if (e.cancelBubble) { this._contextMenuCanOpen = false; return; } if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) { - this._contextMenuCanOpen = false; if (this._mainCont.current != null && !this.topMost) { this._contextMenuCanOpen = false; diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 63d00a310..a92821ed6 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -2,24 +2,22 @@ import { action, IReactionDisposer, reaction } from "mobx"; import { baseKeymap } from "prosemirror-commands"; import { history, redo, undo } from "prosemirror-history"; import { keymap } from "prosemirror-keymap"; +const { exampleSetup } = require("prosemirror-example-setup") import { schema } from "prosemirror-schema-basic"; -import { Transform } from "prosemirror-transform"; -import { EditorState, Transaction } from "prosemirror-state"; +import { EditorState, Transaction, } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; -import { Node } from "prosemirror-model"; import { Opt, FieldWaiting, FieldValue } from "../../../fields/Field"; import "./FormattedTextBox.scss"; import { KeyStore } from "../../../fields/KeyStore"; import React = require("react") import { RichTextField } from "../../../fields/RichTextField"; import { FieldViewProps, FieldView } from "./FieldView"; -import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; -import { observer } from "mobx-react"; -import { Schema, DOMParser } from "prosemirror-model" import { Plugin } from 'prosemirror-state' import { Decoration, DecorationSet } from 'prosemirror-view' + + // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document // // HTML Markup: { private _ref: React.RefObject; private _editorView: Opt; private _reactionDisposer: Opt; - private _lastTextState = ""; constructor(props: FieldViewProps) { super(props); @@ -58,24 +55,9 @@ export class FormattedTextBox extends React.Component { this._editorView.updateState(state); const { doc, fieldKey } = this.props; doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField); - this._lastTextState = JSON.stringify(state.toJSON); } } - //enables textboxes to be created with preexisting text or placeholder text - //this method is passed in as part of the config the editor state in componentDidMount() - placeholderPlugin(text: string) { - return new Plugin({ - props: { - decorations(state) { - let doc = state.doc - if (doc.childCount == 1 && doc.firstChild && doc.firstChild.isTextblock && doc.firstChild.content.size == 0) - return DecorationSet.create(doc, [Decoration.widget(1, document.createTextNode(text))]) - } - } - }) - } - componentDidMount() { let state: EditorState; const { doc, fieldKey } = this.props; @@ -85,8 +67,8 @@ export class FormattedTextBox extends React.Component { history(), keymap({ "Mod-z": undo, "Mod-y": redo }), keymap(baseKeymap), - //sets the placeholder text to what's in KeyStore.Text! ] + }; let field = doc.GetT(fieldKey, RichTextField); @@ -134,7 +116,6 @@ export class FormattedTextBox extends React.Component { @action onChange(e: React.ChangeEvent) { const { fieldKey, doc } = this.props; - this._lastTextState = e.target.value; doc.SetData(fieldKey, e.target.value, RichTextField); } onPointerDown = (e: React.PointerEvent): void => { diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index 6b5fafe05..662574396 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -26,10 +26,7 @@ export namespace KeyStore { export const Caption = new Key("Caption"); export const ActiveFrame = new Key("ActiveFrame"); export const DocumentText = new Key("DocumentText"); - //used for setting the text of a text document - export const Text = new Key("Text"); //determines whether doc views will be selected when they are first loaded - //should be NumberField where 0 = false and 1 = true //currently only implemented for FormattedTextView export const SelectOnLoaded = new Key("SelectOnLoaded"); } diff --git a/src/server/database.ts b/src/server/database.ts index dbf335c0a..07c5819ab 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -1,6 +1,6 @@ import { action, configure } from 'mobx'; -import * as mongodb from "mongodb" -import { ObjectID } from "mongodb" +import * as mongodb from 'mongodb'; +import { ObjectID } from 'mongodb'; import { Transferable } from './Message'; import { Utils } from '../Utils'; @@ -8,15 +8,10 @@ export class Database { public static Instance = new Database() private MongoClient = mongodb.MongoClient; private url = 'mongodb://localhost:27017/Dash'; - private db?: mongodb.Db; constructor() { this.MongoClient.connect(this.url, (err, client) => { - if (err) { - console.log(err.message); - throw err; - } this.db = client.db() }) } @@ -83,4 +78,4 @@ export class Database { public print() { console.log("db says hi!") } -} \ No newline at end of file +} -- cgit v1.2.3-70-g09d2 From 23387df535e9ab87a08196aab19de6f937ae9bba Mon Sep 17 00:00:00 2001 From: madelinegr Date: Thu, 28 Feb 2019 00:20:14 -0500 Subject: finished kvp --- package-lock.json | 21 +-- package.json | 2 +- src/client/documents/Documents.ts | 16 ++ .../views/collections/CollectionFreeFormView.tsx | 7 - src/client/views/nodes/DocumentView.tsx | 14 +- src/client/views/nodes/FieldView.tsx | 2 + src/client/views/nodes/KeyValuePair.tsx | 68 ++++++++ src/client/views/nodes/KeyValuePane.tsx | 176 +++++++++------------ src/fields/KVPField | 0 src/fields/KVPField.ts | 30 ++++ 10 files changed, 198 insertions(+), 138 deletions(-) create mode 100644 src/client/views/nodes/KeyValuePair.tsx create mode 100644 src/fields/KVPField create mode 100644 src/fields/KVPField.ts (limited to 'package.json') diff --git a/package-lock.json b/package-lock.json index d03e78a2d..75e6cae17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3285,11 +3285,6 @@ } } }, - "font-awesome": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", - "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" - }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -3399,13 +3394,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3422,8 +3415,7 @@ }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", @@ -3552,7 +3544,6 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -10434,14 +10425,6 @@ "scheduler": "^0.12.0" } }, - "react-fontawesome": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.6.1.tgz", - "integrity": "sha1-7dzhfn3HMaoJ/UoYZoimF5OhbFw=", - "requires": { - "prop-types": "^15.5.6" - } - }, "react-golden-layout": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/react-golden-layout/-/react-golden-layout-1.0.6.tgz", diff --git a/package.json b/package.json index 8568a7bef..ae7a7b25c 100644 --- a/package.json +++ b/package.json @@ -116,4 +116,4 @@ "url-loader": "^1.1.2", "uuid": "^3.3.2" } -} \ No newline at end of file +} diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index ba13cc31b..41f1c9b3f 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -13,6 +13,8 @@ import { CollectionView, CollectionViewType } from "../views/collections/Collect import { HtmlField } from "../../fields/HtmlField"; import { Key } from "../../fields/Key" import { Field } from "../../fields/Field"; +import { KeyValuePane } from "../views/nodes/KeyValuePane" +import { KVPField } from "../../fields/KVPField"; export interface DocumentOptions { x?: number; @@ -35,10 +37,12 @@ export namespace Documents { let imageProto: Document; let webProto: Document; let collProto: Document; + let kvpProto: Document; const textProtoId = "textProto"; const imageProtoId = "imageProto"; const webProtoId = "webProto"; const collProtoId = "collectionProto"; + const kvpProtoId = "kvpProto"; export function initProtos(mainDocId: string, callback: (mainDoc?: Document) => void) { Server.GetFields([collProtoId, textProtoId, imageProtoId, mainDocId], (fields) => { @@ -46,6 +50,7 @@ export namespace Documents { imageProto = fields[imageProtoId] as Document; textProto = fields[textProtoId] as Document; webProto = fields[webProtoId] as Document; + kvpProto = fields[kvpProtoId] as Document; callback(fields[mainDocId] as Document) }); } @@ -98,6 +103,12 @@ export namespace Documents { { panx: 0, pany: 0, scale: 1, layoutKeys: [KeyStore.Data] }); } + function GetKVPPrototype(): Document { + return kvpProto ? kvpProto : + kvpProto = setupPrototypeOptions(kvpProtoId, "KVP_PROTO", KeyValuePane.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] }, new URL(url), ImageField); @@ -124,6 +135,11 @@ export namespace Documents { export function DockDocument(config: string, options: DocumentOptions, id?: string) { return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Docking }, config, TextField, id) } + export function KVPDocument(document: Document, options: DocumentOptions = {}, id?: string) { + var deleg = GetKVPPrototype().MakeDelegate(id); + deleg.Set(KeyStore.Data, document); + return assignOptions(deleg, options); + } diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 29d254e56..137bcf706 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -194,12 +194,6 @@ export class CollectionFreeFormView extends CollectionViewBase { }); } - @action - addKVP(doc: Document) { - let fields = doc.fields; - //TODO: return kvpg - } - @computed get backgroundLayout(): string | undefined { let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField); if (field && field !== "") { @@ -266,7 +260,6 @@ export class CollectionFreeFormView extends CollectionViewBase { } render() { - //TODO: put KVP stuff in this function //determines whether preview text cursor should be visible (ie when user taps this collection it should) let cursor = null; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d1706c80c..23cfa6df3 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -20,13 +20,9 @@ import { KeyValuePane } from "../nodes/KeyValuePane" import { WebBox } from "../nodes/WebBox"; import "./DocumentView.scss"; import React = require("react"); +import { CollectionViewProps } from "../collections/CollectionViewBase"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? -/* - if containingcollectionview is CollectionFreeformView: - (ContainingCollectionView as CollectionFreeformView)?.addKVP -*/ - export interface DocumentViewProps { ContainingCollectionView: Opt; @@ -161,8 +157,8 @@ export class DocumentView extends React.Component { } fieldsClicked = (e: React.MouseEvent): void => { - if (this.props.ContainingCollectionView) { - (this.props.ContainingCollectionView as unknown as CollectionFreeFormView).addKVP(this.props.Document); + if (this.props.AddDocument) { + this.props.AddDocument(Documents.KVPDocument(this.props.Document)); } } fullScreenClicked = (e: React.MouseEvent): void => { @@ -190,7 +186,7 @@ export class DocumentView extends React.Component { e.preventDefault() ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) - ContextMenu.Instance.addItem({ description: "Fields", event: () => this.fieldsClicked }) + ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked }) ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) }) ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) }) ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) }) @@ -209,7 +205,7 @@ export class DocumentView extends React.Component { @computed get mainContent() { return { + + @observable + private key: Opt + + constructor(props: KeyValuePairProps) { + super(props); + Server.GetField(this.props.fieldId, + action((field: Opt) => { + if (field) { + this.key = field as Key; + } + })); + + } + + + + render() { + if (!this.key) { + return error + + } + let props: FieldViewProps = { + doc: this.props.doc, + fieldKey: this.key, + isSelected: () => false, + select: () => { }, + isTopMost: false, + bindings: {}, + selectOnLoad: false, + } + return ( + {this.key.Name} + ) + } +} \ No newline at end of file diff --git a/src/client/views/nodes/KeyValuePane.tsx b/src/client/views/nodes/KeyValuePane.tsx index 26d5ed9fd..90f5b653c 100644 --- a/src/client/views/nodes/KeyValuePane.tsx +++ b/src/client/views/nodes/KeyValuePane.tsx @@ -4,121 +4,93 @@ import 'react-image-lightbox/style.css'; // This only needs to be imported once import "./KeyValuePane.scss"; import React = require("react") import { FieldViewProps, FieldView } from './FieldView'; -import { FieldWaiting } from '../../../fields/Field'; +import { FieldWaiting, Opt, Field } from '../../../fields/Field'; import { observer } from "mobx-react" -import { observable, action } from 'mobx'; +import { observable, action, IReactionDisposer, reaction, ObservableMap } from 'mobx'; import { KeyStore } from '../../../fields/KeyStore'; +import { RichTextField } from "../../../fields/RichTextField"; import { element } from 'prop-types'; import { props } from 'bluebird'; +import { EditorView } from 'prosemirror-view'; +import { Transaction, EditorState } from 'prosemirror-state'; +import { schema } from 'prosemirror-schema-basic'; +import { keymap } from 'prosemirror-keymap'; +import { undo, redo } from 'prosemirror-history'; +import { baseKeymap } from 'prosemirror-commands'; +import { KVPField } from '../../../fields/KVPField'; +import { Document } from '../../../fields/Document'; +import { Key } from '../../../fields/Key'; +import { JSXElement } from 'babel-types'; +import { KeyValuePair } from "./KeyValuePair" @observer -export class KeyValuePane extends React.Component/**/ { +export class KeyValuePane extends React.Component { - public static LayoutString() { return FieldView.LayoutString(KeyValuePane) } - //private _ref: React.RefObject; - // private _downX: number = 0; - // private _downY: number = 0; - // private _lastTap: number = 0; - // @observable private _photoIndex: number = 0; - // @observable private _isOpen: boolean = false; + public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValuePane, fieldStr) } + private _ref: React.RefObject; + private _editorView: Opt; + private _reactionDisposer: Opt; - constructor() { + + constructor(props: FieldViewProps) { super(props); + + this._ref = React.createRef(); + } + + + + shouldComponentUpdate() { + return false; + } + + + onPointerDown = (e: React.PointerEvent): void => { + if (e.buttons === 1 && this.props.isSelected()) { + e.stopPropagation(); + } + } + onPointerWheel = (e: React.WheelEvent): void => { + e.stopPropagation(); + } + + createTable = () => { + let table: Array = [] + let ret = "waiting" + let doc = this.props.doc.GetT(KeyStore.Data, Document); + if (!doc || doc == "") { + return Loading... + } + let realDoc = doc; + + let ids: { [key: string]: string } = {}; + let protos = doc.GetAllPrototypes(); + for (const proto of protos) { + proto._proxies.forEach((val, key) => { + if (!(key in ids)) { + ids[key] = key; + } + }) + } + + let rows: JSX.Element[] = []; + for (let key in ids) { + rows.push() + } + return rows; } - // constructor(props: FieldViewProps) { - // super(props); - - // // this._ref = React.createRef(); - // // this._imgRef = React.createRef(); - // // this.state = { - // // photoIndex: 0, - // // isOpen: false, - // // }; - // } - - // @action - // onLoad = (target: any) => { - // var h = this._imgRef.current!.naturalHeight; - // var w = this._imgRef.current!.naturalWidth; - // this.props.doc.SetNumber(KeyStore.NativeHeight, this.props.doc.GetNumber(KeyStore.NativeWidth, 0) * h / w) - // } - - // componentDidMount() { - // } - - // componentWillUnmount() { - // } - - // onPointerDown = (e: React.PointerEvent): void => { - // if (Date.now() - this._lastTap < 300) { - // if (e.buttons === 1 && this.props.isSelected()) { - // e.stopPropagation(); - // this._downX = e.clientX; - // this._downY = e.clientY; - // document.removeEventListener("pointerup", this.onPointerUp); - // document.addEventListener("pointerup", this.onPointerUp); - // } - // } else { - // this._lastTap = Date.now(); - // } - // } - // @action - // onPointerUp = (e: PointerEvent): void => { - // document.removeEventListener("pointerup", this.onPointerUp); - // if (Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) { - // this._isOpen = true; - // } - // e.stopPropagation(); - // } - - // lightbox = (path: string) => { - // const images = [path, "http://www.cs.brown.edu/~bcz/face.gif"]; - // if (this._isOpen && this.props.isSelected()) { - // return ( - // this._isOpen = false - // )} - // onMovePrevRequest={action(() => - // this._photoIndex = (this._photoIndex + images.length - 1) % images.length - // )} - // onMoveNextRequest={action(() => - // this._photoIndex = (this._photoIndex + 1) % images.length - // )} - // />) - // } - // } + render() { - // let field = this.props.doc.Get(this.props.fieldKey); - // let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" : - // field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif"; - // let nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 1); - // return ( - //
- // Image not found - // {this.lightbox(path)} - //
) - console.log("bleh"); + return ( - - - - - - - - - - - - - - - - + + + + + + {this.createTable()} +
KeyFields
JillSmith
EveJackson
JohnDoe
KeyFields
) } } \ No newline at end of file diff --git a/src/fields/KVPField b/src/fields/KVPField new file mode 100644 index 000000000..e69de29bb diff --git a/src/fields/KVPField.ts b/src/fields/KVPField.ts new file mode 100644 index 000000000..a7ecc0768 --- /dev/null +++ b/src/fields/KVPField.ts @@ -0,0 +1,30 @@ +import { BasicField } from "./BasicField" +import { FieldId } from "./Field"; +import { Types } from "../server/Message"; +import { Document } from "./Document" + +export class KVPField extends BasicField { + constructor(data: Document | undefined = undefined, id?: FieldId, save: boolean = true) { + super(data == undefined ? new Document() : data, save, id); + } + + toString(): string { + return this.Data.Title; + } + + ToScriptString(): string { + return `new KVPField("${this.Data}")`; + } + + Copy() { + return new KVPField(this.Data); + } + + ToJson(): { type: Types, data: Document, _id: string } { + return { + type: Types.Text, + data: this.Data, + _id: this.Id + } + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2