memories/src/components/ScrollerManager.vue

516 lines
15 KiB
Vue
Raw Normal View History

2022-10-14 23:29:20 +00:00
<template>
2022-10-20 23:03:33 +00:00
<div class="scroller" ref="scroller"
2022-10-14 23:29:20 +00:00
v-bind:class="{
'scrolling-recycler': scrollingRecycler,
'scrolling': scrolling,
}"
@mousemove="mousemove"
@touchmove="touchmove"
@mouseleave="mouseleave"
@mousedown="mousedown">
<span class="cursor st" ref="cursorSt"
2022-10-20 23:03:33 +00:00
:style="{ transform: `translateY(${cursorY}px)` }">
2022-10-14 23:29:20 +00:00
</span>
<span class="cursor hv"
2022-10-20 23:03:33 +00:00
:style="{ transform: `translateY(${hoverCursorY}px)` }"
@touchmove="touchmove">
<div class="text"> {{ hoverCursorText }} </div>
<div class="icon"> <ScrollIcon :size="22" /> </div>
2022-10-14 23:29:20 +00:00
</span>
2022-10-19 19:57:34 +00:00
<div v-for="tick of visibleTicks" :key="tick.key"
2022-10-14 23:29:20 +00:00
class="tick"
:class="{ 'dash': !tick.text }"
2022-10-21 03:16:56 +00:00
:style="{ transform: `translateY(calc(${tick.top}px - 50%))` }">
2022-10-14 23:29:20 +00:00
<span v-if="tick.text">{{ tick.text }}</span>
</div>
</div>
</template>
<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator';
2022-10-15 18:18:32 +00:00
import { IRow, IRowType, ITick } from '../types';
2022-10-14 23:29:20 +00:00
import GlobalMixin from '../mixins/GlobalMixin';
import ScrollIcon from 'vue-material-design-icons/UnfoldMoreHorizontal.vue';
import * as utils from "../services/Utils";
@Component({
components: {
ScrollIcon,
},
})
export default class ScrollerManager extends Mixins(GlobalMixin) {
2022-10-15 17:41:49 +00:00
/** Rows from Timeline */
@Prop() rows!: IRow[];
2022-10-14 23:29:20 +00:00
/** Total height */
@Prop() height!: number;
/** Actual recycler component */
@Prop() recycler!: any;
/** Recycler before slot component */
@Prop() recyclerBefore!: any;
/** Height of the entire photo view */
2022-10-17 02:58:18 +00:00
private recyclerHeight: number = 100;
2022-10-14 23:29:20 +00:00
/** Computed ticks */
private ticks: ITick[] = [];
/** Computed cursor top */
private cursorY = 0;
/** Hover cursor top */
private hoverCursorY = -5;
/** Hover cursor text */
private hoverCursorText = "";
/** Scrolling currently */
private scrolling = false;
/** Scrolling timer */
private scrollingTimer = null as number | null;
/** Scrolling recycler currently */
private scrollingRecycler = false;
/** Scrolling recycler timer */
private scrollingRecyclerTimer = null as number | null;
/** View size reflow timer */
private reflowRequest = false;
2022-10-16 02:55:53 +00:00
/** Tick adjust timer */
2022-10-21 06:48:28 +00:00
private adjustRequest = false;
2022-10-14 23:29:20 +00:00
/** Get the visible ticks */
get visibleTicks() {
2022-10-19 19:57:34 +00:00
let key = 999900;
return this.ticks.filter(tick => tick.s).map(tick => {
if (tick.text) {
tick.key = key = tick.dayId * 100;
} else {
tick.key = ++key; // days are sorted descending
}
return tick;
});
2022-10-14 23:29:20 +00:00
}
/** Reset state */
public reset() {
this.ticks = [];
this.cursorY = 0;
this.hoverCursorY = -5;
this.hoverCursorText = "";
this.scrolling = false;
this.scrollingTimer = null;
this.reflowRequest = false;
}
/** Recycler scroll event, must be called by timeline */
2022-10-21 06:48:28 +00:00
public recyclerScrolled() {
2022-10-16 18:46:26 +00:00
// Ignore if not initialized
if (!this.ticks.length) return;
2022-10-17 02:58:18 +00:00
// Get the scroll position
const scroll = this.recycler?.$el?.scrollTop || 0;
2022-10-16 18:46:26 +00:00
// Move hover cursor to px position
2022-10-21 06:48:28 +00:00
const {top1, top2, y1, y2} = this.getCoords(scroll, 'y');
const topfrac = (scroll - y1) / (y2 - y1);
const rtop = top1 + (top2 - top1) * topfrac;
this.cursorY = utils.roundHalf(rtop);
2022-10-14 23:29:20 +00:00
this.moveHoverCursor(this.cursorY);
2022-10-16 18:46:26 +00:00
// Show the scroller for some time
2022-10-14 23:29:20 +00:00
if (this.scrollingRecyclerTimer) window.clearTimeout(this.scrollingRecyclerTimer);
this.scrollingRecycler = true;
this.scrollingRecyclerTimer = window.setTimeout(() => {
this.scrollingRecycler = false;
this.scrollingRecyclerTimer = null;
}, 1500);
}
/** Re-create tick data in the next frame */
2022-10-15 17:41:49 +00:00
public async reflow() {
2022-10-21 06:48:28 +00:00
if (this.reflowRequest) return;
2022-10-14 23:29:20 +00:00
this.reflowRequest = true;
await this.$nextTick();
2022-10-15 17:41:49 +00:00
this.reflowNow();
2022-10-14 23:29:20 +00:00
this.reflowRequest = false;
}
/** Re-create tick data */
2022-10-15 17:41:49 +00:00
private reflowNow() {
2022-10-16 18:46:26 +00:00
// Ignore if not initialized
if (!this.recycler?.$refs.wrapper) return;
2022-10-16 02:55:53 +00:00
// Refresh height of recycler
this.recyclerHeight = this.recycler.$refs.wrapper.clientHeight;
2022-10-15 17:41:49 +00:00
// Recreate ticks data
this.recreate();
2022-10-14 23:29:20 +00:00
2022-10-21 06:48:28 +00:00
// Adjust top
this.adjustNow();
2022-10-16 02:55:53 +00:00
}
2022-10-14 23:29:20 +00:00
2022-10-16 02:55:53 +00:00
/** Recreate from scratch */
private recreate() {
2022-10-21 00:39:11 +00:00
// Clear and override any adjust timer
2022-10-16 02:55:53 +00:00
this.ticks = [];
// Ticks
let prevYear = 9999;
let prevMonth = 0;
const thisYear = new Date().getFullYear();
// Get a new tick
2022-10-21 06:48:28 +00:00
const getTick = (dayId: number, isMonth=false, text?: string | number): ITick => {
return {
dayId, isMonth, text,
y: 0, count: 0, topF: 0, top: 0, s: false,
2022-10-16 02:55:53 +00:00
};
}
2022-10-21 06:48:28 +00:00
// Iterate over rows
2022-10-16 02:55:53 +00:00
for (const row of this.rows) {
if (row.type === IRowType.HEAD) {
2022-10-21 06:48:28 +00:00
// Create tick
2022-10-16 02:55:53 +00:00
if (this.TagDayIDValueSet.has(row.dayId)) {
// Blank tick
this.ticks.push(getTick(row.dayId));
} else {
// Make date string
const dateTaken = utils.dayIdToDate(row.dayId);
2022-10-21 06:48:28 +00:00
// Create tick
2022-10-16 02:55:53 +00:00
const dtYear = dateTaken.getUTCFullYear();
const dtMonth = dateTaken.getUTCMonth()
2022-10-21 06:48:28 +00:00
const isMonth = (dtMonth !== prevMonth || dtYear !== prevYear);
const text = (dtYear === prevYear || dtYear === thisYear) ? undefined : dtYear;
this.ticks.push(getTick(row.dayId, isMonth, text));
2022-10-16 02:55:53 +00:00
prevMonth = dtMonth;
prevYear = dtYear;
}
}
2022-10-21 06:48:28 +00:00
}
}
/**
* Update tick positions without truncating the list
* This is much cheaper than reflowing the whole thing
*/
public async adjust() {
if (this.adjustRequest) return;
this.adjustRequest = true;
await this.$nextTick();
this.adjustNow();
this.adjustRequest = false;
}
/** Do adjustment synchronously */
private adjustNow() {
// Refresh height of recycler
this.recyclerHeight = this.recycler.$refs.wrapper.clientHeight;
const extraY = this.recyclerBefore?.clientHeight || 0;
// Start with the first tick. Walk over all rows counting the
// y position. When you hit a row with the tick, update y and
// top values and move to the next tick.
let tickId = 0;
let y = extraY;
let count = 0;
// We only need to recompute top and visible ticks if count
// of some tick has changed.
let needRecomputeTop = false;
for (const row of this.rows) {
// Check if tick is valid
if (tickId >= this.ticks.length) break;
// Check if we hit the next tick
const tick = this.ticks[tickId];
if (tick.dayId === row.dayId) {
tick.y = y;
// Check if count has changed
needRecomputeTop ||= (tick.count !== count);
tick.count = count;
// Move to next tick
count += row.day.count;
tickId++;
}
2022-10-14 23:29:20 +00:00
2022-10-16 02:55:53 +00:00
y += row.size;
2022-10-14 23:29:20 +00:00
}
2022-10-21 06:48:28 +00:00
// Compute visible ticks
if (needRecomputeTop) {
this.setTicksTop(count);
this.computeVisibleTicks();
}
2022-10-16 02:55:53 +00:00
}
2022-10-14 23:29:20 +00:00
2022-10-16 02:55:53 +00:00
/** Mark ticks as visible or invisible */
private computeVisibleTicks() {
2022-10-14 23:29:20 +00:00
// Do another pass to figure out which points are visible
// This is not as bad as it looks, it's actually 12*O(n)
// because there are only 12 months in a year
const fontSizePx = parseFloat(getComputedStyle(this.$refs.cursorSt as any).fontSize);
const minGap = fontSizePx + (window.innerWidth <= 768 ? 5 : 2);
let prevShow = -9999;
for (const [idx, tick] of this.ticks.entries()) {
2022-10-21 06:48:28 +00:00
// Conservative
tick.s = false;
// These aren't for showing
if (!tick.isMonth) continue;
2022-10-14 23:29:20 +00:00
// You can't see these anyway, why bother?
2022-10-21 06:48:28 +00:00
if (tick.top < minGap || tick.top > this.height - minGap) continue;
2022-10-14 23:29:20 +00:00
// Will overlap with the previous tick. Skip anyway.
2022-10-21 06:48:28 +00:00
if (tick.top - prevShow < minGap) continue;
2022-10-14 23:29:20 +00:00
// This is a labelled tick then show it anyway for the sake of best effort
if (tick.text) {
2022-10-15 17:41:49 +00:00
prevShow = tick.top;
2022-10-21 06:48:28 +00:00
tick.s = true;
2022-10-14 23:29:20 +00:00
continue;
}
// Lookahead for next labelled tick
// If showing this tick would overlap the next one, don't show this one
let i = idx + 1;
while(i < this.ticks.length) {
if (this.ticks[i].text) {
break;
}
i++;
}
if (i < this.ticks.length) {
// A labelled tick was found
const nextLabelledTick = this.ticks[i];
2022-10-15 17:41:49 +00:00
if (tick.top + minGap > nextLabelledTick.top &&
nextLabelledTick.top < this.height - minGap) { // make sure this will be shown
2022-10-14 23:29:20 +00:00
continue;
}
}
// Show this tick
tick.s = true;
2022-10-15 17:41:49 +00:00
prevShow = tick.top;
2022-10-14 23:29:20 +00:00
}
}
2022-10-21 06:48:28 +00:00
private setTicksTop(total: number) {
for (const tick of this.ticks) {
tick.topF = this.height * (tick.count / total);
tick.top = utils.roundHalf(tick.topF);
2022-10-14 23:29:20 +00:00
}
}
/** Change actual position of the hover cursor */
private moveHoverCursor(y: number) {
2022-10-16 02:55:53 +00:00
this.hoverCursorY = utils.roundHalf(y);
2022-10-14 23:29:20 +00:00
// Get index of previous tick
2022-10-16 02:55:53 +00:00
let idx = utils.binarySearch(this.ticks, y, 'topF');
2022-10-15 17:41:49 +00:00
if (idx === 0) {
// use this tick
} else if (idx >= 1 && idx <= this.ticks.length) {
2022-10-14 23:29:20 +00:00
idx = idx - 1;
} else {
return;
}
// DayId of current hover
const dayId = this.ticks[idx]?.dayId
2022-10-14 23:29:20 +00:00
// Special days
if (dayId === undefined || this.TagDayIDValueSet.has(dayId)) {
2022-10-14 23:29:20 +00:00
this.hoverCursorText = "";
return;
}
const date = utils.dayIdToDate(dayId);
this.hoverCursorText = utils.getShortDateStr(date);
}
/** Handle mouse hover */
private mousemove(event: MouseEvent) {
if (event.buttons) {
this.mousedown(event);
}
this.moveHoverCursor(event.offsetY);
}
/** Handle mouse leave */
private mouseleave() {
this.moveHoverCursor(this.cursorY);
}
2022-10-21 06:48:28 +00:00
/** Binary search and get coords surrounding position */
private getCoords(y: number, field: 'topF' | 'y') {
// Top of first and second ticks
let top1 = 0, top2 = 0, y1 = 0, y2 = 0;
// Get index of previous tick
let idx = utils.binarySearch(this.ticks, y, field);
if (idx <= 0) {
top1 = 0; top2 = this.ticks[0].top;
y1 = 0; y2 = this.ticks[0].y;
} else if (idx >= this.ticks.length) {
const t = this.ticks[this.ticks.length - 1];
top1 = t.top; top2 = this.height;
y1 = t.y; y2 = this.recyclerHeight;
} else {
const t1 = this.ticks[idx - 1];
const t2 = this.ticks[idx];
top1 = t1.top; top2 = t2.top;
y1 = t1.y; y2 = t2.y;
}
return {top1, top2, y1, y2};
}
2022-10-21 05:24:00 +00:00
/** Move to given scroller Y */
private moveto(y: number) {
2022-10-21 06:48:28 +00:00
const {top1, top2, y1, y2} = this.getCoords(y, 'topF');
const yfrac = (y - top1) / (top2 - top1);
const ry = y1 + (y2 - y1) * yfrac;
this.recycler.scrollToPosition(ry);
2022-10-21 05:24:00 +00:00
this.handleScroll();
}
2022-10-14 23:29:20 +00:00
/** Handle mouse click */
private mousedown(event: MouseEvent) {
2022-10-21 05:24:00 +00:00
this.moveto(event.offsetY);
2022-10-14 23:29:20 +00:00
}
/** Handle touch */
private touchmove(event: any) {
2022-10-20 23:03:33 +00:00
const rect = (this.$refs.scroller as HTMLElement).getBoundingClientRect();
2022-10-14 23:29:20 +00:00
const y = event.targetTouches[0].pageY - rect.top;
event.preventDefault();
event.stopPropagation();
2022-10-21 05:24:00 +00:00
this.moveto(y);
2022-10-14 23:29:20 +00:00
}
/** Update this is being used to scroll recycler */
private handleScroll() {
if (this.scrollingTimer) window.clearTimeout(this.scrollingTimer);
this.scrolling = true;
this.scrollingTimer = window.setTimeout(() => {
this.scrolling = false;
this.scrollingTimer = null;
}, 1500);
}
}
</script>
<style lang="scss" scoped>
@mixin phone {
@media (max-width: 768px) { @content; }
}
.scroller {
overflow-y: clip;
position: absolute;
height: 100%;
width: 36px;
top: 0; right: 0;
cursor: ns-resize;
opacity: 0;
transition: opacity .2s ease-in-out;
// Show on hover or scroll of main window
&:hover, &.scrolling-recycler {
opacity: 1;
}
// Hide ticks on mobile unless hovering
@include phone {
2022-10-20 23:03:33 +00:00
// Shift pointer events to hover cursor
pointer-events: none;
.cursor.hv { pointer-events: all; }
2022-10-14 23:29:20 +00:00
&:not(.scrolling) {
.cursor.hv {
2022-10-20 22:37:36 +00:00
left: 5px;
2022-10-14 23:29:20 +00:00
border: none;
box-shadow: 0 0 5px -3px #000;
2022-10-20 22:37:36 +00:00
height: 40px; width: 70px;
border-radius: 20px;
2022-10-14 23:29:20 +00:00
> .text { display: none; }
> .icon { display: block; }
}
> .tick { opacity: 0; }
}
.cursor.st { display: none; }
}
> .tick {
pointer-events: none;
position: absolute;
font-size: 0.75em;
line-height: 0.75em;
font-weight: 600;
opacity: 0.95;
right: 9px;
2022-10-19 19:39:07 +00:00
top: 0;
transition: transform 0.2s linear;
2022-10-14 23:29:20 +00:00
z-index: 1;
&.dash {
height: 4px;
width: 4px;
border-radius: 50%;
background-color: var(--color-main-text);
opacity: 0.15;
display: block;
@include phone { display: none; }
}
@include phone {
background-color: var(--color-main-background);
padding: 4px;
border-radius: 4px;
}
}
> .cursor {
position: absolute;
pointer-events: none;
right: 0;
background-color: var(--color-primary);
min-width: 100%;
min-height: 1.5px;
will-change: transform;
&.st {
font-size: 0.75em;
opacity: 0;
}
&.hv {
background-color: var(--color-main-background);
padding: 2px 5px;
border-top: 2px solid var(--color-primary);
border-radius: 2px;
width: auto;
white-space: nowrap;
z-index: 100;
font-size: 0.95em;
font-weight: 600;
> .icon {
display: none;
2022-10-20 22:37:36 +00:00
transform: translate(-16px, 6px);
2022-10-14 23:29:20 +00:00
}
}
}
&:hover > .cursor.st {
opacity: 1;
}
}
</style>