git.iko.soy/elk
on 1d2776b help sign in
elk/runtime/Debugger.js
448 lines 11 kB history raw
2(function() {
3'use strict';
5Elm.Debugger = null;
6Elm.debuggerAttach = function(module, hotSwapState /* =undefined */) {
7 return {
8 make: function(runtime) {
9 var wrappedModule = debugModule(module, runtime);
10 Elm.Debugger = debuggerInit(wrappedModule, runtime, hotSwapState);
11 dispatchElmDebuggerInit();
12 return wrappedModule.moduleInstance;
13 }
14 };
15};
17function dispatchElmDebuggerInit() {
18 if (parent.window) {
19 var dispatch = function(_) {
20 parent.window.postMessage("elmDebuggerInit", window.location.origin);
21 };
22 if (parent.window.document.readyState === "complete") {
23 dispatch();
24 }
25 else {
26 parent.window.addEventListener("load", dispatch);
27 }
28 }
31function debugModule(module, runtime) {
32 var programPaused = false;
33 var recordedEvents = [];
34 var asyncCallbacks = [];
36 function wrapNotify(id, v) {
37 var timestep = Date.now();
39 if (programPaused) {
40 // ignore async events generated while playing back
41 // or user events while program is paused
42 return false;
43 }
44 else {
45 var changed = runtime.notify(id, v, timestep);
46 recordEvent(id, v, timestep);
47 if (parent.window) {
48 parent.window.postMessage("elmNotify", window.location.origin);
49 }
50 return changed;
51 }
52 };
54 function wrapRunDelayed(func, delayMs) {
55 var cbObj = { func:func, delayMs:delayMs, timerId:0, executed:false };
56 var timerId = setTimeout(function() {
57 cbObj.executed = true;
58 func();
59 }, delayMs);
60 cbObj.timerId = timerId;
61 asyncCallbacks.push(cbObj);
62 return timerId;
63 }
65 function recordEvent(id, v, timestep) {
66 recordedEvents.push({ id:id, value:v, timestep:timestep });
67 }
69 function clearAsyncCallbacks() {
70 asyncCallbacks.forEach(function(timer) {
71 if (!timer.executed) {
72 clearTimeout(timer.timerId);
73 }
74 });
75 }
77 function clearRecordedEvents() {
78 recordedEvents = [];
79 }
81 function getRecordedEventsLength() {
82 return recordedEvents.length;
83 }
85 function getRecordedEventAt(i) {
86 return recordedEvents[i];
87 }
89 function copyRecordedEvents() {
90 return recordedEvents.slice();
91 }
93 function loadRecordedEvents(events) {
94 recordedEvents = events.slice();
95 }
97 function setPaused(v) {
98 programPaused = v;
99 if (programPaused) {
100 clearAsyncCallbacks();
101 tracePath.stopRecording();
102 }
103 else {
104 // executeCallbacks should only be called when continuing, not when restarting.
105 //executeCallbacks(asyncCallbacks, false);
106 tracePath.startRecording();
107 }
108 }
110 function getPaused() {
111 return programPaused;
112 }
114 var wrappedRuntime = {
115 notify: wrapNotify,
116 runDelayed: wrapRunDelayed,
117 node: runtime.node,
118 display: runtime.display,
119 id: runtime.id,
120 addListener: runtime.addListener,
121 inputs: runtime.inputs
122 };
124 var moduleInstance = module.make(wrappedRuntime);
125 var moduleNodes = flattenNodes(wrappedRuntime.inputs);
126 var tracePath = tracePathInit(runtime);
128 return {
129 moduleInstance: moduleInstance,
130 moduleNodes: moduleNodes,
131 initialNodeValues: saveNodeValues(moduleNodes),
132 initialAsyncCallbacks: asyncCallbacks.slice(),
133 // API functions
134 clearAsyncCallbacks: clearAsyncCallbacks,
135 clearRecordedEvents: clearRecordedEvents,
136 getRecordedEventsLength: getRecordedEventsLength,
137 getRecordedEventAt: getRecordedEventAt,
138 copyRecordedEvents: copyRecordedEvents,
139 loadRecordedEvents: loadRecordedEvents,
140 getPaused: getPaused,
141 setPaused: setPaused,
142 tracePath: tracePath
143 };
146function debuggerInit(debugModule, runtime, hotSwapState /* =undefined */) {
147 var Signal = Elm.Signal.make(runtime);
149 var tracePathNode = A2(Signal.lift, debugModule.tracePath.graphicsUpdate, debugModule.moduleInstance.main);
150 runtime.node.parentNode.appendChild(debugModule.tracePath.canvas);
152 var eventCounter = 0;
154 function resetProgram() {
155 debugModule.clearAsyncCallbacks();
156 restoreNodeValues(debugModule.moduleNodes, debugModule.initialNodeValues);
157 redrawGraphics();
158 }
160 function restartProgram() {
161 resetProgram();
162 debugModule.tracePath.clearTraces();
163 debugModule.clearRecordedEvents();
164 debugModule.setPaused(false);
165 executeCallbacks(debugModule.initialAsyncCallbacks, true);
166 }
168 function pauseProgram() {
169 debugModule.setPaused(true);
170 eventCounter = debugModule.getRecordedEventsLength();
171 }
173 function continueProgram() {
174 if (debugModule.getPaused())
175 {
176 debugModule.setPaused(false);
177 }
178 }
180 function stepTo(index) {
181 if (!debugModule.getPaused()) {
182 debugModule.setPaused(true);
183 resetProgram();
184 }
186 if (index < 0 || index > getMaxSteps()) {
187 throw "Index out of bounds: " + index;
188 }
190 if (index < eventCounter) {
191 resetProgram();
192 eventCounter = 0;
193 }
195 assert(index >= eventCounter, "index must be bad");
196 while (eventCounter < index) {
197 var nextEvent = debugModule.getRecordedEventAt(eventCounter);
198 runtime.notify(nextEvent.id, nextEvent.value, nextEvent.timestep);
200 eventCounter += 1;
201 }
202 assert(eventCounter == index, "while loop didn't work");
203 }
205 function getMaxSteps() {
206 return debugModule.getRecordedEventsLength();
207 }
209 function doPlayback(eventList) {
210 var x = eventList.shift();
211 var time = x[2];
212 runtime.notify(x[0], x[1], x[2]);
214 if (eventList.length > 0) {
215 var delta = eventList[0][2] - time;
216 setTimeout(function() { doPlayback(eventList); }, delta);
217 }
218 }
220 function redrawGraphics() {
221 var graphicsNode = debugModule.moduleInstance.main.kids[0];
222 graphicsNode.recv(Date.now(), true, debugModule.moduleInstance.main.id);
223 }
225 function getHotSwapState() {
226 if (debugModule.getPaused()) {
227 return {
228 recordedEvents: debugModule.copyRecordedEvents(),
229 eventCounter: eventCounter
230 };
231 }
232 else {
233 return null;
234 }
235 }
237 function dispose() {
238 var parentNode = runtime.node.parentNode;
239 parentNode.removeChild(debugModule.tracePath.canvas);
240 parentNode.removeChild(runtime.node);
241 }
243 if (hotSwapState) {
244 debugModule.setPaused(true);
245 debugModule.loadRecordedEvents(hotSwapState.recordedEvents);
247 // draw new trace path
248 debugModule.tracePath.startRecording();
249 stepTo(getMaxSteps());
250 debugModule.tracePath.stopRecording();
252 stepTo(hotSwapState.eventCounter);
253 }
255 var elmDebugger = {
256 restart: restartProgram,
257 pause: pauseProgram,
258 kontinue: continueProgram,
259 getMaxSteps: getMaxSteps,
260 stepTo: stepTo,
261 getPaused: debugModule.getPaused,
262 getHotSwapState: getHotSwapState,
263 dispose: dispose
264 };
266 return elmDebugger;
269function Point(x, y) {
270 this.x = x;
271 this.y = y;
273 this.translate = function(x, y) {
274 return new Point(this.x + x, this.y + y);
275 }
277 this.equals = function(p) {
278 return this.x == p.x && this.y == p.y;
279 }
282function tracePathInit(runtime) {
283 var List = Elm.List.make(runtime);
284 var tracePathCanvas = createCanvas();
285 var tracePositions = {};
286 var recordingTraces = true;
288 function findPositions(currentScene) {
289 var positions = {};
290 function processElement(elem, offset) {
291 if (elem.element.ctor == "Custom" && elem.element.type == "Collage")
292 {
293 List.map(F2(processForm)(offset))(elem.element.model.forms);
294 }
295 else if (elem.element.ctor == "Image" && elem.props.debugTracePathId)
296 {
297 positions[elem.props.debugTracePathId] = new Point(offset.x, offset.y);
298 }
299 }
301 function processForm(offset, form) {
302 if (form.form.ctor == "FElement")
303 {
304 processElement(form.form._0, offset.translate(form.x, -form.y));
305 }
306 }
308 processElement(currentScene, new Point(0, 0));
309 return positions;
310 }
312 function appendPositions(positions) {
313 for (var id in positions) {
314 var pos = positions[id];
315 if (tracePositions.hasOwnProperty(id)) {
316 var points = tracePositions[id];
317 if (!pos.equals(points[points.length-1])) {
318 points.push(pos);
319 }
320 }
321 else {
322 tracePositions[id] = [pos];
323 }
324 }
325 }
327 function graphicsUpdate(currentScene) {
328 if (!recordingTraces) {
329 return;
330 }
332 var ctx = tracePathCanvas.getContext('2d');
333 ctx.clearRect(0, 0, tracePathCanvas.width, tracePathCanvas.height);
335 ctx.save();
336 ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
337 appendPositions(findPositions(currentScene));
338 for (var id in tracePositions)
339 {
340 ctx.beginPath();
341 var points = tracePositions[id];
342 for (var i=0; i < points.length; i++)
343 {
344 var p = points[i];
345 if (i == 0) {
346 ctx.moveTo(p.x, p.y);
347 }
348 else {
349 ctx.lineTo(p.x, p.y);
350 }
351 }
352 ctx.lineWidth = 1;
353 ctx.strokeStyle = "#888a85";
354 ctx.stroke();
356 for (var i=0; i < points.length; i++)
357 {
358 var p = points[i];
359 ctx.beginPath();
360 ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
361 ctx.fillStyle = "#2e3436";
362 ctx.fill();
363 }
364 }
366 ctx.restore();
367 }
369 function clearTraces() {
370 tracePositions = {};
371 }
373 function stopRecording() {
374 recordingTraces = false;
375 }
377 function startRecording() {
378 recordingTraces = true;
379 }
381 return {
382 graphicsUpdate: graphicsUpdate,
383 canvas: tracePathCanvas,
384 clearTraces: clearTraces,
385 stopRecording: stopRecording,
386 startRecording: startRecording
387 }
391function executeCallbacks(callbacks, reexecute) {
392 callbacks.forEach(function(timer) {
393 if (reexecute || !timer.executed) {
394 var func = timer.func;
395 func();
396 }
397 });
400function createCanvas() {
401 var c = document.createElement('canvas');
402 c.width = window.innerWidth;
403 c.height = window.innerHeight;
404 c.style.position = "absolute";
405 c.style.top = "0";
406 c.style.left = "0";
407 return c;
410function assert(bool, msg) {
411 if (!bool) {
412 throw "Assertion error: " + msg;
413 }
416function saveNodeValues(allNodes) {
417 var nodeValues = [];
419 allNodes.forEach(function(node) {
420 nodeValues.push({ value: node.value, id: node.id });
421 });
423 return nodeValues;
424};
427function restoreNodeValues(allNodes, nodeStates) {
428 assert(allNodes.length == nodeStates.length, "saved program state has wrong length");
429 for (var i=0; i < allNodes.length; i++) {
430 var node = allNodes[i];
431 var state = nodeStates[i];
432 assert(node.id == state.id, "the nodes moved position");
434 node.value = state.value;
435 }
438function flattenNodes(nodes) {
439 var treeReduce = function(prev, cur, i, arr) {
440 var flatKids = cur.kids.reduce(treeReduce, []);
441 flatKids.push(cur);
442 return prev.concat(flatKids);
443 }
445 return nodes.reduce(treeReduce, []);
446};
448}());