Improve tilemap edition with new tools (#8264)

- Replace the existing Paint Brush with the Rectangle tool.
- Implement a proper Freehand Brush tool. It works with multiple tiles and single tile.
- Add a Picker tool (and it remember your previous tool before picking, and restore it once picking is done)
- Add a Bucket Fill tool: it can replace existing tiles or empty spaces. Filling is limited to the tilemap bounds within the canvas.
- Optimize drawing performance: reduce and limit the number of points stored while the cursor moves.
- Visually separate the tools and the (flips) modes.

Author: Bouh

newIDE/app/src/InstancesEditor/ClickInterceptor.js

@@ -151,7 +151,42 @@ class ClickInterceptor {
       deviceY
     );
 
-    if (pointerPathCoordinates[1]) {
+    const tileMapTileSelection = this.getTileMapTileSelection();
+
+    // For floodfill and picker, keep only a single coordinate (no drag path).
+    if (
+      tileMapTileSelection &&
+      (tileMapTileSelection.kind === 'floodfill' ||
+        tileMapTileSelection.kind === 'picker')
+    ) {
+      pointerPathCoordinates[0] = {
+        x: sceneCoordinates[0],
+        y: sceneCoordinates[1],
+      };
+      return;
+    }
+
+    if (tileMapTileSelection && tileMapTileSelection.kind === 'freehand') {
+      const lastPoint =
+        pointerPathCoordinates[pointerPathCoordinates.length - 1];
+      if (lastPoint) {
+        // Prevent near-duplicate points within minimum distance
+        const MIN_DISTANCE = 2; // pixels
+        const dx = sceneCoordinates[0] - lastPoint.x;
+        const dy = sceneCoordinates[1] - lastPoint.y;
+        if (Math.abs(dx) < MIN_DISTANCE && Math.abs(dy) < MIN_DISTANCE) {
+          return;
+        }
+      }
+      // Limit path points to prevent excessive memory usage
+      const MAX_PATH_POINTS = 10000;
+      if (pointerPathCoordinates.length < MAX_PATH_POINTS) {
+        pointerPathCoordinates.push({
+          x: sceneCoordinates[0],
+          y: sceneCoordinates[1],
+        });
+      }
+    } else if (pointerPathCoordinates[1]) {
       pointerPathCoordinates[1] = {
         x: sceneCoordinates[0],
         y: sceneCoordinates[1],

newIDE/app/src/InstancesEditor/TileMapPaintingPreview.js

@@ -7,7 +7,10 @@ import PixiResourcesLoader from '../ObjectsRendering/PixiResourcesLoader';
 import ViewPosition from './ViewPosition';
 import RenderedInstance from '../ObjectsRendering/Renderers/RenderedInstance';
 import Rendered3DInstance from '../ObjectsRendering/Renderers/Rendered3DInstance';
-import { type TileMapTileSelection } from './TileSetVisualizer';
+import {
+  type TileMapTileSelection,
+  getTileMapPaintingSelection,
+} from './TileSetVisualizer';
 import { AffineTransformation } from '../Utils/AffineTransformation';
 import {
   getTileSet,
@@ -159,6 +162,7 @@ class TileMapPaintingPreview {
     try {
       const texture = new PIXI.Texture(atlasTexture, rect);
       this.cache.set(cacheKey, texture);
+      return texture;
     } catch (error) {
       console.error(`Tile could not be extracted from atlas texture:`, error);
       return PixiResourcesLoader.getInvalidPIXITexture();
@@ -261,6 +265,7 @@ class TileMapPaintingPreview {
       return null;
     }
     const container = new PIXI.Container();
+    const paintingSelection = getTileMapPaintingSelection(tileMapTileSelection);
     tilesCoordinatesInTileMapGrid.forEach(tilesCoordinates => {
       const {
         bottomRightCorner,
@@ -271,7 +276,7 @@ class TileMapPaintingPreview {
       if (isBadlyConfigured) {
         texture = PixiResourcesLoader.getInvalidPIXITexture();
       } else {
-        if (tileMapTileSelection.kind === 'rectangle' && tileCoordinates) {
+        if (paintingSelection && tileCoordinates) {
           texture = this._getTextureInAtlas({
             tileSet,
             ...tileCoordinates,
@@ -290,8 +295,12 @@ class TileMapPaintingPreview {
         texture,
         scaleX,
         scaleY,
-        flipHorizontally: tileMapTileSelection.flipHorizontally || false,
-        flipVertically: tileMapTileSelection.flipVertically || false,
+        flipHorizontally: paintingSelection
+          ? paintingSelection.flipHorizontally
+          : false,
+        flipVertically: paintingSelection
+          ? paintingSelection.flipVertically
+          : false,
         tileSize,
         angle: instance.getAngle(),
       });
@@ -319,10 +328,11 @@ class TileMapPaintingPreview {
     if (!object || object.getType() !== 'TileMap::SimpleTileMap') return;
     const tileSet = getTileSet(object);
     const isBadlyConfigured = isTileSetBadlyConfigured(tileSet);
+    const paintingSelection = getTileMapPaintingSelection(tileMapTileSelection);
 
     if (
       isBadlyConfigured ||
-      tileMapTileSelection.kind === 'rectangle' ||
+      paintingSelection ||
       tileMapTileSelection.kind === 'erase'
     ) {
       const container = this._getPreviewSprites({