Drawing module to draw many drawItems

[claudiobosticco]

Hello, I would ask if it's feasible to use the drawing module to display a DrawPane with over 2000 DrawItems, or if I will have memory or others problems.

On those DrawItems I need to implement hovers, and mouseOver/mouseOut to change fill/line color on hover, and also on click, to simulate over/selected states, and contextMenus to implement functionalities for the DrawItems.

Moreover, for the same sake of memory, I need to create 25 or 30 of those DrawPanes, though I don't need to display them simultaneously. Is it feasible to create them all, or I need to destroy one to create another?
Do I need to create a pool of DrawItems?

Thanks in advance

[Isomorphic]

This depends on the drawingType, what the DrawItems are, the complexity within each item, the browser, the target machine, and other factors.

We have no particular shortcut to just testing it out - that's what you should do.

There's probably no value to attempting to "pool" DrawItems.

If these different DrawPanes don't need to be shown simultaneously then using a LRU approach and destroying ones that haven't been used in a while probably makes sense, but may not actually be necessary for good performance depending on the factors above.

[claudiobosticco]

Thanks for your reply.
Actually I'm trying to replace an implementation based on ListGrid, to represent sectors of seats of a stadium.
I'm pretty excited about this, as It has many advantages over the ListGrid implementation, but I hope I'm not using the wrong tool for the job.

For now I've noticed that trying to replicate the (cell-based) over states of the ListGrid implementation is pretty CPU-intensive.
You may try this test case:

var overColor = "#ffa000";
var selectedColor = "#FFD54F";
// var selectedOverColor = "#FFD54F";
var lineColor = "#81C784";
var fillColor = "#81C784";
var titleColor = "#212121";
var seatSize = 26;
var seatSizeWithBorder = seatSize + 4;
var titleAutoFitMargin = 3;

isc.defineClass("PostoDrawing", "DrawRect").addProperties({
    rounding: 0.2,
    autoDraw: true,
    lineColor: lineColor,
    fillColor: fillColor,
    titleLabelProperties: {
        lineColor: titleColor
    },
    canDrag: false,
    titleRotationMode: "neverRotate",
    titleAutoFit: true,
    titleAutoFitMargin: titleAutoFitMargin,
    width: seatSize,
    height: seatSize,
    canHover: true,
    getHoverHTML: function () {
        return isc.JSON.encode(this.posto);
    },
    mouseOver: function () {
        this.setCursor('pointer');
        this.setLineColor(overColor);
    },
    mouseOut: function () {
        this.setCursor('default');
        this.setLineColor(lineColor);
        if (this.selezionato) {
           this.setLineColor(selectedColor);
        } 
    },
    selezionato: false,
    click: function () {
        this.selezionato = !this.selezionato;
        if (this.selezionato) {
            this.setFillColor(selectedColor);
        } else {
            this.setFillColor(fillColor);
        }
    }
});

var mainPane = isc.DrawPane.create({
    showEdges: true,
    width: "100%",
    height: "100%", backgroundColor: "white"
});
for (var x = 0; x < 50; x++) {
    for (var y = 0; y < 30; y++) {
        var commonProps = {
            autoDraw: true,
            drawPane: mainPane, lineColor: "#66bb6a",
            canDrag: false,
            titleRotationMode: "neverRotate"
        };
        isc.PostoDrawing.create({
            titleAutoFit: true, titleAutoFitMargin: 5,
            left: x * seatSizeWithBorder + seatSizeWithBorder,
            top: y * seatSizeWithBorder + seatSizeWithBorder,
            width:seatSize,
            height: seatSize,
            title: '' + (x + 1)
        }, commonProps);
    }
}

and you may notice that the over effect can't chase the mouse pointer when moving fast, and the CPU utilisation goes pretty high.
This was not a problem with the ListGrid implementation.

I think I can live with a delayed over effect, using timers on mouseOver like this:

var overColor = "#ffa000";
var selectedColor = "#FFD54F";
// var selectedOverColor = "#FFD54F";
var lineColor = "#81C784";
var fillColor = "#81C784";
var titleColor = "#212121";
var seatSize = 26;
var seatSizeWithBorder = seatSize + 4;
var titleAutoFitMargin = 3;

isc.defineClass("PostoDrawing", "DrawRect").addProperties({
    rounding: 0.2,
    autoDraw: true,
    lineColor: lineColor,
    fillColor: fillColor,
    titleLabelProperties: {
        lineColor: titleColor
    },
    canDrag: false,
    titleRotationMode: "neverRotate",
    titleAutoFit: true,
    titleAutoFitMargin: titleAutoFitMargin,
    width: seatSize,
    height: seatSize,
    canHover: true,
    getHoverHTML: function () {
        return isc.JSON.encode(this.posto);
    },
     setAsOver: function () {
        this.hovered = true;
        this.setLineColor(overColor);
    },
    mouseOver: function () {
        this.setCursor('pointer');
        this.timerID = this.delayCall('setAsOver', [], 100);
    },
    mouseOut: function () {
        isc.Timer.clear(this.timerID);
        this.setCursor('default');
        this.timerID = null;
        if (this.hovered) {
            this.hovered = false;
            this.setLineColor(lineColor);
            if (this.selezionato) {
                this.setLineColor(selectedColor);
            } else {
                // this.setFillColor(fillColor);
                // this.setLineColor(lineColor);
            }
        }
    },
    selezionato: false,
    click: function () {
        this.selezionato = !this.selezionato;
        if (this.selezionato) {
            this.setFillColor(selectedColor);
        } else {
            this.setFillColor(fillColor);
        }
    }
});

var mainPane = isc.DrawPane.create({
    showEdges: true,
    width: "100%",
    height: "100%", backgroundColor: "white"
});
for (var x = 0; x < 50; x++) {
    for (var y = 0; y < 30; y++) {
        var commonProps = {
            autoDraw: true,
            drawPane: mainPane, lineColor: "#66bb6a",
            canDrag: false,
            titleRotationMode: "neverRotate"
        };
        isc.PostoDrawing.create({
            titleAutoFit: true, titleAutoFitMargin: 5,
            left: x * seatSizeWithBorder + seatSizeWithBorder,
            top: y * seatSizeWithBorder + seatSizeWithBorder,
            width:seatSize,
            height: seatSize,
            title: '' + (x + 1)
        }, commonProps);
    }
}

But I hope I won't encounter more severe problems in pursuing this route.

[Isomorphic]

See the docs for drawPane.drawingType: incremental updates for just a few elements are faster in SVG mode, whereas in the default (bitmap) mode every incremental change necessarily causes all contents in the underlying <canvas> element to be re-drawn.

[claudiobosticco]

Thanks for the heads up, I wasn't aware of the drawingType attribute.

Actually I've done some test, and while the over effect is perfect using svg, it requires much more time for the initial draw and also requires much more memory, so for now I'll stick with bitmap.