diff options
5 files changed, 192 insertions, 71 deletions
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 9795a3a22..910c14060 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -164,13 +164,31 @@ } } - .collectionStackingViewChrome-cont, .collectionTreeViewChrome-cont { display: flex; justify-content: space-between; } + .collectionGridViewChrome-cont { + display: flex; + margin-left: 10; + + .grid-control { + align-self: center; + width: 30%; + + .grid-icon { + margin-right: 5px; + } + } + + .collectionGridViewChrome-entryBox { + width: 50%; + } + } + + .collectionStackingViewChrome-sort, .collectionTreeViewChrome-sort { display: flex; @@ -238,9 +256,6 @@ cursor: text; } - .collectionGridViewChrome-entryBox { - width: 50%; - } } } diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index def20ae9b..9423e417d 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -15,8 +15,6 @@ import { COLLECTION_BORDER_WIDTH } from "../globalCssVariables.scss"; import { CollectionViewType } from "./CollectionView"; import { CollectionView } from "./CollectionView"; import "./CollectionViewChromes.scss"; -import { CollectionGridView } from "./collectionGrid/CollectionGridView"; -import HeightLabel from "./collectionMulticolumn/MultirowHeightLabel"; const datepicker = require('js-datepicker'); interface CollectionViewChromeProps { @@ -516,10 +514,10 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro /** * Sets the value of `numCols` on the grid's Document to the value entered. */ - @action + @undoBatch onNumColsEnter = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Enter" || e.key === "Tab") { - if (this.props.CollectionView.props.Document.numCols as number !== e.currentTarget.valueAsNumber) { + if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.numCols as number !== e.currentTarget.valueAsNumber) { this.props.CollectionView.props.Document.numCols = e.currentTarget.valueAsNumber; //this.props.CollectionView.forceUpdate(); // to be used if CollectionGridView is not an observer } @@ -530,30 +528,44 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro /** * Sets the value of `rowHeight` on the grid's Document to the value entered. */ - @action + @undoBatch onRowHeightEnter = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Enter" || e.key === "Tab") { - if (this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) { + if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) { this.props.CollectionView.props.Document.rowHeight = e.currentTarget.valueAsNumber; - //this.props.CollectionView.forceUpdate(); } } } + /** + * Sets whether the grid is flexible or not on the grid's Document. + */ + @undoBatch + toggleFlex = () => { + this.props.CollectionView.props.Document.flexGrid = !this.props.CollectionView.props.Document.flexGrid; + } + render() { return ( - <div className="collectionTreeViewChrome-cont"> - <span className={"search-icon"}> - <span className="icon-background"> + <div className="collectionGridViewChrome-cont"> + <span className={"grid-control"}> + <span className="grid-icon"> <FontAwesomeIcon icon="columns" size="1x" /> </span> - <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.numCols as string} onKeyDown={this.onNumColsEnter} autoFocus /> + <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.numCols as string} onKeyDown={this.onNumColsEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => e.currentTarget.focus()} /> </span> - <span className={"search-icon"}> - <span className="icon-background"> + <span className={"grid-control"}> + <span className="grid-icon"> <FontAwesomeIcon icon="text-height" size="1x" /> </span> - <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.rowHeight as string} onKeyDown={this.onRowHeightEnter} /> + <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.rowHeight as string} onKeyDown={this.onRowHeightEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => e.currentTarget.focus()} /> + </span> + <span className={"grid-control"}> + <input style={{ marginRight: 5 }} type="checkbox" onClick={this.toggleFlex} defaultChecked={this.props.CollectionView.props.Document.flexGrid as boolean} /> + <span className="grid-icon"> + <FontAwesomeIcon icon="arrow-up" size="1x" /> + </span> + <label>Flexible</label> </span> </div> ); diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index c0a2cbc22..49d463441 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -1,13 +1,37 @@ -.collectionGridView_contents { +.collectionGridView-contents { display: flex; overflow: hidden; width: 100%; height: 100%; flex-direction: column; } -.collectionGridView_contents .document-wrapper { - display: flex; - flex-direction: column; - width: 100%; + +.collectionGridView-contents .collectionGridView-gridContainer { height: 100%; + overflow-y: auto; + background-color: white; +} + +.documentDecorations-container .documentDecorations-resizer { + pointer-events: none; + +} + +#documentDecorations-bottomRightResizer, +#documentDecorations-bottomLeftResizer, +#documentDecorations-topRightResizer, +#documentDecorations-topLeftResizer { + visibility: collapse; +} + +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox */ +input[type=number] { + -moz-appearance: textfield; }
\ 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 c56a894dc..f503c38d1 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -2,9 +2,8 @@ import { computed, observable, action } 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'; @@ -23,12 +23,20 @@ const GridSchema = makeInterface(documentSchema); @observer export class CollectionGridView extends CollectionSubView(GridSchema) { + private containerRef: React.RefObject<HTMLDivElement>; + @observable private _scroll: number = 0; constructor(props: Readonly<SubCollectionViewProps>) { super(props); 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); + + this.containerRef = React.createRef(); } componentDidMount() { @@ -41,9 +49,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 +61,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } } - } /** @@ -63,7 +70,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * documents before the target. */ private lookupIndividualTransform = (doc: Doc) => { - const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10; + const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10 - this._scroll; + console.log("CollectionGridView -> privatelookupIndividualTransform -> this.containerRef.current!.scrollTop", this.containerRef.current!.scrollTop) const xTranslation = this.colWidthPlusGap * NumCast(doc.x) + 10; return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation); } @@ -94,6 +102,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 +118,41 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} parentActive={this.props.active} + display={"contents"} // this causes an issue- this is the reason the decorations box is weird with images and web boxes + 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 +161,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 +202,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 +225,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 +252,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 +266,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 +288,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { console.log(this.props.Document.title + " " + this.props.isSelected() + " " + (!this.props.isSelected() && this.props.renderDepth !== 0 && !this.props.ContainingCollectionView?._isChildActive && !SnappingManager.GetIsDragging() ? "none" : undefined)); 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), @@ -251,16 +306,21 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } }} // the grid doesn't stopPropagation when its widgets are hit, so we need to otherwise the outer documents will respond > - <Grid - width={this.props.PanelWidth()} - nodeList={contents} - layout={layout} - childrenDraggable={this.props.isSelected() ? true : false} - 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)} - /> + <div className="collectionGridView-gridContainer" + ref={this.containerRef} + onScroll={action((e: React.UIEvent<HTMLDivElement>) => this._scroll = e.currentTarget.scrollTop)} + > + <Grid + width={this.props.PanelWidth()} + nodeList={contents} + layout={layout} + childrenDraggable={this.props.isSelected() ? true : false} + numCols={this.props.Document.numCols as number} + rowHeight={this.props.Document.rowHeight as number} + setLayout={this.setLayout} + transformScale={this.props.ScreenToLocalTransform().Scale} + /> + </div> </div> ); } diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index cff5db743..542edb1cd 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -26,7 +26,14 @@ interface GridProps { */ @observer export default class Grid extends React.Component<GridProps> { + gridRef: React.RefObject<HTMLDivElement>; + constructor(props: Readonly<GridProps>) { + super(props); + this.gridRef = React.createRef(); + + 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[]` @@ -36,6 +43,7 @@ export default class Grid extends React.Component<GridProps> { } render() { + console.log(this.props.transformScale); return ( <GridLayout className="layout" layout={this.props.layout} @@ -45,9 +53,11 @@ export default class Grid extends React.Component<GridProps> { compactType={null} isDroppable={true} isDraggable={this.props.childrenDraggable} - useCSSTransforms={true} + // useCSSTransforms={true} margin={[10, 10]} - onLayoutChange={layout => this.onLayoutChange(layout)} + onLayoutChange={this.onLayoutChange} + preventCollision={false} // change this to true later + // transformScale={2} // 1.2/scale > {this.props.nodeList} </GridLayout > |