libraries/Graphics/Element.elm · elk

git.iko.soy/elk

on 294fdfd help sign in

elk/libraries/Graphics/Element.elm

146 lines 5.4 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, htmlHeight)

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 nw e = let p = e.props

38 props = case e.element of

39 Image _ w h _ -> {p| height <- h/w*nw }

40 RawHtml html -> {p| height <- htmlHeight nw html }

41 _ -> p

42 in { element=e.element, props={props| width <- nw} }

43height nh e = let p = e.props

44 props = case e.element of

45 Image _ w h _ -> {p| width <- w/h*nh }

46 _ -> p

47 in { element=e.element, props={p| height <- nh} }

48opacity o e = let p = e.props in { element=e.element, props={p| opacity <- o} }

49color c e = let p = e.props in

50 { element=e.element, props={p| color <- Just c} }

51tag name e = let p = e.props in

52 { element=e.element, props={p| tag <- JS.fromString name} }

53link href e = let p = e.props in

54 { element=e.element, props={p| href <- JS.fromString href} }

56emptyStr = JS.fromString ""

57newElement w h e =

58 { props = Properties (guid ()) w h 1 Nothing emptyStr emptyStr, element = e }

60data ElementPrim

61 = Image ImageStyle Int Int JSString

62 | Container Position Element

63 | Flow Direction [Element]

64 | Spacer

65 | RawHtml JSString

66 | Custom -- for custom Elements implemented in JS, see collage for example

68data ImageStyle = Plain | Fitted | Cropped (Int,Int)

70image w h src = newElement w h (Image Plain w h (JS.fromString src))

71fittedImage w h src = newElement w h (Image Fitted w h (JS.fromString src))

72croppedImage w h pos src =

73 newElement w h (Image (Cropped pos) w h (JS.fromString src))

75data Three = P | Z | N

76data Pos = Absolute Int | Relative Float

77type Position = { horizontal : Three, vertical : Three, x : Pos, y : Pos }

79container w h pos e = newElement w h (Container pos e)

80spacer w h = newElement w h Spacer

84flow dir es =

85 let ws = List.map widthOf es

86 hs = List.map heightOf es

87 newFlow w h = newElement w h (Flow dir es)

88 in

89 if es == [] then spacer 0 0 else

90 case dir of

91 DUp -> newFlow (List.maximum ws) (List.sum hs)

92 DDown -> newFlow (List.maximum ws) (List.sum hs)

93 DLeft -> newFlow (List.sum ws) (List.maximum hs)

94 DRight -> newFlow (List.sum ws) (List.maximum hs)

95 DIn -> newFlow (List.maximum ws) (List.maximum hs)

96 DOut -> newFlow (List.maximum ws) (List.maximum hs)

98above hi lo =

99 newElement (max (widthOf hi) (widthOf lo))

100 (heightOf hi + heightOf lo)

101 (Flow DDown [hi,lo])

102below lo hi =

103 newElement (max (widthOf hi) (widthOf lo))

104 (heightOf hi + heightOf lo)

105 (Flow DDown [hi,lo])

106beside lft rht =

107 newElement (widthOf lft + widthOf rht)

108 (max (heightOf lft) (heightOf rht))

109 (Flow right [lft,rht])

110

111layers es =

112 let ws = List.map widthOf es

113 hs = List.map heightOf es

114 in newElement (List.maximum ws) (List.maximum hs) (Flow DOut es)

115

116

117-- Repetitive things --

118

119absolute = Absolute

120relative = Relative

121

122middle = { horizontal = Z, vertical = Z, x = Relative 0.5, y = Relative 0.5 }

123topLeft = { horizontal = N, vertical = P, x = Absolute 0, y = Absolute 0 }

124topRight = { topLeft | horizontal <- P }

125bottomLeft = { topLeft | vertical <- N }

126bottomRight = { bottomLeft | horizontal <- P }

127midLeft = { middle | horizontal <- N, x <- Absolute 0 }

128midRight = { midLeft | horizontal <- P }

129midTop = { middle | vertical <- P, y <- Absolute 0 }

130midBottom = { midTop | vertical <- N }

131middleAt x y = { horizontal = Z, vertical = Z, x = x, y = y }

132topLeftAt x y = { horizontal = N, vertical = P, x = x, y = y }

133topRightAt x y = { horizontal = P, vertical = P, x = x, y = y }

134bottomLeftAt x y = { horizontal = N, vertical = N, x = x, y = y }

135bottomRightAt x y = { horizontal = P, vertical = N, x = x, y = y }

136midLeftAt x y = { horizontal = N, vertical = Z, x = x, y = y }

137midRightAt x y = { horizontal = P, vertical = Z, x = x, y = y }

138midTopAt x y = { horizontal = Z, vertical = P, x = x, y = y }

139midBottomAt x y = { horizontal = Z, vertical = N, x = x, y = y }

140

141up = DUp

142down = DDown

143left = DLeft

144right = DRight

145inward = DIn

146outward = DOut