Problem on resizestate

[thipperudra]

Hi Antun,

<canvas>
<view bgcolor="green" width="100" height="100" onmousedown="draggable.apply();" onmouseup="draggable.remove();" >
<resizestate name="rs"/>
<dragstate name="draggable"/>
<view align="right" valign="bottom"
width="5" height="5" bgcolor="blue"
onmousedown="parent.rs.apply();"
onmouseup="parent.rs.remove()" />
<view align="left" valign="top"
width="5" height="5" bgcolor="blue"
onmousedown="parent.rs.apply();"
onmouseup="parent.rs.remove()" />
</view>
</canvas>
In the above code , when i move the mouse position on the bottom right corner of the blue (view) point, i can change the width and height resize by moving the mouse on x and y direction.

But i have problem when i using at the top left corner of blue view,i want to resize the parent view when i move from this in upward (negative y-axis) the parent view height should increases and if i move from this left side (negative x-axis) the parent view width should increases in same direction.And also if i move positive x and y directions the size(width and height) of the parent view should decreases (means exact opposite function of bottom right corner mouse(blue view) position).

How do i do this from above code.


Thanks,

-Rudresh

[antun]

The reason it's not working like you expected is that resizestate is only designed to be used in the bottom-right hand corner. You can see the code for resizestate, found in:

\WEB-INF\lps\components\utils\states\resizestate.lzx

You could write your own resizestate that's designed for the top-left hand corner:


<canvas debug="true">

<class name="topleftresizestate" extends="state" >
<attribute name="xroffset" value="$once{this.getMouse('x')}" />
<attribute name="initx" value="$once{this.x}" />
<attribute name="initwidth" value="$once{this.width}" />
<attribute name="width"
value="${this.initwidth+this.initx
-this.immediateParent.getMouse('x')+xroffset}" />
<attribute name="x"
value="${this.immediateParent.getMouse('x')
-this.xroffset}" />

<attribute name="yroffset" value="$once{this.getMouse('y')}" />
<attribute name="inity" value="$once{this.y}" />
<attribute name="initheight" value="$once{this.height}" />
<attribute name="height"
value="${this.initheight+this.inity
-this.immediateParent.getMouse('y')+yroffset}" />
<attribute name="y"
value="${this.immediateParent.getMouse('y')
-this.yroffset}" />


</class>

<view bgcolor="green" width="100" height="100"
onmousedown="draggable.apply();"
onmouseup="draggable.remove();" >

<resizestate name="rs"/>
<topleftresizestate name="trrs"/>

<dragstate name="draggable"/>

<view align="right" valign="bottom"
width="5" height="5" bgcolor="blue"
onmousedown="parent.rs.apply();"
onmouseup="parent.rs.remove()" />

<view align="left" valign="top"
width="5" height="5" bgcolor="blue"
onmousedown="parent.trrs.apply();"
onmouseup="parent.trrs.remove()" />
</view>
</canvas>


... I just reworked the existing example quickly to have another resizestate. In theory you could also write a super-resize state that would work for both corners.

At the very least you should adjust the above code to ensure that it can't be resized to less than 0 in width.

-Antun

[thipperudra]

Hi Antun,

The above code working fine,but when i used resources attribute with some image instead of bgcolor ("green")in the view.
------------
<view resource="photo.jpg" stretches="both" width="100" height="100"
onmousedown="draggable.apply();"
onmouseup="draggable.remove();" >
---------
The above code will not work properly.So how can i can i rectify this problem.

Thanks,

Rudresh

[antun]

Instead of attaching a resource to the green view that gets resized (since it has its own children, i.e. the "handles"), nest a view inside of the green view, and constrain its dimensions to those of the green view:


<view resource="photo.jpg" stretches="both"
width="${parent.width}" height="${parent.height}" />


... then if you attach a resource to that view, it should stretch well.

-Antun

[thipperudra]

Hi Antun,

It is working fine. Thanks alot!!

-Rudresh