Debug mode

[bluepichu]

Proposed by @djmisterjon in #46. Drawing bounding boxes, baselines, top/bottom for each line, etc. could be really helpful for debugging.

[bluepichu]

Here's what this looks like right now:

There are options for global enable/disable and the colors of each of the lines.

You can also override the global value for certain styles via a new optional debug option. Here, I've disabled debug mode for default:

I was considering adding in top/baseline/bottom/bounding per-line, but I'm going to forego that for now, I think.

[bluepichu]

PR Filed: #51.

[jonlepage]

hey awsome jobs , is look very nice!

[jonlepage]

for the top/baseline/bottom/bounding per-line.
I find the behavior difficult to manage align, so I just create a new proprety in pixi.style that allows to position in line.
it called : lineStyle: //'top'||'middle'||'bottom' , but your idea is greate with custom per style

MVPixi_Text.prototype.positioningChild = function(pixiText) {
    var data = pixiText._resultLine;
    var pixiChild = pixiText.children;
    var lS = pixiText._style.primary.lineStyle;
    var lA = pixiText._style.primary.align;
    var lH = pixiText._style.primary.lineHeight || 0;
    lS = lS==='middle'&& 0.5 || lS==='bottom'&& 1 || 0; // lineStyle
    lA = lA==='center'&& 0.5 || lA==='right'&& 1 || 0;  // lineAlign
    var limit = pixiText._style.primary.wordWrapWidth || Math.max.apply(Math, pixiText._dataLW);
    pixiText._limitLineMax = limit; // asign because alignBypicture work with limit and not
    for (var R=0, id=0, lineMaxH=0, Y=0, alignX=0, LEN=data.length; R<LEN; R++) {
        if(lA){ alignX = (limit-pixiText._dataLW[R])*lA; };
        for (var r=0, len=data[R].length; r<len; r++, id++) {
            pixiChild[id].anchor.y = lS;
            pixiChild[id].x = data[R][r]._x+alignX;
            pixiChild[id].y = Y;
        };
        Y+=pixiText._dataLH[R]+lH;
    };
return pixiText
};

[jonlepage]

I do not know why these now, but I am much fun to code and make debugger for my work.
Here is another, an extension with pixi debug, it is compatible, and allows to position the parent sprite container in the node js app interface.
see on youtube =>>