212543f · elk · git.iko.soy

git.iko.soy/elk

on master help sign in

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

212543fevancz14 years ago

libraries/Graphics/Geometry.elm+5−3

compare with master

unifiedsplit

@@ -2,7 +2,9 @@

2-- These structures are purely geometric forms, no colors or styles.

3-- Could be the basis of some cool geometry stuff :)

5−module Geometry where

5+module Graphics.Geometry where

7+import List

7type Path = [(Float,Float)]

9type 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) ]

18oval w h =

20oval w h =

19 let n = 50

21 let n = 50

20− f i = (w/2 * cos (2*pi/n * i), h/2 * sin (2*pi/n * i))

22+ f i = (w/2 * Math.cos (2*Math.pi/n * i), h/2 * Math.sin (2*Math.pi/n * i))

21 in map f [0..n-1]

23 in map f [0..n-1]

23circle r = oval (2*r) (2*r)

25circle r = oval (2*r) (2*r)

25ngon n r =

27ngon n r =

26 let m = toFloat n

28 let m = toFloat n

27− f i = ( r * cos (2*pi/m * i), r * sin (2*pi/m * i))

29+ f i = ( r * Math.cos (2*Math.pi/m * i), r * Math.sin (2*Math.pi/m * i))

28 in map f [0..n-1]

30 in map f [0..n-1]

libraries/Graphics/LineStyle.elm+2−2

@@ -17,10 +17,10 @@ type LineStyle = {

17 }

