git.iko.soy/elk
on ed0d84b help sign in
elk/runtime/Debugger.js
437 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 }
43 else {
44 runtime.notify(id, v, timestep);
45 recordEvent(id, v, timestep);
46 if (parent.window) {
47 parent.window.postMessage("elmNotify", window.location.origin);
48 }
49 }
50 };
52 function wrapRunDelayed(func, delayMs) {
53 var cbObj = { func:func, delayMs:delayMs, timerId:0, executed:false };
54 var timerId = setTimeout(function() {
55 cbObj.executed = true;
56 func();
57 }, delayMs);
58 cbObj.timerId = timerId;
59 asyncCallbacks.push(cbObj);
60 return timerId;
61 }
63 function recordEvent(id, v, timestep) {
64 recordedEvents.push({ id:id, value:v, timestep:timestep });
65 }
67 function clearAsyncCallbacks() {
68 asyncCallbacks.forEach(function(timer) {
69 if (!timer.executed) {
70 clearTimeout(timer.timerId);
71 }
72 });
73 }
75 function clearRecordedEvents() {
76 recordedEvents = [];
77 }
79 function getRecordedEventsLength() {
80 return recordedEvents.length;
81 }
83 function getRecordedEventAt(i) {
84 return recordedEvents[i];
85 }
87 function copyRecordedEvents() {
88 return recordedEvents.slice();
89 }
91 function loadRecordedEvents(events) {
92 recordedEvents = events.slice();
93 }
95 function setPaused(v) {
96 programPaused = v;
97 if (programPaused) {
98 clearAsyncCallbacks();
99 tracePath.stopRecording();
100 }
101 else {
102 // executeCallbacks should only be called when continuing, not when restarting.
103 //executeCallbacks(asyncCallbacks, false);
104 tracePath.startRecording();
105 }
106 }
108 function getPaused() {
109 return programPaused;
110 }
112 var wrappedRuntime = {
113 notify: wrapNotify,
114 runDelayed: wrapRunDelayed,
115 node: runtime.node,
116 display: runtime.display,
117 id: runtime.id,
118 addListener: runtime.addListener,
119 inputs: runtime.inputs
120 };
122 var moduleInstance = module.make(wrappedRuntime);
123 var moduleNodes = flattenNodes(wrappedRuntime.inputs);
124 var tracePath = tracePathInit(runtime);
126 return {
127 moduleInstance: moduleInstance,
128 moduleNodes: moduleNodes,
129 initialNodeValues: saveNodeValues(moduleNodes),
130 initialAsyncCallbacks: asyncCallbacks.slice(),
131 // API functions
132 clearAsyncCallbacks: clearAsyncCallbacks,
133 clearRecordedEvents: clearRecordedEvents,
134 getRecordedEventsLength: getRecordedEventsLength,
135 getRecordedEventAt: getRecordedEventAt,
136 copyRecordedEvents: copyRecordedEvents,
137 loadRecordedEvents: loadRecordedEvents,
138 getPaused: getPaused,
139 setPaused: setPaused,
140 tracePath: tracePath
141 };
144function debuggerInit(debugModule, runtime, hotSwapState /* =undefined */) {
145 var Signal = Elm.Signal.make(runtime);
147 var tracePathNode = A2(Signal.lift, debugModule.tracePath.graphicsUpdate, debugModule.moduleInstance.main);
148 runtime.node.parentNode.appendChild(debugModule.tracePath.canvas);
150 var eventCounter = 0;
152 function resetProgram() {
153 debugModule.clearAsyncCallbacks();
154 restoreNodeValues(debugModule.moduleNodes, debugModule.initialNodeValues);
155 redrawGraphics();
156 }
158 function restartProgram() {
159 resetProgram();
160 debugModule.tracePath.clearTraces();
161 debugModule.clearRecordedEvents();
162 debugModule.setPaused(false);
163 executeCallbacks(debugModule.initialAsyncCallbacks, true);
164 }
166 function pauseProgram() {
167 debugModule.setPaused(true);
168 eventCounter = debugModule.getRecordedEventsLength();
169 }
171 function continueProgram() {
172 if (debugModule.getPaused())
173 {
174 debugModule.setPaused(false);
175 }
176 }
178 function stepTo(index) {
179 if (!debugModule.getPaused()) {
180 debugModule.setPaused(true);
181 resetProgram();
182 }
184 if (index < 0 || index > getMaxSteps()) {
185 throw "Index out of bounds: " + index;
186 }
188 if (index < eventCounter) {
189 resetProgram();
190 eventCounter = 0;
191 }
193 assert(index >= eventCounter, "index must be bad");
194 while (eventCounter < index) {
195 var nextEvent = debugModule.getRecordedEventAt(eventCounter);
196 runtime.notify(nextEvent.id, nextEvent.value, nextEvent.timestep);
198 eventCounter += 1;
199 }
200 assert(eventCounter == index, "while loop didn't work");
201 }
203 function getMaxSteps() {
204 return debugModule.getRecordedEventsLength();
205 }
207 function doPlayback(eventList) {
208 var x = eventList.shift();
209 var time = x[2];
210 runtime.notify(x[0], x[1], x[2]);
212 if (eventList.length > 0) {
213 var delta = eventList[0][2] - time;
214 setTimeout(function() { doPlayback(eventList); }, delta);
215 }
216 }
218 function redrawGraphics() {
219 var graphicsNode = debugModule.moduleInstance.main.kids[0];
220 graphicsNode.recv(Date.now(), true, debugModule.moduleInstance.main.id);
221 }
223 function getHotSwapState() {
224 if (debugModule.getPaused()) {
225 return {
226 recordedEvents: debugModule.copyRecordedEvents(),
227 eventCounter: eventCounter
228 };
229 }
230 else {
231 return null;
232 }
233 }
235 function dispose() {
236 var parentNode = runtime.node.parentNode;
237 parentNode.removeChild(debugModule.tracePath.canvas);
238 parentNode.removeChild(runtime.node);
239 }
241 if (hotSwapState) {
242 debugModule.setPaused(true);
243 debugModule.loadRecordedEvents(hotSwapState.recordedEvents);
245 // draw new trace path
246 debugModule.tracePath.startRecording();
247 stepTo(getMaxSteps());
248 debugModule.tracePath.stopRecording();
250 stepTo(hotSwapState.eventCounter);
251 }
253 var elmDebugger = {
254 restart: restartProgram,
255 pause: pauseProgram,
256 kontinue: continueProgram,
257 getMaxSteps: getMaxSteps,
258 stepTo: stepTo,
259 getPaused: debugModule.getPaused,
260 getHotSwapState: getHotSwapState,
261 dispose: dispose
262 };
264 return elmDebugger;
267function Point(x, y) {
268 this.x = x;
269 this.y = y;
271 this.translate = function(x, y) {
272 return new Point(this.x + x, this.y + y);
273 }
275 this.equals = function(p) {
276 return this.x == p.x && this.y == p.y;
277 }
280function tracePathInit(runtime) {
281 var List = Elm.List.make(runtime);
282 var tracePathCanvas = createCanvas();
283 var tracePositions = {};
284 var recordingTraces = true;
286 function findPositions(currentScene) {
287 var positions = {};
288 function processElement(elem, offset) {
289 if (elem.element.ctor == "Custom" && elem.element.type == "Collage")
290 {
291 List.map(F2(processForm)(offset))(elem.element.model.forms);
292 }
293 else if (elem.element.ctor == "Image" && elem.props.debugTracePathId)
294 {
295 positions[elem.props.debugTracePathId] = new Point(offset.x, offset.y);
296 }
297 }
299 function processForm(offset, form) {
300 if (form.form.ctor == "FElement")
301 {
302 processElement(form.form._0, offset.translate(form.x, -form.y));
303 }
304 }
306 processElement(currentScene, new Point(0, 0));
307 return positions;
308 }
310 function appendPositions(positions) {
311 for (var id in positions) {
312 var pos = positions[id];
313 if (tracePositions.hasOwnProperty(id)) {
314 var points = tracePositions[id];
315 if (!pos.equals(points[points.length-1])) {
316 points.push(pos);
317 }
318 }
319 else {
320 tracePositions[id] = [pos];
321 }
322 }
323 }
325 function graphicsUpdate(currentScene) {
326 if (!recordingTraces) {
327 return;
328 }
330 var ctx = tracePathCanvas.getContext('2d');
331 ctx.clearRect(0, 0, tracePathCanvas.width, tracePathCanvas.height);
333 ctx.save();
334 ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
335 appendPositions(findPositions(currentScene));
336 for (var id in tracePositions)
337 {
338 ctx.beginPath();
339 var points = tracePositions[id];
340 for (var i=0; i < points.length; i++)
341 {
342 var p = points[i];
343 if (i == 0) {
344 ctx.moveTo(p.x, p.y);
345 }
346 else {
347 ctx.lineTo(p.x, p.y);
348 }
349 }
350 }
351 ctx.lineWidth = 1;
352 ctx.strokeStyle = "black";
353 ctx.stroke();
355 ctx.restore();
356 }
358 function clearTraces() {
359 tracePositions = {};
360 }
362 function stopRecording() {
363 recordingTraces = false;
364 }
366 function startRecording() {
367 recordingTraces = true;
368 }
370 return {
371 graphicsUpdate: graphicsUpdate,
372 canvas: tracePathCanvas,
373 clearTraces: clearTraces,
374 stopRecording: stopRecording,
375 startRecording: startRecording
376 }
380function executeCallbacks(callbacks, reexecute) {
381 callbacks.forEach(function(timer) {
382 if (reexecute || !timer.executed) {
383 var func = timer.func;
384 func();
385 }
386 });
389function createCanvas() {
390 var c = document.createElement('canvas');
391 c.width = window.innerWidth;
392 c.height = window.innerHeight;
393 c.style.position = "absolute";
394 c.style.top = "0";
395 c.style.left = "0";
396 return c;
399function assert(bool, msg) {
400 if (!bool) {
401 throw "Assertion error: " + msg;
402 }
405function saveNodeValues(allNodes) {
406 var nodeValues = [];
408 allNodes.forEach(function(node) {
409 nodeValues.push({ value: node.value, id: node.id });
410 });
412 return nodeValues;
413};
416function restoreNodeValues(allNodes, nodeStates) {
417 assert(allNodes.length == nodeStates.length, "saved program state has wrong length");
418 for (var i=0; i < allNodes.length; i++) {
419 var node = allNodes[i];
420 var state = nodeStates[i];
421 assert(node.id == state.id, "the nodes moved position");
423 node.value = state.value;
424 }
427function flattenNodes(nodes) {
428 var treeReduce = function(prev, cur, i, arr) {
429 var flatKids = cur.kids.reduce(treeReduce, []);
430 flatKids.push(cur);
431 return prev.concat(flatKids);
432 }
434 return nodes.reduce(treeReduce, []);
435};
437}());