jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

patched redraw requests with image load callbacks during stabilization. Fixed size option correctly working for images and circular images.

flowchartTest
Alex de Mulder 9 years ago
parent
3d29ba586f
commit
5f4ebd0794
4 changed files with 787 additions and 770 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +723
    -717
      dist/vis.js
  2. +27
    -12
      lib/network/modules/CanvasRenderer.js
  3. +31
    -29
      lib/network/modules/PhysicsEngine.js
  4. +6
    -12
      lib/network/modules/components/nodes/shapes/image.js

+ 723
- 717
dist/vis.js
File diff suppressed because it is too large
View File


+ 27
- 12
lib/network/modules/CanvasRenderer.js View File

@ -21,22 +21,38 @@ class CanvasRenderer {
this.renderingActive = false; this.renderingActive = false;
this.renderRequests = 0; this.renderRequests = 0;
this.pixelRatio = undefined; this.pixelRatio = undefined;
this.allowRedrawRequests = true;
this.dragging = false; this.dragging = false;
this.body.emitter.on("dragStart", () => {this.dragging = true;});
this.body.emitter.on("dragEnd", () => this.dragging = false);
this.body.emitter.on("_redraw", () => {if (this.renderingActive === false) {this._redraw();}});
this.body.emitter.on("_requestRedraw", this._requestRedraw.bind(this));
this.body.emitter.on("_startRendering", () => {this.renderRequests += 1; this.renderingActive = true; this.startRendering();});
this.body.emitter.on("_stopRendering", () => {this.renderRequests -= 1; this.renderingActive = this.renderRequests > 0;});
this.body.emitter.on("dragStart", () => {
this.dragging = true;
});
this.body.emitter.on("dragEnd", () => this.dragging = false);
this.body.emitter.on("_redraw", () => {
if (this.renderingActive === false) {
this._redraw();
}
});
this.body.emitter.on("_blockRedrawRequests", () => {this.allowRedrawRequests = false;});
this.body.emitter.on("_allowRedrawRequests", () => {this.allowRedrawRequests = true; });
this.body.emitter.on("_requestRedraw", this._requestRedraw.bind(this));
this.body.emitter.on("_startRendering", () => {
this.renderRequests += 1;
this.renderingActive = true;
this.startRendering();
});
this.body.emitter.on("_stopRendering", () => {
this.renderRequests -= 1;
this.renderingActive = this.renderRequests > 0;
});
this.options = {}; this.options = {};
this.defaultOptions = { this.defaultOptions = {
hideEdgesOnDrag: false, hideEdgesOnDrag: false,
hideNodesOnDrag: false hideNodesOnDrag: false
} }
util.extend(this.options,this.defaultOptions);
util.extend(this.options, this.defaultOptions);
this._determineBrowserMethod(); this._determineBrowserMethod();
} }
@ -94,10 +110,10 @@ class CanvasRenderer {
* @private * @private
*/ */
_requestRedraw() { _requestRedraw() {
if (this.redrawRequested !== true && this.renderingActive === false) {
if (this.redrawRequested !== true && this.renderingActive === false && this.allowRedrawRequests === true) {
this.redrawRequested = true; this.redrawRequested = true;
if (this.requiresTimeout === true) { if (this.requiresTimeout === true) {
window.setTimeout(this._redraw.bind(this, false),0);
window.setTimeout(this._redraw.bind(this, false), 0);
} }
else { else {
window.requestAnimationFrame(this._redraw.bind(this, false)); window.requestAnimationFrame(this._redraw.bind(this, false));
@ -132,7 +148,6 @@ class CanvasRenderer {
ctx.clearRect(0, 0, w, h); ctx.clearRect(0, 0, w, h);
this.body.emitter.emit("beforeDrawing", ctx); this.body.emitter.emit("beforeDrawing", ctx);
// set scaling and translation // set scaling and translation
@ -176,7 +191,7 @@ class CanvasRenderer {
* @param {Boolean} [alwaysShow] * @param {Boolean} [alwaysShow]
* @private * @private
*/ */
_drawNodes(ctx,alwaysShow = false) {
_drawNodes(ctx, alwaysShow = false) {
var nodes = this.body.nodes; var nodes = this.body.nodes;
var nodeIndices = this.body.nodeIndices; var nodeIndices = this.body.nodeIndices;
var node; var node;
@ -195,7 +210,7 @@ class CanvasRenderer {
} }
// todo: replace check // todo: replace check
//else if (node.inArea() === true) { //else if (node.inArea() === true) {
node.draw(ctx);
node.draw(ctx);
//} //}
} }
} }

+ 31
- 29
lib/network/modules/PhysicsEngine.js View File

@ -2,12 +2,12 @@
* Created by Alex on 2/23/2015. * Created by Alex on 2/23/2015.
*/ */
import BarnesHutSolver from "./components/physics/BarnesHutSolver";
import Repulsion from "./components/physics/RepulsionSolver";
import HierarchicalRepulsion from "./components/physics/HierarchicalRepulsionSolver";
import SpringSolver from "./components/physics/SpringSolver";
import HierarchicalSpringSolver from "./components/physics/HierarchicalSpringSolver";
import CentralGravitySolver from "./components/physics/CentralGravitySolver";
import BarnesHutSolver from './components/physics/BarnesHutSolver';
import Repulsion from './components/physics/RepulsionSolver';
import HierarchicalRepulsion from './components/physics/HierarchicalRepulsionSolver';
import SpringSolver from './components/physics/SpringSolver';
import HierarchicalSpringSolver from './components/physics/HierarchicalSpringSolver';
import CentralGravitySolver from './components/physics/CentralGravitySolver';
var util = require('../../util'); var util = require('../../util');
@ -67,23 +67,23 @@ class PhysicsEngine {
} }
util.extend(this.options, this.defaultOptions); util.extend(this.options, this.defaultOptions);
this.body.emitter.on("initPhysics", () => {this.initPhysics();});
this.body.emitter.on("resetPhysics", () => {this.stopSimulation(); this.ready = false;});
this.body.emitter.on("disablePhysics", () => {this.physicsEnabled = false; this.stopSimulation();});
this.body.emitter.on("restorePhysics", () => {
this.body.emitter.on('initPhysics', () => {this.initPhysics();});
this.body.emitter.on('resetPhysics', () => {this.stopSimulation(); this.ready = false;});
this.body.emitter.on('disablePhysics', () => {this.physicsEnabled = false; this.stopSimulation();});
this.body.emitter.on('restorePhysics', () => {
this.setOptions(this.options); this.setOptions(this.options);
if (this.ready === true) { if (this.ready === true) {
this.stabilized = false; this.stabilized = false;
this.runSimulation(); this.runSimulation();
} }
}); });
this.body.emitter.on("startSimulation", () => {
this.body.emitter.on('startSimulation', () => {
if (this.ready === true) { if (this.ready === true) {
this.stabilized = false; this.stabilized = false;
this.runSimulation(); this.runSimulation();
} }
}) })
this.body.emitter.on("stopSimulation", () => {this.stopSimulation();});
this.body.emitter.on('stopSimulation', () => {this.stopSimulation();});
} }
setOptions(options) { setOptions(options) {
@ -104,12 +104,12 @@ class PhysicsEngine {
init() { init() {
var options; var options;
if (this.options.solver === "repulsion") {
if (this.options.solver === 'repulsion') {
options = this.options.repulsion; options = this.options.repulsion;
this.nodesSolver = new Repulsion(this.body, this.physicsBody, options); this.nodesSolver = new Repulsion(this.body, this.physicsBody, options);
this.edgesSolver = new SpringSolver(this.body, this.physicsBody, options); this.edgesSolver = new SpringSolver(this.body, this.physicsBody, options);
} }
else if (this.options.solver === "hierarchicalRepulsion") {
else if (this.options.solver === 'hierarchicalRepulsion') {
options = this.options.hierarchicalRepulsion; options = this.options.hierarchicalRepulsion;
this.nodesSolver = new HierarchicalRepulsion(this.body, this.physicsBody, options); this.nodesSolver = new HierarchicalRepulsion(this.body, this.physicsBody, options);
this.edgesSolver = new HierarchicalSpringSolver(this.body, this.physicsBody, options); this.edgesSolver = new HierarchicalSpringSolver(this.body, this.physicsBody, options);
@ -128,26 +128,27 @@ class PhysicsEngine {
if (this.physicsEnabled === true) { if (this.physicsEnabled === true) {
this.stabilized = false; this.stabilized = false;
if (this.options.stabilization.enabled === true) { if (this.options.stabilization.enabled === true) {
this.body.emitter.emit('_blockRedrawRequests');
this.stabilize(); this.stabilize();
} }
else { else {
this.ready = true; this.ready = true;
this.body.emitter.emit("zoomExtent", {duration: 0}, true)
this.body.emitter.emit('zoomExtent', {duration: 0}, true)
this.runSimulation(); this.runSimulation();
} }
} }
else { else {
this.ready = true; this.ready = true;
this.body.emitter.emit("_redraw");
this.body.emitter.emit('_redraw');
} }
} }
stopSimulation() { stopSimulation() {
this.stabilized = true; this.stabilized = true;
if (this.viewFunction !== undefined) { if (this.viewFunction !== undefined) {
this.body.emitter.off("initRedraw", this.viewFunction);
this.body.emitter.off('initRedraw', this.viewFunction);
this.viewFunction = undefined; this.viewFunction = undefined;
this.body.emitter.emit("_stopRendering");
this.body.emitter.emit('_stopRendering');
} }
} }
@ -155,12 +156,12 @@ class PhysicsEngine {
if (this.physicsEnabled === true) { if (this.physicsEnabled === true) {
if (this.viewFunction === undefined) { if (this.viewFunction === undefined) {
this.viewFunction = this.simulationStep.bind(this); this.viewFunction = this.simulationStep.bind(this);
this.body.emitter.on("initRedraw", this.viewFunction);
this.body.emitter.emit("_startRendering");
this.body.emitter.on('initRedraw', this.viewFunction);
this.body.emitter.emit('_startRendering');
} }
} }
else { else {
this.body.emitter.emit("_redraw");
this.body.emitter.emit('_redraw');
} }
} }
@ -180,7 +181,7 @@ class PhysicsEngine {
if (this.stabilized === true) { if (this.stabilized === true) {
if (this.stabilizationIterations > 1) { if (this.stabilizationIterations > 1) {
// trigger the "stabilized" event.
// trigger the 'stabilized' event.
// The event is triggered on the next tick, to prevent the case that // The event is triggered on the next tick, to prevent the case that
// it is fired while initializing the Network, in which case you would not // it is fired while initializing the Network, in which case you would not
// be able to catch it // be able to catch it
@ -191,7 +192,7 @@ class PhysicsEngine {
this.stabilizationIterations = 0; this.stabilizationIterations = 0;
this.startedStabilization = false; this.startedStabilization = false;
setTimeout(function () { setTimeout(function () {
me.body.emitter.emit("stabilized", params);
me.body.emitter.emit('stabilized', params);
}, 0); }, 0);
} }
else { else {
@ -202,7 +203,7 @@ class PhysicsEngine {
} }
/** /**
* A single simulation step (or "tick") in the physics simulation
* A single simulation step (or 'tick') in the physics simulation
* *
* @private * @private
*/ */
@ -218,7 +219,7 @@ class PhysicsEngine {
else { else {
// this is here to ensure that there is no start event when the network is already stable. // this is here to ensure that there is no start event when the network is already stable.
if (this.startedStabilization === false) { if (this.startedStabilization === false) {
this.body.emitter.emit("startStabilizing");
this.body.emitter.emit('startStabilizing');
this.startedStabilization = true; this.startedStabilization = true;
} }
} }
@ -432,7 +433,7 @@ class PhysicsEngine {
} }
if (this.stabilized === false && this.stabilizationSteps < this.options.stabilization.iterations) { if (this.stabilized === false && this.stabilizationSteps < this.options.stabilization.iterations) {
this.body.emitter.emit("stabilizationProgress", {steps: this.stabilizationSteps, total: this.options.stabilization.iterations});
this.body.emitter.emit('stabilizationProgress', {steps: this.stabilizationSteps, total: this.options.stabilization.iterations});
setTimeout(this._stabilizationBatch.bind(this),0); setTimeout(this._stabilizationBatch.bind(this),0);
} }
else { else {
@ -441,16 +442,17 @@ class PhysicsEngine {
} }
_finalizeStabilization() { _finalizeStabilization() {
this.body.emitter.emit('_allowRedrawRequests');
if (this.options.stabilization.zoomExtent === true) { if (this.options.stabilization.zoomExtent === true) {
this.body.emitter.emit("zoomExtent", {duration:0});
this.body.emitter.emit('zoomExtent', {duration:0});
} }
if (this.options.stabilization.onlyDynamicEdges === true) { if (this.options.stabilization.onlyDynamicEdges === true) {
this._restoreFrozenNodes(); this._restoreFrozenNodes();
} }
this.body.emitter.emit("stabilizationIterationsDone");
this.body.emitter.emit("_requestRedraw");
this.body.emitter.emit('stabilizationIterationsDone');
this.body.emitter.emit('_requestRedraw');
this.ready = true; this.ready = true;
} }

+ 6
- 12
lib/network/modules/components/nodes/shapes/image.js View File

@ -14,20 +14,14 @@ class Image extends CircleImageBase {
resize() { resize() {
if (!this.width || !this.height) { // undefined or 0 if (!this.width || !this.height) { // undefined or 0
var width, height; var width, height;
if (this.value) {
var scale = this.imageObj.height / this.imageObj.width;
if (scale !== undefined) {
width = this.options.size || this.imageObj.width;
height = this.options.size * scale || this.imageObj.height;
}
else {
width = 0;
height = 0;
}
var scale = this.imageObj.height / this.imageObj.width;
if (scale !== undefined) {
width = this.options.size * 2 || this.imageObj.width;
height = this.options.size * 2 * scale || this.imageObj.height;
} }
else { else {
width = this.imageObj.width;
height = this.imageObj.height;
width = 0;
height = 0;
} }
this.width = width; this.width = width;
this.height = height; this.height = height;

Write Preview
Loading…
Cancel
Save