git.iko.soy/elk
on master help sign in
Get Graphics.Element in working order.
0ab2825evancz
libraries/Graphics/Element.elm+76−24
compare with master
unifiedsplit
@@ -1,60 +1,75 @@
1
1
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
3
14
4import Native.Guid (guid)
15import Native.Guid (guid)
5import JavaScript as JS
16import JavaScript as JS
6import List as List
17import List as List
7−import Graphics.FillStyle
18+import Graphics.Color
8
19
9type Properties = {
20type Properties = {
10 id : Int,
21 id : Int,
11 width : Int,
22 width : Int,
12 height : Int,
23 height : Int,
13 opacity : Float,
24 opacity : Float,
14− filling : FillStyle,
25+ color : Maybe Color,
15 href : JSString,
26 href : JSString,
16 tag : JSString
27 tag : JSString
17 }
28 }
18
29
19−data Element = Element Properties ElementPrim
30+type Element = { props : Properties, element : ElementPrim }
20
31
21−getProp get e = let (Element props _) = e in get props
22−widthOf e = getProp .width e
32+widthOf e = e.props.width
23−heightOf e = getProp .height e
33+heightOf e = e.props.height
24−sizeOf e = getProp (\p -> (p.width, p.height)) e
34+sizeOf e = (e.props.width, e.props.height)
25
35
26−width w e = case e of Element props prim -> Element {props| width <- w} prim
36+width w e = let p = e.props in { element=e.element, props={p| width <- w} }
27−height h e = case e of Element props prim -> Element {props| height <- h} prim
37+height h e = let p = e.props in { element=e.element, props={p| height <- h} }
28−opacity o e = case e of Element props prim -> Element {props| opacity <- o} prim
38+opacity o e = let p = e.props in { element=e.element, props={p| opacity <- o} }
29−color c e = case e of Element props prim -> Element {props| filling <- c} prim
39+color c e = let p = e.props in { element=e.element, props={p| color <- c} }
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 ->
40+tag name e = let p = e.props in
32− Element {props| tag <- JS.fromString name } prim
41+ { element=e.element, props={p| tag <- JS.fromString name} }
33−link href e = case e of Element props prim ->
42+link href e = let p = e.props in
34− Element {props| href <- JS.fromString href } prim
43+ { element=e.element, props={p| href <- JS.fromString href} }
35
44
36emptyStr = JS.fromString ""
45emptyStr = JS.fromString ""
37newElement w h e =
46newElement 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 }
39
48
40data ElementPrim
49data ElementPrim
41− = Image ImageStyle String
50+ = Image ImageStyle Int Int JSString
42 | Container Position Element
51 | Container Position Element
43 | Flow Direction [Element]
52 | Flow Direction [Element]
44 | Spacer
53 | Spacer
45 | RawHtml JSString
54 | RawHtml JSString
46 | DomNode JSElement
55 | DomNode JSElement
47
56
48−data ImageStyle = Plain | Fitted | Cropped (Int,Int) Int Int
57+data ImageStyle = Plain | Fitted | Cropped (Int,Int)
49−data Direction = DUp | DDown | DLeft | DRight | DIn | DOut
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))
50
63
51−image w h src = newElement w h (Image Plain src)
64+data Three = P | Z | N
52−fittedImage w h src = newElement w h (Image Fitted src)
65+data Pos = Absolute Int | Relative Float
53−croppedImage w h pos src = newElement w h (Image (Cropped pos w h) src)
66+type Position = { horizontal : Three, vertical : Three, x : Pos, y : Pos }
54
67
55container w h pos e = newElement w h (Container pos e)
68container w h pos e = newElement w h (Container pos e)
56spacer w h = newElement w h Spacer
69spacer w h = newElement w h Spacer
57
70
71+data Direction = DUp | DDown | DLeft | DRight | DIn | DOut
72+
58flow dir es =
73flow dir es =
59 let ws = map widthOf es
74 let ws = map widthOf es
60 hs = map heightOf es
75 hs = map heightOf es
@@ -71,3 +86,40 @@ flow dir es =
71above hi lo = newElement (max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])
86above hi lo = newElement (max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])
72below lo hi = 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])
73beside lft rht = newElement (widthOf lft + widthOf rht) (max (heightOf lft) (heightOf rht)) (Flow right [lft,rht])
88beside 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