Objects should able to move "to front" or the "back"

[BuchholzTim]

Describe your Issue

Currently the level of an object is determined by its time of creation. This should be changeable in the UI.

You should be able to move something to the back or the the front.

[laihowo]

Is it possible to solve this issue by the canvas object method bringToFront() → {fabric.Object} ?

Reference: http://fabricjs.com/docs/fabric.Object.html#bringToFront

[laihowo]

I have just tried the following code snippet at DeleteTool.vue to prove it's possible to fix the issue.

    if (event.key === 'Delete') {
        this.canvas.getActiveObjects().forEach((obj) => {
          // If object are not selectable -> not deleteable
          if (obj.selectable) {
            this.canvas.remove(obj);
          }
        });
        this.canvas.discardActiveObject().renderAll();
      } else if (event.key === 'f') {
        this.canvas.getActiveObjects().forEach((obj) => {
          // If object are not selectable -> not movable
          if (obj.selectable) {
            this.canvas.bringToFront(obj)
          }
        });
        this.canvas.discardActiveObject().renderAll();
      } else if (event.key ==='g') {
        this.canvas.getActiveObjects().forEach((obj) => {
          // If object are not selectable -> not movable
          if (obj.selectable) {
            this.canvas.bringForward(obj)
          }
        });
        this.canvas.discardActiveObject().renderAll();
      } else if (event.key === 'b') {
        this.canvas.getActiveObjects().forEach((obj) => {
          // If object are not selectable -> not movable
          if (obj.selectable) {
            this.canvas.sendToBack(obj)
          }
        });
        this.canvas.discardActiveObject().renderAll();
      } else if (event.key === 'n') {
        this.canvas.getActiveObjects().forEach((obj) => {
          // If object are not selectable -> not movable
          if (obj.selectable) {
            this.canvas.sendBackwards(obj)
          }
        });
        this.canvas.discardActiveObject().renderAll();
      }