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