Closes #163: Show raster and snap icons (#550)

* proof of concept * add grid size to forms and individual options
2024-08-20 12:02:45 +02:00
parent 9072faf7cf
commit d2d2106246
9 changed files with 206 additions and 24 deletions
@@ -75,10 +75,129 @@ const coordSaveCheckbox = document.querySelector('#id_save_coords')
    const group_racks = topologyData.options.group_racks
    const group_virtualchassis = topologyData.options.group_virtualchassis

+    const gridSize = parseInt(topologyData.options.grid_size[0]);
+    var dragMode = false;
+
    graph = new Network(container, { nodes, edges }, options)
    graph.fit()

+    function getGridPosition(nodeId, gridSize) {
+        x = graph.getPosition(nodeId).x;
+        y = graph.getPosition(nodeId).y;
+
+        if(x >= 0) {
+            if((x % gridSize) > (gridSize / 2)) {
+                x += gridSize;
+            }
+        }
+        else {
+            if((-x % gridSize) > (gridSize / 2)) {
+                x -= gridSize;
+            }
+        }
+        x = x - x % gridSize;
+
+        if(y >= 0) {
+            if((y % gridSize) > (gridSize / 2)) {
+                y += gridSize;
+            }
+        }
+        else {
+            if((-y % gridSize) > (gridSize / 2)) {
+                y -= gridSize;
+            }
+        }
+        y = y - y % gridSize;    
+
+        return {
+            x: x,
+            y: y
+        };
+    }
+
+    function drawGrid(canvascontext) {
+        // Canvas can be zoomed. It then contains more or less virtual pixels than the real number of pixels
+        const zoomFactor = graph.getScale() * window.devicePixelRatio;
+        const virtualWidth = canvascontext.canvas.width / zoomFactor;
+        const virtualHeight = canvascontext.canvas.height / zoomFactor;
+
+        // Canvas can be moved. Get the center of the virtual canvas. Take the grid into account
+        const virtualCenter = graph.getViewPosition();
+        const rasterizedCenterX = virtualCenter.x - virtualCenter.x % gridSize;
+        const rasterizedCenterY = virtualCenter.y - virtualCenter.y % gridSize;
+
+        // Calculate virtual space for the grid
+        const hSpace = (virtualWidth / 2) - (virtualWidth / 2) % gridSize + gridSize;
+        const vSpace = (virtualHeight / 2) - (virtualHeight / 2) % gridSize + gridSize;
+
+        // Calculate virtual position for the grid
+        const left = rasterizedCenterX - gridSize - hSpace;
+        const right = rasterizedCenterX + gridSize + hSpace;
+        const top = rasterizedCenterY - gridSize - vSpace;
+        const bottom = rasterizedCenterY + gridSize + vSpace;
+
+        // Draw grid
+        canvascontext.beginPath();
+
+        for (let x = left; x < right; x += gridSize) {
+            canvascontext.moveTo(x, top);
+            canvascontext.lineTo(x, bottom);
+        }
+
+        for (let y = top; y < bottom; y += gridSize) {
+            canvascontext.moveTo(left, y);
+            canvascontext.lineTo(right, y);
+        }
+
+        canvascontext.strokeStyle = '#777777';
+        canvascontext.stroke();        
+    }
+
+    function drawGridSnapHint(canvascontext) {
+        // Draw grid hinting line and circle
+        if(gridSize > 0 && dragMode == true && graph.getSelectedNodes().length > 0) {
+            for(i = 0; i < graph.getSelectedNodes().length; i++) {
+                id = graph.getSelectedNodes()[i];
+                if(window.nodes.get(id).x != graph.getPosition(id).x || window.nodes.get(id).y != graph.getPosition(id).y) {
+                    pos = getGridPosition(graph.getSelectedNodes()[i], gridSize);
+
+                    canvascontext.beginPath();
+                    canvascontext.arc(graph.getPosition(graph.getSelectedNodes()[i]).x, graph.getPosition(graph.getSelectedNodes()[i]).y, 5, 0, 2 * Math.PI);
+                    canvascontext.fillStyle = '#FF3D3D';
+                    canvascontext.fill();
+
+                    canvascontext.beginPath();
+                    canvascontext.moveTo(graph.getPosition(graph.getSelectedNodes()[i]).x, graph.getPosition(graph.getSelectedNodes()[i]).y);
+                    canvascontext.lineTo(pos.x, pos.y);
+                    canvascontext.strokeStyle = '#FF3D3D';
+                    canvascontext.stroke();
+        
+                    canvascontext.beginPath();
+                    canvascontext.arc(pos.x, pos.y, 10, 0, 2 * Math.PI);
+                    canvascontext.fillStyle = '#9C0000';
+                    canvascontext.fill();
+                }
+            }
+        }
+    }
+
+    graph.on('dragStart', (params) => {
+        dragMode = true;
+    })
+
    graph.on('dragEnd', (params) => {
+        dragMode = false;
+        // Place icon on the grid
+        if(gridSize > 0 && graph.getSelectedNodes().length > 0) {
+            for(i = 0; i < graph.getSelectedNodes().length; i++) {
+                id = graph.getSelectedNodes()[i];
+                if(window.nodes.get(id).x != graph.getPosition(id).x || window.nodes.get(id).y != graph.getPosition(id).y) {
+                    pos = getGridPosition(graph.getSelectedNodes()[i], gridSize);
+                    window.nodes.update({id: graph.getSelectedNodes()[i], x: pos.x, y: pos.y});
+                }
+            }
+        }
+
        if (coordSaveCheckbox.options[coordSaveCheckbox.selectedIndex].text != "Yes") return

        Promise.allSettled(
@@ -139,12 +258,20 @@ const coordSaveCheckbox = document.querySelector('#id_save_coords')
        }
    })

+    graph.on('beforeDrawing', (canvascontext) => {
+        if (gridSize > 0) {
+            drawGrid(canvascontext);
+        }
+    })
+
    graph.on('afterDrawing', (canvascontext) => {
        allRectangles = [];
        if(group_sites != null && group_sites == 'on') { drawGroupRectangles(canvascontext, groupedNodeSites, siteRectParams); }
        if(group_locations != null && group_locations == 'on') { drawGroupRectangles(canvascontext, groupedNodeLocations, locationRectParams); }
        if(group_racks != null && group_racks == 'on') { drawGroupRectangles(canvascontext, groupedNodeRacks, rackRectParams); }
        if(group_virtualchassis != null && group_virtualchassis == 'on') { drawGroupRectangles(canvascontext, groupedNodeVirtualchassis, virtualchassisRectParams); }
+ 
+        drawGridSnapHint(canvascontext);
    })

    graph.on('click', (canvascontext) => {