@@ -396,6 +396,7 @@ function renderMoreEvents() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let sentinelObserver = null;
|
let sentinelObserver = null;
|
||||||
|
let suppressNextMouse = false;
|
||||||
|
|
||||||
function observeSentinel() {
|
function observeSentinel() {
|
||||||
if (sentinelObserver) sentinelObserver.disconnect();
|
if (sentinelObserver) sentinelObserver.disconnect();
|
||||||
@@ -1160,13 +1161,14 @@ function renderNodeToolbar() {
|
|||||||
{ type: 'cloud', icon: 'fa-cloud', color: '#22c55e', label: 'Cloud' },
|
{ type: 'cloud', icon: 'fa-cloud', color: '#22c55e', label: 'Cloud' },
|
||||||
{ type: 'endpoint', icon: 'fa-laptop', color: '#ec4899', label: 'Endpoint' },
|
{ type: 'endpoint', icon: 'fa-laptop', color: '#ec4899', label: 'Endpoint' },
|
||||||
{ type: 'other', icon: 'fa-circle', color: '#6b7280', label: 'Other' },
|
{ 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>';
|
bar.innerHTML = '<span class="text-secondary me-1 small" style="font-size:.7rem;line-height:26px;">Drag to canvas:</span>';
|
||||||
iconMap.forEach(t => {
|
iconMap.forEach(t => {
|
||||||
const el = document.createElement('span');
|
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.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.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.innerHTML = '<i class="fas ' + t.icon + '" style="font-size:.75rem;"></i><span>' + t.label + '</span>';
|
||||||
el.addEventListener('dragstart', (e) => {
|
el.addEventListener('dragstart', (e) => {
|
||||||
@@ -1175,15 +1177,6 @@ function renderNodeToolbar() {
|
|||||||
});
|
});
|
||||||
bar.appendChild(el);
|
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() {
|
function setupCanvasDrop() {
|
||||||
@@ -1191,6 +1184,8 @@ function setupCanvasDrop() {
|
|||||||
wrapper.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; });
|
wrapper.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; });
|
||||||
wrapper.addEventListener('drop', async (e) => {
|
wrapper.addEventListener('drop', async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
suppressNextMouse = true;
|
||||||
|
setTimeout(() => { suppressNextMouse = false; }, 100);
|
||||||
const data = e.dataTransfer.getData('text/plain');
|
const data = e.dataTransfer.getData('text/plain');
|
||||||
const rect = canvas.getBoundingClientRect();
|
const rect = canvas.getBoundingClientRect();
|
||||||
const mx = e.clientX - rect.left - panX;
|
const mx = e.clientX - rect.left - panX;
|
||||||
@@ -1301,6 +1296,7 @@ function onMouseDown(e) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (e.button !== 0) return;
|
if (e.button !== 0) return;
|
||||||
|
if (suppressNextMouse) return;
|
||||||
const rect = canvas.getBoundingClientRect();
|
const rect = canvas.getBoundingClientRect();
|
||||||
const mx = e.clientX - rect.left - panX;
|
const mx = e.clientX - rect.left - panX;
|
||||||
const my = e.clientY - rect.top - panY;
|
const my = e.clientY - rect.top - panY;
|
||||||
|
|||||||
Reference in New Issue
Block a user