@@ -98,61 +98,11 @@ function debugModule(module, runtime) {
9898
9999function debuggerInit(debugModule, runtime) {
100100 var Signal = Elm.Signal.make(runtime);
101− var List = Elm.List.make(runtime);
102101 var graphicsNode = debugModule.moduleInstance.main.kids[0];
103102
104− var tracePathCanvas = document.createElement('canvas');
105− tracePathCanvas.width = window.innerWidth;
106− tracePathCanvas.height = window.innerHeight;
107− tracePathCanvas.style.position = "absolute";
108− tracePathCanvas.style.top = "0";
109− tracePathCanvas.style.left = "0";
110− runtime.node.parentNode.appendChild(tracePathCanvas);
111−
112− function graphicsUpdate(currentScene) {
113− var ctx = tracePathCanvas.getContext('2d');
114− ctx.clearRect(0, 0, tracePathCanvas.width, tracePathCanvas.height);
115− ctx.fillText("Debugger trace path", 20, 20);
116−
117− function drawElement(elem) {
118− if (elem.element.ctor == "Custom" && elem.element.type == "Collage")
119− {
120− List.map(drawForm)(elem.element.model.forms);
121− }
122− else if (elem.element.ctor == "Image")
123− {
124− var x = 0;
125− var y = 0;
126− ctx.beginPath();
127− ctx.arc(x, y, 2, 0, 2*Math.PI);
128− ctx.fillStyle = "grey";
129− ctx.fill();
130− ctx.lineWidth = 1;
131− ctx.strokeStype = "black";
132− ctx.stroke();
133− }
134− }
135−
136− function drawForm(form) {
137− ctx.save();
138− ctx.scale(form.scale, form.scale);
139− ctx.rotate(form.theta);
140− ctx.translate(form.x, -form.y);
141− if (form.form.ctor == "FElement")
142− {
143− drawElement(form.form._0);
144− }
145−
146− ctx.restore();
147− }
148−
149− ctx.save();
150− ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
151− drawElement(currentScene);
152− ctx.restore();
153− }
154−
155− var tracePathNode = A2(Signal.lift, graphicsUpdate, graphicsNode);
103+ var tracePath = tracePathInit(runtime);
104+ var tracePathNode = A2(Signal.lift, tracePath.graphicsUpdate, graphicsNode);
105+ runtime.node.parentNode.appendChild(tracePath.canvas);
156106
157107 function resetProgram() {
158108 debugModule.clearAsyncEvents();
@@ -223,7 +173,114 @@ function debuggerInit(debugModule, runtime) {
223173 return elmDebugger;
224174}
225175
176+function Point(x, y) {
177+ this.x = x;
178+ this.y = y;
179+
180+ this.translate = function(x, y) {
181+ return new Point(this.x + x, this.y + y);
182+ }
183+
184+ this.equals = function(p) {
185+ return this.x == p.x && this.y == p.y;
186+ }
187+}
188+
189+function tracePathInit(runtime) {
190+ var List = Elm.List.make(runtime);
191+ var tracePathCanvas = createCanvas();
192+ var tracePositions = {};
226193
194+ function findPositions(currentScene) {
195+ var positions = {};
196+ function processElement(elem, offset) {
197+ if (elem.element.ctor == "Custom" && elem.element.type == "Collage")
198+ {
199+ List.map(F2(processForm)(offset))(elem.element.model.forms);
200+ }
201+ else if (elem.element.ctor == "Image" && elem.props.debugTracePathId)
202+ {
203+ positions[elem.props.debugTracePathId] = new Point(offset.x, offset.y);
204+ }
205+ }
206+
207+ function processForm(offset, form) {
208+ if (form.form.ctor == "FElement")
209+ {
210+ processElement(form.form._0, offset.translate(form.x, -form.y));
211+ }
212+ }
213+
214+ processElement(currentScene, new Point(0, 0));
215+ return positions;
216+ }
217+
218+ function appendPositions(positions) {
219+ for (var id in positions) {
220+ var pos = positions[id];
221+ if (tracePositions.hasOwnProperty(id)) {
222+ var points = tracePositions[id];
223+ if (!pos.equals(points[points.length-1])) {
224+ points.push(pos);
225+ }
226+ }
227+ else {
228+ tracePositions[id] = [pos];
229+ }
230+ }
231+ }
232+
233+ function graphicsUpdate(currentScene) {
234+ var ctx = tracePathCanvas.getContext('2d');
235+ ctx.clearRect(0, 0, tracePathCanvas.width, tracePathCanvas.height);
236+ ctx.fillText("Debugger trace path", 20, 20);
237+
238+ ctx.save();
239+ ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
240+ appendPositions(findPositions(currentScene));
241+ for (var id in tracePositions)
242+ {
243+ ctx.beginPath();
244+ var points = tracePositions[id];
245+ for (var i=0; i < points.length; i++)
246+ {
247+ var p = points[i];
248+ if (i == 0) {
249+ ctx.moveTo(p.x, p.y);
250+ }
251+ else {
252+ ctx.lineTo(p.x, p.y);
253+ }
254+ }
255+ }
256+ ctx.lineWidth = 1;
257+ ctx.strokeStyle = "black";
258+ ctx.stroke();
259+
260+ ctx.restore();
261+ }
262+
263+ function clearTraces() {
264+ tracePositions = {};
265+ }
266+
267+ return {
268+ graphicsUpdate: graphicsUpdate,
269+ canvas: tracePathCanvas,
270+ clearTraces: clearTraces
271+ }
272+}
273+
274+
275+function createCanvas() {
276+ var c = document.createElement('canvas');
277+ c.width = window.innerWidth;
278+ c.height = window.innerHeight;
279+ c.style.position = "absolute";
280+ c.style.top = "0";
281+ c.style.left = "0";
282+ return c;
283+}
227284
228285function assert(bool, msg) {
229286 if (!bool) {