From 00a4534c535281aaecf4b47da64f1a0770e3bf68 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 4 Feb 2019 18:10:27 -0500 Subject: not working --- src/Main.tsx | 27 ++-- src/documents/Documents.ts | 3 +- src/views/collections/CollectionDockingView.tsx | 20 +-- src/views/collections/CollectionFreeFormView.tsx | 37 ++--- src/views/collections/CollectionSchemaView.tsx | 16 +- src/views/nodes/DocumentView.tsx | 188 ++++++++++++----------- src/views/nodes/FieldTextBox.tsx | 3 +- src/views/nodes/FieldView.tsx | 4 +- src/views/nodes/ImageBox.tsx | 5 +- 9 files changed, 154 insertions(+), 149 deletions(-) (limited to 'src') diff --git a/src/Main.tsx b/src/Main.tsx index 431a5db96..cbdf0ae98 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -1,18 +1,17 @@ +import { action, configure } from 'mobx'; +import "normalize.css"; import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import "./Main.scss"; -import "normalize.css" -import { Key, KeyStore as KS, KeyStore } from './fields/Key'; -import { NumberField } from './fields/NumberField'; -import { Document } from './fields/Document'; -import { configure, runInAction, action } from 'mobx'; -import { Documents } from './documents/Documents'; import { DocumentDecorations } from './DocumentDecorations'; -import { CollectionFreeFormView } from './views/collections/CollectionFreeFormView'; +import { Documents } from './documents/Documents'; +import { Document } from './fields/Document'; +import { KeyStore, KeyStore as KS } from './fields/Key'; import { ListField } from './fields/ListField'; -import { DocumentView } from './views/nodes/DocumentView'; -import { ContextMenu } from './views/ContextMenu'; +import { NumberField } from './fields/NumberField'; import { TextField } from './fields/TextField'; +import "./Main.scss"; +import { ContextMenu } from './views/ContextMenu'; +import { DocumentView, DocumentContentsView } from './views/nodes/DocumentView'; configure({ enforceActions: "observed" @@ -52,7 +51,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { schemaDocs[4].SetFieldValue(KS.Author, "Bob", TextField); schemaDocs.push(doc2); const doc7 = Documents.SchemaDocument(schemaDocs) - const docset = [doc1, doc2, doc3, doc7]; + const docset = [doc3];//[doc1, doc2, doc3, doc7]; let doc4 = Documents.CollectionDocument(docset, { x: 0, y: 400, title: "mini collection" }); @@ -71,17 +70,17 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { // mainNodes.Data.push(doc2); mainNodes.Data.push(doc4); // mainNodes.Data.push(doc3); - mainNodes.Data.push(doc5); + //mainNodes.Data.push(doc5); // mainNodes.Data.push(doc1); //mainNodes.Data.push(doc2); - mainNodes.Data.push(doc6); + //mainNodes.Data.push(doc6); mainContainer.SetField(KeyStore.Data, mainNodes); } //); ReactDOM.render((
- +
), diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts index 932abf7bc..29ef32966 100644 --- a/src/documents/Documents.ts +++ b/src/documents/Documents.ts @@ -9,6 +9,7 @@ import { CollectionSchemaView } from "../views/collections/CollectionSchemaView" import { ImageField } from "../fields/ImageField"; import { RichTextField } from "../fields/RichTextField"; import { ImageBox } from "../views/nodes/ImageBox"; +import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormView"; interface DocumentOptions { x?: number; @@ -138,7 +139,7 @@ export namespace Documents { collectionProto.SetField(KeyStore.PanY, new NumberField(0)); collectionProto.SetField(KeyStore.Width, new NumberField(300)); collectionProto.SetField(KeyStore.Height, new NumberField(300)); - collectionProto.SetField(KeyStore.Layout, new TextField('')); + collectionProto.SetField(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString())); collectionProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data])); } return collectionProto; diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx index 177e3510a..197b7df46 100644 --- a/src/views/collections/CollectionDockingView.tsx +++ b/src/views/collections/CollectionDockingView.tsx @@ -4,7 +4,7 @@ import React = require("react"); import FlexLayout from "flexlayout-react"; import { action, observable, computed } from "mobx"; import { Document } from "../../fields/Document"; -import { DocumentView } from "../nodes/DocumentView"; +import { DocumentView, DocumentContentsView } from "../nodes/DocumentView"; import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { SSL_OP_SINGLE_DH_USE } from "constants"; @@ -20,11 +20,11 @@ import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from export class CollectionDockingView extends CollectionViewBase { private static UseGoldenLayout = true; - public static LayoutString() { return ''; } + public static LayoutString() { return ''; } private _containerRef = React.createRef(); @computed private get modelForFlexLayout() { - const { fieldKey, Document: Document } = this.props; + const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); var docs = value.map(doc => { return { type: 'tabset', weight: 50, selected: 0, children: [{ type: "tab", name: doc.Title, component: doc.Id }] }; @@ -40,7 +40,7 @@ export class CollectionDockingView extends CollectionViewBase { } @computed private get modelForGoldenLayout(): any { - const { fieldKey, Document: Document } = this.props; + const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); var docs = value.map(doc => { return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } }; @@ -69,7 +69,7 @@ export class CollectionDockingView extends CollectionViewBase { @action onResize = (event: any) => { - var cur = this.props.ContainingDocumentView!.MainContent.current; + var cur = this.props.DocumentContentsContainingCollection!.MainContent.current; // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed CollectionDockingView.myLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height); @@ -92,11 +92,11 @@ export class CollectionDockingView extends CollectionViewBase { if (component === "button") { return ; } - const { fieldKey, Document: Document } = this.props; + const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); for (var i: number = 0; i < value.length; i++) { if (value[i].Id === component) { - return (); + return (); } } if (component === "text") { @@ -237,7 +237,7 @@ export class CollectionDockingView extends CollectionViewBase { container.getElement().html("
"); setTimeout(function () { ReactDOM.render(( - + // bcz: need to fill in containingdoccontnents with value of DocumentContents when created... ), document.getElementById(containingDiv) ); @@ -252,10 +252,10 @@ export class CollectionDockingView extends CollectionViewBase { render() { - const { fieldKey, Document: Document } = this.props; + const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes. - var s = this.props.ContainingDocumentView!.ScalingToScreenSpace; + var s = this.props.DocumentContentsContainingCollection != undefined ? this.props.DocumentContentsContainingCollection!.ScalingToScreenSpace : 1; var w = Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)) / s; var h = Document.GetFieldValue(KeyStore.Height, NumberField, Number(0)) / s; diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx index ab2aeee64..d0dea7a79 100644 --- a/src/views/collections/CollectionFreeFormView.tsx +++ b/src/views/collections/CollectionFreeFormView.tsx @@ -15,6 +15,7 @@ import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from @observer export class CollectionFreeFormView extends CollectionViewBase { + public static LayoutString() { return ''; } private _containerRef = React.createRef(); private _canvasRef = React.createRef(); private _nodeContainerRef = React.createRef(); @@ -36,14 +37,14 @@ export class CollectionFreeFormView extends CollectionViewBase { const xOffset = de.data["xOffset"] as number || 0; const yOffset = de.data["yOffset"] as number || 0; const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!); - let sscale = this.props.ContainingDocumentView!.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)) + let sscale = this.props.DocumentContentsContainingCollection!.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)) const screenX = de.x - xOffset; const screenY = de.y - yOffset; const docX = (screenX - translateX) / sscale / scale; const docY = (screenY - translateY) / sscale / scale; doc.x = docX; doc.y = docY; - this.bringToFront(doc); + //this.bringToFront(doc); } e.stopPropagation(); } @@ -82,11 +83,11 @@ export class CollectionFreeFormView extends CollectionViewBase { if (!e.cancelBubble) { e.preventDefault(); e.stopPropagation(); - let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace; - let x = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); - let y = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); - this.props.Document.SetFieldValue(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField); - this.props.Document.SetFieldValue(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField); + let currScale: number = this.props.DocumentContentsContainingCollection!.ScalingToScreenSpace; + let x = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); + let y = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); + this.props.DocumentForCollection.SetFieldValue(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField); + this.props.DocumentForCollection.SetFieldValue(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField); this._lastX = e.pageX; this._lastY = e.pageY; } @@ -96,7 +97,7 @@ export class CollectionFreeFormView extends CollectionViewBase { onPointerWheel = (e: React.WheelEvent): void => { e.stopPropagation(); - let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY); + let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.DocumentContentsContainingCollection!.TransformToLocalPoint(e.pageX, e.pageY); var deltaScale = (1 - (e.deltaY / 1000)) * Ss; @@ -106,9 +107,9 @@ export class CollectionFreeFormView extends CollectionViewBase { let dx = ContainerX - newContainerX; let dy = ContainerY - newContainerY; - this.props.Document.SetField(KeyStore.Scale, new NumberField(deltaScale)); - this.props.Document.SetFieldValue(KeyStore.PanX, Panxx + dx, NumberField); - this.props.Document.SetFieldValue(KeyStore.PanY, Panyy + dy, NumberField); + this.props.DocumentForCollection.SetField(KeyStore.Scale, new NumberField(deltaScale)); + this.props.DocumentForCollection.SetFieldValue(KeyStore.PanX, Panxx + dx, NumberField); + this.props.DocumentForCollection.SetFieldValue(KeyStore.PanY, Panyy + dy, NumberField); } @action @@ -118,8 +119,8 @@ export class CollectionFreeFormView extends CollectionViewBase { let fReader = new FileReader() let file = e.dataTransfer.items[0].getAsFile(); let that = this; - const panx: number = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); - const pany: number = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); + const panx: number = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); + const pany: number = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); let x = e.pageX - panx let y = e.pageY - pany @@ -129,10 +130,10 @@ export class CollectionFreeFormView extends CollectionViewBase { let doc = Documents.ImageDocument(url, { x: x, y: y }) - let docs = that.props.Document.GetFieldT(KeyStore.Data, ListField); + let docs = that.props.DocumentForCollection.GetFieldT(KeyStore.Data, ListField); if (!docs) { docs = new ListField(); - that.props.Document.SetField(KeyStore.Data, docs) + that.props.DocumentForCollection.SetField(KeyStore.Data, docs) } docs.Data.push(doc); } @@ -148,7 +149,7 @@ export class CollectionFreeFormView extends CollectionViewBase { @action bringToFront(doc: DocumentView) { - const { fieldKey, Document: Document } = this.props; + const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetListField(fieldKey, []); var topmost = value.reduce((topmost, d) => Math.max(d.GetNumberField(KeyStore.ZIndex, 0), topmost), -1000); @@ -165,7 +166,7 @@ export class CollectionFreeFormView extends CollectionViewBase { } render() { - const { fieldKey, Document: Document } = this.props; + const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetListField(fieldKey, []); const panx: number = Document.GetNumberField(KeyStore.PanX, 0); const pany: number = Document.GetNumberField(KeyStore.PanY, 0); @@ -186,7 +187,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
{value.map(doc => { - return (); + return (); })}
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx index 420a68cc9..f625b39c5 100644 --- a/src/views/collections/CollectionSchemaView.tsx +++ b/src/views/collections/CollectionSchemaView.tsx @@ -1,4 +1,4 @@ -import { DocumentContents } from "../nodes/DocumentView"; +import { DocumentContentsView } from "../nodes/DocumentView"; import React = require("react") import ReactTable, { ReactTableDefaults, CellInfo, ComponentPropsGetterRC, ComponentPropsGetterR } from "react-table"; import { observer } from "mobx-react"; @@ -14,19 +14,19 @@ import { CollectionViewBase } from "./CollectionViewBase"; @observer export class CollectionSchemaView extends CollectionViewBase { - public static LayoutString() { return ''; } + public static LayoutString() { return ''; } @observable selectedIndex = 0; renderCell = (rowProps: CellInfo) => { - if (!this.props.ContainingDocumentView) { + if (!this.props.DocumentContentsContainingCollection) { return
} let props: FieldViewProps = { doc: rowProps.value[0], fieldKey: rowProps.value[1], - documentViewContainer: this.props.ContainingDocumentView + documentViewContainer: this.props.DocumentContentsContainingCollection } return ( @@ -71,15 +71,15 @@ export class CollectionSchemaView extends CollectionViewBase { } render() { - const { Document, fieldKey } = this.props; + const { DocumentForCollection: Document, CollectionFieldKey: fieldKey } = this.props; const children = Document.GetListField(fieldKey, []); const columns = Document.GetListField(KS.ColumnsKey, [KS.Title, KS.Data, KS.Author]) let content; if (this.selectedIndex != -1) { - content = () + content = () } else { content =
} diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index dd47d4455..3cc0f3bf6 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -6,29 +6,33 @@ import { Key, KeyStore } from "../../fields/Key"; import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { TextField } from "../../fields/TextField"; -import { CollectionSchemaView } from "../collections/CollectionSchemaView" -import "./NodeView.scss" import { DragManager } from "../../util/DragManager"; import { SelectionManager } from "../../util/SelectionManager"; import { Utils } from "../../Utils"; -import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; +import { CollectionSchemaView } from "../collections/CollectionSchemaView"; +import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase"; import { ContextMenu } from "../ContextMenu"; import { FieldTextBox } from "../nodes/FieldTextBox"; import { ImageBox } from "../nodes/ImageBox"; import "./NodeView.scss"; import React = require("react"); +import { baseKeymap } from "prosemirror-commands"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? interface DocumentViewProps { Document: Document; ContainingCollectionView: Opt; - ContainingDocumentView: Opt; + ContainingDocumentContentsView: Opt; } @observer -export class DocumentContents extends React.Component { +export class DocumentContentsView extends React.Component { + protected _mainCont = React.createRef(); + get MainContent() { + return this._mainCont; + } @computed get layout(): string { return this.props.Document.GetFieldValue(KeyStore.Layout, TextField, String("

Error loading layout data

")); @@ -43,12 +47,92 @@ export class DocumentContents extends React.Component { get layoutFields(): Key[] { return this.props.Document.GetFieldValue(KeyStore.LayoutFields, ListField, new Array()); } + + // + // returns the cumulative scaling between the document and the screen + // + @computed + public get ScalingToScreenSpace(): number { + if (this.props.ContainingDocumentContentsView != undefined) { + let ss = this.props.ContainingDocumentContentsView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); + return this.props.ContainingDocumentContentsView.ScalingToScreenSpace * ss; + } + return 1; + } + + // + // Converts a coordinate in the screen space of the app into a local document coordinate. + // + public TransformToLocalPoint(screenX: number, screenY: number) { + // if this collection view is nested within another collection view, then + // first transform the screen point into the parent collection's coordinate space. + let { LocalX: parentX, LocalY: parentY } = this.props.ContainingDocumentContentsView != undefined ? + this.props.ContainingDocumentContentsView!.TransformToLocalPoint(screenX, screenY) : + { LocalX: screenX, LocalY: screenY }; + let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH; + let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH; + + var Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0)); + var Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0)); + // CollectionDockingViews change the location of their children frames without using a Dash transformation. + // They also ignore any transformation that may have been applied to their content document. + // NOTE: this currently assumes CollectionDockingViews aren't nested. + if (this.props.ContainingCollectionView instanceof CollectionDockingView) { + var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!); + Xx = rx - COLLECTION_BORDER_WIDTH; + Yy = ry - COLLECTION_BORDER_WIDTH; + } + + let Ss = this.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); + let Panxx = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); + let Panyy = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); + let LocalX = (ContainerX - (Xx + Panxx)) / Ss; + let LocalY = (ContainerY - (Yy + Panyy)) / Ss; + + return { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY }; + } + + // + // Converts a point in the coordinate space of a document to a screen space coordinate. + // + public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): { ScreenX: number, ScreenY: number } { + + var Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0)); + var Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0)); + // CollectionDockingViews change the location of their children frames without using a Dash transformation. + // They also ignore any transformation that may have been applied to their content document. + // NOTE: this currently assumes CollectionDockingViews aren't nested. + if (this.props.ContainingCollectionView instanceof CollectionDockingView) { + var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!); + Xx = rx - COLLECTION_BORDER_WIDTH; + Yy = ry - COLLECTION_BORDER_WIDTH; + } + + let W = COLLECTION_BORDER_WIDTH; + let H = COLLECTION_BORDER_WIDTH; + let parentX = (localX - W) * Ss + (Xx + Panxx) + W; + let parentY = (localY - H) * Ss + (Yy + Panyy) + H; + + // if this collection view is nested within another collection view, then + // first transform the local point into the parent collection's coordinate space. + let containingDocView = this.props.ContainingDocumentContentsView; + if (containingDocView != undefined) { + let ss = containingDocView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); + let panxx = containingDocView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss; + let panyy = containingDocView.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss; + let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy); + parentX = ScreenX; + parentY = ScreenY; + } + return { ScreenX: parentX, ScreenY: parentY }; + } render() { let doc = this.props.Document; let bindings = { ...this.props } as any; for (const key of this.layoutKeys) { bindings[key.Name + "Key"] = key; } + bindings.ContainingDocumentContentsView = this; for (const key of this.layoutFields) { let field = doc.GetField(key); if (field) { @@ -56,20 +140,21 @@ export class DocumentContents extends React.Component { } } return ( - + { console.log(test) }} /> + //
) } } @observer -export class DocumentView extends React.Component { - private _mainCont = React.createRef(); +export class DocumentView extends DocumentContentsView { private _contextMenuCanOpen = false; private _downX: number = 0; private _downY: number = 0; @@ -84,10 +169,6 @@ export class DocumentView extends React.Component { return new DOMRect(); } - get MainContent() { - return this._mainCont; - } - @computed get x(): number { return this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0)); @@ -152,86 +233,6 @@ export class DocumentView extends React.Component { return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView; } - - // - // returns the cumulative scaling between the document and the screen - // - @computed - public get ScalingToScreenSpace(): number { - if (this.props.ContainingDocumentView != undefined) { - let ss = this.props.ContainingDocumentView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); - return this.props.ContainingDocumentView.ScalingToScreenSpace * ss; - } - return 1; - } - - // - // Converts a coordinate in the screen space of the app into a local document coordinate. - // - public TransformToLocalPoint(screenX: number, screenY: number) { - // if this collection view is nested within another collection view, then - // first transform the screen point into the parent collection's coordinate space. - let { LocalX: parentX, LocalY: parentY } = this.props.ContainingDocumentView != undefined ? - this.props.ContainingDocumentView!.TransformToLocalPoint(screenX, screenY) : - { LocalX: screenX, LocalY: screenY }; - let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH; - let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH; - - var Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0)); - var Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0)); - // CollectionDockingViews change the location of their children frames without using a Dash transformation. - // They also ignore any transformation that may have been applied to their content document. - // NOTE: this currently assumes CollectionDockingViews aren't nested. - if (this.props.ContainingCollectionView instanceof CollectionDockingView) { - var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this._mainCont.current!); - Xx = rx - COLLECTION_BORDER_WIDTH; - Yy = ry - COLLECTION_BORDER_WIDTH; - } - - let Ss = this.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); - let Panxx = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); - let Panyy = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); - let LocalX = (ContainerX - (Xx + Panxx)) / Ss; - let LocalY = (ContainerY - (Yy + Panyy)) / Ss; - - return { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY }; - } - - // - // Converts a point in the coordinate space of a document to a screen space coordinate. - // - public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): { ScreenX: number, ScreenY: number } { - - var Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0)); - var Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0)); - // CollectionDockingViews change the location of their children frames without using a Dash transformation. - // They also ignore any transformation that may have been applied to their content document. - // NOTE: this currently assumes CollectionDockingViews aren't nested. - if (this.props.ContainingCollectionView instanceof CollectionDockingView) { - var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this._mainCont.current!); - Xx = rx - COLLECTION_BORDER_WIDTH; - Yy = ry - COLLECTION_BORDER_WIDTH; - } - - let W = COLLECTION_BORDER_WIDTH; - let H = COLLECTION_BORDER_WIDTH; - let parentX = (localX - W) * Ss + (Xx + Panxx) + W; - let parentY = (localY - H) * Ss + (Yy + Panyy) + H; - - // if this collection view is nested within another collection view, then - // first transform the local point into the parent collection's coordinate space. - let containingDocView = this.props.ContainingDocumentView; - if (containingDocView != undefined) { - let ss = containingDocView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); - let panxx = containingDocView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss; - let panyy = containingDocView.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss; - let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy); - parentX = ScreenX; - parentY = ScreenY; - } - return { ScreenX: parentX, ScreenY: parentY }; - } - onPointerDown = (e: React.PointerEvent): void => { this._downX = e.clientX; this._downY = e.clientY; @@ -354,7 +355,8 @@ export class DocumentView extends React.Component { }} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown}> - + + ); } diff --git a/src/views/nodes/FieldTextBox.tsx b/src/views/nodes/FieldTextBox.tsx index 188b39a17..0a8706517 100644 --- a/src/views/nodes/FieldTextBox.tsx +++ b/src/views/nodes/FieldTextBox.tsx @@ -13,6 +13,7 @@ import "./FieldTextBox.scss"; import React = require("react") import { RichTextField } from "../../fields/RichTextField"; import { FieldViewProps } from "./FieldView"; +import { DocumentView } from "./DocumentView"; // FieldTextBox: Displays an editable plain text node that maps to a specified Key of a Document @@ -110,7 +111,7 @@ export class FieldTextBox extends React.Component { } onPointerDown = (e: React.PointerEvent): void => { let me = this; - if (e.buttons === 1 && SelectionManager.IsSelected(me.props.documentViewContainer)) { + if (e.buttons === 1 && me.props.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(me.props.documentViewContainer)) { e.stopPropagation(); } } diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx index 6c1cd956b..b7a1d0526 100644 --- a/src/views/nodes/FieldView.tsx +++ b/src/views/nodes/FieldView.tsx @@ -1,5 +1,5 @@ import React = require("react") -import { DocumentView } from "./DocumentView"; +import { DocumentView, DocumentContentsView } from "./DocumentView"; import { Document } from "../../fields/Document"; import { observer } from "mobx-react"; import { computed } from "mobx"; @@ -20,7 +20,7 @@ import { Key } from "../../fields/Key"; export interface FieldViewProps { fieldKey: Key; doc: Document; - documentViewContainer: DocumentView + documentViewContainer: DocumentContentsView } @observer diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx index 5137dbf38..d2f567423 100644 --- a/src/views/nodes/ImageBox.tsx +++ b/src/views/nodes/ImageBox.tsx @@ -6,6 +6,7 @@ import "./ImageBox.scss"; import React = require("react") import { ImageField } from '../../fields/ImageField'; import { FieldViewProps } from './FieldView'; +import { DocumentView } from './DocumentView'; interface ImageBoxState { photoIndex: number, @@ -38,7 +39,7 @@ export class ImageBox extends React.Component { onPointerDown = (e: React.PointerEvent): void => { if (Date.now() - this._lastTap < 300) { - if (e.buttons === 1 && SelectionManager.IsSelected(this.props.documentViewContainer)) { + if (e.buttons === 1 && this.props.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) { e.stopPropagation(); this._downX = e.clientX; this._downY = e.clientY; @@ -66,7 +67,7 @@ export class ImageBox extends React.Component { const images = [path,]; var lightbox = () => { const { photoIndex } = this.state; - if (this.state.isOpen && SelectionManager.IsSelected(this.props.documentViewContainer)) { + if (this.state.isOpen && this.props.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) { return ( Date: Tue, 5 Feb 2019 11:22:10 -0500 Subject: lots of reorganization --- src/Main.tsx | 14 +- src/util/DragManager.ts | 2 +- src/util/SelectionManager.ts | 12 +- src/views/collections/CollectionDockingView.tsx | 12 +- src/views/collections/CollectionFreeFormView.tsx | 37 +-- src/views/collections/CollectionSchemaView.tsx | 12 +- src/views/nodes/CollectionFreeFormDocumentView.tsx | 222 ++++++++++++++++++ src/views/nodes/DocumentView.tsx | 257 ++------------------- src/views/nodes/FieldTextBox.tsx | 6 +- src/views/nodes/FieldView.tsx | 4 +- src/views/nodes/ImageBox.tsx | 8 +- 11 files changed, 306 insertions(+), 280 deletions(-) create mode 100644 src/views/nodes/CollectionFreeFormDocumentView.tsx (limited to 'src') diff --git a/src/Main.tsx b/src/Main.tsx index cbdf0ae98..7618630f8 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -11,7 +11,7 @@ import { NumberField } from './fields/NumberField'; import { TextField } from './fields/TextField'; import "./Main.scss"; import { ContextMenu } from './views/ContextMenu'; -import { DocumentView, DocumentContentsView } from './views/nodes/DocumentView'; +import { DocumentView } from './views/nodes/DocumentView'; configure({ enforceActions: "observed" @@ -51,14 +51,14 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { schemaDocs[4].SetFieldValue(KS.Author, "Bob", TextField); schemaDocs.push(doc2); const doc7 = Documents.SchemaDocument(schemaDocs) - const docset = [doc3];//[doc1, doc2, doc3, doc7]; + const docset = [doc1, doc2, doc3, doc7]; let doc4 = Documents.CollectionDocument(docset, { x: 0, y: 400, title: "mini collection" }); let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { x: 650, y: 500, width: 600, height: 600, title: "cat 2" }); - let docset2 = new Array(doc4, doc1, doc3); + let docset2 = new Array(doc4);//, doc1, doc3); let doc6 = Documents.CollectionDocument(docset2, { x: 350, y: 100, width: 600, height: 600, title: "docking collection" }); @@ -66,21 +66,21 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { if (!mainNodes) { mainNodes = new ListField(); } - // mainNodes.Data.push(doc1); + mainNodes.Data.push(doc1); // mainNodes.Data.push(doc2); mainNodes.Data.push(doc4); // mainNodes.Data.push(doc3); - //mainNodes.Data.push(doc5); + // mainNodes.Data.push(doc5); // mainNodes.Data.push(doc1); //mainNodes.Data.push(doc2); - //mainNodes.Data.push(doc6); + mainNodes.Data.push(doc7); mainContainer.SetField(KeyStore.Data, mainNodes); } //); ReactDOM.render((
- +
), diff --git a/src/util/DragManager.ts b/src/util/DragManager.ts index b4132a222..63d6a88f8 100644 --- a/src/util/DragManager.ts +++ b/src/util/DragManager.ts @@ -1,5 +1,5 @@ import { Opt } from "../fields/Field"; -import { DocumentView } from "../views/nodes/DocumentView"; +import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView"; import { DocumentDecorations } from "../DocumentDecorations"; import { SelectionManager } from "./SelectionManager"; import { CollectionDockingView } from "../views/collections/CollectionDockingView"; diff --git a/src/util/SelectionManager.ts b/src/util/SelectionManager.ts index 2a63248c4..0759ae110 100644 --- a/src/util/SelectionManager.ts +++ b/src/util/SelectionManager.ts @@ -1,13 +1,13 @@ -import { DocumentView } from "../views/nodes/DocumentView"; +import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView"; import { observable, action } from "mobx"; export namespace SelectionManager { class Manager { @observable - SelectedDocuments: Array = []; + SelectedDocuments: Array = []; @action - SelectDoc(doc: DocumentView, ctrlPressed: boolean): void { + SelectDoc(doc: CollectionFreeFormDocumentView, ctrlPressed: boolean): void { // if doc is not in SelectedDocuments, add it if (!ctrlPressed) { manager.SelectedDocuments = []; @@ -21,11 +21,11 @@ export namespace SelectionManager { const manager = new Manager; - export function SelectDoc(doc: DocumentView, ctrlPressed: boolean): void { + export function SelectDoc(doc: CollectionFreeFormDocumentView, ctrlPressed: boolean): void { manager.SelectDoc(doc, ctrlPressed) } - export function IsSelected(doc: DocumentView): boolean { + export function IsSelected(doc: CollectionFreeFormDocumentView): boolean { return manager.SelectedDocuments.indexOf(doc) !== -1; } @@ -33,7 +33,7 @@ export namespace SelectionManager { manager.SelectedDocuments = [] } - export function SelectedDocuments(): Array { + export function SelectedDocuments(): Array { return manager.SelectedDocuments; } } \ No newline at end of file diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx index 197b7df46..1a523e1bf 100644 --- a/src/views/collections/CollectionDockingView.tsx +++ b/src/views/collections/CollectionDockingView.tsx @@ -4,7 +4,7 @@ import React = require("react"); import FlexLayout from "flexlayout-react"; import { action, observable, computed } from "mobx"; import { Document } from "../../fields/Document"; -import { DocumentView, DocumentContentsView } from "../nodes/DocumentView"; +import { DocumentView } from "../nodes/DocumentView"; import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { SSL_OP_SINGLE_DH_USE } from "constants"; @@ -20,7 +20,7 @@ import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from export class CollectionDockingView extends CollectionViewBase { private static UseGoldenLayout = true; - public static LayoutString() { return ''; } + public static LayoutString() { return CollectionViewBase.LayoutString("CollectionDockingView"); } private _containerRef = React.createRef(); @computed private get modelForFlexLayout() { @@ -69,7 +69,7 @@ export class CollectionDockingView extends CollectionViewBase { @action onResize = (event: any) => { - var cur = this.props.DocumentContentsContainingCollection!.MainContent.current; + var cur = this.props.DocumentContentsOfCollection!.MainContent.current; // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed CollectionDockingView.myLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height); @@ -96,7 +96,7 @@ export class CollectionDockingView extends CollectionViewBase { const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); for (var i: number = 0; i < value.length; i++) { if (value[i].Id === component) { - return (); + return (); } } if (component === "text") { @@ -237,7 +237,7 @@ export class CollectionDockingView extends CollectionViewBase { container.getElement().html("
"); setTimeout(function () { ReactDOM.render(( - // bcz: need to fill in containingdoccontnents with value of DocumentContents when created... + // bcz: need to fill in DocumentContentsView with value of DocumentContents when created... ), document.getElementById(containingDiv) ); @@ -255,7 +255,7 @@ export class CollectionDockingView extends CollectionViewBase { const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes. - var s = this.props.DocumentContentsContainingCollection != undefined ? this.props.DocumentContentsContainingCollection!.ScalingToScreenSpace : 1; + var s = this.props.DocumentContentsOfCollection != undefined ? this.props.DocumentContentsOfCollection!.ScalingToScreenSpace : 1; var w = Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)) / s; var h = Document.GetFieldValue(KeyStore.Height, NumberField, Number(0)) / s; diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx index d0dea7a79..c91946475 100644 --- a/src/views/collections/CollectionFreeFormView.tsx +++ b/src/views/collections/CollectionFreeFormView.tsx @@ -3,7 +3,7 @@ import { Key, KeyStore } from "../../fields/Key"; import React = require("react"); import { action, observable, computed } from "mobx"; import { Document } from "../../fields/Document"; -import { DocumentView } from "../nodes/DocumentView"; +import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { SSL_OP_SINGLE_DH_USE } from "constants"; @@ -12,10 +12,11 @@ import { DragManager } from "../../util/DragManager"; import "./CollectionFreeFormView.scss"; import { Utils } from "../../Utils"; import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; +import { SelectionManager } from "../../util/SelectionManager"; @observer export class CollectionFreeFormView extends CollectionViewBase { - public static LayoutString() { return ''; } + public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); } private _containerRef = React.createRef(); private _canvasRef = React.createRef(); private _nodeContainerRef = React.createRef(); @@ -29,7 +30,8 @@ export class CollectionFreeFormView extends CollectionViewBase { @action drop = (e: Event, de: DragManager.DropEvent) => { const doc = de.data["document"]; - if (doc instanceof DocumentView) { + var me = this; + if (doc instanceof CollectionFreeFormDocumentView) { if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this) { doc.props.ContainingCollectionView.removeDocument(doc.props.Document); this.addDocument(doc.props.Document); @@ -37,14 +39,14 @@ export class CollectionFreeFormView extends CollectionViewBase { const xOffset = de.data["xOffset"] as number || 0; const yOffset = de.data["yOffset"] as number || 0; const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!); - let sscale = this.props.DocumentContentsContainingCollection!.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)) + let sscale = this.props.DocumentContentsOfCollection!.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)) const screenX = de.x - xOffset; const screenY = de.y - yOffset; const docX = (screenX - translateX) / sscale / scale; const docY = (screenY - translateY) / sscale / scale; doc.x = docX; doc.y = docY; - //this.bringToFront(doc); + this.bringToFront(doc); } e.stopPropagation(); } @@ -59,9 +61,14 @@ export class CollectionFreeFormView extends CollectionViewBase { } } + downactive: boolean = false; @action onPointerDown = (e: React.PointerEvent): void => { - if (e.button === 2 && this.active) { + var me = this; + me.downactive = this.active; + var title = this.props.DocumentForCollection.Title; + if ((e.button === 2 && this.active) || + !e.defaultPrevented) { document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); @@ -76,28 +83,32 @@ export class CollectionFreeFormView extends CollectionViewBase { document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); e.stopPropagation(); + SelectionManager.DeselectAll(); } @action onPointerMove = (e: PointerEvent): void => { - if (!e.cancelBubble) { + var me = this; + var act = me.active; + var title = me.props.DocumentForCollection.Title; + if (!e.cancelBubble && this.active) { e.preventDefault(); e.stopPropagation(); - let currScale: number = this.props.DocumentContentsContainingCollection!.ScalingToScreenSpace; + let currScale: number = this.props.DocumentContentsOfCollection!.ScalingToScreenSpace; let x = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); let y = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); this.props.DocumentForCollection.SetFieldValue(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField); this.props.DocumentForCollection.SetFieldValue(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField); - this._lastX = e.pageX; - this._lastY = e.pageY; } + this._lastX = e.pageX; + this._lastY = e.pageY; } @action onPointerWheel = (e: React.WheelEvent): void => { e.stopPropagation(); - let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.DocumentContentsContainingCollection!.TransformToLocalPoint(e.pageX, e.pageY); + let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.DocumentContentsOfCollection!.TransformToLocalPoint(e.pageX, e.pageY); var deltaScale = (1 - (e.deltaY / 1000)) * Ss; @@ -148,7 +159,7 @@ export class CollectionFreeFormView extends CollectionViewBase { } @action - bringToFront(doc: DocumentView) { + bringToFront(doc: CollectionFreeFormDocumentView) { const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetListField(fieldKey, []); @@ -187,7 +198,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
{value.map(doc => { - return (); + return (); })}
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx index f625b39c5..8c79c9189 100644 --- a/src/views/collections/CollectionSchemaView.tsx +++ b/src/views/collections/CollectionSchemaView.tsx @@ -1,4 +1,3 @@ -import { DocumentContentsView } from "../nodes/DocumentView"; import React = require("react") import ReactTable, { ReactTableDefaults, CellInfo, ComponentPropsGetterRC, ComponentPropsGetterR } from "react-table"; import { observer } from "mobx-react"; @@ -11,22 +10,23 @@ import SplitPane from "react-split-pane" import "./CollectionSchemaView.scss" import { ScrollBox } from "../../util/ScrollBox"; import { CollectionViewBase } from "./CollectionViewBase"; +import { DocumentView } from "../nodes/DocumentView"; @observer export class CollectionSchemaView extends CollectionViewBase { - public static LayoutString() { return ''; } + public static LayoutString() { return CollectionViewBase.LayoutString("CollectionSchemaView"); } @observable selectedIndex = 0; renderCell = (rowProps: CellInfo) => { - if (!this.props.DocumentContentsContainingCollection) { + if (!this.props.DocumentContentsOfCollection) { return
} let props: FieldViewProps = { doc: rowProps.value[0], fieldKey: rowProps.value[1], - documentViewContainer: this.props.DocumentContentsContainingCollection + documentViewContainer: this.props.DocumentContentsOfCollection } return ( @@ -77,8 +77,8 @@ export class CollectionSchemaView extends CollectionViewBase { [KS.Title, KS.Data, KS.Author]) let content; if (this.selectedIndex != -1) { - content = () } else { content =
diff --git a/src/views/nodes/CollectionFreeFormDocumentView.tsx b/src/views/nodes/CollectionFreeFormDocumentView.tsx new file mode 100644 index 000000000..78e3325ab --- /dev/null +++ b/src/views/nodes/CollectionFreeFormDocumentView.tsx @@ -0,0 +1,222 @@ +import { action, computed } from "mobx"; +import { observer } from "mobx-react"; +import { Key, KeyStore } from "../../fields/Key"; +import { NumberField } from "../../fields/NumberField"; +import { DragManager } from "../../util/DragManager"; +import { SelectionManager } from "../../util/SelectionManager"; +import { CollectionDockingView } from "../collections/CollectionDockingView"; +import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; +import { ContextMenu } from "../ContextMenu"; +import "./NodeView.scss"; +import React = require("react"); +import { DocumentView, DocumentViewProps } from "./DocumentView"; + + +@observer +export class CollectionFreeFormDocumentView extends DocumentView { + private _contextMenuCanOpen = false; + private _downX: number = 0; + private _downY: number = 0; + + constructor(props: DocumentViewProps) { + super(props); + } + get screenRect(): ClientRect | DOMRect { + if (this._mainCont.current) { + return this._mainCont.current.getBoundingClientRect(); + } + return new DOMRect(); + } + + @computed + get x(): number { + return this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0)); + } + + @computed + get y(): number { + return this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0)); + } + + set x(x: number) { + this.props.Document.SetFieldValue(KeyStore.X, x, NumberField) + } + + set y(y: number) { + this.props.Document.SetFieldValue(KeyStore.Y, y, NumberField) + } + + @computed + get transform(): string { + return `translate(${this.x}px, ${this.y}px)`; + } + + @computed + get width(): number { + return this.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)); + } + + set width(w: number) { + this.props.Document.SetFieldValue(KeyStore.Width, w, NumberField) + } + + @computed + get height(): number { + return this.props.Document.GetFieldValue(KeyStore.Height, NumberField, Number(0)); + } + + set height(h: number) { + this.props.Document.SetFieldValue(KeyStore.Height, h, NumberField) + } + + @computed + get zIndex(): number { + return this.props.Document.GetFieldValue(KeyStore.ZIndex, NumberField, Number(0)); + } + + set zIndex(h: number) { + this.props.Document.SetFieldValue(KeyStore.ZIndex, h, NumberField) + } + + @action + dragComplete = (e: DragManager.DragCompleteEvent) => { + } + + @computed + get active(): boolean { + return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined || this.props.ContainingCollectionView!.active; + } + + @computed + get topMost(): boolean { + return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView; + } + + onPointerDown = (e: React.PointerEvent): void => { + this._downX = e.clientX; + this._downY = e.clientY; + var me = this; + if (e.shiftKey && e.buttons === 1) { + CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document); + e.stopPropagation(); + return; + } + this._contextMenuCanOpen = e.button == 2; + if (this.active && !e.isDefaultPrevented()) { + e.stopPropagation(); + if (e.buttons === 2) { + e.preventDefault(); + } + document.removeEventListener("pointermove", this.onPointerMove) + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp) + document.addEventListener("pointerup", this.onPointerUp); + } + } + + 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; + const rect = this.screenRect; + let dragData: { [id: string]: any } = {}; + dragData["document"] = this; + dragData["xOffset"] = e.x - rect.left; + dragData["yOffset"] = e.y - rect.top; + DragManager.StartDrag(this._mainCont.current, dragData, { + handlers: { + dragComplete: this.dragComplete, + }, + hideSource: true + }) + } + } + e.stopPropagation(); + e.preventDefault(); + } + + onPointerUp = (e: PointerEvent): void => { + document.removeEventListener("pointermove", this.onPointerMove) + document.removeEventListener("pointerup", this.onPointerUp) + e.stopPropagation(); + if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) { + SelectionManager.SelectDoc(this, e.ctrlKey); + } + } + + openRight = (e: React.MouseEvent): void => { + CollectionDockingView.AddRightSplit(this.props.Document); + } + + deleteClicked = (e: React.MouseEvent): void => { + if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) { + this.props.ContainingCollectionView.removeDocument(this.props.Document) + } + } + @action + fullScreenClicked = (e: React.MouseEvent): void => { + CollectionDockingView.OpenFullScreen(this.props.Document); + ContextMenu.Instance.clearItems(); + ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked }); + ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) + } + @action + closeFullScreenClicked = (e: React.MouseEvent): void => { + CollectionDockingView.CloseFullScreen(); + ContextMenu.Instance.clearItems(); + ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) + ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) + } + + @action + onContextMenu = (e: React.MouseEvent): void => { + if (!SelectionManager.IsSelected(this)) { + return; + } + e.preventDefault() + + if (!this._contextMenuCanOpen) { + return; + } + + if (this.topMost) { + ContextMenu.Instance.clearItems() + ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) + ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) + } + else { + // DocumentViews should stop propogation of this event + e.stopPropagation(); + + ContextMenu.Instance.clearItems(); + ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) + ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight }) + ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) + ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) + SelectionManager.SelectDoc(this, e.ctrlKey); + } + } + + render() { + var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView; + return ( +
+ + +
+ ); + } +} \ No newline at end of file diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 3cc0f3bf6..fd5ffeb61 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -6,28 +6,24 @@ import { Key, KeyStore } from "../../fields/Key"; import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { TextField } from "../../fields/TextField"; -import { DragManager } from "../../util/DragManager"; -import { SelectionManager } from "../../util/SelectionManager"; import { Utils } from "../../Utils"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; import { CollectionSchemaView } from "../collections/CollectionSchemaView"; import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase"; -import { ContextMenu } from "../ContextMenu"; import { FieldTextBox } from "../nodes/FieldTextBox"; import { ImageBox } from "../nodes/ImageBox"; import "./NodeView.scss"; import React = require("react"); -import { baseKeymap } from "prosemirror-commands"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? -interface DocumentViewProps { +export interface DocumentViewProps { Document: Document; ContainingCollectionView: Opt; - ContainingDocumentContentsView: Opt; + DocumentContentsView: Opt } @observer -export class DocumentContentsView extends React.Component { +export class DocumentView extends React.Component { protected _mainCont = React.createRef(); get MainContent() { @@ -53,9 +49,9 @@ export class DocumentContentsView extends React.Component { // @computed public get ScalingToScreenSpace(): number { - if (this.props.ContainingDocumentContentsView != undefined) { - let ss = this.props.ContainingDocumentContentsView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); - return this.props.ContainingDocumentContentsView.ScalingToScreenSpace * ss; + if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.DocumentContentsOfCollection != undefined) { + let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); + return this.props.ContainingCollectionView.props.DocumentContentsOfCollection.ScalingToScreenSpace * ss; } return 1; } @@ -66,8 +62,8 @@ export class DocumentContentsView extends React.Component { public TransformToLocalPoint(screenX: number, screenY: number) { // if this collection view is nested within another collection view, then // first transform the screen point into the parent collection's coordinate space. - let { LocalX: parentX, LocalY: parentY } = this.props.ContainingDocumentContentsView != undefined ? - this.props.ContainingDocumentContentsView!.TransformToLocalPoint(screenX, screenY) : + let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.DocumentContentsOfCollection != undefined ? + this.props.ContainingCollectionView.props.DocumentContentsOfCollection.TransformToLocalPoint(screenX, screenY) : { LocalX: screenX, LocalY: screenY }; let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH; let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH; @@ -115,7 +111,7 @@ export class DocumentContentsView extends React.Component { // if this collection view is nested within another collection view, then // first transform the local point into the parent collection's coordinate space. - let containingDocView = this.props.ContainingDocumentContentsView; + let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.DocumentContentsOfCollection : undefined;//.ContainingDocumentContentsView; if (containingDocView != undefined) { let ss = containingDocView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); let panxx = containingDocView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss; @@ -126,238 +122,35 @@ export class DocumentContentsView extends React.Component { } return { ScreenX: parentX, ScreenY: parentY }; } + + render() { let doc = this.props.Document; let bindings = { ...this.props } as any; for (const key of this.layoutKeys) { bindings[key.Name + "Key"] = key; } - bindings.ContainingDocumentContentsView = this; + if (this.props.DocumentContentsView == undefined) + bindings.DocumentContentsView = this; for (const key of this.layoutFields) { let field = doc.GetField(key); if (field) { bindings[key.Name] = field.GetValue(); } } - return ( - //
- { console.log(test) }} - /> - //
- ) - } -} - -@observer -export class DocumentView extends DocumentContentsView { - private _contextMenuCanOpen = false; - private _downX: number = 0; - private _downY: number = 0; - - constructor(props: DocumentViewProps) { - super(props); - } - get screenRect(): ClientRect | DOMRect { - if (this._mainCont.current) { - return this._mainCont.current.getBoundingClientRect(); - } - return new DOMRect(); - } - - @computed - get x(): number { - return this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0)); - } - - @computed - get y(): number { - return this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0)); - } - - set x(x: number) { - this.props.Document.SetFieldValue(KeyStore.X, x, NumberField) - } - - set y(y: number) { - this.props.Document.SetFieldValue(KeyStore.Y, y, NumberField) - } - - @computed - get transform(): string { - return `translate(${this.x}px, ${this.y}px)`; - } - - @computed - get width(): number { - return this.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)); - } - - set width(w: number) { - this.props.Document.SetFieldValue(KeyStore.Width, w, NumberField) - } - - @computed - get height(): number { - return this.props.Document.GetFieldValue(KeyStore.Height, NumberField, Number(0)); - } - - set height(h: number) { - this.props.Document.SetFieldValue(KeyStore.Height, h, NumberField) - } - - @computed - get zIndex(): number { - return this.props.Document.GetFieldValue(KeyStore.ZIndex, NumberField, Number(0)); - } - - set zIndex(h: number) { - this.props.Document.SetFieldValue(KeyStore.ZIndex, h, NumberField) - } - - @action - dragComplete = (e: DragManager.DragCompleteEvent) => { - } - - @computed - get active(): boolean { - return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined || this.props.ContainingCollectionView!.active; - } - - @computed - get topMost(): boolean { - return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView; - } - - onPointerDown = (e: React.PointerEvent): void => { - this._downX = e.clientX; - this._downY = e.clientY; - var me = this; - if (e.shiftKey && e.buttons === 1) { - CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document); - e.stopPropagation(); - return; - } - this._contextMenuCanOpen = e.button == 2; - if (this.active && !e.isDefaultPrevented()) { - e.stopPropagation(); - if (e.buttons === 2) { - e.preventDefault(); - } - document.removeEventListener("pointermove", this.onPointerMove) - document.addEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp) - document.addEventListener("pointerup", this.onPointerUp); - } - } - - 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; - const rect = this.screenRect; - let dragData: { [id: string]: any } = {}; - dragData["document"] = this; - dragData["xOffset"] = e.x - rect.left; - dragData["yOffset"] = e.y - rect.top; - DragManager.StartDrag(this._mainCont.current, dragData, { - handlers: { - dragComplete: this.dragComplete, - }, - hideSource: true - }) - } - } - e.stopPropagation(); - e.preventDefault(); - } - - onPointerUp = (e: PointerEvent): void => { - document.removeEventListener("pointermove", this.onPointerMove) - document.removeEventListener("pointerup", this.onPointerUp) - e.stopPropagation(); - if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) { - SelectionManager.SelectDoc(this, e.ctrlKey); - } - } - - openRight = (e: React.MouseEvent): void => { - CollectionDockingView.AddRightSplit(this.props.Document); - } - - deleteClicked = (e: React.MouseEvent): void => { - if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) { - this.props.ContainingCollectionView.removeDocument(this.props.Document) - } - } - @action - fullScreenClicked = (e: React.MouseEvent): void => { - CollectionDockingView.OpenFullScreen(this.props.Document); - ContextMenu.Instance.clearItems(); - ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked }); - ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) - } - @action - closeFullScreenClicked = (e: React.MouseEvent): void => { - CollectionDockingView.CloseFullScreen(); - ContextMenu.Instance.clearItems(); - ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) - ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) - } - - @action - onContextMenu = (e: React.MouseEvent): void => { - if (!SelectionManager.IsSelected(this)) { - return; - } - e.preventDefault() - - if (!this._contextMenuCanOpen) { - return; - } - - if (this.topMost) { - ContextMenu.Instance.clearItems() - ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) - ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) - } - else { - // DocumentViews should stop propogation of this event - e.stopPropagation(); - - ContextMenu.Instance.clearItems(); - ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) - ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight }) - ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) - ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) - SelectionManager.SelectDoc(this, e.ctrlKey); - } - } - - render() { - var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView; return (
- - + width: "100%", + height: "100%", + }}> + { console.log(test) }} + />
- ); + ) } -} \ No newline at end of file +} diff --git a/src/views/nodes/FieldTextBox.tsx b/src/views/nodes/FieldTextBox.tsx index 0a8706517..0e884a031 100644 --- a/src/views/nodes/FieldTextBox.tsx +++ b/src/views/nodes/FieldTextBox.tsx @@ -13,7 +13,7 @@ import "./FieldTextBox.scss"; import React = require("react") import { RichTextField } from "../../fields/RichTextField"; import { FieldViewProps } from "./FieldView"; -import { DocumentView } from "./DocumentView"; +import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; // FieldTextBox: Displays an editable plain text node that maps to a specified Key of a Document @@ -34,7 +34,7 @@ import { DocumentView } from "./DocumentView"; // export class FieldTextBox extends React.Component { - public static LayoutString() { return ""; } + public static LayoutString() { return ""; } private _ref: React.RefObject; private _editorView: Opt; private _reactionDisposer: Opt; @@ -111,7 +111,7 @@ export class FieldTextBox extends React.Component { } onPointerDown = (e: React.PointerEvent): void => { let me = this; - if (e.buttons === 1 && me.props.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(me.props.documentViewContainer)) { + if (e.buttons === 1 && me.props.documentViewContainer instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(me.props.documentViewContainer)) { e.stopPropagation(); } } diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx index b7a1d0526..9f0404dbf 100644 --- a/src/views/nodes/FieldView.tsx +++ b/src/views/nodes/FieldView.tsx @@ -1,5 +1,4 @@ import React = require("react") -import { DocumentView, DocumentContentsView } from "./DocumentView"; import { Document } from "../../fields/Document"; import { observer } from "mobx-react"; import { computed } from "mobx"; @@ -11,6 +10,7 @@ import { FieldTextBox } from "./FieldTextBox"; import { ImageField } from "../../fields/ImageField"; import { ImageBox } from "./ImageBox"; import { Key } from "../../fields/Key"; +import { DocumentView } from "./DocumentView"; // // these properties get assigned through the render() method of the DocumentView when it creates this node. @@ -20,7 +20,7 @@ import { Key } from "../../fields/Key"; export interface FieldViewProps { fieldKey: Key; doc: Document; - documentViewContainer: DocumentContentsView + documentViewContainer: DocumentView } @observer diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx index d2f567423..a4254ce39 100644 --- a/src/views/nodes/ImageBox.tsx +++ b/src/views/nodes/ImageBox.tsx @@ -6,7 +6,7 @@ import "./ImageBox.scss"; import React = require("react") import { ImageField } from '../../fields/ImageField'; import { FieldViewProps } from './FieldView'; -import { DocumentView } from './DocumentView'; +import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView'; interface ImageBoxState { photoIndex: number, @@ -15,7 +15,7 @@ interface ImageBoxState { export class ImageBox extends React.Component { - public static LayoutString() { return ""; } + public static LayoutString() { return ""; } private _ref: React.RefObject; private _downX: number = 0; private _downY: number = 0; @@ -39,7 +39,7 @@ export class ImageBox extends React.Component { onPointerDown = (e: React.PointerEvent): void => { if (Date.now() - this._lastTap < 300) { - if (e.buttons === 1 && this.props.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) { + if (e.buttons === 1 && this.props.documentViewContainer instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) { e.stopPropagation(); this._downX = e.clientX; this._downY = e.clientY; @@ -67,7 +67,7 @@ export class ImageBox extends React.Component { const images = [path,]; var lightbox = () => { const { photoIndex } = this.state; - if (this.state.isOpen && this.props.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) { + if (this.state.isOpen && this.props.documentViewContainer instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) { return ( Date: Tue, 5 Feb 2019 11:33:30 -0500 Subject: more reorg --- src/documents/Documents.ts | 4 +- src/views/collections/CollectionDockingView.tsx | 4 +- src/views/collections/CollectionFreeFormView.tsx | 8 +- src/views/collections/CollectionSchemaView.tsx | 6 +- src/views/nodes/DocumentView.tsx | 14 +-- src/views/nodes/FieldTextBox.scss | 14 --- src/views/nodes/FieldTextBox.tsx | 127 ----------------------- src/views/nodes/FieldView.tsx | 7 +- src/views/nodes/FormattedTextBox.scss | 14 +++ src/views/nodes/FormattedTextBox.tsx | 125 ++++++++++++++++++++++ src/views/nodes/ImageBox.tsx | 4 +- 11 files changed, 163 insertions(+), 164 deletions(-) delete mode 100644 src/views/nodes/FieldTextBox.scss delete mode 100644 src/views/nodes/FieldTextBox.tsx create mode 100644 src/views/nodes/FormattedTextBox.scss create mode 100644 src/views/nodes/FormattedTextBox.tsx (limited to 'src') diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts index 29ef32966..b69b79dd3 100644 --- a/src/documents/Documents.ts +++ b/src/documents/Documents.ts @@ -3,7 +3,7 @@ import { KeyStore } from "../fields/Key"; import { TextField } from "../fields/TextField"; import { NumberField } from "../fields/NumberField"; import { ListField } from "../fields/ListField"; -import { FieldTextBox } from "../views/nodes/FieldTextBox"; +import { FormattedTextBox } from "../views/nodes/FormattedTextBox"; import { CollectionDockingView } from "../views/collections/CollectionDockingView"; import { CollectionSchemaView } from "../views/collections/CollectionSchemaView"; import { ImageField } from "../fields/ImageField"; @@ -49,7 +49,7 @@ export namespace Documents { textProto.SetField(KeyStore.Y, new NumberField(0)); textProto.SetField(KeyStore.Width, new NumberField(300)); textProto.SetField(KeyStore.Height, new NumberField(150)); - textProto.SetField(KeyStore.Layout, new TextField(FieldTextBox.LayoutString())); + textProto.SetField(KeyStore.Layout, new TextField(FormattedTextBox.LayoutString())); textProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data])); } return textProto; diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx index 1a523e1bf..49f1a0bf0 100644 --- a/src/views/collections/CollectionDockingView.tsx +++ b/src/views/collections/CollectionDockingView.tsx @@ -69,7 +69,7 @@ export class CollectionDockingView extends CollectionViewBase { @action onResize = (event: any) => { - var cur = this.props.DocumentContentsOfCollection!.MainContent.current; + var cur = this.props.DocumentViewForCollection!.MainContent.current; // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed CollectionDockingView.myLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height); @@ -255,7 +255,7 @@ export class CollectionDockingView extends CollectionViewBase { const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes. - var s = this.props.DocumentContentsOfCollection != undefined ? this.props.DocumentContentsOfCollection!.ScalingToScreenSpace : 1; + var s = this.props.DocumentViewForCollection != undefined ? this.props.DocumentViewForCollection!.ScalingToScreenSpace : 1; var w = Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)) / s; var h = Document.GetFieldValue(KeyStore.Height, NumberField, Number(0)) / s; diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx index c91946475..d266a55d9 100644 --- a/src/views/collections/CollectionFreeFormView.tsx +++ b/src/views/collections/CollectionFreeFormView.tsx @@ -39,7 +39,7 @@ export class CollectionFreeFormView extends CollectionViewBase { const xOffset = de.data["xOffset"] as number || 0; const yOffset = de.data["yOffset"] as number || 0; const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!); - let sscale = this.props.DocumentContentsOfCollection!.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)) + let sscale = this.props.DocumentViewForCollection!.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)) const screenX = de.x - xOffset; const screenY = de.y - yOffset; const docX = (screenX - translateX) / sscale / scale; @@ -94,7 +94,7 @@ export class CollectionFreeFormView extends CollectionViewBase { if (!e.cancelBubble && this.active) { e.preventDefault(); e.stopPropagation(); - let currScale: number = this.props.DocumentContentsOfCollection!.ScalingToScreenSpace; + let currScale: number = this.props.DocumentViewForCollection!.ScalingToScreenSpace; let x = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); let y = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); this.props.DocumentForCollection.SetFieldValue(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField); @@ -108,7 +108,7 @@ export class CollectionFreeFormView extends CollectionViewBase { onPointerWheel = (e: React.WheelEvent): void => { e.stopPropagation(); - let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.DocumentContentsOfCollection!.TransformToLocalPoint(e.pageX, e.pageY); + let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.DocumentViewForCollection!.TransformToLocalPoint(e.pageX, e.pageY); var deltaScale = (1 - (e.deltaY / 1000)) * Ss; @@ -198,7 +198,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
{value.map(doc => { - return (); + return (); })}
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx index 8c79c9189..b2ff95329 100644 --- a/src/views/collections/CollectionSchemaView.tsx +++ b/src/views/collections/CollectionSchemaView.tsx @@ -20,13 +20,13 @@ export class CollectionSchemaView extends CollectionViewBase { selectedIndex = 0; renderCell = (rowProps: CellInfo) => { - if (!this.props.DocumentContentsOfCollection) { + if (!this.props.DocumentViewForCollection) { return
} let props: FieldViewProps = { doc: rowProps.value[0], fieldKey: rowProps.value[1], - documentViewContainer: this.props.DocumentContentsOfCollection + documentViewContainer: this.props.DocumentViewForCollection } return ( @@ -78,7 +78,7 @@ export class CollectionSchemaView extends CollectionViewBase { let content; if (this.selectedIndex != -1) { content = () } else { content =
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index fd5ffeb61..7ff1ef5cc 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -11,7 +11,7 @@ import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; import { CollectionSchemaView } from "../collections/CollectionSchemaView"; import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase"; -import { FieldTextBox } from "../nodes/FieldTextBox"; +import { FormattedTextBox } from "../nodes/FormattedTextBox"; import { ImageBox } from "../nodes/ImageBox"; import "./NodeView.scss"; import React = require("react"); @@ -49,9 +49,9 @@ export class DocumentView extends React.Component { // @computed public get ScalingToScreenSpace(): number { - if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.DocumentContentsOfCollection != undefined) { + if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.DocumentViewForCollection != undefined) { let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); - return this.props.ContainingCollectionView.props.DocumentContentsOfCollection.ScalingToScreenSpace * ss; + return this.props.ContainingCollectionView.props.DocumentViewForCollection.ScalingToScreenSpace * ss; } return 1; } @@ -62,8 +62,8 @@ export class DocumentView extends React.Component { public TransformToLocalPoint(screenX: number, screenY: number) { // if this collection view is nested within another collection view, then // first transform the screen point into the parent collection's coordinate space. - let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.DocumentContentsOfCollection != undefined ? - this.props.ContainingCollectionView.props.DocumentContentsOfCollection.TransformToLocalPoint(screenX, screenY) : + let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.DocumentViewForCollection != undefined ? + this.props.ContainingCollectionView.props.DocumentViewForCollection.TransformToLocalPoint(screenX, screenY) : { LocalX: screenX, LocalY: screenY }; let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH; let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH; @@ -111,7 +111,7 @@ export class DocumentView extends React.Component { // if this collection view is nested within another collection view, then // first transform the local point into the parent collection's coordinate space. - let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.DocumentContentsOfCollection : undefined;//.ContainingDocumentContentsView; + let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.DocumentViewForCollection : undefined;//.ContainingDocumentContentsView; if (containingDocView != undefined) { let ss = containingDocView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); let panxx = containingDocView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss; @@ -144,7 +144,7 @@ export class DocumentView extends React.Component { height: "100%", }}> Key} />"); -// and the node's binding to the specified document KEYNAME as: -// document.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.])); -// The Jsx parser at run time will bind: -// 'fieldKey' property to the Key stored in LayoutKeys -// and 'doc' property to the document that is being rendered -// -// When rendered() by React, this extracts the TextController from the Document stored at the -// specified Key and assigns it to an HTML input node. When changes are made tot his node, -// this will edit the document and assign the new value to that field. -// -export class FieldTextBox extends React.Component { - - public static LayoutString() { return ""; } - private _ref: React.RefObject; - private _editorView: Opt; - private _reactionDisposer: Opt; - - constructor(props: FieldViewProps) { - super(props); - - this._ref = React.createRef(); - - this.onChange = this.onChange.bind(this); - } - - dispatchTransaction = (tx: Transaction) => { - if (this._editorView) { - const state = this._editorView.state.apply(tx); - this._editorView.updateState(state); - const { doc, fieldKey } = this.props; - doc.SetFieldValue(fieldKey, JSON.stringify(state.toJSON()), RichTextField); - } - } - - componentDidMount() { - let state: EditorState; - const { doc, fieldKey } = this.props; - const config = { - schema, - plugins: [ - history(), - keymap({ "Mod-z": undo, "Mod-y": redo }), - keymap(baseKeymap) - ] - }; - - let field = doc.GetFieldT(fieldKey, RichTextField); - if (field) { - state = EditorState.fromJSON(config, JSON.parse(field.Data)); - } else { - state = EditorState.create(config); - } - if (this._ref.current) { - this._editorView = new EditorView(this._ref.current, { - state, - dispatchTransaction: this.dispatchTransaction - }); - } - - this._reactionDisposer = reaction(() => { - const field = this.props.doc.GetFieldT(this.props.fieldKey, RichTextField); - return field ? field.Data : undefined; - }, (field) => { - if (field && this._editorView) { - this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field))); - } - }) - } - - componentWillUnmount() { - if (this._editorView) { - this._editorView.destroy(); - } - if (this._reactionDisposer) { - this._reactionDisposer(); - } - } - - shouldComponentUpdate() { - return false; - } - - @action - onChange(e: React.ChangeEvent) { - const { fieldKey, doc } = this.props; - doc.SetFieldValue(fieldKey, e.target.value, RichTextField); - } - onPointerDown = (e: React.PointerEvent): void => { - let me = this; - if (e.buttons === 1 && me.props.documentViewContainer instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(me.props.documentViewContainer)) { - e.stopPropagation(); - } - } - render() { - return (
) - } -} \ No newline at end of file diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx index 9f0404dbf..370f6d324 100644 --- a/src/views/nodes/FieldView.tsx +++ b/src/views/nodes/FieldView.tsx @@ -6,7 +6,7 @@ import { Field, Opt } from "../../fields/Field"; import { TextField } from "../../fields/TextField"; import { NumberField } from "../../fields/NumberField"; import { RichTextField } from "../../fields/RichTextField"; -import { FieldTextBox } from "./FieldTextBox"; +import { FormattedTextBox } from "./FormattedTextBox"; import { ImageField } from "../../fields/ImageField"; import { ImageBox } from "./ImageBox"; import { Key } from "../../fields/Key"; @@ -15,7 +15,7 @@ import { DocumentView } from "./DocumentView"; // // these properties get assigned through the render() method of the DocumentView when it creates this node. // However, that only happens because the properties are "defined" in the markup for the field view. -// See the LayoutString method on each field view : ImageBox, FieldTextBox, etc. +// See the LayoutString method on each field view : ImageBox, FormattedTextBox, etc. // export interface FieldViewProps { fieldKey: Key; @@ -25,6 +25,7 @@ export interface FieldViewProps { @observer export class FieldView extends React.Component { + public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} documentViewContainer={DocumentContentsView} fieldKey={DataKey} />`; } @computed get field(): Opt { const { doc, fieldKey } = this.props; @@ -39,7 +40,7 @@ export class FieldView extends React.Component { return

{field.Data}

} else if (field instanceof RichTextField) { - return + return } else if (field instanceof ImageField) { return diff --git a/src/views/nodes/FormattedTextBox.scss b/src/views/nodes/FormattedTextBox.scss new file mode 100644 index 000000000..492367fce --- /dev/null +++ b/src/views/nodes/FormattedTextBox.scss @@ -0,0 +1,14 @@ +.ProseMirror { + margin-top: -1em; + width: 100%; + height: 100%; +} + +.ProseMirror:focus { + outline: none !important +} + +.formattedTextBox-cont { + background: white; + padding: 1vw; +} \ No newline at end of file diff --git a/src/views/nodes/FormattedTextBox.tsx b/src/views/nodes/FormattedTextBox.tsx new file mode 100644 index 000000000..d51e91315 --- /dev/null +++ b/src/views/nodes/FormattedTextBox.tsx @@ -0,0 +1,125 @@ +import { action, IReactionDisposer, reaction } from "mobx"; +import { baseKeymap } from "prosemirror-commands"; +import { history, redo, undo } from "prosemirror-history"; +import { keymap } from "prosemirror-keymap"; +import { schema } from "prosemirror-schema-basic"; +import { EditorState, Transaction } from "prosemirror-state"; +import { EditorView } from "prosemirror-view"; +import { Opt } from "../../fields/Field"; +import { SelectionManager } from "../../util/SelectionManager"; +import "./FormattedTextBox.scss"; +import React = require("react") +import { RichTextField } from "../../fields/RichTextField"; +import { FieldViewProps, FieldView } from "./FieldView"; +import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; + + +// FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document +// +// HTML Markup: Key} />"); +// and the node's binding to the specified document KEYNAME as: +// document.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.])); +// The Jsx parser at run time will bind: +// 'fieldKey' property to the Key stored in LayoutKeys +// and 'doc' property to the document that is being rendered +// +// When rendered() by React, this extracts the TextController from the Document stored at the +// specified Key and assigns it to an HTML input node. When changes are made tot his node, +// this will edit the document and assign the new value to that field. +// +export class FormattedTextBox extends React.Component { + + public static LayoutString() { return FieldView.LayoutString("FormattedTextBox"); } + private _ref: React.RefObject; + private _editorView: Opt; + private _reactionDisposer: Opt; + + constructor(props: FieldViewProps) { + super(props); + + this._ref = React.createRef(); + + this.onChange = this.onChange.bind(this); + } + + dispatchTransaction = (tx: Transaction) => { + if (this._editorView) { + const state = this._editorView.state.apply(tx); + this._editorView.updateState(state); + const { doc, fieldKey } = this.props; + doc.SetFieldValue(fieldKey, JSON.stringify(state.toJSON()), RichTextField); + } + } + + componentDidMount() { + let state: EditorState; + const { doc, fieldKey } = this.props; + const config = { + schema, + plugins: [ + history(), + keymap({ "Mod-z": undo, "Mod-y": redo }), + keymap(baseKeymap) + ] + }; + + let field = doc.GetFieldT(fieldKey, RichTextField); + if (field) { + state = EditorState.fromJSON(config, JSON.parse(field.Data)); + } else { + state = EditorState.create(config); + } + if (this._ref.current) { + this._editorView = new EditorView(this._ref.current, { + state, + dispatchTransaction: this.dispatchTransaction + }); + } + + this._reactionDisposer = reaction(() => { + const field = this.props.doc.GetFieldT(this.props.fieldKey, RichTextField); + return field ? field.Data : undefined; + }, (field) => { + if (field && this._editorView) { + this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field))); + } + }) + } + + componentWillUnmount() { + if (this._editorView) { + this._editorView.destroy(); + } + if (this._reactionDisposer) { + this._reactionDisposer(); + } + } + + shouldComponentUpdate() { + return false; + } + + @action + onChange(e: React.ChangeEvent) { + const { fieldKey, doc } = this.props; + doc.SetFieldValue(fieldKey, e.target.value, RichTextField); + } + onPointerDown = (e: React.PointerEvent): void => { + let me = this; + if (e.buttons === 1 && me.props.documentViewContainer instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(me.props.documentViewContainer)) { + e.stopPropagation(); + } + } + render() { + return (
) + } +} \ No newline at end of file diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx index a4254ce39..cced95c89 100644 --- a/src/views/nodes/ImageBox.tsx +++ b/src/views/nodes/ImageBox.tsx @@ -5,7 +5,7 @@ import { SelectionManager } from "../../util/SelectionManager"; import "./ImageBox.scss"; import React = require("react") import { ImageField } from '../../fields/ImageField'; -import { FieldViewProps } from './FieldView'; +import { FieldViewProps, FieldView } from './FieldView'; import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView'; interface ImageBoxState { @@ -15,7 +15,7 @@ interface ImageBoxState { export class ImageBox extends React.Component { - public static LayoutString() { return ""; } + public static LayoutString() { return FieldView.LayoutString("ImageBox"); } private _ref: React.RefObject; private _downX: number = 0; private _downY: number = 0; -- cgit v1.2.3-70-g09d2 From ea9f41a84a307343593245e6de0c721704dc60fa Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 5 Feb 2019 11:51:59 -0500 Subject: more --- src/Main.tsx | 2 +- src/views/collections/CollectionDockingView.tsx | 4 ++-- src/views/collections/CollectionFreeFormView.tsx | 2 +- src/views/collections/CollectionSchemaView.tsx | 7 ++----- src/views/nodes/CollectionFreeFormDocumentView.tsx | 2 +- src/views/nodes/DocumentView.tsx | 8 ++++---- src/views/nodes/FieldView.tsx | 4 ++-- src/views/nodes/FormattedTextBox.tsx | 2 +- src/views/nodes/ImageBox.tsx | 4 ++-- 9 files changed, 16 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/Main.tsx b/src/Main.tsx index 7618630f8..b72083ee6 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -80,7 +80,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { ReactDOM.render((
- +
), diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx index 49f1a0bf0..2e8d5a514 100644 --- a/src/views/collections/CollectionDockingView.tsx +++ b/src/views/collections/CollectionDockingView.tsx @@ -96,7 +96,7 @@ export class CollectionDockingView extends CollectionViewBase { const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); for (var i: number = 0; i < value.length; i++) { if (value[i].Id === component) { - return (); + return (); } } if (component === "text") { @@ -237,7 +237,7 @@ export class CollectionDockingView extends CollectionViewBase { container.getElement().html("
"); setTimeout(function () { ReactDOM.render(( - // bcz: need to fill in DocumentContentsView with value of DocumentContents when created... + ), document.getElementById(containingDiv) ); diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx index d266a55d9..abc811642 100644 --- a/src/views/collections/CollectionFreeFormView.tsx +++ b/src/views/collections/CollectionFreeFormView.tsx @@ -198,7 +198,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
{value.map(doc => { - return (); + return (); })}
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx index b2ff95329..19b1434ef 100644 --- a/src/views/collections/CollectionSchemaView.tsx +++ b/src/views/collections/CollectionSchemaView.tsx @@ -20,13 +20,10 @@ export class CollectionSchemaView extends CollectionViewBase { selectedIndex = 0; renderCell = (rowProps: CellInfo) => { - if (!this.props.DocumentViewForCollection) { - return
- } let props: FieldViewProps = { doc: rowProps.value[0], fieldKey: rowProps.value[1], - documentViewContainer: this.props.DocumentViewForCollection + DocumentViewForField: undefined } return ( @@ -78,7 +75,7 @@ export class CollectionSchemaView extends CollectionViewBase { let content; if (this.selectedIndex != -1) { content = () } else { content =
diff --git a/src/views/nodes/CollectionFreeFormDocumentView.tsx b/src/views/nodes/CollectionFreeFormDocumentView.tsx index 78e3325ab..ebe6d411c 100644 --- a/src/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/views/nodes/CollectionFreeFormDocumentView.tsx @@ -215,7 +215,7 @@ export class CollectionFreeFormDocumentView extends DocumentView { onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown}> - +
); } diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 7ff1ef5cc..9a3783fdc 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -20,7 +20,7 @@ const JsxParser = require('react-jsx-parser').default;//TODO Why does this need export interface DocumentViewProps { Document: Document; ContainingCollectionView: Opt; - DocumentContentsView: Opt + DocumentView: Opt } @observer export class DocumentView extends React.Component { @@ -111,7 +111,7 @@ export class DocumentView extends React.Component { // if this collection view is nested within another collection view, then // first transform the local point into the parent collection's coordinate space. - let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.DocumentViewForCollection : undefined;//.ContainingDocumentContentsView; + let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.DocumentViewForCollection : undefined; if (containingDocView != undefined) { let ss = containingDocView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); let panxx = containingDocView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss; @@ -130,8 +130,8 @@ export class DocumentView extends React.Component { for (const key of this.layoutKeys) { bindings[key.Name + "Key"] = key; } - if (this.props.DocumentContentsView == undefined) - bindings.DocumentContentsView = this; + if (this.props.DocumentView == undefined) + bindings.DocumentView = this; for (const key of this.layoutFields) { let field = doc.GetField(key); if (field) { diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx index 370f6d324..2a2355a23 100644 --- a/src/views/nodes/FieldView.tsx +++ b/src/views/nodes/FieldView.tsx @@ -20,12 +20,12 @@ import { DocumentView } from "./DocumentView"; export interface FieldViewProps { fieldKey: Key; doc: Document; - documentViewContainer: DocumentView + DocumentViewForField: Opt } @observer export class FieldView extends React.Component { - public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} documentViewContainer={DocumentContentsView} fieldKey={DataKey} />`; } + public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; } @computed get field(): Opt { const { doc, fieldKey } = this.props; diff --git a/src/views/nodes/FormattedTextBox.tsx b/src/views/nodes/FormattedTextBox.tsx index d51e91315..9c4b24226 100644 --- a/src/views/nodes/FormattedTextBox.tsx +++ b/src/views/nodes/FormattedTextBox.tsx @@ -109,7 +109,7 @@ export class FormattedTextBox extends React.Component { } onPointerDown = (e: React.PointerEvent): void => { let me = this; - if (e.buttons === 1 && me.props.documentViewContainer instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(me.props.documentViewContainer)) { + if (e.buttons === 1 && me.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(me.props.DocumentViewForField)) { e.stopPropagation(); } } diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx index cced95c89..dd201f20f 100644 --- a/src/views/nodes/ImageBox.tsx +++ b/src/views/nodes/ImageBox.tsx @@ -39,7 +39,7 @@ export class ImageBox extends React.Component { onPointerDown = (e: React.PointerEvent): void => { if (Date.now() - this._lastTap < 300) { - if (e.buttons === 1 && this.props.documentViewContainer instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) { + if (e.buttons === 1 && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) { e.stopPropagation(); this._downX = e.clientX; this._downY = e.clientY; @@ -67,7 +67,7 @@ export class ImageBox extends React.Component { const images = [path,]; var lightbox = () => { const { photoIndex } = this.state; - if (this.state.isOpen && this.props.documentViewContainer instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) { + if (this.state.isOpen && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) { return ( Date: Tue, 5 Feb 2019 12:18:52 -0500 Subject: naming changes --- src/views/collections/CollectionDockingView.tsx | 4 ++-- src/views/collections/CollectionFreeFormView.tsx | 8 ++++---- src/views/collections/CollectionSchemaView.tsx | 4 +--- src/views/collections/CollectionViewBase.tsx | 14 +++++++++----- src/views/nodes/DocumentView.tsx | 15 +++++++-------- 5 files changed, 23 insertions(+), 22 deletions(-) (limited to 'src') diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx index 2e8d5a514..92b5e563c 100644 --- a/src/views/collections/CollectionDockingView.tsx +++ b/src/views/collections/CollectionDockingView.tsx @@ -69,7 +69,7 @@ export class CollectionDockingView extends CollectionViewBase { @action onResize = (event: any) => { - var cur = this.props.DocumentViewForCollection!.MainContent.current; + var cur = this.props.ContainingDocumentView!.MainContent.current; // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed CollectionDockingView.myLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height); @@ -255,7 +255,7 @@ export class CollectionDockingView extends CollectionViewBase { const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes. - var s = this.props.DocumentViewForCollection != undefined ? this.props.DocumentViewForCollection!.ScalingToScreenSpace : 1; + var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1; var w = Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)) / s; var h = Document.GetFieldValue(KeyStore.Height, NumberField, Number(0)) / s; diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx index abc811642..cc907b2cc 100644 --- a/src/views/collections/CollectionFreeFormView.tsx +++ b/src/views/collections/CollectionFreeFormView.tsx @@ -39,7 +39,7 @@ export class CollectionFreeFormView extends CollectionViewBase { const xOffset = de.data["xOffset"] as number || 0; const yOffset = de.data["yOffset"] as number || 0; const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!); - let sscale = this.props.DocumentViewForCollection!.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)) + let sscale = this.props.ContainingDocumentView!.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)) const screenX = de.x - xOffset; const screenY = de.y - yOffset; const docX = (screenX - translateX) / sscale / scale; @@ -94,7 +94,7 @@ export class CollectionFreeFormView extends CollectionViewBase { if (!e.cancelBubble && this.active) { e.preventDefault(); e.stopPropagation(); - let currScale: number = this.props.DocumentViewForCollection!.ScalingToScreenSpace; + let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace; let x = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); let y = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); this.props.DocumentForCollection.SetFieldValue(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField); @@ -108,7 +108,7 @@ export class CollectionFreeFormView extends CollectionViewBase { onPointerWheel = (e: React.WheelEvent): void => { e.stopPropagation(); - let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.DocumentViewForCollection!.TransformToLocalPoint(e.pageX, e.pageY); + let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY); var deltaScale = (1 - (e.deltaY / 1000)) * Ss; @@ -198,7 +198,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
{value.map(doc => { - return (); + return (); })}
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx index 19b1434ef..8503aaf1e 100644 --- a/src/views/collections/CollectionSchemaView.tsx +++ b/src/views/collections/CollectionSchemaView.tsx @@ -74,9 +74,7 @@ export class CollectionSchemaView extends CollectionViewBase { [KS.Title, KS.Data, KS.Author]) let content; if (this.selectedIndex != -1) { - content = () + content = () } else { content =
} diff --git a/src/views/collections/CollectionViewBase.tsx b/src/views/collections/CollectionViewBase.tsx index bfded71d9..76145f12b 100644 --- a/src/views/collections/CollectionViewBase.tsx +++ b/src/views/collections/CollectionViewBase.tsx @@ -9,11 +9,12 @@ import { ContextMenu } from "../ContextMenu"; import React = require("react"); import { DocumentView } from "../nodes/DocumentView"; import { CollectionDockingView } from "./CollectionDockingView"; +import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; export interface CollectionViewProps { - fieldKey: Key; - Document: Document; + CollectionFieldKey: Key; + DocumentForCollection: Document; ContainingDocumentView: Opt; } @@ -22,9 +23,12 @@ export const COLLECTION_BORDER_WIDTH = 2; @observer export class CollectionViewBase extends React.Component { + public static LayoutString(collectionType: string) { + return `<${collectionType} DocumentForCollection={Document} CollectionFieldKey={DataKey} ContainingDocumentView={DocumentView}/>`; + } @computed public get active(): boolean { - var isSelected = (this.props.ContainingDocumentView != undefined && SelectionManager.IsSelected(this.props.ContainingDocumentView)); + var isSelected = (this.props.ContainingDocumentView instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView)); var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this); var topMost = this.props.ContainingDocumentView != undefined && ( this.props.ContainingDocumentView.props.ContainingCollectionView == undefined || @@ -34,14 +38,14 @@ export class CollectionViewBase 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.GetFieldValue(this.props.fieldKey, ListField, new Array()) + const value = this.props.DocumentForCollection.GetFieldValue(this.props.CollectionFieldKey, ListField, new Array()) value.push(doc); } @action removeDocument = (doc: Document): void => { //TODO This won't create the field if it doesn't already exist - const value = this.props.Document.GetFieldValue(this.props.fieldKey, ListField, new Array()) + const value = this.props.DocumentForCollection.GetFieldValue(this.props.CollectionFieldKey, ListField, new Array()) if (value.indexOf(doc) !== -1) { value.splice(value.indexOf(doc), 1) diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 9a3783fdc..7b81752ad 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -19,8 +19,8 @@ const JsxParser = require('react-jsx-parser').default;//TODO Why does this need export interface DocumentViewProps { Document: Document; + DocumentView: Opt // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way? ContainingCollectionView: Opt; - DocumentView: Opt } @observer export class DocumentView extends React.Component { @@ -49,9 +49,9 @@ export class DocumentView extends React.Component { // @computed public get ScalingToScreenSpace(): number { - if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.DocumentViewForCollection != undefined) { + if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) { let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); - return this.props.ContainingCollectionView.props.DocumentViewForCollection.ScalingToScreenSpace * ss; + return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss; } return 1; } @@ -62,8 +62,8 @@ export class DocumentView extends React.Component { public TransformToLocalPoint(screenX: number, screenY: number) { // if this collection view is nested within another collection view, then // first transform the screen point into the parent collection's coordinate space. - let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.DocumentViewForCollection != undefined ? - this.props.ContainingCollectionView.props.DocumentViewForCollection.TransformToLocalPoint(screenX, screenY) : + let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != undefined ? + this.props.ContainingCollectionView.props.ContainingDocumentView.TransformToLocalPoint(screenX, screenY) : { LocalX: screenX, LocalY: screenY }; let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH; let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH; @@ -111,7 +111,7 @@ export class DocumentView extends React.Component { // if this collection view is nested within another collection view, then // first transform the local point into the parent collection's coordinate space. - let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.DocumentViewForCollection : undefined; + let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined; if (containingDocView != undefined) { let ss = containingDocView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); let panxx = containingDocView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss; @@ -130,8 +130,7 @@ export class DocumentView extends React.Component { for (const key of this.layoutKeys) { bindings[key.Name + "Key"] = key; } - if (this.props.DocumentView == undefined) - bindings.DocumentView = this; + bindings.DocumentView = this; for (const key of this.layoutFields) { let field = doc.GetField(key); if (field) { -- cgit v1.2.3-70-g09d2 From 6e66f8b227c730e07863a93a8bce5ee0d51d2ddc Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 5 Feb 2019 12:29:57 -0500 Subject: working refactored version. --- src/Main.tsx | 4 ++-- src/views/nodes/DocumentView.tsx | 8 +++----- 2 files changed, 5 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/Main.tsx b/src/Main.tsx index b72083ee6..247733d3a 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -66,14 +66,14 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { if (!mainNodes) { mainNodes = new ListField(); } - mainNodes.Data.push(doc1); + // mainNodes.Data.push(doc6); // mainNodes.Data.push(doc2); mainNodes.Data.push(doc4); // mainNodes.Data.push(doc3); // mainNodes.Data.push(doc5); // mainNodes.Data.push(doc1); //mainNodes.Data.push(doc2); - mainNodes.Data.push(doc7); + mainNodes.Data.push(doc6); mainContainer.SetField(KeyStore.Data, mainNodes); } //); diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 7b81752ad..a1262e2ba 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -130,7 +130,8 @@ export class DocumentView extends React.Component { for (const key of this.layoutKeys) { bindings[key.Name + "Key"] = key; } - bindings.DocumentView = this; + if (bindings.DocumentView === undefined) + bindings.DocumentView = this; for (const key of this.layoutFields) { let field = doc.GetField(key); if (field) { @@ -138,10 +139,7 @@ export class DocumentView extends React.Component { } } return ( -
+