|
@ -17,7 +17,7 @@ class CanvasRenderer { |
|
|
this.renderingActive = false; |
|
|
this.renderingActive = false; |
|
|
this.renderRequests = 0; |
|
|
this.renderRequests = 0; |
|
|
this.pixelRatio = undefined; |
|
|
this.pixelRatio = undefined; |
|
|
this.allowRedrawRequests = true; |
|
|
|
|
|
|
|
|
this.allowRedraw = true; |
|
|
|
|
|
|
|
|
this.dragging = false; |
|
|
this.dragging = false; |
|
|
this.options = {}; |
|
|
this.options = {}; |
|
@ -42,8 +42,8 @@ class CanvasRenderer { |
|
|
this._redraw(); |
|
|
this._redraw(); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
this.body.emitter.on("_blockRedrawRequests", () => {this.allowRedrawRequests = false;}); |
|
|
|
|
|
this.body.emitter.on("_allowRedrawRequests", () => {this.allowRedrawRequests = true; }); |
|
|
|
|
|
|
|
|
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("_requestRedraw", this._requestRedraw.bind(this)); |
|
|
this.body.emitter.on("_startRendering", () => { |
|
|
this.body.emitter.on("_startRendering", () => { |
|
|
this.renderRequests += 1; |
|
|
this.renderRequests += 1; |
|
@ -123,7 +123,7 @@ class CanvasRenderer { |
|
|
* @private |
|
|
* @private |
|
|
*/ |
|
|
*/ |
|
|
_requestRedraw() { |
|
|
_requestRedraw() { |
|
|
if (this.redrawRequested !== true && this.renderingActive === false && this.allowRedrawRequests === true) { |
|
|
|
|
|
|
|
|
if (this.redrawRequested !== true && this.renderingActive === false && this.allowRedraw === true) { |
|
|
this.redrawRequested = true; |
|
|
this.redrawRequested = true; |
|
|
if (this.requiresTimeout === true) { |
|
|
if (this.requiresTimeout === true) { |
|
|
window.setTimeout(() => {this._redraw(false);}, 0); |
|
|
window.setTimeout(() => {this._redraw(false);}, 0); |
|
@ -135,63 +135,65 @@ class CanvasRenderer { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
_redraw(hidden = false) { |
|
|
_redraw(hidden = false) { |
|
|
this.body.emitter.emit("initRedraw"); |
|
|
|
|
|
|
|
|
if (this.allowRedraw === true) { |
|
|
|
|
|
this.body.emitter.emit("initRedraw"); |
|
|
|
|
|
|
|
|
this.redrawRequested = false; |
|
|
|
|
|
let ctx = this.canvas.frame.canvas.getContext('2d'); |
|
|
|
|
|
|
|
|
this.redrawRequested = false; |
|
|
|
|
|
let ctx = this.canvas.frame.canvas.getContext('2d'); |
|
|
|
|
|
|
|
|
// 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(); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// 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(); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
if (this.pixelRatio === undefined) { |
|
|
|
|
|
this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || |
|
|
|
|
|
ctx.mozBackingStorePixelRatio || |
|
|
|
|
|
ctx.msBackingStorePixelRatio || |
|
|
|
|
|
ctx.oBackingStorePixelRatio || |
|
|
|
|
|
ctx.backingStorePixelRatio || 1); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
if (this.pixelRatio === undefined) { |
|
|
|
|
|
this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || |
|
|
|
|
|
ctx.mozBackingStorePixelRatio || |
|
|
|
|
|
ctx.msBackingStorePixelRatio || |
|
|
|
|
|
ctx.oBackingStorePixelRatio || |
|
|
|
|
|
ctx.backingStorePixelRatio || 1); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0); |
|
|
|
|
|
|
|
|
ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0); |
|
|
|
|
|
|
|
|
// clear the canvas
|
|
|
|
|
|
let w = this.canvas.frame.canvas.clientWidth; |
|
|
|
|
|
let h = this.canvas.frame.canvas.clientHeight; |
|
|
|
|
|
ctx.clearRect(0, 0, w, h); |
|
|
|
|
|
|
|
|
// clear the canvas
|
|
|
|
|
|
let w = this.canvas.frame.canvas.clientWidth; |
|
|
|
|
|
let h = this.canvas.frame.canvas.clientHeight; |
|
|
|
|
|
ctx.clearRect(0, 0, w, h); |
|
|
|
|
|
|
|
|
// 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); |
|
|
|
|
|
|
|
|
// 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(); |
|
|
|
|
|
|
|
|
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 (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); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
if (this.dragging === false || (this.dragging === true && this.options.hideNodesOnDrag === false)) { |
|
|
|
|
|
this._drawNodes(ctx, hidden); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
if (this.controlNodesActive === true) { |
|
|
|
|
|
this._drawControlNodes(ctx); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
if (this.controlNodesActive === true) { |
|
|
|
|
|
this._drawControlNodes(ctx); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
ctx.beginPath(); |
|
|
|
|
|
//this.physics.nodesSolver._debug(ctx,"#F00F0F");
|
|
|
|
|
|
this.body.emitter.emit("afterDrawing", ctx); |
|
|
|
|
|
ctx.closePath(); |
|
|
|
|
|
// restore original scaling and translation
|
|
|
|
|
|
ctx.restore(); |
|
|
|
|
|
|
|
|
ctx.beginPath(); |
|
|
|
|
|
//this.physics.nodesSolver._debug(ctx,"#F00F0F");
|
|
|
|
|
|
this.body.emitter.emit("afterDrawing", ctx); |
|
|
|
|
|
ctx.closePath(); |
|
|
|
|
|
// restore original scaling and translation
|
|
|
|
|
|
ctx.restore(); |
|
|
|
|
|
|
|
|
if (hidden === true) { |
|
|
|
|
|
ctx.clearRect(0, 0, w, h); |
|
|
|
|
|
|
|
|
if (hidden === true) { |
|
|
|
|
|
ctx.clearRect(0, 0, w, h); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|