Workflow Builder in JavaScript: Connecting Nodes with Sample Code

HTML

CSS

JavaScript

const arr_els = [
    { id: 1, label: 'JavaScript' },
    { id: 2, label: 'FrontEnd' },
    { id: 3, label: 'BackEnd' },
    { id: 4, label: 'Mobile Apps' },
    { id: 5, label: 'Desktop Apps' },
    { id: 6, label: 'Machine Learning' }
];

function getRandomPosition(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

arr_els.forEach(el => {
    el.top = getRandomPosition(50, 300);
    el.left = getRandomPosition(50, 600);
});

const connections = [];
const connectedAnchors = new Map();
let isConnecting = false;

arr_els.forEach((el) => createElementBox(el));

const label = document.createElement('div');
    label.className = 'label';
    label.textContent = element.label;

const closeBtn = document.createElement('div');
    closeBtn.className = 'close-btn';
    closeBtn.textContent = 'x';
    closeBtn.onclick = () => {
        elBox.remove();
        removeConnections(elBox.id);
    };

const leftAnchor = document.createElement('div');
    leftAnchor.className = 'anchor left';
    leftAnchor.setAttribute('data-id', `${elBox.id}-left`);

const rightAnchor = document.createElement('div');
    rightAnchor.className = 'anchor right';
    rightAnchor.setAttribute('data-id', `${elBox.id}-right`);

elBox.appendChild(leftAnchor);
    elBox.appendChild(label);
    elBox.appendChild(rightAnchor);
    elBox.appendChild(closeBtn);
    container.appendChild(elBox);

makeDraggable(elBox);
    addAnchorEvents(leftAnchor);
    addAnchorEvents(rightAnchor);
}

function addAnchorEvents(anchor) {
    if (anchor.classList.contains('left')) return;

anchor.addEventListener('mousedown', (e) => {
        e.stopPropagation();
        e.preventDefault();
        isConnecting = true;

const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', e.clientX);
        line.setAttribute('y1', e.clientY);
        line.setAttribute('x2', e.clientX);
        line.setAttribute('y2', e.clientY);
        line.setAttribute('stroke', 'black');
        line.setAttribute('stroke-width', '2');
        document.getElementById('svg-container').appendChild(line);

const deleteButton = document.createElement('div');
        deleteButton.className = 'delete-btn';
        deleteButton.textContent = 'x';
        document.getElementById('container').appendChild(deleteButton);

function onMouseMove(e) {
            line.setAttribute('x2', e.clientX);
            line.setAttribute('y2', e.clientY);
            updateDeleteButtonPosition(line, deleteButton);
        }

function onMouseUp(e) {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);

const target = document.elementFromPoint(e.clientX, e.clientY);

if (target && target.classList.contains('anchor') && target.classList.contains('left')) {
                const fromId = anchor.getAttribute('data-id');
                const toId = target.getAttribute('data-id');

if (!connections.some(conn => (conn.from === fromId && conn.to === toId) || (conn.from === toId && conn.to === fromId))) {
                    line.setAttribute('x2', e.clientX);
                    line.setAttribute('y2', e.clientY);

if (!connectedAnchors.has(anchor)) {
                        connectedAnchors.set(anchor, []);
                    }

connectedAnchors.get(anchor).push({ target, line, deleteButton });
                    connectedAnchors.set(target, { target: anchor, line, deleteButton });

connections.push({
                        from: anchor.getAttribute('data-id'),
                        to: target.getAttribute('data-id')
                    });

updateLinePosition(anchor, target, line);
                    updateDeleteButtonPosition(line, deleteButton);

deleteButton.onclick = () => {
                        line.remove();
                        deleteButton.remove();
                        removeConnection(anchor.getAttribute('data-id'), target.getAttribute('data-id'));
                    };
                } else {
                    line.remove();
                    deleteButton.remove();
                }
            } else {
                line.remove();
                deleteButton.remove();
            }

isConnecting = false;
            console.log("Current Connections: ", connections);
        }

document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    });
}

function updateDeleteButtonPosition(line, deleteButton) {
    const x1 = parseFloat(line.getAttribute('x1'));
    const y1 = parseFloat(line.getAttribute('y1'));
    const x2 = parseFloat(line.getAttribute('x2'));
    const y2 = parseFloat(line.getAttribute('y2'));

const midX = (x1 + x2) / 2;
    const midY = (y1 + y2) / 2;

deleteButton.style.position = 'absolute';
    deleteButton.style.left = `${midX - deleteButton.offsetWidth / 2}px`;
    deleteButton.style.top = `${midY - deleteButton.offsetHeight / 2}px`;
    deleteButton.style.zIndex = 10;
}

