Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vis#4042: Hide edges on zoom v2 #16

Merged
merged 15 commits into from
Jul 27, 2019
Merged

vis#4042: Hide edges on zoom v2 #16

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
f4cffca
enhance CanvasRenderer with new redrawZoom function that does not dra…
micahstubbs Jul 20, 2018
8c95eff
call new _requestRedrawZoom function from zoom InteractionHandler
micahstubbs Jul 20, 2018
45fd293
use zoomStart and zoomEnd events
micahstubbs Jul 20, 2018
a6d4621
add this.zooming status to match this.dragging
micahstubbs Jul 20, 2018
a794a1b
register hideEdgesOnZoom option
micahstubbs Jul 20, 2018
4a41ce1
document hideEdgesOnZoom
micahstubbs Jul 20, 2018
5626d0d
add type definition for hideEdgesOnZoom option
micahstubbs Jul 20, 2018
71aba0d
add hideEdgesOnZoom to setOptions function in InteractionHandler
micahstubbs Jul 20, 2018
eb399ca
set default option value for hideEdgesOnZoom in options config
micahstubbs Jul 20, 2018
972ec05
add redraw after zooming is complete
micahstubbs Jul 20, 2018
45033ca
update neighborhoodHighlight example to use new hideEdgesOnZoom option
micahstubbs Jul 20, 2018
97cd9c7
mute dev logging
micahstubbs Jul 20, 2018
0c4f9bf
remove commented code from earlier experiment
micahstubbs Jul 20, 2018
f3a7170
restore newline
micahstubbs Jul 20, 2018
993de55
restore newline above comment
micahstubbs Jul 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
use zoomStart and zoomEnd events
  • Loading branch information
