From 3213d828b4386eabc2ee19b47279d0053958ea2a Mon Sep 17 00:00:00 2001 From: Jude Date: Sun, 24 Feb 2019 15:27:27 -0500 Subject: why doesn't this work --- src/client/views/collections/CollectionView.tsx | 6 ++++++ 1 file changed, 6 insertions(+) (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 90080ab43..35ebb5687 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -11,6 +11,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView"; import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; +import { CollectionTreeView } from "./CollectionTreeView"; @@ -19,6 +20,7 @@ export enum CollectionViewType { Freeform, Schema, Docking, + Tree } export const COLLECTION_BORDER_WIDTH = 2; @@ -91,6 +93,10 @@ export class CollectionView extends React.Component { return () + case CollectionViewType.Tree: + return () default: return
} -- cgit v1.2.3-70-g09d2 From 93c5e7c323113bf8beeb6207ba22fbbb4ab71796 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Sun, 24 Feb 2019 17:03:19 -0500 Subject: Fixed stuff from the merge --- src/client/views/DocumentManager.tsx | 37 +++++++++++----------- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/CollectionViewBase.tsx | 6 ++-- src/client/views/nodes/DocumentView.tsx | 6 ++-- 4 files changed, 27 insertions(+), 24 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx index ab54a7955..35064d830 100644 --- a/src/client/views/DocumentManager.tsx +++ b/src/client/views/DocumentManager.tsx @@ -4,8 +4,9 @@ import { observable, action } from 'mobx'; import { DocumentView } from './nodes/DocumentView'; import { Document } from "../../fields/Document" import { CollectionFreeFormView } from './collections/CollectionFreeFormView'; -import { KeyStore } from '../../fields/Key'; +import { KeyStore } from '../../fields/KeyStore'; import { CollectionViewBase } from './collections/CollectionViewBase'; +import { CollectionViewType, CollectionView } from './collections/CollectionView'; export class DocumentManager { @@ -60,7 +61,7 @@ export class DocumentManager { //gets document view that is in a freeform canvas collection DocumentManager.Instance.DocumentViews.map(view => { let doc = view.props.Document; - if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) { + if (view.props.ContainingCollectionView && view.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { if (Object.is(doc, toFind)) { toReturn = view; return; @@ -88,16 +89,13 @@ export class DocumentManager { let scale: number; let XView: number; let YView: number; - let width: number; - let height: number; //if the view exists in a freeform collection - if (docView && docView.MainContent.current) { - width = docView.MainContent.current.clientWidth - height = docView.MainContent.current.clientHeight + if (docView) { + let { width, height } = docView.size(); //base case: parent of parent does not exist - if (docView.props.ContainingCollectionView == null) { + if (!docView.props.ContainingCollectionView) { scale = docView.props.ScreenToLocalTransform().Scale let doc = docView.props.Document; @@ -105,34 +103,32 @@ export class DocumentManager { XView = (-doc.GetNumber(KeyStore.X, 0) * scale) + (window.innerWidth / 2) - (width * scale / 2) YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) + (window.innerHeight / 2) - (height * scale / 2) //set x and y view of parent - if (docView instanceof CollectionFreeFormView) { + if (docView instanceof CollectionView) { DocumentManager.Instance.setViewportXY(docView, XView, YView) } } //parent is not main, parent is centered and calls itself else { - if (docView.props.ContainingCollectionView.props.ContainingDocumentView && docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current) { + if (true) { //view of parent - let tempCollectionView = docView.props.ContainingCollectionView.props.ContainingDocumentView + let { width: parentWidth, height: parentHeight } = docView.props.ContainingCollectionView.props.documentSize(); + let scale = docView.props.ContainingCollectionView.props.ScreenToLocalTransform().Scale; let doc = docView.props.Document - let parentWidth = docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current.clientWidth - let parentHeight = docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current.clientHeight //TODO: make sure to test if the parent view is a freeform view. if not, just skip to the next level - if (docView.props.ContainingCollectionView instanceof CollectionFreeFormView) { + if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { //scale of parent - scale = tempCollectionView.props.ScreenToLocalTransform().Scale XView = (-doc.GetNumber(KeyStore.X, 0) * scale) + (parentWidth / 2) - (width * scale / 2); YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) + (parentHeight / 2) - (height * scale / 2); // //node.Parent.setViewportXY(XView, YView); DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.DocumentForCollection); + return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.Document); } } else { - return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.DocumentForCollection) + // return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.Document) } } } @@ -143,9 +139,12 @@ export class DocumentManager { } @action - private setViewportXY(collection: CollectionFreeFormView, x: number, y: number) { + private setViewportXY(collection: CollectionView, x: number, y: number) { + if (collection.collectionViewType !== CollectionViewType.Freeform) { + return; + } console.log("viewport is setting") - let doc = collection.props.DocumentForCollection; + let doc = collection.props.Document; doc.SetNumber(KeyStore.PanX, x); doc.SetNumber(KeyStore.PanY, y); } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 90080ab43..7f1390ae2 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -28,7 +28,7 @@ export class CollectionView extends React.Component { public static LayoutString(fieldKey: string = "DataKey") { return ``; } public active = () => { diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 0658c8af0..948472275 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -6,10 +6,11 @@ import { KeyStore } from "../../../fields/KeyStore"; import { Opt, FieldWaiting } from "../../../fields/Field"; import { undoBatch } from "../../util/UndoManager"; import { DragManager } from "../../util/DragManager"; -import { DocumentView } from "../nodes/DocumentView"; +import { DocumentView, JsxArgs } from "../nodes/DocumentView"; import { Documents, DocumentOptions } from "../../documents/Documents"; import { Key } from "../../../fields/Key"; import { Transform } from "../../util/Transform"; +import { CollectionView } from "./CollectionView"; export interface CollectionViewProps { fieldKey: Key; @@ -18,13 +19,14 @@ export interface CollectionViewProps { isSelected: () => boolean; isTopMost: boolean; select: (ctrlPressed: boolean) => void; + documentSize: () => { width: number, height: number }; bindings: any; } export interface SubCollectionViewProps extends CollectionViewProps { active: () => boolean; addDocument: (doc: Document) => void; removeDocument: (doc: Document) => boolean; - CollectionView: any; + CollectionView: CollectionView; } export class CollectionViewBase extends React.Component { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d8e2f3401..40cf8d9e2 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -21,6 +21,7 @@ import "./DocumentView.scss"; import React = require("react"); import { DocumentManager } from "../DocumentManager"; import { TextField } from "../../../fields/TextField"; +import { Utils } from "../../../Utils"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? export interface DocumentViewProps { @@ -104,6 +105,7 @@ export class DocumentView extends React.Component { @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array()); } screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect(); + size = (): { width: number, height: number } => this._mainCont.current ? { width: this._mainCont.current.clientWidth, height: this._mainCont.current.clientHeight } : { width: 0, height: 0 }; onPointerDown = (e: React.PointerEvent): void => { this._downX = e.clientX; @@ -182,7 +184,6 @@ export class DocumentView extends React.Component { //TODO Monika @action Center = (e: React.MouseEvent): void => { - DocumentManager.Instance.centerNode(this.props.Document) DocumentManager.Instance.centerNode(this) } @@ -261,7 +262,8 @@ export class DocumentView extends React.Component { this._documentBindings = { ...this.props, isSelected: this.isSelected, - select: this.select + select: this.select, + documentSize: this.size }; for (const key of this.layoutKeys) { this._documentBindings[key.Name + "Key"] = key; // this maps string values of the form Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data -- cgit v1.2.3-70-g09d2 From fe05db6c34d54e27ceeb853da5718aca4c52dcae Mon Sep 17 00:00:00 2001 From: madelinegr Date: Sun, 24 Feb 2019 23:16:55 -0500 Subject: look it works --- .../views/collections/CollectionTreeView.tsx | 98 ++++++++++++++++++++-- src/client/views/collections/CollectionView.tsx | 2 - src/client/views/nodes/DocumentView.tsx | 1 + 3 files changed, 92 insertions(+), 9 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 9cead9558..745b06c46 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -3,19 +3,103 @@ import { CollectionViewBase } from "./CollectionViewBase"; import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; +import React = require("react") +import { TextField } from "../../../fields/TextField"; +import { BasicField } from "../../../fields/BasicField"; +import { assertParenthesizedExpression } from "babel-types"; +import { observable, action } from "mobx"; + +export interface TreeViewProps { + document: Document; +} @observer -export class CollectionTreeView extends CollectionViewBase { +/** + * Component that takes in a document prop and a boolean whether it's collapsed or not. + */ +class TreeView extends React.Component { + + @observable + collapsed: boolean = false; + + /** + * Renders a single child document. If this child is a collection, it will call renderTreeView again. Otherwise, it will just append a list element. + * @param document The document to render. + */ + renderChild(document: Document) { + var children = document.GetT>(KeyStore.Data, ListField); + let title = document.GetT(KeyStore.Title, TextField); + + // if the title hasn't loaded, immediately return the div + if (!title || title === "") { + return
; + } + + // otherwise, check if it's a collection. + else if (children && children !== "") { + // if it's not collapsed, then render the full TreeView. + if (!this.collapsed) { + return ( +
  • this.collapsed = true)} > + {title.Data} +
      + +
    +
  • + ); + } else { + return
  • this.collapsed = false)}>{title.Data}
  • + } + } + + // finally, if it's a normal document, then render it as such. + else { + return
  • {title.Data}
  • ; + } + } + + render() { + var children = this.props.document.GetT>(KeyStore.Data, ListField); + + if (children && children !== "") { + return (
    + {children.Data.map(value => this.renderChild(value))} +
    ) + // let results: JSX.Element[] = []; + + // // append a list item for each child in the collection + // children.Data.forEach((value) => { + // results.push(this.renderChild(value)); + // }) - test = () => { - var children = this.props.Document.GetT>(KeyStore.Data, ListField); - if (children != null) { - console.log("\nNumber of Children: " + children); + // return results; + } else { + return
    ; } - return "HELLO WORLD"; } +} + + +@observer +export class CollectionTreeView extends CollectionViewBase { render() { - return { test }; + let titleStr = ""; + let title = this.props.Document.GetT(KeyStore.Title, TextField); + if (title && title !== "") { + titleStr = title.Data; + } + return ( +
    +

    {titleStr}

    +
      + +
    +
    + ); } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 35ebb5687..37fe43ab3 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -13,8 +13,6 @@ import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; import { CollectionTreeView } from "./CollectionTreeView"; - - export enum CollectionViewType { Invalid, Freeform, diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ad1328e5d..f06ea632c 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -189,6 +189,7 @@ export class DocumentView extends React.Component { ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) }) ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) }) + ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) }) ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) }) ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) SelectionManager.SelectDoc(this, e.ctrlKey); -- cgit v1.2.3-70-g09d2 From c439f11ba9695703697f7abc53a7cc2fd2d5c1a2 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 25 Feb 2019 12:38:47 -0500 Subject: fixes for dropping documents without a know height. --- src/client/documents/Documents.ts | 6 +--- src/client/views/DocumentDecorations.tsx | 23 ++++++++-------- .../views/collections/CollectionFreeFormView.tsx | 30 ++++++++++++++------ src/client/views/collections/CollectionView.tsx | 11 ++++++-- .../views/collections/CollectionViewBase.tsx | 4 +-- .../views/nodes/CollectionFreeFormDocumentView.tsx | 32 +++++----------------- src/client/views/nodes/DocumentView.tsx | 4 ++- src/client/views/nodes/FormattedTextBox.tsx | 5 +++- src/client/views/nodes/ImageBox.tsx | 13 +++++++-- src/fields/Document.ts | 2 +- src/fields/Field.ts | 3 ++ 11 files changed, 73 insertions(+), 60 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 2dfff6235..15ecfbfe6 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -112,9 +112,7 @@ export namespace Documents { imageProto.Set(KeyStore.X, new NumberField(0)); imageProto.Set(KeyStore.Y, new NumberField(0)); imageProto.Set(KeyStore.NativeWidth, new NumberField(300)); - imageProto.Set(KeyStore.NativeHeight, new NumberField(300)); imageProto.Set(KeyStore.Width, new NumberField(300)); - imageProto.Set(KeyStore.Height, new NumberField(300)); imageProto.Set(KeyStore.Layout, new TextField(CollectionView.LayoutString("AnnotationsKey"))); imageProto.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) imageProto.Set(KeyStore.BackgroundLayout, new TextField(ImageBox.LayoutString())); @@ -151,9 +149,7 @@ export namespace Documents { doc.Set(KeyStore.BackgroundLayout, new TextField(EmbeddedCaption())); doc.Set(KeyStore.OverlayLayout, new TextField(FixedCaption())); doc.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations, KeyStore.Caption])); - - let annotation = Documents.TextDocument({ title: "hello" }); - doc.Set(KeyStore.Annotations, new ListField([annotation])); + console.log("" + doc.GetNumber(KeyStore.Height, 311)); return doc; } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 2f012913d..975a125f7 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -104,25 +104,26 @@ export class DocumentDecorations extends React.Component { const rect = element.screenRect(); if (rect.width !== 0) { let doc = element.props.Document; - let width = doc.GetOrCreate(KeyStore.Width, NumberField); - let height = doc.GetOrCreate(KeyStore.Height, NumberField); + let width = doc.GetNumber(KeyStore.Width, 0); + let nwidth = doc.GetNumber(KeyStore.NativeWidth, 0); + let nheight = doc.GetNumber(KeyStore.NativeHeight, 0); + let height = doc.GetNumber(KeyStore.Height, nwidth ? nheight / nwidth * width : 0); let x = doc.GetOrCreate(KeyStore.X, NumberField); let y = doc.GetOrCreate(KeyStore.Y, NumberField); - let scale = width.Data / rect.width; - let actualdW = Math.max(width.Data + (dW * scale), 20); - let actualdH = Math.max(height.Data + (dH * scale), 20); - x.Data += dX * (actualdW - width.Data); - y.Data += dY * (actualdH - height.Data); + let scale = width / rect.width; + let actualdW = Math.max(width + (dW * scale), 20); + let actualdH = Math.max(height + (dH * scale), 20); + x.Data += dX * (actualdW - width); + y.Data += dY * (actualdH - height); var nativeWidth = doc.GetNumber(KeyStore.NativeWidth, 0); var nativeHeight = doc.GetNumber(KeyStore.NativeHeight, 0); if (nativeWidth > 0 && nativeHeight > 0) { if (Math.abs(dW) > Math.abs(dH)) actualdH = nativeHeight / nativeWidth * actualdW; - else - actualdW = nativeWidth / nativeHeight * actualdH; + else actualdW = nativeWidth / nativeHeight * actualdH; } - width.Data = actualdW; - height.Data = actualdH; + doc.SetNumber(KeyStore.Width, actualdW); + doc.SetNumber(KeyStore.Height, actualdH); } }) } diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index c40da6eaa..7cad2cc03 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -102,18 +102,30 @@ export class CollectionFreeFormView extends CollectionViewBase { e.stopPropagation(); e.preventDefault(); let coefficient = 1000; - // if (modes[e.deltaMode] == 'pixels') coefficient = 50; - // else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height?? - let transform = this.getTransform(); - let deltaScale = (1 - (e.deltaY / coefficient)); - let [x, y] = transform.transformPoint(e.clientX, e.clientY); + if (e.ctrlKey) { + var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); + var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); + const coefficient = 1000; + let deltaScale = (1 - (e.deltaY / coefficient)); + this.props.Document.SetNumber(KeyStore.NativeWidth, nativeWidth * deltaScale); + this.props.Document.SetNumber(KeyStore.NativeHeight, nativeHeight * deltaScale); + e.stopPropagation(); + e.preventDefault(); + } else { + // if (modes[e.deltaMode] == 'pixels') coefficient = 50; + // else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height?? + let transform = this.getTransform(); - let localTransform = this.getLocalTransform(); - localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y) + let deltaScale = (1 - (e.deltaY / coefficient)); + let [x, y] = transform.transformPoint(e.clientX, e.clientY); - this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale); - this.SetPan(localTransform.TranslateX, localTransform.TranslateY); + let localTransform = this.getLocalTransform(); + localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y) + + this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale); + this.SetPan(localTransform.TranslateX, localTransform.TranslateY); + } } @action diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 90080ab43..88c15da07 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -11,6 +11,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView"; import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; +import { Field } from "../../../fields/Field"; @@ -39,9 +40,13 @@ export class CollectionView extends React.Component { } @action addDocument = (doc: Document): void => { - //TODO This won't create the field if it doesn't already exist - const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array()) - value.push(doc); + if (this.props.Document.Get(this.props.fieldKey) instanceof Field) { + //TODO This won't create the field if it doesn't already exist + const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array()) + value.push(doc); + } else { + this.props.Document.SetData(this.props.fieldKey, [doc], ListField); + } } @action diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 7e269caf1..f64a48c18 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -60,7 +60,7 @@ export class CollectionViewBase extends React.Component let html = e.dataTransfer.getData("text/html"); let text = e.dataTransfer.getData("text/plain"); - if (html) { + if (html && html.indexOf(" if (item.kind === "string" && item.type.indexOf("uri") != -1) { e.dataTransfer.items[i].getAsString(function (s) { action(() => { - var img = Documents.ImageDocument(s, { ...options, nativeWidth: 300, nativeHeight: 300, width: 300, height: 300 }) + var img = Documents.ImageDocument(s, { ...options, nativeWidth: 300, width: 300, }) let docs = that.props.Document.GetT(KeyStore.Data, ListField); if (docs != FieldWaiting) { diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index d7243421a..50dc5a619 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -27,44 +27,26 @@ export class CollectionFreeFormDocumentView extends React.Component 0 && this.nativeHeight > 0) { + if (this.nativeWidth && this.nativeHeight) { this.props.Document.SetNumber(KeyStore.Height, this.nativeHeight / this.nativeWidth * w) } } - @computed - get height(): number { - return this.props.Document.GetNumber(KeyStore.Height, 0); - } - @computed - get nativeHeight(): number { - return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); - } - set height(h: number) { this.props.Document.SetData(KeyStore.Height, h, NumberField); - if (this.nativeWidth > 0 && this.nativeHeight > 0) { + if (this.nativeWidth && this.nativeHeight) { this.props.Document.SetNumber(KeyStore.Width, this.nativeWidth / this.nativeHeight * h) } } - @computed - get zIndex(): number { - return this.props.Document.GetNumber(KeyStore.ZIndex, 0); - } - set zIndex(h: number) { this.props.Document.SetData(KeyStore.ZIndex, h, NumberField) } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ad1328e5d..212697442 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -196,6 +196,7 @@ export class DocumentView extends React.Component { } @computed get mainContent() { + var val = this.props.Document.Id; return { transform: `scale(${scaling},${scaling})` }} onContextMenu={this.onContextMenu} - onPointerDown={this.onPointerDown} > + onPointerDown={this.onPointerDown} + > {this.mainContent} ) diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 60ee0b5e1..a58e1955f 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -111,10 +111,13 @@ export class FormattedTextBox extends React.Component { e.stopPropagation(); } } + onPointerWheel = (e: React.WheelEvent): void => { + e.stopPropagation(); + } render() { - var val = this.props.doc.Get(this.props.fieldKey); return (
    ) } } \ No newline at end of file diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index b5ce8b28c..4fe73fb8d 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -9,12 +9,14 @@ import { FieldWaiting } from '../../../fields/Field'; import { observer } from "mobx-react" import { observable, action } from 'mobx'; import { KeyStore } from '../../../fields/KeyStore'; +import { element } from 'prop-types'; @observer export class ImageBox extends React.Component { public static LayoutString() { return FieldView.LayoutString(ImageBox) } private _ref: React.RefObject; + private _imgRef: React.RefObject; private _downX: number = 0; private _downY: number = 0; private _lastTap: number = 0; @@ -25,12 +27,20 @@ export class ImageBox extends React.Component { 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() { } @@ -84,10 +94,9 @@ export class ImageBox extends React.Component { 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 + Image not found {this.lightbox(path)}
    ) } diff --git a/src/fields/Document.ts b/src/fields/Document.ts index 0d7d357a0..4e68b3b4d 100644 --- a/src/fields/Document.ts +++ b/src/fields/Document.ts @@ -31,7 +31,7 @@ export class Document extends Field { } public Width = () => { return this.GetNumber(KeyStore.Width, 0) } - public Height = () => { return this.GetNumber(KeyStore.Height, 0) } + public Height = () => { return this.GetNumber(KeyStore.Height, this.GetNumber(KeyStore.NativeWidth, 0) ? this.GetNumber(KeyStore.NativeHeight, 0) / this.GetNumber(KeyStore.NativeWidth, 0) * this.GetNumber(KeyStore.Width, 0) : 0) } public Scale = () => { return this.GetNumber(KeyStore.Scale, 1) } @computed diff --git a/src/fields/Field.ts b/src/fields/Field.ts index c7e0232af..d48509a47 100644 --- a/src/fields/Field.ts +++ b/src/fields/Field.ts @@ -1,6 +1,7 @@ import { Utils } from "../Utils"; import { Types } from "../server/Message"; +import { computed } from "mobx"; export function Cast(field: FieldValue, ctor: { new(): T }): Opt { if (field) { @@ -25,6 +26,8 @@ export abstract class Field { } private id: FieldId; + + @computed get Id(): FieldId { return this.id; } -- cgit v1.2.3-70-g09d2 From ad1aab1e757a2f0d8acc6038c19c54caa5b1ec48 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 25 Feb 2019 13:47:59 -0500 Subject: fixed so that docs are centered in middle of window. --- .../views/collections/CollectionDockingView.scss | 4 ++++ .../views/collections/CollectionDockingView.tsx | 7 ++++--- .../views/collections/CollectionFreeFormView.tsx | 23 +++++++++++----------- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/CollectionViewBase.tsx | 2 ++ 5 files changed, 22 insertions(+), 16 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 7c0b512a7..2706c3272 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -1,3 +1,7 @@ +.collectiondockingview-content { + height: 100%; +} + .collectiondockingview-container { position: relative; top: 0; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 2230ec14f..a0f457ef2 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -265,6 +265,7 @@ export class DockedFrameRenderer extends React.Component { @observable private _mainCont = React.createRef(); @observable private _panelWidth = 0; + @observable private _panelHeight = 0; @observable private _document: Opt; constructor(props: any) { @@ -272,8 +273,8 @@ export class DockedFrameRenderer extends React.Component { Server.GetField(this.props.documentId, action((f: Opt) => this._document = f as Document)); } - private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, 0); } - private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, 0); } + private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, this._panelWidth); } + private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, this._panelHeight); } private _contentScaling = () => { return this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); } ScreenToLocalTransform = () => { @@ -297,7 +298,7 @@ export class DockedFrameRenderer extends React.Component { ContainingCollectionView={undefined} />
    - return this._panelWidth = r.entry.width)}> + return { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}> {({ measureRef }) =>
    {content}
    }
    } diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 7cad2cc03..90eb8a44e 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -20,7 +20,6 @@ import "./CollectionFreeFormView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import React = require("react"); -import { Documents } from "../../documents/Documents"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @observer @@ -31,7 +30,6 @@ export class CollectionFreeFormView extends CollectionViewBase { private _downX: number = 0; private _downY: number = 0; - @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); } @@ -39,6 +37,8 @@ export class CollectionFreeFormView extends CollectionViewBase { @computed get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); } @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); } @computed get zoomScaling() { return this.props.Document.GetNumber(KeyStore.Scale, 1); } + @computed get centeringShiftX() { return !this.props.Document.GetNumber(KeyStore.NativeWidth, 0) ? this.props.panelWidth() / 2 : 0; } // shift so pan position is at center of window for non-overlay collections + @computed get centeringShiftY() { return !this.props.Document.GetNumber(KeyStore.NativeHeight, 0) ? this.props.panelHeight() / 2 : 0; }// shift so pan position is at center of window for non-overlay collections @undoBatch @action @@ -118,6 +118,8 @@ export class CollectionFreeFormView extends CollectionViewBase { let transform = this.getTransform(); let deltaScale = (1 - (e.deltaY / coefficient)); + if (deltaScale * this.zoomScaling < 1 && this.isAnnotationOverlay) + deltaScale = 1 / this.zoomScaling; let [x, y] = transform.transformPoint(e.clientX, e.clientY); let localTransform = this.getLocalTransform(); @@ -132,17 +134,13 @@ export class CollectionFreeFormView extends CollectionViewBase { private SetPan(panX: number, panY: number) { const newPanX = Math.max((1 - this.zoomScaling) * this.nativeWidth, Math.min(0, panX)); const newPanY = Math.max((1 - this.zoomScaling) * this.nativeHeight, Math.min(0, panY)); - this.props.Document.SetNumber(KeyStore.PanX, false && this.isAnnotationOverlay ? newPanX : panX); - this.props.Document.SetNumber(KeyStore.PanY, false && this.isAnnotationOverlay ? newPanY : panY); + this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX); + this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY); } @action onDrop = (e: React.DragEvent): void => { - const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0); - const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0); - let transform = this.getTransform(); - - var pt = transform.transformPoint(e.pageX, e.pageY); + var pt = this.getTransform().transformPoint(e.pageX, e.pageY); super.onDrop(e, { x: pt[0], y: pt[1] }); } @@ -222,13 +220,14 @@ export class CollectionFreeFormView extends CollectionViewBase { onError={(test: any) => console.log(test)} />); } - getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform()) + + getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH - this.centeringShiftX, -COLLECTION_BORDER_WIDTH - this.centeringShiftY).transform(this.getLocalTransform()) getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale); noScaling = () => 1; render() { - const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0); - const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0); + const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX; + const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY; return (
    { public static LayoutString(fieldKey: string = "DataKey") { return ``; } public active = () => { diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index f64a48c18..e53485183 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -20,6 +20,8 @@ export interface CollectionViewProps { isTopMost: boolean; select: (ctrlPressed: boolean) => void; bindings: any; + panelWidth: () => number; + panelHeight: () => number; } export interface SubCollectionViewProps extends CollectionViewProps { active: () => boolean; -- cgit v1.2.3-70-g09d2 From 39215d8999413a5e27d222c6650fc9e84c7a9ae9 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 25 Feb 2019 16:08:36 -0500 Subject: added drag/drop out of schema view --- src/client/util/DragManager.ts | 20 ++-- .../views/collections/CollectionFreeFormView.tsx | 23 ++--- .../views/collections/CollectionSchemaView.tsx | 114 ++++++++++++++++----- src/client/views/collections/CollectionView.tsx | 8 +- .../views/collections/CollectionViewBase.tsx | 14 ++- src/client/views/nodes/DocumentView.tsx | 2 +- 6 files changed, 127 insertions(+), 54 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index eb4b3aeaa..fd026992b 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -61,7 +61,7 @@ export namespace DragManager { }; } - export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options: DragOptions) { + export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options?: DragOptions) { DocumentDecorations.Instance.Hidden = true; if (!dragDiv) { dragDiv = document.createElement("div"); @@ -87,10 +87,12 @@ export namespace DragManager { dragDiv.appendChild(dragElement); let hideSource = false; - if (typeof options.hideSource === "boolean") { - hideSource = options.hideSource; - } else { - hideSource = options.hideSource(); + if (options) { + if (typeof options.hideSource === "boolean") { + hideSource = options.hideSource; + } else { + hideSource = options.hideSource(); + } } const wasHidden = ele.hidden; if (hideSource) { @@ -107,7 +109,7 @@ export namespace DragManager { const upHandler = (e: PointerEvent) => { document.removeEventListener("pointermove", moveHandler, true); document.removeEventListener("pointerup", upHandler); - FinishDrag(dragElement, e, options, dragData); + FinishDrag(dragElement, e, dragData, options); if (hideSource && !wasHidden) { ele.hidden = false; } @@ -116,7 +118,7 @@ export namespace DragManager { document.addEventListener("pointerup", upHandler); } - function FinishDrag(dragEle: HTMLElement, e: PointerEvent, options: DragOptions, dragData: { [index: string]: any }) { + function FinishDrag(dragEle: HTMLElement, e: PointerEvent, dragData: { [index: string]: any }, options?: DragOptions) { dragDiv.removeChild(dragEle); const target = document.elementFromPoint(e.x, e.y); if (!target) { @@ -130,7 +132,9 @@ export namespace DragManager { data: dragData } })); - options.handlers.dragComplete({}); + if (options) { + options.handlers.dragComplete({}); + } DocumentDecorations.Instance.Hidden = false; } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 90eb8a44e..b54d9e0cf 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -44,16 +44,13 @@ export class CollectionFreeFormView extends CollectionViewBase { @action drop = (e: Event, de: DragManager.DropEvent) => { super.drop(e, de); - const doc: DocumentView = de.data["document"]; - const xOffset = de.data["xOffset"] as number || 0; - const yOffset = de.data["yOffset"] as number || 0; - //this should be able to use translate and scale methods on an Identity transform, no? - const transform = this.getTransform(); - const screenX = de.x - xOffset; - const screenY = de.y - yOffset; - const [x, y] = transform.transformPoint(screenX, screenY); - doc.props.Document.SetNumber(KeyStore.X, x); - doc.props.Document.SetNumber(KeyStore.Y, y); + const docView: DocumentView = de.data["documentView"]; + let doc: Document = docView ? docView.props.Document : de.data["document"]; + let screenX = de.x - (de.data["xOffset"] as number || 0); + let screenY = de.y - (de.data["yOffset"] as number || 0); + const [x, y] = this.getTransform().transformPoint(screenX, screenY); + doc.SetNumber(KeyStore.X, x); + doc.SetNumber(KeyStore.Y, y); this.bringToFront(doc); } @@ -148,15 +145,15 @@ export class CollectionFreeFormView extends CollectionViewBase { } @action - bringToFront(doc: DocumentView) { + bringToFront(doc: Document) { const { fieldKey: fieldKey, Document: Document } = this.props; const value: Document[] = Document.GetList(fieldKey, []).slice(); value.sort((doc1, doc2) => { - if (doc1 === doc.props.Document) { + if (doc1 === doc) { return 1; } - if (doc2 === doc.props.Document) { + if (doc2 === doc) { return -1; } return doc1.GetNumber(KeyStore.ZIndex, 0) - doc2.GetNumber(KeyStore.ZIndex, 0); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index dc952ef82..d5b82cbb6 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -15,6 +15,8 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; +import { DragManager } from "../../util/DragManager"; +import { CollectionDockingView } from "./CollectionDockingView"; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 @@ -30,6 +32,9 @@ export class CollectionSchemaView extends CollectionViewBase { @observable _selectedIndex = 0; @observable _splitPercentage: number = 50; + + + renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { doc: rowProps.value[0], @@ -42,31 +47,55 @@ export class CollectionSchemaView extends CollectionViewBase { let contents = ( ) + let reference = React.createRef(); + let onRowMove = action((e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + + document.removeEventListener("pointermove", onRowMove); + document.removeEventListener('pointerup', onRowUp); + DragManager.StartDrag(reference.current!, { document: props.doc }); + }); + let onRowUp = action((e: PointerEvent): void => { + document.removeEventListener("pointermove", onRowMove); + document.removeEventListener('pointerup', onRowUp); + }); + let onRowDown = (e: React.PointerEvent) => { + if (e.shiftKey) { + CollectionDockingView.Instance.StartOtherDrag(reference.current!, props.doc); + e.stopPropagation(); + } else { + document.addEventListener("pointermove", onRowMove); + document.addEventListener('pointerup', onRowUp); + } + } return ( - { - let field = props.doc.Get(props.fieldKey); - if (field && field instanceof Field) { - return field.ToScriptString(); - } - return field || ""; - }} SetValue={(value: string) => { - let script = CompileScript(value); - if (!script.compiled) { - return false; - } - let field = script(); - if (field instanceof Field) { - props.doc.Set(props.fieldKey, field); - return true; - } else { - let dataField = ToField(field); - if (dataField) { - props.doc.Set(props.fieldKey, dataField); - return true; - } - } - return false; - }}> +
    + { + let field = props.doc.Get(props.fieldKey); + if (field && field instanceof Field) { + return field.ToScriptString(); + } + return field || ""; + }} SetValue={(value: string) => { + let script = CompileScript(value); + if (!script.compiled) { + return false; + } + let field = script(); + if (field instanceof Field) { + props.doc.Set(props.fieldKey, field); + return true; + } else { + let dataField = ToField(field); + if (dataField) { + props.doc.Set(props.fieldKey, dataField); + return true; + } + } + return false; + }}>
    ) } @@ -91,21 +120,49 @@ export class CollectionSchemaView extends CollectionViewBase { }; } + _startSplitPercent = 0; @action onDividerMove = (e: PointerEvent): void => { let nativeWidth = this._mainCont.current!.getBoundingClientRect(); this._splitPercentage = Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100); } + @action onDividerUp = (e: PointerEvent): void => { document.removeEventListener("pointermove", this.onDividerMove); document.removeEventListener('pointerup', this.onDividerUp); + if (this._startSplitPercent == this._splitPercentage) { + this._splitPercentage = this._splitPercentage == 1 ? 66 : 100; + } } onDividerDown = (e: React.PointerEvent) => { + this._startSplitPercent = this._splitPercentage; e.stopPropagation(); e.preventDefault(); document.addEventListener("pointermove", this.onDividerMove); document.addEventListener('pointerup', this.onDividerUp); } + @action + onExpanderMove = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + } + @action + onExpanderUp = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + document.removeEventListener("pointermove", this.onExpanderMove); + document.removeEventListener('pointerup', this.onExpanderUp); + if (this._startSplitPercent == this._splitPercentage) { + this._splitPercentage = this._splitPercentage == 100 ? 66 : 100; + } + } + onExpanderDown = (e: React.PointerEvent) => { + this._startSplitPercent = this._splitPercentage; + e.stopPropagation(); + e.preventDefault(); + document.addEventListener("pointermove", this.onExpanderMove); + document.addEventListener('pointerup', this.onExpanderUp); + } onPointerDown = (e: React.PointerEvent) => { // if (e.button === 2 && this.active) { @@ -113,8 +170,10 @@ export class CollectionSchemaView extends CollectionViewBase { // e.preventDefault(); // } else { - if (e.buttons === 1 && this.props.active()) { - e.stopPropagation(); + if (e.buttons === 1) { + if (this.props.isSelected()) { + e.stopPropagation(); + } } } } @@ -155,6 +214,8 @@ export class CollectionSchemaView extends CollectionViewBase { } ) + let handle = !this.props.active() ? (null) : ( +
    ); return (
    { @@ -190,6 +251,7 @@ export class CollectionSchemaView extends CollectionViewBase { style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)`, height: "100%" }}> {content}
    + {handle}
    ) } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 6d30cf365..83886f933 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -53,7 +53,13 @@ export class CollectionView extends React.Component { removeDocument = (doc: Document): boolean => { //TODO This won't create the field if it doesn't already exist const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array()) - let index = value.indexOf(doc); + let index = -1; + for (let i = 0; i < value.length; i++) { + if (value[i].Id == doc.Id) { + index = i; + break; + } + } if (index !== -1) { value.splice(index, 1) diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index e53485183..217536e2b 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -44,12 +44,16 @@ export class CollectionViewBase extends React.Component @undoBatch @action protected drop(e: Event, de: DragManager.DropEvent) { - const doc: DocumentView = de.data["document"]; - if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this.props.CollectionView) { - if (doc.props.RemoveDocument) { - doc.props.RemoveDocument(doc.props.Document); + const docView: DocumentView = de.data["documentView"]; + const doc: Document = de.data["document"]; + if (docView && docView.props.ContainingCollectionView && docView.props.ContainingCollectionView !== this.props.CollectionView) { + if (docView.props.RemoveDocument) { + docView.props.RemoveDocument(docView.props.Document); } - this.props.addDocument(doc.props.Document); + this.props.addDocument(docView.props.Document); + } else if (doc) { + this.props.removeDocument(doc); + this.props.addDocument(doc); } e.stopPropagation(); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 212697442..6fe78daee 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -124,7 +124,7 @@ export class DocumentView extends React.Component { this._contextMenuCanOpen = false; const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); let dragData: { [id: string]: any } = {}; - dragData["document"] = this; + dragData["documentView"] = this; dragData["xOffset"] = e.x - left; dragData["yOffset"] = e.y - top; DragManager.StartDrag(this._mainCont.current, dragData, { -- cgit v1.2.3-70-g09d2 From 7355089662c5cfd3cde73be50211400b8d5cdd59 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Mon, 25 Feb 2019 18:59:15 -0500 Subject: merging 2 --- package-lock.json | 8 +------- src/client/views/collections/CollectionView.tsx | 4 ---- 2 files changed, 1 insertion(+), 11 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/package-lock.json b/package-lock.json index d80d5c4f9..4f6be9f69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -147,8 +147,6 @@ "integrity": "sha512-LusnB0YhTXpBT25PXyGPQlK7leE1e41Vezq1hHEUwjfkopM1Pkv2X2Ppxqh9c+w/HZ6Udzki8AJotKNjDTGdkQ==", "requires": { "express-validator": "*" -<<<<<<< HEAD -======= } }, "@types/form-data": { @@ -157,7 +155,6 @@ "integrity": "sha512-JAMFhOaHIciYVh8fb5/83nmuO/AHwmto+Hq7a9y8FzLDcC1KCU344XDOMEmahnrTFlHjgh4L0WJFczNIX2GxnQ==", "requires": { "@types/node": "*" ->>>>>>> 292ff1a8d75f8b15f9388d2c577e09a13836d5dc } }, "@types/jquery": { @@ -381,8 +378,6 @@ "integrity": "sha512-XiYCcn/CBajrj18vLA3kO79AHr5yZTCJe2kl87ZNTRxLO14y9D0IGeGZ3xLsqhfYrJSkkVzAJV8v+bQ4nuKCRQ==", "requires": { "@types/react": "*" -<<<<<<< HEAD -======= } }, "@types/request": { @@ -394,7 +389,6 @@ "@types/form-data": "*", "@types/node": "*", "@types/tough-cookie": "*" ->>>>>>> 292ff1a8d75f8b15f9388d2c577e09a13836d5dc } }, "@types/serve-static": { @@ -13349,4 +13343,4 @@ "dev": true } } -} +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 99f76decf..03e1f1fa4 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -29,11 +29,7 @@ export class CollectionView extends React.Component { public static LayoutString(fieldKey: string = "DataKey") { return `>>>>>> 292ff1a8d75f8b15f9388d2c577e09a13836d5dc isTopMost={isTopMost} BackgroundView={BackgroundView} />`; } public active = () => { -- cgit v1.2.3-70-g09d2 From 171852260c04ba7aafd789b231d98cdaa2a7dc8d Mon Sep 17 00:00:00 2001 From: laurawilsonri Date: Mon, 25 Feb 2019 19:44:58 -0500 Subject: all but removing preview cursor works --- src/client/util/SelectionManager.ts | 3 +-- .../views/collections/CollectionFreeFormView.tsx | 28 +++++++--------------- src/client/views/collections/CollectionView.tsx | 21 +++++++++++++++- src/client/views/nodes/DocumentView.tsx | 3 ++- src/client/views/nodes/FormattedTextBox.tsx | 14 +++++------ 5 files changed, 39 insertions(+), 30 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 82767bdcd..d5d9b29b2 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -1,5 +1,4 @@ import { observable, action } from "mobx"; -import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormView"; import { DocumentView } from "../views/nodes/DocumentView"; export namespace SelectionManager { @@ -11,7 +10,7 @@ export namespace SelectionManager { SelectDoc(doc: DocumentView, ctrlPressed: boolean): void { //remove preview cursor from collection - if (doc.props.ContainingCollectionView != undefined && doc.props.ContainingCollectionView instanceof CollectionFreeFormView) { + if (doc.props.ContainingCollectionView != undefined) { doc.props.ContainingCollectionView.hidePreviewCursor(); } diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index d97710ffe..834aabd99 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -40,6 +40,8 @@ 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); } @@ -71,19 +73,12 @@ export class CollectionFreeFormView extends CollectionViewBase { !e.defaultPrevented) { document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); - //document.removeEventListener("keypress", this.onKeyDown); - //document.addEventListener("keydown", this.onKeyDown); document.removeEventListener("pointerup", this.onPointerUp); document.addEventListener("pointerup", this.onPointerUp); this._lastX = e.pageX; this._lastY = e.pageY; this._downX = e.pageX; this._downY = e.pageY; - //update downX/downY to update UI (used for preview text cursor) - this.setState({ - DownX: e.pageX, - DownY: e.pageY, - }) } } @@ -95,6 +90,7 @@ export class CollectionFreeFormView extends CollectionViewBase { if (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) { //show preview text cursor on tap this._previewCursorVisible = true; + this.props.CollectionView.showPreviewCursor(); //select is not already selected if (!this.props.isSelected()) { this.props.select(false); @@ -165,13 +161,11 @@ export class CollectionFreeFormView extends CollectionViewBase { if (!e.ctrlKey && !e.altKey && !e.shiftKey) { if (this._previewCursorVisible) { //make textbox and add it to this collection - let tr = this.props.ScreenToLocalTransform().translate(this._downX, this._downY); - let LocalX = tr.TranslateX; - let LocalY = tr.TranslateY; - let newBox = Documents.TextDocument({ width: 200, height: 100, x: LocalX, y: LocalY, title: "new" }); + let [x, y] = this.getTransform().transformPoint(this._downX, this._downY); (this._downX, this._downY); + 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.Text, e.key); + newBox.SetText(KeyStore.Data, e.key); newBox.SetNumber(KeyStore.SelectOnLoaded, 1); //remove cursor from screen @@ -267,14 +261,10 @@ export class CollectionFreeFormView extends CollectionViewBase { let cursor = null; //toggle for preview cursor -> will be on when user taps freeform - if (this._previewCursorVisible) { + if (this._previewCursorVisible && this.props.CollectionView.isFocusOn) { //get local position and place cursor there! - //let { LocalX, LocalY } = this.props.ContainingDocumentView!.TransformToLocalPoint(this._downX, this._downY); - let tr = this.props.ScreenToLocalTransform().translate(this._downX, this._downY); - let LocalX = tr.TranslateX; - let LocalY = tr.TranslateY; - //let [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); - cursor =
    I
    + let [x, y] = this.getTransform().transformPoint(this._downX, this._downY); + cursor =
    I
    } const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 90080ab43..57d876996 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -1,4 +1,4 @@ -import { action, computed } from "mobx"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { ListField } from "../../../fields/ListField"; @@ -11,6 +11,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView"; import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; +var ReactDOM = require('react-dom'); @@ -26,6 +27,8 @@ export const COLLECTION_BORDER_WIDTH = 2; @observer export class CollectionView extends React.Component { + private _focusOn: boolean = false; + public static LayoutString(fieldKey: string = "DataKey") { return ` { return false } + + + @computed + get isFocusOn() { return this._focusOn; } + + @action + showPreviewCursor() { + this._focusOn = true; + } + + @action + hidePreviewCursor() { + this._focusOn = false; + } + get collectionViewType(): CollectionViewType { let Document = this.props.Document; let viewField = Document.GetT(KeyStore.ViewType, NumberField); @@ -76,6 +94,7 @@ export class CollectionView extends React.Component { Document.SetData(KeyStore.ViewType, type, NumberField); } + render() { let viewType = this.collectionViewType; switch (viewType) { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 914182efa..bb6c8d13a 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -120,7 +120,7 @@ export class DocumentView extends React.Component { } if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) { //remove preview cursor from collection - if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView instanceof CollectionFreeFormView) { + if (this.props.ContainingCollectionView != undefined) { this.props.ContainingCollectionView.hidePreviewCursor(); } this._contextMenuCanOpen = false; @@ -208,6 +208,7 @@ export class DocumentView extends React.Component { onError={(test: any) => { console.log(test) }} /> } + render() { if (!this.props.Document) return
    diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 4a6560dc9..640c9b208 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -85,10 +85,7 @@ export class FormattedTextBox extends React.Component { history(), keymap({ "Mod-z": undo, "Mod-y": redo }), keymap(baseKeymap), - //sets the placeholder text! - this.placeholderPlugin( - this.props.doc.GetText(KeyStore.Text, "") - ) + //sets the placeholder text to what's in KeyStore.Text! ] }; @@ -113,6 +110,12 @@ export class FormattedTextBox extends React.Component { this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field))); } }) + + //if tagged to be selected when created, then select & focus + if (this.props.doc.GetNumber(KeyStore.SelectOnLoaded, 0)) { + this.props.select(); + this._editorView!.focus(); + } } componentWillUnmount() { @@ -141,9 +144,6 @@ export class FormattedTextBox extends React.Component { } } render() { - //if (this.props.doc.GetText(KeyStore.Text, "") !== ; - - return (
    Date: Mon, 25 Feb 2019 20:58:11 -0500 Subject: ALL SETgit add -A --- src/client/util/SelectionManager.ts | 5 ----- src/client/views/collections/CollectionFreeFormView.tsx | 10 +++++----- src/client/views/collections/CollectionView.tsx | 17 ----------------- src/client/views/nodes/DocumentView.tsx | 6 ++---- 4 files changed, 7 insertions(+), 31 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index d5d9b29b2..c349e7631 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -9,11 +9,6 @@ export namespace SelectionManager { @action SelectDoc(doc: DocumentView, ctrlPressed: boolean): void { - //remove preview cursor from collection - if (doc.props.ContainingCollectionView != undefined) { - doc.props.ContainingCollectionView.hidePreviewCursor(); - } - // 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 c2d2b0f7b..cd88c931b 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -90,7 +90,6 @@ export class CollectionFreeFormView extends CollectionViewBase { if (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) { //show preview text cursor on tap this._previewCursorVisible = true; - this.props.CollectionView.showPreviewCursor(); //select is not already selected if (!this.props.isSelected()) { this.props.select(false); @@ -262,17 +261,17 @@ export class CollectionFreeFormView extends CollectionViewBase { getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale); noScaling = () => 1; - //hides the preview cursor for generating new text boxes - called when other docs are selected/dragged + //when focus is lost, this will remove the preview cursor @action - hidePreviewCursor() { + onBlur = (e: React.FocusEvent): void => { this._previewCursorVisible = false; } render() { + //determines whether preview text cursor should be visible (ie when user taps this collection it should) let cursor = null; - //toggle for preview cursor -> will be on when user taps freeform - if (this._previewCursorVisible && this.props.CollectionView.isFocusOn) { + if (this._previewCursorVisible) { //get local position and place cursor there! let [x, y] = this.getTransform().transformPoint(this._downX, this._downY); cursor =
    I
    @@ -289,6 +288,7 @@ export class CollectionFreeFormView extends CollectionViewBase { onContextMenu={(e) => e.preventDefault()} onDrop={this.onDrop.bind(this)} onDragOver={this.onDragOver} + onBlur={this.onBlur} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }} tabIndex={0} ref={this.createDropTarget}> diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 6ab0f15c0..11cc6d28e 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -28,8 +28,6 @@ export const COLLECTION_BORDER_WIDTH = 2; @observer export class CollectionView extends React.Component { - private _focusOn: boolean = false; - public static LayoutString(fieldKey: string = "DataKey") { return ` { return false } - - - @computed - get isFocusOn() { return this._focusOn; } - - @action - showPreviewCursor() { - this._focusOn = true; - } - - @action - hidePreviewCursor() { - this._focusOn = false; - } - get collectionViewType(): CollectionViewType { let Document = this.props.Document; let viewField = Document.GetT(KeyStore.ViewType, NumberField); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index a7632b008..6ff75c4dc 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -113,16 +113,14 @@ 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) { - //remove preview cursor from collection - if (this.props.ContainingCollectionView != undefined) { - this.props.ContainingCollectionView.hidePreviewCursor(); - } + this._contextMenuCanOpen = false; if (this._mainCont.current != null && !this.topMost) { this._contextMenuCanOpen = false; -- 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 'src/client/views/collections/CollectionView.tsx') 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 98ade639c6ffa6cc704cc310af506973d83e494b Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Tue, 26 Feb 2019 20:44:32 -0500 Subject: what is going ON --- src/client/views/DocumentManager.tsx | 267 ++++++++++++++------- src/client/views/Main.tsx | 4 +- src/client/views/TempTreeView.tsx | 5 +- .../views/collections/CollectionDockingView.tsx | 4 +- .../views/collections/CollectionFreeFormView.tsx | 10 +- .../views/collections/CollectionSchemaView.tsx | 4 +- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/CollectionViewBase.tsx | 1 + src/client/views/nodes/DocumentView.tsx | 6 +- 9 files changed, 210 insertions(+), 93 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx index bd3c4abfd..750b7aecf 100644 --- a/src/client/views/DocumentManager.tsx +++ b/src/client/views/DocumentManager.tsx @@ -53,7 +53,27 @@ export class DocumentManager { return (toReturn); } - public getDocumentViewFreeform(toFind: Document): DocumentView | null { + // public getDocumentViewFreeform2(toFind: Document): DocumentView | null { + + // let toReturn: DocumentView | null; + // toReturn = null; + + // //gets document view that is in a freeform canvas collection + // DocumentManager.Instance.DocumentViews.map(view => { + // let doc = view.props.Document; + // if (view.props.ContainingCollectionView && view.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { + // if (Object.is(doc, toFind)) { + // console.log("finding view") + // toReturn = view; + // return; + // } + // } + // }) + + // return (toReturn); + // } + + public getCollectionView(toFind: Document): DocumentView | null { let toReturn: DocumentView | null; toReturn = null; @@ -61,7 +81,8 @@ export class DocumentManager { //gets document view that is in a freeform canvas collection DocumentManager.Instance.DocumentViews.map(view => { let doc = view.props.Document; - if (view.props.ContainingCollectionView && view.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { + if (view instanceof CollectionView) { + console.log("finding view") if (Object.is(doc, toFind)) { toReturn = view; return; @@ -72,113 +93,189 @@ export class DocumentManager { return (toReturn); } - @action - public centerNode2(doc: Document | DocumentView): any { - //console.log(doc.Title) - //gets document view that is in freeform collection - - let docView: DocumentView | null; - - if (doc instanceof Document) { - docView = DocumentManager.Instance.getDocumentViewFreeform(doc) - } - else { - docView = doc - } - - let scale: number; - let XView: number; - let YView: number; - - //if the view exists in a freeform collection - if (docView) { - let { width, height } = docView.size(); - - //base case: parent of parent does not exist - if (!docView.props.ContainingCollectionView) { - scale = docView.props.ScreenToLocalTransform().Scale - let doc = docView.props.Document; - console.log("hello") - XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2) - YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2) - //set x and y view of parent - if (docView instanceof CollectionView) { - console.log("here") - DocumentManager.Instance.setViewportXY(docView, XView, YView) - } - } - //parent is not main, parent is centered and calls itself - else { - if (true) { - //view of parent - let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) - let doc = docView.props.Document - - //TODO: make sure to test if the parent view is a freeform view. if not, just skip to the next level - if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { - //scale of parent - console.log("scale: " + scale) - XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2); - YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2); - // //node.Parent.setViewportXY(XView, YView); - DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) - } - else { return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) } - } - else { - // return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) - } - } - } - } + // @action + // public centerNode2(doc: Document | DocumentView): any { + // //console.log(doc.Title) + // //gets document view that is in freeform collection + + // let docView: DocumentView | null; + + // if (doc instanceof Document) { + // docView = DocumentManager.Instance.getDocumentViewFreeform(doc) + // } + // else { + // docView = doc + // } + + // let scale: number; + // let XView: number; + // let YView: number; + + // //if the view exists in a freeform collection + // if (docView) { + // let { width, height } = docView.size(); + + // //base case: parent of parent does not exist + // if (!docView.props.ContainingCollectionView) { + // scale = docView.props.ScreenToLocalTransform().Scale + // let doc = docView.props.Document; + // console.log("hello") + // XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2) + // YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2) + // //set x and y view of parent + // if (docView instanceof CollectionView) { + // console.log("here") + // DocumentManager.Instance.setViewportXY(docView, XView, YView) + // } + // } + // //parent is not main, parent is centered and calls itself + // else { + // if (true) { + // //view of parent + // let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) + // let doc = docView.props.Document + + // //TODO: make sure to test if the parent view is a freeform view. if not, just skip to the next level + // if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { + // //scale of parent + // console.log("scale: " + scale) + // XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2); + // YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2); + // // //node.Parent.setViewportXY(XView, YView); + // DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) + // return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) + // } + // else { return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) } + // } + // else { + // // return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) + // } + // } + // } + // } + + // @action + // public centerNode4(doc: Document | DocumentView): any { + // //console.log(doc.Title) + // //gets document view that is in freeform collection + + // console.log("things are happening") + + // let docView: DocumentView | null; + + // if (doc instanceof Document) { + // console.log(doc.Title) + // docView = DocumentManager.Instance.getDocumentViewFreeform(doc) + // } + // else { + // docView = doc + // console.log(docView.props.Document.Title) + // } + + // let scale: number; + // let XView: number; + // let YView: number; + + // //if the view exists in a freeform collection + // if (docView) { + // let { width, height } = docView.size(); + + // if (docView.props.ContainingCollectionView) { + // //view of parent + // let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) + // let doc = docView.props.Document + + // if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { + // //scale of parent + // XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2); + // YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2); + // DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) + // return DocumentManager.Instance.centerNode4(docView.props.ContainingCollectionView.props.Document) + // } + // else { return DocumentManager.Instance.centerNode4(docView.props.ContainingCollectionView.props.Document) } + // } + // } + // } @action - public centerNode(doc: Document | DocumentView): any { + public centerNode(doc: Document | DocumentView, x: number, y: number): any { //console.log(doc.Title) - //gets document view that is in freeform collection - + //gets document view that is in freeform collection let docView: DocumentView | null; if (doc instanceof Document) { - docView = DocumentManager.Instance.getDocumentViewFreeform(doc) + console.log(doc.Title) + docView = DocumentManager.Instance.getDocumentView(doc) } else { docView = doc + console.log(docView.props.Document.Title) } let scale: number; let XView: number; let YView: number; - //if the view exists in a freeform collection if (docView) { let { width, height } = docView.size(); + let scale = docView.props.Document.GetNumber(KeyStore.Scale, 1) + let doc = docView.props.Document - //parent is not main, parent is centered and calls itself - if (docView.props.ContainingCollectionView) { - //view of parent - let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) - let doc = docView.props.Document - - if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { - //scale of parent - XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2); - YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2); - DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.Document) - } - else { return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.Document) } + if (x && y) { + XView = (-x * scale) - (width * scale / 2); + YView = (-y * scale) - (height * scale / 2); + DocumentManager.Instance.setViewportXY(docView, XView, YView) } + } } + // @action + // public centerNode3(doc: Document | DocumentView): any { + // //console.log(doc.Title) + // //gets document view that is in freeform collection + + // let docView: DocumentView | null; + + // if (doc instanceof Document) { + // docView = DocumentManager.Instance.getDocumentViewFreeform(doc) + // } + // else { + // docView = doc + // } + + // let scale: number; + // let XView: number; + // let YView: number; + + // //if the view exists in a freeform collection + // if (docView) { + // let { width, height } = docView.size(); + + // //parent is not main, parent is centered and calls itself + // if (docView.props.ContainingCollectionView) { + // //view of parent + // let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) + // let doc = docView.props.Document + + // if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { + // //scale of parent + // XView = doc.GetNumber(KeyStore.X, 0) - width / 2 + // YView = doc.GetNumber(KeyStore.Y, 0) - height / 2 + // // console.log("X location: " + XView) + // // console.log("Y location: " + YView) + // DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) + // return DocumentManager.Instance.centerNode3(docView.props.ContainingCollectionView.props.Document) + // } + // else { return DocumentManager.Instance.centerNode3(docView.props.ContainingCollectionView.props.Document) } + // } + // } + // } + @action - private setViewportXY(collection: CollectionView, x: number, y: number) { - if (collection.collectionViewType !== CollectionViewType.Freeform) { - return - } + private setViewportXY(collection: DocumentView, x: number, y: number) { + console.log("setting") let doc = collection.props.Document; doc.SetNumber(KeyStore.PanX, x); doc.SetNumber(KeyStore.PanY, y); diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 64bcbc24f..da78dcfba 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -131,7 +131,9 @@ Documents.initProtos(() => { PanelWidth={() => 0} PanelHeight={() => 0} isTopMost={true} - ContainingCollectionView={undefined} /> + ContainingCollectionView={undefined} + focus={(doc, x, y) => { }} + /> diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx index f852224e9..bd73ef887 100644 --- a/src/client/views/TempTreeView.tsx +++ b/src/client/views/TempTreeView.tsx @@ -5,6 +5,7 @@ import { Document } from "../../fields/Document"; import { ListField } from "../../fields/ListField"; import "./TempTreeView.scss" import { DocumentManager } from "./DocumentManager"; +import { KeyStore } from "../../fields/KeyStore"; @observer @@ -15,7 +16,9 @@ export class TempTreeView extends React.Component { let view = DocumentManager.Instance.getDocumentView(doc); if (view != null) { - DocumentManager.Instance.centerNode(view); + // DocumentManager.Instance.centerNode(view); + doc = view.props.Document + view.props.focus(doc, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0)) } } diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 5393ac06e..9c1f1a56d 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -298,7 +298,9 @@ export class DockedFrameRenderer extends React.Component { PanelHeight={this._nativeHeight} ScreenToLocalTransform={this.ScreenToLocalTransform} isTopMost={true} - ContainingCollectionView={undefined} /> + ContainingCollectionView={undefined} + focus={(doc: Document, x: number, y: number) => { }} + />
    return { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}> diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index ac14811a5..fe2fc42ad 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -21,6 +21,7 @@ import "./CollectionFreeFormView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import React = require("react"); +import { DocumentManager } from "../DocumentManager"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @observer @@ -191,7 +192,14 @@ export class CollectionFreeFormView extends CollectionViewBase { ContentScaling={this.noScaling} PanelWidth={doc.Width} PanelHeight={doc.Height} - ContainingCollectionView={this.props.CollectionView} />); + ContainingCollectionView={this.props.CollectionView} + focus={(doc: Document, x: number, y: number) => { + //set pan of colleciton freeform and then call parent + console.log("calling...") + DocumentManager.Instance.centerNode(doc, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0)) + this.props.focus(this.props.Document, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0)) + }} + />); }) } return null; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 38217d7c4..4eaf585ce 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -211,7 +211,9 @@ export class CollectionSchemaView extends CollectionViewBase { ContentScaling={this.getContentScaling} PanelWidth={this.getPanelWidth} PanelHeight={this.getPanelHeight} - ContainingCollectionView={this.props.CollectionView} /> + ContainingCollectionView={this.props.CollectionView} + focus={(doc, x, y) => this.props.focus(this.props.Document, x, y)} + />
    }
    diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 03e1f1fa4..e6a8d2448 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -30,7 +30,7 @@ export class CollectionView extends React.Component { public static LayoutString(fieldKey: string = "DataKey") { return ``; + isTopMost={isTopMost} BackgroundView={BackgroundView} focus={focus}/>`; } public active = () => { var isSelected = this.props.isSelected(); diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index e38258e0b..d9e43c0dc 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -23,6 +23,7 @@ export interface CollectionViewProps { bindings: any; panelWidth: () => number; panelHeight: () => number; + focus: (doc: Document, x: number, y: number) => void; } export interface SubCollectionViewProps extends CollectionViewProps { active: () => boolean; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 21f64ef35..90699cd2e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -36,6 +36,7 @@ export interface DocumentViewProps { ContentScaling: () => number; PanelWidth: () => number; PanelHeight: () => number; + focus: (doc: Document, x: number, y: number) => void; } export interface JsxArgs extends DocumentViewProps { Keys: { [name: string]: Key } @@ -184,7 +185,7 @@ export class DocumentView extends React.Component { //TODO Monika @action Center = (e: React.MouseEvent): void => { - DocumentManager.Instance.centerNode(this) + this.props.focus(this.props.Document, this.props.Document.GetNumber(KeyStore.X, 0), this.props.Document.GetNumber(KeyStore.Y, 0)) } @action @@ -265,7 +266,8 @@ export class DocumentView extends React.Component { ...this.props, isSelected: this.isSelected, select: this.select, - documentSize: this.size + documentSize: this.size, + focus: this.props.focus }; for (const key of this.layoutKeys) { this._documentBindings[key.Name + "Key"] = key; // this maps string values of the form Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data -- cgit v1.2.3-70-g09d2 From f90b7ca17a9f45aa6c47f1d7a37d09af4d44d2ad Mon Sep 17 00:00:00 2001 From: madelinegr Date: Wed, 27 Feb 2019 00:38:39 -0500 Subject: kvp almost done --- .../views/collections/CollectionFreeFormView.tsx | 6 + src/client/views/collections/CollectionView.tsx | 2 + src/client/views/nodes/DocumentView.tsx | 16 +++ src/client/views/nodes/KeyValuePane.scss | 0 src/client/views/nodes/KeyValuePane.tsx | 124 +++++++++++++++++++++ 5 files changed, 148 insertions(+) create mode 100644 src/client/views/nodes/KeyValuePane.scss create mode 100644 src/client/views/nodes/KeyValuePane.tsx (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 12909c151..ded1e3785 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -163,6 +163,11 @@ export class CollectionFreeFormView extends CollectionViewBase { }); } + @action + addKVP(doc: Document) { + let fields = doc.fields; + // aefawefwaef + } @computed get backgroundLayout(): string | undefined { let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField); @@ -241,6 +246,7 @@ export class CollectionFreeFormView extends CollectionViewBase { {this.backgroundView} {this.views} +