Could you please expose DrawPane.pan() as a public API function?

[d.cavestro]

I've seen DrawPane has a pan() function that currenlty is not part of the public API. Could you please expose it?

It could be useful to implement some panning features as you suggested me. In particular it could be a good foundation to draw a drawpane whose virtual size is larger than a maximum boundary, drawing only the portion of items within actual canvas size but still being able to scroll over the virtual size (calling pan() on scroll).

Working on SmartClient Version: v10.0p_2015-01-27/LGPL Development Only (built 2015-01-27)

[Isomorphic]

Unnecessary; use scrollTo().

[d.cavestro]

Unnecessary; use scrollTo().

I don't quite follow you. Calling DrawPane.scrollTo doesn't seem to work on this scenario.

I was talking about a draw pane whose contents virtually overflows its actual size: this is a hack aiming reduce the underlying html5 canvas size, especially when rendering the whole contents would result in allocating the memory for i.e. a 16000x6000px image.
So the draw pane is contained within a container whose size reflects the drawpane virtual size: when the container scrolls the draw pane should automatically move to follow the viewport and pan its contents in order to simulate scrolling on a larger draw pane.

But maybe you were talking about a different/better solution to implement panning for a huge drawpane.

Anyway this is a raw but working example of what I meant

var mainPane = isc.DrawPane.create({
    autoDraw: false,
    width: 1300, //limited drawpane width
    height: 1000 //limited drawpane height
});

var px = 10000; //virtual drawpane width and height, actually set to its container (a layout)

var innerWrapper = isc.Layout.create ({
    height: px,
    width: px,
    backgroundColor: 'Cornsilk',
    members: [mainPane]
});

var outerWrapper = isc.Layout.create ({
    showEdges: true,
    height: "100%",
    width: "100%",
    overflow:'scroll',
    members: [innerWrapper],
    scrolled: function (x,y) {//on wrapper scroll
        mainPane.moveBy(-x,-y); //make the draw pane follow the viewport
        mainPane.pan (-x,-y); //pan its contents in order to simulate scrolling a larger draw pane
//        mainPane.scrollTo (-x,-y); //doesn't work in this scenario
    }
});

isc.HLayout.create({
    width: "100%",
    height: "100%",
    overflow:'auto',
    members: [outerWrapper]
});

//draw a bunch of naive items
var pass = 20;
for (var idx = 0; idx < px/pass; idx++) {
    var x = idx*pass;
    isc.DrawLabel.create({
        drawPane: mainPane,
        top: x,
        left: x,
        contents: 'item '+x,
        canDrag:false
    });
    isc.DrawLine.create({
        drawPane: mainPane,
        startPoint: [x+100,x],
        endPoint: [px,x],
        canDrag:false
    });
}

Please let me know in case I'm totally far afield... I'm striving for avoiding out of memory issues on the browser, so I thought that reducing the drawpane size I'd limit the amount of memory allocated for the underying html5 canvas, but still support scrolling on huge contents.

[Isomorphic]

Just use overflow:"hidden" and scrolling directly on the DrawPane.

What you're doing is re-inventing the scrolling that is already directly usable on DrawPane, and this will, if anything, create more memory usage.