git.iko.soy/elk
on 609dc36 help sign in
elk/libraries/Graphics/Element.elm
127 lines 4.9 kB history raw
2module Graphics.Element (widthOf, heightOf, sizeOf,
3 width, height, opacity, color, tag, link,
4 image, fittedImage, croppedImage,
5 flow, up, down, left, right, inward, outward,
6 above, below, beside, layers,
7 container, absolute, relative,
8 middle, topLeft, topRight, bottomLeft, bottomRight,
9 midLeft, midRight, midTop, midBottom, middleAt,
10 topLeftAt, topRightAt, bottomLeftAt, bottomRightAt,
11 midLeftAt, midRightAt, midTopAt, midBottomAt,
12 spacer, newElement
13 ) where
15import Native.Utils (guid, max)
16import JavaScript as JS
17import List as List
18import Graphics.Color as Color
19import Maybe (Just, Nothing)
21type Properties = {
22 id : Int,
23 width : Int,
24 height : Int,
25 opacity : Float,
26 color : Maybe Color,
27 href : JSString,
28 tag : JSString
29 }
31type Element = { props : Properties, element : ElementPrim }
33widthOf e = e.props.width
34heightOf e = e.props.height
35sizeOf e = (e.props.width, e.props.height)
37width w e = let p = e.props in { element=e.element, props={p| width <- w} }
38height h e = let p = e.props in { element=e.element, props={p| height <- h} }
39opacity o e = let p = e.props in { element=e.element, props={p| opacity <- o} }
40color c e = let p = e.props in
41 { element=e.element, props={p| color <- Just c} }
42tag name e = let p = e.props in
43 { element=e.element, props={p| tag <- JS.fromString name} }
44link href e = let p = e.props in
45 { element=e.element, props={p| href <- JS.fromString href} }
47emptyStr = JS.fromString ""
48newElement w h e =
49 { props = Properties (guid ()) w h 1 Nothing emptyStr emptyStr, element = e }
51data ElementPrim
52 = Image ImageStyle Int Int JSString
53 | Container Position Element
54 | Flow Direction [Element]
55 | Spacer
56 | RawHtml JSString
57 | DomNode JSElement
59data ImageStyle = Plain | Fitted | Cropped (Int,Int)
61image w h src = newElement w h (Image Plain w h (JS.fromString src))
62fittedImage w h src = newElement w h (Image Fitted w h (JS.fromString src))
63croppedImage w h pos src =
64 newElement w h (Image (Cropped pos) w h (JS.fromString src))
66data Three = P | Z | N
67data Pos = Absolute Int | Relative Float
68type Position = { horizontal : Three, vertical : Three, x : Pos, y : Pos }
70container w h pos e = newElement w h (Container pos e)
71spacer w h = newElement w h Spacer
73data Direction = DUp | DDown | DLeft | DRight | DIn | DOut
75flow dir es =
76 let ws = List.map widthOf es
77 hs = List.map heightOf es
78 newFlow w h = newElement w h (Flow dir es)
79 in
80 case dir of
81 DUp -> newFlow (List.maximum ws) (List.sum hs)
82 DDown -> newFlow (List.maximum ws) (List.sum hs)
83 DLeft -> newFlow (List.sum ws) (List.maximum hs)
84 DRight -> newFlow (List.sum ws) (List.maximum hs)
85 DIn -> newFlow (List.maximum ws) (List.maximum hs)
86 DOut -> newFlow (List.maximum ws) (List.maximum hs)
88above hi lo = newElement (Utils.max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])
89below lo hi = newElement (Utils.max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])
90beside lft rht = newElement (widthOf lft + widthOf rht) (Utils.max (heightOf lft) (heightOf rht)) (Flow right [lft,rht])
92layers es =
93 let ws = List.map widthOf es
94 hs = List.map heightOf es
95 in newElement (List.maximum w) (List.maximum h) (Flow DOut es)
98-- Repetitive things --
100absolute = Absolute
101relative = Relative
103middle = { horizontal = Z, vertical = Z, x = Relative 0.5, y = Relative 0.5 }
104topLeft = { horizontal = N, vertical = P, x = Absolute 0, y = Absolute 0 }
105topRight = { topLeft | horizontal <- P }
106bottomLeft = { topLeft | vertical <- N }
107bottomRight = { bottomLeft | horizontal <- P }
108midLeft = { middle | horizontal <- N, x <- Absolute 0 }
109midRight = { midLeft | horizontal <- P }
110midTop = { middle | vertical <- P, y <- Absolute 0 }
111midBottom = { midTop | vertical <- N }
112middleAt x y = { horizontal = Z, vertical = Z, x = x, y = y }
113topLeftAt x y = { horizontal = N, vertical = P, x = x, y = y }
114topRightAt x y = { horizontal = P, vertical = P, x = x, y = y }
115bottomLeftAt x y = { horizontal = N, vertical = N, x = x, y = y }
116bottomRightAt x y = { horizontal = P, vertical = N, x = x, y = y }
117midLeftAt x y = { horizontal = N, vertical = Z, x = x, y = y }
118midRightAt x y = { horizontal = P, vertical = Z, x = x, y = y }
119midTopAt x y = { horizontal = Z, vertical = P, x = x, y = y }
120midBottomAt x y = { horizontal = Z, vertical = N, x = x, y = y }
122up = DUp
123down = DDown
124left = DLeft
125right = DRight
126inward = DIn
127outward = DOut