diff options
Diffstat (limited to 'src/client/views/collections')
4 files changed, 41 insertions, 56 deletions
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index b8e040388..d9e261f55 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -2,7 +2,7 @@ import { observer } from "mobx-react"; import { KeyStore } from "../../../fields/KeyStore"; import React = require("react"); import FlexLayout from "flexlayout-react"; -import { action, observable, computed } from "mobx"; +import { action, computed } from "mobx"; import { Document } from "../../../fields/Document"; import { DocumentView } from "../nodes/DocumentView"; import { ListField } from "../../../fields/ListField"; @@ -13,17 +13,18 @@ import 'golden-layout/src/css/goldenlayout-dark-theme.css'; import * as GoldenLayout from "golden-layout"; import * as ReactDOM from 'react-dom'; import { DragManager } from "../../util/DragManager"; -import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; +import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; +import { FieldView } from "../nodes/FieldView"; @observer export class CollectionDockingView extends CollectionViewBase { private static UseGoldenLayout = true; - public static LayoutString() { return CollectionViewBase.LayoutString("CollectionDockingView"); } + public static LayoutString() { return FieldView.LayoutString(CollectionDockingView) } private _containerRef = React.createRef<HTMLDivElement>(); @computed private get modelForFlexLayout() { - const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; + const { fieldKey: fieldKey, doc: Document } = this.props; const value: Document[] = Document.GetData(fieldKey, ListField, []); var docs = value.map(doc => { return { type: 'tabset', weight: 50, selected: 0, children: [{ type: "tab", name: doc.Title, component: doc.Id }] }; @@ -39,7 +40,7 @@ export class CollectionDockingView extends CollectionViewBase { } @computed private get modelForGoldenLayout(): any { - const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; + const { fieldKey: fieldKey, doc: Document } = this.props; const value: Document[] = Document.GetData(fieldKey, ListField, []); var docs = value.map(doc => { return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } }; @@ -50,9 +51,6 @@ export class CollectionDockingView extends CollectionViewBase { }, content: [{ type: 'row', content: docs }] }); } - constructor(props: CollectionViewProps) { - super(props); - } componentDidMount: () => void = () => { if (this._containerRef.current && CollectionDockingView.UseGoldenLayout) { @@ -67,8 +65,8 @@ export class CollectionDockingView extends CollectionViewBase { @action - onResize = (event: any) => { - var cur = this.props.ContainingDocumentView!.MainContent.current; + onResize = () => { + var cur = this.props.DocumentViewForField!.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); @@ -91,7 +89,7 @@ export class CollectionDockingView extends CollectionViewBase { if (component === "button") { return <button>{node.getName()}</button>; } - const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; + const { fieldKey: fieldKey, doc: Document } = this.props; const value: Document[] = Document.GetData(fieldKey, ListField, []); for (var i: number = 0; i < value.length; i++) { if (value[i].Id === component) { @@ -195,7 +193,6 @@ export class CollectionDockingView extends CollectionViewBase { goldenLayoutFactory() { CollectionDockingView.myLayout = this.modelForGoldenLayout; - var layout = CollectionDockingView.myLayout; CollectionDockingView.myLayout.on('tabCreated', function (tab: any) { if (CollectionDockingView._dragDiv) { CollectionDockingView._dragDiv.removeChild(CollectionDockingView._dragElement); @@ -251,10 +248,9 @@ export class CollectionDockingView extends CollectionViewBase { render() { - const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; - const value: Document[] = Document.GetData(fieldKey, ListField, []); + const { fieldKey: fieldKey, doc: Document } = this.props; // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes. - var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1; + var s = this.props.DocumentViewForField != undefined ? this.props.DocumentViewForField!.ScalingToScreenSpace : 1; var w = Document.GetData(KeyStore.Width, NumberField, Number(0)) / s; var h = Document.GetData(KeyStore.Height, NumberField, Number(0)) / s; diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index e3a43aa5b..e6b1d103d 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -5,7 +5,7 @@ import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocum import { DragManager } from "../../util/DragManager"; import "./CollectionFreeFormView.scss"; import { Utils } from "../../../Utils"; -import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; +import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; import { SelectionManager } from "../../util/SelectionManager"; import { KeyStore } from "../../../fields/KeyStore"; import { Document } from "../../../fields/Document"; @@ -13,19 +13,17 @@ import { ListField } from "../../../fields/ListField"; import { NumberField } from "../../../fields/NumberField"; import { Documents } from "../../documents/Documents"; import { FieldWaiting } from "../../../fields/Field"; +import { FakeJsxArgs } from "../nodes/DocumentView"; +import { FieldView } from "../nodes/FieldView"; @observer export class CollectionFreeFormView extends CollectionViewBase { - public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); } + public static LayoutString() { return FieldView.LayoutString(CollectionFreeFormView); } private _canvasRef = React.createRef<HTMLDivElement>(); private _nodeContainerRef = React.createRef<HTMLDivElement>(); private _lastX: number = 0; private _lastY: number = 0; - constructor(props: CollectionViewProps) { - super(props); - } - @action drop = (e: Event, de: DragManager.DropEvent) => { const doc = de.data["document"]; @@ -38,7 +36,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.ContainingDocumentView!.props.Document.GetData(KeyStore.Scale, NumberField, Number(1)) + let sscale = this.props.DocumentViewForField!.props.Document.GetData(KeyStore.Scale, NumberField, Number(1)) const screenX = de.x - xOffset; const screenY = de.y - yOffset; const docX = (screenX - translateX) / sscale / scale; @@ -91,11 +89,11 @@ export class CollectionFreeFormView extends CollectionViewBase { if (!e.cancelBubble && this.active) { e.preventDefault(); e.stopPropagation(); - let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace; - let x = this.props.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0)); - let y = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0)); - this.props.DocumentForCollection.SetData(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField); - this.props.DocumentForCollection.SetData(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField); + let currScale: number = this.props.DocumentViewForField!.ScalingToScreenSpace; + let x = this.props.doc.GetData(KeyStore.PanX, NumberField, Number(0)); + let y = this.props.doc.GetData(KeyStore.PanY, NumberField, Number(0)); + this.props.doc.SetData(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField); + this.props.doc.SetData(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField); } this._lastX = e.pageX; this._lastY = e.pageY; @@ -105,7 +103,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.DocumentViewForField!.TransformToLocalPoint(e.pageX, e.pageY); var deltaScale = (1 - (e.deltaY / 1000)) * Ss; @@ -115,9 +113,9 @@ export class CollectionFreeFormView extends CollectionViewBase { let dx = ContainerX - newContainerX; let dy = ContainerY - newContainerY; - this.props.DocumentForCollection.Set(KeyStore.Scale, new NumberField(deltaScale)); - this.props.DocumentForCollection.SetData(KeyStore.PanX, Panxx + dx, NumberField); - this.props.DocumentForCollection.SetData(KeyStore.PanY, Panyy + dy, NumberField); + this.props.doc.Set(KeyStore.Scale, new NumberField(deltaScale)); + this.props.doc.SetData(KeyStore.PanX, Panxx + dx, NumberField); + this.props.doc.SetData(KeyStore.PanY, Panyy + dy, NumberField); } @action @@ -127,8 +125,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.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0)); - const pany: number = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0)); + const panx: number = this.props.doc.GetData(KeyStore.PanX, NumberField, Number(0)); + const pany: number = this.props.doc.GetData(KeyStore.PanY, NumberField, Number(0)); let x = e.pageX - panx let y = e.pageY - pany @@ -138,11 +136,11 @@ export class CollectionFreeFormView extends CollectionViewBase { let doc = Documents.ImageDocument(url, { x: x, y: y }) - let docs = that.props.DocumentForCollection.GetT(KeyStore.Data, ListField); + let docs = that.props.doc.GetT(KeyStore.Data, ListField); if (docs != FieldWaiting) { if (!docs) { docs = new ListField<Document>(); - that.props.DocumentForCollection.Set(KeyStore.Data, docs) + that.props.doc.Set(KeyStore.Data, docs) } docs.Data.push(doc); } @@ -159,7 +157,7 @@ export class CollectionFreeFormView extends CollectionViewBase { @action bringToFront(doc: CollectionFreeFormDocumentView) { - const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; + const { fieldKey: fieldKey, doc: Document } = this.props; const value: Document[] = Document.GetList<Document>(fieldKey, []); var topmost = value.reduce((topmost, d) => Math.max(d.GetNumber(KeyStore.ZIndex, 0), topmost), -1000); @@ -176,7 +174,7 @@ export class CollectionFreeFormView extends CollectionViewBase { } render() { - const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; + const { fieldKey: fieldKey, doc: Document } = this.props; // const value: Document[] = Document.GetList<Document>(fieldKey, []); const lvalue = Document.GetT<ListField<Document>>(fieldKey, ListField); if (!lvalue || lvalue === "<Waiting>") { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 8a1e21847..9f32ccb72 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -17,7 +17,7 @@ import { Field } from "../../../fields/Field"; @observer export class CollectionSchemaView extends CollectionViewBase { - public static LayoutString() { return CollectionViewBase.LayoutString("CollectionSchemaView"); } + public static LayoutString() { return FieldView.LayoutString(CollectionSchemaView); } @observable selectedIndex = 0; @@ -97,7 +97,7 @@ export class CollectionSchemaView extends CollectionViewBase { } render() { - const { DocumentForCollection: Document, CollectionFieldKey: fieldKey } = this.props; + const { doc: Document, fieldKey: fieldKey } = this.props; const children = Document.GetList<Document>(fieldKey, []); const columns = Document.GetList(KS.ColumnsKey, [KS.Title, KS.Data, KS.Author]) diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 8bb10b743..4fcbb1699 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -10,42 +10,33 @@ import React = require("react"); import { DocumentView } from "../nodes/DocumentView"; import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; - - -export interface CollectionViewProps { - CollectionFieldKey: Key; - DocumentForCollection: Document; - ContainingDocumentView: Opt<DocumentView>; -} +import { FieldViewProps } from "../nodes/FieldView"; export const COLLECTION_BORDER_WIDTH = 2; @observer -export class CollectionViewBase extends React.Component<CollectionViewProps> { +export class CollectionViewBase extends React.Component<FieldViewProps> { - public static LayoutString(collectionType: string) { - return `<${collectionType} DocumentForCollection={Document} CollectionFieldKey={DataKey} ContainingDocumentView={DocumentView}/>`; - } @computed public get active(): boolean { - var isSelected = (this.props.ContainingDocumentView instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView)); + var isSelected = (this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)); var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this); - var topMost = this.props.ContainingDocumentView != undefined && ( - this.props.ContainingDocumentView.props.ContainingCollectionView == undefined || - this.props.ContainingDocumentView.props.ContainingCollectionView instanceof CollectionDockingView); + var topMost = this.props.DocumentViewForField != undefined && ( + this.props.DocumentViewForField.props.ContainingCollectionView == undefined || + this.props.DocumentViewForField.props.ContainingCollectionView instanceof CollectionDockingView); return isSelected || childSelected || topMost; } @action addDocument = (doc: Document): void => { //TODO This won't create the field if it doesn't already exist - const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>()) + const value = this.props.doc.GetData(this.props.fieldKey, ListField, new Array<Document>()) 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.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>()) + const value = this.props.doc.GetData(this.props.fieldKey, ListField, new Array<Document>()) if (value.indexOf(doc) !== -1) { value.splice(value.indexOf(doc), 1) |