@@ -396,6 +396,7 @@ function renderMoreEvents() {
|
||||
}
|
||||
|
||||
let sentinelObserver = null;
|
||||
let suppressNextMouse = false;
|
||||
|
||||
function observeSentinel() {
|
||||
if (sentinelObserver) sentinelObserver.disconnect();
|
||||
@@ -1160,13 +1161,14 @@ function renderNodeToolbar() {
|
||||
{ type: 'cloud', icon: 'fa-cloud', color: '#22c55e', label: 'Cloud' },
|
||||
{ type: 'endpoint', icon: 'fa-laptop', color: '#ec4899', label: 'Endpoint' },
|
||||
{ type: 'other', icon: 'fa-circle', color: '#6b7280', label: 'Other' },
|
||||
{ type: 'shape:rectangle', icon: 'fa-vector-square', color: '#3b82f6', label: 'Box', isShape: true },
|
||||
{ type: 'shape:ellipse', icon: 'fa-circle', color: '#3b82f6', label: 'Ellipse', isShape: true },
|
||||
];
|
||||
bar.innerHTML = '<span class="text-secondary me-1 small" style="font-size:.7rem;line-height:26px;">Drag to canvas:</span>';
|
||||
iconMap.forEach(t => {
|
||||
const el = document.createElement('span');
|
||||
el.className = 'toolbar-node-item d-inline-flex align-items-center gap-1 px-2 py-1 rounded';
|
||||
el.className = 'd-inline-flex align-items-center gap-1 px-2 py-1 rounded';
|
||||
el.draggable = true;
|
||||
el.dataset.nodeType = t.type;
|
||||
el.style.cssText = 'cursor:grab;font-size:.75rem;color:' + t.color + ';background:' + t.color + '12;border:1px solid ' + t.color + '30;';
|
||||
el.innerHTML = '<i class="fas ' + t.icon + '" style="font-size:.75rem;"></i><span>' + t.label + '</span>';
|
||||
el.addEventListener('dragstart', (e) => {
|
||||
@@ -1175,15 +1177,6 @@ function renderNodeToolbar() {
|
||||
});
|
||||
bar.appendChild(el);
|
||||
});
|
||||
bar.innerHTML += '<span class="toolbar-shape-item d-inline-flex align-items-center gap-1 px-2 py-1 rounded ms-1" draggable="true" data-shape="rectangle" style="cursor:grab;font-size:.75rem;color:#3b82f6;background:#3b82f612;border:1px solid #3b82f630;"><i class="fas fa-vector-square" style="font-size:.75rem;"></i><span>Box</span></span>';
|
||||
bar.innerHTML += '<span class="toolbar-shape-item d-inline-flex align-items-center gap-1 px-2 py-1 rounded ms-1" draggable="true" data-shape="ellipse" style="cursor:grab;font-size:.75rem;color:#3b82f6;background:#3b82f612;border:1px solid #3b82f630;"><i class="fas fa-circle" style="font-size:.75rem;"></i><span>Ellipse</span></span>';
|
||||
|
||||
bar.querySelectorAll('.toolbar-shape-item').forEach(el => {
|
||||
el.addEventListener('dragstart', (e) => {
|
||||
e.dataTransfer.setData('text/plain', 'shape:' + el.dataset.shape);
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setupCanvasDrop() {
|
||||
@@ -1191,6 +1184,8 @@ function setupCanvasDrop() {
|
||||
wrapper.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; });
|
||||
wrapper.addEventListener('drop', async (e) => {
|
||||
e.preventDefault();
|
||||
suppressNextMouse = true;
|
||||
setTimeout(() => { suppressNextMouse = false; }, 100);
|
||||
const data = e.dataTransfer.getData('text/plain');
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const mx = e.clientX - rect.left - panX;
|
||||
@@ -1301,6 +1296,7 @@ function onMouseDown(e) {
|
||||
return;
|
||||
}
|
||||
if (e.button !== 0) return;
|
||||
if (suppressNextMouse) return;
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const mx = e.clientX - rect.left - panX;
|
||||
const my = e.clientY - rect.top - panY;
|
||||
|
||||
Reference in New Issue
Block a user