From 963f137f10e6f08cc449b181c920069dc7cfd394 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Tue, 19 Feb 2019 05:19:50 -0500 Subject: Changed some names, added some comments, and got rid of some unused stuff --- src/client/views/collections/CollectionSchemaView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 9a0ce0782..5c95aca99 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -104,7 +104,7 @@ export class CollectionSchemaView extends CollectionViewBase { @observable private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView render() { - const { DocumentForCollection: Document, CollectionFieldKey: fieldKey } = this.props; + const { Document: Document, fieldKey: fieldKey } = this.props; const children = Document.GetList(fieldKey, []); const columns = Document.GetList(KS.ColumnsKey, [KS.Title, KS.Data, KS.Author]) @@ -126,7 +126,7 @@ export class CollectionSchemaView extends CollectionViewBase { ScreenToLocalTransform={() => Transform.Identity}//TODO This should probably be an actual transform Scaling={this._parentScaling} isTopMost={false} - DocumentView={undefined} ContainingCollectionView={me} /> + ContainingCollectionView={me} /> } -- cgit v1.2.3-70-g09d2 From 54074b3faf9b36e86bf2555865c8e42447a9de06 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 19 Feb 2019 22:27:18 -0500 Subject: fixed loading document views when the document isn't loaded --- .../views/collections/CollectionSchemaView.tsx | 27 +++++++++++----------- src/client/views/nodes/DocumentView.tsx | 2 ++ 2 files changed, 15 insertions(+), 14 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 719783fd7..532ae1994 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,25 +1,24 @@ import React = require("react") -import ReactTable, { ReactTableDefaults, CellInfo, ComponentPropsGetterRC, ComponentPropsGetterR } from "react-table"; +import { action, observable } from "mobx"; import { observer } from "mobx-react"; -import { FieldView, FieldViewProps } from "../nodes/FieldView"; -import "react-table/react-table.css" -import { observable, action, computed } from "mobx"; -import SplitPane from "react-split-pane" -import "./CollectionSchemaView.scss" -import { ScrollBox } from "../../util/ScrollBox"; -import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; -import { DocumentView } from "../nodes/DocumentView"; -import { EditableView } from "../EditableView"; -import { CompileScript, ToField } from "../../util/Scripting"; -import { KeyStore } from "../../../fields/KeyStore"; +import Measure from "react-measure"; +import SplitPane from "react-split-pane"; +import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; +import "react-table/react-table.css"; import { Document } from "../../../fields/Document"; import { Field } from "../../../fields/Field"; +import { KeyStore } from "../../../fields/KeyStore"; +import { CompileScript, ToField } from "../../util/Scripting"; import { Transform } from "../../util/Transform"; -import Measure from "react-measure"; +import { EditableView } from "../EditableView"; +import { DocumentView } from "../nodes/DocumentView"; +import { FieldView, FieldViewProps } from "../nodes/FieldView"; +import "./CollectionSchemaView.scss"; +import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; @observer export class CollectionSchemaView extends CollectionViewBase { - public static LayoutString() { return FieldView.LayoutString(CollectionSchemaView); } + public static LayoutString(fieldKey: string = "DataKey") { return CollectionViewBase.LayoutString("CollectionSchemaView", fieldKey); } @observable selectedIndex = 0; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 3a4dbb2d5..e9b1d5c8a 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -249,6 +249,8 @@ export class DocumentView extends React.Component { return this.props.ScreenToLocalTransform().transform(Transform.Identity.scale(1 / this.props.Scaling)); } render() { + if (!this.props.Document) + return
let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField); if (!lkeys || lkeys === "") { return

Error loading layout keys

; -- cgit v1.2.3-70-g09d2 From b78001e230970ccbe62c4cd3418aea5f4b288218 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 20 Feb 2019 01:24:09 -0500 Subject: switched from a SplitPane to a simple div --- .../views/collections/CollectionSchemaView.scss | 12 +++++ .../views/collections/CollectionSchemaView.tsx | 53 ++++++++++++++++------ 2 files changed, 51 insertions(+), 14 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 633e3ca1b..1e6a6a279 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -5,6 +5,15 @@ position: absolute; width: 100%; height: 100%; + ::-webkit-scrollbar { + -webkit-appearance: none; + width: 10px; + } + ::-webkit-scrollbar-thumb { + border-radius: 5px; + background-color: rgba(0,0,0,.5); + } + .collectionfreeformview-container { border-width: 0px; .collectionfreeformview > .jsx-parser{ @@ -24,6 +33,9 @@ background: white; box-sizing: border-box; } + .ReactTable .rt-table { + overflow: unset + } .ReactTable .rt-thead.-header { background:grey; } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 532ae1994..597a97222 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -15,14 +15,20 @@ import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; +import { relative } from "path"; @observer export class CollectionSchemaView extends CollectionViewBase { public static LayoutString(fieldKey: string = "DataKey") { return CollectionViewBase.LayoutString("CollectionSchemaView", fieldKey); } + private _mainCont = React.createRef(); + @observable selectedIndex = 0; + @observable + _splitPercentage: number = 50; + renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { doc: rowProps.value[0], @@ -83,11 +89,24 @@ export class CollectionSchemaView extends CollectionViewBase { }; } + @action + onDividerMove = (e: PointerEvent): void => { + let nativeWidth = this._mainCont.current!.getBoundingClientRect(); + this._splitPercentage = Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100); + } + + onDividerUp = (e: PointerEvent): void => { + document.removeEventListener("pointermove", this.onDividerMove); + document.removeEventListener('pointerup', this.onDividerUp); + } + onDividerDown = (e: React.PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + document.addEventListener("pointermove", this.onDividerMove); + document.addEventListener('pointerup', this.onDividerUp); + } + onPointerDown = (e: React.PointerEvent) => { - let target = e.target as HTMLElement; - if (target.tagName == "SPAN" && target.className.includes("Resizer")) { - e.stopPropagation(); - } // if (e.button === 2 && this.active) { // e.stopPropagation(); // e.preventDefault(); @@ -107,8 +126,8 @@ export class CollectionSchemaView extends CollectionViewBase { const children = Document.GetList(fieldKey, []); const columns = Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]) - let content; - var me = this; + let content =
+ let me = this; if (this.selectedIndex != -1) { content = ( { @@ -130,13 +149,12 @@ export class CollectionSchemaView extends CollectionViewBase { } ) - } else { - content =
} + let nativeWidth = Document.GetNumber(KeyStore.NativeWidth, 0); return ( -
- +
+
- {content} - -
+
+
+ +
+
+ this._parentScaling = nativeWidth > 0 ? r.entry.width / nativeWidth : 1)}> + {({ measureRef }) =>
{content}
} + +
+
) } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From dd4aa3e6595aba8f421aed7fdcc663c051b509a8 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 20 Feb 2019 10:55:30 -0500 Subject: fixed dragdrop issue. improved selection in schema views, but not fixed fully. --- src/client/util/DragManager.ts | 6 +- src/client/views/DocumentDecorations.tsx | 19 ++-- .../views/collections/CollectionSchemaView.tsx | 110 ++++++++++----------- 3 files changed, 62 insertions(+), 73 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 337ec855a..6d5fe12a7 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -1,3 +1,4 @@ +import { DocumentDecorations } from "../views/DocumentDecorations"; export namespace DragManager { export function Root() { @@ -59,10 +60,8 @@ export namespace DragManager { }; } - - let _lastPointerX: number = 0; - let _lastPointerY: number = 0; export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options: DragOptions) { + DocumentDecorations.Instance.Hidden = true; if (!dragDiv) { dragDiv = document.createElement("div"); DragManager.Root().appendChild(dragDiv); @@ -131,5 +130,6 @@ export namespace DragManager { } })); options.handlers.dragComplete({}); + DocumentDecorations.Instance.Hidden = false; } } \ No newline at end of file diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 770433e27..dccab1dc5 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,9 +1,8 @@ -import { observable, computed } from "mobx"; +import { observable, computed, action } from "mobx"; import React = require("react"); import { SelectionManager } from "../util/SelectionManager"; import { observer } from "mobx-react"; import './DocumentDecorations.scss' -import { CollectionFreeFormView } from "./collections/CollectionFreeFormView"; import { KeyStore } from '../../fields/KeyStore' import { NumberField } from "../../fields/NumberField"; @@ -12,7 +11,7 @@ export class DocumentDecorations extends React.Component { static Instance: DocumentDecorations private _resizer = "" private _isPointerDown = false; - @observable private _opacity = 1; + @observable private _hidden = false; constructor(props: Readonly<{}>) { super(props) @@ -39,14 +38,10 @@ export class DocumentDecorations extends React.Component { }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE }); } - @computed - get opacity(): number { - return this._opacity - } - set opacity(o: number) { - this._opacity = Math.min(Math.max(0, o), 1) - } + @computed + public get Hidden() { return this._hidden; } + public set Hidden(value: boolean) { this._hidden = value; } onPointerDown = (e: React.PointerEvent): void => { e.stopPropagation(); @@ -147,13 +142,15 @@ export class DocumentDecorations extends React.Component { render() { var bounds = this.Bounds; + if (this.Hidden) { + return (null); + } return (
e.preventDefault()}>
e.preventDefault()}>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 597a97222..fa37e0e76 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -2,7 +2,6 @@ import React = require("react") import { action, observable } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; -import SplitPane from "react-split-pane"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; import "react-table/react-table.css"; import { Document } from "../../../fields/Document"; @@ -15,7 +14,6 @@ import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; -import { relative } from "path"; @observer export class CollectionSchemaView extends CollectionViewBase { @@ -67,6 +65,7 @@ export class CollectionSchemaView extends CollectionViewBase { ) } + private getTrProps: ComponentPropsGetterR = (state, rowInfo) => { const that = this; if (!rowInfo) { @@ -75,8 +74,7 @@ export class CollectionSchemaView extends CollectionViewBase { return { onClick: action((e: React.MouseEvent, handleOriginal: Function) => { that.selectedIndex = rowInfo.index; - const doc: Document = rowInfo.original; - console.log("Row clicked: ", doc.Title) + this._splitPercentage += 0.05; // bcz - ugh - needed to force Measure to do its thing and call onResize if (handleOriginal) { handleOriginal() @@ -118,70 +116,64 @@ export class CollectionSchemaView extends CollectionViewBase { } } + innerScreenToLocal(tx: number, ty: number) { + return () => this.props.ScreenToLocalTransform().transform(new Transform(-tx - 5 - COLLECTION_BORDER_WIDTH, -ty - COLLECTION_BORDER_WIDTH, 1)) + } - @observable - private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView + @observable _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView + @observable _dividerX = 0; + @observable _dividerY = 0; render() { - const { Document: Document, fieldKey: fieldKey } = this.props; - const children = Document.GetList(fieldKey, []); - const columns = Document.GetList(KeyStore.ColumnsKey, - [KeyStore.Title, KeyStore.Data, KeyStore.Author]) - let content =
+ const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]) + const children = this.props.Document.GetList(this.props.fieldKey, []); + const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined; let me = this; - if (this.selectedIndex != -1) { - content = ( + let content = this.selectedIndex == -1 || !selected ? (null) : ( + this._parentScaling = r.entry.width / selected.GetNumber(KeyStore.NativeWidth, r.entry.width))}> + {({ measureRef }) => +
+ +
+ } + + ) + return ( +
{ - var doc = children[this.selectedIndex]; - var n = doc.GetNumber(KeyStore.NativeWidth, 0); - if (n > 0 && r.entry.width > 0) { - this._parentScaling = r.entry.width / n; - } + this._dividerX = r.entry.width; })}> {({ measureRef }) => -
- Transform.Identity}//TODO This should probably be an actual transform - Scaling={this._parentScaling} - isTopMost={false} - ContainingCollectionView={me} /> +
+ { + return ( + { + Header: col.Name, + accessor: (doc: Document) => [doc, col], + id: col.Id + }) + })} + column={{ + ...ReactTableDefaults.column, + Cell: this.renderCell + }} + getTrProps={this.getTrProps} + />
} - ) - } - let nativeWidth = Document.GetNumber(KeyStore.NativeWidth, 0); - return ( -
-
- { - return ( - { - Header: col.Name, - accessor: (doc: Document) => [doc, col], - id: col.Id - }) - })} - column={{ - ...ReactTableDefaults.column, - Cell: this.renderCell - }} - getTrProps={this.getTrProps} - /> -
-
- -
-
- this._parentScaling = nativeWidth > 0 ? r.entry.width / nativeWidth : 1)}> - {({ measureRef }) =>
{content}
} - +
+
+ {content}
) -- cgit v1.2.3-70-g09d2 From 3207b098d206f4eb1a3c0f23afdd5cf072c308fb Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 20 Feb 2019 17:29:53 -0500 Subject: working, but oh so confusing transforms for selections. --- src/client/views/DocumentDecorations.tsx | 8 ++-- .../views/collections/CollectionDockingView.tsx | 1 + .../views/collections/CollectionFreeFormView.tsx | 1 + .../views/collections/CollectionSchemaView.tsx | 49 +++++++++++++++++++--- src/client/views/nodes/DocumentView.tsx | 35 ++++++++++++---- 5 files changed, 77 insertions(+), 17 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index dccab1dc5..0aaea7ae5 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -25,11 +25,13 @@ export class DocumentDecorations extends React.Component { if (element.props.isTopMost) { return bounds; } - let transform = element.props.ScreenToLocalTransform().inverse(); + let transform = element.ScreenToLocalTransform().inverse(); var [sptX, sptY] = transform.transformPoint(0, 0); - // var [bptX, bptY] = transform.transformDirection(element.width, element.height); let doc = element.props.Document; - let [bptX, bptY] = [doc.GetNumber(KeyStore.Width, 0), doc.GetNumber(KeyStore.Height, 0)]; + let [bptX, bptY] = [ + element.props.PanelSize[0] > 0 ? element.props.PanelSize[0] : doc.GetNumber(KeyStore.Width, 0), + element.props.PanelSize[1] > 0 ? element.props.PanelSize[1] : doc.GetNumber(KeyStore.Height, 0) + ]; [bptX, bptY] = transform.transformPoint(bptX, bptY); return { x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y), diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index ceb638ab4..fc5b8dacd 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -253,6 +253,7 @@ export class DockedFrameRenderer extends React.Component { AddDocument={undefined} RemoveDocument={undefined} Scaling={this._parentScaling} + PanelSize={[0, 0]} ScreenToLocalTransform={() => { let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont); var props = CollectionDockingView.Instance.props; diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 54757cce5..ffd4d211f 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -247,6 +247,7 @@ export class CollectionFreeFormView extends CollectionViewBase { ScreenToLocalTransform={this.getTransform} isTopMost={false} Scaling={1} + PanelSize={[0, 0]} ContainingCollectionView={this} />); })}
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index fa37e0e76..0c7577421 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,5 +1,5 @@ import React = require("react") -import { action, observable } from "mobx"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; @@ -14,6 +14,7 @@ import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; +import { Z_DEFAULT_COMPRESSION } from "zlib"; @observer export class CollectionSchemaView extends CollectionViewBase { @@ -117,26 +118,63 @@ export class CollectionSchemaView extends CollectionViewBase { } innerScreenToLocal(tx: number, ty: number) { - return () => this.props.ScreenToLocalTransform().transform(new Transform(-tx - 5 - COLLECTION_BORDER_WIDTH, -ty - COLLECTION_BORDER_WIDTH, 1)) + var zoom = this.props.Document.GetNumber(KeyStore.Scale, 1); + var xf = this.props.ScreenToLocalTransform().transform(new Transform(- 5 - COLLECTION_BORDER_WIDTH, - COLLECTION_BORDER_WIDTH, 1)).translate(-tx, -ty); + var center = [0, 0]; + var sabout = new Transform(center[0] / zoom, center[1] / zoom, 1).scaled(1 / this._parentScaling).translated(-center[0] / zoom, -center[1] / zoom); + var total = xf.transformed(sabout); + return () => total + } + @computed + get scale(): number { + return this.props.Document.GetNumber(KeyStore.Scale, 1); + } + @computed + get translate(): [number, number] { + const x = this.props.Document.GetNumber(KeyStore.PanX, 0); + const y = this.props.Document.GetNumber(KeyStore.PanY, 0); + return [x, y]; + } + + getTransform = (): Transform => { + return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this._dividerX - 5, - COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform()) + } + + getLocalTransform = (): Transform => { + const [x, y] = this.translate; + return Transform.Identity.translate(-x, -y).scale(1 / this.scale / this._parentScaling); + } + + @action + setScaling = (r: any) => { + var me = this; + const children = this.props.Document.GetList(this.props.fieldKey, []); + const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined; + this._panelWidth = r.entry.width; + if (r.entry.height) + this._panelHeight = r.entry.height; + me._parentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width); } @observable _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView @observable _dividerX = 0; - @observable _dividerY = 0; + @observable _panelWidth = 0; + @observable _panelHeight = 0; render() { const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]) const children = this.props.Document.GetList(this.props.fieldKey, []); const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined; let me = this; let content = this.selectedIndex == -1 || !selected ? (null) : ( - this._parentScaling = r.entry.width / selected.GetNumber(KeyStore.NativeWidth, r.entry.width))}> + {({ measureRef }) =>
} @@ -146,6 +184,7 @@ export class CollectionSchemaView extends CollectionViewBase {
{ this._dividerX = r.entry.width; + this._panelHeight = r.entry.height; })}> {({ measureRef }) =>
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index e9b1d5c8a..fa39ad09a 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -31,6 +31,7 @@ export interface DocumentViewProps { isTopMost: boolean; //tfs: This shouldn't be necessary I don't think Scaling: number; + PanelSize: number[]; } export interface JsxArgs extends DocumentViewProps { Keys: { [name: string]: Key } @@ -245,8 +246,19 @@ export class DocumentView extends React.Component { SelectionManager.SelectDoc(this, ctrlPressed) } - screenToLocalTransform = () => { - return this.props.ScreenToLocalTransform().transform(Transform.Identity.scale(1 / this.props.Scaling)); + ScreenToLocalTransform = () => { + return this.props.PanelSize[0] ? this.backgroundScreenToLocalTransform() : this.props.ScreenToLocalTransform(); + } + + backgroundScreenToLocalTransform = () => { + if (this.props.PanelSize[0]) + return this.props.ScreenToLocalTransform().scale(this.props.Scaling); + else return this.props.ScreenToLocalTransform().scale(1 / this.props.Scaling); + } + documentScreenToLocalTransform = () => { + if (this.props.PanelSize[0]) + return this.props.ScreenToLocalTransform(); + else return this.backgroundScreenToLocalTransform(); } render() { if (!this.props.Document) @@ -255,18 +267,23 @@ export class DocumentView extends React.Component { if (!lkeys || lkeys === "") { return

Error loading layout keys

; } - let bindings = { + let backgroundBindings = { ...this.props, - ScreenToLocalTransform: this.screenToLocalTransform, // adds 'Scaling' to the screen to local Xf + ScreenToLocalTransform: this.backgroundScreenToLocalTransform, // adds 'Scaling' to the screen to local Xf isSelected: this.isSelected, select: this.select } as any; for (const key of this.layoutKeys) { - bindings[key.Name + "Key"] = key; // this maps string values of the form Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data + backgroundBindings[key.Name + "Key"] = key; // this maps string values of the form Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data } for (const key of this.layoutFields) { let field = this.props.Document.Get(key); - bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field; + backgroundBindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field; + } + + let documentBindings = { + ...backgroundBindings, + ScreenToLocalTransform: this.documentScreenToLocalTransform, // adds 'Scaling' to the screen to local Xf } /* tfs: @@ -278,12 +295,12 @@ export class DocumentView extends React.Component { if (backgroundLayout) { let backgroundView = () => ( { console.log(test) }} />); - bindings.BackgroundView = backgroundView; + documentBindings.BackgroundView = backgroundView; } var width = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); @@ -297,7 +314,7 @@ export class DocumentView extends React.Component { onPointerDown={this.onPointerDown} > { console.log(test) }} -- cgit v1.2.3-70-g09d2 From 6b376b9a37352c0229ddc133cddef160c0a5e941 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 20 Feb 2019 17:37:33 -0500 Subject: cleanup --- .../views/collections/CollectionSchemaView.tsx | 38 ++++++++-------------- 1 file changed, 13 insertions(+), 25 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 0c7577421..e5727f5ac 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -14,7 +14,6 @@ import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; -import { Z_DEFAULT_COMPRESSION } from "zlib"; @observer export class CollectionSchemaView extends CollectionViewBase { @@ -22,6 +21,8 @@ export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef(); + private DIVIDER_WIDTH = 5; + @observable selectedIndex = 0; @@ -117,14 +118,6 @@ export class CollectionSchemaView extends CollectionViewBase { } } - innerScreenToLocal(tx: number, ty: number) { - var zoom = this.props.Document.GetNumber(KeyStore.Scale, 1); - var xf = this.props.ScreenToLocalTransform().transform(new Transform(- 5 - COLLECTION_BORDER_WIDTH, - COLLECTION_BORDER_WIDTH, 1)).translate(-tx, -ty); - var center = [0, 0]; - var sabout = new Transform(center[0] / zoom, center[1] / zoom, 1).scaled(1 / this._parentScaling).translated(-center[0] / zoom, -center[1] / zoom); - var total = xf.transformed(sabout); - return () => total - } @computed get scale(): number { return this.props.Document.GetNumber(KeyStore.Scale, 1); @@ -137,7 +130,7 @@ export class CollectionSchemaView extends CollectionViewBase { } getTransform = (): Transform => { - return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this._dividerX - 5, - COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform()) + return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this._dividerX - this.DIVIDER_WIDTH, - COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform()) } getLocalTransform = (): Transform => { @@ -147,13 +140,11 @@ export class CollectionSchemaView extends CollectionViewBase { @action setScaling = (r: any) => { - var me = this; const children = this.props.Document.GetList(this.props.fieldKey, []); const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined; this._panelWidth = r.entry.width; - if (r.entry.height) - this._panelHeight = r.entry.height; - me._parentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width); + this._panelHeight = r.entry.height ? r.entry.height : this._panelHeight; + this._parentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width); } @observable _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView @@ -171,7 +162,7 @@ export class CollectionSchemaView extends CollectionViewBase {
{ - return ( - { - Header: col.Name, - accessor: (doc: Document) => [doc, col], - id: col.Id - }) - })} + columns={columns.map(col => ({ + Header: col.Name, + accessor: (doc: Document) => [doc, col], + id: col.Id + }))} column={{ ...ReactTableDefaults.column, Cell: this.renderCell @@ -210,8 +198,8 @@ export class CollectionSchemaView extends CollectionViewBase {
} -
-
+
+
{content}
-- cgit v1.2.3-70-g09d2 From ca0704948e58a9c4b73719b48941cc7e7f2dfc99 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 20 Feb 2019 17:45:22 -0500 Subject: more cleanup --- src/client/views/collections/CollectionSchemaView.tsx | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index e5727f5ac..f3217d55d 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -118,24 +118,8 @@ export class CollectionSchemaView extends CollectionViewBase { } } - @computed - get scale(): number { - return this.props.Document.GetNumber(KeyStore.Scale, 1); - } - @computed - get translate(): [number, number] { - const x = this.props.Document.GetNumber(KeyStore.PanX, 0); - const y = this.props.Document.GetNumber(KeyStore.PanY, 0); - return [x, y]; - } - getTransform = (): Transform => { - return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this._dividerX - this.DIVIDER_WIDTH, - COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform()) - } - - getLocalTransform = (): Transform => { - const [x, y] = this.translate; - return Transform.Identity.translate(-x, -y).scale(1 / this.scale / this._parentScaling); + return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._parentScaling); } @action -- cgit v1.2.3-70-g09d2 From 9e4403f9c14cdb7e05901af5f8509753269eeb07 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 21 Feb 2019 14:13:44 -0500 Subject: clean up --- src/client/util/UndoManager.ts | 1 - .../views/collections/CollectionDockingView.tsx | 21 ++++++++++----------- .../views/collections/CollectionSchemaView.tsx | 2 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 12 +++--------- src/fields/Document.ts | 5 ----- src/fields/ListField.ts | 9 ++++----- 6 files changed, 18 insertions(+), 32 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/util/UndoManager.ts b/src/client/util/UndoManager.ts index edb75b55f..46ad558f3 100644 --- a/src/client/util/UndoManager.ts +++ b/src/client/util/UndoManager.ts @@ -1,5 +1,4 @@ import { observable, action } from "mobx"; -import { Opt } from "../../fields/Field"; function propertyDecorator(target: any, key: string | symbol) { Object.defineProperty(target, key, { diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 35b130a9a..60dc24b5f 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -1,22 +1,21 @@ import * as GoldenLayout from "golden-layout"; import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; -import { action, computed, observable, reaction, trace, untracked } from "mobx"; -import { DragManager } from "../../util/DragManager"; -import { DocumentView } from "../nodes/DocumentView"; -import { Document } from "../../../fields/Document"; -import "./CollectionDockingView.scss"; -import { CollectionViewBase, COLLECTION_BORDER_WIDTH, CollectionViewProps } from "./CollectionViewBase"; -import React = require("react"); +import { action, computed, observable, reaction } from "mobx"; +import { observer } from "mobx-react"; import * as ReactDOM from 'react-dom'; import Measure from "react-measure"; +import { Document } from "../../../fields/Document"; +import { FieldId, Opt } from "../../../fields/Field"; +import { KeyStore } from "../../../fields/KeyStore"; import { Utils } from "../../../Utils"; -import { FieldId } from "../../../fields/Field"; import { Server } from "../../Server"; -import { observer } from "mobx-react"; -import { KeyStore } from "../../../fields/KeyStore"; -import { Opt } from "../../../fields/Field"; +import { DragManager } from "../../util/DragManager"; import { undoBatch } from "../../util/UndoManager"; +import { DocumentView } from "../nodes/DocumentView"; +import "./CollectionDockingView.scss"; +import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; +import React = require("react"); @observer export class CollectionDockingView extends CollectionViewBase { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index f3217d55d..5ec288b13 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,5 +1,5 @@ import React = require("react") -import { action, computed, observable } from "mobx"; +import { action, observable } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 7cad6ffc1..5568935fa 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -1,17 +1,11 @@ -import { action, computed } from "mobx"; +import { computed } from "mobx"; import { observer } from "mobx-react"; import { KeyStore } from "../../../fields/KeyStore"; 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 { Transform } from "../../util/Transform"; +import { DocumentView, DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import React = require("react"); -import { DocumentView, DocumentViewProps } from "./DocumentView"; -import { Utils } from "../../../Utils"; -import { Transform } from "../../util/Transform"; @observer diff --git a/src/fields/Document.ts b/src/fields/Document.ts index d8522fb5b..6667485b6 100644 --- a/src/fields/Document.ts +++ b/src/fields/Document.ts @@ -152,16 +152,13 @@ export class Document extends Field { SetData(key: Key, value: T, ctor: { new(): U }, replaceWrongType = true) { let field = this.Get(key, true); - //if (field != WAITING) { // do we want to wait for the field to come back from the server to set it, or do we overwrite? if (field instanceof ctor) { field.Data = value; - // Server.SetFieldValue(field, value); } else if (!field || replaceWrongType) { let newField = new ctor(); newField.Data = value; this.Set(key, newField); } - //} } @action @@ -213,14 +210,12 @@ export class Document extends Field { } ToJson(): { type: Types, data: [string, string][], _id: string } { - // console.log(this.fields) let fields: [string, string][] = [] this._proxies.forEach((field, key) => { if (field) { fields.push([key, field as string]) } }); - // console.log(fields) return { type: Types.Document, diff --git a/src/fields/ListField.ts b/src/fields/ListField.ts index ad5374dc9..75c2eb343 100644 --- a/src/fields/ListField.ts +++ b/src/fields/ListField.ts @@ -1,10 +1,9 @@ -import { Field, FieldId, FieldValue, Opt } from "./Field"; -import { BasicField } from "./BasicField"; -import { Types } from "../server/Message"; -import { observe, action, IArrayChange, IArraySplice, IObservableArray } from "mobx"; +import { action, IArrayChange, IArraySplice, IObservableArray, observe } from "mobx"; import { Server } from "../client/Server"; -import { ServerUtils } from "../server/ServerUtil"; import { UndoManager } from "../client/util/UndoManager"; +import { Types } from "../server/Message"; +import { BasicField } from "./BasicField"; +import { Field, FieldId } from "./Field"; export class ListField extends BasicField { private _proxies: string[] = [] -- cgit v1.2.3-70-g09d2 From 38ca0618dcdeb57d5a91557b392c1aff095868be Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Fri, 22 Feb 2019 03:01:30 -0500 Subject: Added CollectionView Switched sub-collections to not inherit from CollectionViewBase --- src/client/Server.ts | 5 +- src/client/documents/Documents.ts | 81 +++++--------- src/client/views/Main.tsx | 8 +- .../views/collections/CollectionDockingView.tsx | 11 +- .../views/collections/CollectionFreeFormView.tsx | 25 ++--- .../views/collections/CollectionSchemaView.tsx | 13 ++- src/client/views/collections/CollectionView.tsx | 116 +++++++++++++++++++++ .../views/collections/CollectionViewBase.tsx | 61 ----------- src/client/views/nodes/DocumentView.tsx | 13 ++- src/client/views/nodes/FieldView.tsx | 3 +- src/fields/BasicField.ts | 6 +- src/fields/Document.ts | 9 ++ src/fields/KeyStore.ts | 1 + src/fields/ListField.ts | 19 +++- 14 files changed, 212 insertions(+), 159 deletions(-) create mode 100644 src/client/views/collections/CollectionView.tsx delete mode 100644 src/client/views/collections/CollectionViewBase.tsx (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/Server.ts b/src/client/Server.ts index 3e61729ab..06ac22c61 100644 --- a/src/client/Server.ts +++ b/src/client/Server.ts @@ -60,13 +60,16 @@ export class Server { }); } - public static GetDocumentField(doc: Document, key: Key) { + public static GetDocumentField(doc: Document, key: Key, callback?: (field: Field) => void) { let field = doc._proxies.get(key.Id); if (field) { this.GetField(field, action((fieldfromserver: Opt) => { if (fieldfromserver) { doc.fields.set(key.Id, { key, field: fieldfromserver }); + if (callback) { + callback(fieldfromserver); + } } })); } diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 920068273..bfa6cb7a9 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -11,6 +11,7 @@ import { ImageField } from "../../fields/ImageField"; import { ImageBox } from "../views/nodes/ImageBox"; import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormView"; import { FieldId } from "../../fields/Field"; +import { CollectionView, CollectionViewType } from "../views/collections/CollectionView"; interface DocumentOptions { x?: number; @@ -24,12 +25,10 @@ interface DocumentOptions { export namespace Documents { export function initProtos(callback: () => void) { - Server.GetFields([collectionProtoId, textProtoId, imageProtoId, schemaProtoId, dockProtoId], (fields) => { + Server.GetFields([collectionProtoId, textProtoId, imageProtoId], (fields) => { collectionProto = fields[collectionProtoId] as Document; imageProto = fields[imageProtoId] as Document; textProto = fields[textProtoId] as Document; - dockProto = fields[dockProtoId] as Document; - schemaProto = fields[schemaProtoId] as Document; callback() }); } @@ -83,52 +82,6 @@ export namespace Documents { return doc; } - let schemaProto: Document; - const schemaProtoId = "schemaProto"; - function GetSchemaPrototype(): Document { - if (!schemaProto) { - schemaProto = new Document(schemaProtoId); - schemaProto.Set(KeyStore.X, new NumberField(0)); - schemaProto.Set(KeyStore.Y, new NumberField(0)); - schemaProto.Set(KeyStore.Width, new NumberField(300)); - schemaProto.Set(KeyStore.Height, new NumberField(150)); - schemaProto.Set(KeyStore.Layout, new TextField(CollectionSchemaView.LayoutString())); - schemaProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data])); - } - return schemaProto; - } - - export function SchemaDocument(documents: Array, options: DocumentOptions = {}): Document { - let doc = GetSchemaPrototype().MakeDelegate(); - setupOptions(doc, options); - doc.Set(KeyStore.Data, new ListField(documents)); - return doc; - } - - - let dockProto: Document; - const dockProtoId = "dockProto"; - function GetDockPrototype(): Document { - if (!dockProto) { - dockProto = new Document(); - dockProto.Set(KeyStore.X, new NumberField(0)); - dockProto.Set(KeyStore.Y, new NumberField(0)); - dockProto.Set(KeyStore.Width, new NumberField(300)); - dockProto.Set(KeyStore.Height, new NumberField(150)); - dockProto.Set(KeyStore.Layout, new TextField(CollectionDockingView.LayoutString())); - dockProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data])); - } - return dockProto; - } - - export function DockDocument(config: string, options: DocumentOptions = {}, id?: string): Document { - let doc = GetDockPrototype().MakeDelegate(id); - setupOptions(doc, options); - doc.SetText(KeyStore.Data, config); - return doc; - } - - let imageProto: Document; const imageProtoId = "imageProto"; function GetImagePrototype(): Document { @@ -141,7 +94,8 @@ export namespace Documents { imageProto.Set(KeyStore.NativeHeight, new NumberField(300)); imageProto.Set(KeyStore.Width, new NumberField(300)); imageProto.Set(KeyStore.Height, new NumberField(300)); - imageProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString("AnnotationsKey"))); + imageProto.Set(KeyStore.Layout, new TextField(CollectionView.LayoutString("AnnotationsKey"))); + imageProto.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) imageProto.Set(KeyStore.BackgroundLayout, new TextField(ImageBox.LayoutString())); // imageProto.SetField(KeyStore.Layout, new TextField('
')); imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations])); @@ -165,23 +119,36 @@ export namespace Documents { function GetCollectionPrototype(): Document { if (!collectionProto) { collectionProto = new Document(collectionProtoId); - collectionProto.Set(KeyStore.X, new NumberField(0)); - collectionProto.Set(KeyStore.Y, new NumberField(0)); collectionProto.Set(KeyStore.Scale, new NumberField(1)); collectionProto.Set(KeyStore.PanX, new NumberField(0)); collectionProto.Set(KeyStore.PanY, new NumberField(0)); - collectionProto.Set(KeyStore.Width, new NumberField(300)); - collectionProto.Set(KeyStore.Height, new NumberField(300)); - collectionProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString("DataKey"))); + collectionProto.Set(KeyStore.Layout, new TextField(CollectionView.LayoutString("DataKey"))); collectionProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data])); } return collectionProto; } - export function CollectionDocument(documents: Array, options: DocumentOptions = {}, id?: string): Document { + export function CollectionDocument(data: Array | string, viewType: CollectionViewType, options: DocumentOptions = {}, id?: string): Document { let doc = GetCollectionPrototype().MakeDelegate(id); setupOptions(doc, options); - doc.Set(KeyStore.Data, new ListField(documents)); + if (typeof data === "string") { + doc.SetText(KeyStore.Data, data); + } else { + doc.SetData(KeyStore.Data, data, ListField); + } + doc.SetNumber(KeyStore.ViewType, viewType); return doc; } + + export function FreeformDocument(documents: Array, options: DocumentOptions, id?: string) { + return CollectionDocument(documents, CollectionViewType.Freeform, options, id) + } + + export function SchemaDocument(documents: Array, options: DocumentOptions, id?: string) { + return CollectionDocument(documents, CollectionViewType.Schema, options, id) + } + + export function DockDocument(config: string, options: DocumentOptions, id?: string) { + return CollectionDocument(config, CollectionViewType.Docking, options, id) + } } \ No newline at end of file diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index c7a6a44e8..fe1a999ec 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -61,16 +61,14 @@ Documents.initProtos(() => { let mainfreeform: Document; if (res) { mainContainer = ServerUtils.FromJson(res) as Document; - mainfreeform = mainContainer.Get(KeyStore.ActiveFrame) as Document; - if (!mainfreeform) - Server.GetField(mainContainer._proxies.get(KeyStore.ActiveFrame.Id)!, (field) => mainfreeform = field as Document); + mainContainer.GetAsync(KeyStore.ActiveFrame, field => mainfreeform = field as Document); } else { mainContainer = Documents.DockDocument(JSON.stringify({ content: [{ type: 'row', content: [] }] }), { title: "main container" }, mainDocId); Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainContainer.ToJson())) setTimeout(() => { - mainfreeform = Documents.CollectionDocument([], { x: 0, y: 400, title: "mini collection" }); + mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" }); Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainfreeform.ToJson())); var docs = [mainfreeform].map(doc => CollectionDockingView.makeDocumentConfig(doc)); @@ -90,7 +88,7 @@ Documents.initProtos(() => { })); }) let addColNode = action(() => { - mainfreeform.GetList(KeyStore.Data, []).push(Documents.CollectionDocument([], { + mainfreeform.GetList(KeyStore.Data, []).push(Documents.FreeformDocument([], { x: 0, y: 300, width: 200, height: 200, title: "added note" })); }) diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 60dc24b5f..6d91aef5e 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -14,13 +14,12 @@ import { DragManager } from "../../util/DragManager"; import { undoBatch } from "../../util/UndoManager"; import { DocumentView } from "../nodes/DocumentView"; import "./CollectionDockingView.scss"; -import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; +import { CollectionViewProps, COLLECTION_BORDER_WIDTH, SubCollectionViewProps } from "./CollectionView"; import React = require("react"); @observer -export class CollectionDockingView extends CollectionViewBase { +export class CollectionDockingView extends React.Component { public static Instance: CollectionDockingView; - public static LayoutString() { return CollectionViewBase.LayoutString("CollectionDockingView"); } public static makeDocumentConfig(document: Document) { return { type: 'react-component', @@ -41,7 +40,7 @@ export class CollectionDockingView extends CollectionViewBase { private _containerRef = React.createRef(); private _fullScreen: any = null; - constructor(props: CollectionViewProps) { + constructor(props: SubCollectionViewProps) { super(props); CollectionDockingView.Instance = this; (window as any).React = React; @@ -187,7 +186,7 @@ export class CollectionDockingView extends CollectionViewBase { } @action onPointerDown = (e: React.PointerEvent): void => { - if (e.button === 2 && this.active) { + if (e.button === 2 && this.props.active()) { e.stopPropagation(); e.preventDefault(); } else { @@ -195,7 +194,7 @@ export class CollectionDockingView extends CollectionViewBase { if (className == "lm_drag_handle" || className == "lm_close" || className == "lm_maximise" || className == "lm_minimise" || className == "lm_close_tab") { this._flush = true; } - if (e.buttons === 1 && this.active) { + if (e.buttons === 1 && this.props.active()) { e.stopPropagation(); } } diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 986bcdcee..bd7ca5b6f 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -4,7 +4,7 @@ import { action, computed } from "mobx"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { DragManager } from "../../util/DragManager"; import "./CollectionFreeFormView.scss"; -import { CollectionViewBase, COLLECTION_BORDER_WIDTH, CollectionViewProps } from "./CollectionViewBase"; +import { COLLECTION_BORDER_WIDTH, CollectionViewProps, SubCollectionViewProps } from "./CollectionView"; import { KeyStore } from "../../../fields/KeyStore"; import { Document } from "../../../fields/Document"; import { ListField } from "../../../fields/ListField"; @@ -16,8 +16,7 @@ import { DocumentView } from "../nodes/DocumentView"; import { undoBatch } from "../../util/UndoManager"; @observer -export class CollectionFreeFormView extends CollectionViewBase { - public static LayoutString(fieldKey: string = "DataKey") { return CollectionViewBase.LayoutString("CollectionFreeFormView", fieldKey); } +export class CollectionFreeFormView extends React.Component { private _canvasRef = React.createRef(); private _lastX: number = 0; private _lastY: number = 0; @@ -38,7 +37,7 @@ export class CollectionFreeFormView extends CollectionViewBase { @computed get resizeScaling() { return this.isAnnotationOverlay ? this.props.Document.GetNumber(KeyStore.Width, 0) / this.nativeWidth : 1; } - constructor(props: CollectionViewProps) { + constructor(props: SubCollectionViewProps) { super(props); } @@ -46,9 +45,11 @@ export class CollectionFreeFormView extends CollectionViewBase { @action drop = (e: Event, de: DragManager.DropEvent) => { const doc: DocumentView = de.data["document"]; - if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this) { - doc.props.ContainingCollectionView.removeDocument(doc.props.Document); - this.addDocument(doc.props.Document); + if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this.props.CollectionView) { + if (doc.props.RemoveDocument) { + doc.props.RemoveDocument(doc.props.Document); + } + this.props.addDocument(doc.props.Document); } const xOffset = de.data["xOffset"] as number || 0; const yOffset = de.data["yOffset"] as number || 0; @@ -79,7 +80,7 @@ export class CollectionFreeFormView extends CollectionViewBase { @action onPointerDown = (e: React.PointerEvent): void => { - if ((e.button === 2 && this.active) || + if ((e.button === 2 && this.props.active()) || !e.defaultPrevented) { document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); @@ -104,7 +105,7 @@ export class CollectionFreeFormView extends CollectionViewBase { @action onPointerMove = (e: PointerEvent): void => { - if (!e.cancelBubble && this.active) { + if (!e.cancelBubble && this.props.active()) { e.preventDefault(); e.stopPropagation(); let x = this.props.Document.GetNumber(KeyStore.PanX, 0); @@ -248,13 +249,13 @@ export class CollectionFreeFormView extends CollectionViewBase { {this.props.BackgroundView ? this.props.BackgroundView() : null} {lvalue.Data.map(doc => { return (); + ContainingCollectionView={this.props.CollectionView} />); })}
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 5ec288b13..9405c820f 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -13,12 +13,10 @@ import { EditableView } from "../EditableView"; import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; -import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; +import { COLLECTION_BORDER_WIDTH, CollectionViewProps, SubCollectionViewProps } from "./CollectionView"; @observer -export class CollectionSchemaView extends CollectionViewBase { - public static LayoutString(fieldKey: string = "DataKey") { return CollectionViewBase.LayoutString("CollectionSchemaView", fieldKey); } - +export class CollectionSchemaView extends React.Component { private _mainCont = React.createRef(); private DIVIDER_WIDTH = 5; @@ -34,6 +32,7 @@ export class CollectionSchemaView extends CollectionViewBase { doc: rowProps.value[0], fieldKey: rowProps.value[1], isSelected: () => false, + select: () => { }, isTopMost: false } let contents = ( @@ -112,7 +111,7 @@ export class CollectionSchemaView extends CollectionViewBase { // e.preventDefault(); // } else { - if (e.buttons === 1 && this.active) { + if (e.buttons === 1 && this.props.active()) { e.stopPropagation(); } } @@ -145,12 +144,12 @@ export class CollectionSchemaView extends CollectionViewBase { {({ measureRef }) =>
+ ContainingCollectionView={this.props.CollectionView} />
} diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx new file mode 100644 index 000000000..651d85879 --- /dev/null +++ b/src/client/views/collections/CollectionView.tsx @@ -0,0 +1,116 @@ +import { action, computed } from "mobx"; +import { observer } from "mobx-react"; +import { Document } from "../../../fields/Document"; +import { Key } from "../../../fields/Key"; +import { ListField } from "../../../fields/ListField"; +import { SelectionManager } from "../../util/SelectionManager"; +import { ContextMenu } from "../ContextMenu"; +import React = require("react"); +import { Transform } from "../../util/Transform"; +import { KeyStore } from "../../../fields/KeyStore"; +import { NumberField } from "../../../fields/NumberField"; +import { CollectionFreeFormView } from "./CollectionFreeFormView"; +import { CollectionDockingView } from "./CollectionDockingView"; +import { CollectionSchemaView } from "./CollectionSchemaView"; +import { Opt } from "../../../fields/Field"; + + +export interface CollectionViewProps { + fieldKey: Key; + Document: Document; + ScreenToLocalTransform: () => Transform; + isSelected: () => boolean; + isTopMost: boolean; + select: (ctrlPressed: boolean) => void; + BackgroundView?: () => JSX.Element; +} + +export interface SubCollectionViewProps extends CollectionViewProps { + active: () => boolean; + addDocument: (doc: Document) => void; + removeDocument: (doc: Document) => boolean; + CollectionView: Opt; +} + +export enum CollectionViewType { + Invalid, + Freeform, + Schema, + Docking, +} + +export const COLLECTION_BORDER_WIDTH = 2; + +@observer +export class CollectionView extends React.Component { + + public static LayoutString(fieldKey: string = "DataKey") { + return ``; + } + public active = () => { + var isSelected = this.props.isSelected(); + var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this); + var topMost = this.props.isTopMost; + 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.Document.GetData(this.props.fieldKey, ListField, new Array()) + value.push(doc); + } + + @action + removeDocument = (doc: Document): boolean => { + //TODO This won't create the field if it doesn't already exist + const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array()) + let index = value.indexOf(doc); + if (index !== -1) { + value.splice(index, 1) + + SelectionManager.DeselectAll() + ContextMenu.Instance.clearItems() + return true; + } + return false + } + + get collectionViewType(): CollectionViewType { + let Document = this.props.Document; + let viewField = Document.GetT(KeyStore.ViewType, NumberField); + if (viewField === "") { + return CollectionViewType.Invalid; + } else if (viewField) { + return viewField.Data; + } else { + return CollectionViewType.Freeform; + } + } + + set collectionViewType(type: CollectionViewType) { + let Document = this.props.Document; + Document.SetData(KeyStore.ViewType, type, NumberField); + } + + render() { + let viewType = this.collectionViewType; + switch (viewType) { + case CollectionViewType.Freeform: + return () + case CollectionViewType.Schema: + return () + case CollectionViewType.Docking: + return () + default: + return
+ } + } +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx deleted file mode 100644 index 0acc890d8..000000000 --- a/src/client/views/collections/CollectionViewBase.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { action, computed } from "mobx"; -import { observer } from "mobx-react"; -import { Document } from "../../../fields/Document"; -import { Key } from "../../../fields/Key"; -import { ListField } from "../../../fields/ListField"; -import { SelectionManager } from "../../util/SelectionManager"; -import { ContextMenu } from "../ContextMenu"; -import React = require("react"); -import { Transform } from "../../util/Transform"; - - -export interface CollectionViewProps { - fieldKey: Key; - Document: Document; - ScreenToLocalTransform: () => Transform; - isSelected: () => boolean; - isTopMost: boolean; - select: (ctrlPressed: boolean) => void; - BackgroundView?: () => JSX.Element; -} - -export const COLLECTION_BORDER_WIDTH = 2; - -@observer -export class CollectionViewBase extends React.Component { - - public static LayoutString(collectionType: string, fieldKey: string = "DataKey") { - return `<${collectionType} Document={Document} - ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} isSelected={isSelected} select={select} - isTopMost={isTopMost} BackgroundView={BackgroundView} />`; - } - @computed - public get active(): boolean { - var isSelected = this.props.isSelected(); - var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this); - var topMost = this.props.isTopMost; - 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.Document.GetData(this.props.fieldKey, ListField, new Array()) - value.push(doc); - } - - @action - removeDocument = (doc: Document): boolean => { - //TODO This won't create the field if it doesn't already exist - const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array()) - let index = value.indexOf(doc); - if (index !== -1) { - value.splice(index, 1) - - SelectionManager.DeselectAll() - ContextMenu.Instance.clearItems() - return true; - } - return false - } - -} \ No newline at end of file diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 7cf00a116..2114a5697 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -9,7 +9,7 @@ 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 { COLLECTION_BORDER_WIDTH, CollectionView, CollectionViewType } from "../collections/CollectionView"; import { FormattedTextBox } from "../nodes/FormattedTextBox"; import { ImageBox } from "../nodes/ImageBox"; import "./DocumentView.scss"; @@ -22,7 +22,7 @@ import { TextField } from "../../../fields/TextField"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? export interface DocumentViewProps { - ContainingCollectionView: Opt; + ContainingCollectionView: Opt; Document: Document; AddDocument?: (doc: Document) => void; @@ -114,7 +114,7 @@ export class DocumentView extends React.Component { @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || - this.props.ContainingCollectionView.active; + this.props.ContainingCollectionView.active(); } private _contextMenuCanOpen = false; @@ -233,6 +233,9 @@ export class DocumentView extends React.Component { 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.addItem({ description: "Freeform", event: () => { this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) } }) + ContextMenu.Instance.addItem({ description: "Schema", event: () => { this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) } }) + ContextMenu.Instance.addItem({ description: "Docking", event: () => { this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) } }) ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) SelectionManager.SelectDoc(this, e.ctrlKey); } @@ -275,7 +278,7 @@ export class DocumentView extends React.Component { let backgroundLayout = this.backgroundLayout; if (backgroundLayout) { let backgroundView = () => ( { onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} > boolean; + select: () => void; isTopMost: boolean; } @observer export class FieldView extends React.Component { - public static LayoutString(fieldType: { name: string }) { return `<${fieldType.name} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} isSelected={isSelected} isTopMost={isTopMost} />`; } + public static LayoutString(fieldType: { name: string }) { return `<${fieldType.name} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} isSelected={isSelected} select={select} isTopMost={isTopMost} />`; } @computed get field(): FieldValue { const { doc, fieldKey } = this.props; diff --git a/src/fields/BasicField.ts b/src/fields/BasicField.ts index 91977b243..a92c4a236 100644 --- a/src/fields/BasicField.ts +++ b/src/fields/BasicField.ts @@ -32,7 +32,7 @@ export abstract class BasicField extends Field { return; } let oldValue = this.data; - this.data = value; + this.setData(value); UndoManager.AddEvent({ undo: () => this.Data = oldValue, redo: () => this.Data = value @@ -40,6 +40,10 @@ export abstract class BasicField extends Field { Server.UpdateField(this); } + protected setData(value: T) { + this.data = value; + } + @action TrySetValue(value: any): boolean { if (typeof value == typeof this.data) { diff --git a/src/fields/Document.ts b/src/fields/Document.ts index 6667485b6..ff13732b3 100644 --- a/src/fields/Document.ts +++ b/src/fields/Document.ts @@ -90,6 +90,15 @@ export class Document extends Field { return field; } + GetAsync(key: Key, callback: (field: Field) => void): boolean { + //This currently doesn't deal with prototypes + if (this._proxies.has(key.Id)) { + Server.GetDocumentField(this, key, callback); + return true; + } + return false; + } + GetT(key: Key, ctor: { new(...args: any[]): T }, ignoreProto: boolean = false): FieldValue { var getfield = this.Get(key, ignoreProto); if (getfield != FieldWaiting) { diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index 7056886aa..6d6c6a546 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -16,6 +16,7 @@ export namespace KeyStore { export const ZIndex = new Key("ZIndex"); export const Data = new Key("Data"); export const Annotations = new Key("Annotations"); + export const ViewType = new Key("ViewType"); export const Layout = new Key("Layout"); export const BackgroundLayout = new Key("BackgroundLayout"); export const LayoutKeys = new Key("LayoutKeys"); diff --git a/src/fields/ListField.ts b/src/fields/ListField.ts index 75c2eb343..700600804 100644 --- a/src/fields/ListField.ts +++ b/src/fields/ListField.ts @@ -1,4 +1,4 @@ -import { action, IArrayChange, IArraySplice, IObservableArray, observe } from "mobx"; +import { action, IArrayChange, IArraySplice, IObservableArray, observe, observable, Lambda } from "mobx"; import { Server } from "../client/Server"; import { UndoManager } from "../client/util/UndoManager"; import { Types } from "../server/Message"; @@ -13,7 +13,12 @@ export class ListField extends BasicField { if (save) { Server.UpdateField(this); } - observe(this.Data as IObservableArray, (change: IArrayChange | IArraySplice) => { + this.observeList(); + } + + private observeDisposer: Lambda | undefined; + private observeList(): void { + this.observeDisposer = observe(this.Data as IObservableArray, (change: IArrayChange | IArraySplice) => { this.updateProxies() if (change.type == "splice") { UndoManager.AddEvent({ @@ -27,7 +32,15 @@ export class ListField extends BasicField { }) } Server.UpdateField(this); - }) + }); + } + + protected setData(value: T[]) { + if (this.observeDisposer) { + this.observeDisposer() + } + this.data = observable(value); + this.observeList(); } private updateProxies() { -- cgit v1.2.3-70-g09d2 From 81511528e418c41332d06faea9c3287cf8abf553 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 22 Feb 2019 10:07:26 -0500 Subject: fixed some exceptions. fixed spurious context menu. fixed excessive rendering. --- src/client/views/DocumentDecorations.tsx | 5 +++ .../views/collections/CollectionDockingView.tsx | 11 +++++- .../views/collections/CollectionFreeFormView.tsx | 43 ++++++++++++---------- .../views/collections/CollectionSchemaView.tsx | 3 +- src/client/views/nodes/DocumentView.tsx | 3 +- 5 files changed, 40 insertions(+), 25 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 4e109d475..395a37ba5 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -5,6 +5,7 @@ import { observer } from "mobx-react"; import './DocumentDecorations.scss' import { KeyStore } from '../../fields/KeyStore' import { NumberField } from "../../fields/NumberField"; +import { number } from "prop-types"; @observer export class DocumentDecorations extends React.Component { @@ -142,6 +143,10 @@ export class DocumentDecorations extends React.Component { if (this.Hidden) { return (null); } + if (isNaN(bounds.r) || isNaN(bounds.b) || isNaN(bounds.x) || isNaN(bounds.y)) { + console.log("DocumentDecorations: Bounds Error") + return (null); + } return (
{ constructor(props: any) { super(props); - Server.GetField(this.props.documentId, f => this._document = f as Document) + Server.GetField(this.props.documentId, action((f: Opt) => this._document = f as Document)); } @computed private get _nativeWidth() { return this._document!.GetNumber(KeyStore.NativeWidth, 0); } diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index bd7ca5b6f..c44381f13 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -1,6 +1,6 @@ import { observer } from "mobx-react"; import React = require("react"); -import { action, computed } from "mobx"; +import { action, computed, trace } from "mobx"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { DragManager } from "../../util/DragManager"; import "./CollectionFreeFormView.scss"; @@ -14,6 +14,7 @@ import { FieldWaiting } from "../../../fields/Field"; import { Transform } from "../../util/Transform"; import { DocumentView } from "../nodes/DocumentView"; import { undoBatch } from "../../util/UndoManager"; +import { jSXElement } from "babel-types"; @observer export class CollectionFreeFormView extends React.Component { @@ -221,16 +222,29 @@ export class CollectionFreeFormView extends React.Component(fieldKey, []); const lvalue = Document.GetT>(fieldKey, ListField); - if (!lvalue || lvalue === "") { - return

Error loading collection data

+ if (lvalue && lvalue != FieldWaiting) { + return lvalue.Data.map(doc => { + return (); + }) } - const panx: number = Document.GetNumber(KeyStore.PanX, 0); - const pany: number = Document.GetNumber(KeyStore.PanY, 0); + return null; + } + render() { + const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0); + const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0); + trace() return (
e.preventDefault()} onDrop={this.onDrop} onDragOver={this.onDragOver} - style={{ - borderWidth: `${COLLECTION_BORDER_WIDTH}px`, - }} + style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }} ref={this.createDropTarget}>
{this.props.BackgroundView ? this.props.BackgroundView() : null} - {lvalue.Data.map(doc => { - return (); - })} + {this.views}
); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 9405c820f..f25e721c0 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,5 +1,5 @@ import React = require("react") -import { action, observable } from "mobx"; +import { action, observable, trace } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; @@ -138,7 +138,6 @@ export class CollectionSchemaView extends React.Component(this.props.fieldKey, []); const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined; - let me = this; let content = this.selectedIndex == -1 || !selected ? (null) : ( {({ measureRef }) => diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 2114a5697..69e413c6f 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -211,10 +211,11 @@ export class DocumentView extends React.Component { @action onContextMenu = (e: React.MouseEvent): void => { + e.preventDefault() + e.stopPropagation(); if (!SelectionManager.IsSelected(this)) { return; } - e.preventDefault() if (!this._contextMenuCanOpen) { return; -- cgit v1.2.3-70-g09d2 From 370ac4fde98f2ff25b2dedd6b0857c88c6d7f55b Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 22 Feb 2019 13:42:25 -0500 Subject: moved common code into CollectionViewBase. --- src/client/documents/Documents.ts | 2 +- src/client/util/DragManager.ts | 1 + .../views/collections/CollectionDockingView.tsx | 3 +- .../views/collections/CollectionFreeFormView.tsx | 59 ++-------------- .../views/collections/CollectionSchemaView.tsx | 13 ++-- src/client/views/collections/CollectionView.tsx | 20 +----- .../views/collections/CollectionViewBase.tsx | 82 ++++++++++++++++++++++ 7 files changed, 102 insertions(+), 78 deletions(-) create mode 100644 src/client/views/collections/CollectionViewBase.tsx (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index bfa6cb7a9..156a09316 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -13,7 +13,7 @@ import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormV import { FieldId } from "../../fields/Field"; import { CollectionView, CollectionViewType } from "../views/collections/CollectionView"; -interface DocumentOptions { +export interface DocumentOptions { x?: number; y?: number; width?: number; diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 6d5fe12a7..eb4b3aeaa 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -44,6 +44,7 @@ export namespace DragManager { drop: (e: Event, de: DropEvent) => void; } + export function MakeDropTarget(element: HTMLElement, options: DropOptions): DragDropDisposer { if ("canDrop" in element.dataset) { throw new Error("Element is already droppable, can't make it droppable again"); diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 752007439..857af023d 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -14,8 +14,9 @@ import { DragManager } from "../../util/DragManager"; import { undoBatch } from "../../util/UndoManager"; import { DocumentView } from "../nodes/DocumentView"; import "./CollectionDockingView.scss"; -import { CollectionViewProps, COLLECTION_BORDER_WIDTH, SubCollectionViewProps } from "./CollectionView"; +import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import React = require("react"); +import { SubCollectionViewProps } from "./CollectionViewBase"; @observer export class CollectionDockingView extends React.Component { diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index b78b1a3b6..b8312aff7 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -4,20 +4,18 @@ import { action, computed, trace } from "mobx"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { DragManager } from "../../util/DragManager"; import "./CollectionFreeFormView.scss"; -import { COLLECTION_BORDER_WIDTH, CollectionViewProps, SubCollectionViewProps } from "./CollectionView"; +import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { KeyStore } from "../../../fields/KeyStore"; import { Document } from "../../../fields/Document"; import { ListField } from "../../../fields/ListField"; -import { NumberField } from "../../../fields/NumberField"; -import { Documents } from "../../documents/Documents"; import { FieldWaiting } from "../../../fields/Field"; import { Transform } from "../../util/Transform"; import { DocumentView } from "../nodes/DocumentView"; import { undoBatch } from "../../util/UndoManager"; -import { jSXElement } from "babel-types"; +import { CollectionViewBase, SubCollectionViewProps } from "./CollectionViewBase"; @observer -export class CollectionFreeFormView extends React.Component { +export class CollectionFreeFormView extends CollectionViewBase { private _canvasRef = React.createRef(); private _lastX: number = 0; private _lastY: number = 0; @@ -45,13 +43,8 @@ export class CollectionFreeFormView extends React.Component { + super.drop(e, de); const doc: DocumentView = de.data["document"]; - if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this.props.CollectionView) { - if (doc.props.RemoveDocument) { - doc.props.RemoveDocument(doc.props.Document); - } - this.props.addDocument(doc.props.Document); - } const xOffset = de.data["xOffset"] as number || 0; const yOffset = de.data["yOffset"] as number || 0; //this should be able to use translate and scale methods on an Identity transform, no? @@ -62,21 +55,6 @@ export class CollectionFreeFormView extends React.Component { - if (this.dropDisposer) { - this.dropDisposer(); - } - if (ele) { - this.dropDisposer = DragManager.MakeDropTarget(ele, { - handlers: { - drop: this.drop - } - }); - } } @action @@ -148,36 +126,11 @@ export class CollectionFreeFormView extends React.Component { - e.stopPropagation() - e.preventDefault() - let fReader = new FileReader() - let file = e.dataTransfer.items[0].getAsFile(); - let that = this; const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0); const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0); let x = e.pageX - panx let y = e.pageY - pany - - fReader.addEventListener("load", action("drop", () => { - if (fReader.result) { - let url = "" + fReader.result; - let doc = Documents.ImageDocument(url, { - x: x, y: y - }) - let docs = that.props.Document.GetT(KeyStore.Data, ListField); - if (docs != FieldWaiting) { - if (!docs) { - docs = new ListField(); - that.props.Document.Set(KeyStore.Data, docs) - } - docs.Data.push(doc); - } - } - }), false) - - if (file) { - fReader.readAsDataURL(file) - } + super.onDrop(e, { x: x, y: y }); } onDragOver = (): void => { @@ -249,7 +202,7 @@ export class CollectionFreeFormView extends React.Component e.preventDefault()} - onDrop={this.onDrop} + onDrop={this.onDrop.bind(this)} onDragOver={this.onDragOver} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }} ref={this.createDropTarget}> diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index f25e721c0..df732308a 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -5,7 +5,7 @@ import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; import "react-table/react-table.css"; import { Document } from "../../../fields/Document"; -import { Field } from "../../../fields/Field"; +import { Field, FieldWaiting } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; import { CompileScript, ToField } from "../../util/Scripting"; import { Transform } from "../../util/Transform"; @@ -13,10 +13,11 @@ import { EditableView } from "../EditableView"; import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; -import { COLLECTION_BORDER_WIDTH, CollectionViewProps, SubCollectionViewProps } from "./CollectionView"; +import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; +import { CollectionViewBase } from "./CollectionViewBase"; @observer -export class CollectionSchemaView extends React.Component { +export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef(); private DIVIDER_WIDTH = 5; @@ -117,6 +118,7 @@ export class CollectionSchemaView extends React.Component { return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._parentScaling); } @@ -181,7 +183,10 @@ export class CollectionSchemaView extends React.Component
-
+
this.onDrop(e, {})} + ref={this.createDropTarget} + style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)`, height: "100%" }}> {content}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 651d85879..ff1803ec3 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -1,36 +1,18 @@ import { action, computed } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; -import { Key } from "../../../fields/Key"; import { ListField } from "../../../fields/ListField"; import { SelectionManager } from "../../util/SelectionManager"; import { ContextMenu } from "../ContextMenu"; import React = require("react"); -import { Transform } from "../../util/Transform"; import { KeyStore } from "../../../fields/KeyStore"; import { NumberField } from "../../../fields/NumberField"; import { CollectionFreeFormView } from "./CollectionFreeFormView"; import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionSchemaView } from "./CollectionSchemaView"; -import { Opt } from "../../../fields/Field"; +import { CollectionViewProps } from "./CollectionViewBase"; -export interface CollectionViewProps { - fieldKey: Key; - Document: Document; - ScreenToLocalTransform: () => Transform; - isSelected: () => boolean; - isTopMost: boolean; - select: (ctrlPressed: boolean) => void; - BackgroundView?: () => JSX.Element; -} - -export interface SubCollectionViewProps extends CollectionViewProps { - active: () => boolean; - addDocument: (doc: Document) => void; - removeDocument: (doc: Document) => boolean; - CollectionView: Opt; -} export enum CollectionViewType { Invalid, diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx new file mode 100644 index 000000000..06de56383 --- /dev/null +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -0,0 +1,82 @@ +import { action, computed } from "mobx"; +import { Document } from "../../../fields/Document"; +import { ListField } from "../../../fields/ListField"; +import React = require("react"); +import { KeyStore } from "../../../fields/KeyStore"; +import { Opt, FieldWaiting } from "../../../fields/Field"; +import { undoBatch } from "../../util/UndoManager"; +import { DragManager } from "../../util/DragManager"; +import { DocumentView } from "../nodes/DocumentView"; +import { Documents, DocumentOptions } from "../../documents/Documents"; +import { Key } from "../../../fields/Key"; +import { Transform } from "../../util/Transform"; + + +export interface CollectionViewProps { + fieldKey: Key; + Document: Document; + ScreenToLocalTransform: () => Transform; + isSelected: () => boolean; + isTopMost: boolean; + select: (ctrlPressed: boolean) => void; + BackgroundView?: () => JSX.Element; +} +export interface SubCollectionViewProps extends CollectionViewProps { + active: () => boolean; + addDocument: (doc: Document) => void; + removeDocument: (doc: Document) => boolean; + CollectionView: any; +} + +export class CollectionViewBase extends React.Component { + private dropDisposer?: DragManager.DragDropDisposer; + protected createDropTarget = (ele: HTMLDivElement) => { + if (this.dropDisposer) { + this.dropDisposer(); + } + if (ele) { + this.dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.drop.bind(this) } }); + } + } + + @undoBatch + @action + protected drop(e: Event, de: DragManager.DropEvent) { + const doc: DocumentView = de.data["document"]; + if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this.props.CollectionView) { + if (doc.props.RemoveDocument) { + doc.props.RemoveDocument(doc.props.Document); + } + this.props.addDocument(doc.props.Document); + } + e.stopPropagation(); + } + + @action + protected onDrop(e: React.DragEvent, options: DocumentOptions): void { + e.stopPropagation() + e.preventDefault() + let fReader = new FileReader() + let file = e.dataTransfer.items[0].getAsFile(); + let that = this; + + fReader.addEventListener("load", action("drop", () => { + if (fReader.result) { + let url = "" + fReader.result; + let doc = Documents.ImageDocument(url, options) + let docs = that.props.Document.GetT(KeyStore.Data, ListField); + if (docs != FieldWaiting) { + if (!docs) { + docs = new ListField(); + that.props.Document.Set(KeyStore.Data, docs) + } + docs.Data.push(doc); + } + } + }), false) + + if (file) { + fReader.readAsDataURL(file) + } + } +} -- cgit v1.2.3-70-g09d2 From bc9096366d10654d16ed84251e7f4b7fb3a46727 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 22 Feb 2019 15:24:42 -0500 Subject: changed PanelSize to PanelWidth/Height --- src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/Main.tsx | 3 ++- .../views/collections/CollectionDockingView.tsx | 3 ++- .../views/collections/CollectionFreeFormView.tsx | 3 ++- .../views/collections/CollectionSchemaView.tsx | 3 ++- .../views/nodes/CollectionFreeFormDocumentView.tsx | 24 ++++++++++++++-------- src/client/views/nodes/DocumentView.tsx | 3 ++- 7 files changed, 26 insertions(+), 15 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 395a37ba5..7b64a4c2c 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -28,7 +28,7 @@ export class DocumentDecorations extends React.Component { } let transform = (element.props.ScreenToLocalTransform().scale(element.props.Scaling)).inverse(); var [sptX, sptY] = transform.transformPoint(0, 0); - let [bptX, bptY] = transform.transformPoint(element.props.PanelSize[0], element.props.PanelSize[1]); + let [bptX, bptY] = transform.transformPoint(element.props.PanelWidth, element.props.PanelHeight); return { x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y), r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b) diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index fe1a999ec..6f6a89839 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -107,7 +107,8 @@ Documents.initProtos(() => { Transform.Identity} Scaling={1} - PanelSize={[0, 0]} + PanelWidth={0} + PanelHeight={0} isTopMost={true} ContainingCollectionView={undefined} /> diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 857af023d..7ac8ea5e4 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -290,7 +290,8 @@ export class DockedFrameRenderer extends React.Component { AddDocument={undefined} RemoveDocument={undefined} Scaling={this._parentScaling} - PanelSize={[this._nativeWidth, this._nativeHeight]} + PanelWidth={this._nativeWidth} + PanelHeight={this._nativeHeight} ScreenToLocalTransform={this.ScreenToLocalTransform} isTopMost={true} ContainingCollectionView={undefined} /> diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index b8312aff7..e31fb25b9 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -187,7 +187,8 @@ export class CollectionFreeFormView extends CollectionViewBase { ScreenToLocalTransform={this.getTransform} isTopMost={false} Scaling={1} - PanelSize={[doc.GetNumber(KeyStore.Width, 0), doc.GetNumber(KeyStore.Height, 0)]} + PanelWidth={doc.GetNumber(KeyStore.Width, 0)} + PanelHeight={doc.GetNumber(KeyStore.Height, 0)} ContainingCollectionView={this.props.CollectionView} />); }) } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index df732308a..7e7d23fe4 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -149,7 +149,8 @@ export class CollectionSchemaView extends CollectionViewBase { ScreenToLocalTransform={this.getTransform} Scaling={this._parentScaling} isTopMost={false} - PanelSize={[this._panelWidth, this._panelHeight]} + PanelWidth={this._panelWidth} + PanelHeight={this._panelHeight} ContainingCollectionView={this.props.CollectionView} />
} diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 5568935fa..ad6756918 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -1,4 +1,4 @@ -import { computed } from "mobx"; +import { computed, trace } from "mobx"; import { observer } from "mobx-react"; import { KeyStore } from "../../../fields/KeyStore"; import { NumberField } from "../../../fields/NumberField"; @@ -69,15 +69,25 @@ export class CollectionFreeFormDocumentView extends React.Component 0 ? this.width / this.nativeWidth : 1; + } getTransform = (): Transform => { - var parentScaling = this.nativeWidth > 0 ? this.width / this.nativeWidth : 1; return this.props.ScreenToLocalTransform(). - translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / parentScaling); + translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / this.parentScaling); + } + + @computed + get docView() { + return } render() { - var parentScaling = this.nativeWidth > 0 ? this.width / this.nativeWidth : 1; return (
- - + {this.docView}
); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 69e413c6f..c026e13cd 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -31,7 +31,8 @@ export interface DocumentViewProps { isTopMost: boolean; //tfs: This shouldn't be necessary I don't think Scaling: number; - PanelSize: number[]; + PanelWidth: number; + PanelHeight: number; } export interface JsxArgs extends DocumentViewProps { Keys: { [name: string]: Key } -- cgit v1.2.3-70-g09d2 From 530be8dc0f049a4c05431c7b10ae47e46575fcbe Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 22 Feb 2019 17:10:44 -0500 Subject: fixed re-render issue for collection free form documents. --- src/client/views/DocumentDecorations.tsx | 5 +-- src/client/views/Main.tsx | 6 +-- .../views/collections/CollectionDockingView.tsx | 10 ++--- .../views/collections/CollectionFreeFormView.tsx | 46 ++++++------------- .../views/collections/CollectionSchemaView.tsx | 52 ++++++++++------------ .../views/nodes/CollectionFreeFormDocumentView.tsx | 9 ++-- src/client/views/nodes/DocumentView.tsx | 8 ++-- src/fields/Document.ts | 4 ++ 8 files changed, 59 insertions(+), 81 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 7b64a4c2c..efd50e49e 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -5,7 +5,6 @@ import { observer } from "mobx-react"; import './DocumentDecorations.scss' import { KeyStore } from '../../fields/KeyStore' import { NumberField } from "../../fields/NumberField"; -import { number } from "prop-types"; @observer export class DocumentDecorations extends React.Component { @@ -26,9 +25,9 @@ export class DocumentDecorations extends React.Component { if (element.props.isTopMost) { return bounds; } - let transform = (element.props.ScreenToLocalTransform().scale(element.props.Scaling)).inverse(); + let transform = (element.props.ScreenToLocalTransform().scale(element.props.ContentScaling())).inverse(); var [sptX, sptY] = transform.transformPoint(0, 0); - let [bptX, bptY] = transform.transformPoint(element.props.PanelWidth, element.props.PanelHeight); + let [bptX, bptY] = transform.transformPoint(element.props.PanelWidth(), element.props.PanelHeight()); return { x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y), r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b) diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 6f6a89839..661a2ac20 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -106,9 +106,9 @@ Documents.initProtos(() => {
Transform.Identity} - Scaling={1} - PanelWidth={0} - PanelHeight={0} + ContentScaling={() => 1} + PanelWidth={() => 0} + PanelHeight={() => 0} isTopMost={true} ContainingCollectionView={undefined} /> diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 7ac8ea5e4..86dc66e39 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -272,13 +272,13 @@ export class DockedFrameRenderer extends React.Component { Server.GetField(this.props.documentId, action((f: Opt) => this._document = f as Document)); } - @computed private get _nativeWidth() { return this._document!.GetNumber(KeyStore.NativeWidth, 0); } - @computed private get _nativeHeight() { return this._document!.GetNumber(KeyStore.NativeHeight, 0); } - @computed private get _parentScaling() { return this._panelWidth / (this._nativeWidth ? this._nativeWidth : this._panelWidth); }; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView + private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, 0); } + private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, 0); } + private _contentScaling = () => { return this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); } ScreenToLocalTransform = () => { let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!); - return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._parentScaling) + return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._contentScaling()) } render() { @@ -289,7 +289,7 @@ export class DockedFrameRenderer extends React.Component { { return this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform()) } getLocalTransform = (): Transform => { - const [x, y] = this.translate; - return Transform.Identity.translate(-x, -y).scale(1 / this.scale); + return Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale); } + noScaling = () => 1; + @computed get views() { const { fieldKey, Document } = this.props; @@ -186,9 +166,9 @@ export class CollectionFreeFormView extends CollectionViewBase { RemoveDocument={this.props.removeDocument} ScreenToLocalTransform={this.getTransform} isTopMost={false} - Scaling={1} - PanelWidth={doc.GetNumber(KeyStore.Width, 0)} - PanelHeight={doc.GetNumber(KeyStore.Height, 0)} + ContentScaling={this.noScaling} + PanelWidth={doc.Width} + PanelHeight={doc.Height} ContainingCollectionView={this.props.CollectionView} />); }) } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 7e7d23fe4..ca47f6998 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -19,14 +19,14 @@ import { CollectionViewBase } from "./CollectionViewBase"; @observer export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef(); - private DIVIDER_WIDTH = 5; - @observable - selectedIndex = 0; - - @observable - _splitPercentage: number = 50; + @observable _contentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ContentScaling prop of the DocumentView + @observable _dividerX = 0; + @observable _panelWidth = 0; + @observable _panelHeight = 0; + @observable _selectedIndex = 0; + @observable _splitPercentage: number = 50; renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { @@ -67,7 +67,6 @@ export class CollectionSchemaView extends CollectionViewBase { ) } - private getTrProps: ComponentPropsGetterR = (state, rowInfo) => { const that = this; if (!rowInfo) { @@ -75,7 +74,7 @@ export class CollectionSchemaView extends CollectionViewBase { } return { onClick: action((e: React.MouseEvent, handleOriginal: Function) => { - that.selectedIndex = rowInfo.index; + that._selectedIndex = rowInfo.index; this._splitPercentage += 0.05; // bcz - ugh - needed to force Measure to do its thing and call onResize if (handleOriginal) { @@ -83,8 +82,8 @@ export class CollectionSchemaView extends CollectionViewBase { } }), style: { - background: rowInfo.index == this.selectedIndex ? "#00afec" : "white", - color: rowInfo.index == this.selectedIndex ? "white" : "black" + background: rowInfo.index == this._selectedIndex ? "#00afec" : "white", + color: rowInfo.index == this._selectedIndex ? "white" : "black" } }; } @@ -94,7 +93,6 @@ export class CollectionSchemaView extends CollectionViewBase { let nativeWidth = this._mainCont.current!.getBoundingClientRect(); this._splitPercentage = Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100); } - onDividerUp = (e: PointerEvent): void => { document.removeEventListener("pointermove", this.onDividerMove); document.removeEventListener('pointerup', this.onDividerUp); @@ -118,39 +116,37 @@ export class CollectionSchemaView extends CollectionViewBase { } } - - getTransform = (): Transform => { - return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._parentScaling); - } - @action setScaling = (r: any) => { const children = this.props.Document.GetList(this.props.fieldKey, []); - const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined; + const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; this._panelWidth = r.entry.width; this._panelHeight = r.entry.height ? r.entry.height : this._panelHeight; - this._parentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width); + this._contentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width); + } + + getContentScaling = (): number => this._contentScaling; + getPanelWidth = (): number => this._panelWidth; + getPanelHeight = (): number => this._panelHeight; + getTransform = (): Transform => { + return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling); } - @observable _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView - @observable _dividerX = 0; - @observable _panelWidth = 0; - @observable _panelHeight = 0; render() { const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]) const children = this.props.Document.GetList(this.props.fieldKey, []); - const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined; - let content = this.selectedIndex == -1 || !selected ? (null) : ( + const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; + let content = this._selectedIndex == -1 || !selected ? (null) : ( {({ measureRef }) =>
} diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index ad6756918..17123bf52 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -24,7 +24,7 @@ export class CollectionFreeFormDocumentView extends React.Component { return this.nativeWidth > 0 ? this.width / this.nativeWidth : 1; } getTransform = (): Transform => { return this.props.ScreenToLocalTransform(). - translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / this.parentScaling); + translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / this.contentScaling()); } @computed get docView() { return } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index c026e13cd..34a230669 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -30,9 +30,9 @@ export interface DocumentViewProps { ScreenToLocalTransform: () => Transform; isTopMost: boolean; //tfs: This shouldn't be necessary I don't think - Scaling: number; - PanelWidth: number; - PanelHeight: number; + ContentScaling: () => number; + PanelWidth: () => number; + PanelHeight: () => number; } export interface JsxArgs extends DocumentViewProps { Keys: { [name: string]: Key } @@ -293,7 +293,7 @@ export class DocumentView extends React.Component { var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); var nodeWidth = nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%"; var nodeHeight = nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%"; - var scaling = this.props.Scaling; + var scaling = this.props.ContentScaling(); return (
{ return this.GetNumber(KeyStore.Width, 0) } + public Height = () => { return this.GetNumber(KeyStore.Height, 0) } + public Scale = () => { return this.GetNumber(KeyStore.Scale, 1) } + @computed public get Title() { return this.GetText(KeyStore.Title, ""); -- cgit v1.2.3-70-g09d2 From 5d6d6e00e8fbff1f4475235b1912efcee85eb91e Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 22 Feb 2019 21:39:40 -0500 Subject: moved backgroundLayout to CollectionFreeForm --- src/client/views/DocumentDecorations.tsx | 2 +- .../views/collections/CollectionFreeFormView.tsx | 58 ++++++++++++++-------- .../views/collections/CollectionSchemaView.tsx | 3 +- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/CollectionViewBase.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 41 ++++----------- src/client/views/nodes/FieldView.tsx | 3 +- src/client/views/nodes/FormattedTextBox.tsx | 1 - 8 files changed, 55 insertions(+), 57 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index efd50e49e..09df8cdaa 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -101,7 +101,7 @@ export class DocumentDecorations extends React.Component { } SelectionManager.SelectedDocuments().forEach(element => { - const rect = element.screenRect; + const rect = element.screenRect(); if (rect.width !== 0) { let doc = element.props.Document; let width = doc.GetOrCreate(KeyStore.Width, NumberField); diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 43bc24a12..565402046 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -1,18 +1,25 @@ +import { action, computed } from "mobx"; import { observer } from "mobx-react"; -import React = require("react"); -import { action, computed, trace } from "mobx"; -import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; -import { DragManager } from "../../util/DragManager"; -import "./CollectionFreeFormView.scss"; -import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; -import { KeyStore } from "../../../fields/KeyStore"; import { Document } from "../../../fields/Document"; -import { ListField } from "../../../fields/ListField"; import { FieldWaiting } from "../../../fields/Field"; +import { KeyStore } from "../../../fields/KeyStore"; +import { ListField } from "../../../fields/ListField"; +import { TextField } from "../../../fields/TextField"; +import { DragManager } from "../../util/DragManager"; import { Transform } from "../../util/Transform"; -import { DocumentView } from "../nodes/DocumentView"; import { undoBatch } from "../../util/UndoManager"; -import { CollectionViewBase, SubCollectionViewProps } from "./CollectionViewBase"; +import { CollectionDockingView } from "../collections/CollectionDockingView"; +import { CollectionSchemaView } from "../collections/CollectionSchemaView"; +import { CollectionView } from "../collections/CollectionView"; +import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; +import { DocumentView } from "../nodes/DocumentView"; +import { FormattedTextBox } from "../nodes/FormattedTextBox"; +import { ImageBox } from "../nodes/ImageBox"; +import "./CollectionFreeFormView.scss"; +import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; +import { CollectionViewBase } from "./CollectionViewBase"; +import React = require("react"); +const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @observer export class CollectionFreeFormView extends CollectionViewBase { @@ -145,16 +152,13 @@ export class CollectionFreeFormView extends CollectionViewBase { }); } - getTransform = (): Transform => { - return this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform()) - } - getLocalTransform = (): Transform => { - return Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale); + @computed get backgroundLayout(): string | undefined { + let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField); + if (field && field !== "") { + return field.Data; + } } - - noScaling = () => 1; - @computed get views() { const { fieldKey, Document } = this.props; @@ -175,6 +179,21 @@ export class CollectionFreeFormView extends CollectionViewBase { return null; } + @computed + get backgroundView() { + return !this.backgroundLayout ? (null) : + ( console.log(test)} + />); + } + getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform()) + getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale); + noScaling = () => 1; + render() { const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0); const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0); @@ -190,8 +209,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
- - {this.props.BackgroundView ? this.props.BackgroundView() : null} + {this.backgroundView} {this.views}
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index ca47f6998..d2db93120 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -34,7 +34,8 @@ export class CollectionSchemaView extends CollectionViewBase { fieldKey: rowProps.value[1], isSelected: () => false, select: () => { }, - isTopMost: false + isTopMost: false, + bindings: {} } let contents = ( diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index ff1803ec3..90080ab43 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -28,7 +28,7 @@ export class CollectionView extends React.Component { public static LayoutString(fieldKey: string = "DataKey") { return ``; } public active = () => { diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 06de56383..da7f71163 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -19,7 +19,7 @@ export interface CollectionViewProps { isSelected: () => boolean; isTopMost: boolean; select: (ctrlPressed: boolean) => void; - BackgroundView?: () => JSX.Element; + bindings: any; } export interface SubCollectionViewProps extends CollectionViewProps { active: () => boolean; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d9b1d90d8..a9e211431 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -5,7 +5,6 @@ import { Field, FieldWaiting, Opt } from "../../../fields/Field"; import { Key } from "../../../fields/Key"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; -import { TextField } from "../../../fields/TextField"; import { DragManager } from "../../util/DragManager"; import { SelectionManager } from "../../util/SelectionManager"; import { Transform } from "../../util/Transform"; @@ -84,21 +83,13 @@ export class DocumentView extends React.Component { private _downX: number = 0; private _downY: number = 0; - get screenRect(): ClientRect | DOMRect { - return (this._mainCont.current) ? this._mainCont.current.getBoundingClientRect() : new DOMRect(); - } @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); } @computed get topMost(): boolean { return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; } @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "

Error loading layout data

"); } @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array()); } @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array()); } - @computed get backgroundLayout(): string | undefined { - let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField); - if (field && field !== "") { - return field.Data; - } - } + screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect(); onPointerDown = (e: React.PointerEvent): void => { this._downX = e.clientX; @@ -174,6 +165,7 @@ export class DocumentView extends React.Component { ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) } + @action onContextMenu = (e: React.MouseEvent): void => { e.preventDefault() e.stopPropagation(); @@ -230,32 +222,19 @@ export class DocumentView extends React.Component { let field = this.props.Document.Get(key); this._documentBindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field; } - - /* - tfs: - Should this be moved to CollectionFreeformView or another component that renders - Document backgrounds (or contents based on a layout key, which could be used here as well) - that CollectionFreeformView uses? It seems like a lot for it to be here considering only one view currently uses it... - */ - let backgroundLayout = this.backgroundLayout; - if (backgroundLayout) { - let backgroundView = () => ( { console.log(test) }} - />); - this._documentBindings.BackgroundView = backgroundView; - } + this._documentBindings.bindings = this._documentBindings; var scaling = this.props.ContentScaling(); var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); - var nodeWidth = nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%"; - var nodeHeight = nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%"; return ( -
0 ? nativeWidth.toString() + "px" : "100%", + height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%", + transformOrigin: "left top", + transform: `scale(${scaling},${scaling})` + }} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} > {this.mainContent} diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 821172d71..97d3f2a85 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -22,11 +22,12 @@ export interface FieldViewProps { isSelected: () => boolean; select: () => void; isTopMost: boolean; + bindings: any; } @observer export class FieldView extends React.Component { - public static LayoutString(fieldType: { name: string }) { return `<${fieldType.name} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} isSelected={isSelected} select={select} isTopMost={isTopMost} />`; } + public static LayoutString(fieldType: { name: string }) { return `<${fieldType.name} doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={DataKey} isSelected={isSelected} select={select} isTopMost={isTopMost} />`; } @computed get field(): FieldValue { const { doc, fieldKey } = this.props; diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index b17650d06..16728d471 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -6,7 +6,6 @@ import { schema } from "prosemirror-schema-basic"; import { EditorState, Transaction } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import { Opt, FieldWaiting, FieldValue } from "../../../fields/Field"; -import { SelectionManager } from "../../util/SelectionManager"; import "./FormattedTextBox.scss"; import React = require("react") import { RichTextField } from "../../../fields/RichTextField"; -- cgit v1.2.3-70-g09d2 From 81c0a8373fd5cb051531762243e200f11f8c7297 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Sat, 9 Mar 2019 23:00:41 -0500 Subject: editable workspace titles now supported, added 'display' prop to EditableView --- src/client/views/EditableView.tsx | 5 ++-- .../views/collections/CollectionSchemaView.tsx | 6 ++-- .../views/collections/CollectionTreeView.tsx | 5 +++- .../authentication/controllers/WorkspacesMenu.tsx | 32 +++++++++++++++------- 4 files changed, 33 insertions(+), 15 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 84b1b91c3..55a49863d 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -20,6 +20,7 @@ export interface EditableProps { */ contents: any; height: number + display: string; } /** @@ -46,10 +47,10 @@ export class EditableView extends React.Component { render() { if (this.editing) { return this.editing = false)} - style={{ display: "inline" }}> + style={{ display: this.props.display }}> } else { return ( -
this.editing = true)}> {this.props.contents}
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 49f95c014..2868e1322 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -50,7 +50,9 @@ export class CollectionSchemaView extends CollectionViewBase { let onItemDown = setupDrag(reference, () => props.doc); return (
- { let field = props.doc.Get(props.fieldKey); if (field && field instanceof Field) { @@ -59,7 +61,7 @@ export class CollectionSchemaView extends CollectionViewBase { return field || ""; }} SetValue={(value: string) => { - let script = CompileScript(value, undefined, true); + let script = CompileScript(value); if (!script.compiled) { return false; } diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 8b06d9ac4..9c31bdae2 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -69,7 +69,9 @@ class TreeView extends React.Component { return
; } - return
{ let title = this.props.document.GetT(KeyStore.Title, TextField); if (title && title !== "") @@ -159,6 +161,7 @@ export class CollectionTreeView extends CollectionViewBase {
this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}>

{ return this.props.Document.Title; }} SetValue={(value: string) => { diff --git a/src/server/authentication/controllers/WorkspacesMenu.tsx b/src/server/authentication/controllers/WorkspacesMenu.tsx index 70c37774c..ffef2e11c 100644 --- a/src/server/authentication/controllers/WorkspacesMenu.tsx +++ b/src/server/authentication/controllers/WorkspacesMenu.tsx @@ -7,6 +7,8 @@ import './WorkspacesMenu.css' import { Document } from '../../../fields/Document'; import { Server } from '../../../client/Server'; import { Field } from '../../../fields/Field'; +import { EditableView } from '../../../client/views/EditableView'; +import { KeyStore } from '../../../fields/KeyStore'; export interface WorkspaceMenuProps { active: Document; @@ -67,19 +69,29 @@ export class WorkspacesMenu extends React.Component { }} onClick={this.addNewWorkspace} /> - {this.props.allWorkspaces.map(s => -
  • +
    { + onContextMenu={(e) => { + e.preventDefault(); this.props.open(s); - console.log(this.props.allWorkspaces.length); }} - >{s.Title}
    • + style={{ + marginTop: 10 + }} + > + {i + 1} - + { return s.Title }} + SetValue={(title: string): boolean => { + s.SetText(KeyStore.Title, title); + return true; + }} + contents={s.Title} + height={20} + /> +

    )}
    ); -- cgit v1.2.3-70-g09d2