function updateLinePosition(anchor1, anchor2, line) {
    const anchor1Rect = anchor1.getBoundingClientRect();
    const anchor2Rect = anchor2.getBoundingClientRect();

const svgRect = document.getElementById('svg-container').getBoundingClientRect();

line.setAttribute('x1', anchor1Rect.left + anchor1Rect.width / 2 - svgRect.left);
    line.setAttribute('y1', anchor1Rect.top + anchor1Rect.height / 2 - svgRect.top);
    line.setAttribute('x2', anchor2Rect.left + anchor2Rect.width / 2 - svgRect.left);
    line.setAttribute('y2', anchor2Rect.top + anchor2Rect.height / 2 - svgRect.top);

function makeDraggable(element) {
    let offsetX, offsetY;
    element.addEventListener('mousedown', (e) => {
        if (isConnecting) return;
        e.preventDefault();
        offsetX = e.clientX - element.getBoundingClientRect().left;
        offsetY = e.clientY - element.getBoundingClientRect().top;

function onMouseMove(e) {
            element.style.left = `${e.clientX - offsetX}px`;
            element.style.top = `${e.clientY - offsetY}px`;
            updateAllLines(element);
        }

function onMouseUp() {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
            savePositions();
        }

document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    });
}

for (const [keyAnchor, value] of connectedAnchors) {
        if (Array.isArray(value)) {
            value.forEach(({ target, line, deleteButton }) => {
                if (target.closest('.element-box') === element) {
                    updateLinePosition(keyAnchor, target, line);
                    updateDeleteButtonPosition(line, deleteButton);
                }
            });
        } else {
            if (value.target.closest('.element-box') === element) {
                updateLinePosition(keyAnchor, value.target, value.line);
                updateDeleteButtonPosition(value.line, value.deleteButton);
            }
        }
    }
}

function removeConnections(elementId) {
    for (let i = connections.length - 1; i >= 0; i--) {
        if (connections[i].from.includes(elementId) || connections[i].to.includes(elementId)) {
            connections.splice(i, 1);
        }
    }

for (const [anchor, connection] of connectedAnchors.entries()) {
        if (Array.isArray(connection)) {
            connection.forEach(({ target, line, deleteButton }) => {
                if (anchor.getAttribute('data-id').includes(elementId) || target.getAttribute('data-id').includes(elementId)) {
                    line.remove();
                    deleteButton.remove();
                }
            });
        } else {
            if (anchor.getAttribute('data-id').includes(elementId) || connection.target.getAttribute('data-id').includes(elementId)) {
                connection.line.remove();
                connection.deleteButton.remove();
            }
        }
    }
    connectedAnchors.forEach((value, key) => {
        if (key.getAttribute('data-id').includes(elementId)) {
            connectedAnchors.delete(key);
        }
    });

console.log("Updated Connections: ", connections);
}

function removeConnection(fromId, toId) {
    for (let i = connections.length - 1; i >= 0; i--) {
        if (connections[i].from === fromId && connections[i].to === toId) {
            connections.splice(i, 1);
            break;
        }
    }
    for (const [anchor, anchorConnections] of connectedAnchors.entries()) {
        if (Array.isArray(anchorConnections)) {
            for (let i = anchorConnections.length - 1; i >= 0; i--) {
                if (
                    (anchor.getAttribute('data-id') === fromId && anchorConnections[i].target.getAttribute('data-id') === toId) ||
                    (anchor.getAttribute('data-id') === toId && anchorConnections[i].target.getAttribute('data-id') === fromId)
                ) {
                    anchorConnections[i].line.remove();
                    anchorConnections[i].deleteButton.remove();
                    anchorConnections.splice(i, 1);

if (anchorConnections.length === 0) {
                        connectedAnchors.delete(anchor);
                    }
                    break;
                }
            }
        } else {
            if (
                (anchor.getAttribute('data-id') === fromId && anchorConnections.target.getAttribute('data-id') === toId) ||
                (anchor.getAttribute('data-id') === toId && anchorConnections.target.getAttribute('data-id') === fromId)
            ) {
                anchorConnections.line.remove();
                anchorConnections.deleteButton.remove();
                connectedAnchors.delete(anchor);
            }
        }
    }

console.log("Removed connection: ", connections);
}

Preview: Workflow Builder in JavaScript: Connecting Nodes with Sample Code

By me a coffee

<body>

@polyxgo

PolyXGO

Đoạn mã JavaScript mẫu cho tính năng Workflow, hiển thị các phần tử từ một mảng đầu vào dựa trên các thuộc tính được chỉ định. Mỗi phần tử có thể được kết nối trực quan với các phần tử khác theo cấu trúc phân cấp thông qua các điểm neo có thể kéo thả giữa các nút.

Tính năng mở rộng bạn có thể viết bổ sung việc định nghĩa theo type cho các phần tử: logic, timer, console.log, alert, OpenAI, GoogleSheet,… Ứng với các type bạn xử lý logic code để kết hợp tạo ra các ứng dụng dạng no-code. Ví dụ các như: totaljs flow, automate microsoft, n8n.io,…

Lưu ý: mình không ủng hộ việc làm lại cái bánh xe. Tuy nhiên, ở một số ứng dụng không quá phức tạp, chỉ cần một số tính năng thì chúng ta cũng không cần sử dụng các thư viện ngoài. Khi đó việc tự code cũng nhẹ và dễ kiểm soát hơn. Như tính năng này mình cũng phát triển class riêng cho các module, plugin mình đang xử lý bán trên Envato như PolyTourGuide, PolyWidgets.

HTML

CSS

JavaScript

Preview: Workflow Builder in JavaScript: Connecting Nodes with Sample Code

Về WikiPoly

Liên hệ

HTML

CSS

JavaScript

Preview: Workflow Builder in JavaScript: Connecting Nodes with Sample Code

Login

Register