3540449 · elk · git.iko.soy

git.iko.soy/elk

Fix behavior of width and height to maintain the dimensions of images when resizing. Move htmlHeight into Utils so it can be used by both Element and Text.

commit3540449119376b1507722d98a6bd4bd984b46e8f authorevancz <info@elm-lang.org> dateTue 12 Mar 2013, 22:59 (14 years ago) parent609dc36

3 files changed+36−25

compare with master

unifiedsplit

libraries/Graphics/Element.elm+15−6 libraries/Native/Graphics/Text.js+5−18 libraries/Native/Utils.js+16−1

libraries/Graphics/Element.elm+15−6

@@ -12,7 +12,7 @@ module Graphics.Element (widthOf, heightOf, sizeOf,

1212 spacer, newElement

1313 ) where

1414

15−import Native.Utils (guid, max)

15+import Native.Utils (guid, max, htmlHeight)

1616import JavaScript as JS

1717import List as List

1818import Graphics.Color as Color

@@ -34,8 +34,17 @@ widthOf e = e.props.width

3434heightOf e = e.props.height

3535sizeOf e = (e.props.width, e.props.height)

3636

37−width w e = let p = e.props in { element=e.element, props={p| width <- w} }

38−height h e = let p = e.props in { element=e.element, props={p| height <- h} }

37+width nw e = let p = e.props

38+ props = case e.element of

39+ Image _ w h _ -> {p| height <- h/w*nw }

40+ RawHtml html -> {p| height <- htmlHeight nw html }

41+ _ -> p

42+ in { element=e.element, props={props| width <- nw} }

43+height nh e = let p = e.props

44+ props = case e.element of

45+ Image _ w h _ -> {p| width <- w/h*nh }

46+ _ -> p

47+ in { element=e.element, props={p| height <- nh} }

3948opacity o e = let p = e.props in { element=e.element, props={p| opacity <- o} }

4049color c e = let p = e.props in

4150 { element=e.element, props={p| color <- Just c} }

@@ -85,9 +94,9 @@ flow dir es =

8594 DIn -> newFlow (List.maximum ws) (List.maximum hs)

8695 DOut -> newFlow (List.maximum ws) (List.maximum hs)

8796

88−above hi lo = newElement (Utils.max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])

89−below lo hi = newElement (Utils.max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])

90−beside lft rht = newElement (widthOf lft + widthOf rht) (Utils.max (heightOf lft) (heightOf rht)) (Flow right [lft,rht])

97+above hi lo = newElement (max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])

98+below lo hi = newElement (max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])

99+beside lft rht = newElement (widthOf lft + widthOf rht) (max (heightOf lft) (heightOf rht)) (Flow right [lft,rht])

91100

92101layers es =

93102 let ws = List.map widthOf es

libraries/Native/Graphics/Text.js+5−18

@@ -7,6 +7,7 @@ Elm.Native.Graphics.Text = function(elm) {

77 if (elm.Native.Graphics.Text) return elm.Native.Graphics.Text;

99 var JS = Elm.JavaScript(elm);

10+ var htmlHeight = Elm.Native.Utils(elm).htmlHeight;

1011 var Color = Elm.Native.Graphics.Color(elm);

1112 var Element = Elm.Graphics.Element(elm);

1213

@@ -82,27 +83,13 @@ Elm.Native.Graphics.Text = function(elm) {

8283 return "<a href='" + toText(href) + "'>" + text + "</a>";

8384 }

8485

85− function htmlHeight(txt, width) {

86− var t = document.createElement('div');

87− t.innerHTML = html;

88− t.style.width = w + "px";

89− t.style.visibility = "hidden";

90− t.style.styleFloat = "left";

91− t.style.cssFloat = "left";

92−

93− document.body.appendChild(t);

94− var h = t.clientHeight

95− document.body.removeChild(t);

96−

97− return h;

98− }

99−

10086 function position(pos) { return function(text) {

10187 var e = {ctor:'RawHtml',

102− _0: '<div style="padding:0;margin:0;text-align:'+pos+'">'+text+'</div>'

103− };

88+ _0: '<div style="padding:0;margin:0;text-align:' +

89+ pos + '">' + text + '</div>'

90+ };

10491 var w = elm.node.clientWidth;

105− return A3(Element.newElement, w, htmlHeight(text, w), e);

92+ return A3(Element.newElement, w, A2(htmlHeight, w, text), e);

10693 }

10794 }

10895

libraries/Native/Utils.js+16−1

@@ -96,6 +96,20 @@ Elm.Native.Utils = function(elm) {

9696 function max(a,b) { return a > b ? a : b }

9797 function min(a,b) { return a < b ? a : b }

9898

99+ function htmlHeight(width, html) {

100+ var t = document.createElement('div');

101+ t.innerHTML = html;

102+ t.style.width = width + "px";

103+ t.style.visibility = "hidden";

104+ t.style.styleFloat = "left";

105+ t.style.cssFloat = "left";

106+

107+ document.body.appendChild(t);

108+ var h = t.clientHeight

109+ document.body.removeChild(t);

110+ return h;

111+ }

112+

99113 return elm.Native.Utils = {

100114 eq:eq,

101115 compare:compare,

@@ -107,6 +121,7 @@ Elm.Native.Utils = function(elm) {

107121 insert: insert,

108122 guid: guid,

109123 max : F2(max),

110− min : F2(min)

124+ min : F2(min),

125+ htmlHeight: F2(htmlHeight)

111126 };

112127};