@@ -75,10 +75,129 @@ const coordSaveCheckbox = document.querySelector('#id_save_coords')
7575 const group_racks = topologyData . options . group_racks
7676 const group_virtualchassis = topologyData . options . group_virtualchassis
7777
78+ const gridSize = parseInt ( topologyData . options . grid_size [ 0 ] ) ;
79+ var dragMode = false ;
80+
7881 graph = new Network ( container , { nodes, edges } , options )
7982 graph . fit ( )
8083
84+ function getGridPosition ( nodeId , gridSize ) {
85+ x = graph . getPosition ( nodeId ) . x ;
86+ y = graph . getPosition ( nodeId ) . y ;
87+
88+ if ( x >= 0 ) {
89+ if ( ( x % gridSize ) > ( gridSize / 2 ) ) {
90+ x += gridSize ;
91+ }
92+ }
93+ else {
94+ if ( ( - x % gridSize ) > ( gridSize / 2 ) ) {
95+ x -= gridSize ;
96+ }
97+ }
98+ x = x - x % gridSize ;
99+
100+ if ( y >= 0 ) {
101+ if ( ( y % gridSize ) > ( gridSize / 2 ) ) {
102+ y += gridSize ;
103+ }
104+ }
105+ else {
106+ if ( ( - y % gridSize ) > ( gridSize / 2 ) ) {
107+ y -= gridSize ;
108+ }
109+ }
110+ y = y - y % gridSize ;
111+
112+ return {
113+ x : x ,
114+ y : y
115+ } ;
116+ }
117+
118+ function drawGrid ( canvascontext ) {
119+ // Canvas can be zoomed. It then contains more or less virtual pixels than the real number of pixels
120+ const zoomFactor = graph . getScale ( ) * window . devicePixelRatio ;
121+ const virtualWidth = canvascontext . canvas . width / zoomFactor ;
122+ const virtualHeight = canvascontext . canvas . height / zoomFactor ;
123+
124+ // Canvas can be moved. Get the center of the virtual canvas. Take the grid into account
125+ const virtualCenter = graph . getViewPosition ( ) ;
126+ const rasterizedCenterX = virtualCenter . x - virtualCenter . x % gridSize ;
127+ const rasterizedCenterY = virtualCenter . y - virtualCenter . y % gridSize ;
128+
129+ // Calculate virtual space for the grid
130+ const hSpace = ( virtualWidth / 2 ) - ( virtualWidth / 2 ) % gridSize + gridSize ;
131+ const vSpace = ( virtualHeight / 2 ) - ( virtualHeight / 2 ) % gridSize + gridSize ;
132+
133+ // Calculate virtual position for the grid
134+ const left = rasterizedCenterX - gridSize - hSpace ;
135+ const right = rasterizedCenterX + gridSize + hSpace ;
136+ const top = rasterizedCenterY - gridSize - vSpace ;
137+ const bottom = rasterizedCenterY + gridSize + vSpace ;
138+
139+ // Draw grid
140+ canvascontext . beginPath ( ) ;
141+
142+ for ( let x = left ; x < right ; x += gridSize ) {
143+ canvascontext . moveTo ( x , top ) ;
144+ canvascontext . lineTo ( x , bottom ) ;
145+ }
146+
147+ for ( let y = top ; y < bottom ; y += gridSize ) {
148+ canvascontext . moveTo ( left , y ) ;
149+ canvascontext . lineTo ( right , y ) ;
150+ }
151+
152+ canvascontext . strokeStyle = '#777777' ;
153+ canvascontext . stroke ( ) ;
154+ }
155+
156+ function drawGridSnapHint ( canvascontext ) {
157+ // Draw grid hinting line and circle
158+ if ( gridSize > 0 && dragMode == true && graph . getSelectedNodes ( ) . length > 0 ) {
159+ for ( i = 0 ; i < graph . getSelectedNodes ( ) . length ; i ++ ) {
160+ id = graph . getSelectedNodes ( ) [ i ] ;
161+ if ( window . nodes . get ( id ) . x != graph . getPosition ( id ) . x || window . nodes . get ( id ) . y != graph . getPosition ( id ) . y ) {
162+ pos = getGridPosition ( graph . getSelectedNodes ( ) [ i ] , gridSize ) ;
163+
164+ canvascontext . beginPath ( ) ;
165+ canvascontext . arc ( graph . getPosition ( graph . getSelectedNodes ( ) [ i ] ) . x , graph . getPosition ( graph . getSelectedNodes ( ) [ i ] ) . y , 5 , 0 , 2 * Math . PI ) ;
166+ canvascontext . fillStyle = '#FF3D3D' ;
167+ canvascontext . fill ( ) ;
168+
169+ canvascontext . beginPath ( ) ;
170+ canvascontext . moveTo ( graph . getPosition ( graph . getSelectedNodes ( ) [ i ] ) . x , graph . getPosition ( graph . getSelectedNodes ( ) [ i ] ) . y ) ;
171+ canvascontext . lineTo ( pos . x , pos . y ) ;
172+ canvascontext . strokeStyle = '#FF3D3D' ;
173+ canvascontext . stroke ( ) ;
174+
175+ canvascontext . beginPath ( ) ;
176+ canvascontext . arc ( pos . x , pos . y , 10 , 0 , 2 * Math . PI ) ;
177+ canvascontext . fillStyle = '#9C0000' ;
178+ canvascontext . fill ( ) ;
179+ }
180+ }
181+ }
182+ }
183+
184+ graph . on ( 'dragStart' , ( params ) => {
185+ dragMode = true ;
186+ } )
187+
81188 graph . on ( 'dragEnd' , ( params ) => {
189+ dragMode = false ;
190+ // Place icon on the grid
191+ if ( gridSize > 0 && graph . getSelectedNodes ( ) . length > 0 ) {
192+ for ( i = 0 ; i < graph . getSelectedNodes ( ) . length ; i ++ ) {
193+ id = graph . getSelectedNodes ( ) [ i ] ;
194+ if ( window . nodes . get ( id ) . x != graph . getPosition ( id ) . x || window . nodes . get ( id ) . y != graph . getPosition ( id ) . y ) {
195+ pos = getGridPosition ( graph . getSelectedNodes ( ) [ i ] , gridSize ) ;
196+ window . nodes . update ( { id : graph . getSelectedNodes ( ) [ i ] , x : pos . x , y : pos . y } ) ;
197+ }
198+ }
199+ }
200+
82201 if ( coordSaveCheckbox . options [ coordSaveCheckbox . selectedIndex ] . text != "Yes" ) return
83202
84203 Promise . allSettled (
@@ -139,12 +258,20 @@ const coordSaveCheckbox = document.querySelector('#id_save_coords')
139258 }
140259 } )
141260
261+ graph . on ( 'beforeDrawing' , ( canvascontext ) => {
262+ if ( gridSize > 0 ) {
263+ drawGrid ( canvascontext ) ;
264+ }
265+ } )
266+
142267 graph . on ( 'afterDrawing' , ( canvascontext ) => {
143268 allRectangles = [ ] ;
144269 if ( group_sites != null && group_sites == 'on' ) { drawGroupRectangles ( canvascontext , groupedNodeSites , siteRectParams ) ; }
145270 if ( group_locations != null && group_locations == 'on' ) { drawGroupRectangles ( canvascontext , groupedNodeLocations , locationRectParams ) ; }
146271 if ( group_racks != null && group_racks == 'on' ) { drawGroupRectangles ( canvascontext , groupedNodeRacks , rackRectParams ) ; }
147272 if ( group_virtualchassis != null && group_virtualchassis == 'on' ) { drawGroupRectangles ( canvascontext , groupedNodeVirtualchassis , virtualchassisRectParams ) ; }
273+
274+ drawGridSnapHint ( canvascontext ) ;
148275 } )
149276
150277 graph . on ( 'click' , ( canvascontext ) => {
0 commit comments