Make SectionPhoto a template so it takes less memory.

packages/gallery/src/interface/allImages.js

@@ -32,6 +32,8 @@ export function AllImagesView(vm, params) {
 	const images = container([], pouchDocArrayHash);
 	const containerScrollTop = prop(0);
 
+	const hover = prop(null);
+	const hoverSelectButton = prop(null);
 	const selectedIds = container(new Set(), hashSet);
 	const selectMode = computed(sIds => sIds.size > 0, [selectedIds]);
 
@@ -172,6 +174,8 @@ export function AllImagesView(vm, params) {
 			images,
 			selectMode,
 			appBarStyle,
+			hover,
+			hoverSelectButton,
 			() => la.subscribe(res => images.splice(0, images.length, ...res))
 		]);
 	});
@@ -183,7 +187,9 @@ export function AllImagesView(vm, params) {
 				title,
 				photos: _images,
 				selectedIds,
-				selectMode: selectMode()
+				selectMode: selectMode(),
+				hover,
+				hoverSelectButton
 			},
 			sectionId
 		);

packages/gallery/src/interface/sectionPhoto.js

@@ -13,76 +13,81 @@ import { DEFAULT_TRANSITION, FILL_STYLE, IMAGE_MARGIN, CLICKABLE } from './style
 import { Icon } from './components/icon.js';
 import { AttachmentImageView } from './components/attachmentImage.js';
 
-export function SectionPhoto(vm, { doc }) {
+export function SectionPhoto({
-	const photoSelectButtonRef = `pSB${doc._id}`;
+	doc,
-	const photoOverlayRef = `pBkd${doc._id}`;
+	isSelected,
-	const href = router.href('focus', { id: doc._id });
+	selectMode,
-	const hover = prop(false);
+	width,
-	const hoverSelectButton = prop(false);
+	height,
+	hover,
+	hoverSelectButton
+}) {
+	const { _id: id } = doc;
+	const href = router.href('focus', { id });
+	const hovered = hover() === id;
+	const selectHovered = hoverSelectButton() === id;
 
-	subscribeToRender(vm, [hover, hoverSelectButton]);
+	if (hover()) {
+		console.log(id, isSelected, selectMode, width, height, hovered, selectHovered);
+	}
 
-	return function render(vm, { isSelected, selectMode, width, height }) {
+	return photoContainer(
-		return photoContainer(
+		{
-			{
+			href,
-				href,
+			class: 'sectionPhoto',
-				class: 'sectionPhoto',
+			onmouseenter: [hover, id],
-				onmouseenter: [hover, true],
+			onmouseleave: [hover, null],
-				onmouseleave: [hover, false],
+			css: {
+				cursor: selectMode ? CLICKABLE.cursor : 'zoom-in'
+			},
+			style: {
+				width,
+				height
+			},
+			_data: doc
+		},
+		[
+			AttachmentImageView({
+				src: doc.sizes.thumbnail || doc.sizes.full,
 				css: {
-					cursor: selectMode ? CLICKABLE.cursor : 'zoom-in'
+					transform: isSelected ? 'translateZ(-50px)' : null
 				},
 				style: {
 					width,
 					height
+				}
+			}),
+			photoSelectButton(
+				{
+					class: 'photoSelect',
+					css: {
+						backgroundColor: isSelected ? 'white' : 'transparent',
+						opacity: isSelected || selectHovered ? 1 : selectMode || hovered ? 0.7 : 0
+					},
+					onmouseenter: [hoverSelectButton, id],
+					onmouseleave: [hoverSelectButton, null]
 				},
-				_data: doc
+				[
-			},
+					Icon({
-			[
+						name: selectMode && !isSelected && !hovered ? 'circle_o' : 'check_circle',
-				AttachmentImageView({
+						size: 0.75,
-					src: doc.sizes.thumbnail || doc.sizes.full,
+						fill: isSelected ? '#00C800' : '#fff'
-					css: {
+					})
-						transform: isSelected ? 'translateZ(-50px)' : null
+				]
-					},
+			),
-					style: {
+			photoOverlay({
-						width,
+				class: 'photoOverlay',
-						height
+				css: {
-					}
+					transform: isSelected ? 'translateZ(-50px)' : null,
-				}),
+					opacity: selectMode || hovered ? 0.7 : 0
-				photoSelectButton(
+				},
-					{
+				style: {
-						_ref: photoSelectButtonRef,
+					width,
-						class: 'photoSelect',
+					height
-						css: {
+				}
-							backgroundColor: isSelected ? 'white' : 'transparent',
+			})
-							opacity: isSelected || hoverSelectButton() ? 1 : selectMode || hover() ? 0.7 : 0
+		]
-						},
+	);
-						onmouseenter: [hoverSelectButton, true],
-						onmouseleave: [hoverSelectButton, false]
-					},
-					[
-						Icon({
-							name: selectMode && !isSelected && !hover() ? 'circle_o' : 'check_circle',
-							size: 0.75,
-							fill: isSelected ? '#00C800' : '#fff'
-						})
-					]
-				),
-				photoOverlay({
-					_ref: photoOverlayRef,
-					class: 'photoOverlay',
-					css: {
-						transform: isSelected ? 'translateZ(-50px)' : null,
-						opacity: selectMode || hover() ? 0.7 : 0
-					},
-					style: {
-						width,
-						height
-					}
-				})
-			]
-		);
-	};
 }
 
 const photoContainer = styled('a', {
@@ -105,7 +110,7 @@ const photoSelectButton = styled(DEFAULT_TRANSITION, CLICKABLE, {
 	position: 'absolute',
 	top: '4%',
 	left: '4%',
-	zIndex: 2,
+	zIndex: 3,
 	display: 'flex',
 	borderRadius: '50%',
 	padding: '2px',
@@ -117,6 +122,6 @@ const photoOverlay = styled(FILL_STYLE, DEFAULT_TRANSITION, {
 	position: 'absolute', // Unnecessary but helps with a rendering bug in Chrome. https://gitlab.com/explorigin/gallery/issues/1
 	top: '0px',
 	left: '0px',
-	zIndex: 1,
+	zIndex: 2,
 	backgroundImage: 'linear-gradient(to bottom,rgba(0,0,0,0.26),transparent 56px,transparent)'
 });

packages/gallery/src/interface/sectionView.js

@@ -63,13 +63,15 @@ export function SectionView(vm, params, key) {
 	subscribeToRender(vm, [sections]);
 
 	return function render(vm, params) {
-		const { selectedIds, selectMode } = params;
+		const { selectedIds, selectMode, hover, hoverSelectButton } = params;
 
 		function photoTemplate({ photo, width, height }) {
-			return vw(SectionPhoto, {
+			return SectionPhoto({
 				doc: photo,
 				isSelected: selectedIds.has(photo._id),
 				selectMode,
+				hover,
+				hoverSelectButton,
 				width,
 				height
 			});