From a793e29e99d15ac0fe39c0ac838b10d8311eec03 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Thu, 28 Feb 2019 10:34:33 -0500 Subject: Started fixing transforms --- .../views/collections/CollectionDockingView.tsx | 2 +- .../views/collections/CollectionFreeFormView.tsx | 26 ++++++++++++++-------- .../views/nodes/CollectionFreeFormDocumentView.tsx | 1 + src/client/views/nodes/DocumentView.tsx | 9 ++++++++ 4 files changed, 28 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 915e33533..ad7164e33 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -236,7 +236,7 @@ interface DockedFrameProps { @observer export class DockedFrameRenderer extends React.Component { - @observable private _mainCont = React.createRef(); + private _mainCont = React.createRef(); @observable private _panelWidth = 0; @observable private _panelHeight = 0; @observable private _document: Opt; diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 63255dd90..dee4651df 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -100,9 +100,9 @@ export class CollectionFreeFormView extends CollectionViewBase { e.stopPropagation(); let x = this.props.Document.GetNumber(KeyStore.PanX, 0); let y = this.props.Document.GetNumber(KeyStore.PanY, 0); - let [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); + let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); this._previewCursorVisible = false; - this.SetPan(x + dx, y + dy); + this.SetPan(x - dx, y - dy); } this._lastX = e.pageX; this._lastY = e.pageY; @@ -134,10 +134,14 @@ export class CollectionFreeFormView extends CollectionViewBase { let [x, y] = transform.transformPoint(e.clientX, e.clientY); let localTransform = this.getLocalTransform(); - localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y) + console.log("test") + console.log(localTransform.inverse()) + console.log([x, y]) + localTransform = localTransform.inverse().preTranslate(-this.centeringShiftX, -this.centeringShiftY).scaleAbout(deltaScale, x, y) + console.log(localTransform) this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale); - this.SetPan(localTransform.TranslateX, localTransform.TranslateY); + this.SetPan(-localTransform.TranslateX, -localTransform.TranslateY); } } @@ -250,8 +254,8 @@ export class CollectionFreeFormView extends CollectionViewBase { />); } - getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH - this.centeringShiftX, -COLLECTION_BORDER_WIDTH - this.centeringShiftY).transform(this.getLocalTransform()) - getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale); + getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform()) + getLocalTransform = (): Transform => Transform.Identity.translate(-this.centeringShiftX, -this.centeringShiftY).scale(1 / this.scale).translate(this.panX, this.panY); noScaling = () => 1; //when focus is lost, this will remove the preview cursor @@ -270,8 +274,12 @@ export class CollectionFreeFormView extends CollectionViewBase { cursor =
I
} - const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX; - const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY; + let [dx, dy] = [this.centeringShiftX, this.centeringShiftY]; + + const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0); + const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0); + // const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX; + // const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY; return (
{this.backgroundView} {cursor} diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 50dc5a619..9edad1f64 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -69,6 +69,7 @@ export class CollectionFreeFormDocumentView extends React.Component { 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: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) }) + ContextMenu.Instance.addItem({ + description: "center", event: () => { + if (this.props.ContainingCollectionView) { + let doc = this.props.ContainingCollectionView.props.Document; + doc.SetNumber(KeyStore.PanX, this.props.Document.GetNumber(KeyStore.X, 0) + (this.props.Document.GetNumber(KeyStore.Width, 0) / 2)) + doc.SetNumber(KeyStore.PanY, this.props.Document.GetNumber(KeyStore.Y, 0) + (this.props.Document.GetNumber(KeyStore.Height, 0) / 2)) + } + } + }) //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) }) ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) if (!this.topMost) { -- cgit v1.2.3-70-g09d2 From fa2a9c1af221e12f10b6297851846828c6c5110f Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Thu, 28 Feb 2019 13:31:04 -0500 Subject: minor cleanup and fixed transforms --- src/client/views/Main.tsx | 3 --- src/client/views/collections/CollectionFreeFormView.tsx | 14 ++++++-------- 2 files changed, 6 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 16e95ad82..24c2ea7f7 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -33,19 +33,16 @@ let mainContainer: Document; let mainfreeform: Document; console.log("HELLO WORLD") Documents.initProtos(mainDocId, (res?: Document) => { - console.log("Response => " + JSON.stringify(res as Document)) if (res instanceof Document) { mainContainer = res; 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())) // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) setTimeout(() => { mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" }); - Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainfreeform.ToJson())); var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(mainfreeform)] }] }; mainContainer.SetText(KeyStore.Data, JSON.stringify(dockingLayout)); diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index dee4651df..736896c08 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -133,15 +133,12 @@ export class CollectionFreeFormView extends CollectionViewBase { deltaScale = 1 / this.zoomScaling; let [x, y] = transform.transformPoint(e.clientX, e.clientY); - let localTransform = this.getLocalTransform(); - console.log("test") - console.log(localTransform.inverse()) - console.log([x, y]) - localTransform = localTransform.inverse().preTranslate(-this.centeringShiftX, -this.centeringShiftY).scaleAbout(deltaScale, x, y) + let localTransform = this.getLocalTransform() + localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y) console.log(localTransform) this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale); - this.SetPan(-localTransform.TranslateX, -localTransform.TranslateY); + this.SetPan(-localTransform.TranslateX / localTransform.Scale, -localTransform.TranslateY / localTransform.Scale); } } @@ -254,8 +251,8 @@ export class CollectionFreeFormView extends CollectionViewBase { />); } - getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform()) - getLocalTransform = (): Transform => Transform.Identity.translate(-this.centeringShiftX, -this.centeringShiftY).scale(1 / this.scale).translate(this.panX, this.panY); + getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform()) + getLocalTransform = (): Transform => Transform.Identity.scale(1 / this.scale).translate(this.panX, this.panY); noScaling = () => 1; //when focus is lost, this will remove the preview cursor @@ -280,6 +277,7 @@ export class CollectionFreeFormView extends CollectionViewBase { const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0); // const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX; // const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY; + console.log("center:", this.getLocalTransform().transformPoint(this.centeringShiftX, this.centeringShiftY)); return (
Date: Thu, 28 Feb 2019 16:38:59 -0500 Subject: Fixed transform errors --- src/client/views/collections/CollectionFreeFormView.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index fe3f4fe92..5e9dcd5d5 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -145,10 +145,10 @@ export class CollectionFreeFormView extends CollectionViewBase { @action private SetPan(panX: number, panY: number) { - const newPanX = -Math.max((1 - this.zoomScaling) * this.nativeWidth, Math.min(0, panX)); - const newPanY = -Math.max((1 - this.zoomScaling) * this.nativeHeight, Math.min(0, panY)); - this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : -panX); - this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : -panY); + const newPanX = Math.max((1 - this.zoomScaling) * this.nativeWidth, Math.min(0, panX)); + const newPanY = Math.max((1 - this.zoomScaling) * this.nativeHeight, Math.min(0, panY)); + this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX); + this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY); } @action -- cgit v1.2.3-70-g09d2