Open frnora opened 1 year ago
The minWidth
and minHeight
options seem not to be currently supported by the PaperScroller
. The problem is that the size of the paper may not change when you drag an element over an edge (it only changes the origin of the paper) and the paper scroller does not know it should update.
I quickly tried to start listening not only to resize
events, but also to translate
events, and while that helped a bit, it didn't
completely solve the problem.
It depends on what you want to achieve. If you want to define a different initial paper size and increment size, I recommend the following:
contentOptions: () => {
const minArea = new g.Rect(0, 0, 2000, 1000);
const contentArea = minArea.union(graph.getBBox());
return {
contentArea
}
}
I would like to resize the paper while having a base (min size) - so your solution works. Thank you.
However, the initial jump (scroll) still occurs when dragging an item. It happens only when:
Calling any scroll methods on it, such a .center()
or scroll(1000, 1000) then scroll(0, 0)
prevents this. Is this intentional behavior or should this 'init' happen automatically but it does not?
EDIT: Actually, I just realized that it still has some issues but I am not sure whether it is related to the navigator or the scroller. When drag-moving the item 10px up and down (10px is my gridsize), the navigator redraws and shows either a narrower or a wider paper. But in theory the paper size should not be changed at all. The very same thing happens when I try to adjust the zoom level using the navigator. But here it is even more annoying because it causes frequent flashes. This does not happen when the paper is not resized. Here is what I am talking about: https://imgur.com/a/0iY2QYr
Calling any scroll methods on it, such a .center() or scroll(1000, 1000) then scroll(0, 0) prevents this. Is this intentional behavior or should this 'init' happen automatically but it does not?
It should happen automatically but it does not. If I remember correctly, the problem is we don't know when the paper scroller is attached to the DOM (you can set the scrollbars while the container is not in the DOM). It requires a breaking change (for instance throw an error if you try to call render()
when the paper scroller is not in the DOM yet).
The very same thing happens when I try to adjust the zoom level using the navigator. But here it is even more annoying because it causes frequent flashes. This does not happen when the paper is not resized. Here is what I am talking about: https://imgur.com/a/0iY2QYr
How to reproduce that? For instance in the Kitchen Sink application?
It should happen automatically but it does not. If I remember correctly, the problem is we don't know when the paper scroller is attached to the DOM (you can set the scrollbars while the container is not in the DOM). It requires a breaking change (for instance throw an error if you try to call
render()
when the paper scroller is not in the DOM yet).
That makes sense. Would be nice to point it out in the docs, tho.
Maybe a useless suggestion but couldn't it be fixed by some MutationObserver
checking the childList
for new entries? (this is just off the top of my head, I have not actually checked the code)
How to reproduce that? For instance in the Kitchen Sink application?
With the code from my first post, just replace the paperScroller with
let paperScroller = new ui.PaperScroller({
autoResizePaper: true,
scrollWhileDragging: true,
baseWidth: 500,
baseHeight: 500,
paper,
contentOptions: () => {
const minArea = new g.Rect(0, 0, 2000, 1000);
const contentArea = minArea.union(graph.getBBox());
return {
contentArea
};
}
});
Then:
You should be able to see the flashing/size changes of the paper in the navigator.
Thank you. I am able to reproduce it now.
The Navigator seems to work as expected. The problem lies within the PaperScroller that resizes the paper in a wrong way after the zoom.
We'll look into it. Please bear with us.
What happened?
Hi everybody (Roman :) ),
So I am trying to use the paper scroller's
autoResizePaper
functionality and it "kinda" works but it seems to behave quite erratically. Here is a quick test file (set up for the Test case 3 from below it):Case 1: - paper size is 2000 x 2000, no sizes set on the paper scroller
Dragging the circle upwards to the top-edge of the paper moves it close to the center of the paper, below the rectangle.
- changing the paper size to 2000 x 1000 Kinda same result.
There seems to be a jump after the paper scroller adjust the paper which moves the visible area and that causes the element to appear at incorrect x/y.
Case 2: - paper size is 2000 x 1000, paper scroller
baseWidth
andbaseHeight
are 2000 and 1000, so same as the paper Jump still occurs. Seems like it is there always on first adjust.Case 3: - paper size is 2000 x 1000, paper scroller
baseWidth: 500
,baseHeight: 200
,contentOptions: { minWidth: 2000, minHeight: 1000, allowNewOrigin: ‘any’ }
This is probably the worst case of these three. Huge jumps sometimes with big distances. Sometimes moving the element a bit puts it to turbo-speed. Sometimes I “lose” the circle from the navigator. Navigator doesn’t show the correct size.
E.g. these result can be produced imgur (pls excuse the circle label saying 'Rectangle', copy & paste & didn't realize)
Am I doing something wrong? Am I not setting something that should be set or setting something that should be set? I can't see anything very obvious and imho this setup should work.
Is this a bug on the paperscroller?
Version
jointjs+ 3.7
What browsers are you seeing the problem on?
Chrome
What operating system are you seeing the problem on?
Mac