A layer management service class for draw2d touch ( http://www.draw2d.org ). It handles the movement of object in the stack moving them around. IMPORTANT: To work properly this class assumes, that all children of an object are positioned straight in front of that parent figure.

LayerManagementService.js

(function () {

    /**
     * @class pyriand3r.service.LayerManagementService
     * Handles the arranging of the mapObjects on the canvas.
     * Needed reimplementation because the method provided by draw2d is faulty (only toBack, toFront works, if you move
     * an object between other objects labeltext will vanish).
     * Reimplements the faulty behaviour by arranging the items only with toBack and toFront.
     * All children of a figure are supposed to be placed in front of the parent figure.
     *
     * @returns {pyriand3r.service.LayerManagementService}
     * @constructor
     */
    pyriand3r.service.LayerManagementService = function () {
        return {

            /**
             * @method
             * Moves the active object in front of all other objects to the top
             * of the stack.
             * Nothing special here because all children will be moved in front of the figure.
             *
             * @param object The object to move to the front
             */
            objectToFront: function (object) {
                if (object !== null) {
                    object.toFront();
                }
            },

            /**
             * @method
             * Moves the active object behind all other objects to the bottom of
             * the stack.
             * All children will be put behind the object by default, so we need to arrange them afterwards to
             * stay in front of the figure.
             *
             * @param object The object to move to the back
             * @param canvas The canvas
             */
            objectToBack: function (object, canvas) {
                var me = this;
                if (object !== null) {
                    object.toBack();

                    object.children.each(function (i, child) {
                        me.objectInFrontOf(child.figure, object, canvas);
                    });
                }
            },

            /**
             * @method
             * Moves the active object one step up in the stack to be in front of
             * the next object.
             * If object is at top, do nothing, else calculate it's children (they will be moved automatically)
             * and check if figure in front of the object has any own children. Then move object to front and
             * afterwards all figures in front of the figure the object should be in front of (and its children)
             * one after another to front so the stack will be correct again.
             *
             * @param object The object to move one step up
             * @param canvas The canvas
             */
            objectUp: function (object, canvas) {
                var figures = canvas.getFigures();
                var objectIndex = figures.indexOf(object);

                if (objectIndex === figures.getSize() - 1) {
                    return;
                }

                var upperObject = figures.get(objectIndex + 1 + object.children.getSize());
                var stepsUp = 1 + upperObject.children.getSize();

                var count = figures.getSize() - 1 - objectIndex - object.children.getSize() - stepsUp;

                object.toFront();

                while (count > 0) {
                    var figure = figures.get(objectIndex + stepsUp);
                    figure.toFront();
                    count -= figure.children.getSize();
                    count--;
                }
            },

            /**
             * @method
             * Moves the active object one step back in the stack to be behind the previous
             * object.
             * If the object is the lowest do nothing. Else calculate if the lower object is a child, checking down
             * till it find the parent (all child's are in front of its parent, so next figure that is not a child is
             * the parent), depending on this calculate where the object should be in the end. Then move the object
             * + it's children to back and afterwards all figures below the parent figure to back to rearrange the stack
             * again.
             *
             * @param object The object to move one step back
             * @param canvas The canvas
             */
            objectDown: function (object, canvas) {
                var me = this;
                var figures = canvas.getFigures();
                var objectIndex = figures.indexOf(object);

                if (objectIndex === 0) {
                    return;
                }

                var stepsDown = 0;
                do {
                    stepsDown++;
                } while (figures.get(objectIndex - stepsDown).getParent() !== null);

                var count = objectIndex - stepsDown;

                this.objectToBack(object, canvas);

                objectIndex = objectIndex + object.children.getSize();

                while (count > 0) {
                    var figure = figures.get(objectIndex - stepsDown);
                    this.objectToBack(figure, canvas);
                    count--;
                }
            },

            /**
             * @method
             * Move object in front of another object.
             * Check if object is at start somewhere in front of or behind the target. If behind move object to front
             * and then all object in front of target (and its children) to front. If object is somewhere in front of
             * the target move it to front and then all objets between the object and the target to front.
             * TODO: could be tweaked to only move objects between to front and then the objects before
             * TODO: the object to front
             *
             *
             * @param object The object to move in front of the target
             * @param inFrontOf Target the other object should be moved in front of
             * @param canvas The canvas
             */
            objectInFrontOf: function (object, inFrontOf, canvas) {
                var figures = canvas.getFigures();
                var objectIndex = figures.indexOf(object);
                var inFrontOfIndex = figures.indexOf(inFrontOf);
                var count = figures.getSize() - inFrontOfIndex - 1;
                var figure = null;

                object.toFront();

                if (objectIndex < inFrontOfIndex) {
                    while (count > 0) {
                        figure = figures.get(inFrontOfIndex);
                        figure.toFront();
                        count -= figure.children.getSize();
                        count--;
                    }
                } else if (objectIndex > inFrontOfIndex) {
                    count -= 1;
                    while (count > 0) {
                        figure = figures.get(inFrontOfIndex);
                        figure.toFront();
                        count -= figure.children.getSize();
                        count--;
                    }
                }
            },

            /**
             * @method
             * Move an object behind another object.
             * First checks if object is before or behind the target. If in front of the target object is moved to back
             * and then all objects between object and target to back. If the object is behind the target move object to
             * front and then all objects inclusively the target object to front.
             * TODO: Could be tweaked to only move objects between to front and then all objects in front of
             * TODO: the target to front.
             *
             * @param object The object to be moved behind the target
             * @param behindOf The target the other object should be moved behind of
             * @param canvas The canvas
             */
            objectBehindOf: function (object, behindOf, canvas) {
                var figures = canvas.getFigures();
                var objectIndex = figures.indexOf(object);
                var behindOfIndex = figures.indexOf(behindOf);
                var count = 0;
                var steps = 1;
                var figure = null;

                if (objectIndex > behindOfIndex) {
                    this.objectToBack(object);

                    count = behindOfIndex;
                    while (count > 0) {
                        figure = figures.get(behindOfIndex - object.children.getSize());
                        this.objectToBack(figure);
                        count -= figure.children.getSize() + 1;
                    }
                } else if (objectIndex < behindOfIndex) {
                    object.toFront();

                    count = figures.getSize() - behindOfIndex;

                    while(count > 0) {
                        figure = figures.get(behindOfIndex - objectIndex + object.children.getSize());
                        figure.toFront();
                        count -= figure.children.getSize() + 1;
                    }
                }
            }
        };
    };
})();