Get some basic collage functions working: forms excluding embedded elements, rect is known to work.

libraries/Graphics/Geometry.elm

@@ -2,7 +2,9 @@
 -- These structures are purely geometric forms, no colors or styles.
 -- Could be the basis of some cool geometry stuff :)
 
-module Geometry where
+module Graphics.Geometry where
+
+import List
 
 type Path = [(Float,Float)]
 
@@ -17,12 +19,12 @@ rect w h = [ (0-w/2,0-h/2), (0-w/2,h/2), (w/2,h/2), (w/2,0-h/2) ]
 
 oval w h =
   let n = 50
-      f i = (w/2 * cos (2*pi/n * i), h/2 * sin (2*pi/n * i))
+      f i = (w/2 * Math.cos (2*Math.pi/n * i), h/2 * Math.sin (2*Math.pi/n * i))
   in  map f [0..n-1]
 
 circle r = oval (2*r) (2*r)
 
 ngon n r =
   let m = toFloat n
-      f i = ( r * cos (2*pi/m * i), r * sin (2*pi/m * i))
+      f i = ( r * Math.cos (2*Math.pi/m * i), r * Math.sin (2*Math.pi/m * i))
   in  map f [0..n-1]

libraries/Graphics/LineStyle.elm

@@ -17,10 +17,10 @@ type LineStyle = {
  }
 
 default = {
-  color = black,
+  color = Color.black,
   width = 1,
   cap   = Butt,
-  join  = Miter,
+  join  = Sharp,
   dashing = [],
   dashOffset = 0,
   miterLimit = 10

libraries/Native/Graphics/Collage.js

@@ -0,0 +1,19 @@
+
+Elm.Native.Graphics.Collage = function(elm) {
+ "use strict";
+
+ elm.Native = elm.Native || {};
+ elm.Native.Graphics = elm.Native.Graphics || {};
+ if (elm.Native.Graphics.Collage) return elm.Native.Graphics.Collage;
+
+ var newElement = Elm.Graphics.Element(elm).newElement;
+ var render = ElmRuntime.use(ElmRuntime.Render.Collage).render;
+
+ function collage(w,h,forms) {
+     return A3(newElement, w, h,
+	       {ctor: 'Custom', render: render,
+		       model: {w:w, h:h, forms:forms} });
+ }
+ return elm.Native.Graphics.Collage = { collage:F3(collage) };
+
+};

libraries/Native/Graphics/Matrix.js

@@ -35,7 +35,7 @@ Elm.Native.Graphics.Matrix = function(elm) {
 
  return elm.Native.Graphics.Matrix = {
      identity:identity,
-     rotation:F2(rotation),
+     rotate:F2(rotate),
      scale:F3(scale),
      move:F3(move),
      matrix:F7(matrix)

runtime/Init.js

@@ -42,8 +42,21 @@ Elm.init = function(module, baseNode) {
   // object. This permits many Elm programs to be embedded per document.
   var elm = {notify: notify, node: baseNode, id: ElmRuntime.guid(), inputs: inputs};
 
-  // If graphics are enabled, set up the `main` value in baseNode.
-  if (baseNode !== null) {
+  // Set up methods to communicate with Elm program from JS.
+  function send(name, value) {
+      var e = document.createEvent('Event');
+      e.initEvent(name + '_' + elm.id, true, true);
+      e.value = value;
+      document.dispatchEvent(e);
+  }
+  function recv(name, handler) {
+      document.addEventListener(name + '_' + elm.id, handler);
+  }
+
+  // If graphics are not enabled, escape early, skip over setting up DOM stuff.
+  if (baseNode === null) return { send : send, recv : recv };
+
+
   var Render = ElmRuntime.use(ElmRuntime.Render.Element);
 
   // evaluate the given module and extract its 'main' value.
@@ -76,17 +89,6 @@ Elm.init = function(module, baseNode) {
   }
   
   signalGraph = A2(Signal.lift, domUpdate, signalGraph);
-  }
-
-  function send(name, value) {
-      var e = document.createEvent('Event');
-      e.initEvent(name + '_' + elm.id, true, true);
-      e.value = value;
-      document.dispatchEvent(e);
-  }
-  function recv(name, handler) {
-      document.addEventListener(name + '_' + elm.id, handler);
-  }
     
   return { send : send, recv : recv };
 };

runtime/Render/Collage.js

@@ -10,6 +10,7 @@ var newElement = Utils.newElement, addTo = Utils.addTo,
 
 function trace(ctx, path) {
     var points = fromList(path);
+    console.log(points);
     var i = points.length - 1;
     if (i <= 0) return;
     ctx.moveTo(points[i]._0, points[i]._1);
@@ -88,6 +89,7 @@ function gradient(ctx, grad) {
 }
 
 function drawShape(redo, ctx, style, path) {
+    console.log(style, path);
     trace(ctx, path);
     var sty = style.ctor;
     ctx.fillStyle =
@@ -110,6 +112,7 @@ function renderForm(redo,ctx,form) {
     ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);
     ctx.beginPath();
     var f = form.form;
+    console.log(f);
     switch(f.ctor) {
     case 'FPath' : drawLine(ctx, f._0, f._1); break;
     case 'FShape':
@@ -123,9 +126,10 @@ function renderForm(redo,ctx,form) {
 }
 
 function renderForms(redo, ctx, forms) {
-    forms = fromList(forms);
-    for (var i = forms.length; i--; ) {
-	renderForm(redo,ctx,forms[i]);
+    var fs = fromList(forms);
+    console.log(fs);
+    for (var i = fs.length; i--; ) {
+	renderForm(redo,ctx,fs[i]);
     }
 }
 
@@ -138,10 +142,11 @@ function collageForms(w,h,forms) {
     canvas.style.display = "block";
     canvas.width  = w;
     canvas.height = h;
+    function redo() { renderForms(this,ctx,forms); }
     if (canvas.getContext) {
 	var ctx = canvas.getContext('2d');
-	function redo() { renderForms(this,ctx,w,h,forms); }
-	renderForms(redo,ctx,w,h,forms);
+	console.log(forms);
+	renderForms(redo,ctx,forms);
 	return canvas;
     }
     canvas.innerHTML = "Your browser does not support canvas.";
@@ -162,6 +167,7 @@ function collageElement(w, h, m, elem) {
 }
 
 function render(model) {
+    console.log(model);
     return collageForms(model.w, model.h, model.forms);
 }