diff --git a/package.json b/package.json index 0a46068c..32393d9d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rrweb", - "version": "0.2.0", + "version": "0.3.0", "description": "record and replay the web", "main": "index.js", "scripts": { diff --git a/src/replay/index.ts b/src/replay/index.ts index 1587b20a..85082e81 100644 --- a/src/replay/index.ts +++ b/src/replay/index.ts @@ -1,5 +1,5 @@ import { rebuild, serializeNodeWithId } from 'rrweb-snapshot'; -import later from './timer'; +import { later, clear } from './timer'; import { EventType, incrementalData, @@ -7,18 +7,35 @@ import { fullSnapshotEvent, eventWithTime, MouseInteractions, + playerConfig, } from '../types'; import { mirror, getIdNodeMap } from '../utils'; +const defaultConfig: playerConfig = { + speed: 1, +}; + export class Replayer { private events: eventWithTime[] = []; + private config: playerConfig; + private wrapper: HTMLDivElement; private iframe: HTMLIFrameElement; private mouse: HTMLDivElement; private startTime: number = 0; - constructor(events: eventWithTime[]) { + private timerIds: number[] = []; + + constructor(events: eventWithTime[], config: playerConfig = defaultConfig) { this.events = events; + this.config = config; + } + + public setConfig(config: Partial) { + this.config = { + ...this.config, + ...config, + }; } public play() { @@ -33,12 +50,13 @@ export class Replayer { this.iframe.height = `${event.data.height}px`; break; case EventType.FullSnapshot: - later(() => { + this.later(() => { this.rebuildFullSnapshot(event); + this.iframe.contentWindow!.scrollTo(event.data.initialOffset); }, this.getDelay(event)); break; case EventType.IncrementalSnapshot: - later(() => { + this.later(() => { this.applyIncremental(event.data); }, this.getDelay(event)); break; @@ -47,6 +65,10 @@ export class Replayer { } } + public pause() { + this.timerIds.forEach(clear); + } + private setupDom() { this.wrapper = document.createElement('div'); this.wrapper.classList.add('replayer-wrapper'); @@ -60,6 +82,11 @@ export class Replayer { this.wrapper.appendChild(this.iframe); } + private later(cb: () => void, delayMs: number) { + const id = later(cb, delayMs, this.config.speed); + this.timerIds.push(id); + } + private getDelay(event: eventWithTime): number { // Mouse move events was recorded in a throttle function, // so we need to find the real timestamp by traverse the time offsets. @@ -152,7 +179,7 @@ export class Replayer { } case IncrementalSource.MouseMove: d.positions.forEach(p => { - later(() => { + this.later(() => { this.mouse.style.left = `${p.x}px`; this.mouse.style.top = `${p.y}px`; }, p.timeOffset); diff --git a/src/replay/timer.ts b/src/replay/timer.ts index 37add605..2cef5543 100644 --- a/src/replay/timer.ts +++ b/src/replay/timer.ts @@ -1,17 +1,27 @@ const FRAME_MS = 16; +const timerMap: Map = new Map(); -function later(cb: () => void, delayMs: number, speed = 1) { +export function later(cb: () => void, delayMs: number, speed = 1): number { const now = performance.now(); + const id = timerMap.size + 1; + timerMap.set(id, true); function check(step: number) { + if (!timerMap.has(id)) { + return; + } if (step - now > delayMs / speed - FRAME_MS) { cb(); + clear(id); } else { requestAnimationFrame(check); } } requestAnimationFrame(check); + return id; } -export default later; +export function clear(id: number) { + timerMap.delete(id); +} diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap index 90287004..25e1e926 100644 --- a/test/__snapshots__/integration.ts.snap +++ b/test/__snapshots__/integration.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`form 1`] = `"[{\\"type\\":0,\\"data\\":{\\"href\\":\\"about:blank\\"},\\"timestamp\\":1542268800000},{\\"type\\":1,\\"data\\":{\\"width\\":800,\\"height\\":600},\\"timestamp\\":1542268800000},{\\"type\\":2,\\"data\\":{\\"node\\":{\\"type\\":0,\\"childNodes\\":[{\\"type\\":1,\\"name\\":\\"html\\",\\"publicId\\":\\"\\",\\"systemId\\":\\"\\",\\"id\\":2},{\\"type\\":2,\\"tagName\\":\\"html\\",\\"attributes\\":{\\"lang\\":\\"en\\"},\\"childNodes\\":[{\\"type\\":2,\\"tagName\\":\\"head\\",\\"attributes\\":{},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":5},{\\"type\\":2,\\"tagName\\":\\"meta\\",\\"attributes\\":{\\"charset\\":\\"UTF-8\\"},\\"childNodes\\":[],\\"id\\":6},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":7},{\\"type\\":2,\\"tagName\\":\\"meta\\",\\"attributes\\":{\\"name\\":\\"viewport\\",\\"content\\":\\"width=device-width, initial-scale=1.0\\"},\\"childNodes\\":[],\\"id\\":8},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":9},{\\"type\\":2,\\"tagName\\":\\"meta\\",\\"attributes\\":{\\"http-equiv\\":\\"X-UA-Compatible\\",\\"content\\":\\"ie=edge\\"},\\"childNodes\\":[],\\"id\\":10},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":11},{\\"type\\":2,\\"tagName\\":\\"title\\",\\"attributes\\":{},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"form fields\\",\\"id\\":13}],\\"id\\":12},{\\"type\\":3,\\"textContent\\":\\"\\\\n\\",\\"id\\":14}],\\"id\\":4},{\\"type\\":3,\\"textContent\\":\\"\\\\n\\\\n\\",\\"id\\":15},{\\"type\\":2,\\"tagName\\":\\"body\\",\\"attributes\\":{},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":17},{\\"type\\":2,\\"tagName\\":\\"form\\",\\"attributes\\":{},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":19},{\\"type\\":2,\\"tagName\\":\\"label\\",\\"attributes\\":{\\"for\\":\\"text\\"},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":21},{\\"type\\":2,\\"tagName\\":\\"input\\",\\"attributes\\":{\\"type\\":\\"text\\"},\\"childNodes\\":[],\\"id\\":22},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":23}],\\"id\\":20},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":24},{\\"type\\":2,\\"tagName\\":\\"label\\",\\"attributes\\":{\\"for\\":\\"radio\\"},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":26},{\\"type\\":2,\\"tagName\\":\\"input\\",\\"attributes\\":{\\"type\\":\\"radio\\"},\\"childNodes\\":[],\\"id\\":27},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":28}],\\"id\\":25},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":29},{\\"type\\":2,\\"tagName\\":\\"label\\",\\"attributes\\":{\\"for\\":\\"checkbox\\"},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":31},{\\"type\\":2,\\"tagName\\":\\"input\\",\\"attributes\\":{\\"type\\":\\"checkbox\\"},\\"childNodes\\":[],\\"id\\":32},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":33}],\\"id\\":30},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":34},{\\"type\\":2,\\"tagName\\":\\"label\\",\\"attributes\\":{\\"for\\":\\"textarea\\"},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":36},{\\"type\\":2,\\"tagName\\":\\"textarea\\",\\"attributes\\":{\\"name\\":\\"\\",\\"id\\":\\"\\",\\"cols\\":\\"30\\",\\"rows\\":\\"10\\"},\\"childNodes\\":[],\\"id\\":37},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":38}],\\"id\\":35},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":39},{\\"type\\":2,\\"tagName\\":\\"label\\",\\"attributes\\":{\\"for\\":\\"select\\"},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":41},{\\"type\\":2,\\"tagName\\":\\"select\\",\\"attributes\\":{\\"name\\":\\"\\",\\"id\\":\\"\\",\\"value\\":\\"1\\"},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":43},{\\"type\\":2,\\"tagName\\":\\"option\\",\\"attributes\\":{\\"value\\":\\"1\\",\\"selected\\":true},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"1\\",\\"id\\":45}],\\"id\\":44},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":46},{\\"type\\":2,\\"tagName\\":\\"option\\",\\"attributes\\":{\\"value\\":\\"2\\"},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"2\\",\\"id\\":48}],\\"id\\":47},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":49}],\\"id\\":42},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":50}],\\"id\\":40},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":51}],\\"id\\":18},{\\"type\\":3,\\"textContent\\":\\"\\\\n\\\\n \\",\\"id\\":52},{\\"type\\":2,\\"tagName\\":\\"script\\",\\"attributes\\":{},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\",\\"id\\":54}],\\"id\\":53},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\\\n \\\\n\\\\n\\\\n\\",\\"id\\":55}],\\"id\\":16}],\\"id\\":3}],\\"id\\":1}},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":5,\\"id\\":22},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"t\\",\\"isChecked\\":false,\\"id\\":22},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"te\\",\\"isChecked\\":false,\\"id\\":22},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"tes\\",\\"isChecked\\":false,\\"id\\":22},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"test\\",\\"isChecked\\":false,\\"id\\":22},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":1,\\"positions\\":[{\\"x\\":204,\\"y\\":117,\\"timeOffset\\":0}]},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":1,\\"id\\":27,\\"x\\":204,\\"y\\":117},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":6,\\"id\\":22},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":5,\\"id\\":27},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":0,\\"id\\":27,\\"x\\":204,\\"y\\":117},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":2,\\"id\\":27,\\"x\\":204,\\"y\\":117},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"on\\",\\"isChecked\\":true,\\"id\\":27},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":1,\\"id\\":32,\\"x\\":228,\\"y\\":117},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":6,\\"id\\":27},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":5,\\"id\\":32},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":0,\\"id\\":32,\\"x\\":228,\\"y\\":117},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":2,\\"id\\":32,\\"x\\":228,\\"y\\":117},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"on\\",\\"isChecked\\":true,\\"id\\":32},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":6,\\"id\\":32},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":5,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"t\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"te\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"tex\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"text\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"texta\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textar\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textare\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textarea\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textarea \\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textarea t\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textarea te\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textarea tes\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textarea test\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"1\\",\\"isChecked\\":false,\\"id\\":42},\\"timestamp\\":1542268800000}]"`; +exports[`form 1`] = `"[{\\"type\\":0,\\"data\\":{\\"href\\":\\"about:blank\\"},\\"timestamp\\":1542268800000},{\\"type\\":1,\\"data\\":{\\"width\\":800,\\"height\\":600},\\"timestamp\\":1542268800000},{\\"type\\":2,\\"data\\":{\\"node\\":{\\"type\\":0,\\"childNodes\\":[{\\"type\\":1,\\"name\\":\\"html\\",\\"publicId\\":\\"\\",\\"systemId\\":\\"\\",\\"id\\":2},{\\"type\\":2,\\"tagName\\":\\"html\\",\\"attributes\\":{\\"lang\\":\\"en\\"},\\"childNodes\\":[{\\"type\\":2,\\"tagName\\":\\"head\\",\\"attributes\\":{},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":5},{\\"type\\":2,\\"tagName\\":\\"meta\\",\\"attributes\\":{\\"charset\\":\\"UTF-8\\"},\\"childNodes\\":[],\\"id\\":6},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":7},{\\"type\\":2,\\"tagName\\":\\"meta\\",\\"attributes\\":{\\"name\\":\\"viewport\\",\\"content\\":\\"width=device-width, initial-scale=1.0\\"},\\"childNodes\\":[],\\"id\\":8},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":9},{\\"type\\":2,\\"tagName\\":\\"meta\\",\\"attributes\\":{\\"http-equiv\\":\\"X-UA-Compatible\\",\\"content\\":\\"ie=edge\\"},\\"childNodes\\":[],\\"id\\":10},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":11},{\\"type\\":2,\\"tagName\\":\\"title\\",\\"attributes\\":{},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"form fields\\",\\"id\\":13}],\\"id\\":12},{\\"type\\":3,\\"textContent\\":\\"\\\\n\\",\\"id\\":14}],\\"id\\":4},{\\"type\\":3,\\"textContent\\":\\"\\\\n\\\\n\\",\\"id\\":15},{\\"type\\":2,\\"tagName\\":\\"body\\",\\"attributes\\":{},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":17},{\\"type\\":2,\\"tagName\\":\\"form\\",\\"attributes\\":{},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":19},{\\"type\\":2,\\"tagName\\":\\"label\\",\\"attributes\\":{\\"for\\":\\"text\\"},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":21},{\\"type\\":2,\\"tagName\\":\\"input\\",\\"attributes\\":{\\"type\\":\\"text\\"},\\"childNodes\\":[],\\"id\\":22},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":23}],\\"id\\":20},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":24},{\\"type\\":2,\\"tagName\\":\\"label\\",\\"attributes\\":{\\"for\\":\\"radio\\"},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":26},{\\"type\\":2,\\"tagName\\":\\"input\\",\\"attributes\\":{\\"type\\":\\"radio\\"},\\"childNodes\\":[],\\"id\\":27},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":28}],\\"id\\":25},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":29},{\\"type\\":2,\\"tagName\\":\\"label\\",\\"attributes\\":{\\"for\\":\\"checkbox\\"},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":31},{\\"type\\":2,\\"tagName\\":\\"input\\",\\"attributes\\":{\\"type\\":\\"checkbox\\"},\\"childNodes\\":[],\\"id\\":32},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":33}],\\"id\\":30},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":34},{\\"type\\":2,\\"tagName\\":\\"label\\",\\"attributes\\":{\\"for\\":\\"textarea\\"},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":36},{\\"type\\":2,\\"tagName\\":\\"textarea\\",\\"attributes\\":{\\"name\\":\\"\\",\\"id\\":\\"\\",\\"cols\\":\\"30\\",\\"rows\\":\\"10\\"},\\"childNodes\\":[],\\"id\\":37},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":38}],\\"id\\":35},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":39},{\\"type\\":2,\\"tagName\\":\\"label\\",\\"attributes\\":{\\"for\\":\\"select\\"},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":41},{\\"type\\":2,\\"tagName\\":\\"select\\",\\"attributes\\":{\\"name\\":\\"\\",\\"id\\":\\"\\",\\"value\\":\\"1\\"},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":43},{\\"type\\":2,\\"tagName\\":\\"option\\",\\"attributes\\":{\\"value\\":\\"1\\",\\"selected\\":true},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"1\\",\\"id\\":45}],\\"id\\":44},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":46},{\\"type\\":2,\\"tagName\\":\\"option\\",\\"attributes\\":{\\"value\\":\\"2\\"},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"2\\",\\"id\\":48}],\\"id\\":47},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":49}],\\"id\\":42},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":50}],\\"id\\":40},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\",\\"id\\":51}],\\"id\\":18},{\\"type\\":3,\\"textContent\\":\\"\\\\n\\\\n \\",\\"id\\":52},{\\"type\\":2,\\"tagName\\":\\"script\\",\\"attributes\\":{},\\"childNodes\\":[{\\"type\\":3,\\"textContent\\":\\"SCRIPT_PLACEHOLDER\\",\\"id\\":54}],\\"id\\":53},{\\"type\\":3,\\"textContent\\":\\"\\\\n \\\\n \\\\n\\\\n\\\\n\\",\\"id\\":55}],\\"id\\":16}],\\"id\\":3}],\\"id\\":1},\\"initialOffset\\":{\\"left\\":0,\\"top\\":0}},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":5,\\"id\\":22},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"t\\",\\"isChecked\\":false,\\"id\\":22},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"te\\",\\"isChecked\\":false,\\"id\\":22},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"tes\\",\\"isChecked\\":false,\\"id\\":22},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"test\\",\\"isChecked\\":false,\\"id\\":22},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":1,\\"positions\\":[{\\"x\\":204,\\"y\\":117,\\"timeOffset\\":0}]},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":1,\\"id\\":27,\\"x\\":204,\\"y\\":117},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":6,\\"id\\":22},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":5,\\"id\\":27},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":0,\\"id\\":27,\\"x\\":204,\\"y\\":117},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":2,\\"id\\":27,\\"x\\":204,\\"y\\":117},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"on\\",\\"isChecked\\":true,\\"id\\":27},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":1,\\"id\\":32,\\"x\\":228,\\"y\\":117},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":6,\\"id\\":27},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":5,\\"id\\":32},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":0,\\"id\\":32,\\"x\\":228,\\"y\\":117},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":2,\\"id\\":32,\\"x\\":228,\\"y\\":117},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"on\\",\\"isChecked\\":true,\\"id\\":32},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":6,\\"id\\":32},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":2,\\"type\\":5,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"t\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"te\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"tex\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"text\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"texta\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textar\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textare\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textarea\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textarea \\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textarea t\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textarea te\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textarea tes\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"textarea test\\",\\"isChecked\\":false,\\"id\\":37},\\"timestamp\\":1542268800000},{\\"type\\":3,\\"data\\":{\\"source\\":5,\\"text\\":\\"1\\",\\"isChecked\\":false,\\"id\\":42},\\"timestamp\\":1542268800000}]"`;