Eraser Plugin

The Eraser plugin provides an eraser tool that removes objects by drawing over them. Objects are highlighted as you draw, then deleted when you release.

Try it

• Select the Eraser tool and draw over objects to delete them
• Objects turn red when marked for deletion
• Release to confirm or press Escape to cancel

Usage

The Eraser plugin is included by default when using WovenCanvas. To configure it:

<template>
  <WovenCanvas
    :plugin-options="{
      eraser: {
      tailRadius: 16,
      tailLength: 10,
    }
    }"
  />
</template>

Options

Option	Type	Default	Description
tailRadius	number	8	Eraser collision radius in world units
tailLength	number	20	Maximum number of points in the eraser trail (1-20)

EraserPlugin({
  tailRadius: 16,   // Larger eraser radius
  tailLength: 10,   // Shorter trail
})

Features

• Capsule-based collision — Precise hit detection using capsule geometry along the stroke path
• HitGeometry support — Works with complex shapes and pen strokes
• Visual feedback — Objects are highlighted before deletion
• Cancellable — Press Escape to restore marked objects

Commands

import {
  StartEraserStroke,
  AddEraserStrokePoint,
  CompleteEraserStroke,
  CancelEraserStroke,
} from '@woven-canvas/plugin-eraser'

// Start erasing
editor.command(StartEraserStroke, { worldPosition: [100, 100] })

// Continue the stroke
editor.command(AddEraserStrokePoint, {
  strokeId,
  worldPosition: [150, 120],
})

// Delete marked objects
editor.command(CompleteEraserStroke, { strokeId })

// Cancel and restore marked objects
editor.command(CancelEraserStroke, { strokeId })

Components

Component	Description
EraserStroke	The visual eraser trail stroke
Erased	Marker component for objects marked for deletion

Checking Erased State

import { Erased } from '@woven-canvas/plugin-eraser'
import { hasComponent } from '@woven-canvas/core'

// Check if an entity is marked for deletion
const isMarked = hasComponent(ctx, entityId, Erased)

Vue Components

The Vue package provides the eraser toolbar button:

<script setup lang="ts">
import { WovenCanvas, EraserTool, SelectTool, Toolbar } from '@woven-canvas/vue'
</script>

<template>
  <WovenCanvas>
    <template #toolbar>
      <Toolbar>
        <SelectTool />
        <EraserTool />
      </Toolbar>
    </template>
  </WovenCanvas>
</template>