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:
@@ -46,7 +46,7 @@
|
|||||||
linear-gradient(45deg,#f8fafc 25%,transparent 25%),linear-gradient(-45deg,#f8fafc 25%,transparent 25%),
|
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%);
|
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; }
|
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-canvas.tool-select { cursor:default; }
|
||||||
.svgd-sel { outline:none; }
|
.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; }
|
.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('pointerup', endDraw);
|
||||||
svg.addEventListener('pointercancel', 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) {
|
function isTiny(el) {
|
||||||
const b = el.getBBox();
|
const b = el.getBBox();
|
||||||
|
|||||||
@@ -1320,6 +1320,8 @@
|
|||||||
// drag and drop
|
// drag and drop
|
||||||
card.setAttribute('draggable', 'true');
|
card.setAttribute('draggable', 'true');
|
||||||
card.addEventListener('dragstart', e => {
|
card.addEventListener('dragstart', e => {
|
||||||
|
// не перехватывать холст SVG-рисовалки — там пользователь рисует
|
||||||
|
if (e.target.closest && e.target.closest('.svgdraw-host')) { e.preventDefault(); return; }
|
||||||
e.dataTransfer.setData('text/plain', bid);
|
e.dataTransfer.setData('text/plain', bid);
|
||||||
card.classList.add('dragging');
|
card.classList.add('dragging');
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user