From 36eefd94f5f5d3bc08f1f1dea31d0b752a2070c3 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Fri, 24 Apr 2020 00:34:25 +0530 Subject: developing grid --- .../collectionGrid/CollectionGridView.scss | 1 + .../collectionGrid/CollectionGridView.tsx | 104 +++++++++++++++++++-- .../views/collections/collectionGrid/Grid.tsx | 33 ++++--- 3 files changed, 113 insertions(+), 25 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index c089585a0..0f1b64fa6 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -3,6 +3,7 @@ overflow: hidden; width: 100%; height: 100%; + flex-direction: column; .document-wrapper { display: flex; diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 2e496fe7f..70e0d41b9 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -18,13 +18,103 @@ import Grid from "./Grid"; type GridSchema = makeInterface<[typeof documentSchema]>; const GridSchema = makeInterface(documentSchema); +interface Layout { + i: string; + x: number; + y: number; + w: number; + h: number; +} + + + export class CollectionGridView extends CollectionSubView(GridSchema) { + + /** + * @returns the transform that will correctly place + * the document decorations box, shifted to the right by + * 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 += this.lookupPixels(candidate) + resizerWidth; + } + return Transform.Identity(); // type coersion, this case should never be hit + } + + + @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } + + addDocTab = (doc: Doc, where: string) => { + if (where === "inPlace" && this.layoutDoc.isInPlaceContainer) { + this.dataDoc[this.props.fieldKey] = new List([doc]); + return true; + } + return this.props.addDocTab(doc, where); + } + + getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { + return ; + } + + @computed + private get contents(): [JSX.Element[], Layout[]] { + const { childLayoutPairs } = this; + const { Document } = this.props; + const collector: JSX.Element[] = []; + const layoutArray = []; + 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 = () => this.props.PanelWidth() / 5 - 20; //this.lookupPixels(layout); + const height = () => 200;//PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); + collector.push( +
+ {this.getDisplayDoc(layout, dxf, width, height)} +
+ ); + + layoutArray.push( + { i: 'wrapper' + i, x: 2 * (i % 5), y: 2 * Math.floor(i / 5), w: 2, h: 2 } + ); + } + return [collector, layoutArray]; + } + + render(): JSX.Element { - const layout = [ - { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true }, - { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }, - { i: 'c', x: 4, y: 0, w: 1, h: 2 } - ]; + + const contents: JSX.Element[] = this.contents?.[0]; + const layout: Layout[] = this.contents?.[1]; + return (
- - - +
); } diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 550459299..7b8dcefb5 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -1,33 +1,32 @@ import * as React from 'react'; import { observer } from "mobx-react"; -import { observable, action } from "mobx"; -interface Props { - -} - import "../../../../../node_modules/react-grid-layout/css/styles.css"; import "../../../../../node_modules/react-resizable/css/styles.css"; import * as GridLayout from 'react-grid-layout'; +interface GridProps { + width: number; + nodeList: JSX.Element[] | null; + layout: any; +} + @observer -export default class Grid extends React.Component { +export default class Grid extends React.Component { render() { // layout is an array of objects, see the demo for more complete usage - const layout = [ - { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true }, - { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }, - { i: 'c', x: 4, y: 0, w: 1, h: 2 } - ]; + // const layout = [ + // { i: 'wrapper0', x: 0, y: 0, w: 2, h: 2 },//, static: true }, + // { i: 'wrapper1', x: 2, y: 0, w: 2, h: 2 },// minW: 2, maxW: 4 }, + // { i: 'wrapper2', x: 4, y: 0, w: 2, h: 2 }, + // { i: 'wrapper3', x: 6, y: 0, w: 2, h: 2 },// minW: 2, maxW: 4 }, + // { i: 'wrapper4', x: 8, y: 0, w: 2, h: 2 } + // ]; return ( - //
- -
a
-
b
-
c
+ + {this.props.nodeList} ); } -- cgit v1.2.3-70-g09d2