diff options
3 files changed, 117 insertions, 41 deletions
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index b94bd02a1..f7d6f481a 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,7 +1,7 @@ import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from "react"; -import { Doc } from '../../../../new_fields/Doc'; +import { Doc, DataSym, DocListCast } from '../../../../new_fields/Doc'; import { documentSchema } from '../../../../new_fields/documentSchemas'; import { makeInterface } from '../../../../new_fields/Schema'; import { BoolCast, NumCast, ScriptCast, StrCast, Cast } from '../../../../new_fields/Types'; @@ -21,7 +21,20 @@ const GridSchema = makeInterface(documentSchema); export class CollectionGridView extends CollectionSubView(GridSchema) { - @observable private layouts: Layout[] | undefined; + private layouts: Layout[] = []; + private layoutDocs: Doc[] = []; + @observable private numCols: number = 10; + @observable private rowHeight: number = 100; + @observable private isMounted: boolean = false; + + componentDidMount() { + this.isMounted = true; + } + + componentWillUnmount() { + this.isMounted = false; + console.log("hola"); + } /** * @returns the transform that will correctly place @@ -29,24 +42,19 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * the sum of all the resolved column widths of the * documents before the target. */ - private lookupIndividualTransform = (layout: Doc) => { - // const columnUnitLength = this.columnUnitLength; - // if (columnUnitLength === undefined) { - // return Transform.Identity(); // we're still waiting on promises to resolve - // } - let offset = 0; - for (const { layout: candidate } of this.childLayoutPairs) { - if (candidate === layout) { - return this.props.ScreenToLocalTransform().translate(-offset, 0); - } - offset += 194 + 10; - } - return Transform.Identity(); // type coersion, this case should never be hit + private lookupIndividualTransform = (layout: Layout) => { + + const yTranslation = this.rowHeight * layout.y;// + 15 * (layout.y - 1); + console.log(yTranslation); + return this.props.ScreenToLocalTransform().translate(-this.props.PanelWidth() / this.numCols * layout.x, -yTranslation); } @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } + @observable private width = (layout: Layout) => layout.w * this.props.PanelWidth() / this.numCols; + @observable private height = (layout: Layout) => layout.h * this.rowHeight; + addDocTab = (doc: Doc, where: string) => { if (where === "inPlace" && this.layoutDoc.isInPlaceContainer) { this.dataDoc[this.props.fieldKey] = new List<Doc>([doc]); @@ -72,26 +80,76 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { getTransform={dxf} onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} + Display={"contents"} />; } + //@action set layout(layouts: Layout[]) { this.layouts = layouts; - console.log(this.layouts[0]); + this.props.Document.gridLayouts = new List<Doc>(); + for (const layout of layouts) { + const layoutDoc = new Doc(); + layoutDoc.i = layout.i; + layoutDoc.x = layout.x; + layoutDoc.y = layout.y; + layoutDoc.w = layout.w; + layoutDoc.h = layout.h; + + (this.props.Document.gridLayouts as List<Doc>).push(layoutDoc); + console.log("gazoinks"); + + } + this.forceUpdate(); // better way to do this? } - @computed get layout() { - if (this.layouts === undefined) { - this.layouts = []; - console.log("empty"); - for (let i = 0; i < this.childLayoutPairs.length; i++) { - this.layouts.push( - { i: 'wrapper' + i, x: 2 * (i % 5), y: 2 * Math.floor(i / 5), w: 2, h: 2 } - ); + //console.log(this.layouts.length === 0); + if (this.layouts.length === 0) { + if (this.props.Document.gridLayouts) { + //console.log(this.props.Document.gridLayouts); + // for (const layout of (this.props.Document.gridLayouts as List<Doc>)) { + // if (layout instanceof Doc) { + // this.layouts.push( + // { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number } + // ); + // } + // else { + // layout.then((layout: Doc) => { + // this.layouts.push( + // { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number } + // ); + // console.log(layout.i); + // }); + // } + // } + // } + for (const layout of DocListCast(this.props.Document.gridLayouts)) { + this.layouts.push( + { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number } + ); + } + } + else { + for (let i = 0; i < this.childLayoutPairs.length; i++) { + this.layouts.push( + { i: 'wrapper' + i, x: 2 * (i % 5), y: 2 * Math.floor(i / 5), w: 2, h: 2 } + ); + + const layoutDoc: Doc = new Doc(); + layoutDoc.i = "wrapper" + i; + layoutDoc.x = 2 * (i % 5); + layoutDoc.y = 2 * Math.floor(i / 5); + layoutDoc.w = 2; + layoutDoc.h = 2; + + this.layoutDocs.push(layoutDoc); + } + this.props.Document.gridLayouts = new List<Doc>(this.layoutDocs); } } + return this.layouts; } @@ -101,25 +159,39 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { const { Document } = this.props; const collector: JSX.Element[] = []; const layoutArray: Layout[] = []; + + + const previousLength = this.layout.length; + layoutArray.push(...this.layout); + + if (!layoutArray.length) { + return [[], []]; + } + + if (this.childLayoutPairs.length > previousLength) { + layoutArray.push( + { i: 'wrapper' + previousLength, x: 2 * (previousLength % 5), y: 2 * Math.floor(previousLength / 5), w: 2, h: 2 } + // add values to document + ); + // this.layout.push( + // { i: 'wrapper' + previousLength, x: 2 * (previousLength % 5), y: 2 * Math.floor(previousLength / 5), w: 2, h: 2 } + // ); + } + for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; - const dxf = () => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin)); - const width = () => 300; //this.lookupPixels(layout); - const height = () => 300;//PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); + const dxf = () => this.lookupIndividualTransform(layoutArray[i]);//.translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin)); + const width = () => this.width(layoutArray[i]); //this.lookupPixels(layout); + const height = () => this.height(layoutArray[i]);//PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); collector.push( <div className={"document-wrapper"} key={"wrapper" + i} - //style={{ width: width() }} > {this.getDisplayDoc(layout, dxf, width, height)} </div> ); - - layoutArray.push( - { i: 'wrapper' + i, x: 2 * (i % 5), y: 2 * Math.floor(i / 5), w: 2, h: 2 } - // add values to document - ); } + return [collector, layoutArray]; } @@ -127,7 +199,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { const contents: JSX.Element[] = this.contents?.[0]; const layout: Layout[] = this.contents?.[1]; - + // if (this.isMounted) { return ( <div className="collectionGridView_contents" style={{ @@ -140,8 +212,11 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { nodeList={contents} layout={layout} gridView={this} + numCols={this.numCols} + rowHeight={this.rowHeight} /> </div> ); + // } } } diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index a9e906488..ce0173e94 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -16,24 +16,23 @@ interface GridProps { nodeList: JSX.Element[] | null; layout: Layout[]; gridView: CollectionGridView; + numCols: number; + rowHeight: number; } @observer export default class Grid extends React.Component<GridProps, GridLayout.ResponsiveProps> { onLayoutChange(layout: Layout[]) { - // for (let i = 0; i < this.props.nodeList!.length; i++) { - // this.props.layout[i] = layout[i]; - // } - console.log("REACHED"); this.props.gridView.layout = layout; } + render() { return ( <GridLayout className="layout" layout={this.props.layout} - cols={10} - rowHeight={100} + cols={this.props.numCols} + rowHeight={this.props.rowHeight} width={this.props.width} compactType={null} isDroppable={true} diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index 641797cac..814f8fd9c 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -43,6 +43,7 @@ interface ContentFittingDocumentViewProps { pinToPres: (document: Doc) => void; dontRegisterView?: boolean; rootSelected: (outsideReaction?: boolean) => boolean; + Display?: string; } @observer @@ -77,7 +78,8 @@ export class ContentFittingDocumentView extends React.Component<ContentFittingDo TraceMobx(); return (<div className="contentFittingDocumentView" style={{ width: Math.abs(this.centeringYOffset) > 0.001 ? "auto" : this.props.PanelWidth(), - height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight() + height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight(), + display: this.props.Display /* just added for grid */ }}> {!this.props.Document || !this.props.PanelWidth ? (null) : ( <div className="contentFittingDocumentView-previewDoc" |