explorigin/gallery
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make sections a computed so it recomputes less often

Browse Source
This commit is contained in:
Timothy Farrell 2018-01-05 21:13:53 -06:00
parent 25fe9dd71f
commit 72126d4960
2 changed files with 44 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/gallery/src/interface/sectionView.js
View File

@ -1,4 +1,5 @@
import partition from 'linear-partitioning';
import { prop, computed, container } from 'frptools';
import {
defineView as vw,
@ -12,7 +13,7 @@ import { injectStyle, styled } from '../services/style.js';
import { DEFAULT_TRANSITION, CLICKABLE, IMAGE_MARGIN, CONTENT_MARGIN } from './styles.js';
import { Icon } from './components/icon.js';
import { SectionPhoto } from './sectionPhoto.js';
import { extractID } from '../utils/conversion.js';
import { extractID, sum } from '../utils/conversion.js';
const OPTIMAL_IMAGE_HEIGHT = 140;
const ROW_HEIGHT_CUTOFF_MODIFIER = 2;
@ -25,27 +26,28 @@ const aspectRatio = img => img.width / img.height;
export function SectionView(vm, params, key) {
const { title, photos } = params;
const sectionSelectButtonRef = `secSel${key}`;
function calculateSections(photos) {
const { width: vw } = availableViewportSize();
const photoArray = container(photos || [], pArr => pArr.map(extractID).join(','));
const sections = computed(
(pArr, { width: vw }) => {
const availableWidth = vw - CONTENT_MARGIN_WIDTH;
const totalImageRatio = photos.reduce((acc, img) => acc + aspectRatio(img), 0);
const aspectRatios = pArr.map(aspectRatio);
const totalImageRatio = sum(aspectRatios);
const rowCount = Math.ceil(totalImageRatio * OPTIMAL_IMAGE_HEIGHT / availableWidth);
const rowRatios = partition(photos.map(aspectRatio), rowCount);
const rowRatios = partition(aspectRatios, rowCount);
let index = 0;
const result = rowRatios.map(row => {
const rowTotal = row.reduce((acc, r) => acc + r, 0);
const rowTotal = sum(row);
const imageRatio = row[0];
const portion = imageRatio / rowTotal;
let rowHeight = availableWidth * portion / aspectRatio(photos[index]);
let rowHeight = availableWidth * portion / aspectRatio(pArr[index]);
if (rowHeight > OPTIMAL_IMAGE_HEIGHT * ROW_HEIGHT_CUTOFF_MODIFIER) {
rowHeight = OPTIMAL_IMAGE_HEIGHT * ROW_HEIGHT_CUTOFF_MODIFIER;
}
const rowResult = row.map((imageRatio, imgIndex) => ({
photo: photos[imgIndex + index],
photo: pArr[imgIndex + index],
width: imageRatio * rowHeight - IMAGE_MARGIN_WIDTH,
height: rowHeight
}));
@ -54,29 +56,27 @@ export function SectionView(vm, params, key) {
return rowResult;
});
return result;
}
},
[photoArray, availableViewportSize]
);
subscribeToRender(vm, [availableViewportSize]);
subscribeToRender(vm, [sections]);
return function render(vm, params) {
const { selectedIds, selectMode } = params;
function photoTemplate({ photo, width, height }) {
return vw(
SectionPhoto,
{
return vw(SectionPhoto, {
doc: photo,
isSelected: selectedIds.has(photo._id),
selectMode,
width,
height
},
photo._hash()
);
});
}
function sectionRowTemplate(photos) {
return sectionRow(photos.map(photoTemplate));
function sectionRowTemplate(pArr) {
return sectionRow(pArr.map(photoTemplate));
}
return sectionContainer(
@ -105,7 +105,7 @@ export function SectionView(vm, params, key) {
[Icon({ name: 'check_circle', size: 0.25 })]
)
]),
sectionContent(calculateSections(photos).map(sectionRowTemplate))
sectionContent(sections().map(sectionRowTemplate))
]
);
};

2
packages/gallery/src/utils/conversion.js
View File

@ -47,6 +47,8 @@ export function deepAssign(to, ...rest) {
return to;
}
export const sum = arr => arr.reduce((acc, i) => acc + i, 0);
export const extractID = pick('_id');
export const extractREV = pick('_rev');