Autoscroll - top level dragged item no scroll over the items under it.

[WriterStat]

To replicate:

Test 1: Open example 7 - autoscroll

Make sure scroll-container is height: 200px; to scroll.

Open all areas found under the first top level item - Saurischia

Make sure the tree items opened under Saurischia display/go far down past the viewable area. Make sure no other top level items are viewable in the viewable area, only the items under Saurischia.

Drag the first top level item - Saurischia down all the way to the bottom to try to scroll. No scroll down movement for me. Is there a change I need to make? Thanks.

Test 2: Open example 7 - autoscroll

Make sure scroll-container is height: 200px; to scroll.

Open the top level item - Saurischia

Leave Theropods and Sauropodomorphs visible but closed.
Open all areas under Ornithischians the other top level item in the list. Then scroll all the way back to the top.

Click and drag Saurischia, the first top level item to the very bottom of all the areas now open under Ornithischians, to the very bottom of the scrollable area, but don't drop it and drag it right back to the top.

It stops below the items in top level item - Saurischia. Doesn't reach the top of the scrollable area.

Thanks, for the insight. Need to scroll back to top and over items under it if no other top level items are showing.

[WriterStat]

Forgot to say I really appreciate this software kit and the author that wrote it, he's great! It's truly awesome. hope for a pointer to a fix. Much thanks.

[mbraak]

I'll have a look.

[mbraak]

I can reproduce the error. I'll try to find a fix.

[WriterStat]

Thank you! Appreciate it. I'll give it a go here as well. Haven't verified it, but It seems to happen only with the first top level node, if that helps any.

This code is great, I created an outliner used for writing my books with it, as the kernel portion of the base. Will post a picture later on, it's pretty sweet.

Wondering, looking at the scroll/drag scroll and drag and drop code.

If you might consider something like this:

If past parent scroll-container top or parent scroll-container bottom:

if (sdirection.up > 0 || sdirection.down > 0) { setTimeout(scroll(scroll-container), 100); }

Will allow scroll to continue scrolling to top or continue scrolling to bottom smoother, when dragged past top or bottom of parent scroll-container.

Much thanks! My typescript is horrible. So working in ES5/ES6 ES2017...

[mbraak]

I will look into the 'past parent scroll-container top ..' idea.

[WriterStat]

Only if it helps, basically it would be a change from the current cursor movement-based scroll. So it may not be as helpful.

The vertical scroll code seems to check if the previousTop is different and if it's < 20px from the scroll container's top or bottom. The target zone for scrolling. Then moves 20px on each cursor move.

The change would mean possibly reversing those, checking when in the 20px target zone then requesting tree scroll until the user moves the dragged item out of the 20px container's top/bottom target zone or until the tree has scrolled to it's natural top or bottom in the container.

And also using a setTimeout call wrapper to check if the above conditions and to slow the 20px scroll requests down smoothly. And of course removing the setTimeout when not needed.

[WriterStat]

The hoveredArea.top is set to -1 when initially dragging the first top-level node over the items under it. I think this is what causes the test results.

[mbraak]

There is a pr that's work in progress: #738.

[mbraak]

The pr works on my machine.

[WriterStat]

Cool! thanks! I grabbed a quick copy of the tree.jquery.debug.js build. And did a WinMerge with it and the current release to check the diff. Lots of changes.

I'll give it a test.

I'm stuck working on a tight schedule project for the next few days, so I might not report back for a bit.

Are there any breaking changes? Thanks.

[mbraak]

There are no breaking changes. The only thing that has changed is the automatic scrolling.

[mbraak]

The pr is merged in master.

[WriterStat]

Cool! Sorry haven't been around much, had too many software product deadlines and publishing my first scifi books.

Thanks, will give it a whirl. Will the example site get an update? Not much time, so thought I'd give it a quick look in the examples. Thanks again!

Best, -C

[mbraak]

I can't update the example site yet. That can only be done for a new release.

[WriterStat]

Appreciate the note back. I'll roll with it here, and the copy I have, and send you a note back if needed. I think we can close this for now and I'll reopen later or post a specific.

[WriterStat]

A while back, I created a proof of concept with my own code using jqtree as a kernel that works similarly to how https://workflowy.com does.

It works great! Then I added the ability to edit documents, add extra notes, add images, add checkboxes, add line/area complete, added storage etc... Mostly written in jquery/javascript.

Hopefully the images show up:

Does quite a bit more than the above, but just shared a couple of images here.

I didn't really ever release it, but use it myself for personal stuff, workflow, notes, writing novels, work projects organization, to do lists, etc...

I just wanted to show you, so you know how far this great set of code can be applied with other code. Appreciate you.

If you want the code base you can have a copy, drop me a note. Best, -C

[WriterStat]

Oh, one more. =)

[WriterStat]

I can also add you as a user if you want to try it out. It's a web app. Best, -C

[mbraak]

It's nice to see what people are building with the library. Thanks for sharing.

[mbraak]

The fix is included in version 1.7.5