git.iko.soy/elk
on master help sign in
Fix up graphics libraries:

- All basic elements can now be displayed and updated. Updates no longer rebuild the whole scene; instead they only replace as necessary. - Add `container` primitive which allows people to position Elements in a more flexible way. - Collages can now handle sprites, textures, and Elements! Still need to work on making Signal.Input play nice with the new Graphics libs.

commit2f5d4459ef248ea1619edc160cddc85aca1a35a9 authorevancz <info@elm-lang.org> dateSat 1 Sep 2012, 16:38 (14 years ago) parent1501160
3 files changed+72−21
compare with master
unifiedsplit
core-js/Graphics/Collage.js+5−5 core-js/Graphics/Element.js+15−10 core-js/Graphics/Render.js+52−6
core-js/Graphics/Collage.js+5−5
@@ -146,11 +146,11 @@ function collageElement(w,h,theta,scale,x,y,elem) {
146146 var r = theta === (~~theta) ? "" : "rotate(" + theta*360 + "deg)";
147147 var s = scale === 1 ? "" : "scale(" + scale + "," + scale + ")";
148148 var transforms = t + " " + s + " " + r;
149− e.style['-ms-transform'] = transforms;
150− e.style['-webkit-transform'] = transforms;
151− e.style['-o-transform'] = transforms;
152− e.style['-moz-transform'] = transforms;
153− e.style['transform'] = transforms;
149+ e.style.transform = transforms;
150+ e.style.msTransform = transforms;
151+ e.style.MozTransform = transforms;
152+ e.style.webkitTransform = transforms;
153+ e.style.OTransform = transforms;
154154 var div = Render.newElement('div');
155155 Render.addTo(div,e);
156156 div.style.width = (~~w) + "px";
core-js/Graphics/Element.js+15−10
@@ -60,7 +60,7 @@ ElmCode.Graphics.Element = function() {
6060 }
6161 }
6262 function EImage_40(a1) {
63− return["EImage", a1]
63+ return["EImage", Foreign.JavaScript.castStringToJSString(a1)]
6464 }
6565 function EVideo_41(a1) {
6666 return["EVideo", a1]
@@ -131,7 +131,7 @@ ElmCode.Graphics.Element = function() {
131131 function FImage_87(a1) {
132132 return function(a2) {
133133 return function(a3) {
134− return["FImage", a1, a2, a3]
134+ return["FImage", a1, a2, Foreign.JavaScript.castStringToJSString(a3)]
135135 }
136136 }
137137 }
@@ -148,11 +148,16 @@ ElmCode.Graphics.Element = function() {
148148 var topRight_23 = Position_17(Far_16)(Near_14);
149149 var bottomLeft_24 = Position_17(Near_14)(Far_16);
150150 var bottomRight_25 = Position_17(Far_16)(Far_16);
151− var midLeft_26 = Position_17(Mid_15)(Near_14);
152− var midRight_27 = Position_17(Mid_15)(Far_16);
153− var midTop_28 = Position_17(Near_14)(Mid_15);
154− var midBottom_29 = Position_17(Far_16)(Mid_15);
151+ var midLeft_26 = Position_17(Near_14)(Mid_15);
152+ var midRight_27 = Position_17(Far_16)(Mid_15);
153+ var midTop_28 = Position_17(Mid_15)(Near_14);
154+ var midBottom_29 = Position_17(Mid_15)(Far_16);
155155 var middle_30 = Position_17(Mid_15)(Mid_15);
156+ function middleAt(a1) {
157+ return function(a2) {
158+ return["PositionAt", a1, a2]
159+ }
160+ }
156161 var topLeftAt_31 = PositionTL_18;
157162 var topRightAt_32 = PositionTR_19;
158163 var bottomLeftAt_33 = PositionBL_20;
@@ -375,9 +380,9 @@ ElmCode.Graphics.Element = function() {
375380 return newElement_38(EEmpty_45)(w_166)(h_167)(1)(Nothing)
376381 }
377382 }
378− function container_67(pos_168) {
379− return function(w_169) {
380− return function(h_170) {
383+ function container_67(w_169) {
384+ return function(h_170) {
385+ return function(pos_168) {
381386 return function(e_171) {
382387 return newElement_38(EContainer_46(pos_168)(e_171))(w_169)(h_170)(1)(Nothing)
383388 }
@@ -539,7 +544,7 @@ ElmCode.Graphics.Element = function() {
539544 }
540545 }
541546 }
542− 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, 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,
547+ 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,
543548 color:color_51, widthOf:widthOf_52, heightOf:heightOf_53, sizeOf:sizeOf_54, text:text_56, 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,
544549 outlined:outlined_94, customOutline:customOutline_95, textured:textured, sprite:sprite_96, toForm:toForm_97, rotate:rotate_98, scale:scale_99, move:move_100}
545550}();
core-js/Graphics/Render.js+52−6
@@ -21,8 +21,8 @@ function makeText(pos,txt) {
2121
2222function image(src) {
2323 var img = newElement('img');
24− img.src = Value.toText(src);
25− img.name = img.src;
24+ img.src = src;
25+ img.name = src;
2626 return img;
2727}
2828
@@ -50,7 +50,7 @@ function fittedImage(w,h,src) {
5050 0,0, canvas.width, canvas.height);
5151 }
5252 };
53− img.src = Value.toText(src);
53+ img.src = src;
5454 return canvas;
5555};
5656
@@ -102,6 +102,49 @@ function flow(dir,elist) {
102102 };
103103};
104104
105+function toPos(pos) {
106+ switch(pos[0]) {
107+ case "Absolute": return pos[1] + "px";
108+ case "Relative": return (pos[1] * 100) + "%";
109+ }
110+}
111+
112+function setPos(pos,e) {
113+ e.style.position = 'absolute';
114+ e.style.margin = 'auto';
115+ switch(pos[0]) {
116+ case "Position":
117+ if (pos[1][0] !== "Far") e.style.left = 0;
118+ if (pos[1][0] !== "Near") e.style.right = 0;
119+ if (pos[2][0] !== "Far") e.style.top = 0;
120+ if (pos[2][0] !== "Near") e.style.bottom = 0;
121+ break;
122+ case "PositionAt":
123+ e.style.top = toPos(pos[2]);
124+ e.style.left = toPos(pos[1]);
125+ var shift = "translate(" + (-elem[3]/2) + "px," + (-elem[4]/2) + "px)";
126+ e.style.transform = shift;
127+ e.style.msTransform = shift;
128+ e.style.MozTransform = shift;
129+ e.style.webkitTransform = shift;
130+ e.style.OTransform = shift;
131+ break;
132+ default:
133+ var p = pos[0].slice(-2);
134+ e.style[p[0] === "T" ? 'top' : 'bottom'] = toPos(pos[2]);
135+ e.style[p[1] === "L" ? 'left' : 'right'] = toPos(pos[1]);
136+ }
137+}
138+
139+function container(pos,elem) {
140+ var e = render(elem);
141+ setPos(pos,e);
142+ var div = newElement('div');
143+ div.style.position = "relative";
144+ addTo(div,e);
145+ return div;
146+};
147+
105148function render(elem) {
106149 var e = {};
107150 switch(elem[2][0]) {
@@ -112,15 +155,14 @@ function render(elem) {
112155 case "EFlow": e = flow(elem[2][1][0],elem[2][2]); break;
113156 case "ECollage": e = Collage.collage(elem[2][1],elem[2][2],elem[2][3]); break;
114157 case "EEmpty": e = newElement('div'); break;
115− case "EContainer":
116− e = newElement('div');
158+ case "EContainer": e = container(elem[2][1],elem[2][2]); break;
117159 }
118160 e.id = elem[1];
119161 e.style.width = (~~elem[3]) + 'px';
120162 e.style.height = (~~elem[4]) + 'px';
121163 if (elem[5] !== 1) { e.style.opacity = elem[5]; }
122164 if (elem[6][0] === "Just") {
123− e.style.color = ElmCode.Graphics.Color.extract(elem[6][1]);
165+ e.style.backgroundColor = ElmCode.Graphics.Color.extract(elem[6][1]);
124166 }
125167 return e;
126168};
@@ -159,7 +201,11 @@ function update(node,curr,next) {
159201 for (var i = kids.length ; i-- ; ) {
160202 update(kids[i],currs[i],nexts[i]);
161203 }
204+ break;
162205 case "EContainer":
206+ update(node.childNodes[0],currE[2],nextE[2]);
207+ setPos(nextE[1],node.childNodes[0]);
208+ break;
163209 case "EEmpty":
164210 }
165211 if (next[3] !== curr[3]) node.style.width = (~~next[3]) + 'px';