git.iko.soy/elk
on master help sign in
Fix rounding error in changing width and height of images
e6e038dEvan Czaplicki
libraries/Graphics/Element.elm+22−19
compare with master
unifiedsplit
@@ -3,7 +3,8 @@ module Graphics.Element where
3
3
4import open Basics
4import open Basics
5import Native.Utils
5import Native.Utils
6+import JavaScript as JS
6−import open JavaScript
7+import JavaScript (JSString)
7import List as List
8import List as List
8import open Color
9import open Color
9import Maybe (Maybe, Just, Nothing)
10import Maybe (Maybe, Just, Nothing)
@@ -35,20 +36,22 @@ sizeOf e = (e.props.width, e.props.height)
35
36
36-- Create an `Element` with a given width.
37-- Create an `Element` with a given width.
37width : Int -> Element -> Element
38width : Int -> Element -> Element
39+width nw e =
38−width nw e = let p = e.props
40+ let p = e.props
39− props = case e.element of
41+ props = case e.element of
40− Image _ w h _ -> {p| height <- h `div` w * nw }
42+ Image _ w h _ -> {p| height <- round (toFloat h / toFloat w * toFloat nw) }
41− RawHtml html -> {p| height <- let (w,h) = Native.Utils.htmlHeight nw html in h}
43+ RawHtml html -> {p| height <- snd (Native.Utils.htmlHeight nw html)}
42− _ -> p
44+ _ -> p
43− in { element=e.element, props={ props | width <- nw } }
45+ in { element=e.element, props={ props | width <- nw } }
44
46
45-- Create an `Element` with a given height.
47-- Create an `Element` with a given height.
46height : Int -> Element -> Element
48height : Int -> Element -> Element
49+height nh e =
47−height nh e = let p = e.props
50+ let p = e.props
48− props = case e.element of
51+ props = case e.element of
49− Image _ w h _ -> {p| width <- w `div` h * nh }
52+ Image _ w h _ -> {p| width <- round (toFloat w / toFloat h * toFloat nh) }
50− _ -> p
53+ _ -> p
51− in { element=e.element, props={p| height <- nh} }
54+ in { element=e.element, props={ p | height <- nh} }
52
55
53-- Create an `Element` with a new width and height.
56-- Create an `Element` with a new width and height.
54size : Int -> Int -> Element -> Element
57size : Int -> Int -> Element -> Element
@@ -71,14 +74,14 @@ color c e = let p = e.props in
71-- with a link lik this: `/facts-about-animals.elm#all-about-badgers`
74-- with a link lik this: `/facts-about-animals.elm#all-about-badgers`
72tag : String -> Element -> Element
75tag : String -> Element -> Element
73tag name e = let p = e.props in
76tag name e = let p = e.props in
74− { element=e.element, props={p | tag <- fromString name} }
77+ { element=e.element, props={p | tag <- JS.fromString name} }
75
78
76-- Create an `Element` that is a hyper-link.
79-- Create an `Element` that is a hyper-link.
77link : String -> Element -> Element
80link : String -> Element -> Element
78link href e = let p = e.props in
81link href e = let p = e.props in
79− { element=e.element, props={p | href <- fromString href} }
82+ { element=e.element, props={p | href <- JS.fromString href} }
80
83
81−emptyStr = fromString ""
84+emptyStr = JS.fromString ""
82newElement w h e =
85newElement w h e =
83 { props = Properties (Native.Utils.guid ()) w h 1 Nothing emptyStr emptyStr (), element = e }
86 { props = Properties (Native.Utils.guid ()) w h 1 Nothing emptyStr emptyStr (), element = e }
84
87
@@ -94,12 +97,12 @@ data ImageStyle = Plain | Fitted | Cropped (Int,Int) | Tiled
94
97
95-- Create an image given a width, height, and image source.
98-- Create an image given a width, height, and image source.
96image : Int -> Int -> String -> Element
99image : Int -> Int -> String -> Element
97−image w h src = newElement w h (Image Plain w h (fromString src))
100+image w h src = newElement w h (Image Plain w h (JS.fromString src))
98
101
99-- Create a fitted image given a width, height, and image source.
102-- Create a fitted image given a width, height, and image source.
100-- This will crop the picture to best fill the given dimensions.
103-- This will crop the picture to best fill the given dimensions.
101fittedImage : Int -> Int -> String -> Element
104fittedImage : Int -> Int -> String -> Element
102−fittedImage w h src = newElement w h (Image Fitted w h (fromString src))
105+fittedImage w h src = newElement w h (Image Fitted w h (JS.fromString src))
103
106
104-- Create a cropped image. Take a rectangle out of the picture starting
107-- Create a cropped image. Take a rectangle out of the picture starting
105-- at the given top left coordinate. If you have a 140-by-140 image,
108-- at the given top left coordinate. If you have a 140-by-140 image,
@@ -108,11 +111,11 @@ fittedImage w h src = newElement w h (Image Fitted w h (fromString src))
108-- croppedImage (20,20) 100 100 "yogi.jpg"
111-- croppedImage (20,20) 100 100 "yogi.jpg"
109croppedImage : (Int,Int) -> Int -> Int -> String -> Element
112croppedImage : (Int,Int) -> Int -> Int -> String -> Element
110croppedImage pos w h src =
113croppedImage pos w h src =
111− newElement w h (Image (Cropped pos) w h (fromString src))
114+ newElement w h (Image (Cropped pos) w h (JS.fromString src))
112
115
113tiledImage : Int -> Int -> String -> Element
116tiledImage : Int -> Int -> String -> Element
114tiledImage w h src =
117tiledImage w h src =
115− newElement w h (Image Tiled w h (fromString src))
118+ newElement w h (Image Tiled w h (JS.fromString src))
116
119
117markdown : Element
120markdown : Element
118markdown = Native.Utils.undefined
121markdown = Native.Utils.undefined