feat: bring to front and send to back layers

guiseek · Aug 26, 2024 · 2251798 · 2251798
1 parent 352d72a
commit 2251798
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 4 deletions.
diff --git a/src/constants/icon.ts b/src/constants/icon.ts
@@ -4,4 +4,6 @@ export const icon = {
   text: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"> <path d="M420-160v-520H200v-120h560v120H540v520H420Z"/> </svg>`,
   edit: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"> <path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/> </svg>`,
   delete: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"> <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/> </svg>`,
+  bringToFront: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"> <path d="M360-280q-33 0-56.5-23.5T280-360v-400q0-33 23.5-56.5T360-840h400q33 0 56.5 23.5T840-760v400q0 33-23.5 56.5T760-280H360Zm0-80h400v-400H360v400ZM200-200v80q-33 0-56.5-23.5T120-200h80Zm-80-80v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm160 480v-80h80v80h-80Zm160 0v-80h80v80h-80Zm160 0v-80h80v80h-80Z"/> </svg>`,
+  sendToBack: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"> <path d="M200-120q-33 0-56.5-23.5T120-200v-480h80v480h480v80H200Zm160-240v80q-33 0-56.5-23.5T280-360h80Zm-80-80v-80h80v80h-80Zm0-160v-80h80v80h-80Zm80-160h-80q0-33 23.5-56.5T360-840v80Zm80 480v-80h80v80h-80Zm0-480v-80h80v80h-80Zm160 0v-80h80v80h-80Zm0 480v-80h80v80h-80Zm160-480v-80q33 0 56.5 23.5T840-760h-80Zm0 400h80q0 33-23.5 56.5T760-280v-80Zm0-80v-80h80v80h-80Zm0-160v-80h80v80h-80Z"/> </svg>`
 }
diff --git a/src/features/canvas/canvas.ts b/src/features/canvas/canvas.ts
@@ -23,7 +23,7 @@ class Canvas extends HTMLCanvasElement implements CanvasLike {
   }
 
   addLayer(layer: LayerLike) {
-    layer.setOrder(this.#layers.length + 1)
+    layer.setOrder(this.#layers.length)
     this.#layers.push(layer)
   }
 

diff --git a/src/features/context/handlers/on-context-close.ts b/src/features/context/handlers/on-context-close.ts
@@ -2,12 +2,19 @@ import {onContextClose} from '../events'
 import {canvas} from '@features/canvas'
 
 onContextClose(({context, option}) => {
-
+  if (option === 'bring-to-front') {
+    context.layer.setOrder(context.layer.order + 1)
+  }
+
+  if (option === 'send-to-back') {
+    context.layer.setOrder(context.layer.order - 1)
+  }
+
   if (option === 'remove') {
     canvas.removeLayer(context.layer)
   }
-  
+
   canvas.setIsContextMenu(false)
-  
+
   context.close()
 })
diff --git a/src/features/context/handlers/on-context-open.ts b/src/features/context/handlers/on-context-open.ts
@@ -23,6 +23,34 @@ onContextOpen(({layer, position}) => {
     context.addDivider()
   }
 
+  context.addButton(
+    new ContextButton(
+      context,
+      {
+        icon: icon.bringToFront,
+        text: 'Trazer para frente',
+      },
+      {
+        value: 'bring-to-front',
+      }
+    )
+  )
+
+  context.addButton(
+    new ContextButton(
+      context,
+      {
+        icon: icon.sendToBack,
+        text: 'Enviar para trás',
+      },
+      {
+        value: 'send-to-back',
+      }
+    )
+  )
+
+  context.addDivider()
+
   context.addButton(
     new ContextButton(
       context,