From 81b5269e4e934523a6dd69cf066f3e6c4e58019f 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. --- .../views/collections/CollectionSchemaView.tsx | 49 +++++++++++++++++++--- 1 file changed, 44 insertions(+), 5 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 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 }) =>
-- cgit v1.2.3-70-g09d2 From 0653677ae9fb28916b9671c710e5b1d49ee1be5a 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 fd4f12795e0944ec6e4122274ff7e2f309663192 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