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 10 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