From e09ddf280d0e2bdef28477a6d7be06c57051dab6 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 12 Feb 2019 21:08:04 -0500 Subject: fixed up nested selections and scaling --- .../views/nodes/CollectionFreeFormDocumentView.tsx | 47 +++++++++------------- 1 file changed, 20 insertions(+), 27 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 9cd42a069..7a895dd60 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -11,6 +11,7 @@ import "./NodeView.scss"; import React = require("react"); import { DocumentView, DocumentViewProps } from "./DocumentView"; import { Transform } from "../../util/Transform"; +import { COLLECTION_BORDER_WIDTH } from '../../views/collections/CollectionViewBase'; @observer @@ -30,27 +31,17 @@ export class CollectionFreeFormDocumentView extends DocumentView { return new DOMRect(); } - @computed - get x(): number { - return this.props.Document.GetData(KeyStore.X, NumberField, Number(0)); - } - - @computed - get y(): number { - return this.props.Document.GetData(KeyStore.Y, NumberField, Number(0)); + public LeftCorner(): number { + return this.props.Document.GetNumber(KeyStore.X, 0) + super.LeftCorner(); } - set x(x: number) { - this.props.Document.SetData(KeyStore.X, x, NumberField) - } - - set y(y: number) { - this.props.Document.SetData(KeyStore.Y, y, NumberField) + public TopCorner(): number { + return this.props.Document.GetNumber(KeyStore.Y, 0) + super.TopCorner(); } @computed get transform(): string { - return `scale(${this.props.Scaling}, ${this.props.Scaling}) translate(${this.x}px, ${this.y}px)`; + return `scale(${this.props.ParentScaling}, ${this.props.ParentScaling}) translate(${this.props.Document.GetNumber(KeyStore.X, 0)}px, ${this.props.Document.GetNumber(KeyStore.Y, 0)}px)`; } @computed @@ -221,24 +212,26 @@ export class CollectionFreeFormDocumentView extends DocumentView { } getTransform = (): Transform => { - return this.props.GetTransform().translated(this.x, this.y); + return this.props.GetTransform().translated(this.props.Document.GetNumber(KeyStore.X, 0), this.props.Document.GetNumber(KeyStore.Y, 0)); } render() { var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView; + var parentScaling = this.nativeWidth > 0 ? this.width / this.nativeWidth : 1; return ( -
- - + onPointerDown={this.onPointerDown} + style={{ + transformOrigin: "left top", + transform: freestyling ? this.transform : "", + width: freestyling ? this.width : "100%", + height: freestyling ? this.height : "100%", + position: freestyling ? "absolute" : "relative", + zIndex: freestyling ? this.zIndex : 0, + }}> + +
); } -- cgit v1.2.3-70-g09d2 From b48e9b7850d0d244ce1fe519863b32969ed2c7d2 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 12 Feb 2019 22:18:26 -0500 Subject: minor cleanup --- src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 11 +++++------ src/client/views/nodes/DocumentView.tsx | 11 +++++------ 2 files changed, 10 insertions(+), 12 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 7a895dd60..6c9d4e16a 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -216,7 +216,6 @@ export class CollectionFreeFormDocumentView extends DocumentView { } render() { - var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView; var parentScaling = this.nativeWidth > 0 ? this.width / this.nativeWidth : 1; return (
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index bc3017275..9607a4984 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -171,13 +171,12 @@ export class DocumentView extends React.Component { onError={(test: any) => { console.log(test) }} />; bindings["BackgroundView"] = this.backgroundLayout ? annotated : null; - bindings["ParentScaling"] = 1; - var width = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); - var strwidth = width > 0 ? width.toString() + "px" : "100%"; - var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); - var strheight = height > 0 ? height.toString() + "px" : "100%"; + var nativewidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); + var nativeheight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); + var width = nativewidth > 0 ? nativewidth + "px" : "100%"; + var height = nativeheight > 0 ? nativeheight + "px" : "100%"; return ( -
+
Date: Wed, 13 Feb 2019 00:16:24 -0500 Subject: last cleanup --- .../views/collections/CollectionDockingView.tsx | 4 ++-- .../views/collections/CollectionFreeFormView.tsx | 4 ++-- .../views/nodes/CollectionFreeFormDocumentView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 25 +++++++++++----------- 4 files changed, 17 insertions(+), 18 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 914ea72fd..725b68a54 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -265,8 +265,8 @@ export class CollectionDockingView extends CollectionViewBase { const value: Document[] = Document.GetData(fieldKey, ListField, []); // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes. var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1; - var w = Document.GetData(KeyStore.Width, NumberField, Number(0)) / s; - var h = Document.GetData(KeyStore.Height, NumberField, Number(0)) / s; + var w = Document.GetNumber(KeyStore.Width, 0) / s; + var h = Document.GetNumber(KeyStore.Height, 0) / s; var chooseLayout = () => { if (!CollectionDockingView.UseGoldenLayout) diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 8b9fa8a87..04373df12 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -149,8 +149,8 @@ export class CollectionFreeFormView extends CollectionViewBase { let fReader = new FileReader() let file = e.dataTransfer.items[0].getAsFile(); let that = this; - const panx: number = this.props.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0)); - const pany: number = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0)); + const panx: number = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0); + const pany: number = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0); let x = e.pageX - panx let y = e.pageY - pany diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 6c9d4e16a..544ace075 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -79,7 +79,7 @@ export class CollectionFreeFormDocumentView extends DocumentView { @computed get zIndex(): number { - return this.props.Document.GetData(KeyStore.ZIndex, NumberField, Number(0)); + return this.props.Document.GetNumber(KeyStore.ZIndex, 0); } set zIndex(h: number) { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 355e431e6..ec68e9e51 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -41,12 +41,12 @@ export class DocumentView extends React.Component { @computed get parentScaling(): number { - return this._renderDoc.current ? this._renderDoc.current.props.ParentScaling : this.props.ParentScaling > 1 ? this.props.ParentScaling : 1; + return this._renderDoc.current ? this._renderDoc.current.props.ParentScaling : this.props.ParentScaling > 0 ? this.props.ParentScaling : 1; } @computed get layout(): string { - return this.props.Document.GetData(KeyStore.Layout, TextField, String("

Error loading layout data

")); + return this.props.Document.GetText(KeyStore.Layout, "

Error loading layout data

"); } @computed @@ -130,20 +130,19 @@ export class DocumentView extends React.Component { // // Converts a point in the coordinate space of the document to coordinate in app screen coordinates // - public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0, apply: boolean = false): { ScreenX: number, ScreenY: number } { - var parentScaling = apply ? this.parentScaling : 1; - - let parentX = (Panxx + (localX - COLLECTION_BORDER_WIDTH) * Ss) * parentScaling + this.LeftCorner(); - let parentY = (Panyy + (localY - COLLECTION_BORDER_WIDTH) * Ss) * parentScaling + this.TopCorner(); - + public TransformToScreenPoint(localX: number, localY: number, applyViewXf: boolean = false): { ScreenX: number, ScreenY: number } { + var parentScaling = applyViewXf ? this.parentScaling : 1; + let Panxx = applyViewXf ? this.props.Document.GetNumber(KeyStore.PanX, 0) : 0; + let Panyy = applyViewXf ? this.props.Document.GetNumber(KeyStore.PanY, 0) : 0; + var Zoom = applyViewXf ? this.props.Document.GetNumber(KeyStore.Scale, 1) : 1; + + let parentX = this.LeftCorner() + (Panxx + (localX - COLLECTION_BORDER_WIDTH) * Zoom) * parentScaling; + let parentY = this.TopCorner() + (Panyy + (localY - COLLECTION_BORDER_WIDTH) * Zoom) * parentScaling; // if this collection view is nested within another collection view, then // first transform the local point into the parent collection's coordinate space. - let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined; + let containingDocView = this.props.ContainingCollectionView ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined; if (containingDocView) { - let ss = containingDocView.props.Document.GetNumber(KeyStore.Scale, 1); - let panxx = containingDocView.props.Document.GetNumber(KeyStore.PanX, 0) + COLLECTION_BORDER_WIDTH * ss * parentScaling; - let panyy = containingDocView.props.Document.GetNumber(KeyStore.PanY, 0) + COLLECTION_BORDER_WIDTH * ss * parentScaling; - let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy, true); + let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX + COLLECTION_BORDER_WIDTH * parentScaling, parentY + COLLECTION_BORDER_WIDTH * parentScaling, true); parentX = ScreenX; parentY = ScreenY; } -- cgit v1.2.3-70-g09d2 From 47157f2d95ac1a9541ae313da321d050b073d0a7 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 13 Feb 2019 10:38:59 -0500 Subject: more css playing. moved NodeView to DocumentView.scss --- src/client/views/Main.tsx | 3 ++- .../views/collections/CollectionSchemaView.scss | 11 +++++++++-- .../views/collections/CollectionSchemaView.tsx | 13 ++++++++---- .../views/nodes/CollectionFreeFormDocumentView.tsx | 5 ++--- src/client/views/nodes/DocumentView.scss | 23 ++++++++++++++++++++++ src/client/views/nodes/DocumentView.tsx | 6 ++---- src/client/views/nodes/NodeView.scss | 23 ---------------------- 7 files changed, 47 insertions(+), 37 deletions(-) create mode 100644 src/client/views/nodes/DocumentView.scss delete mode 100644 src/client/views/nodes/NodeView.scss (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index e78949ba7..aec9618ae 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -45,12 +45,13 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { doc2.Set(KS.X, new NumberField(150)); doc2.Set(KS.Y, new NumberField(20)); let doc3 = Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", { - x: 450, y: 100, title: "cat 1", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386 + x: 450, y: 100, title: "dog", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386 }); //doc3.Set(KeyStore.Data, new ImageField); const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", { x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v, nativeWidth: 606, nativeHeight: 386 })); + schemaDocs.push(doc3); schemaDocs[0].SetData(KS.Author, "Tyler", TextField); schemaDocs[4].SetData(KS.Author, "Bob", TextField); schemaDocs.push(doc2); diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 70715c7a3..7c4726c7b 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -1,10 +1,17 @@ .collectionSchemaView-container { - + border-style: solid; + box-sizing: border-box; + .collectionfreeformview-container { + border-width: 0px !important + } .imageBox-cont { position:relative; max-height:100%; } + .ReactTable { + position: absolute + } .ReactTable .rt-th, .ReactTable .rt-td { max-height: 75px; } @@ -12,7 +19,7 @@ object-fit: contain; height: 100% } - .node { + .documentView-node { width:100% !important; height:100% !important; .imageBox-cont img { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index b6bdccaa9..1d045ac78 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -7,7 +7,7 @@ import { observable, action, computed } from "mobx"; import SplitPane from "react-split-pane" import "./CollectionSchemaView.scss" import { ScrollBox } from "../../util/ScrollBox"; -import { CollectionViewBase } from "./CollectionViewBase"; +import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; import { DocumentView } from "../nodes/DocumentView"; import { EditableView } from "../EditableView"; import { CompileScript, ToField } from "../../util/Scripting"; @@ -116,8 +116,12 @@ export class CollectionSchemaView extends CollectionViewBase { content =
} return ( -
- +
+ { return ( diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 544ace075..a2fbe96d2 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -7,11 +7,10 @@ import { SelectionManager } from "../../util/SelectionManager"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; import { ContextMenu } from "../ContextMenu"; -import "./NodeView.scss"; +import "./DocumentView.scss"; import React = require("react"); import { DocumentView, DocumentViewProps } from "./DocumentView"; import { Transform } from "../../util/Transform"; -import { COLLECTION_BORDER_WIDTH } from '../../views/collections/CollectionViewBase'; @observer @@ -218,7 +217,7 @@ export class CollectionFreeFormDocumentView extends DocumentView { render() { var parentScaling = this.nativeWidth > 0 ? this.width / this.nativeWidth : 1; return ( -
{ var width = nativewidth > 0 ? nativewidth + "px" : "100%"; var height = nativeheight > 0 ? nativeheight + "px" : "100%"; return ( -