How to stop a stack moving on screen following a resize

[Simon Knight]

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:

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 if

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:

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

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.

[bn]

Hi Simon

Code: Select all

on mouseUp
   constant kWide= 920
   constant kNarrow= 220
   constant kHeight = 260
   lock screen
   put the rect of this stack into tRect
   put item 2 of tRect + kHeight into item 4 of tRect
   if item 3 of tRect - item 1 of tRect = kNarrow then
      put item 1 of tRect + kWide into item 3 of tRect
   else
      put item 1 of tRect + kNarrow into item 3 of tRect
   end if
   
   set the rect of this stack to tRect
   unlock screen
end mouseUp

that works for me. Working with the rect has the advantage of only one resisze action which is "costly".

Kind regards
Bernd

[richmond62]

That all seems very complicated.

Why do I feel that the easiest way to make sure a stack stays where it is when resized
might be to record the stack's "loc", resize the stack and then make sure the new loc is the
same as the old loc.

This is awkward if one wishes to use the bottom-right corner of the stack to resize, because one
can not, for instance, have a stack script like this (pseudo-code):

on resize
put the loc of me into LOCC
end resize

[although, interestingly enough the error catcher does not object to that].

However if one uses a bespoke button this can be effected very easily indeed:

You will see that I have added 2 extra loops so that things don't get "silly".

SSIZE.livecode.zip

Here's the stack.

(1.05 KiB) Downloaded 216 times

[jacque]

Getting and setting the left of a stack is the easiest way. No calculations required.

Code: Select all

put the left of this stack into tLeft
.. Do resizing
set the left of this stack to tLeft

If that shows a jump then I'd go with the rect solution.

[Randy Hengst]

I’ve used the idea Jacque shared with adding lock screen

LOCK SCREEN
local tTopLoc
local tLeftLoc
# assumes the current top,left of stack is where you want it to stay
put the top of this stack into tTopLoc
put the left of this stack into tLeftLoc

# change the size here
set the height of this stack to 921
set the width of this stack to 1526

# return to original top,left
set the top of this stack to tTopLoc
set the left of this stack to tLeftLoc
UNLOCK SCREEN

[Simon Knight]

Hi All,

Thanks for all your inputs. I now realise that I fell into the trap of just looking at the properties listed in the stack inspector, I'm off to fashion a pointy hat with a "D" on it and will go and stand in the corner.

Skids