How to stop a stack moving on screen following a resize
Posted: Fri Mar 03, 2017 9:45 am
It was late and I was caught out by how Livecode works when changing the width of a stack in code. I thought it would be simple but although the button resize worked the stack jumped on the screen which looked most odd. So I though I would post my solution in the hope that it may be helpful to others (and to me when I have forgotten in six months time!)
I wanted to have a thin stack that could be enlarged to show additional controls when required. I added a resize button to the card that simply toggled the width of the stack between two values, the full code may be viewed in the attached stack file (all the code is in the two button scripts), the toggle is conducted by an if statement: Now the stack does indeed grow and shrink as expected but unfortunately the stack moves on the screen. The jump occurs because when the width is changed the resized stack is redrawn on the screen at the same "location" and location is the centre of an object or stack. Try the example stack if this is unclear.
The solution is to recognise that in my example I want both versions of my stack (narrow or wide) to be drawn the same distance from the left hand edge of the screen. This means that the location of the stack has to be changed when the width is changed, so some extra code is needed:
I hope the code is clear. The routine calculates the position of the lefthand side of the stack and stores this in tLeftMargin, next it changes the width of the stack and calculates where the centre needs to be to maintain the same left margin. Finally it changes the location of the stack to the new X coordinate. The result is that the stack grows and shrinks from a constant left margin i.e. no more jump. Please note that if I were changing the height I would have to do a similar calculations.
I wanted to have a thin stack that could be enlarged to show additional controls when required. I added a resize button to the card that simply toggled the width of the stack between two values, the full code may be viewed in the attached stack file (all the code is in the two button scripts), the toggle is conducted by an if statement:
Code: Select all
if tWidth = kWide then
set the width of this stack to kNarrow
else
set the width of this stack to kWide
end ifThe solution is to recognise that in my example I want both versions of my stack (narrow or wide) to be drawn the same distance from the left hand edge of the screen. This means that the location of the stack has to be changed when the width is changed, so some extra code is needed:
Code: Select all
on mouseUp
constant kWide= 920
constant kNarrow= 220
constant kHeight = 260
set the height of this stack to kHeight
# The width of the stack toggles between two widths
# If just the width is changed the stack appears to jump on the screen
# So, some calculation is required to maintain a constant position
# Read the present width
Put the width of this stack into tWidth
# Read the location and break out the X and Y positions to the centre of the stack
Put the loc of this stack into tLoc
put item 1 of tLoc into tstackX
put item 2 of tLoc into tstackY
# Calculate the location of the left margin which we wish to remain unchanged
put tstackX-(tWidth / 2) into tLeftMargin
# The new X co-ordinate of location is calculated using : NewLocX= tLeftMargin+(NewWidth/2)
if tWidth = kWide then
set the width of this stack to kNarrow
# Now adjust the location to account for the new width
put tLeftMargin+(kNarrow / 2) into tNewX
else
set the width of this stack to kWide
# Now adjust the location to account for the new width
put tLeftMargin+(kWide / 2) into tNewX
end if
#Update the location of the stack
set the loc of this stack to tNewX,tstackY
end mouseUp