Resizing scroller example

scroller-test-resize.red

Red [
	title: "Resizing scroller example"
	author: [@toomasv @hiiamboris @gurzgri @luce80]
	date: 09-10-2022
	History: [
		13-09-2022 "Published"
		22-09-2022 "improved a bit with @toomasv idea of using face where applicable"
		09-10-2022 "Add some ideas from @gurzgri"
		12-12-2022 "Reacting version"
	]
]

win: layout [
    size 390x220
    space 0x0 across
    gp: panel 350x200 red [
        origin 0x0 space 0x0
        p: panel 350x400 [
            origin 0x0 space 0x0 below
            style area: area 350x100
            area "A"
            area "B"
            area "C"
            area "D"
        ]
    ]
    sc: scroller 16x200 on-created [
        face/selected: min (max 1 face/size/y) / (max 1  p/size/y) 1 ; visible-part / total , ratio given as percentage
    ][ ; action (on-change)
        face/data: min max 0.0 face/data (1.0 - face/selected)    ; constrain to allowed range
        p/offset/y: to integer! (face/data * p/size/y * -1)       ; scroll amount
        p/offset/y: min max face/size/y - p/size/y  p/offset/y  0 ; constrain to allowed range
    ] 
]

react compose [
	gp/size/y: win/size/y - (win/size/y - gp/size/y) ; resize (only along y)
	sc/size/y: win/size/y - (win/size/y - sc/size/y)
	; re-calc scroller parameters and scroll amount
	do-actor sc none 'created
	do-actor sc none 'change
]

view/flags win 'resize