I'm working on a project where user's can drop things on to a canvas and then drag them around. The canvas is inside of another canvas. The parent is used as the visible area and scrolls. The child by default is bigger than the parent so scrollbars are always present.
When the user drags an object outside of the visible area, I want the parent canvas to scroll. (pretty easy). Here's where it gets complex.... when the users drags an object past the width/height of the child canvas, I want the child canvas to expand and scroll as the user moves the object. Also, if the user then moves the object less than the default bounds, i want the child canvas to shrink back up and scroll.
If any of you have ever used MagicDraw (the diagramming tool) this is how it works when editing a diagram.
I actually have all of this working now, but when you drag past the visible area, the scrolling happens WAY too fast and it's really hard to control.
I was hoping to find some solution that would let me slow down the scrolling and make it more smooth.
The first thing I thought of was an easing function for the scrolling.
It's probably something you already experimented with, but I thought I'd
suggest it.
When your dragging you're probably using a ENTER_FRAME or MOUSE_MOVE
style event to adjust the scrolling. So instead of scrolling directly
to where it needs to be:
parent.scrollV = newValue
...you'd want to ease it:
parent.scrollV = newValue/2 (or a larger number for more lag)
D
Dustin Tauer
V.P Training & Development
Easel Solutions, Inc.
23 Empire Drive
St. Paul, MN 55116
p. 651-602-5654 | f. 651-602-3154
http://www.easelsolutions.com
-----Original Message-----
From: mnswf@googlegroups.com [mailto:mnswf@googlegroups.com] On Behalf
Of jonathan doklovic
Sent: Wednesday, July 01, 2009 9:28 AM
To: mnswf@googlegroups.com
Subject: [mnswf] Need Smooth Scrolling Help
Hey,
I'm working on a project where user's can drop things on to a canvas and
then drag them around.
The canvas is inside of another canvas. The parent is used as the
visible area and scrolls.
The child by default is bigger than the parent so scrollbars are always
present.
When the user drags an object outside of the visible area, I want the
parent canvas to scroll. (pretty easy).
Here's where it gets complex.... when the users drags an object past
the width/height of the child canvas, I want the child canvas to expand
and scroll as the user moves the object. Also, if the user then moves
the object less than the default bounds, i want the child canvas to
shrink back up and scroll.
If any of you have ever used MagicDraw (the diagramming tool) this is
how it works when editing a diagram.
I actually have all of this working now, but when you drag past the
visible area, the scrolling happens WAY too fast and it's really hard to
control.
I was hoping to find some solution that would let me slow down the
scrolling and make it more smooth.
I believe scrollV is only a property for textfields.
I'm using canvases and so I'm controlling the scrolling currently via
parent.horizontalScrollPosition
Dustin Tauer wrote:
> The first thing I thought of was an easing function for the scrolling.
> It's probably something you already experimented with, but I thought I'd
> suggest it.
> When your dragging you're probably using a ENTER_FRAME or MOUSE_MOVE
> style event to adjust the scrolling. So instead of scrolling directly
> to where it needs to be:
> parent.scrollV = newValue
> ...you'd want to ease it:
> parent.scrollV = newValue/2 (or a larger number for more lag)
> D
> Dustin Tauer
> V.P Training & Development
> Easel Solutions, Inc.
> 23 Empire Drive
> St. Paul, MN 55116
> p. 651-602-5654 | f. 651-602-3154
> http://www.easelsolutions.com
> -----Original Message-----
> From: mnswf@googlegroups.com [mailto:mnswf@googlegroups.com] On Behalf
> Of jonathan doklovic
> Sent: Wednesday, July 01, 2009 9:28 AM
> To: mnswf@googlegroups.com
> Subject: [mnswf] Need Smooth Scrolling Help
> Hey,
> I'm working on a project where user's can drop things on to a canvas and
> then drag them around.
> The canvas is inside of another canvas. The parent is used as the
> visible area and scrolls.
> The child by default is bigger than the parent so scrollbars are always
> present.
> When the user drags an object outside of the visible area, I want the
> parent canvas to scroll. (pretty easy).
> Here's where it gets complex.... when the users drags an object past
> the width/height of the child canvas, I want the child canvas to expand
> and scroll as the user moves the object. Also, if the user then moves
> the object less than the default bounds, i want the child canvas to
> shrink back up and scroll.
> If any of you have ever used MagicDraw (the diagramming tool) this is
> how it works when editing a diagram.
> I actually have all of this working now, but when you drag past the
> visible area, the scrolling happens WAY too fast and it's really hard to
> control.
> I was hoping to find some solution that would let me slow down the
> scrolling and make it more smooth.
So would easing the horizontalScrollPosition work?
Dustin Tauer
V.P Training & Development
Easel Solutions, Inc.
23 Empire Drive
St. Paul, MN 55116
p. 651-602-5654 | f. 651-602-3154
http://www.easelsolutions.com
-----Original Message-----
From: mnswf@googlegroups.com [mailto:mnswf@googlegroups.com] On Behalf
Of jonathan doklovic
Sent: Wednesday, July 01, 2009 10:00 AM
To: mnswf@googlegroups.com
Subject: [mnswf] Re: Need Smooth Scrolling Help
I believe scrollV is only a property for textfields.
I'm using canvases and so I'm controlling the scrolling currently via
parent.horizontalScrollPosition
- J
Dustin Tauer wrote:
> The first thing I thought of was an easing function for the scrolling.
> It's probably something you already experimented with, but I thought
I'd
> suggest it.
> When your dragging you're probably using a ENTER_FRAME or MOUSE_MOVE
> style event to adjust the scrolling. So instead of scrolling directly
> to where it needs to be:
> parent.scrollV = newValue
> ...you'd want to ease it:
> parent.scrollV = newValue/2 (or a larger number for more lag)
> D
> Dustin Tauer
> V.P Training & Development
> Easel Solutions, Inc.
> 23 Empire Drive
> St. Paul, MN 55116
> p. 651-602-5654 | f. 651-602-3154
> http://www.easelsolutions.com
> -----Original Message-----
> From: mnswf@googlegroups.com [mailto:mnswf@googlegroups.com] On Behalf
> Of jonathan doklovic
> Sent: Wednesday, July 01, 2009 9:28 AM
> To: mnswf@googlegroups.com
> Subject: [mnswf] Need Smooth Scrolling Help
> Hey,
> I'm working on a project where user's can drop things on to a canvas
and
> then drag them around.
> The canvas is inside of another canvas. The parent is used as the
> visible area and scrolls.
> The child by default is bigger than the parent so scrollbars are
always
> present.
> When the user drags an object outside of the visible area, I want the
> parent canvas to scroll. (pretty easy).
> Here's where it gets complex.... when the users drags an object past
> the width/height of the child canvas, I want the child canvas to
expand
> and scroll as the user moves the object. Also, if the user then moves
> the object less than the default bounds, i want the child canvas to
> shrink back up and scroll.
> If any of you have ever used MagicDraw (the diagramming tool) this is
> how it works when editing a diagram.
> I actually have all of this working now, but when you drag past the
> visible area, the scrolling happens WAY too fast and it's really hard
to
> control.
> I was hoping to find some solution that would let me slow down the
> scrolling and make it more smooth.
When the child canvas resizes due to moving an object out of the bounds,
the parent adjusts it's scrollbars automatically due to the fact that
I'm required to have autolayout=true. But when the object moves out of
the visible area, it's also telling the parent to scroll to it's
position so that it's within the visible area all the time.
I think that when the child canvas resizes, both scroll events are
happening which drives the thing crazy. problem is, I don't know how to
solve this since there are cases when an object moves and needs
scrolling to happen but the child has not resized.
Dustin Tauer wrote:
> Ha...my bad. I was recklessly pseudo coding ;)
> So would easing the horizontalScrollPosition work?
> Dustin Tauer
> V.P Training & Development
> Easel Solutions, Inc.
> 23 Empire Drive
> St. Paul, MN 55116
> p. 651-602-5654 | f. 651-602-3154
> http://www.easelsolutions.com
> -----Original Message-----
> From: mnswf@googlegroups.com [mailto:mnswf@googlegroups.com] On Behalf
> Of jonathan doklovic
> Sent: Wednesday, July 01, 2009 10:00 AM
> To: mnswf@googlegroups.com
> Subject: [mnswf] Re: Need Smooth Scrolling Help
> I believe scrollV is only a property for textfields.
> I'm using canvases and so I'm controlling the scrolling currently via
> parent.horizontalScrollPosition
> - J
> Dustin Tauer wrote:
>> The first thing I thought of was an easing function for the scrolling.
>> It's probably something you already experimented with, but I thought
> I'd
>> suggest it.
>> When your dragging you're probably using a ENTER_FRAME or MOUSE_MOVE
>> style event to adjust the scrolling. So instead of scrolling directly
>> to where it needs to be:
>> parent.scrollV = newValue
>> ...you'd want to ease it:
>> parent.scrollV = newValue/2 (or a larger number for more lag)
>> D
>> Dustin Tauer
>> V.P Training & Development
>> Easel Solutions, Inc.
>> 23 Empire Drive
>> St. Paul, MN 55116
>> p. 651-602-5654 | f. 651-602-3154
>> http://www.easelsolutions.com
>> -----Original Message-----
>> From: mnswf@googlegroups.com [mailto:mnswf@googlegroups.com] On Behalf
>> Of jonathan doklovic
>> Sent: Wednesday, July 01, 2009 9:28 AM
>> To: mnswf@googlegroups.com
>> Subject: [mnswf] Need Smooth Scrolling Help
>> Hey,
>> I'm working on a project where user's can drop things on to a canvas
> and
>> then drag them around.
>> The canvas is inside of another canvas. The parent is used as the
>> visible area and scrolls.
>> The child by default is bigger than the parent so scrollbars are
> always
>> present.
>> When the user drags an object outside of the visible area, I want the
>> parent canvas to scroll. (pretty easy).
>> Here's where it gets complex.... when the users drags an object past
>> the width/height of the child canvas, I want the child canvas to
> expand
>> and scroll as the user moves the object. Also, if the user then moves
>> the object less than the default bounds, i want the child canvas to
>> shrink back up and scroll.
>> If any of you have ever used MagicDraw (the diagramming tool) this is
>> how it works when editing a diagram.
>> I actually have all of this working now, but when you drag past the
>> visible area, the scrolling happens WAY too fast and it's really hard
> to
>> control.
>> I was hoping to find some solution that would let me slow down the
>> scrolling and make it more smooth.
I have build a feature that involves zoom and pan which resulted
windowing a small portion like you just mentioned.
In my case, I offer a panning tool but I think you might want to rid
the default scrollbars and add your custom scrollbar (so you can
update and manipulate).
To keep all the numbers straight I placed a "Resize" and "Move" effect
in parallel pointing at a common target UIComponent.
Then whenever a user zoom or pan, I keep track of the position and
magnification to update my slider (your scrollbar) according.
For windowing, use a canvas of desirable dimension as mask.
On Wed, Jul 1, 2009 at 10:23 AM, jonathan doklovic<mn...@sysbliss.com> wrote:
> It might help, but there's more to it....
> When the child canvas resizes due to moving an object out of the bounds,
> the parent adjusts it's scrollbars automatically due to the fact that
> I'm required to have autolayout=true. But when the object moves out of
> the visible area, it's also telling the parent to scroll to it's
> position so that it's within the visible area all the time.
> I think that when the child canvas resizes, both scroll events are
> happening which drives the thing crazy. problem is, I don't know how to
> solve this since there are cases when an object moves and needs
> scrolling to happen but the child has not resized.
> - Jonathan
> Dustin Tauer wrote:
>> Ha...my bad. I was recklessly pseudo coding ;)
>> So would easing the horizontalScrollPosition work?
>> Dustin Tauer
>> V.P Training & Development
>> Easel Solutions, Inc.
>> 23 Empire Drive
>> St. Paul, MN 55116
>> p. 651-602-5654 | f. 651-602-3154
>> http://www.easelsolutions.com
>> -----Original Message-----
>> From: mnswf@googlegroups.com [mailto:mnswf@googlegroups.com] On Behalf
>> Of jonathan doklovic
>> Sent: Wednesday, July 01, 2009 10:00 AM
>> To: mnswf@googlegroups.com
>> Subject: [mnswf] Re: Need Smooth Scrolling Help
>> I believe scrollV is only a property for textfields.
>> I'm using canvases and so I'm controlling the scrolling currently via
>> parent.horizontalScrollPosition
>> - J
>> Dustin Tauer wrote:
>>> The first thing I thought of was an easing function for the scrolling.
>>> It's probably something you already experimented with, but I thought
>> I'd
>>> suggest it.
>>> When your dragging you're probably using a ENTER_FRAME or MOUSE_MOVE
>>> style event to adjust the scrolling. So instead of scrolling directly
>>> to where it needs to be:
>>> parent.scrollV = newValue
>>> ...you'd want to ease it:
>>> parent.scrollV = newValue/2 (or a larger number for more lag)
>>> D
>>> Dustin Tauer
>>> V.P Training & Development
>>> Easel Solutions, Inc.
>>> 23 Empire Drive
>>> St. Paul, MN 55116
>>> p. 651-602-5654 | f. 651-602-3154
>>> http://www.easelsolutions.com
>>> -----Original Message-----
>>> From: mnswf@googlegroups.com [mailto:mnswf@googlegroups.com] On Behalf
>>> Of jonathan doklovic
>>> Sent: Wednesday, July 01, 2009 9:28 AM
>>> To: mnswf@googlegroups.com
>>> Subject: [mnswf] Need Smooth Scrolling Help
>>> Hey,
>>> I'm working on a project where user's can drop things on to a canvas
>> and
>>> then drag them around.
>>> The canvas is inside of another canvas. The parent is used as the
>>> visible area and scrolls.
>>> The child by default is bigger than the parent so scrollbars are
>> always
>>> present.
>>> When the user drags an object outside of the visible area, I want the
>>> parent canvas to scroll. (pretty easy).
>>> Here's where it gets complex.... when the users drags an object past
>>> the width/height of the child canvas, I want the child canvas to
>> expand
>>> and scroll as the user moves the object. Also, if the user then moves
>>> the object less than the default bounds, i want the child canvas to
>>> shrink back up and scroll.
>>> If any of you have ever used MagicDraw (the diagramming tool) this is
>>> how it works when editing a diagram.
>>> I actually have all of this working now, but when you drag past the
>>> visible area, the scrolling happens WAY too fast and it's really hard
>> to
>>> control.
>>> I was hoping to find some solution that would let me slow down the
>>> scrolling and make it more smooth.
|
