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

[Tim Buchholz]

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.

[Benny LAI]

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

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

[Benny LAI]

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();
      }