[Rappid/ui.PaperScroller] Full page paperscroller

[Ewout Van Gossum]

Hi,

I was using a Paper instance with the following initialization:

this.wrappedObject = new joint.dia.Paper({
    el: $('#' + containerId),
    width: $('#' + containerId).width(),
    height: $('#' + containerId).height(),
    model: this.graph,
    interactive: {
        vertexAdd: false,
        vertexMove: false,
        vertexRemove: false,
        arrowheadMove: false
    },
    gridSize: 1,
    snapLinks: 50
});

The container which has the id viewport-container on I put the following css:

#viewport-container {
  background: none;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

This gives me a nice full screen sized paper (on which I built the UI of my application, which consists of panels that slide over the paper). I'm having trouble adding a PaperScroller to the current situation. I made the following changes:

this.wrappedObject = joint.dia.Paper({
    width: 2000,
    height: 2000,
    model: this.graph,
    interactive: {
        vertexAdd: false,
        vertexMove: false,
        vertexRemove: false,
        arrowheadMove: false
    },
    gridSize: 1,
    snapLinks: 50
});

var paperScroller = new joint.ui.PaperScroller({
    paper: this.wrappedObject
});
$('#' + containerId).append(paperScroller.render().el);
this.wrappedObject.on('blank:pointerdown', function (evt) {
    paperScroller.startPanning(evt);
});

But that doesn't seem to work well. When fiddling around with the css I can get the PaperScroller positioned correctly,but the paper doesn't move when panning. How do I need to initialize the PaperScroller in order to make the full screen sized paper pannable?

Kind Regards,

Ewout.

[dave]

Hi Ewout,

Could you please post a full working version of this? You don't have to include Rappid but just the HTML + JS showing this problem. It will make it much easier for us to see what's going on.

Thanks,

David

[Ewout Van Gossum]

Hi David,

Sorry for the late reply, I will try and get you a "working" example today.

Kind Regards,

Ewout.

--

---
You received this message because you are subscribed to a topic in the Google Groups "JointJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jointjs/0XqVrTpNEZQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jointjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Vriendelijke groeten,

Ewout Van Gossum