19default = {

20− color = black,

20+ color = Color.black,

21 width = 1,

22 cap = Butt,

23− join = Miter,

23+ join = Sharp,

24 dashing = [],

25 dashOffset = 0,

26 miterLimit = 10

libraries/Native/Graphics/Collage.jsnew file+19

@@ -0,0 +1,19 @@

2+Elm.Native.Graphics.Collage = function(elm) {

3+ "use strict";

5+ elm.Native = elm.Native || {};

6+ elm.Native.Graphics = elm.Native.Graphics || {};

7+ if (elm.Native.Graphics.Collage) return elm.Native.Graphics.Collage;

9+ var newElement = Elm.Graphics.Element(elm).newElement;

10+ var render = ElmRuntime.use(ElmRuntime.Render.Collage).render;

11+

12+ function collage(w,h,forms) {

13+ return A3(newElement, w, h,

14+ {ctor: 'Custom', render: render,

15+ model: {w:w, h:h, forms:forms} });

16+ }

17+ return elm.Native.Graphics.Collage = { collage:F3(collage) };

18+

19+};

libraries/Native/Graphics/Matrix.js+1−1

@@ -35,7 +35,7 @@ Elm.Native.Graphics.Matrix = function(elm) {

36 return elm.Native.Graphics.Matrix = {

37 identity:identity,

38− rotation:F2(rotation),

38+ rotate:F2(rotate),

39 scale:F3(scale),

40 move:F3(move),

41 matrix:F7(matrix)

runtime/Init.js+34−32

@@ -42,51 +42,53 @@ Elm.init = function(module, baseNode) {

42 // object. This permits many Elm programs to be embedded per document.

43 var elm = {notify: notify, node: baseNode, id: ElmRuntime.guid(), inputs: inputs};

45− // If graphics are enabled, set up the `main` value in baseNode.

45+ // Set up methods to communicate with Elm program from JS.

46− if (baseNode !== null) {

46+ function send(name, value) {

47− var Render = ElmRuntime.use(ElmRuntime.Render.Element);

47+ var e = document.createEvent('Event');

48+ e.initEvent(name + '_' + elm.id, true, true);

49+ e.value = value;

50+ document.dispatchEvent(e);

51+ }

52+ function recv(name, handler) {

53+ document.addEventListener(name + '_' + elm.id, handler);

54+ }

49− // evaluate the given module and extract its 'main' value.

56+ // If graphics are not enabled, escape early, skip over setting up DOM stuff.

50− signalGraph = module(elm).main;

57+ if (baseNode === null) return { send : send, recv : recv };

52− // make sure the signal graph is actually a signal, extract the visual model,

53− // and filter out any unused inputs.

54− var Signal = Elm.Signal(elm);

55− if (!('recv' in signalGraph)) signalGraph = Signal.constant(signalGraph);

56− visualModel = signalGraph.value;

57− inputs = ElmRuntime.filterDeadInputs(inputs);

59− // Add the visualModel to the DOM

60+ var Render = ElmRuntime.use(ElmRuntime.Render.Element);

60− baseNode.appendChild(Render.render(visualModel));

62+ // evaluate the given module and extract its 'main' value.

63+ signalGraph = module(elm).main;

64+

65+ // make sure the signal graph is actually a signal, extract the visual model,

66+ // and filter out any unused inputs.

67+ var Signal = Elm.Signal(elm);

68+ if (!('recv' in signalGraph)) signalGraph = Signal.constant(signalGraph);

69+ visualModel = signalGraph.value;

70+ inputs = ElmRuntime.filterDeadInputs(inputs);

71+

72+ // Add the visualModel to the DOM

73+ baseNode.appendChild(Render.render(visualModel));

74+

62− if ('Window' in elm) {

75+ if ('Window' in elm) {

63 var w = baseNode.clientWidth;

76 var w = baseNode.clientWidth;

64 if (w !== elm.Window.dimensions.value._0) {

77 if (w !== elm.Window.dimensions.value._0) {

65 notify(elm.Window.dimensions.id,

78 notify(elm.Window.dimensions.id,

66 Elm.Native.Utils(elm).Tuple2(w, baseNode.clientHeight));

79 Elm.Native.Utils(elm).Tuple2(w, baseNode.clientHeight));

67 }

80 }

68− }

81+ }

70− // set up updates so that the DOM is adjusted as necessary.

83+ // set up updates so that the DOM is adjusted as necessary.

71− var update = Render.update;

84+ var update = Render.update;

72− function domUpdate(value) {

85+ function domUpdate(value) {

73 update(baseNode.firstChild, visualModel, value);

86 update(baseNode.firstChild, visualModel, value);

74 visualModel = value;

87 visualModel = value;

75 return value;

88 return value;

76− }

77−

78− signalGraph = A2(Signal.lift, domUpdate, signalGraph);

79− }

80−

81− function send(name, value) {

82− var e = document.createEvent('Event');

83− e.initEvent(name + '_' + elm.id, true, true);

84− e.value = value;

85− document.dispatchEvent(e);

86 }

89 }

87− function recv(name, handler) {

90+

88− document.addEventListener(name + '_' + elm.id, handler);

91+ signalGraph = A2(Signal.lift, domUpdate, signalGraph);

89− }

92+

90−

91 return { send : send, recv : recv };

93 return { send : send, recv : recv };

92};

94};

runtime/Render/Collage.js+11−5

@@ -10,6 +10,7 @@ var newElement = Utils.newElement, addTo = Utils.addTo,

11function trace(ctx, path) {

12 var points = fromList(path);

13+ console.log(points);

13 var i = points.length - 1;

14 var i = points.length - 1;

14 if (i <= 0) return;

15 if (i <= 0) return;

15 ctx.moveTo(points[i]._0, points[i]._1);

16 ctx.moveTo(points[i]._0, points[i]._1);

@@ -88,6 +89,7 @@ function gradient(ctx, grad) {

88}

89}

90function drawShape(redo, ctx, style, path) {

91function drawShape(redo, ctx, style, path) {

92+ console.log(style, path);

91 trace(ctx, path);

93 trace(ctx, path);

92 var sty = style.ctor;

94 var sty = style.ctor;

93 ctx.fillStyle =

95 ctx.fillStyle =

@@ -110,6 +112,7 @@ function renderForm(redo,ctx,form) {

110 ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);

112 ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);

111 ctx.beginPath();

113 ctx.beginPath();

112 var f = form.form;

114 var f = form.form;

115+ console.log(f);

113 switch(f.ctor) {

116 switch(f.ctor) {

114 case 'FPath' : drawLine(ctx, f._0, f._1); break;

117 case 'FPath' : drawLine(ctx, f._0, f._1); break;

115 case 'FShape':

118 case 'FShape':

@@ -123,9 +126,10 @@ function renderForm(redo,ctx,form) {

123}

126}

124

127

125function renderForms(redo, ctx, forms) {

128function renderForms(redo, ctx, forms) {

126− forms = fromList(forms);

129+ var fs = fromList(forms);

130+ console.log(fs);

127− for (var i = forms.length; i--; ) {

131+ for (var i = fs.length; i--; ) {

128− renderForm(redo,ctx,forms[i]);

132+ renderForm(redo,ctx,fs[i]);

129 }

133 }

130}

134}

131

135

@@ -138,10 +142,11 @@ function collageForms(w,h,forms) {

138 canvas.style.display = "block";

142 canvas.style.display = "block";

139 canvas.width = w;

143 canvas.width = w;

140 canvas.height = h;

144 canvas.height = h;

145+ function redo() { renderForms(this,ctx,forms); }

141 if (canvas.getContext) {

146 if (canvas.getContext) {

142 var ctx = canvas.getContext('2d');

147 var ctx = canvas.getContext('2d');

143− function redo() { renderForms(this,ctx,w,h,forms); }

148+ console.log(forms);

144− renderForms(redo,ctx,w,h,forms);

149+ renderForms(redo,ctx,forms);

145 return canvas;

150 return canvas;

146 }

151 }

147 canvas.innerHTML = "Your browser does not support canvas.";

152 canvas.innerHTML = "Your browser does not support canvas.";

@@ -162,6 +167,7 @@ function collageElement(w, h, m, elem) {

162}

167}

163

168

164function render(model) {

169function render(model) {

170+ console.log(model);

165 return collageForms(model.w, model.h, model.forms);

171 return collageForms(model.w, model.h, model.forms);

166}

172}

167

173