diff --git a/libraries/Graphics/Geometry.elm b/libraries/Graphics/Geometry.elm index 2037615..b216147 100644 --- a/libraries/Graphics/Geometry.elm +++ b/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] diff --git a/libraries/Graphics/LineStyle.elm b/libraries/Graphics/LineStyle.elm index 3dd3155..3e21910 100644 --- a/libraries/Graphics/LineStyle.elm +++ b/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 diff --git a/libraries/Native/Graphics/Collage.js b/libraries/Native/Graphics/Collage.js new file mode 100644 index 0000000..cfdc4cd --- /dev/null +++ b/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) }; + +}; \ No newline at end of file diff --git a/libraries/Native/Graphics/Matrix.js b/libraries/Native/Graphics/Matrix.js index b361ec0..4f436cd 100644 --- a/libraries/Native/Graphics/Matrix.js +++ b/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) diff --git a/runtime/Init.js b/runtime/Init.js index bb3b445..7aa6f12 100644 --- a/runtime/Init.js +++ b/runtime/Init.js @@ -42,42 +42,7 @@ 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) { - var Render = ElmRuntime.use(ElmRuntime.Render.Element); - - // evaluate the given module and extract its 'main' value. - signalGraph = module(elm).main; - - // make sure the signal graph is actually a signal, extract the visual model, - // and filter out any unused inputs. - var Signal = Elm.Signal(elm); - if (!('recv' in signalGraph)) signalGraph = Signal.constant(signalGraph); - visualModel = signalGraph.value; - inputs = ElmRuntime.filterDeadInputs(inputs); - - // Add the visualModel to the DOM - baseNode.appendChild(Render.render(visualModel)); - - if ('Window' in elm) { - var w = baseNode.clientWidth; - if (w !== elm.Window.dimensions.value._0) { - notify(elm.Window.dimensions.id, - Elm.Native.Utils(elm).Tuple2(w, baseNode.clientHeight)); - } - } - - // set up updates so that the DOM is adjusted as necessary. - var update = Render.update; - function domUpdate(value) { - update(baseNode.firstChild, visualModel, value); - visualModel = value; - return value; - } - - signalGraph = A2(Signal.lift, domUpdate, signalGraph); - } - + // 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); @@ -88,5 +53,42 @@ Elm.init = function(module, baseNode) { 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. + signalGraph = module(elm).main; + + // make sure the signal graph is actually a signal, extract the visual model, + // and filter out any unused inputs. + var Signal = Elm.Signal(elm); + if (!('recv' in signalGraph)) signalGraph = Signal.constant(signalGraph); + visualModel = signalGraph.value; + inputs = ElmRuntime.filterDeadInputs(inputs); + + // Add the visualModel to the DOM + baseNode.appendChild(Render.render(visualModel)); + + if ('Window' in elm) { + var w = baseNode.clientWidth; + if (w !== elm.Window.dimensions.value._0) { + notify(elm.Window.dimensions.id, + Elm.Native.Utils(elm).Tuple2(w, baseNode.clientHeight)); + } + } + + // set up updates so that the DOM is adjusted as necessary. + var update = Render.update; + function domUpdate(value) { + update(baseNode.firstChild, visualModel, value); + visualModel = value; + return value; + } + + signalGraph = A2(Signal.lift, domUpdate, signalGraph); + return { send : send, recv : recv }; }; diff --git a/runtime/Render/Collage.js b/runtime/Render/Collage.js index d310b38..0da1a37 100644 --- a/runtime/Render/Collage.js +++ b/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); }