@@ -1,60 +1,75 @@
11
2−module Grapics.Element where
2+module 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
314
415import Native.Guid (guid)
516import JavaScript as JS
617import List as List
7−import Graphics.FillStyle
18+import Graphics.Color
819
920type Properties = {
1021 id : Int,
1122 width : Int,
1223 height : Int,
1324 opacity : Float,
14− filling : FillStyle,
25+ color : Maybe Color,
1526 href : JSString,
1627 tag : JSString
1728 }
1829
19−data Element = Element Properties ElementPrim
30+type Element = { props : Properties, element : ElementPrim }
2031
21−getProp get e = let (Element props _) = e in get props
22−widthOf e = getProp .width e
23−heightOf e = getProp .height e
24−sizeOf e = getProp (\p -> (p.width, p.height)) e
32+widthOf e = e.props.width
33+heightOf e = e.props.height
34+sizeOf e = (e.props.width, e.props.height)
2535
26−width w e = case e of Element props prim -> Element {props| width <- w} prim
27−height h e = case e of Element props prim -> Element {props| height <- h} prim
28−opacity o e = case e of Element props prim -> Element {props| opacity <- o} prim
29−color c e = case e of Element props prim -> Element {props| filling <- c} prim
30−filling f e = case e of Element props prim -> Element {props| filling <- f} prim
31−tag name e = case e of Element props prim ->
32− Element {props| tag <- JS.fromString name } prim
33−link href e = case e of Element props prim ->
34− Element {props| href <- JS.fromString href } prim
36+width w e = let p = e.props in { element=e.element, props={p| width <- w} }
37+height h e = let p = e.props in { element=e.element, props={p| height <- h} }
38+opacity o e = let p = e.props in { element=e.element, props={p| opacity <- o} }
39+color c e = let p = e.props in { element=e.element, props={p| color <- c} }
40+tag name e = let p = e.props in
41+ { element=e.element, props={p| tag <- JS.fromString name} }
42+link href e = let p = e.props in
43+ { element=e.element, props={p| href <- JS.fromString href} }
3544
3645emptyStr = JS.fromString ""
3746newElement w h e =
38− Element (Properties (guid ()) w h 1 NoFill emptyStr emptyStr) e
47+ { props = Properties (guid ()) w h 1 NoFill emptyStr emptyStr, element = e }
3948
4049data ElementPrim
41− = Image ImageStyle String
50+ = Image ImageStyle Int Int JSString
4251 | Container Position Element
4352 | Flow Direction [Element]
4453 | Spacer
4554 | RawHtml JSString
4655 | DomNode JSElement
4756
48−data ImageStyle = Plain | Fitted | Cropped (Int,Int) Int Int
49−data Direction = DUp | DDown | DLeft | DRight | DIn | DOut
57+data ImageStyle = Plain | Fitted | Cropped (Int,Int)
58+
59+image w h src = newElement w h (Image Plain w h (JS.fromString src))
60+fittedImage w h src = newElement w h (Image Fitted w h (JS.fromString src))
61+croppedImage w h pos src =
62+ newElement w h (Image (Cropped pos) w h (JS.fromString src))
5063
51−image w h src = newElement w h (Image Plain src)
52−fittedImage w h src = newElement w h (Image Fitted src)
53−croppedImage w h pos src = newElement w h (Image (Cropped pos w h) src)
64+data Three = P | Z | N
65+data Pos = Absolute Int | Relative Float
66+type Position = { horizontal : Three, vertical : Three, x : Pos, y : Pos }
5467
5568container w h pos e = newElement w h (Container pos e)
5669spacer w h = newElement w h Spacer
5770
71+data Direction = DUp | DDown | DLeft | DRight | DIn | DOut
72+
5873flow dir es =
5974 let ws = map widthOf es
6075 hs = map heightOf es
@@ -71,3 +86,40 @@ flow dir es =
7186above hi lo = newElement (max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])
7287below lo hi = newElement (max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])
7388beside lft rht = newElement (widthOf lft + widthOf rht) (max (heightOf lft) (heightOf rht)) (Flow right [lft,rht])
89+
90+layers es =
91+ let ws = map widthOf es
92+ hs = map heightOf es
93+ in newElement (List.maximum w) (List.maximum h) (Flow DOut es)
94+
95+
96+-- Repetitive things --
97+
98+absolute = Absolute
99+relative = Relative
100+
101+middle = { horizontal = Z, vertical = Z, x = Relative 0.5, y = Relative 0.5 }
102+topLeft = { horizontal = N, vertical = P, x = Absolute 0, y = Absolute 0 }
103+topRight = { topLeft | horizontal <- P }
104+bottomLeft = { topLeft | vertical <- N }
105+bottomRight = { bottomLeft | horizontal <- P }
106+midLeft = { middle | horizontal <- N, x <- Absolute 0 }
107+midRight = { midLeft | horizontal <- P }
108+midTop = { middle | vertical <- P, y <- Absolute 0 }
109+midBottom = { midTop | vertical <- N }
110+middleAt x y = { horizontal = Z, vertical = Z, x = x, y = y }
111+topLeftAt x y = { horizontal = N, vertical = P, x = x, y = y }
112+topRightAt x y = { horizontal = P, vertical = P, x = x, y = y }
113+bottomLeftAt x y = { horizontal = N, vertical = N, x = x, y = y }
114+bottomRightAt x y = { horizontal = P, vertical = N, x = x, y = y }
115+midLeftAt x y = { horizontal = N, vertical = Z, x = x, y = y }
116+midRightAt x y = { horizontal = P, vertical = Z, x = x, y = y }
117+midTopAt x y = { horizontal = Z, vertical = P, x = x, y = y }
118+midBottomAt x y = { horizontal = Z, vertical = N, x = x, y = y }
119+
120+up = DUp
121+down = DDown
122+left = DLeft
123+right = DRight
124+inward = DIn
125+outward = DOut