fix(svg-draw): рисование вместо перетаскивания блока

Блок-карточка урока draggable=true перехватывала зажатие мыши на холсте → тащился весь
блок, а не рисовалась линия. Теперь dragstart внутри .svgdraw-host отменяется, на холсте
заглушены нативный drag и выделение (user-select/-webkit-user-drag:none).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-03 20:16:43 +03:00
parent ef59023546
commit b678b2e226
2 changed files with 6 additions and 1 deletions
+4 -1
View File
@@ -46,7 +46,7 @@
linear-gradient(45deg,#f8fafc 25%,transparent 25%),linear-gradient(-45deg,#f8fafc 25%,transparent 25%),
linear-gradient(45deg,transparent 75%,#f8fafc 75%),linear-gradient(-45deg,transparent 75%,#f8fafc 75%);
background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0; }
.svgd-canvas { display:block; width:100%; height:auto; touch-action:none; cursor:crosshair; }
.svgd-canvas { display:block; width:100%; height:auto; touch-action:none; cursor:crosshair; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
.svgd-canvas.tool-select { cursor:default; }
.svgd-sel { outline:none; }
.svgd-selbox { fill:none; stroke:#8b5cf6; stroke-width:1.5; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; pointer-events:none; }
@@ -294,6 +294,9 @@
}
svg.addEventListener('pointerup', endDraw);
svg.addEventListener('pointercancel', endDraw);
// Block native HTML5 drag (the lesson block-card is draggable=true; without
// this, pressing on the canvas drags the whole block instead of drawing).
svg.addEventListener('dragstart', function (e) { e.preventDefault(); });
function isTiny(el) {
const b = el.getBBox();
+2
View File
@@ -1320,6 +1320,8 @@
// drag and drop
card.setAttribute('draggable', 'true');
card.addEventListener('dragstart', e => {
// не перехватывать холст SVG-рисовалки — там пользователь рисует
if (e.target.closest && e.target.closest('.svgdraw-host')) { e.preventDefault(); return; }
e.dataTransfer.setData('text/plain', bid);
card.classList.add('dragging');
});