function animation({ tRange = [0, 1], // Time range of animation pixelsPerT = 200, // How the time dimension is scaled activeSeries = undefined, // Which series is currently selected activeKeyframe = undefined,// Which keyframe is currently selected cursor = undefined, // Visual positional indicator of the current time dims = undefined, // The order of timeseries names (e.g. ["default"]) keyFrames = { // Keyframe data default: [{ // Indexed by a series name t: 0, // Position in time y: 0 // Y position }, { t: 1, y: 1 }], }, options = { // Options indexed by series name (e.g. color) }, tStep = 0.01 // Granularity of interpolation (visualization only) } = {}) { const session = Math.random().toString(36).substr(2, 9); let ui; const padding = 0.1; let keys = dims || Object.keys(keyFrames); if (activeSeries === undefined) activeSeries = keys[0]; keys.forEach(key => { options[key] = options[key] || {}; keyFrames[key] = keyFrames[key] || [{ t: tRange[0], y: 0 }, { t: tRange[1], y: 1 }]; }); const interpolate = (key, t) => { const keyFrame = keyFrames[key]; if (!keyFrame) return undefined; if (t < keyFrame[0].t) return undefined; let current = 0; while (t >= keyFrame[current].t) { current++; if (current >= keyFrame.length) return undefined; } // interpolation return linearInterpolate( keyFrame[current-1].y, keyFrame[current].y, keyFrame[current-1].t, keyFrame[current].t, t ); } const interpolateAll = (t) => { const result = {} keys.forEach(key => result[key] = interpolate(key, t)) return result; } function pointsToPath(array) { return array.reduce( (acc, x) => { if (x[0] && x[1]) { if (!acc.prev) { acc.cmds.push(`M ${x[0].toFixed(3)} ${x[1].toFixed(3)}`) } else if (x[1]) { acc.cmds.push(`L ${x[0].toFixed(3)} ${x[1].toFixed(3)}`) } acc.prev = x; } return acc; }, { prev: undefined, cmds: [] } ).cmds.join(" ") } function evtCoords(evt) { pt.x = evt.clientX; pt.y = evt.clientY; var cursorpt = pt.matrixTransform(ui.getScreenCTM().inverse()); return [cursorpt.x, 1 - cursorpt.y] } function deleteKeyFrame(key, keyframe) { const index = keyFrames[key].findIndex(kf => kf === keyframe); keyFrames[key].splice(index, 1); notifyChange(); } // For when someone touches an anchor point function controlMousedown(key, keyframe, evt) { let start = evtCoords(evt); if (evt.shiftKey) { // DELETE deleteKeyFrame(key, keyframe); return; } let initial = JSON.parse(JSON.stringify(keyframe)); function controlMouseup(key, keyframe, evt) { document.removeEventListener('pointermove', mousemoveHandler); document.removeEventListener('pointerup', mouseupHandler); } function controlMousemove(key, keyframe, evt) { const current = evtCoords(evt) keyframe.t = initial.t + (current[0] - start[0]); keyframe.y = initial.y + (current[1] - start[1]); notifyChange(); } let mousemoveHandler = controlMousemove.bind(null , key, keyframe); let mouseupHandler = controlMouseup.bind(null, key, keyframe); document.addEventListener('pointermove', mousemoveHandler); document.addEventListener('pointerup', mouseupHandler); activeKeyframe = keyframe; activeSeries = key; notifyChange(); } function backgroundMousedown(evt) { let start = evtCoords(evt); let keyframe = {}; keyFrames[activeSeries].push(keyframe); activeKeyframe = keyframe; function sync(coords) { keyframe.t = coords[0]; keyframe.y = coords[1]; notifyChange(); } function backgroundMouseup(evt) { document.removeEventListener('pointermove', mousemoveHandler); document.removeEventListener('pointerup', mouseupHandler); } function backgroundMousemove(evt) { const current = evtCoords(evt); console.log(current) sync(current); } let mousemoveHandler = backgroundMousemove; let mouseupHandler = backgroundMouseup; document.addEventListener('pointermove', mousemoveHandler); document.addEventListener('pointerup', mouseupHandler); sync(start); } const notifyChange = () => { ui.dispatchEvent(new CustomEvent("input")); reconcile(ui, computeDOM()); } function computeDOM() { // Order keyframes by time keys.forEach(key => keyFrames[key].sort((a, b) => a.t - b.t)); // enforce constraints // Ensure keyframes in bounds keys.forEach(key => keyFrames[key].forEach(fk => { fk.t = clamp(fk.t, tRange) fk.y = clamp(fk.y, [0, 1]) })); // Ensure first and last at edge keys.forEach(key => { keyFrames[key][0].t = tRange[0]; keyFrames[key][keyFrames[key].length - 1].t = tRange[1]; }); return svg`` } ui = computeDOM(); const pt = ui.createSVGPoint(); Object.defineProperty(ui, "value", { get: () => ({ tRange, keyFrames, activeSeries, activeKeyframe, cursor, pixelsPerT, dims: keys, interpolate, interpolateAll }), set: (value) => { ({ tRange, keyFrames, activeSeries, activeKeyframe, cursor, pixelsPerT, dims } = value); notifyChange() } }); return ui; }