diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index 0b0ba88c..9dea1716 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -803,6 +803,9 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) { data = data.filter((p) => !(p.isfolder && (p).name.startsWith('.'))); } + // Convert server flags to bitflags + data.forEach(utils.convertFlags); + // Set and make reactive day.count = data.length; day.detail = data; @@ -817,6 +820,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) { return { width: p.w || this.rowHeight, height: p.h || this.rowHeight, + forceSquare: Boolean((p.flag & this.c.FLAG_IS_FOLDER) | (p.flag & this.c.FLAG_IS_TAG)), }; }), { rowWidth: this.rowWidth, @@ -896,9 +900,6 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) { photo.d = day; // backref to day } - // Flag conversion - utils.convertFlags(photo); - // Get aspect ratio const setPos = () => { photo.dispW = utils.roundHalf(jbox.width); diff --git a/src/services/Layout.ts b/src/services/Layout.ts index 23bfcee0..1ec284ed 100644 --- a/src/services/Layout.ts +++ b/src/services/Layout.ts @@ -7,7 +7,11 @@ import justifiedLayout from "justified-layout"; * Otherwise, use flickr/justified-layout (at least for now). */ export function getLayout( - input: { width: number, height: number }[], + input: { + width: number, + height: number, + forceSquare: boolean, + }[], opts: { rowWidth: number, rowHeight: number, @@ -110,8 +114,13 @@ export function getLayout( // The next row gets filled (numLeft === 0 || numLeft >= opts.numCols); + // Probably folders or tags or faces + if (input[photoId].forceSquare) { + // We are square already. Everything below is else-if. + } + // Full width breakout - if (canBreakout && rand() < (input.length > 0 ? 0.25 : 0.1)) { + else if (canBreakout && rand() < (input.length > 0 ? 0.25 : 0.1)) { matrix[row][col] |= FLAG_BREAKOUT; for (let i = 1; i < opts.numCols; i++) { matrix[row][i] |= FLAG_USED;