@micahstubbs @mojoaxel
micahstubbs authored and mojoaxel committed Jul 26, 2019
commit 45fd2935bae6d3c913121abfdd33f6e3b7a5b4ea
129 changes: 66 additions & 63 deletions lib/network/modules/CanvasRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ class CanvasRenderer {
this.allowRedraw = true;

this.dragging = false;
this.zooming = false;
this.options = {};
this.defaultOptions = {
hideEdgesOnDrag: false,
Expand All @@ -81,6 +82,8 @@ class CanvasRenderer {
bindEventListeners() {
this.body.emitter.on("dragStart", () => { this.dragging = true; });
this.body.emitter.on("dragEnd", () => { this.dragging = false; });
this.body.emitter.on("zoomStart", () => {this.zooming = true; });
this.body.emitter.on("zoomEnd", () => {this.zooming = false; });
this.body.emitter.on("_resizeNodes", () => { this._resizeNodes(); });
this.body.emitter.on("_redraw", () => {
if (this.renderingActive === false) {
Expand All @@ -90,7 +93,6 @@ class CanvasRenderer {
this.body.emitter.on("_blockRedraw", () => {this.allowRedraw = false;});
this.body.emitter.on("_allowRedraw", () => {this.allowRedraw = true; this.redrawRequested = false;});
this.body.emitter.on("_requestRedraw", this._requestRedraw.bind(this));
this.body.emitter.on("_requestRedrawZoom", this._requestRedrawZoom.bind(this));
this.body.emitter.on("_startRendering", () => {
this.renderRequests += 1;
this.renderingActive = true;
Expand Down Expand Up @@ -228,12 +230,12 @@ class CanvasRenderer {
* Redraw the network with the current data on zoom
* @private
*/
_requestRedrawZoom() {
if (this.redrawRequested !== true && this.renderingActive === false && this.allowRedraw === true) {
this.redrawRequested = true;
this._requestNextFrame(() => {this._redrawZoom(false);}, 0);
}
}
// _requestRedrawZoom() {
// if (this.redrawRequested !== true && this.renderingActive === false && this.allowRedraw === true) {
// this.redrawRequested = true;
// this._requestNextFrame(() => {this._redrawZoom(false);}, 0);
// }
// }

/**
* Redraw the network with the current data
Expand Down Expand Up @@ -276,6 +278,7 @@ class CanvasRenderer {
ctx.closePath();

if (hidden === false) {
// same for zoom
if (this.dragging === false || (this.dragging === true && this.options.hideEdgesOnDrag === false)) {
this._drawEdges(ctx);
}
Expand Down Expand Up @@ -305,62 +308,62 @@ class CanvasRenderer {
* Only the nodes are drawn after which they are quickly drawn over.
* @private
*/
_redrawZoom(hidden = false) {
if (this.allowRedraw === true) {
this.body.emitter.emit("initRedraw");

this.redrawRequested = false;

// when the container div was hidden, this fixes it back up!
if (this.canvas.frame.canvas.width === 0 || this.canvas.frame.canvas.height === 0) {
this.canvas.setSize();
}

this.canvas.setTransform();

let ctx = this.canvas.getContext();

// clear the canvas
let w = this.canvas.frame.canvas.clientWidth;
let h = this.canvas.frame.canvas.clientHeight;
ctx.clearRect(0, 0, w, h);

// if the div is hidden, we stop the redraw here for performance.
if (this.canvas.frame.clientWidth === 0) {
return;
}

// set scaling and translation
ctx.save();
ctx.translate(this.body.view.translation.x, this.body.view.translation.y);
ctx.scale(this.body.view.scale, this.body.view.scale);

ctx.beginPath();
this.body.emitter.emit("beforeDrawing", ctx);
ctx.closePath();

// if (hidden === false) {
// if (this.dragging === false || (this.dragging === true && this.options.hideEdgesOnDrag === false)) {
// this._drawEdges(ctx);
// }
// }

if (this.dragging === false || (this.dragging === true && this.options.hideNodesOnDrag === false)) {
this._drawNodes(ctx, hidden);
}

ctx.beginPath();
this.body.emitter.emit("afterDrawing", ctx);
ctx.closePath();


// restore original scaling and translation
ctx.restore();
if (hidden === true) {
ctx.clearRect(0, 0, w, h);
}
}
}
// _redrawZoom(hidden = false) {
// if (this.allowRedraw === true) {
// this.body.emitter.emit("initRedraw");

// this.redrawRequested = false;

// // when the container div was hidden, this fixes it back up!
// if (this.canvas.frame.canvas.width === 0 || this.canvas.frame.canvas.height === 0) {
// this.canvas.setSize();
// }

// this.canvas.setTransform();

// let ctx = this.canvas.getContext();

// // clear the canvas
// let w = this.canvas.frame.canvas.clientWidth;
// let h = this.canvas.frame.canvas.clientHeight;
// ctx.clearRect(0, 0, w, h);

// // if the div is hidden, we stop the redraw here for performance.
// if (this.canvas.frame.clientWidth === 0) {
// return;
// }

// // set scaling and translation
// ctx.save();
// ctx.translate(this.body.view.translation.x, this.body.view.translation.y);
// ctx.scale(this.body.view.scale, this.body.view.scale);

// ctx.beginPath();
// this.body.emitter.emit("beforeDrawing", ctx);
// ctx.closePath();

// if (hidden === false) {
// if (this.dragging === false || (this.dragging === true && this.options.hideEdgesOnDrag === false)) {
// this._drawEdges(ctx);
// }
// }

// if (this.dragging === false || (this.dragging === true && this.options.hideNodesOnDrag === false)) {
// this._drawNodes(ctx, hidden);
// }

// ctx.beginPath();
// this.body.emitter.emit("afterDrawing", ctx);
// ctx.closePath();


// // restore original scaling and translation
// ctx.restore();
// if (hidden === true) {
// ctx.clearRect(0, 0, w, h);
// }
// }
// }

/**
* Redraw all nodes
Expand Down
2 changes: 1 addition & 1 deletion lib/network/modules/InteractionHandler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -482,7 +482,7 @@ class InteractionHandler {
this.drag.pointer.y = postScaleDragPointer.y;
}

this.body.emitter.emit('_requestRedrawZoom');
this.body.emitter.emit('_requestRedraw');

if (scaleOld < scale) {
this.body.emitter.emit('zoom', {direction: '+', scale: this.body.view.scale, pointer: pointer});
Expand Down