diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/DocumentDecorations.scss | 2 | ||||
| -rw-r--r-- | src/Main.tsx | 7 | ||||
| -rw-r--r-- | src/views/collections/CollectionDockingView.tsx | 52 | ||||
| -rw-r--r-- | src/views/collections/CollectionFreeFormView.tsx | 19 | ||||
| -rw-r--r-- | src/views/nodes/DocumentView.tsx | 78 | ||||
| -rw-r--r-- | src/views/nodes/FieldTextBox.tsx | 37 |
6 files changed, 98 insertions, 97 deletions
diff --git a/src/DocumentDecorations.scss b/src/DocumentDecorations.scss index 2840d782b..252b0f53f 100644 --- a/src/DocumentDecorations.scss +++ b/src/DocumentDecorations.scss @@ -10,7 +10,7 @@ .documentDecorations-resizer { pointer-events: auto; background: lightblue; - opacity: 0.8; + opacity: 0.4; } #documentDecorations-topLeftResizer, #documentDecorations-bottomRightResizer { diff --git a/src/Main.tsx b/src/Main.tsx index 02b866753..73fc06941 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -56,7 +56,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { x: 650, y: 500, width: 600, height: 600, title: "cat" }); let docset2 = new Array<Document>(doc4, doc1, doc3); - let doc6 = Documents.DockDocument(docset2, { + let doc6 = Documents.CollectionDocument(docset2, { x: 350, y: 100, width: 600, height: 600, title: "docking collection" }); let mainNodes = null;// mainContainer.GetFieldT(KeyStore.Data, ListField); @@ -69,15 +69,14 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { // mainNodes.Data.push(doc3); mainNodes.Data.push(doc5); // mainNodes.Data.push(doc1); - mainNodes.Data.push(doc2); - //mainNodes.Data.push(doc6); + //mainNodes.Data.push(doc2); + mainNodes.Data.push(doc6); mainContainer.SetField(KeyStore.Data, mainNodes); } //); ReactDOM.render(( <div style={{ display: "grid" }}> - <h1>Dash Web</h1> <DocumentView Document={mainContainer} ContainingCollectionView={undefined} ContainingDocumentView={undefined} /> <DocumentDecorations /> <ContextMenu /> diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx index fd492503d..f08bdaab4 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, CollectionViewProps } from "../nodes/DocumentView"; +import { DocumentView, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "../nodes/DocumentView"; import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { SSL_OP_SINGLE_DH_USE } from "constants"; @@ -52,9 +52,6 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> super(props); } - public static BORDER_WIDTH = 2; - public static TAB_HEADER_HEIGHT = 20; - @computed public get active(): boolean { var isSelected = (this.props.ContainingDocumentView != undefined && SelectionManager.IsSelected(this.props.ContainingDocumentView)); @@ -169,35 +166,24 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> var w = Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)) / s; var h = Document.GetFieldValue(KeyStore.Height, NumberField, Number(0)) / s; - if (CollectionDockingView.UseGoldenLayout) { - return ( - <div className="border" style={{ - borderStyle: "solid", - borderWidth: `${CollectionDockingView.BORDER_WIDTH}px`, - }}> - <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef} - style={{ - width: "100%", - height: "100%" - }} > - </div> - </div> - ); - } else { - return ( - <div className="border" style={{ - borderStyle: "solid", - borderWidth: `${CollectionDockingView.BORDER_WIDTH}px`, - }}> - <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef} - style={{ - width: s > 1 ? "100%" : w - 2 * CollectionDockingView.BORDER_WIDTH, - height: s > 1 ? "100%" : h - 2 * CollectionDockingView.BORDER_WIDTH - }} > - <FlexLayout.Layout model={this.modelForFlexLayout} factory={this.flexLayoutFactory} /> - </div> - </div> - ); + var chooseLayout = () => { + if (!CollectionDockingView.UseGoldenLayout) + return <FlexLayout.Layout model={this.modelForFlexLayout} factory={this.flexLayoutFactory} />; } + + return ( + <div className="border" style={{ + borderStyle: "solid", + borderWidth: `${COLLECTION_BORDER_WIDTH}px`, + }}> + <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef} + style={{ + width: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : w - 2 * COLLECTION_BORDER_WIDTH, + height: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : h - 2 * COLLECTION_BORDER_WIDTH + }} > + {chooseLayout()} + </div> + </div> + ); } }
\ No newline at end of file diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx index 736bcb786..58e694698 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, CollectionViewProps } from "../nodes/DocumentView"; +import { DocumentView, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "../nodes/DocumentView"; import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { SSL_OP_SINGLE_DH_USE } from "constants"; @@ -24,8 +24,6 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> super(props); } - public static BORDER_WIDTH = 2; - @computed public get active(): boolean { var isSelected = (this.props.ContainingDocumentView != undefined && SelectionManager.IsSelected(this.props.ContainingDocumentView)); @@ -45,9 +43,14 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> } const xOffset = de.data[ "xOffset" ] as number || 0; const yOffset = de.data[ "yOffset" ] as number || 0; - let { LocalX, LocalY } = this.props.ContainingDocumentView!.TransformToLocalPoint(de.x - xOffset, de.y - yOffset); - doc.x = LocalX; - doc.y = LocalY; + const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!); + 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; + const docY = (screenY - translateY) / sscale / scale; + doc.x = docX; + doc.y = docY; } e.stopPropagation(); } @@ -181,11 +184,11 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> return ( <div className="border" style={{ borderStyle: "solid", - borderWidth: `${CollectionFreeFormView.BORDER_WIDTH}px`, + borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }}> <div className="collectionfreeformview-container" onPointerDown={this.onPointerDown} onWheel={this.onPointerWheel} onContextMenu={(e) => e.preventDefault()} style={{ width: "100%", - height: `calc(100% - 2*${CollectionFreeFormView.BORDER_WIDTH}px)`, + height: `calc(100% - 2*${COLLECTION_BORDER_WIDTH}px)`, }} onDrop={this.onDrop} onDragOver={this.onDragOver} ref={this._containerRef}> <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${currScale}, ${currScale})`, transformOrigin: `left, top` }} ref={this._canvasRef}> diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 1e4cc1cca..3c4dfa36f 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -1,19 +1,20 @@ +import { action, computed } from "mobx"; import { observer } from "mobx-react"; -import React = require("react"); -import { computed, observable, action } from "mobx"; -import { KeyStore, Key } from "../../fields/Key"; +import { Document } from "../../fields/Document"; +import { Opt } from "../../fields/Field"; +import { Key, KeyStore } from "../../fields/Key"; +import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { TextField } from "../../fields/TextField"; -import { ListField } from "../../fields/ListField"; -import { FieldTextBox } from "../nodes/FieldTextBox" -import { Document } from "../../fields/Document"; -import { CollectionFreeFormView } from "../collections/CollectionFreeFormView" -import { CollectionDockingView } from "../collections/CollectionDockingView" -import "./NodeView.scss" +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 { ContextMenu } from "../ContextMenu"; -import { Opt } from "../../fields/Field"; -import { DragManager } from "../../util/DragManager"; +import { FieldTextBox } from "../nodes/FieldTextBox"; +import "./NodeView.scss"; +import React = require("react"); const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? interface DocumentViewProps { @@ -28,13 +29,7 @@ export interface CollectionViewProps { ContainingDocumentView: Opt<DocumentView>; } -// these properties are set via the render() method of the DocumentView when it creates this node. -// However, these properties are set below in the LayoutString() static method -export interface DocumentFieldViewProps { - fieldKey: Key; - doc: Document; - containingDocumentView: DocumentView -} +export const COLLECTION_BORDER_WIDTH = 2; interface CollectionView { addDocument: (doc: Document) => void; @@ -169,20 +164,25 @@ export class DocumentView extends React.Component<DocumentViewProps> { // Converts a coordinate in the screen space of the app into a local document coordinate. // public TransformToLocalPoint(screenX: number, screenY: number) { - let ContainerX = screenX - CollectionFreeFormView.BORDER_WIDTH; - let ContainerY = screenY - CollectionFreeFormView.BORDER_WIDTH; - // if this collection view is nested within another collection view, then // first transform the screen point into the parent collection's coordinate space. - if (this.props.ContainingDocumentView != undefined) { - let { LocalX, LocalY } = this.props.ContainingDocumentView!.TransformToLocalPoint(screenX, screenY); - ContainerX = LocalX - CollectionFreeFormView.BORDER_WIDTH; - ContainerY = LocalY - CollectionFreeFormView.BORDER_WIDTH; + 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 dockingViewChromeHack = this.props.ContainingCollectionView instanceof CollectionDockingView; - let Xx = dockingViewChromeHack ? 0 : this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0)); - let Yy = dockingViewChromeHack ? CollectionDockingView.TAB_HEADER_HEIGHT : this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0)); 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)); @@ -197,11 +197,19 @@ export class DocumentView extends React.Component<DocumentViewProps> { // public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): { ScreenX: number, ScreenY: number } { - let dockingViewChromeHack = this.props.ContainingCollectionView instanceof CollectionDockingView; - let W = CollectionFreeFormView.BORDER_WIDTH; // this.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)); - let H = CollectionFreeFormView.BORDER_WIDTH; - let Xx = dockingViewChromeHack ? 0 : this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0)); - let Yy = dockingViewChromeHack ? CollectionDockingView.TAB_HEADER_HEIGHT : this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0)); + 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; @@ -210,8 +218,8 @@ export class DocumentView extends React.Component<DocumentViewProps> { 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)) + CollectionFreeFormView.BORDER_WIDTH * ss; - let panyy = containingDocView.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)) + CollectionFreeFormView.BORDER_WIDTH * ss; + 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; diff --git a/src/views/nodes/FieldTextBox.tsx b/src/views/nodes/FieldTextBox.tsx index 20dfde1d2..45493f0ec 100644 --- a/src/views/nodes/FieldTextBox.tsx +++ b/src/views/nodes/FieldTextBox.tsx @@ -1,23 +1,28 @@ -import { Key, KeyStore } from "../../fields/Key"; -import { Document } from "../../fields/Document"; -import { observer } from "mobx-react"; -import { TextField } from "../../fields/TextField"; -import React = require("react") -import { action, observable, reaction, IReactionDisposer } from "mobx"; - +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 { keymap } from "prosemirror-keymap" -import { baseKeymap } from "prosemirror-commands" -import { undo, redo, history } from "prosemirror-history" +import { EditorState, Transaction } from "prosemirror-state"; +import { EditorView } from "prosemirror-view"; +import { Document } from "../../fields/Document"; import { Opt } from "../../fields/Field"; - -import "./FieldTextBox.scss" -import { DocumentFieldViewProps } from "./DocumentView"; +import { Key } from "../../fields/Key"; +import { TextField } from "../../fields/TextField"; import { SelectionManager } from "../../util/SelectionManager"; +import { DocumentView } from "./DocumentView"; +import "./FieldTextBox.scss"; +import React = require("react") - +// +// 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 FieldTextBox's LayoutString() method +// +interface DocumentFieldViewProps { + fieldKey: Key; + doc: Document; + containingDocumentView: DocumentView +} // FieldTextBox: Displays an editable plain text node that maps to a specified Key of a Document // |