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

Sample JavaScript code for Workflow feature, displaying elements from an input array based on specified attributes. Each element can be visually connected to other elements in a hierarchical structure through draggable anchor points between nodes.

An extension feature you can add is defining elements by types such as logic, timer, console.log, alert, OpenAI, GoogleSheet, etc. For each type, handle logic code to create no-code applications. Examples include totaljs flow, Microsoft automate, n8n.io, etc.

Note: I do not support reinventing the wheel. However, for some less complex applications that require only a few features, using external libraries might not be necessary. In such cases, custom coding is lightweight and easier to manage. For example, I developed custom classes for modules and plugins I’m selling on Envato, such as PolyTourGuide and PolyWidgets, to implement this feature.

HTML

CSS

JavaScript

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

About WikiPoly

Contact

HTML

CSS

JavaScript

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

Login

Register