feat: draw hovered border

src/features/canvas/canvas.ts

@@ -35,10 +35,21 @@ class Canvas extends HTMLCanvasElement {
       .filter((layer) => layer.active)
       .sort((a, b) => a.order - b.order)
       .map(async (layer) => {
+        if (!this.context) return
+
         await layer.render()
         const {width, height} = layer
         const {x, y} = layer.position
         this.context?.drawImage(layer, x, y, width, height)
+
+        if (layer.hovered) {
+          const path = new Path2D()
+          path.rect(x, y, width, height)
+
+          this.context.lineWidth = 2
+          this.context.strokeStyle = 'rgba(255, 13, 233, 0.4)'
+          this.context.stroke(path)
+        }
       })
   }
 
@@ -78,34 +89,37 @@ class Canvas extends HTMLCanvasElement {
     if (this.#layer && this.#layer.dragging) {
       this.#layer.dragTo(position)
       this.render()
-    } else if (this.#layer && this.#layer.resizing) {
+    } else if (this.#layer && this.#layer.resizable && this.#layer.resizing) {
       this.#layer.resizeTo(position)
       this.render()
     } else {
-      const colliders = this.#layers.filter(({rect}) =>
-        position.isCollision(rect)
-      )
-
-      const hoveredLayer = colliders.reduce((highest, current) => {
-        return current.order > highest.order ? current : highest
-      }, colliders[0])
-
-      if (hoveredLayer) {
-        const direction = this.#getResizeDirection(hoveredLayer, position)
-
-        if (direction.x || direction.y) {
-          this.style.cursor =
-            direction.x && direction.y
-              ? 'nwse-resize'
-              : direction.x
-              ? 'ew-resize'
-              : 'ns-resize'
+      let hoveredLayer: Layer | null = null
+
+      for (const layer of this.#layers) {
+        if (layer.resizable && position.isCollision(layer.rect)) {
+          hoveredLayer = layer
+          const resizeDirection = this.#getResizeDirection(layer, position)
+
+          if (resizeDirection.x || resizeDirection.y) {
+            this.style.cursor =
+              resizeDirection.x && resizeDirection.y
+                ? 'nwse-resize'
+                : resizeDirection.x
+                ? 'ew-resize'
+                : 'ns-resize'
+          } else {
+            this.style.cursor = 'default'
+          }
         } else {
-          this.style.cursor = 'default'
+          layer.setHovered(false)
         }
-      } else {
-        this.style.cursor = 'default'
       }
+
+      if (hoveredLayer) {
+        hoveredLayer.setHovered(true)
+      }
+
+      this.render()
     }
   }
 

src/features/layers/handlers/on-create-text-layer.ts

@@ -4,9 +4,9 @@ import {onCreateTextLayer} from '../events'
 import {TextLayer} from '../text-layer'
 
 onCreateTextLayer(async ({text, size, color, bold}) => {
-  const layer = new TextLayer(540, 540, 0, 0)
+  const layer = new TextLayer(text.length * size * 5, size * 12, 0, 0)
 
-  layer.setText(text).setSize(size).setColor(color)
+  layer.setText(text).setSize(size).setColor(color).setResizable(false)
 
   if (bold) {
     await layer.setWeight('bold').render()

src/features/layers/layer.ts

@@ -19,6 +19,8 @@ export abstract class Layer extends OffscreenCanvas {
 
   protected _resizeDirection = {x: false, y: false}
 
+  protected _hovered = false
+
   protected _active = true
 
   protected _order = 1
@@ -35,6 +37,14 @@ export abstract class Layer extends OffscreenCanvas {
     return this._resizing
   }
 
+  get resizable() {
+    return this._resizable
+  }
+
+  get hovered() {
+    return this._hovered
+  }
+
   get offset() {
     return this._offset
   }
@@ -85,6 +95,11 @@ export abstract class Layer extends OffscreenCanvas {
     return this
   }
 
+  setHovered(value: boolean) {
+    this._hovered = value
+    return this
+  }
+
   startDrag(start: Vector2) {
     this.setDragging(true)
     this.offset.copy(start).sub(this.position)