fix: reorder layers

src/features/canvas/canvas.ts

@@ -11,6 +11,11 @@ class Canvas extends HTMLCanvasElement implements CanvasLike {
   private offscreenContext: OffscreenCanvasRenderingContext2D | null
 
   #layers: LayerLike[] = []
+
+  get layers() {
+    return this.#layers
+  }
+
   #activeLayer: LayerLike | null = null
 
   #isContextMenu = false
@@ -33,8 +38,8 @@ class Canvas extends HTMLCanvasElement implements CanvasLike {
   }
 
   addLayer(layer: LayerLike) {
-    layer.setOrder(this.#layers.length)
     this.#layers.push(layer)
+    layer.setOrder(this.#layers.length)
   }
 
   removeLayer(layer: LayerLike) {
@@ -54,7 +59,7 @@ class Canvas extends HTMLCanvasElement implements CanvasLike {
     if (!this.offscreenContext || !this.context) return
 
     this.offscreenContext.clearRect(0, 0, this.width, this.height)
-    
+
     if (this.fill) {
       this.offscreenContext.fillStyle = this.fill
       this.offscreenContext.fillRect(0, 0, this.width, this.height)
@@ -144,6 +149,7 @@ class Canvas extends HTMLCanvasElement implements CanvasLike {
       this.#activeLayer = null
       this.render()
     }
+    this.setIsContextMenu(false)
   }
 
   #getCollidingLayers(position: Vector2) {
@@ -230,6 +236,40 @@ class Canvas extends HTMLCanvasElement implements CanvasLike {
 
     context.stroke(path)
   }
+
+  bringLayerToFront(layer: LayerLike) {
+    const order = layer.order + 1
+
+    const orders = this.layers.map((l) => l.order)
+
+    if (orders.includes(order)) {
+      for (const layer of this.layers) {
+        if (layer.order <= order) {
+          layer.setOrder(layer.order - 1)
+        }
+      }
+    }
+
+    layer.setOrder(order)
+    this.render().then()
+  }
+
+  sendLayerToBack(layer: LayerLike) {
+    const order = layer.order - 1
+
+    const orders = this.layers.map((l) => l.order)
+
+    if (orders.includes(order)) {
+      for (const layer of this.layers) {
+        if (layer.order >= order) {
+          layer.setOrder(layer.order + 1)
+        }
+      }
+    }
+
+    layer.setOrder(order)
+    this.render().then()
+  }
 }
 
 export const canvas = new Canvas()

src/features/context/handlers/on-context-close.ts

@@ -3,11 +3,11 @@ import {canvas} from '@features/canvas'
 
 onContextClose(({context, option}) => {
   if (option === 'bring-to-front') {
-    context.layer.setOrder(context.layer.order + 1)
+    canvas.bringLayerToFront(context.layer)
   }
 
   if (option === 'send-to-back') {
-    context.layer.setOrder(context.layer.order - 1)
+    canvas.sendLayerToBack(context.layer)
   }
 
   if (option === 'remove') {

src/features/context/handlers/on-context-open.ts

@@ -2,6 +2,7 @@ import {ContextButton} from '../context-button'
 import {onContextOpen} from '../events'
 import {icon} from '@constants/icon'
 import {Context} from '../context'
+import { canvas } from '@features/canvas'
 
 onContextOpen(({layer, position}) => {
   const context = new Context(layer)
@@ -23,6 +24,8 @@ onContextOpen(({layer, position}) => {
     context.addDivider()
   }
 
+  const orders = canvas.layers.map(l => l.order)
+
   context.addButton(
     new ContextButton(
       context,
@@ -31,6 +34,7 @@ onContextOpen(({layer, position}) => {
         text: 'Trazer para frente',
       },
       {
+        disabled: layer.order === Math.max(...orders),
         value: 'bring-to-front',
       }
     )
@@ -44,6 +48,7 @@ onContextOpen(({layer, position}) => {
         text: 'Enviar para trás',
       },
       {
+        disabled: layer.order === Math.min(...orders),
         value: 'send-to-back',
       }
     )

src/features/layers/layer.ts

@@ -27,7 +27,7 @@ export abstract class Layer extends OffscreenCanvas implements LayerLike {
 
   protected _active = true
 
-  protected _order = 1
+  protected _order = 0
 
   get id() {
     return this._id

src/styles/_context.scss

@@ -40,6 +40,11 @@ menu.cf-context {
     background-color: rgb(var(--cf-surface-rgb));
     transition: background-color 250ms ease-in-out;
 
+    &[disabled] {
+      opacity: .4;
+      cursor: default;
+    }
+
     svg {
       width: 24px;
       color: rgba(var(--cf-onsurface-rgb), 0.4);