Skip to content

Commit 664e3a1

Browse files
r3coder3code
committed
PNG icons for manipulation and navigation button replaced with embedded SVG icon (visjs#31)
1 parent b0a050a commit 664e3a1

File tree

4 files changed

+113
-63
lines changed

4 files changed

+113
-63
lines changed

‎lib/network/modules/ManipulationSystem.css

+34-35
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,18 @@ div.vis-network div.vis-edit-mode {
2626
position:absolute;
2727
left: 0;
2828
top: 5px;
29-
height: 30px;
3029
}
3130

3231
/* FIXME: shouldn't the vis-close button be a child of the vis-manipulation div? */
3332

34-
div.vis-network div.vis-close {
33+
.vis-network .vis-close {
3534
position:absolute;
36-
right: 0;
37-
top: 0;
35+
right: 1px;
36+
top: 1px;
3837
width: 30px;
3938
height: 30px;
40-
41-
background-position: 20px 3px;
42-
background-repeat: no-repeat;
43-
background-image: url("img/network/cross.svg");
39+
opacity: 0.3;
40+
4441
cursor: pointer;
4542
-webkit-touch-callout: none;
4643
-webkit-user-select: none;
@@ -50,8 +47,24 @@ div.vis-network div.vis-close {
5047
user-select: none;
5148
}
5249

53-
div.vis-network div.vis-close:hover {
54-
opacity: 0.6;
50+
.vis-network .vis-close:hover {
51+
opacity: 1;
52+
}
53+
54+
.vis-network .vis-close:before, .vis-network .vis-close:after {
55+
position: absolute;
56+
left: 14px;
57+
content: ' ';
58+
height: 29px;
59+
width: 2px;
60+
background-color: #333;
61+
}
62+
63+
.vis-network .vis-close:before {
64+
transform: rotate(45deg);
65+
}
66+
.vis-network .vis-close:after {
67+
transform: rotate(-45deg);
5568
}
5669

5770
div.vis-network div.vis-manipulation div.vis-button,
@@ -64,11 +77,9 @@ div.vis-network div.vis-edit-mode div.vis-button {
6477
display:inline-block;
6578
background-position: 0px 0px;
6679
background-repeat:no-repeat;
67-
height:24px;
6880
margin-left: 10px;
69-
/*vertical-align:middle;*/
7081
cursor: pointer;
71-
padding: 0px 8px 0px 8px;
82+
padding: 0px 8px 0px 4px;
7283
-webkit-touch-callout: none;
7384
-webkit-user-select: none;
7485
-khtml-user-select: none;
@@ -85,10 +96,6 @@ div.vis-network div.vis-manipulation div.vis-button:active {
8596
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
8697
}
8798

88-
div.vis-network div.vis-manipulation div.vis-button.vis-back {
89-
background-image: url("img/network/backIcon.svg");
90-
}
91-
9299
div.vis-network div.vis-manipulation div.vis-button.vis-none:hover {
93100
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
94101
cursor: default;
@@ -98,39 +105,31 @@ div.vis-network div.vis-manipulation div.vis-button.vis-none:active {
98105
}
99106
div.vis-network div.vis-manipulation div.vis-button.vis-none {
100107
padding: 0;
108+
line-height: 26px;
101109
}
102110
div.vis-network div.vis-manipulation div.notification {
103111
margin: 2px;
104112
font-weight: bold;
105113
}
106114

107-
div.vis-network div.vis-manipulation div.vis-button.vis-add {
108-
background-image: url("img/network/addNodeIcon.svg");
109-
}
110-
111-
div.vis-network div.vis-manipulation div.vis-button.vis-edit,
112-
div.vis-network div.vis-edit-mode div.vis-button.vis-edit {
113-
background-image: url("img/network/editIcon.svg");
114-
}
115-
116115
div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode {
117116
background-color: #fcfcfc;
118117
border: 1px solid #cccccc;
119118
}
120119

121-
div.vis-network div.vis-manipulation div.vis-button.vis-connect {
122-
background-image: url("img/network/connectIcon.svg");
123-
}
124-
125-
div.vis-network div.vis-manipulation div.vis-button.vis-delete {
126-
background-image: url("img/network/deleteIcon.svg");
127-
}
128120
/* top right bottom left */
129121
div.vis-network div.vis-manipulation div.vis-label,
130122
div.vis-network div.vis-edit-mode div.vis-label {
131-
margin: 0 0 0 23px;
132-
line-height: 25px;
123+
display: flex;
124+
justify-content: center;
125+
align-items: center;
133126
}
127+
.vis-network .vis-button__icon {
128+
padding: 0 2px 0 0;
129+
line-height: 1;
130+
color: grey;
131+
}
132+
134133
div.vis-network div.vis-manipulation div.vis-separator-line {
135134
float:left;
136135
display:inline-block;

‎lib/network/modules/ManipulationSystem.js

+28-9
Original file line numberDiff line numberDiff line change
@@ -595,7 +595,9 @@ class ManipulationSystem {
595595

596596
// create the contents for the editMode button
597597
let locale = this.options.locales[this.options.locale];
598-
let button = this._createButton('editMode', 'vis-button vis-edit vis-edit-mode', locale['edit'] || this.options.locales['en']['edit']);
598+
let label = locale['edit'] || this.options.locales['en']['edit'];
599+
let icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M10.114 17.464H6.637v-3.477l8.692-8.692 3.477 3.477z" stroke-width="1.5"/><circle cx="12" cy="12" r="10"/></svg>';
600+
let button = this._createButton('editMode', 'vis-button vis-edit vis-edit-mode', icon, label);
599601
this.editModeDiv.appendChild(button);
600602

601603
// bind a hammer listener to the button, calling the function toggleEditMode.
@@ -693,7 +695,9 @@ class ManipulationSystem {
693695
* @private
694696
*/
695697
_createAddNodeButton(locale) {
696-
let button = this._createButton('addNode', 'vis-button vis-add', locale['addNode'] || this.options.locales['en']['addNode']);
698+
let label = locale['addNode'] || this.options.locales['en']['addNode'];
699+
let icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>';
700+
let button = this._createButton('addNode', 'vis-button vis-add', icon, label);
697701
this.manipulationDiv.appendChild(button);
698702
this._bindHammerToDiv(button, this.addNodeMode.bind(this));
699703
}
@@ -704,7 +708,9 @@ class ManipulationSystem {
704708
* @private
705709
*/
706710
_createAddEdgeButton(locale) {
707-
let button = this._createButton('addEdge', 'vis-button vis-connect', locale['addEdge'] || this.options.locales['en']['addEdge']);
711+
let label = locale['addEdge'] || this.options.locales['en']['addEdge'];
712+
let icon = '<svg xmlns="http://www.w3.org/2000/svg" stroke-linejoin="arcs" stroke-linecap="square" stroke-width="2" stroke="currentColor" fill="none" height="24" width="24"><g transform="matrix(.700038 0 0 .702684 3.024926 3.026417)" stroke-width="2.852"><circle cx="16.181" cy="5.496" r="3"/><circle cx="6.744" cy="16.217" r="3"/><path d="M13.723 8.29L9.12 13.67"/></g><circle cx="12.237" cy="11.68" r="10"/><g stroke-width="2"><path d="M15.896 13.344v3.907"/><path d="M13.942 15.298h3.907"/></g></svg>';
713+
let button = this._createButton('addEdge', 'vis-button vis-connect', icon, label);
708714
this.manipulationDiv.appendChild(button);
709715
this._bindHammerToDiv(button, this.addEdgeMode.bind(this));
710716
}
@@ -715,7 +721,9 @@ class ManipulationSystem {
715721
* @private
716722
*/
717723
_createEditNodeButton(locale) {
718-
let button = this._createButton('editNode', 'vis-button vis-edit', locale['editNode'] || this.options.locales['en']['editNode']);
724+
let label = locale['editNode'] || this.options.locales['en']['editNode'];
725+
let icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M10.114 17.464H6.637v-3.477l8.692-8.692 3.477 3.477z" stroke-width="1.5"/><circle cx="12" cy="12" r="10"/></svg>';
726+
let button = this._createButton('editNode', 'vis-button vis-edit', icon, label);
719727
this.manipulationDiv.appendChild(button);
720728
this._bindHammerToDiv(button, this.editNode.bind(this));
721729
}
@@ -726,7 +734,9 @@ class ManipulationSystem {
726734
* @private
727735
*/
728736
_createEditEdgeButton(locale) {
729-
let button = this._createButton('editEdge', 'vis-button vis-edit', locale['editEdge'] || this.options.locales['en']['editEdge']);
737+
let label = locale['editEdge'] || this.options.locales['en']['editEdge'];
738+
let icon = '<svg xmlns="http://www.w3.org/2000/svg" stroke-linejoin="arcs" stroke-linecap="square" stroke-width="2" stroke="currentColor" fill="none" height="24" width="24"><g transform="matrix(.700038 0 0 .702684 3.024926 3.026417)" stroke-width="2.852"><circle cx="16.181" cy="5.496" r="3"/><circle cx="6.744" cy="16.217" r="3"/><path d="M13.723 8.29L9.12 13.67"/></g><circle cx="12.237" cy="11.68" r="10"/><g stroke-width="2"><path d="M15.896 13.344v3.907"/><path d="M13.942 15.298h3.907"/></g></svg>';
739+
let button = this._createButton('editEdge', 'vis-button vis-edit', icon, label);
730740
this.manipulationDiv.appendChild(button);
731741
this._bindHammerToDiv(button, this.editEdgeMode.bind(this));
732742
}
@@ -743,7 +753,9 @@ class ManipulationSystem {
743753
} else {
744754
deleteBtnClass = 'vis-button vis-delete';
745755
}
746-
let button = this._createButton('delete', deleteBtnClass, locale['del'] || this.options.locales['en']['del']);
756+
let label = locale['del'] || this.options.locales['en']['del'];
757+
let icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>';
758+
let button = this._createButton('delete', deleteBtnClass, icon, label);
747759
this.manipulationDiv.appendChild(button);
748760
this._bindHammerToDiv(button, this.deleteSelected.bind(this));
749761
}
@@ -754,7 +766,9 @@ class ManipulationSystem {
754766
* @private
755767
*/
756768
_createBackButton(locale) {
757-
let button = this._createButton('back', 'vis-button vis-back', locale['back'] || this.options.locales['en']['back']);
769+
let icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"/><path d="M12 8l-4 4 4 4M16 12H9"/></svg>';
770+
let label = locale['back'] || this.options.locales['en']['back'];
771+
let button = this._createButton('back', 'vis-button vis-back', icon, label);
758772
this.manipulationDiv.appendChild(button);
759773
this._bindHammerToDiv(button, this.showManipulatorToolbar.bind(this));
760774
}
@@ -768,14 +782,19 @@ class ManipulationSystem {
768782
* @returns {HTMLElement}
769783
* @private
770784
*/
771-
_createButton(id, className, label, labelClassName = 'vis-label') {
785+
_createButton(id, className, svgIcon, label, labelClassName = 'vis-label') {
772786

773787
this.manipulationDOM[id+'Div'] = document.createElement('div');
774788
this.manipulationDOM[id+'Div'].className = className;
775789
this.manipulationDOM[id+'Label'] = document.createElement('div');
776790
this.manipulationDOM[id+'Label'].className = labelClassName;
777791
this.manipulationDOM[id+'Label'].innerHTML = label;
792+
this.manipulationDOM[id+'Icon'] = document.createElement('i');
793+
this.manipulationDOM[id+'Icon'].className = 'vis-button__icon';
794+
this.manipulationDOM[id+'Icon'].innerHTML = svgIcon ? svgIcon : '';
778795
this.manipulationDOM[id+'Div'].appendChild(this.manipulationDOM[id+'Label']);
796+
// do prepend icon before text
797+
this.manipulationDOM[id+'Label'].insertBefore(this.manipulationDOM[id+'Icon'],this.manipulationDOM[id+'Label'].firstChild);
779798
return this.manipulationDOM[id+'Div'];
780799
}
781800

@@ -786,7 +805,7 @@ class ManipulationSystem {
786805
*/
787806
_createDescription(label) {
788807
this.manipulationDiv.appendChild(
789-
this._createButton('description', 'vis-button vis-none', label)
808+
this._createButton('description', 'vis-button vis-none', '', label)
790809
);
791810
}
792811

‎lib/network/modules/components/NavigationHandler.css

+4-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
div.vis-network div.vis-navigation div.vis-button {
22
width:34px;
33
height:34px;
4+
color: grey; /* used to set svg icons color */
45
-moz-border-radius: 17px;
56
border-radius: 17px;
67
position:absolute;
78
display:inline-block;
8-
background-position: 2px 2px;
9+
background-position: 0 0;
910
background-repeat:no-repeat;
1011
cursor: pointer;
12+
padding: 3px 0 0 3px;
1113
-webkit-touch-callout: none;
1214
-webkit-user-select: none;
1315
-khtml-user-select: none;
@@ -17,45 +19,38 @@ div.vis-network div.vis-navigation div.vis-button {
1719
}
1820

1921
div.vis-network div.vis-navigation div.vis-button:hover {
20-
box-shadow: 0 0 3px 3px rgba(56, 207, 21, 0.30);
22+
box-shadow: 0 0 0 0 rgba(56, 207, 21, 0.30);
2123
}
2224

2325
div.vis-network div.vis-navigation div.vis-button:active {
2426
box-shadow: 0 0 1px 3px rgba(56, 207, 21, 0.95);
2527
}
2628

2729
div.vis-network div.vis-navigation div.vis-button.vis-up {
28-
background-image: url("img/network/upArrow.svg");
2930
bottom:50px;
3031
left:55px;
3132
}
3233
div.vis-network div.vis-navigation div.vis-button.vis-down {
33-
background-image: url("img/network/downArrow.svg");
3434
bottom:10px;
3535
left:55px;
3636
}
3737
div.vis-network div.vis-navigation div.vis-button.vis-left {
38-
background-image: url("img/network/leftArrow.svg");
3938
bottom:10px;
4039
left:15px;
4140
}
4241
div.vis-network div.vis-navigation div.vis-button.vis-right {
43-
background-image: url("img/network/rightArrow.svg");
4442
bottom:10px;
4543
left:95px;
4644
}
4745
div.vis-network div.vis-navigation div.vis-button.vis-zoomIn {
48-
background-image: url("img/network/plus.svg");
4946
bottom:10px;
5047
right:15px;
5148
}
5249
div.vis-network div.vis-navigation div.vis-button.vis-zoomOut {
53-
background-image: url("img/network/minus.svg");
5450
bottom:10px;
5551
right:55px;
5652
}
5753
div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
58-
background-image: url("img/network/zoomExtends.svg");
5954
bottom:50px;
6055
right:15px;
6156
}

‎lib/network/modules/components/NavigationHandler.js

+47-10
Original file line numberDiff line numberDiff line change
@@ -89,24 +89,61 @@ class NavigationHandler {
8989
this.cleanNavigation();
9090

9191
this.navigationDOM = {};
92-
var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
93-
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','_fit'];
94-
92+
var navigationBtns = [
93+
{
94+
className: 'up',
95+
action: '_moveUp',
96+
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"/><path d="M16 12l-4-4-4 4M12 16V9"/></svg>',
97+
},
98+
{
99+
className: 'down',
100+
action: '_moveDown',
101+
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"> <circle cx="12" cy="12" r="10"/><path d="M16 12l-4 4-4-4M12 8v7"/></svg>',
102+
},
103+
{
104+
className: 'left',
105+
action: '_moveLeft',
106+
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"/><path d="M12 8l-4 4 4 4M16 12H9"/></svg>',
107+
},
108+
{
109+
className: 'right',
110+
action: '_moveRight',
111+
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"/><path d="M12 8l4 4-4 4M8 12h7"/></svg>',
112+
},
113+
{
114+
className: 'zoomIn',
115+
action: '_zoomIn',
116+
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>',
117+
},
118+
{
119+
className: 'zoomOut',
120+
action: '_zoomOut',
121+
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg>',
122+
},
123+
{
124+
className: 'zoomExtends',
125+
action: '_fit',
126+
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M7.027 7.027l9.946 9.946m0-9.946l-9.946 9.946m6.792-10.43h3.64v3.64m-7.278-3.64h-3.64v3.64m7.278 7.278h3.64v-3.64m-7.278 3.64h-3.64v-3.64" stroke-width="1.6"/><circle cx="12.102" cy="12.102" r="10"/></svg>',
127+
},
128+
];
95129
this.navigationDOM['wrapper'] = document.createElement('div');
96130
this.navigationDOM['wrapper'].className = 'vis-navigation';
97131
this.canvas.frame.appendChild(this.navigationDOM['wrapper']);
98132

99-
for (var i = 0; i < navigationDivs.length; i++) {
100-
this.navigationDOM[navigationDivs[i]] = document.createElement('div');
101-
this.navigationDOM[navigationDivs[i]].className = 'vis-button vis-' + navigationDivs[i];
102-
this.navigationDOM['wrapper'].appendChild(this.navigationDOM[navigationDivs[i]]);
133+
for (var i = 0; i < navigationBtns.length; i++) {
134+
let btnName = navigationBtns[i].className
135+
this.navigationDOM[btnName] = document.createElement('div');
136+
let btnElement = this.navigationDOM[btnName]
137+
btnElement.className = 'vis-button vis-' + btnName;
138+
btnElement.innerHTML = navigationBtns[i].icon;
139+
this.navigationDOM['wrapper'].appendChild(btnElement);
103140

104-
var hammer = new Hammer(this.navigationDOM[navigationDivs[i]]);
105-
if (navigationDivActions[i] === "_fit") {
141+
var hammer = new Hammer(btnElement);
142+
if (navigationBtns[i].action === "_fit") {
106143
hammerUtil.onTouch(hammer, this._fit.bind(this));
107144
}
108145
else {
109-
hammerUtil.onTouch(hammer, this.bindToRedraw.bind(this,navigationDivActions[i]));
146+
hammerUtil.onTouch(hammer, this.bindToRedraw.bind(this, navigationBtns[i].action));
110147
}
111148

112149
this.navigationHammers.push(hammer);

0 commit comments

Comments
 (0)