From 37b6a8f7938a1a2646f3f119388b7af61de16293 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 26 May 2020 11:03:08 -0700 Subject: cleanup and comments --- .../collectionGrid/CollectionGridView.tsx | 25 ++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 465ff15f1..26be4bee8 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -49,18 +49,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { if (!gridLayouts.find((gridLayout: Doc) => StrCast(gridLayout.i) === targetId)) { const layoutDoc: Doc = new Doc(); layoutDoc.i = targetId; - layoutDoc.x = 2 * (previousLength % 5); - layoutDoc.y = 2 * Math.floor(previousLength / 5); layoutDoc.w = 2; layoutDoc.h = 2; + this.findNextLayout(layoutDoc, previousLength); Doc.AddDocToList(this.props.Document, "gridLayouts", layoutDoc); } }); } else { // for each document that was removed, remove its corresponding grid layout document oldValue.forEach(({ layout }) => { - if (!newValue.find(({ layout: preserved }) => preserved[Id] === layout[Id])) { - const gridLayoutDoc = gridLayouts.find((gridLayout: Doc) => StrCast(gridLayout.i) === layout[Id]); + const targetId = layout[Id]; + if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) { + const gridLayoutDoc = gridLayouts.find((gridLayout: Doc) => StrCast(gridLayout.i) === targetId); gridLayoutDoc && Doc.RemoveDocFromList(this.props.Document, "gridLayouts", gridLayoutDoc); } }); @@ -72,6 +72,23 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.changeListenerDisposer && this.changeListenerDisposer(); } + /** + * 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 % 5); + layoutDoc.y = 2 * Math.floor(previousLength / 5); + } + /** * @returns the transform that will correctly place * the document decorations box, shifted to the right by -- cgit v1.2.3-70-g09d2