diff options
Diffstat (limited to 'src')
3 files changed, 113 insertions, 25 deletions
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>([doc]); + return true; + } + return this.props.addDocTab(doc, where); + } + + getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { + return <ContentFittingDocumentView + {...this.props} + Document={layout} + DataDocument={layout.resolvedDataDoc as Doc} + NativeHeight={returnZero} + NativeWidth={returnZero} + addDocTab={this.addDocTab} + fitToBox={BoolCast(this.props.Document._freezeChildDimensions)} + FreezeDimensions={BoolCast(this.props.Document._freezeChildDimensions)} + backgroundColor={this.props.backgroundColor} + CollectionDoc={this.props.Document} + PanelWidth={width} + PanelHeight={height} + getTransform={dxf} + onClick={this.onChildClickHandler} + renderDepth={this.props.renderDepth + 1} + />; + } + + @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( + <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 } + ); + } + 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 ( <div className="collectionGridView_contents" style={{ @@ -32,9 +122,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin) }} ref={this.createDashEventsTarget}> - <Grid> - - </Grid> + <Grid width={this.props.PanelWidth()} nodeList={contents} layout={layout} /> </div> ); } 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<GridProps, GridLayout.ResponsiveProps> { 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 ( - // <div className="collectionGridView_contents" - // style={}> - <GridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}> - <div key="a">a</div> - <div key="b">b</div> - <div key="c">c</div> + <GridLayout className="layout" layout={this.props.layout} cols={10} rowHeight={100} width={this.props.width}> + {this.props.nodeList} </GridLayout> ); } |