diff options
Diffstat (limited to 'src')
3 files changed, 61 insertions, 30 deletions
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 0f1b64fa6..8f12c1a24 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -8,7 +8,7 @@ .document-wrapper { display: flex; flex-direction: column; - width: 100px; - height: 100px; + width: 100%; + height: 100%; } }
\ 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 70e0d41b9..b94bd02a1 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,4 +1,4 @@ -import { action, computed } from 'mobx'; +import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from "react"; import { Doc } from '../../../../new_fields/Doc'; @@ -13,23 +13,16 @@ import { CollectionSubView } from '../CollectionSubView'; import { List } from '../../../../new_fields/List'; import { returnZero } from '../../../../Utils'; import Grid from "./Grid"; +import { Layout } 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) { + @observable private layouts: Layout[] | undefined; + /** * @returns the transform that will correctly place * the document decorations box, shifted to the right by @@ -46,7 +39,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { if (candidate === layout) { return this.props.ScreenToLocalTransform().translate(-offset, 0); } - //offset += this.lookupPixels(candidate) + resizerWidth; + offset += 194 + 10; } return Transform.Identity(); // type coersion, this case should never be hit } @@ -82,17 +75,37 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { />; } + //@action + set layout(layouts: Layout[]) { + this.layouts = layouts; + console.log(this.layouts[0]); + } + + @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 } + ); + } + } + return this.layouts; + } + @computed private get contents(): [JSX.Element[], Layout[]] { const { childLayoutPairs } = this; const { Document } = this.props; const collector: JSX.Element[] = []; - const layoutArray = []; + const layoutArray: Layout[] = []; 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); + const width = () => 300; //this.lookupPixels(layout); + const height = () => 300;//PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); collector.push( <div className={"document-wrapper"} key={"wrapper" + i} @@ -104,12 +117,12 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { 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]; } - render(): JSX.Element { const contents: JSX.Element[] = this.contents?.[0]; @@ -122,7 +135,12 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin) }} ref={this.createDashEventsTarget}> - <Grid width={this.props.PanelWidth()} nodeList={contents} layout={layout} /> + <Grid + width={this.props.PanelWidth()} + nodeList={contents} + layout={layout} + gridView={this} + /> </div> ); } diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 7b8dcefb5..a9e906488 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -6,28 +6,41 @@ import "../../../../../node_modules/react-grid-layout/css/styles.css"; import "../../../../../node_modules/react-resizable/css/styles.css"; import * as GridLayout from 'react-grid-layout'; +import { Layout } from 'react-grid-layout'; +import { CollectionGridView } from './CollectionGridView'; +export { Layout } from 'react-grid-layout'; + interface GridProps { width: number; nodeList: JSX.Element[] | null; - layout: any; + layout: Layout[]; + gridView: CollectionGridView; } @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() { - // layout is an array of objects, see the demo for more complete usage - // 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 ( - <GridLayout className="layout" layout={this.props.layout} cols={10} rowHeight={100} width={this.props.width}> + <GridLayout className="layout" + layout={this.props.layout} + cols={10} + rowHeight={100} + width={this.props.width} + compactType={null} + isDroppable={true} + onLayoutChange={layout => this.onLayoutChange(layout)} + > {this.props.nodeList} - </GridLayout> + </GridLayout > ); } } |