Skip to content

Commit

Permalink
fix(layout): update layout when an edge is reconnected (#115)
Browse files Browse the repository at this point in the history 
Closes #114.
  • Loading branch information
@Thomaash
Thomaash committed Oct 1, 2019
1 parent 09f0726 commit 1c6da55
Show file tree
Hide file tree
Showing 68 changed files with 323 additions and 176 deletions.
1 change: 1 addition & 0 deletions dist/types/network/Network.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -849,6 +849,7 @@ export interface NodeOptions {
code?: string,
size?: number, // 50,
color?: string,
weight?: number | string,
};

image?: string | Image;
Expand Down
10 changes: 5 additions & 5 deletions dist/vis-network.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.vis .overlay {
.vis-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;

/* Must be displayed above for example selected Timeline items */
z-index: 10;
Expand Down
56 changes: 22 additions & 34 deletions dist/vis-network.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library.
*
* @version 0.0.0-no-version
* @date 2019-10-01T08:44:23Z
* @date 2019-10-01T19:56:39Z
*
* @copyright (c) 2011-2017 Almende B.V, http://almende.com
* @copyright (c) 2018-2019 visjs contributors, https://github.com/visjs
Expand Down Expand Up @@ -21084,6 +21084,8 @@ getCjsExportFromNamespace(Activator);
*/

function Activator$1(container) {
var _this = this;

this.active = false;
this.dom = {
container: container
Expand All @@ -21094,18 +21096,17 @@ function Activator$1(container) {
this.hammer = hammer(this.dom.overlay);
this.hammer.on('tap', this._onTapOverlay.bind(this)); // block all touch events (except tap)

var me = this;
var events = ['tap', 'doubletap', 'press', 'pinch', 'pan', 'panstart', 'panmove', 'panend'];
events.forEach(function (event) {
me.hammer.on(event, function (event) {
event.stopPropagation();
_this.hammer.on(event, function (event) {
event.srcEvent.stopPropagation();
});
}); // attach a click event to the window, in order to deactivate when clicking outside the timeline

if (document && document.body) {
this.onClick = function (event) {
if (!_hasParent(event.target, container)) {
me.deactivate();
_this.deactivate();
}
};

Expand Down Expand Up @@ -21178,7 +21179,7 @@ Activator$1.prototype.activate = function () {

Activator$1.prototype.deactivate = function () {
this.active = false;
this.dom.overlay.style.display = '';
this.dom.overlay.style.display = 'block';
util.removeClassName(this.dom.container, 'vis-active');
this.keycharm.unbind('esc', this.escListener);
this.emit('change');
Expand All @@ -21194,7 +21195,7 @@ Activator$1.prototype.deactivate = function () {
Activator$1.prototype._onTapOverlay = function (event) {
// activate the container
this.activate();
event.stopPropagation();
event.srcEvent.stopPropagation();
};
/**
* Test whether the element has the requested parent element somewhere in
Expand Down Expand Up @@ -25593,7 +25594,9 @@ function (_NodeBase) {
var iconSize = Number(this.options.icon.size);

if (this.options.icon.code !== undefined) {
ctx.font = (selected ? "bold " : "") + iconSize + "px " + this.options.icon.face; // draw icon
ctx.font = [this.options.icon.weight != null ? this.options.icon.weight : selected ? "bold" : "", // If the weight is forced (for example to make Font Awesome 5 work
// properly) substitute slightly bigger size for bold font face.
(this.options.icon.weight != null && selected ? 5 : 0) + iconSize + "px", this.options.icon.face].join(" "); // draw icon

ctx.fillStyle = this.options.icon.color || "black";
ctx.textAlign = "center";
Expand Down Expand Up @@ -30160,7 +30163,7 @@ function () {
/**
* Set or overwrite options for the edge
* @param {Object} options an object with options
* @returns {null|boolean} null if no options, boolean if date changed
* @returns {undefined|boolean} undefined if no options, true if layout affecting data changed, false otherwise.
*/


Expand All @@ -30169,15 +30172,10 @@ function () {
value: function setOptions(options) {
if (!options) {
return;
} // record old value of this.options.hidden

} // Following options if changed affect the layout.

var oldHidden = this.options.hidden;

if (oldHidden === undefined || oldHidden === null) {
oldHidden = false;
}

var affectsLayout = typeof options.physics !== "undefined" && this.options.physics !== options.physics || typeof options.hidden !== "undefined" && (this.options.hidden || false) !== (options.hidden || false) || typeof options.from !== "undefined" && this.options.from !== options.from || typeof options.to !== "undefined" && this.options.to !== options.to;
Edge.parseOptions(this.options, options, true, this.globalOptions);

if (options.id !== undefined) {
Expand All @@ -30203,29 +30201,15 @@ function () {
var pile = [options, this.options, this.defaultOptions];
this.chooser = ComponentUtil.choosify('edge', pile); // update label Module

this.updateLabelModule(options);
var dataChanged = this.updateEdgeType(); // if anything has been updates, reset the selection width and the hover width
this.updateLabelModule(options); // Update edge type, this if changed affects the layout.

affectsLayout = this.updateEdgeType() || affectsLayout; // if anything has been updates, reset the selection width and the hover width

this._setInteractionWidths(); // A node is connected when it has a from and to node that both exist in the network.body.nodes.


this.connect();
var newHidden = this.options.hidden;

if (newHidden === undefined || newHidden === null) {
newHidden = false;
}

if (newHidden != oldHidden || options.physics !== undefined) {
dataChanged = true;
} // there might be a similar problem with physics, but a bug has not been reported


if (options.physics !== undefined) {
dataChanged = true;
}

return dataChanged;
return affectsLayout;
}
/**
*
Expand Down Expand Up @@ -46267,6 +46251,10 @@ var allOptions$1 = {
color: {
string: string
},
weight: {
string: string,
number: number
},
__type__: {
object: object
}
Expand Down
2 changes: 1 addition & 1 deletion dist/vis-network.esm.js.map
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/vis-network.esm.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/vis-network.esm.min.js.map
View file

Large diffs are not rendered by default.

56 changes: 22 additions & 34 deletions dist/vis-network.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library.
*
* @version 0.0.0-no-version
* @date 2019-10-01T08:44:23Z
* @date 2019-10-01T19:56:39Z
*
* @copyright (c) 2011-2017 Almende B.V, http://almende.com
* @copyright (c) 2018-2019 visjs contributors, https://github.com/visjs
Expand Down Expand Up @@ -21090,6 +21090,8 @@
*/

function Activator$1(container) {
var _this = this;

this.active = false;
this.dom = {
container: container
Expand All @@ -21100,18 +21102,17 @@
this.hammer = hammer(this.dom.overlay);
this.hammer.on('tap', this._onTapOverlay.bind(this)); // block all touch events (except tap)

var me = this;
var events = ['tap', 'doubletap', 'press', 'pinch', 'pan', 'panstart', 'panmove', 'panend'];
events.forEach(function (event) {
me.hammer.on(event, function (event) {
event.stopPropagation();
_this.hammer.on(event, function (event) {
event.srcEvent.stopPropagation();
});
}); // attach a click event to the window, in order to deactivate when clicking outside the timeline

if (document && document.body) {
this.onClick = function (event) {
if (!_hasParent(event.target, container)) {
me.deactivate();
_this.deactivate();
}
};

Expand Down Expand Up @@ -21184,7 +21185,7 @@

Activator$1.prototype.deactivate = function () {
this.active = false;
this.dom.overlay.style.display = '';
this.dom.overlay.style.display = 'block';
util.removeClassName(this.dom.container, 'vis-active');
this.keycharm.unbind('esc', this.escListener);
this.emit('change');
Expand All @@ -21200,7 +21201,7 @@
Activator$1.prototype._onTapOverlay = function (event) {
// activate the container
this.activate();
event.stopPropagation();
event.srcEvent.stopPropagation();
};
/**
* Test whether the element has the requested parent element somewhere in
Expand Down Expand Up @@ -25599,7 +25600,9 @@
var iconSize = Number(this.options.icon.size);

if (this.options.icon.code !== undefined) {
ctx.font = (selected ? "bold " : "") + iconSize + "px " + this.options.icon.face; // draw icon
ctx.font = [this.options.icon.weight != null ? this.options.icon.weight : selected ? "bold" : "", // If the weight is forced (for example to make Font Awesome 5 work
// properly) substitute slightly bigger size for bold font face.
(this.options.icon.weight != null && selected ? 5 : 0) + iconSize + "px", this.options.icon.face].join(" "); // draw icon

ctx.fillStyle = this.options.icon.color || "black";
ctx.textAlign = "center";
Expand Down Expand Up @@ -30166,7 +30169,7 @@
/**
* Set or overwrite options for the edge
* @param {Object} options an object with options
* @returns {null|boolean} null if no options, boolean if date changed
* @returns {undefined|boolean} undefined if no options, true if layout affecting data changed, false otherwise.
*/


Expand All @@ -30175,15 +30178,10 @@
value: function setOptions(options) {
if (!options) {
return;
} // record old value of this.options.hidden

} // Following options if changed affect the layout.

var oldHidden = this.options.hidden;

if (oldHidden === undefined || oldHidden === null) {
oldHidden = false;
}

var affectsLayout = typeof options.physics !== "undefined" && this.options.physics !== options.physics || typeof options.hidden !== "undefined" && (this.options.hidden || false) !== (options.hidden || false) || typeof options.from !== "undefined" && this.options.from !== options.from || typeof options.to !== "undefined" && this.options.to !== options.to;
Edge.parseOptions(this.options, options, true, this.globalOptions);

if (options.id !== undefined) {
Expand All @@ -30209,29 +30207,15 @@
var pile = [options, this.options, this.defaultOptions];
this.chooser = ComponentUtil.choosify('edge', pile); // update label Module

this.updateLabelModule(options);
var dataChanged = this.updateEdgeType(); // if anything has been updates, reset the selection width and the hover width
this.updateLabelModule(options); // Update edge type, this if changed affects the layout.

affectsLayout = this.updateEdgeType() || affectsLayout; // if anything has been updates, reset the selection width and the hover width

this._setInteractionWidths(); // A node is connected when it has a from and to node that both exist in the network.body.nodes.


this.connect();
var newHidden = this.options.hidden;

if (newHidden === undefined || newHidden === null) {
newHidden = false;
}

if (newHidden != oldHidden || options.physics !== undefined) {
dataChanged = true;
} // there might be a similar problem with physics, but a bug has not been reported


if (options.physics !== undefined) {
dataChanged = true;
}

return dataChanged;
return affectsLayout;
}
/**
*
Expand Down Expand Up @@ -46273,6 +46257,10 @@
color: {
string: string
},
weight: {
string: string,
number: number
},
__type__: {
object: object
}
Expand Down
2 changes: 1 addition & 1 deletion dist/vis-network.js.map
View file

Large diffs are not rendered by default.

0 comments on commit 1c6da55

Please sign in to comment.