diff options
Diffstat (limited to 'src')
3 files changed, 28 insertions, 71 deletions
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 6fb517940..c824c2f33 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -605,6 +605,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro this.props.CollectionView.props.Document.flexGrid = !this.props.CollectionView.props.Document.flexGrid; } + /** + * Increments the value of numCols on button click + */ onIncrementButtonClick = () => { this.clicked = true; this.entered && (this.props.CollectionView.props.Document.numCols as number)--; @@ -612,6 +615,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro this.entered = false; } + /** + * Decrements the value of numCols on button click + */ onDecrementButtonClick = () => { this.clicked = true; if (!this.decrementLimitReached) { @@ -621,6 +627,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro this.entered = false; } + /** + * Increments the value of numCols on button hover + */ incrementValue = () => { this.entered = true; if (!this.clicked && !this.decrementLimitReached) { @@ -630,6 +639,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro this.clicked = false; } + /** + * Decrements the value of numCols on button hover + */ decrementValue = () => { this.entered = true; if (!this.clicked) { @@ -644,10 +656,16 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro this.clicked = false; } + /** + * Toggles the value of preventCollision + */ toggleCollisions = () => { this.props.CollectionView.props.Document.preventCollision = !this.props.CollectionView.props.Document.preventCollision; } + /** + * Changes the value of the compactType + */ changeCompactType = (e: React.ChangeEvent<HTMLSelectElement>) => { this.props.CollectionView.props.Document.compactType = e.target.selectedOptions[0].value; } @@ -670,7 +688,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro <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" style={{ width: "20%" }}> - <input style={{ marginRight: 5 }} type="checkbox" onClick={this.toggleCollisions} defaultChecked={!this.props.CollectionView.props.Document.preventCollision} /> + <input type="checkbox" onClick={this.toggleCollisions} defaultChecked={!this.props.CollectionView.props.Document.preventCollision} /> <label className="flexLabel">Collisions</label> </span> @@ -678,7 +696,8 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro style={{ marginRight: 5 }} onPointerDown={stopPropagation} onChange={this.changeCompactType} - > + value={StrCast(this.props.CollectionView.props.Document.compactType)}> + > {["vertical", "horizontal", "null"].map(type => <option className="collectionGridViewChrome-viewOption" onPointerDown={stopPropagation} diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index b87bfd0e2..eab3fd79e 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -10,7 +10,7 @@ import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentVi import { CollectionSubView } from '../CollectionSubView'; import { SubCollectionViewProps } from '../CollectionSubView'; import { List } from '../../../../fields/List'; -import { returnZero } from '../../../../Utils'; +import { returnZero, returnFalse } from '../../../../Utils'; import Grid, { Layout } from "./Grid"; import { Id } from '../../../../fields/FieldSymbols'; import { observer } from 'mobx-react'; @@ -104,25 +104,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.changeListenerDisposer && this.changeListenerDisposer(); } - // deletePlaceholder(placeholder: Layout, e: MouseEvent) { - - // const { left, right, top, bottom } = this.containerRef.current!.getBoundingClientRect(); - // if (e.clientX > right || e.clientX < left || e.clientY < top || e.clientY > bottom) { - // const layouts: Layout[] = this.parsedLayoutList; - // const index = layouts.findIndex((gridLayout: Layout) => gridLayout.i === placeholder.i); - // index !== -1 && layouts.splice(index, 1); - - // const i = this.childLayoutPairs.findIndex(({ layout }) => placeholder.i === layout.i); - // i !== -1 && this.childLayoutPairs.splice(i, 1); - - // console.log("deleting"); - - // this.unStringifiedLayoutList = layouts; - // } - - // } - - /** * @returns the transform that will correctly place the document decorations box. */ @@ -140,8 +121,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @computed get colWidthPlusGap() { return (this.props.PanelWidth() - 10) / NumCast(this.props.Document.numCols); } @computed get rowHeightPlusGap() { return NumCast(this.props.Document.rowHeight) + 10; } - @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } - /** * @returns the layout list converted from JSON */ @@ -165,14 +144,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ @observable private height = (layout: Layout) => (this.props.Document.flexGrid ? layout.h : 2) * this.rowHeightPlusGap - 10; - 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); - } - contextMenuItems = (layoutDoc: Doc) => { const layouts: Layout[] = this.parsedLayoutList; const freezeScript = ScriptField.MakeFunction( @@ -184,7 +155,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { // const layouts: Layout[] = this.parsedLayoutList; // const layoutToChange = layouts.find(({ i }) => i === layoutDoc[Id]); - // layoutToChange!.static = true; + // layoutToChange!.static = !layoutToChange!.static; // this.unStringifiedLayoutList = layouts; @@ -206,13 +177,12 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { DataDoc={layout.resolvedDataDoc as Doc} NativeHeight={returnZero} NativeWidth={returnZero} - addDocTab={this.addDocTab} + addDocTab={returnFalse} backgroundColor={this.props.backgroundColor} ContainingCollectionDoc={this.props.Document} PanelWidth={width} PanelHeight={height} ScreenToLocalTransform={dxf} - onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} parentActive={this.props.active} display={"contents"} @@ -227,8 +197,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @undoBatch @action setLayout(layoutArray: Layout[]) { - // for every child in the collection, check to see if there's a corresponding grid layout document and - // updated layout object. If both exist, which they should, update the grid layout document from the updated object + // for every child in the collection, check to see if there's a corresponding grid layout object and + // updated layout object. If both exist, which they should, update the grid layout object from the updated object const layouts: Layout[] = this.parsedLayoutList; this.childLayoutPairs.forEach(({ layout: doc }) => { let update: Opt<Layout>; @@ -392,8 +362,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { transformScale={this.props.ScreenToLocalTransform().Scale} compactType={StrCast(this.props.Document.compactType)} preventCollision={BoolCast(this.props.Document.preventCollision)} - - // deletePlaceholder={this.deletePlaceholder} /> </div> diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 5779bf463..058002722 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -16,10 +16,9 @@ interface GridProps { layout: Layout[] | undefined; numCols: number; rowHeight: number; - setLayout: Function; + setLayout: (layout: Layout[]) => void; transformScale: number; childrenDraggable: boolean; - // deletePlaceholder: Function; preventCollision: boolean; compactType: string; } @@ -30,37 +29,8 @@ interface GridProps { @observer export default class Grid extends React.Component<GridProps> { - // private dragging: boolean = false; - - constructor(props: Readonly<GridProps>) { - super(props); - this.onLayoutChange = this.onLayoutChange.bind(this); - // this.onDrag = this.onDrag.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[]) { - this.props.setLayout(layout); - } - - // onDrag(layout: Layout[], - // oldItem: Layout, - // newItem: Layout, - // placeholder: Layout, - // event: MouseEvent, - // element: HTMLElement) { - // this.props.deletePlaceholder(placeholder, event); - // console.log("Grid -> event", event.clientX) - - // } - render() { - console.log(this.props.transformScale); - const compactType = this.props.compactType === "vertical" || this.props.compactType === "horizontal" ? this.props.compactType : null; - return ( <GridLayout className="layout" layout={this.props.layout} @@ -72,7 +42,7 @@ export default class Grid extends React.Component<GridProps> { isDraggable={this.props.childrenDraggable} isResizable={this.props.childrenDraggable} useCSSTransforms={true} - onLayoutChange={this.onLayoutChange} + onLayoutChange={this.props.setLayout} preventCollision={this.props.preventCollision} transformScale={this.props.transformScale} // still doesn't work :( style={{ zIndex: 5 }} |