Backend-Api/ServiceHost/wwwroot/AssetsAdminNew/Tasks/js/DiagramTaskModal.js

var treeSection = document.querySelector('.tree-section');

var isDragging = false;
var startX, startY, scrollLeft, scrollTop;

treeSection.addEventListener('mousedown', (e) => {
	isDragging = true;
	startX = e.pageX - treeSection.offsetLeft;
	startY = e.pageY - treeSection.offsetTop;
	scrollLeft = treeSection.scrollLeft;
	scrollTop = treeSection.scrollTop;
	treeSection.style.cursor = 'grabbing';
});

treeSection.addEventListener('mouseleave', () => {
	isDragging = false;
	treeSection.style.cursor = 'grab';
});

treeSection.addEventListener('mouseup', () => {
	isDragging = false;
	treeSection.style.cursor = 'grab';
});

treeSection.addEventListener('mousemove', (e) => {
	if (!isDragging) return;
	e.preventDefault();
	var x = e.pageX - treeSection.offsetLeft;
	var y = e.pageY - treeSection.offsetTop;
	var walkX = (x - startX) * 1.5;
	var walkY = (y - startY) * 1.5;
	treeSection.scrollLeft = scrollLeft - walkX;
	treeSection.scrollTop = scrollTop - walkY;
});

treeSection.addEventListener('touchstart', (e) => {
	isDragging = true;
	startX = e.touches[0].pageX - treeSection.offsetLeft;
	startY = e.touches[0].pageY - treeSection.offsetTop;
	scrollLeft = treeSection.scrollLeft;
	scrollTop = treeSection.scrollTop;
});

treeSection.addEventListener('touchend', () => {
	isDragging = false;
});

treeSection.addEventListener('touchmove', (e) => {
	if (!isDragging) return;
	var x = e.touches[0].pageX - treeSection.offsetLeft;
	var y = e.touches[0].pageY - treeSection.offsetTop;
	var walkX = (x - startX) * 1.5;
	var walkY = (y - startY) * 1.5;
	treeSection.scrollLeft = scrollLeft - walkX;
	treeSection.scrollTop = scrollTop - walkY;
});

function buildTree(assignments) {
    console.log(assignments);

    let senderName = $("#senderFullName").val();
    const root = { id: senderId, name: senderName, children: [] };
    const map = new Map();
    map.set(senderId, root);

    assignments.forEach(assignment => {
        const { assignerId, assignedId, assignedName } = assignment;

        if (!map.has(assignerId)) {
            map.set(assignerId, { id: assignerId, children: [] });
        }
        if (!map.has(assignedId)) {
            map.set(assignedId, { id: assignedId, name: assignedName, children: [] });
        }

        const assignerNode = map.get(assignerId);
        const assignedNode = map.get(assignedId);

        if (assignerId !== assignedId) {
            assignerNode.children.push(assignedNode);
        }

        //برای نمایش ارجاع به خود

        //else {
        //    assignerNode.children.push({ id: assignedNode.id, name: assignedNode.name, children: [] });
        //}
    });

    return root;
}

var FirstTime = false;
function renderTree(node, container) {
    const entry = document.createElement('div');
    entry.classList.add("entry");
    if (!FirstTime) {
        entry.classList.add("no-line");
        FirstTime = true;
    }
    
    const subEntry = document.createElement('span');
    subEntry.textContent = `${node.name}`;

    entry.appendChild(subEntry);
    container.appendChild(entry);

    if (node.children.length > 0) {
        const branch = document.createElement('div');
        branch.classList.add("branch");
        entry.appendChild(branch);

        node.children.forEach(child => {
            renderTree(child, branch);
        });
    }
}

$(document).ready(function () {
    const treeData = buildTree(assignments);

    const diagramContainer = document.getElementById('tree-container');
    renderTree(treeData, diagramContainer);



    const canvasWrapper = document.getElementById("canvas-wrapper");
    const tree = document.getElementById("tree");
    let isDragging = false;
    let startX, startY;
    let translateX = -50, translateY = -50;
    let scale = 1;
    let dragSensitivity = 0.4;

    canvasWrapper.addEventListener("mousedown", (e) => {
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        canvasWrapper.classList.add("dragging");
    });

    canvasWrapper.addEventListener("mousemove", (e) => {
        if (!isDragging) return;

        const dx = (e.clientX - startX) * dragSensitivity / scale;
        const dy = (e.clientY - startY) * dragSensitivity / scale;

        translateX += dx;
        translateY += dy;

        tree.style.transform = `translate(${translateX}%, ${translateY}%) scale(${scale})`;

        startX = e.clientX;
        startY = e.clientY;
    });

    document.addEventListener("mouseup", () => {
        isDragging = false;
        canvasWrapper.classList.remove("dragging");
    });

    canvasWrapper.addEventListener("wheel", (e) => {
        e.preventDefault();
        const delta = e.deltaY > 0 ? -0.1 : 0.1;

        scale = Math.min(Math.max(0.2, scale + delta), 3);

        tree.style.transform = `translate(${translateX}%, ${translateY}%) scale(${scale})`;
    });
});