From 46a3ba510a02464b27b806af8fd1131dbc3da242 Mon Sep 17 00:00:00 2001 From: bob 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