Small window/large paper?

[dmb0058]

Introduction

I'm not 100% sure how to even express what I'm trying to do here, but I've cut and pasted a test that illustrates my problem at https://jsfiddle.net/dmb0058/vt5xL4jg/25/. I think my confusion stems from the fact that I don't understand the relationship between the "paper" and the "window" that I'm viewing it in. They start off looking like the same thing, but when I zoom in, it's as if I'm looking at a big paper through a smaller window, if that makes sense.

If I click on the background of this application and drag towards the bottom right, the image pans as I would expect. However, the grid moves with the links and elements - the area around the top and left of the image doesn't have the grid displayed. I'm guessing that the bit with the grid is the actual paper as this corresponds to the size I set in the paper constructor, but if that's the case, what is the "non-paper" part of the window? Why doesn't the colour of the 'non-paper' part change? And why can I drag the rectangles 'off the paper'?

I think my question is just "how can I prevent elements and links from being dragged off the paper, onto the 'non-paper', whatever that is?".

I think the 'non-paper' might be called the gutter?

David

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[kumilingus]

The issue is there was a breaking change in v4 regarding the grid and paper events.
In version 4 the grid is updated on transform event (not present in v3.7).

const panZoom = svgPanZoom(paper.svg, {
      viewportSelector: paper.layers,
      zoomEnabled: true,
      panEnabled: false,
      controlIconsEnabled: true,
      maxZoom: 2,
      minZoom: 0.1,
      onUpdatedCTM: (function() {
          let currentMatrix = paper.matrix();
          return function onUpdatedCTM(matrix){
              const { a, d, e, f } = matrix;
              const { a: ca, d: cd, e: ce, f: cf } = currentMatrix;
              const translateChanged = (e !== ce || f !== cf)
              if (translateChanged)
                  paper.trigger('translate', e - ce, f - cf, {});
              const scaleChanged = (a !== ca || d !== cd);
              if (scaleChanged)
                  paper.trigger('scale', a, d, {});
	      if (scaleChanged || translateChanged) {
                 paper.trigger('transform', matrix, {});
              }
              currentMatrix = matrix;
          }
      })()
  });

Here's updated example for version 4.

[DarkMagus]

@kumilingus
I tried the bordeless option on the Collapsible demo. However it introduces another issue:
1- Use the slider to zoom
2- Observe that part of the tree is no longer accessible when you scroll up or down

See the attached image where the bottom part of the tree is no longer accessible through either panning or scrolling

[kumilingus]

It's because the example is using virtual rendering (the elements outside of the viewport are not in the DOM).
You need to enable the useModelGeometry option of the content options.

const paperScroller = new ui.PaperScroller({
    paper: paper,
    padding: 50,
    cursor: 'grab',
    inertia: true,
    // No borders
    borderless: true,
    contentOptions: {
        useModelGeometry: true,
    },
});

[DarkMagus]

@kumilingus - I applied your suggestion and it works. However, it generates another issue: when you scroll either up or down, you will notice a large empty space at the top and the bottom of the graph as shown in the image.
How to get rid of this space ?

[kumilingus]

This is also as expected. If you don't want the user to zoom in/out to arbitrary point on the canvas you have to clamp the x and y values.

Here's one example of many:

paper.on('paper:pinch', (evt, ox, oy, scale) => {
    const zoom = paperScroller.zoom();
    const x = 500; // ignore ox
    const y = Math.max(0, Math.min(1000, oy)); // keep y in the paper bounds
    paperScroller.zoom(zoom * scale, { min: 0.2, max: 5, ox: x, oy: y, absolute: true });
});

You need to redefine the zoom-in and zoom-out buttons in toolbar too. Because they always zoom in/out into to a point in the middle of the viewport.

[DarkMagus]

@kumilingus
I used your suggestion with a small adjustement used 'blank:mousewheel' instead of 'paper:pinch' as follow:

paper.on('blank:mousewheel', (evt, ox, oy, scale) => {
const zoom = paperScroller.zoom();
const x = 500; // ignore ox
const y = Math.max(0, Math.min(1000, oy)); // keep y in the paper bounds
paperScroller.zoom(zoom * scale, { min: 0.2, max: 5, ox: x, oy: y, absolute: true });
});

The above solution does not solve the issue: the large empty space at the top and the bottom of the graph remains.
However, I notice that your solution introduces another issue where once you zoomed in with the mousewheel you can no longer zoom out with mousewheel

[kumilingus]

Zooming a diagram out must create the padding because the diagram gets smaller but the viewport window stays the same, so you need to fill the space with something (that padding will be either at the bottom or the top).

As being said, it was just an example. You can zoom in/out to any point you find useful e.g.

paperScroller.zoom(zoom * scale, { min: 0.2, max: 5, ox: 500, oy: 500, absolute: true });

Is there any software you can use as a reference for what you are looking for?

[kumilingus]

Zooming a diagram out must create the padding because the diagram gets smaller but the viewport window stays the same, so you need to fill the space with something (that padding will be either at the bottom or the top).

[DarkMagus]

@kumilingus - your picture summarizes perfectly the issue of the padding. My final question: is there any programmatic way to prevent this large padding from happening? It makes the layout ugly

[kumilingus]

is there any programmatic way to prevent this large padding from happening?

It's not an issue. It naturally happens if you zoom out at a point which is close to the diagram top.
To prevent this you need change the point you zoom at (as mentioned earlier).

You can also remove the padding completely as discussed here.

Is there any software you can use as a reference for what you are looking for?

Please provide a real-world application that does it the way you want.

[DarkMagus]

@kumilingus

We have an application developed using Ember and D3JS and we are now in the process of porting it to React. We would like to use a high level diagramming tool to help us port quickly the trees we developed using D3JS. I am currently playing with JointJS+.
I can show you what the current application does, however, I am not allowed to post pictures online. I can organize a webex if you like to show what the current application does and what we are expecting from JointJS+. What do you think?

[kumilingus]

Could you perhaps record a video and send it to support[at]client.io?