diff --git a/js/mask_painter_manager.js b/js/mask_painter_manager.js index a847422..f21ad9c 100644 --- a/js/mask_painter_manager.js +++ b/js/mask_painter_manager.js @@ -343,53 +343,60 @@ async finalizeDrawing() { handleMouseEvent(e) { if (!this.activeLayer) return; - // --- DÉBUT DE LA CORRECTION --- - // On calcule la position de la souris + // On calcule la position et on vérifie si on est sur la barre d'outils const mainCanvasRect = this.node.previewCanvas.getBoundingClientRect(); const zoom = app.canvas.ds.scale || 1; const mouseX = (e.clientX - mainCanvasRect.left) / zoom; const mouseY = (e.clientY - mainCanvasRect.top) / zoom; const isOverToolbar = this.node.toolbar.isClickOnToolbar(mouseX, mouseY); - // Si la souris est sur la barre d'outils principale... + // CAS 1 : La souris est sur la barre d'outils principale if (isOverToolbar) { - // On réaffiche le curseur normal de la souris - this.liveOverlay.style.cursor = 'default'; - - // On met à jour l'aperçu SANS dessiner le curseur personnalisé (en passant 'null') - this.updateLivePreview(null); + this.liveOverlay.style.cursor = 'default'; // On montre le curseur normal + this.updateLivePreview(null); // On met à jour l'aperçu sans le curseur personnalisé - // Si on clique, on passe l'événement à la barre d'outils et on s'arrête là if (e.type === 'mousedown') { this.node.toolbar.handleClick(e, mouseX, mouseY); } - return; // On stoppe tout autre traitement + return; // On s'arrête ici } - - // Si on n'est PAS sur la barre d'outils, on cache le curseur normal - this.liveOverlay.style.cursor = 'none'; - // --- FIN DE LA CORRECTION --- + // CAS 2 : La souris est sur la zone de dessin + this.liveOverlay.style.cursor = 'none'; // On cache le curseur normal pour dessiner le nôtre if (e.type === 'mousedown') { this.isDrawing = true; const coords = this.getOriginalCoords(e); this.lastPoint = coords; this.drawStamp(coords); - } else if (e.type === 'mousemove') { + } + else if (e.type === 'mousemove') { if (this.isDrawing) { const coords = this.getOriginalCoords(e); this.drawStroke(this.lastPoint, coords); this.lastPoint = coords; } - } else if (e.type === 'mouseup' || e.type === 'mouseleave') { + } + else if (e.type === 'mouseup' || e.type === 'mouseleave') { this.isDrawing = false; } - // On passe l'événement pour que l'aperçu sache où dessiner le curseur personnalisé + // On met à jour l'aperçu et le curseur personnalisé this.updateLivePreview(e); } + drawStroke(from, to) { + const dist = Math.hypot(to.x - from.x, to.y - from.y); + const angle = Math.atan2(to.y - from.y, to.x - from.x); + const step = this.settings.size / 4; + for (let i = 0; i < dist; i += step) { + const x = from.x + (Math.cos(angle) * i); + const y = from.y + (Math.sin(angle) * i); + this.drawStamp({ x, y }); + } + this.drawStamp(to); + } + updateLivePreview(mouseEvent = null) { if (!this.liveCtx) return; this.liveCtx.clearRect(0, 0, this.liveOverlay.width, this.liveOverlay.height);