@@ -18,7 +18,9 @@ var Foreign = function() {
1818 function castJSElementToElement(w) {
1919 return function(h) {
2020 return function(node) {
21− return ["Element",Guid.guid(),["EHtml",node],w,h,1,Nothing,Nothing];
21+ return ["Element",Guid.guid(),
22+ ["EExternalHtml",node],
23+ w,h,1,Nothing,Nothing];
2224 }
2325 }
2426 }
@@ -292,8 +294,8 @@ var Value = function(){
292294 function getTextSize(w,h,txt) {
293295 var t = document.createElement('div');
294296 t.innerHTML = txt;
295− t.style.width = w + "px";
296− //t.style.height = h + 'px';
297+ t.style.textAlign = 'left';
298+ if (w > 0) { t.style.width = w + "px"; }
297299
298300 t.style.visibility = "hidden";
299301 t.style.styleFloat = "left";
@@ -305,7 +307,7 @@ var Value = function(){
305307 var realH = cStyle.getPropertyValue("height").slice(0,-2) - 0;
306308 document.body.removeChild(t);
307309 delete t;
308− return [realW,Math.max(h,realH)];
310+ return [Math.ceil(realW),Math.ceil(Math.max(h,realH))];
309311 }
310312
311313 function getSize(e) {
@@ -1540,29 +1542,29 @@ ElmCode.Graphics.Element = function() {
15401542 function heightOf_53(e) { return ~~e[4]; }
15411543 function sizeOf_54(e) { return["Tuple2", ~~e[3], ~~e[4]] }
15421544 function text_56(txt) {
1543− var p = Value.getTextSize(-1,-1,txt);
1545+ var p = Value.getTextSize(0,0,txt);
15441546 return basicNewElement(EText_39("left")(txt), p[0], p[1])
15451547 }
15461548 function plainText(str) {
15471549 var txt = Value.toText(str);
1548− var p = Value.getTextSize(-1,-1,txt);
1550+ var p = Value.getTextSize(0,0,txt);
15491551 return basicNewElement(EText_39("left")(txt),p[0],p[1])
15501552 }
15511553 function asText(v) {
15521554 var txt = Value.show(v);
1553− var p = Value.getTextSize(-1,-1,txt);
1555+ var p = Value.getTextSize(0,0,txt);
15541556 return basicNewElement(EText_39("left")(txt),p[0],p[1])
15551557 }
15561558 function centeredText(txt) {
1557− var p = Value.getTextSize(-1,-1,txt);
1559+ var p = Value.getTextSize(0,0,txt);
15581560 return basicNewElement(EText_39("center")(txt),p[0],p[1])
15591561 }
15601562 function justifiedText(txt) {
1561− var p = Value.getTextSize(-1,-1,txt);
1563+ var p = Value.getTextSize(0,0,txt);
15621564 return basicNewElement(EText_39("justify")(txt),p[0],p[1])
15631565 }
15641566 function rightedText(txt) {
1565− var p = Value.getTextSize(-1,-1,txt);
1567+ var p = Value.getTextSize(0,0,txt);
15661568 return basicNewElement(EText_39("right")(txt),p[0],p[1])
15671569 }
15681570 function image_57(w) {
@@ -1572,6 +1574,22 @@ ElmCode.Graphics.Element = function() {
15721574 }
15731575 }
15741576 }
1577+ function images(srcs) {
1578+ var pics = Elm.Input(spacer_66(0)(0));
1579+ var update = Elm.Lift(function(src) {
1580+ src = Foreign.JavaScript.castStringToJSString(src);
1581+ var img = new Image();
1582+ img.onload = function() {
1583+ console.log('loaded');
1584+ Dispatcher.notify(pics.id,
1585+ image_57(this.width)(this.height)(src));
1586+ };
1587+ img.src = src;
1588+ }, [srcs]);
1589+ var combine = Elm.Lift(function(x) { return function(y) { return x; } },
1590+ [pics,update]);
1591+ return combine;
1592+ }
15751593 function video_58(w) {
15761594 return function(h) {
15771595 return function(src) {
@@ -1806,7 +1824,7 @@ ElmCode.Graphics.Element = function() {
18061824 }
18071825 }
18081826 return{left:left_6, right:right_7, down:down_8, up:up_9, inward:inward_10, outward:outward_11, topLeft:topLeft_22, topRight:topRight_23, bottomLeft:bottomLeft_24, bottomRight:bottomRight_25, midLeft:midLeft_26, midRight:midRight_27, midTop:midTop_28, midBottom:midBottom_29, middle:middle_30, middleAt:middleAt, topLeftAt:topLeftAt_31, topRightAt:topRightAt_32, bottomLeftAt:bottomLeftAt_33, bottomRightAt:bottomRightAt_34, absolute:absolute_35, relative:relative_36, width:width_47, height:height_48, size:size_49, opacity:opacity_50,
1809− color:color_51, link:link, widthOf:widthOf_52, heightOf:heightOf_53, sizeOf:sizeOf_54, text:text_56, asText:asText, plainText:plainText, centeredText:centeredText, justifiedText:justifiedText, rightedText:rightedText, image:image_57, video:video_58, fittedImage:fittedImage_59, flow:flow_60, above:above_61, below:below_62, beside:beside_63, layers:layers_64, collage:collage_65, spacer:spacer_66, container:container_67, line:line_76, segment:segment_77, polygon:polygon_79, rect:rect_80, oval:oval_81, circle:circle_82, ngon:ngon_83, solid:solid_89, dotted:dotted_90, dashed:dashed_91, customLine:customLine_92, filled:filled_93,
1827+ color:color_51, link:link, widthOf:widthOf_52, heightOf:heightOf_53, sizeOf:sizeOf_54, text:text_56, asText:asText, plainText:plainText, centeredText:centeredText, justifiedText:justifiedText, rightedText:rightedText, image:image_57, images:images, video:video_58, fittedImage:fittedImage_59, flow:flow_60, above:above_61, below:below_62, beside:beside_63, layers:layers_64, collage:collage_65, spacer:spacer_66, container:container_67, line:line_76, segment:segment_77, polygon:polygon_79, rect:rect_80, oval:oval_81, circle:circle_82, ngon:ngon_83, solid:solid_89, dotted:dotted_90, dashed:dashed_91, customLine:customLine_92, filled:filled_93,
18101828 outlined:outlined_94, customOutline:customOutline_95, textured:textured, sprite:sprite_96, toForm:toForm_97, rotate:rotate_98, scale:scale_99, move:move_100}
18111829}();
18121830var Text = function() {
@@ -2016,9 +2034,15 @@ function render(elem) {
20162034 case "EContainer": e = container(elem[2][1],elem[2][2]); break;
20172035 case "EHtml":
20182036 e = elem[2][1];
2019− var p = Value.getExcess(e);
2020− elem[3] -= p[0];
2021− elem[4] -= p[1];
2037+ if (e.type !== 'button') {
2038+ var p = Value.getExcess(e);
2039+ elem[3] -= p[0];
2040+ elem[4] -= p[1];
2041+ }
2042+ break;
2043+ case "EExternalHtml":
2044+ e = newElement('div');
2045+ addTo(e, elem[2][1]);
20222046 break;
20232047 }
20242048 e.id = elem[1];
@@ -2092,9 +2116,21 @@ function update(node,curr,next) {
20922116 case "EEmpty":
20932117 break;
20942118 case "EHtml":
2095− var p = Value.getExcess(node);
2096− next[3] -= p[0];
2097− next[4] -= p[1];
2119+ if (next[1] !== curr[1]) {
2120+ var e = render(next);
2121+ node.parentNode.replaceChild(e,node);
2122+ node = e;
2123+ }
2124+ if (e.type !== 'button') {
2125+ var p = Value.getExcess(node);
2126+ next[3] -= p[0];
2127+ next[4] -= p[1];
2128+ }
2129+ break;
2130+ case "EExternalHtml":
2131+ if (next[1] !== curr[1])
2132+ node.parentNode.replaceChild(render(next),node);
2133+ break;
20982134 }
20992135 if (next[3] !== curr[3]) node.style.width = (~~next[3]) + 'px';
21002136 if (next[4] !== curr[4]) node.style.height = (~~next[4]) + 'px';
@@ -2136,7 +2172,8 @@ var Elm = function() {
21362172 this.id = Guid.guid();
21372173 this.value = null;
21382174 this.kids = [];
2139− this.inbox = {};
2175+ this.count = 0;
2176+ this.changed = false;
21402177
21412178 args.reverse();
21422179 this.recalc = function() {
@@ -2149,16 +2186,13 @@ var Elm = function() {
21492186 this.recalc();
21502187
21512188 this.recv = function(timestep, changed, parentID) {
2152− if (!this.inbox.hasOwnProperty(timestep)) {
2153− this.inbox[timestep] = { changed: false, count: 0 };
2154− }
2155− var box = this.inbox[timestep];
2156− box.count += 1;
2157− if (changed) { box.changed = true; }
2158− if (box.count == args.length) {
2159− if (box.changed) { this.recalc() }
2160− send(this, timestep, box.changed);
2161− delete this.inbox[timestep];
2189+ this.count += 1;
2190+ if (changed) { this.changed = true; }
2191+ if (this.count == args.length) {
2192+ if (this.changed) { this.recalc() }
2193+ send(this, timestep, this.changed);
2194+ this.changed = false;
2195+ this.count = 0;
21622196 }
21632197 };
21642198 for (var i = args.length; i--; ) {
@@ -2209,12 +2243,18 @@ var Elm = function() {
22092243 this.id = Guid.guid();
22102244 this.value = s2.value;
22112245 this.kids = [];
2212− this.inbox = {};
2246+ this.count = 0;
2247+ this.changed = false;
22132248
22142249 this.recv = function(timestep, changed, parentID) {
2215− var chng = changed && parentID === s1.id;
2216− if (chng) { this.value = s2.value; }
2217− send(this, timestep, chng);
2250+ if (parentID === s1.id) this.changed = changed;
2251+ this.count += 1;
2252+ if (this.count == 2) {
2253+ if (this.changed) { this.value = s2.value; }
2254+ send(this, timestep, this.changed);
2255+ this.count = 0;
2256+ this.changed = false;
2257+ }
22182258 };
22192259 s1.kids.push(this);
22202260 s2.kids.push(this);
@@ -2294,6 +2334,10 @@ var Dispatcher = function() {
22942334 return {initialize:initialize, notify:notify, inputs:inputs};
22952335}();
22962336var Signal = function() {
2337+ function wrap(elem) {
2338+ var p = Value.getSize(elem);
2339+ return ["Element", Guid.guid(), ["EHtml",elem], p[0], p[1], 1, Nothing, Nothing];
2340+ }
22972341 function toElmString(str) {
22982342 var out = ["Nil"];
22992343 for (var i = str.length; i--; ) {
@@ -2366,12 +2410,13 @@ var Signal = function() {
23662410 this.removeEventListener('mousemove',arguments.callee,false);
23672411 });
23682412 var clickedOn = function(elem) {
2413+ var node = Render.render(elem);
23692414 var click = Elm.Input(false);
2370− addListener(elem, 'click', function(e) {
2415+ addListener(node, 'click', function(e) {
23712416 Dispatcher.notify(click.id, true);
23722417 Dispatcher.notify(click.id, false);
23732418 });
2374− return Value.Tuple(elem, click);
2419+ return Value.Tuple(wrap(node), click);
23752420 };
23762421 return {position: position,
23772422 x:x,
@@ -2536,10 +2581,6 @@ var Signal = function() {
25362581 return { inRange:inRange, randomize:randomize };
25372582 }();
25382583 var Input = function() {
2539− function wrap(elem) {
2540− var p = Value.getSize(elem);
2541− return ["Element", Guid.guid(), ["EHtml",elem], p[0], p[1], 1, Nothing, Nothing];
2542− }
25432584 var newTextInput = function(elem, ghostText) {
25442585 elem.placeholder = Foreign.JavaScript.castStringToJSString(ghostText);
25452586 var str = Elm.Input(["Nil"]);