diff options
Diffstat (limited to 'src')
4 files changed, 120 insertions, 53 deletions
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index def20ae9b..2bffbdf7d 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -540,6 +540,8 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro } } + onCheck = (event: React.ChangeEvent<HTMLInputElement>) => this.props.CollectionView.props.Document.flexGrid = event.target.checked; + render() { return ( <div className="collectionTreeViewChrome-cont"> @@ -555,6 +557,13 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro </span> <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.rowHeight as string} onKeyDown={this.onRowHeightEnter} /> </span> + <span className={"search-icon"}> + <span className="icon-background"> + <FontAwesomeIcon icon="arrow-up" size="1x" /> + </span> + <input type="checkbox" onChange={this.onCheck} defaultChecked={this.props.CollectionView.props.Document.flexGrid as boolean} /> + <label>Flexible Grid</label> + </span> </div> ); } diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index c0a2cbc22..3e139ac97 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -1,13 +1,9 @@ -.collectionGridView_contents { - display: flex; - overflow: hidden; - width: 100%; - height: 100%; - flex-direction: column; -} -.collectionGridView_contents .document-wrapper { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; +// .react-grid-layout.layout { +// // max-height: 100%;// min-height: 100%; +// overflow-y: auto; +// } + +.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 9b24f1961..fdd25558c 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,10 +1,9 @@ -import { computed, observable, action } from 'mobx'; +import { computed, observable } from 'mobx'; import * as React from "react"; import { Doc, DocListCast } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; -import { makeInterface, createSchema } from '../../../../fields/Schema'; -import { BoolCast, NumCast, ScriptCast, StrCast, Cast } from '../../../../fields/Types'; -import { DragManager } from '../../../util/DragManager'; +import { makeInterface } from '../../../../fields/Schema'; +import { BoolCast, NumCast, ScriptCast } from '../../../../fields/Types'; import { Transform } from '../../../util/Transform'; import { undoBatch } from '../../../util/UndoManager'; import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView'; @@ -15,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"; import { SnappingManager } from '../../../util/SnappingManager'; @@ -29,6 +29,10 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.props.Document.numCols = this.props.Document.numCols ? this.props.Document.numCols : 10; this.props.Document.rowHeight = this.props.Document.rowHeight ? this.props.Document.rowHeight : 100; + this.props.Document.flexGrid = (this.props.Document.flexGrid !== undefined) ? this.props.Document.flexGrid : true; + + this.setLayout = this.setLayout.bind(this); + this.deleteInContext = this.deleteInContext.bind(this); } componentDidMount() { @@ -41,9 +45,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { for (let i = 0; i < this.childLayoutPairs.length; i++) { const layoutDoc: Doc = new Doc(); - layoutDoc.i = layoutDoc[Id]; - layoutDoc.x = 2 * (i % 5); - layoutDoc.y = 2 * Math.floor(i / 5); + layoutDoc.i = this.childLayoutPairs[i].layout[Id]; + layoutDoc.x = 2 * (i % Math.floor(this.props.Document.numCols as number / 2)); + layoutDoc.y = 2 * Math.floor(i / Math.floor(this.props.Document.numCols as number / 2)); layoutDoc.w = 2; layoutDoc.h = 2; @@ -53,7 +57,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } } - } /** @@ -94,6 +97,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { + console.log(layout[Id]); return <ContentFittingDocumentView {...this.props} Document={layout} @@ -109,9 +113,41 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} parentActive={this.props.active} + display={"contents"} + removeDocument={this.deleteInContext} />; } + @undoBatch + deleteInContext(doc: Doc | Doc[]): boolean { + + if (!(this.props.Document.flexGrid as boolean)) { + this.props.removeDocument(doc); + } + else { + const docList: Doc[] = DocListCast(this.props.Document.gridLayouts); + const newDocList: Doc[] = []; + if (doc instanceof Doc) { + for (const savedDoc of docList) { + if (savedDoc.i !== doc[Id]) { + console.log("compare"); + console.log(savedDoc.i); + console.log(doc[Id]); + newDocList.push(savedDoc); + } + } + this.props.Document.gridLayouts = new List<Doc>(newDocList); + this.props.removeDocument(doc); + } + // else { + // console.log("doc is list"); + // this.props.removeDocument(doc); + // } + } + console.log("here???? in deletei n conte"); + return true; + } + /** * Saves the layouts received from the Grid to the Document. @@ -120,29 +156,25 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @undoBatch setLayout(layouts: Layout[]) { - console.log("setting layout in CollectionGridView"); - console.log(layouts?.[0].w); - //this.props.Document.gridLayouts = new List<Doc>(); + if (this.props.Document.flexGrid) { - const docList: Doc[] = []; + const docList: Doc[] = []; + for (const layout of layouts) { - 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; + const layoutDoc = new Doc(); + layoutDoc.i = layout.i; + layoutDoc.x = layout.x; + layoutDoc.y = layout.y; + layoutDoc.w = layout.w; + layoutDoc.h = layout.h; - docList.push(layoutDoc); - } + docList.push(layoutDoc); + } - this.props.Document.gridLayouts = new List<Doc>(docList); + this.props.Document.gridLayouts = new List<Doc>(docList); + } } - // _.reject() on item removal? - - /** * @returns a list of `ContentFittingDocumentView`s inside wrapper divs. * The key of the wrapper div must be the same as the `i` value of the corresponding layout. @@ -165,12 +197,13 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; - const dxf = () => this.lookupIndividualTransform(docList?.[i]); - const width = () => this.width(docList?.[i]); - const height = () => this.height(docList?.[i]); + const dxf = () => this.lookupIndividualTransform(docList[i]); + const width = () => this.width(docList[i]); + const height = () => this.height(docList[i]); collector.push( <div className={"document-wrapper"} key={docList?.[i].i as string} + id={docList?.[i].i as string} > {this.getDisplayDoc(layout, dxf, width, height)} </div> @@ -187,10 +220,20 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { toLayoutList(docLayoutList: Doc[]): Layout[] { const layouts: Layout[] = []; - for (const layout of docLayoutList) { - 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 } - ); + + if (this.props.Document.flexGrid) { + for (const layout of docLayoutList) { + 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, static: !(this.props.Document.flexGrid as boolean) } + ); + } + } + else { + for (let i = 0; i < docLayoutList.length; i++) { + layouts.push( + { i: docLayoutList[i].i as string, x: 2 * (i % Math.floor(this.props.Document.numCols as number / 2)), y: 2 * Math.floor(i / Math.floor(this.props.Document.numCols as number / 2)), w: 2, h: 2, static: true } + ); + } } return layouts; } @@ -204,9 +247,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { if (this.childLayoutPairs.length > previousLength) { console.log("adding doc"); const layoutDoc: Doc = new Doc(); - layoutDoc.i = layoutDoc[Id]; - layoutDoc.x = 2 * (previousLength % 5); - layoutDoc.y = 2 * Math.floor(previousLength / 5); + layoutDoc.i = this.childLayoutPairs[this.childLayoutPairs.length - 1].layout[Id]; + layoutDoc.x = 2 * (previousLength % Math.floor(this.props.Document.numCols as number / 2)); + layoutDoc.y = 2 * Math.floor(previousLength / Math.floor(this.props.Document.numCols as number / 2)); layoutDoc.w = 2; layoutDoc.h = 2; @@ -218,11 +261,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.checkUpdate(); + //console.log("here first?"); + const docList: Doc[] = DocListCast(this.props.Document.gridLayouts); + //console.log("doclist length:::" + docList.length); const contents: JSX.Element[] = this.contents; const layout: Layout[] = this.toLayoutList(docList); + // for (const doc of docList) { + // console.log(doc.i); + // } + // if (layout.length === 0) { // console.log("layouts not loaded"); // } @@ -233,7 +283,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return ( - <div className="collectionGridView_contents" + <div className="collectionGridView-contents" style={{ marginLeft: NumCast(this.props.Document._xMargin), marginRight: NumCast(this.props.Document._xMargin), marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin), @@ -242,6 +292,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { ref={this.createDashEventsTarget} onPointerDown={e => { ((e.target as any)?.className.includes("react-resizable-handle")) && e.stopPropagation(); }} // the grid doesn't stopPropagation when its widgets are hit, so we need to otherwise the outer documents will respond > + DIV HERE with ref to access scroll of and adjust in getting position <Grid width={this.props.PanelWidth()} nodeList={contents} @@ -249,7 +300,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { transformScale={this.props.ScreenToLocalTransform().Scale} numCols={this.props.Document.numCols as number} rowHeight={this.props.Document.rowHeight as number} - setLayout={(layout: Layout[]) => this.setLayout(layout)} + setLayout={this.setLayout} + flex={this.props.Document.flexGrid as boolean} + scale={1 / this.props.ScreenToLocalTransform().Scale} /> </div> ); diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 9c66d1e33..423268d40 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -7,7 +7,6 @@ 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'; @@ -18,7 +17,8 @@ interface GridProps { numCols: number; rowHeight: number; setLayout: Function; - transformScale: number; + flex: boolean; + scale: number; } /** @@ -27,13 +27,20 @@ interface GridProps { @observer export default class Grid extends React.Component<GridProps> { + constructor(props: Readonly<GridProps>) { + super(props); + + this.onLayoutChange = this.onLayoutChange.bind(this); + } /** * If there has been a change in layout, calls a method in CollectionGridView to set the layouts on the Document. * @param layout `Layout[]` */ onLayoutChange(layout: Layout[]) { - console.log("setting in grid component" + layout[0].w); + console.log("setting in grid component" + layout[0]?.w); + // if (this.props.flex) { this.props.setLayout(layout); + // } } Scale = 2 @@ -49,7 +56,9 @@ export default class Grid extends React.Component<GridProps> { isDroppable={true} useCSSTransforms={true} margin={[10, 10]} - onLayoutChange={layout => this.onLayoutChange(layout)} + onLayoutChange={this.onLayoutChange} + preventCollision={true} + transformScale={this.props.scale} > {this.props.nodeList} </GridLayout > |