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') 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