From 352fe49d7e1901dad8fab99f7d594044e7bb8410 Mon Sep 17 00:00:00 2001 From: Guillaume Chau Date: Mon, 20 Dec 2021 10:50:24 +0100 Subject: [PATCH] wip --- packages/app-frontend/package.json | 1 + .../features/timeline/composable/events.ts | 40 +++++++++---- .../features/timeline/composable/session.ts | 60 +++++++++++++++++++ .../src/features/timeline/composable/store.ts | 25 ++++++++ yarn.lock | 12 ++++ 5 files changed, 125 insertions(+), 13 deletions(-) create mode 100644 packages/app-frontend/src/features/timeline/composable/session.ts diff --git a/packages/app-frontend/package.json b/packages/app-frontend/package.json index 718c52e6a..7b06b07f5 100644 --- a/packages/app-frontend/package.json +++ b/packages/app-frontend/package.json @@ -18,6 +18,7 @@ "portal-vue": "^2.1.7", "scroll-into-view-if-needed": "^2.2.28", "semver": "^7.3.5", + "shortid": "^2.2.16", "stylus": "^0.54.7", "stylus-loader": "^3.0.2", "tinycolor2": "^1.4.2", diff --git a/packages/app-frontend/src/features/timeline/composable/events.ts b/packages/app-frontend/src/features/timeline/composable/events.ts index 048ed635c..f92132371 100644 --- a/packages/app-frontend/src/features/timeline/composable/events.ts +++ b/packages/app-frontend/src/features/timeline/composable/events.ts @@ -19,10 +19,12 @@ import { import { resetTime } from './reset' import { takeScreenshot } from './screenshot' import { addGroupAroundPosition } from './layers' -import { EventGroup } from '.' +import { currentSession, EventGroup } from '.' import { addNonReactiveProperties } from '@front/util/reactivity' +import { createSessionFromCurrentState, getSessionAtTime, loadSession } from './session' const AUTOSCROLL_DURATION = 10000 +const CREATE_SESSION_DELAY = 10000 type AddEventCb = (event: TimelineEvent) => void @@ -82,8 +84,10 @@ export function addEvent (appId: string, eventOptions: TimelineEvent, layer: Lay event.group = group } + const session = getSessionAtTime(event.time) + // Min time - if (minTime.value > event.time) { + if (!session && minTime.value > event.time) { const stick = minTime.value === startTime.value minTime.value = event.time - 100 if (stick) { @@ -94,23 +98,33 @@ export function addEvent (appId: string, eventOptions: TimelineEvent, layer: Lay // Update scrollbar const scrollTime = event.time + 100 if (scrollTime > maxTime.value) { - if (endTime.value === maxTime.value) { - if (startTime.value !== minTime.value) { - // Autoscroll - startTime.value = scrollTime - (endTime.value - startTime.value) - } else if (endTime.value - startTime.value > AUTOSCROLL_DURATION) { - // Autoscroll - startTime.value = scrollTime - AUTOSCROLL_DURATION + const stick = endTime.value === maxTime.value + + if (!session) { + if (scrollTime > endTime.value + CREATE_SESSION_DELAY) { + createSessionFromCurrentState() } - endTime.value = scrollTime + + if (stick) { + if (startTime.value !== minTime.value) { + // Autoscroll + startTime.value = scrollTime - (endTime.value - startTime.value) + } else if (endTime.value - startTime.value > AUTOSCROLL_DURATION) { + // Autoscroll + startTime.value = scrollTime - AUTOSCROLL_DURATION + } + endTime.value = scrollTime + } + maxTime.value = scrollTime } - maxTime.value = scrollTime } takeScreenshot(event) - for (const cb of addEventCbs) { - cb(event) + if (session === currentSession.value) { + for (const cb of addEventCbs) { + cb(event) + } } } diff --git a/packages/app-frontend/src/features/timeline/composable/session.ts b/packages/app-frontend/src/features/timeline/composable/session.ts new file mode 100644 index 000000000..d30131ae0 --- /dev/null +++ b/packages/app-frontend/src/features/timeline/composable/session.ts @@ -0,0 +1,60 @@ +import shortid from 'shortid' +import { toRaw } from '@vue/composition-api' +import { addNonReactiveProperties } from '@front/util/reactivity' +import { + endTime, + layersPerApp, + markersAllApps, + markersPerApp, + maxTime, + minTime, + screenshots, + selectedEvent, + selectedLayer, + startTime, + TimelineSession, +} from './store' +import { sessions } from '.' + +// @TODO export/import + +export function createSessionFromCurrentState (): TimelineSession { + const session = { + duration: maxTime.value - minTime.value, + } as TimelineSession + addNonReactiveProperties(session, { + id: shortid(), + date: new Date(), + imported: false, + state: { + minTime: minTime.value, + maxTime: maxTime.value, + startTime: startTime.value, + endTime: endTime.value, + layersPerApp: toRaw(layersPerApp.value), + markersAllApps: toRaw(markersAllApps.value), + markersPerApp: toRaw(markersPerApp.value), + screenshots: toRaw(screenshots.value), + selectedEvent: toRaw(selectedEvent.value), + selectedLayer: toRaw(selectedLayer.value), + }, + }) + return session +} + +export function loadSession (session: TimelineSession) { + minTime.value = session.state.minTime + maxTime.value = session.state.maxTime + startTime.value = session.state.startTime + endTime.value = session.state.endTime + layersPerApp.value = session.state.layersPerApp + markersAllApps.value = session.state.markersAllApps + markersPerApp.value = session.state.markersPerApp + screenshots.value = session.state.screenshots + selectedEvent.value = session.state.selectedEvent + selectedLayer.value = session.state.selectedLayer +} + +export function getSessionAtTime (time: number): TimelineSession | null { + return sessions.value.find((session) => session.state.startTime <= time && session.state.endTime >= time) +} diff --git a/packages/app-frontend/src/features/timeline/composable/store.ts b/packages/app-frontend/src/features/timeline/composable/store.ts index 9714bb51a..121765337 100644 --- a/packages/app-frontend/src/features/timeline/composable/store.ts +++ b/packages/app-frontend/src/features/timeline/composable/store.ts @@ -78,6 +78,27 @@ export interface TimelineMarker extends MarkerFromBackend { x: number } +export interface TimelineSession { + id: string + date: Date + duration: number + imported: boolean + state: TimelineSessionState +} + +export interface TimelineSessionState { + startTime: number + endTime: number + minTime: number + maxTime: number + layersPerApp: Record + screenshots: EventScreenshot[] + markersAllApps: TimelineMarker[] + markersPerApp: Record + selectedEvent: TimelineEvent + selectedLayer: Layer +} + export const startTime = ref(0) export const endTime = ref(0) export const minTime = ref(0) @@ -103,3 +124,7 @@ export const screenshots: Ref = ref([]) export const markersAllApps: Ref = ref([]) export const markersPerApp: Ref<{[appId: string]: TimelineMarker[]}> = ref({}) + +export const sessions: Ref = ref([]) +export const currentSession: Ref = ref(null) +export const currentSessionIndex: Ref = ref(null) diff --git a/yarn.lock b/yarn.lock index 9f105f0c9..b9ea3a2c5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8036,6 +8036,11 @@ mute-stream@0.0.8, mute-stream@~0.0.4: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== +nanoid@^2.1.0: + version "2.1.11" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280" + integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA== + nanoid@^3.1.30: version "3.1.30" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362" @@ -9911,6 +9916,13 @@ shell-quote@^1.6.1: resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123" integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw== +shortid@^2.2.16: + version "2.2.16" + resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.16.tgz#b742b8f0cb96406fd391c76bfc18a67a57fe5608" + integrity sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g== + dependencies: + nanoid "^2.1.0" + side-channel@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"