Check-in [ac3d1dbdb1]
Not logged in

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:added support for multiline text in label
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA1:ac3d1dbdb1954f7ef6aebf0e1615b1ec52cf2074
User & Date: aldo 2016-09-06 09:54:07
Context
2016-09-09
11:43
reorganized some code, implemented flexbox layout, added full css color names, more demos check-in: 14e16b667a user: aldo tags: trunk
2016-09-06
09:54
added support for multiline text in label check-in: ac3d1dbdb1 user: aldo tags: trunk
09:53
ffixed bug in layout check-in: 8dd997b795 user: aldo tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to css.ss.

17
18
19
20
21
22
23

24
25
26
27
28
29
30
(define default-stylesheet '(box ))

(define stylesheet '([* ==> 
			(position static)
			(box-sizing border-box)
			(font-family "Sans")
			(font-size 12)

			(z-index auto)]
		     [button ==>
			     (width 100) 
			     (height 50) 
			     (color red)
			     (background-color (rgbf 0 1 0 0.5))
			     (border-style solid)







>







17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
(define default-stylesheet '(box ))

(define stylesheet '([* ==> 
			(position static)
			(box-sizing border-box)
			(font-family "Sans")
			(font-size 12)
			(line-height 1.2)
			(z-index auto)]
		     [button ==>
			     (width 100) 
			     (height 50) 
			     (color red)
			     (background-color (rgbf 0 1 0 0.5))
			     (border-style solid)

Changes to element.ss.

18
19
20
21
22
23
24

25
26
27
28
29
30
31
...
105
106
107
108
109
110
111

112
113
114
115
116
117
118
...
153
154
155
156
157
158
159

160
161
162
163
164
165
166
167
  (fields el id class parent
	  (mutable style) (mutable pseudo)
	  (mutable layout-state) (mutable position) (mutable x) (mutable y) (mutable w) (mutable h) 
	  (mutable color) (mutable bg-color)
	  (mutable border-width) (mutable border-color) (mutable border-style) (mutable border-radius)  
	  (mutable transition-duration) 
	  (mutable font-family) (mutable font-size) (mutable font-weight) (mutable font-style)

	  (mutable padding) (mutable margin)
	  (mutable content-size)
	  (mutable z-index)))
  
(define element-table (make-eq-hashtable))

(define style-table (make-eq-hashtable))
................................................................................
  (mi-element-color-set! element (->color (style-query style 'color 'white)))
  (mi-element-bg-color-set! element (->color (style-query style 'background-color 'white)))

  (mi-element-font-family-set! element (style-query style 'font-family "Sans"))
  (mi-element-font-size-set! element (style-query style 'font-size 12))
  (mi-element-font-weight-set! element (style-query style 'font-weight 'normal))
  (mi-element-font-style-set! element (style-query style 'font-style 'normal))


  (mi-element-x-set! element (style-query style 'left 0))
  (mi-element-y-set! element (style-query style 'top 0))
  (mi-element-w-set! element (style-query style 'width 'none))
  (mi-element-h-set! element (style-query style 'height 'none))

  (let-values ([(x y w h) (layout-element element)])
................................................................................
(define (mi-color) (mi-element-color (mi-el)))
(define (mi-bg-color) (mi-element-bg-color (mi-el)))
(define (mi-border-radius) (mi-element-border-radius (mi-el)))
(define (mi-border-color) (mi-element-border-color (mi-el)))
(define (mi-border-width) (mi-element-border-width (mi-el)))
(define (mi-border-style) (mi-element-border-style (mi-el)))
(define (mi-z-index) (mi-element-z-index (mi-el)))


(define (mi-parent) (mi-element-parent (mi-el)))
(define (mi-padding) (mi-element-padding (mi-el)))
(define mi-class (make-parameter #f))
(define mi-style (make-parameter '()))


(define (mi-el-by-id id) (hashtable-ref element-table id #f))







>







 







>







 







>








18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
...
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
...
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
  (fields el id class parent
	  (mutable style) (mutable pseudo)
	  (mutable layout-state) (mutable position) (mutable x) (mutable y) (mutable w) (mutable h) 
	  (mutable color) (mutable bg-color)
	  (mutable border-width) (mutable border-color) (mutable border-style) (mutable border-radius)  
	  (mutable transition-duration) 
	  (mutable font-family) (mutable font-size) (mutable font-weight) (mutable font-style)
	  (mutable line-height)
	  (mutable padding) (mutable margin)
	  (mutable content-size)
	  (mutable z-index)))
  
(define element-table (make-eq-hashtable))

(define style-table (make-eq-hashtable))
................................................................................
  (mi-element-color-set! element (->color (style-query style 'color 'white)))
  (mi-element-bg-color-set! element (->color (style-query style 'background-color 'white)))

  (mi-element-font-family-set! element (style-query style 'font-family "Sans"))
  (mi-element-font-size-set! element (style-query style 'font-size 12))
  (mi-element-font-weight-set! element (style-query style 'font-weight 'normal))
  (mi-element-font-style-set! element (style-query style 'font-style 'normal))
  (mi-element-line-height-set! element (style-query style 'line-height 1.2))

  (mi-element-x-set! element (style-query style 'left 0))
  (mi-element-y-set! element (style-query style 'top 0))
  (mi-element-w-set! element (style-query style 'width 'none))
  (mi-element-h-set! element (style-query style 'height 'none))

  (let-values ([(x y w h) (layout-element element)])
................................................................................
(define (mi-color) (mi-element-color (mi-el)))
(define (mi-bg-color) (mi-element-bg-color (mi-el)))
(define (mi-border-radius) (mi-element-border-radius (mi-el)))
(define (mi-border-color) (mi-element-border-color (mi-el)))
(define (mi-border-width) (mi-element-border-width (mi-el)))
(define (mi-border-style) (mi-element-border-style (mi-el)))
(define (mi-z-index) (mi-element-z-index (mi-el)))
(define (mi-line-height) (mi-element-line-height (mi-el)))

(define (mi-parent) (mi-element-parent (mi-el)))
(define (mi-padding) (mi-element-padding (mi-el)))
(define mi-class (make-parameter #f))
(define mi-style (make-parameter '()))


(define (mi-el-by-id id) (hashtable-ref element-table id #f))

Changes to render.ss.

85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
		      (lambda ()
			(label 'lbl1 "lalalala"))))
	   
	   (toggle-panel 'tg1 tg1-state
			 (lambda ()
			   (vslider 'slider2 slider-state)
			   (panel 'panel3 (lambda ()
					    (label 'lbl3 "123455")
					    (mi-force-break 'panel3)
					    (label 'lbl4 "67890")))))
	   
	   (hslider 'slider1 slider-state)))

  (debug-tooltip)
  







|







85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
		      (lambda ()
			(label 'lbl1 "lalalala"))))
	   
	   (toggle-panel 'tg1 tg1-state
			 (lambda ()
			   (vslider 'slider2 slider-state)
			   (panel 'panel3 (lambda ()
					    (label 'lbl3 "123455\n54321")
					    (mi-force-break 'panel3)
					    (label 'lbl4 "67890")))))
	   
	   (hslider 'slider1 slider-state)))

  (debug-tooltip)
  

Changes to widgets.ss.

62
63
64
65
66
67
68
69
70
71

72
73
74

75

76
77

78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
  (import (only (srfi s14 char-sets) char-set)
	  (only (thunder-utils) string-split))
  (create-element 'label id #f
		  (lambda ()
		    (define-values (x y w h) (values (mi-x) (mi-y) (mi-w) (mi-h)))
		    (draw-rect x y w h)
		    (let ([lines (string-split text (char-set #\newline))]
			  [x* x] [y* y])
		      (if (= 1 (length lines ))
			  (let ([extents (draw-text/centered (car lines) (+ 0 x (/ w 2)) (+ 0 y (/ h 2)))])

			    (set! x* (car extents)) 
			    (set! y* (cadr extents)))
			  (let loop ([l lines])

			    (let ([extents (draw-text/centered text (+ 0 x* (/ w 2)) (+ y* ))])

			      (set! x* (+ x* (car extents)))
			      (set! y* (+ y* (cadr extents))))))

		      (mi-element-content-size-set! (mi-el) (list x* y*)))
		    #f)))


(define (debug-tooltip)
  (define id (mi-hot-item))
  (when id
	(let-values ([(x y w h) (get-last-coords id)])
	  (if (region-hit? x y w h)
	      (parameterize ([mi-style `((z-index 1)
					 (position absolute) 
					 (left ,(mi-mouse-x)) 
					 (top ,(mi-mouse-y)) )])
			    (label (symbol-append id "::debug") (symbol->string id)))))))


(define (hslider id state)
  (create-element 'hslider id #t
   (lambda ()
     (let-values ([(x y w h) (values (mi-x) (mi-y) (mi-w) (mi-h))])
       (draw-rect x y w h)
       (start-layout (mi-el))







|
|
|
>
|
|

>
|
>
|
<
>
|

<











<







62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

80
81
82

83
84
85
86
87
88
89
90
91
92
93

94
95
96
97
98
99
100
  (import (only (srfi s14 char-sets) char-set)
	  (only (thunder-utils) string-split))
  (create-element 'label id #f
		  (lambda ()
		    (define-values (x y w h) (values (mi-x) (mi-y) (mi-w) (mi-h)))
		    (draw-rect x y w h)
		    (let ([lines (string-split text (char-set #\newline))]
			  [x* x] [y* y] [w* 0] [h* 0])
		      (if (= 1 (length lines))
			  (let ([extents (draw-text/centered (car lines) 
							     (+ x (/ w 2)) (+ y (/ h 2)))])
			    (set! w* (car extents)) 
			    (set! h* (cadr extents)))
			  (let loop ([l lines])
			    (unless (null? l)
			      (let ([extents (draw-text/centered (car l) (+ x* (/ w 2)) (+ y h*))])
			      (set! h* (+ h* (* (mi-line-height) (cadr extents))))
			      (set! w* (max w* (car extents)))

			      (loop (cdr l))))))
		      (mi-element-content-size-set! (mi-el) (list w* h*)))
		    #f)))


(define (debug-tooltip)
  (define id (mi-hot-item))
  (when id
	(let-values ([(x y w h) (get-last-coords id)])
	  (if (region-hit? x y w h)
	      (parameterize ([mi-style `((z-index 1)
					 (position absolute) 
					 (left ,(mi-mouse-x)) 
					 (top ,(mi-mouse-y)) )])
			    (label (symbol-append id "::debug") (symbol->string id)))))))


(define (hslider id state)
  (create-element 'hslider id #t
   (lambda ()
     (let-values ([(x y w h) (values (mi-x) (mi-y) (mi-w) (mi-h))])
       (draw-rect x y w h)
       (start-layout (mi-el))