From fb23850659dd6cc0b75d208168e25033096e07df Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Wed, 27 May 2020 20:11:06 +0530 Subject: changes --- .../views/collections/CollectionViewChromes.tsx | 4 +-- .../collectionGrid/CollectionGridView.scss | 19 ++++------- .../collectionGrid/CollectionGridView.tsx | 39 +++++++++++++--------- .../views/collections/collectionGrid/Grid.tsx | 1 + 4 files changed, 33 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 7e86995ac..2bffbdf7d 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -557,9 +557,9 @@ export class CollectionGridViewChrome extends React.Component - + - + diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 8f12c1a24..4ad3d7015 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -1,14 +1,9 @@ -.collectionGridView_contents { - display: flex; - overflow: hidden; - width: 100%; - height: 100%; - flex-direction: column; +// .react-grid-layout.layout { + // // max-height: 100%;// min-height: 100%; + // overflow-y: auto; + // } - .document-wrapper { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - } +.collectionView { + background-color: white; + overflow-y: scroll; } \ No newline at end of file diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 468665ee5..a887cf98b 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -14,6 +14,7 @@ import { returnZero } from '../../../../Utils'; import Grid, { Layout } from "./Grid"; import { Id } from '../../../../fields/FieldSymbols'; import { observer } from 'mobx-react'; +import "./CollectionGridView.scss"; type GridSchema = makeInterface<[typeof documentSchema]>; const GridSchema = makeInterface(documentSchema); @@ -64,16 +65,24 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ private lookupIndividualTransform = (doc: Doc) => { - const yTranslation = document.getElementById(doc.i as string)?.getBoundingClientRect().top; - const xTranslation = document.getElementById(doc.i as string)?.getBoundingClientRect().left;// - 250; + // const yTranslation = document.getElementById(doc.i as string)?.getBoundingClientRect().top; + // const xTranslation = document.getElementById(doc.i as string)?.getBoundingClientRect().left;// - 250; //console.log(xTranslation); + //console.log(`width: ${doc.w} height: ${doc.h} x: ${doc.x} y:${doc.y}`); + + const xTranslation = doc.x as number * this.props.PanelWidth() / (this.props.Document.numCols as number) + 10; + const yTranslation = doc.y as number * (this.props.Document.rowHeight as number + 10) + 10; + if (xTranslation === undefined || yTranslation === undefined) { + console.log("undefined babey"); return Transform.Identity(); } - return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation); + console.log(`xtrans: ${xTranslation} ytrans:${yTranslation}`); + + return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation);//.translate(-NumCast(this.props.Document._xMargin), -NumCast(this.props.Document._yMargin)); } @@ -85,25 +94,23 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * @param Doc doc */ private width = (doc: Doc) => { - // const left = document.getElementById(doc.i as string)?.getBoundingClientRect().left; - // const right = document.getElementById(doc.i as string)?.getBoundingClientRect().right; - // //console.log(left - right); - // return Math.abs(right - left); - return doc.w as number * (this.props.PanelWidth() - (this.props.Document.numCols as number - 1) * 10) / (this.props.Document.numCols as number); + + // return document.getElementById(doc.i as string)?.getBoundingClientRect().width; + const xTranslation = doc.w as number * (this.props.PanelWidth() - 10 * (this.props.Document.numCols as number + 1)) / (this.props.Document.numCols as number); + return (this.props.PanelWidth() - 10 * (this.props.Document.numCols as number + 1)) / (this.props.Document.numCols as number) * + (this.props.Document.flexGrid as boolean ? doc.w as number : 2) + 10 * (doc.w as number - 1);// doc.w or 2 } /** * Sets the height of the decorating box. * @param doc `Doc` */ private height = (doc: Doc) => { + //console.log(document.getElementById(doc.i as string)?.getBoundingClientRect()); - // const top = document.getElementById(doc.i as string)?.getBoundingClientRect().top; - // const bottom = document.getElementById(doc.i as string)?.getBoundingClientRect().bottom; - // //console.log(Math.abs(top - bottom)); - // return Math.abs(top - bottom); - - - return (doc.h as number) * (this.props.Document.rowHeight as number); + // return document.getElementById(doc.i as string)?.getBoundingClientRect().height; + return this.props.Document.rowHeight as number * + (this.props.Document.flexGrid as boolean ? doc.h as number : 2) + + 10 * (doc.h as number - 1);// + 10; } addDocTab = (doc: Doc, where: string) => { @@ -303,7 +310,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return ( -
{ isDroppable={true} margin={[10, 10]} onLayoutChange={this.onLayoutChange} + preventCollision={true} > {this.props.nodeList} -- cgit v1.2.3-70-g09d2