diff options
Diffstat (limited to 'src')
6 files changed, 128 insertions, 61 deletions
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index bcb190de4..df84cab56 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -232,7 +232,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus subItems.push({ description: "Carousel", event: () => func(CollectionViewType.Carousel), icon: "columns" }); subItems.push({ description: "Pivot/Time", event: () => func(CollectionViewType.Time), icon: "columns" }); subItems.push({ description: "Map", event: () => func(CollectionViewType.Map), icon: "globe-americas" }); - subItems.push({ description: "Grid", event: () => func(CollectionViewType.Grid), icon: "border-all" }); + subItems.push({ description: "Grid", event: () => func(CollectionViewType.Grid), icon: "th-list" }); if (addExtras && this.props.Document._viewType === CollectionViewType.Freeform) { subItems.push({ description: "Custom", icon: "fingerprint", event: AddCustomFreeFormLayout(this.props.Document, this.props.fieldKey) }); } diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 42ec35853..f6027471b 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -181,9 +181,16 @@ .grid-control { align-self: center; width: 30%; + display: flex; + flex-direction: row; .grid-icon { margin-right: 5px; + align-self: center; + } + + .flexLabel { + margin-bottom: 0; } } diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 3d712e4f5..5a76a4605 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -93,7 +93,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro this.props.collapse?.(true); break; } - }) + }); @undoBatch viewChanged = (e: React.ChangeEvent) => { @@ -569,6 +569,9 @@ export class CollectionTreeViewChrome extends React.Component<CollectionViewChro @observer export class CollectionGridViewChrome extends React.Component<CollectionViewChromeProps> { + private clicked: boolean = false; + private entered: boolean = false; + /** * Sets the value of `numCols` on the grid's Document to the value entered. */ @@ -577,7 +580,6 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro if (e.key === "Enter" || e.key === "Tab") { 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 } } @@ -602,27 +604,59 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro this.props.CollectionView.props.Document.flexGrid = !this.props.CollectionView.props.Document.flexGrid; } + onIncrementButtonClick = () => { + this.clicked = true; + this.entered && (this.props.CollectionView.props.Document.numCols as number)--; + undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)++)(); + this.entered = false; + } + + onDecrementButtonClick = () => { + this.clicked = true; + this.entered && (this.props.CollectionView.props.Document.numCols as number)++; + undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)--)(); + this.entered = false; + } + + incrementValue = () => { + this.entered = true; + if (!this.clicked) { + (this.props.CollectionView.props.Document.numCols as number)++; + } + this.clicked = false; + } + + decrementValue = () => { + this.entered = true; + if (!this.clicked) { + (this.props.CollectionView.props.Document.numCols as number)--; + } + this.clicked = false; + } + render() { return ( - <div className="collectionGridViewChrome-cont"> - <span className={"grid-control"}> + <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} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => e.currentTarget.focus()} /> + <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.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> + <input className="columnButton" onClick={this.onIncrementButtonClick} onMouseEnter={this.incrementValue} onMouseLeave={this.decrementValue} type="button" value="↑" /> + <input className="columnButton" style={{ marginRight: 5 }} onClick={this.onDecrementButtonClick} onMouseEnter={this.decrementValue} onMouseLeave={this.incrementValue} type="button" value="↓" /> </span> - <span className={"grid-control"}> + <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} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => e.currentTarget.focus()} /> + <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.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> </span> - <span className={"grid-control"}> + <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> + <label className="flexLabel">Flexible</label> </span> </div> ); diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 94b0d958c..e06e8dc90 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -9,6 +9,43 @@ height: 100%; overflow-y: auto; background-color: white; + overflow-x: hidden; + + display: flex; + flex-direction: row; + + .rowHeightSlider { + + -webkit-appearance: none; + appearance: none; + width: 100%; + height: 15px; + background: #d3d3d3; + // border-radius: 5px; + + position: absolute; + height: 3; + left: 5; + top: 40; + transform-origin: left; + transform: rotate(90deg); + outline: none; + opacity: 0.7; + } + + .rowHeightSlider:hover { + opacity: 1; + } + + .rowHeightSlider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 10px; + height: 10px; + border-radius: 50%; + background: darkgrey; + opacity: 1; + } } .collectionGridView-addDocumentButton { @@ -17,7 +54,8 @@ margin: auto; width: 90%; cursor: text; - + min-height: 30px; + max-height: 30px; font-size: 75%; letter-spacing: 2px; @@ -31,15 +69,14 @@ .editableView-container-editing, .editableView-container-editing-oneLine { - min-height: 20px; display: flex; align-items: center; flex-direction: row; - height: auto; + height: 20px; + width: 100%; color: grey; padding: 10px; - width: 100%; span::before, span::after { @@ -67,8 +104,6 @@ align-items: center; } } - - } } diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index c56d6ee53..68612c9dc 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import { Doc, Opt } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; import { makeInterface } from '../../../../fields/Schema'; -import { BoolCast, NumCast, ScriptCast } from '../../../../fields/Types'; +import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; import { Transform } from '../../../util/Transform'; import { undoBatch } from '../../../util/UndoManager'; import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView'; @@ -15,9 +15,9 @@ import Grid, { Layout } from "./Grid"; import { Id } from '../../../../fields/FieldSymbols'; import { observer } from 'mobx-react'; import { SnappingManager } from '../../../util/SnappingManager'; -import "./CollectionGridView.scss"; import { Docs } from '../../../documents/Documents'; import { EditableView, EditableProps } from '../../EditableView'; +import "./CollectionGridView.scss"; type GridSchema = makeInterface<[typeof documentSchema]>; @@ -37,28 +37,38 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.props.Document.flexGrid = BoolCast(this.props.Document.flexGrid, true); this.setLayout = this.setLayout.bind(this); - // this.addTextDoc = this.addTextDoc.bind(this); + this.onSliderChange = this.onSliderChange.bind(this); this.containerRef = React.createRef(); } componentDidMount() { - this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => { const layouts: Layout[] = this.parsedLayoutList; + + // if grid view has been opened and then exited and a document has been deleted + // this deletes the layout of that document from the layouts list + if (!oldValue) { + layouts.forEach(({ i }, index) => { + const targetId = i; + if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) { + layouts.splice(index, 1); + } + }); + } + if (!oldValue || newValue.length > oldValue.length) { // for each document that was added, add a corresponding grid layout document newValue.forEach(({ layout }, i) => { const targetId = layout[Id]; if (!layouts.find((gridLayout: Layout) => gridLayout.i === targetId)) { - console.log("pushing") layouts.push({ i: targetId, w: 2, h: 2, - 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)) + x: 2 * (i % Math.floor(NumCast(this.props.Document.numCols) / 2)), + y: 2 * Math.floor(i / Math.floor(NumCast(this.props.Document.numCols) / 2)) }); } }); @@ -72,9 +82,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } }); } - this.unStringifiedLayoutList = layouts; - // this.props.Document.gridLayoutString = JSON.stringify(layouts); }, true); } @@ -83,23 +91,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } /** - * Establishes the x and y properties of the @param layoutDoc, currently - * using the @param previousLength for the computations. - * - * However, this could also be more of a first fit algorithm, iterating through - * this.toLayoutList(DocListCast(this.props.Document.gridLayouts)) and finding the - * first gap in the layout structure that suits the width and height. It would be - * easiest to see that a column is free (for a given row, if two documents' x are separated - * by a value greater than the ratio width of the document you're trying to insert), - * but you would then have to ensure that the next row at that column has a y at least - * as big as the ratio height of the document you're trying to insert. - */ - private findNextLayout(layoutDoc: Doc, previousLength: number) { - 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)); - } - - /** * @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 @@ -108,8 +99,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { private lookupIndividualTransform = (layout: Layout) => { const index = this.childLayoutPairs.findIndex(({ layout: layoutDoc }) => layoutDoc[Id] === layout.i); - const yTranslation = (this.props.Document.flexGrid ? NumCast(layout.y) : 2 * Math.floor(index / Math.floor(this.props.Document.numCols as number / 2))) * this.rowHeightPlusGap + 10 - this._scroll; - const xTranslation = (this.props.Document.flexGrid ? NumCast(layout.x) : 2 * (index % Math.floor(this.props.Document.numCols as number / 2))) * this.colWidthPlusGap + 10; + const yTranslation = (this.props.Document.flexGrid ? NumCast(layout.y) : 2 * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / 2))) * this.rowHeightPlusGap + 10 - this._scroll + 30; // 30 is the height of the add text doc bar + const xTranslation = (this.props.Document.flexGrid ? NumCast(layout.x) : 2 * (index % Math.floor(NumCast(this.props.Document.numCols) / 2))) * this.colWidthPlusGap + 10; return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation); } @@ -119,7 +110,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } - get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(this.props.Document.gridLayoutString as string) : []; } + get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []; } set unStringifiedLayoutList(layouts: Layout[]) { this.props.Document.gridLayoutString = JSON.stringify(layouts); } @@ -177,7 +168,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { let update: Opt<Layout>; const targetId = doc[Id]; const gridLayout = layouts.find(gridLayout => gridLayout.i === targetId); - // const gridLayout = DocListCast(this.props.Document.gridLayouts).find(gridLayout => StrCast(gridLayout.i) === targetId); if (this.props.Document.flexGrid && gridLayout && (update = layoutArray.find(layout => layout.i === targetId))) { gridLayout.x = update.x; gridLayout.y = update.y; @@ -186,7 +176,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } }); - // this.props.Document.gridLayoutString = JSON.stringify(layouts); this.unStringifiedLayoutList = layouts; } @@ -210,7 +199,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { const width = () => this.width(gridLayout); const height = () => this.height(gridLayout); collector.push( - <div className={this.props.Document.flexGrid ? "document-wrapper" : "document-wrapper static"} + <div className={this.props.Document.flexGrid && (this.props.isSelected() ? true : false) ? "document-wrapper" : "document-wrapper static"} key={gridLayout.i} > {this.getDisplayDoc(layout, dxf, width, height)} @@ -231,14 +220,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return this.props.Document.flexGrid ? layouts : layouts.map(({ i }, index) => ({ i: i, - x: 2 * (index % Math.floor(this.props.Document.numCols as number / 2)), - y: 2 * Math.floor(index / Math.floor(this.props.Document.numCols as number / 2)), + x: 2 * (index % Math.floor(NumCast(this.props.Document.numCols) / 2)), + y: 2 * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / 2)), w: 2, h: 2, static: true })); } + onSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => { + this.props.Document.rowHeight = event.currentTarget.valueAsNumber; + } + @undoBatch @action addTextDocument = (value: string) => this.props.addDocument(Docs.Create.TextDocument(value, { title: value })); /** @@ -254,14 +247,13 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { const newEditableViewProps: EditableProps = { GetValue: () => "", SetValue: this.addTextDocument, - contents: "+ NEW", + contents: "+ ADD TEXT DOCUMENT AT END", }; const childDocumentViews: JSX.Element[] = this.contents; const chromeStatus = this.props.Document._chromeStatus; const showChrome = (chromeStatus !== 'view-mode' && chromeStatus !== 'disabled'); - return ( <div className="collectionGridView-contents" style={{ @@ -290,18 +282,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { ref={this.containerRef} onScroll={action((e: React.UIEvent<HTMLDivElement>) => this._scroll = e.currentTarget.scrollTop)} > + <input className="rowHeightSlider" type="range" defaultValue={NumCast(this.props.Document.rowHeight)} onChange={this.onSliderChange} style={{ width: this.props.PanelHeight() - 40 }} min={1} max={this.props.PanelHeight() - 40} onPointerEnter={e => e.currentTarget.focus()} /> <Grid width={this.props.PanelWidth()} nodeList={childDocumentViews.length ? childDocumentViews : null} layout={childDocumentViews.length ? this.layoutList : undefined} childrenDraggable={this.props.isSelected() ? true : false} - numCols={this.props.Document.numCols as number} - rowHeight={this.props.Document.rowHeight as number} + numCols={NumCast(this.props.Document.numCols)} + rowHeight={NumCast(this.props.Document.rowHeight)} setLayout={this.setLayout} - //setLayout={(layout: Layout[]) => this.setLayout(layout)} transformScale={this.props.ScreenToLocalTransform().Scale} - // flex={this.props.Document.flexGrid as boolean} /> + </div> </div > ); diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index cae06c4e7..29bafda9b 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -36,7 +36,6 @@ export default class Grid extends React.Component<GridProps> { * @param layout `Layout[]` */ onLayoutChange(layout: Layout[]) { - console.log("layout changed"); this.props.setLayout(layout); } @@ -50,12 +49,12 @@ export default class Grid extends React.Component<GridProps> { width={this.props.width} compactType={null} isDroppable={true} - // isDraggable={this.props.childrenDraggable} + isDraggable={this.props.childrenDraggable} + isResizable={this.props.childrenDraggable} useCSSTransforms={true} - margin={[10, 10]} onLayoutChange={this.onLayoutChange} - preventCollision={false} // change this to true later - // transformScale={2} // 1.2/scale + preventCollision={true} + transformScale={this.props.transformScale} style={{ zIndex: 5 }} > {this.props.nodeList} |