diff --git a/src/renderer/canvas_manager.ts b/src/renderer/canvas_manager.ts index 635d5b97..16bcf037 100644 --- a/src/renderer/canvas_manager.ts +++ b/src/renderer/canvas_manager.ts @@ -222,6 +222,9 @@ export class CanvasManager { this.indices = []; } + // TODO: WARNING! This function uses ctx.getImageData() which forces + // the browser to turn off GPU accelerated canvas painting! + // It needs to be reworked to not use getImageData() anymore. public isBlank(): boolean { const ctx = this.canvas.getContext('2d'); if (!ctx) @@ -247,11 +250,13 @@ export class CanvasManager { return; this.contention++; this.request_scale = true; - if (this.isBlank()) { - this.renderer.set_bgcolor('black'); - this.renderer.zoom_to_view(null, false); - diff = 0.01; - } + + // Don't use the easteregg feature as long as isBlank() is not fixed! + // if (this.isBlank()) { + // this.renderer.set_bgcolor('black'); + // this.renderer.zoom_to_view(null, false); + // diff = 0.01; + // } this.scale_origin.x = x; this.scale_origin.y = y; diff --git a/src/renderer/renderer.ts b/src/renderer/renderer.ts index 2fdefa9f..4f919ff5 100644 --- a/src/renderer/renderer.ts +++ b/src/renderer/renderer.ts @@ -193,7 +193,7 @@ export class SDFGRenderer extends EventEmitter { protected bgcolor: string | null = null; protected visible_rect: SimpleRect | null = null; protected static cssProps: { [key: string]: string } = {}; - public static rendered_elements_count: number = 0; + protected hovered_elements_cache: Set = new Set(); // Toolbar related fields. protected toolbar: JQuery | null = null; @@ -879,6 +879,16 @@ export class SDFGRenderer extends EventEmitter { this.container.appendChild(this.error_popover_container); this.ctx = this.canvas.getContext('2d'); + + // This setting decouples the canvas paint cycle from the main event loop. + // Not supported on Firefox, but can be enabled and Firefox will ignore it. + // No fps difference measured on the SDFV webclient, but the setting could + // become useful in the future in certain setups or situations. + // this.ctx = this.canvas.getContext('2d', {desynchronized: true}); + + // WARNING: This setting will force CPU main thread rendering. Use for testing only. + // this.ctx = this.canvas.getContext('2d', {willReadFrequently: true}); + if (!this.ctx) { console.error('Failed to get canvas context, aborting'); return; @@ -3065,6 +3075,22 @@ export class SDFGRenderer extends EventEmitter { this.tooltip = null; + // Add newly hovered elements under the mouse cursor to the cache. + // The cache then contains hovered elements of the previous frame that are highlighted + // and the newly hovered elements of the current frame that need to be highlighted. + for (const [name, element_type_array] of Object.entries>(elements)) { + for (let j = 0; j < element_type_array.length; ++j) { + const hovered_element = element_type_array[j].obj; + if (hovered_element !== undefined) { + this.hovered_elements_cache.add(hovered_element); + } + } + } + + // New cache for the next frame, which only contains the hovered/highlighted + // elements of the current frame. + const new_hovered_elements_cache: Set = new Set(); + // Only do highlighting re-computation if view is close enough to // actually see the highlights. Done by points-per-pixel metric using // SDFV.NODE_LOD as the threshold. Hence, the highlights only @@ -3078,272 +3104,281 @@ export class SDFGRenderer extends EventEmitter { let highlighting_changed = false; // Mark hovered and highlighted elements. - this.doForVisibleElements( - (group, objInfo, obj) => { - const intersected = obj.intersect( - this.mousepos!.x, this.mousepos!.y, 0, 0 - ); + for (const obj of this.hovered_elements_cache) { + + const intersected = obj.intersect( + this.mousepos!.x, this.mousepos!.y, 0, 0 + ); + + // Local change boolean, for each visible element + // checked. Prevents recursion if nothing changed. + let hover_changed = false; + + // Change hover status + if (intersected && !obj.hovered) { + obj.hovered = true; + highlighting_changed = true; + hover_changed = true; + } else if (!intersected && obj.hovered) { + obj.hovered = false; + highlighting_changed = true; + hover_changed = true; + } + + // If element is hovered in the current frame then + // remember it for the next frame. + if (obj.hovered) { + new_hovered_elements_cache.add(obj); + } - // Local change boolean, for each visible element - // checked. Prevents recursion if nothing changed. - let hover_changed = false; - - // Change hover status - if (intersected && !obj.hovered) { - obj.hovered = true; - highlighting_changed = true; - hover_changed = true; - } else if (!intersected && obj.hovered) { - obj.hovered = false; - highlighting_changed = true; - hover_changed = true; + // Highlight all edges of the memlet tree + if (obj instanceof Edge && obj.parent_id !== null) { + if (obj.hovered && hover_changed) { + const tree = this.getNestedMemletTree(obj); + tree.forEach(te => { + if (te !== obj && te !== undefined) + te.highlighted = true; + }); + } else if (!obj.hovered && hover_changed) { + const tree = this.getNestedMemletTree(obj); + tree.forEach(te => { + if (te !== obj && te !== undefined) + te.highlighted = false; + }); } + } - // Highlight all edges of the memlet tree - if (obj instanceof Edge && obj.parent_id !== null) { - if (obj.hovered && hover_changed) { - const tree = this.getNestedMemletTree(obj); - tree.forEach(te => { - if (te !== obj && te !== undefined) - te.highlighted = true; - }); - } else if (!obj.hovered && hover_changed) { - const tree = this.getNestedMemletTree(obj); - tree.forEach(te => { - if (te !== obj && te !== undefined) - te.highlighted = false; - }); - } + // Highlight all access nodes with the same name in the + // same nested sdfg. + if (obj instanceof AccessNode) { + if (obj.hovered && hover_changed) { + traverseSDFGScopes( + this.cfgList[obj.sdfg.cfg_list_id].graph!, + (node: any) => { + // If node is a state, then visit + // sub-scope. + if (node instanceof State) + return true; + if (node instanceof AccessNode && + node.data.node.label === + obj.data.node.label) + node.highlighted = true; + // No need to visit sub-scope + return false; + } + ); + } else if (!obj.hovered && hover_changed) { + traverseSDFGScopes( + this.cfgList[obj.sdfg.cfg_list_id].graph!, + (node: any) => { + // If node is a state, then visit + // sub-scope. + if (node instanceof State) + return true; + if (node instanceof AccessNode && + node.data.node.label === + obj.data.node.label) + node.highlighted = false; + // No need to visit sub-scope + return false; + } + ); } + } - // Highlight all access nodes with the same name in the - // same nested sdfg. - if (obj instanceof AccessNode) { - if (obj.hovered && hover_changed) { - traverseSDFGScopes( - this.cfgList[obj.sdfg.cfg_list_id].graph!, - (node: any) => { - // If node is a state, then visit - // sub-scope. - if (node instanceof State) - return true; - if (node instanceof AccessNode && - node.data.node.label === - obj.data.node.label) - node.highlighted = true; - // No need to visit sub-scope - return false; - } - ); - } else if (!obj.hovered && hover_changed) { - traverseSDFGScopes( - this.cfgList[obj.sdfg.cfg_list_id].graph!, - (node: any) => { - // If node is a state, then visit - // sub-scope. - if (node instanceof State) - return true; - if (node instanceof AccessNode && - node.data.node.label === - obj.data.node.label) - node.highlighted = false; - // No need to visit sub-scope - return false; + if (obj instanceof Connector) { + // Highlight the incoming/outgoing Edge + const parent_node = obj.linkedElem; + if (obj.hovered && + (hover_changed || (!parent_node?.hovered))) { + const state = obj.linkedElem?.parentElem; + if (state && state instanceof State && + state.data) { + const state_json = state.data.state; + const state_graph = state.data.graph; + state_json.edges.forEach( + (edge: JsonSDFGEdge, id: number) => { + if (edge.src_connector === + obj.data.name || + edge.dst_connector === + obj.data.name) { + const gedge = state_graph.edge( + edge.src, edge.dst, + id.toString() + ) as Memlet; + if (gedge) + gedge.highlighted = true; + } } ); } } - - if (obj instanceof Connector) { - // Highlight the incoming/outgoing Edge - const parent_node = obj.linkedElem; - if (obj.hovered && - (hover_changed || (!parent_node?.hovered))) { + if (!obj.hovered && hover_changed) { + // Prevent de-highlighting of edge if parent is + // already hovered (to show all edges). + if (parent_node && !parent_node.hovered) { const state = obj.linkedElem?.parentElem; if (state && state instanceof State && state.data) { const state_json = state.data.state; const state_graph = state.data.graph; - state_json.edges.forEach( - (edge: JsonSDFGEdge, id: number) => { - if (edge.src_connector === - obj.data.name || - edge.dst_connector === - obj.data.name) { - const gedge = state_graph.edge( - edge.src, edge.dst, - id.toString() - ) as Memlet; - if (gedge) - gedge.highlighted = true; - } + state_json.edges.forEach(( + edge: JsonSDFGEdge, + id: number + ) => { + if (edge.src_connector === + obj.data.name || + edge.dst_connector === + obj.data.name) { + const gedge = state_graph.edge( + edge.src, edge.dst, + id.toString() + ) as Memlet; + if (gedge) + gedge.highlighted = false; } - ); - } - } - if (!obj.hovered && hover_changed) { - // Prevent de-highlighting of edge if parent is - // already hovered (to show all edges). - if (parent_node && !parent_node.hovered) { - const state = obj.linkedElem?.parentElem; - if (state && state instanceof State && - state.data) { - const state_json = state.data.state; - const state_graph = state.data.graph; - state_json.edges.forEach(( - edge: JsonSDFGEdge, - id: number - ) => { - if (edge.src_connector === - obj.data.name || - edge.dst_connector === - obj.data.name) { - const gedge = state_graph.edge( - edge.src, edge.dst, - id.toString() - ) as Memlet; - if (gedge) - gedge.highlighted = false; - } - }); - } + }); } } + } - // Highlight all access nodes with the same name as - // the hovered connector in the nested sdfg. - if (obj.hovered && hover_changed) { - const nGraph = obj.parentElem?.data.graph; - if (nGraph) { - traverseSDFGScopes(nGraph, (node: any) => { - // If node is a state, then visit - // sub-scope. - if (node instanceof State || - node instanceof ControlFlowRegion) - return true; - - if (node instanceof AccessNode && - node.data.node.label === - obj.label()) - node.highlighted = true; - // No need to visit sub-scope - return false; - }); - } - } else if (!obj.hovered && hover_changed) { - const nGraph = obj.parentElem?.data.graph; - if (nGraph) { - traverseSDFGScopes(nGraph, (node: any) => { - // If node is a state, then visit - // sub-scope. - if (node instanceof State || - node instanceof ControlFlowRegion) - return true; - - if (node instanceof AccessNode && - node.data.node.label === - obj.label()) - node.highlighted = false; - // No need to visit sub-scope - return false; - }); - } + // Highlight all access nodes with the same name as + // the hovered connector in the nested sdfg. + if (obj.hovered && hover_changed) { + const nGraph = obj.parentElem?.data.graph; + if (nGraph) { + traverseSDFGScopes(nGraph, (node: any) => { + // If node is a state, then visit + // sub-scope. + if (node instanceof State || + node instanceof ControlFlowRegion) + return true; + + if (node instanceof AccessNode && + node.data.node.label === + obj.label()) + node.highlighted = true; + // No need to visit sub-scope + return false; + }); + } + } else if (!obj.hovered && hover_changed) { + const nGraph = obj.parentElem?.data.graph; + if (nGraph) { + traverseSDFGScopes(nGraph, (node: any) => { + // If node is a state, then visit + // sub-scope. + if (node instanceof State || + node instanceof ControlFlowRegion) + return true; + + if (node instanceof AccessNode && + node.data.node.label === + obj.label()) + node.highlighted = false; + // No need to visit sub-scope + return false; + }); } + } - // Similarly, highlight any identifiers in a - // connector's tasklet, if applicable. - if (obj.hovered && hover_changed) { - if (obj.linkedElem && obj.linkedElem instanceof - Tasklet) { - if (obj.connectorType === 'in') { - for (const token of - obj.linkedElem.inputTokens) { - if (token.token === obj.data.name) - token.highlighted = true; - } - } else { - for (const token of - obj.linkedElem.outputTokens) { - if (token.token === obj.data.name) - token.highlighted = true; - } + // Similarly, highlight any identifiers in a + // connector's tasklet, if applicable. + if (obj.hovered && hover_changed) { + if (obj.linkedElem && obj.linkedElem instanceof + Tasklet) { + if (obj.connectorType === 'in') { + for (const token of + obj.linkedElem.inputTokens) { + if (token.token === obj.data.name) + token.highlighted = true; + } + } else { + for (const token of + obj.linkedElem.outputTokens) { + if (token.token === obj.data.name) + token.highlighted = true; } } - } else if (!obj.hovered && hover_changed) { - if (obj.linkedElem && obj.linkedElem instanceof - Tasklet) { - if (obj.connectorType === 'in') { - for (const token of - obj.linkedElem.inputTokens) { - if (token.token === obj.data.name) - token.highlighted = false; - } - } else { - for (const token of - obj.linkedElem.outputTokens) { - if (token.token === obj.data.name) - token.highlighted = false; - } + } + } else if (!obj.hovered && hover_changed) { + if (obj.linkedElem && obj.linkedElem instanceof + Tasklet) { + if (obj.connectorType === 'in') { + for (const token of + obj.linkedElem.inputTokens) { + if (token.token === obj.data.name) + token.highlighted = false; + } + } else { + for (const token of + obj.linkedElem.outputTokens) { + if (token.token === obj.data.name) + token.highlighted = false; } } } } + } - // Make all edges of a node visible and remove the edge - // summary symbol. - if (obj.hovered && hover_changed) { - // Setting these to false will cause the summary - // symbol not to be drawn in renderer_elements.ts - obj.summarize_in_edges = false; - obj.summarize_out_edges = false; - const state = obj.parentElem; - if (state && state instanceof State && state.data) { - const state_json = state.data.state; - const state_graph = state.data.graph; - state_json.edges.forEach( - (edge: JsonSDFGEdge, id: number) => { - if (edge.src === obj.id.toString() || - edge.dst === obj.id.toString()) { - const gedge = state_graph.edge( - edge.src, edge.dst, - id.toString() - ) as Memlet; - if (gedge) - gedge.highlighted = true; - } - } - ); - } - } else if (!obj.hovered && hover_changed) { - obj.summarize_in_edges = true; - obj.summarize_out_edges = true; - const state = obj.parentElem; - if (state && state instanceof State && state.data) { - const state_json = state.data.state; - const state_graph = state.data.graph; - state_json.edges.forEach(( - edge: JsonSDFGEdge, id: number - ) => { + // Make all edges of a node visible and remove the edge + // summary symbol. + if (obj.hovered && hover_changed) { + // Setting these to false will cause the summary + // symbol not to be drawn in renderer_elements.ts + obj.summarize_in_edges = false; + obj.summarize_out_edges = false; + const state = obj.parentElem; + if (state && state instanceof State && state.data) { + const state_json = state.data.state; + const state_graph = state.data.graph; + state_json.edges.forEach( + (edge: JsonSDFGEdge, id: number) => { if (edge.src === obj.id.toString() || edge.dst === obj.id.toString()) { const gedge = state_graph.edge( - edge.src, edge.dst, id.toString() + edge.src, edge.dst, + id.toString() ) as Memlet; if (gedge) - gedge.highlighted = false; + gedge.highlighted = true; } - }); - } + } + ); + } + } else if (!obj.hovered && hover_changed) { + obj.summarize_in_edges = true; + obj.summarize_out_edges = true; + const state = obj.parentElem; + if (state && state instanceof State && state.data) { + const state_json = state.data.state; + const state_graph = state.data.graph; + state_json.edges.forEach(( + edge: JsonSDFGEdge, id: number + ) => { + if (edge.src === obj.id.toString() || + edge.dst === obj.id.toString()) { + const gedge = state_graph.edge( + edge.src, edge.dst, id.toString() + ) as Memlet; + if (gedge) + gedge.highlighted = false; + } + }); } } - ); + } if (highlighting_changed) dirty = true; } } + // Set the cache for the next frame to only contain + // the currently hovered/highlighted elements. + this.hovered_elements_cache = new_hovered_elements_cache; + // If adding an edge, mark/highlight the first/from element, if it has // already been selected. if (this.mouse_mode === 'add' && this.add_type === 'Edge') { diff --git a/src/renderer/renderer_elements.ts b/src/renderer/renderer_elements.ts index dde9836f..57de760b 100644 --- a/src/renderer/renderer_elements.ts +++ b/src/renderer/renderer_elements.ts @@ -62,46 +62,33 @@ function draw_summary_symbol( arrow_end_y = horizontal_line_level - 4; } const dot_height = (arrow_start_y + arrow_end_y) / 2; - // Arrow line + + // Arrow line left ctx.beginPath(); ctx.moveTo(left_arrow_x, arrow_start_y); ctx.lineTo(left_arrow_x, arrow_end_y); - ctx.closePath(); - ctx.stroke(); - // Arrow head - ctx.beginPath(); - ctx.moveTo(left_arrow_x, arrow_end_y + 2); - ctx.lineTo(left_arrow_x - 2, arrow_end_y); - ctx.lineTo(left_arrow_x + 2, arrow_end_y); - ctx.lineTo(left_arrow_x, arrow_end_y + 2); - ctx.closePath(); - ctx.fill(); - + // Arrow line right + ctx.moveTo(righ_arrow_x, arrow_start_y); + ctx.lineTo(righ_arrow_x, arrow_end_y); // 3 dots - ctx.beginPath(); ctx.moveTo(middle_of_line - 5, dot_height); ctx.lineTo(middle_of_line - 4, dot_height); - ctx.closePath(); - ctx.stroke(); - ctx.beginPath(); ctx.moveTo(middle_of_line - 0.5, dot_height); ctx.lineTo(middle_of_line + 0.5, dot_height); - ctx.closePath(); - ctx.stroke(); - ctx.beginPath(); ctx.moveTo(middle_of_line + 4, dot_height); ctx.lineTo(middle_of_line + 5, dot_height); ctx.closePath(); ctx.stroke(); - // Draw right arrow - // Arrow line + // Arrow heads ctx.beginPath(); - ctx.moveTo(righ_arrow_x, arrow_start_y); - ctx.lineTo(righ_arrow_x, arrow_end_y); + ctx.moveTo(left_arrow_x, arrow_end_y + 2); + ctx.lineTo(left_arrow_x - 2, arrow_end_y); + ctx.lineTo(left_arrow_x + 2, arrow_end_y); + ctx.lineTo(left_arrow_x, arrow_end_y + 2); ctx.closePath(); - ctx.stroke(); - // Arrow head + ctx.fill(); + ctx.beginPath(); ctx.moveTo(righ_arrow_x, arrow_end_y + 2); ctx.lineTo(righ_arrow_x - 2, arrow_end_y); @@ -477,8 +464,6 @@ export class ControlFlowRegion extends ControlFlowBlock { ctx.beginPath(); ctx.moveTo(this.x, this.y - SDFV.LINEHEIGHT); ctx.lineTo(this.x, this.y + SDFV.LINEHEIGHT); - ctx.stroke(); - ctx.beginPath(); ctx.moveTo(this.x - SDFV.LINEHEIGHT, this.y); ctx.lineTo(this.x + SDFV.LINEHEIGHT, this.y); ctx.stroke(); @@ -624,8 +609,6 @@ export class State extends BasicBlock { ctx.beginPath(); ctx.moveTo(this.x, this.y - SDFV.LINEHEIGHT); ctx.lineTo(this.x, this.y + SDFV.LINEHEIGHT); - ctx.stroke(); - ctx.beginPath(); ctx.moveTo(this.x - SDFV.LINEHEIGHT, this.y); ctx.lineTo(this.x + SDFV.LINEHEIGHT, this.y); ctx.stroke(); @@ -930,8 +913,6 @@ export class LoopRegion extends ControlFlowRegion { ctx.beginPath(); ctx.moveTo(this.x, plusCenterY - SDFV.LINEHEIGHT); ctx.lineTo(this.x, plusCenterY + SDFV.LINEHEIGHT); - ctx.stroke(); - ctx.beginPath(); ctx.moveTo(this.x - SDFV.LINEHEIGHT, plusCenterY); ctx.lineTo(this.x + SDFV.LINEHEIGHT, plusCenterY); ctx.stroke(); @@ -1189,8 +1170,13 @@ export abstract class Edge extends SDFGElement { if (this.points.length < 2) return; - this.drawArrow(ctx, this.points[this.points.length - 2], - this.points[this.points.length - 1], 3, 0, 4); + + const canvas_manager = _renderer.get_canvas_manager(); + const ppp = canvas_manager?.points_per_pixel(); + if (!(ctx as any).lod || (ppp && ppp < SDFV.ARROW_LOD)) { + this.drawArrow(ctx, this.points[this.points.length - 2], + this.points[this.points.length - 1], 3, 0, 4); + } // Restore previous stroke style, width, and opacity. ctx.strokeStyle = orig_stroke_style; @@ -1324,10 +1310,14 @@ export class Memlet extends Edge { } if (!skipArrow) { - this.drawArrow( - ctx, this.points[this.points.length - 2], - this.points[this.points.length - 1], 3 - ); + const canvas_manager = renderer.get_canvas_manager(); + const ppp = canvas_manager?.points_per_pixel(); + if (!(ctx as any).lod || (ppp && ppp < SDFV.ARROW_LOD)) { + this.drawArrow( + ctx, this.points[this.points.length - 2], + this.points[this.points.length - 1], 3 + ); + } } } @@ -1497,10 +1487,14 @@ export class InterstateEdge extends Edge { } } - this.drawArrow( - ctx, this.points[this.points.length - 2], - this.points[this.points.length - 1], 3 - ); + const canvas_manager = renderer.get_canvas_manager(); + const ppp = canvas_manager?.points_per_pixel(); + if (!(ctx as any).lod || (ppp && ppp < SDFV.ARROW_LOD)) { + this.drawArrow( + ctx, this.points[this.points.length - 2], + this.points[this.points.length - 1], 3 + ); + } if (SDFVSettings.alwaysOnISEdgeLabels) this.drawLabel(renderer, ctx); @@ -2773,7 +2767,6 @@ function batchedDrawEdges( labelEdges.push(edge); edge.create_arrow_line(ctx); - // SDFGRenderer.rendered_elements_count++; }); ctx.setLineDash([1, 0]); ctx.fillStyle = ctx.strokeStyle = renderer.getCssProperty(color); @@ -2829,7 +2822,6 @@ export function drawStateContents( if (lod && nodeppp < SDFV.STATE_LOD) { node.simple_draw(renderer, ctx, mousePos); node.debug_draw(renderer, ctx); - // SDFGRenderer.rendered_elements_count++; continue; } } else { @@ -2837,7 +2829,6 @@ export function drawStateContents( if (lod && ppp > SDFV.NODE_LOD) { node.simple_draw(renderer, ctx, mousePos); node.debug_draw(renderer, ctx); - // SDFGRenderer.rendered_elements_count++; continue; } } @@ -2926,7 +2917,6 @@ export function drawStateMachine( block.draw(renderer, ctx, mousePos); block.debug_draw(renderer, ctx); - // SDFGRenderer.rendered_elements_count++; const ng = block.data.graph; if (!block.attributes().is_collapsed && ng) { @@ -2954,7 +2944,6 @@ export function drawSDFG( const ppp = cManager.points_per_pixel(); const visibleRect = renderer.get_visible_rect() ?? undefined; - SDFGRenderer.rendered_elements_count = 0; drawStateMachine( g, ctx, renderer, ppp, (ctx as any).lod, visibleRect, mousePos ); @@ -3180,23 +3169,10 @@ export function drawOctagon( ctx.closePath(); } -// Adapted from https://stackoverflow.com/a/2173084/6489142 export function drawEllipse( ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number ): void { - const kappa = .5522848, - ox = (w / 2) * kappa, // control point offset horizontal - oy = (h / 2) * kappa, // control point offset vertical - xe = x + w, // x-end - ye = y + h, // y-end - xm = x + w / 2, // x-middle - ym = y + h / 2; // y-middle - - ctx.moveTo(x, ym); - ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); - ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); - ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); - ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); + ctx.ellipse(x+w/2, y+h/2, w/2, h/2, 0, 0, 2 * Math.PI); } export function drawTrapezoid( diff --git a/src/sdfv.ts b/src/sdfv.ts index 9bba2783..25b14836 100644 --- a/src/sdfv.ts +++ b/src/sdfv.ts @@ -73,9 +73,9 @@ export class SDFV { // Dagre layout options. // Separation between ranks (vertically) in pixels. - public static RANKSEP: number = 70; // Dagre default: 50 + public static RANKSEP: number = 70; // Dagre default: 50, Before update: 30 // Separation between nodes (horizontally) in pixels. - public static NODESEP: number = 20; // Dagre default: 50 + public static NODESEP: number = 20; // Dagre default: 50, Before update: 50 protected renderer: SDFGRenderer | null = null; protected localViewRenderer: LViewRenderer | null = null; diff --git a/src/utils/sdfv_settings.ts b/src/utils/sdfv_settings.ts index a9c3c2e0..acc7c94f 100644 --- a/src/utils/sdfv_settings.ts +++ b/src/utils/sdfv_settings.ts @@ -101,15 +101,9 @@ export class SDFVSettings { this.addToggle( root, 'Show data descriptor sizes on access nodes ' + - '(hides data container names)', + '(hides data container names)', 'showDataDescriptorSizes', true ); - this.addToggle( - root, - 'Hide / summarize edges for nodes where a large number of ' + - 'edges are connected', - 'summarizeLargeNumbersOfEdges', true - ); this.addToggle(root, 'Use inclusive ranges', 'inclusiveRanges', true); this.addToggle( root, 'Use vertical state machine layout', @@ -156,17 +150,23 @@ export class SDFVSettings { root, 'Adaptively hide content when zooming out (Warning: turning this \ off can cause performance issues on big graphs)', - 'adaptiveContentHiding', false, (value: boolean) => { - if (this.renderer) - (this.renderer.get_context() as any).lod = value; - } - ); - - this.addToggle( - root, 'Curved Edges (turn off in case of performance issues)', - 'curvedEdges', false - ); - } + 'adaptiveContentHiding', false, (value: boolean) => { + if (this.renderer) + (this.renderer.get_context() as any).lod = value; + } + ); + + this.addToggle( + root, 'Curved Edges (turn off in case of performance issues)', + 'curvedEdges', false + ); + this.addToggle( + root, + 'Hide / summarize edges for nodes where a large number of ' + + 'edges are connected', + 'summarizeLargeNumbersOfEdges', true + ); + } private constructModal(): JQuery { const modalElement = $('
', {