@@ -18,7 +18,9 @@ var Foreign = function() {
18 function castJSElementToElement(w) {
18 function castJSElementToElement(w) {
19 return function(h) {
19 return function(h) {
20 return function(node) {
20 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];
@@ -292,8 +294,8 @@ var Value = function(){
292 function getTextSize(w,h,txt) {
294 function getTextSize(w,h,txt) {
293 var t = document.createElement('div');
295 var t = document.createElement('div');
294 t.innerHTML = txt;
296 t.innerHTML = txt;
297+ t.style.textAlign = 'left';
295− t.style.width = w + "px";
298+ if (w > 0) { t.style.width = w + "px"; }
296− //t.style.height = h + 'px';
298 t.style.visibility = "hidden";
300 t.style.visibility = "hidden";
299 t.style.styleFloat = "left";
301 t.style.styleFloat = "left";
@@ -305,7 +307,7 @@ var Value = function(){
305 var realH = cStyle.getPropertyValue("height").slice(0,-2) - 0;
307 var realH = cStyle.getPropertyValue("height").slice(0,-2) - 0;
306 document.body.removeChild(t);
308 document.body.removeChild(t);
307 delete t;
309 delete t;
308− return [realW,Math.max(h,realH)];
310+ return [Math.ceil(realW),Math.ceil(Math.max(h,realH))];
311 function getSize(e) {
313 function getSize(e) {
@@ -1540,29 +1542,29 @@ ElmCode.Graphics.Element = function() {
1540 function heightOf_53(e) { return ~~e[4]; }
1542 function heightOf_53(e) { return ~~e[4]; }
1541 function sizeOf_54(e) { return["Tuple2", ~~e[3], ~~e[4]] }
1543 function sizeOf_54(e) { return["Tuple2", ~~e[3], ~~e[4]] }
1542 function text_56(txt) {
1544 function text_56(txt) {
1543− var p = Value.getTextSize(-1,-1,txt);
1545+ var p = Value.getTextSize(0,0,txt);
1544 return basicNewElement(EText_39("left")(txt), p[0], p[1])
1546 return basicNewElement(EText_39("left")(txt), p[0], p[1])
1546 function plainText(str) {
1548 function plainText(str) {
1547 var txt = Value.toText(str);
1549 var txt = Value.toText(str);
1548− var p = Value.getTextSize(-1,-1,txt);
1550+ var p = Value.getTextSize(0,0,txt);
1549 return basicNewElement(EText_39("left")(txt),p[0],p[1])
1551 return basicNewElement(EText_39("left")(txt),p[0],p[1])
1551 function asText(v) {
1553 function asText(v) {
1552 var txt = Value.show(v);
1554 var txt = Value.show(v);
1553− var p = Value.getTextSize(-1,-1,txt);
1555+ var p = Value.getTextSize(0,0,txt);
1554 return basicNewElement(EText_39("left")(txt),p[0],p[1])
1556 return basicNewElement(EText_39("left")(txt),p[0],p[1])
1556 function centeredText(txt) {
1558 function centeredText(txt) {
1557− var p = Value.getTextSize(-1,-1,txt);
1559+ var p = Value.getTextSize(0,0,txt);
1558 return basicNewElement(EText_39("center")(txt),p[0],p[1])
1560 return basicNewElement(EText_39("center")(txt),p[0],p[1])
1560 function justifiedText(txt) {
1562 function justifiedText(txt) {
1561− var p = Value.getTextSize(-1,-1,txt);
1563+ var p = Value.getTextSize(0,0,txt);
1562 return basicNewElement(EText_39("justify")(txt),p[0],p[1])
1564 return basicNewElement(EText_39("justify")(txt),p[0],p[1])
1564 function rightedText(txt) {
1566 function rightedText(txt) {
1565− var p = Value.getTextSize(-1,-1,txt);
1567+ var p = Value.getTextSize(0,0,txt);
1566 return basicNewElement(EText_39("right")(txt),p[0],p[1])
1568 return basicNewElement(EText_39("right")(txt),p[0],p[1])
1568 function image_57(w) {
1570 function image_57(w) {
@@ -1572,6 +1574,22 @@ ElmCode.Graphics.Element = function() {
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));
1589+ var combine = Elm.Lift(function(x) { return function(y) { return x; } },
1575 function video_58(w) {
1593 function video_58(w) {
1576 return function(h) {
1594 return function(h) {
1577 return function(src) {
1595 return function(src) {
@@ -1806,7 +1824,7 @@ ElmCode.Graphics.Element = function() {
1808 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,
1826 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,
1810 outlined:outlined_94, customOutline:customOutline_95, textured:textured, sprite:sprite_96, toForm:toForm_97, rotate:rotate_98, scale:scale_99, move:move_100}
1828 outlined:outlined_94, customOutline:customOutline_95, textured:textured, sprite:sprite_96, toForm:toForm_97, rotate:rotate_98, scale:scale_99, move:move_100}
1812var Text = function() {
1830var Text = function() {
@@ -2016,9 +2034,15 @@ function render(elem) {
2016 case "EContainer": e = container(elem[2][1],elem[2][2]); break;
2034 case "EContainer": e = container(elem[2][1],elem[2][2]); break;
2017 case "EHtml":
2035 case "EHtml":
2018 e = elem[2][1];
2036 e = elem[2][1];
2037+ if (e.type !== 'button') {
2019− var p = Value.getExcess(e);
2038+ var p = Value.getExcess(e);
2020− elem[3] -= p[0];
2039+ elem[3] -= p[0];
2021− elem[4] -= p[1];
2040+ elem[4] -= p[1];
2043+ case "EExternalHtml":
2044+ e = newElement('div');
2045+ addTo(e, elem[2][1]);
2024 e.id = elem[1];
2048 e.id = elem[1];
@@ -2092,9 +2116,21 @@ function update(node,curr,next) {
2092 case "EEmpty":
2116 case "EEmpty":
2094 case "EHtml":
2118 case "EHtml":
2119+ if (next[1] !== curr[1]) {
2120+ var e = render(next);
2121+ node.parentNode.replaceChild(e,node);
2124+ if (e.type !== 'button') {
2095− var p = Value.getExcess(node);
2125+ var p = Value.getExcess(node);
2096− next[3] -= p[0];
2126+ next[3] -= p[0];
2097− next[4] -= p[1];
2127+ next[4] -= p[1];
2130+ case "EExternalHtml":
2131+ if (next[1] !== curr[1])
2132+ node.parentNode.replaceChild(render(next),node);
2099 if (next[3] !== curr[3]) node.style.width = (~~next[3]) + 'px';
2135 if (next[3] !== curr[3]) node.style.width = (~~next[3]) + 'px';
2100 if (next[4] !== curr[4]) node.style.height = (~~next[4]) + 'px';
2136 if (next[4] !== curr[4]) node.style.height = (~~next[4]) + 'px';
@@ -2136,7 +2172,8 @@ var Elm = function() {
2136 this.id = Guid.guid();
2172 this.id = Guid.guid();
2137 this.value = null;
2173 this.value = null;
2138 this.kids = [];
2174 this.kids = [];
2139− this.inbox = {};
2175+ this.count = 0;
2176+ this.changed = false;
2141 args.reverse();
2178 args.reverse();
2142 this.recalc = function() {
2179 this.recalc = function() {
@@ -2149,16 +2186,13 @@ var Elm = function() {
2149 this.recalc();
2186 this.recalc();
2151 this.recv = function(timestep, changed, parentID) {
2188 this.recv = function(timestep, changed, parentID) {
2152− if (!this.inbox.hasOwnProperty(timestep)) {
2153− this.inbox[timestep] = { changed: false, count: 0 };
2155− var box = this.inbox[timestep];
2156− box.count += 1;
2189+ this.count += 1;
2157− if (changed) { box.changed = true; }
2190+ if (changed) { this.changed = true; }
2158− if (box.count == args.length) {
2191+ if (this.count == args.length) {
2159− if (box.changed) { this.recalc() }
2192+ if (this.changed) { this.recalc() }
2160− send(this, timestep, box.changed);
2193+ send(this, timestep, this.changed);
2161− delete this.inbox[timestep];
2194+ this.changed = false;
2164 for (var i = args.length; i--; ) {
2198 for (var i = args.length; i--; ) {
@@ -2209,12 +2243,18 @@ var Elm = function() {
2209 this.id = Guid.guid();
2243 this.id = Guid.guid();
2210 this.value = s2.value;
2244 this.value = s2.value;
2211 this.kids = [];
2245 this.kids = [];
2212− this.inbox = {};
2246+ this.count = 0;
2247+ this.changed = false;
2214 this.recv = function(timestep, changed, parentID) {
2249 this.recv = function(timestep, changed, parentID) {
2215− var chng = changed && parentID === s1.id;
2250+ if (parentID === s1.id) this.changed = changed;
2252+ if (this.count == 2) {
2216− if (chng) { this.value = s2.value; }
2253+ if (this.changed) { this.value = s2.value; }
2217− send(this, timestep, chng);
2254+ send(this, timestep, this.changed);
2256+ this.changed = false;
2219 s1.kids.push(this);
2259 s1.kids.push(this);
2220 s2.kids.push(this);
2260 s2.kids.push(this);
@@ -2294,6 +2334,10 @@ var Dispatcher = function() {
2294 return {initialize:initialize, notify:notify, inputs:inputs};
2334 return {initialize:initialize, notify:notify, inputs:inputs};
2296var Signal = function() {
2336var 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];
2297 function toElmString(str) {
2341 function toElmString(str) {
2298 var out = ["Nil"];
2342 var out = ["Nil"];
2299 for (var i = str.length; i--; ) {
2343 for (var i = str.length; i--; ) {
@@ -2366,12 +2410,13 @@ var Signal = function() {
2366 this.removeEventListener('mousemove',arguments.callee,false);
2410 this.removeEventListener('mousemove',arguments.callee,false);
2368 var clickedOn = function(elem) {
2412 var clickedOn = function(elem) {
2413+ var node = Render.render(elem);
2369 var click = Elm.Input(false);
2414 var click = Elm.Input(false);
2370− addListener(elem, 'click', function(e) {
2415+ addListener(node, 'click', function(e) {
2371 Dispatcher.notify(click.id, true);
2416 Dispatcher.notify(click.id, true);
2372 Dispatcher.notify(click.id, false);
2417 Dispatcher.notify(click.id, false);
2374− return Value.Tuple(elem, click);
2419+ return Value.Tuple(wrap(node), click);
2376 return {position: position,
2421 return {position: position,
@@ -2536,10 +2581,6 @@ var Signal = function() {
2536 return { inRange:inRange, randomize:randomize };
2581 return { inRange:inRange, randomize:randomize };
2538 var Input = function() {
2583 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];
2543 var newTextInput = function(elem, ghostText) {
2584 var newTextInput = function(elem, ghostText) {
2544 elem.placeholder = Foreign.JavaScript.castStringToJSString(ghostText);
2585 elem.placeholder = Foreign.JavaScript.castStringToJSString(ghostText);
2545 var str = Elm.Input(["Nil"]);
2586 var str = Elm.Input(["Nil"]);