Skip to content

Commit

Permalink
reworked user settings menu, added curved edges setting, added adapti…
Browse files Browse the repository at this point in the history 
…veStateHiding setting again with a warning
  • Loading branch information
@LeandroTreu
LeandroTreu committed Mar 26, 2024
1 parent 228886b commit 68e9f43
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 57 deletions.
12 changes: 5 additions & 7 deletions src/renderer/renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,6 @@ 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;

// Toolbar related fields.
protected toolbar: JQuery<HTMLElement> | null = null;
Expand Down Expand Up @@ -1305,7 +1304,7 @@ export class SDFGRenderer extends EventEmitter {
this.emit('collapse_state_changed', false, true);

this.add_loading_animation();
// Use timout function with low delay to force the browser
// Use timeout function with low delay to force the browser
// to reload the dom with the above loader element.
setTimeout(() => {
this.relayout();
Expand All @@ -1327,7 +1326,7 @@ export class SDFGRenderer extends EventEmitter {
this.emit('collapse_state_changed', true, true);

this.add_loading_animation();
// Use timout function with low delay to force the browser
// Use timeout function with low delay to force the browser
// to reload the dom with the above loader element.
setTimeout(() => {
this.relayout();
Expand All @@ -1353,7 +1352,7 @@ export class SDFGRenderer extends EventEmitter {
this.emit('collapse_state_changed', false, true);

this.add_loading_animation();
// Use timout function with low delay to force the browser
// Use timeout function with low delay to force the browser
// to reload the dom with the above loader element.
setTimeout(() => {
this.relayout();
Expand All @@ -1374,7 +1373,7 @@ export class SDFGRenderer extends EventEmitter {
this.emit('collapse_state_changed', false, true);

this.add_loading_animation();
// Use timout function with low delay to force the browser
// Use timeout function with low delay to force the browser
// to reload the dom with the above loader element.
setTimeout(() => {
this.relayout();
Expand All @@ -1393,7 +1392,7 @@ export class SDFGRenderer extends EventEmitter {
this.emit('element_position_changed', 'reset');

this.add_loading_animation();
// Use timout function with low delay to force the browser
// Use timeout function with low delay to force the browser
// to reload the dom with the above loader element.
setTimeout(() => {
this.relayout();
Expand Down Expand Up @@ -3254,7 +3253,6 @@ export class SDFGRenderer extends EventEmitter {
if (dirty) {

this.draw_async();
// console.log(SDFGRenderer.rendered_elements_count)
}

if (element_focus_changed || selection_changed)
Expand Down
75 changes: 40 additions & 35 deletions src/renderer/renderer_elements.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1055,8 +1055,8 @@ export abstract class Edge extends SDFGElement {
return false;
}
else {
// Its a rectangle.
// Check if the any of the rectangles, spanned by pairs of points of the line,
// It is a rectangle.
// Check if any of the rectangles, spanned by pairs of points of the line,
// intersect the input rectangle.
// This is needed for long Interstate edges that have a huge bounding box and
// intersect almost always with the viewport even if they are not visible.
Expand Down Expand Up @@ -1095,18 +1095,25 @@ export class Memlet extends Edge {
ctx.lineTo(this.points[1].x, this.points[1].y);
} else {

// ctx.lineTo(this.points[this.points.length-1].x, this.points[this.points.length-1].y);

let i;
for (i = 1; i < this.points.length - 2; i++) {
const xm = (this.points[i].x + this.points[i + 1].x) / 2.0;
const ym = (this.points[i].y + this.points[i + 1].y) / 2.0;
ctx.quadraticCurveTo(
this.points[i].x, this.points[i].y, xm, ym
);
if (SDFVSettings.curvedEdges) {
for (i = 1; i < this.points.length - 2; i++) {
const xm = (this.points[i].x + this.points[i + 1].x) / 2.0;
const ym = (this.points[i].y + this.points[i + 1].y) / 2.0;
ctx.quadraticCurveTo(
this.points[i].x, this.points[i].y, xm, ym
);
}
ctx.quadraticCurveTo(this.points[i].x, this.points[i].y,
this.points[i + 1].x, this.points[i + 1].y);
}
ctx.quadraticCurveTo(this.points[i].x, this.points[i].y,
this.points[i + 1].x, this.points[i + 1].y);
else {
// Straight lines
for (i = 1; i < this.points.length; i++) {
ctx.lineTo(this.points[i].x, this.points[i].y);
}
}

}
}

Expand Down Expand Up @@ -1232,19 +1239,29 @@ export class InterstateEdge extends Edge {
public create_arrow_line(ctx: CanvasRenderingContext2D): void {
// Draw intersate edges with bezier curves through the arrow points.
ctx.moveTo(this.points[0].x, this.points[0].y);
let lastX = this.points[0].x;
let lastY = this.points[0].y;
let i;
for (i = 1; i < this.points.length; i++) {
const intermediateY = (lastY + this.points[i].y) / 2.0;
ctx.bezierCurveTo(
lastX, intermediateY,
this.points[i].x, intermediateY,
this.points[i].x, this.points[i].y
);
lastX = this.points[i].x;
lastY = this.points[i].y;

if (SDFVSettings.curvedEdges) {
let lastX = this.points[0].x;
let lastY = this.points[0].y;
for (i = 1; i < this.points.length; i++) {
const intermediateY = (lastY + this.points[i].y) / 2.0;
ctx.bezierCurveTo(
lastX, intermediateY,
this.points[i].x, intermediateY,
this.points[i].x, this.points[i].y
);
lastX = this.points[i].x;
lastY = this.points[i].y;
}
}
else {
// Straight lines
for (i = 1; i < this.points.length; i++) {
ctx.lineTo(this.points[i].x, this.points[i].y);
}
}

}

protected drawArrow(
Expand Down Expand Up @@ -2553,7 +2570,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);
Expand All @@ -2568,18 +2584,15 @@ function batchedDrawEdges(
e.drawArrow(
ctx, e.points[e.points.length - 2], e.points[e.points.length - 1], 3
);
// SDFGRenderer.rendered_elements_count++;
});
}

labelEdges.forEach(e => {
(e as InterstateEdge).drawLabel(renderer, ctx);
// SDFGRenderer.rendered_elements_count++;
});

deferredEdges.forEach(e => {
e.draw(renderer, ctx, mousepos);
// SDFGRenderer.rendered_elements_count++;
});

if (renderer.debug_draw) {
Expand Down Expand Up @@ -2609,21 +2622,18 @@ export function drawStateContents(
) < SDFV.STATE_LOD) {
node.simple_draw(renderer, ctx, mousePos);
node.debug_draw(renderer, ctx);
// SDFGRenderer.rendered_elements_count++;
continue;
}
} else {
if (lod && ppp > SDFV.NODE_LOD) {
node.simple_draw(renderer, ctx, mousePos);
node.debug_draw(renderer, ctx);
// SDFGRenderer.rendered_elements_count++;
continue;
}
}

node.draw(renderer, ctx, mousePos);
node.debug_draw(renderer, ctx);
// SDFGRenderer.rendered_elements_count++;

// Only draw connectors when close enough to see them
if (!lod || ppp < SDFV.CONNECTOR_LOD) {
Expand All @@ -2647,7 +2657,6 @@ export function drawStateContents(

c.draw(renderer, ctx, mousePos, edge);
c.debug_draw(renderer, ctx);
// SDFGRenderer.rendered_elements_count++;
});
node.out_connectors.forEach((c: Connector) => {

Expand All @@ -2665,7 +2674,6 @@ export function drawStateContents(

c.draw(renderer, ctx, mousePos, edge);
c.debug_draw(renderer, ctx);
// SDFGRenderer.rendered_elements_count++;
});
}
}
Expand Down Expand Up @@ -2706,13 +2714,11 @@ export function drawStateMachine(
if (lod && blockppp < SDFV.STATE_LOD) {
block.simple_draw(renderer, ctx, mousePos);
block.debug_draw(renderer, ctx);
// SDFGRenderer.rendered_elements_count++;
continue;
}

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) {
Expand Down Expand Up @@ -2740,7 +2746,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
);
Expand Down
72 changes: 57 additions & 15 deletions src/utils/sdfv_settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,9 @@ export class SDFVSettings {
'inclusiveRanges': false,
'useVerticalStateMachineLayout': false,
'useVerticalScrollNavigation': false,
// Hidden settings fields.
'adaptiveContentHiding': true,
'curvedEdges': true,
// Hidden settings fields.
'toolbar': true,
};

Expand Down Expand Up @@ -72,7 +73,10 @@ export class SDFVSettings {
const viewSettingsTitle = $('<div>', {
class: 'col-12',
}).append($('<h6>', {
text: 'View settings',
text: 'View Settings',
css: {
'font-weight': 'bold'
}
}));
$('<div>', {
class: 'row',
Expand All @@ -99,28 +103,61 @@ export class SDFVSettings {
'(hides data container names)',
'showDataDescriptorSizes', true
);

// Remove this setting as disabling the adaptive content hiding can cause
// massive performance issues. TODO: add sliders for LOD thresholds of sdfv.ts
// into an advanced settings menu.

// this.addToggle(
// root, 'Adaptively hide content when zooming out',
// 'adaptiveContentHiding', false, (value: boolean) => {
// if (this.renderer)
// (this.renderer.get_context() as any).lod = value;
// }
// );

this.addToggle(root, 'Use inclusive ranges', 'inclusiveRanges', true);
this.addToggle(
root, 'Use vertical state machine layout',
'useVerticalStateMachineLayout', true
);

const mouseSettingsTitle = $('<div>', {
class: 'col-12',
}).append($('<h6>', {
text: '',
})).append($('<h6>', {
text: 'Mouse Settings',
css: {
'font-weight': 'bold'
}
}));
$('<div>', {
class: 'row',
}).appendTo(root).append(mouseSettingsTitle);

this.addToggle(
root, 'Use vertical scroll navigation',
'useVerticalScrollNavigation', false
);

const performanceSettingsTitle = $('<div>', {
class: 'col-12',
}).append($('<h6>', {
text: '',
})).append($('<h6>', {
text: 'Performance Settings',
css: {
'font-weight': 'bold'
}
}));
$('<div>', {
class: 'row',
}).appendTo(root).append(performanceSettingsTitle);

// TODO: Remove this setting as disabling the adaptive content hiding can cause
// massive performance issues. TODO: add sliders for LOD thresholds of sdfv.ts
// into an advanced settings menu.
this.addToggle(
root, 'Adaptively hide content when zooming out (Warning: turning this off can cause\
huge 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
);
}

private constructModal(): JQuery<HTMLElement> {
Expand Down Expand Up @@ -277,4 +314,9 @@ export class SDFVSettings {
] as boolean;
}

public static get curvedEdges(): boolean {
return this.getInstance().settingsDict[
'curvedEdges'
] as boolean;
}
}

0 comments on commit 68e9f43

Please sign in to comment.